Code Debugging Assistant

${highlighted}

`;\n } catch {\n return `

${content}

`;\n }\n };\n\n // Configure marked for enhanced markdown rendering\n marked.setOptions({\n highlight: function(code, lang) {\n try {\n return hljs.highlight(code, { language: lang || \"plaintext\" }).value;\n } catch {\n return code;\n }\n },\n breaks: true,\n gfm: true,\n });\n\n const formatMarkdown = (content) => {\n try {\n // Convert markdown to HTML with syntax highlighting\n return marked(content);\n } catch {\n return content;\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n const userMessage = {\n role: \"user\",\n content: input,\n type: input.includes(\"```\") ? \"code\" : \"problem\",\n };\n\n setMessages((prevMessages) => [...prevMessages, userMessage]);\n setInput(\"\");\n setIsLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/debug\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n messages: [...messages, userMessage],\n context: {\n language: userMessage.type === \"code\"\n ? detectLanguage(input)\n : null,\n },\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to get response\");\n }\n\n const data = await response.json();\n setMessages((prevMessages) => [...prevMessages, data.message]);\n } catch (error) {\n console.error(\"Error:\", error);\n setError(error.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

\n {messages.map((message, index) => (\n \n ))}\n {isLoading &&

Analyzing...

}\n {error &&

{error}

}\n

\n );\n}\n\nfunction client() {\n // Load highlight.js and markdown CSS\n const links = [\n {\n rel: \"stylesheet\",\n href: \"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css\",\n },\n {\n rel: \"stylesheet\",\n href: \"https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown-dark.min.css\",\n },\n ];\n\n links.forEach(linkProps => {\n const link = document.createElement(\"link\");\n Object.entries(linkProps).forEach(([key, value]) => {\n link[key] = value;\n });\n document.head.appendChild(link);\n });\n\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/debug\") {\n const { messages, context } = await request.json();\n const lastUserMessage = messages[messages.length - 1].content;\n\n // Function to search StackOverflow\n async function searchStackOverflow(query: string) {\n try {\n const response = await fetch(\n `https://api.stackexchange.com/2.3/search/advanced?order=desc&sort=relevance&q=${\n encodeURIComponent(query)\n }&site=stackoverflow`,\n {\n headers: {\n \"User-Agent\": \"ValTown Debug Assistant/1.0\",\n },\n },\n );\n\n if (!response.ok) {\n console.error(\"StackOverflow API error:\", response.statusText);\n return null;\n }\n\n const data = await response.json();\n\n // Extract top 3 most relevant results\n const topResults = data.items.slice(0, 3).map(item => ({\n title: item.title,\n link: item.link,\n score: item.score,\n tags: item.tags,\n }));\n\n return topResults;\n } catch (error) {\n console.error(\"Error searching StackOverflow:\", error);\n return null;\n }\n }\n\n // Search StackOverflow for relevant answers\n const stackOverflowResults = await searchStackOverflow(lastUserMessage);\n\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n const client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\",\n });\n\n try {\n const systemPrompt = `\nYou are an **expert programming assistant** specializing in **debugging, optimization, and providing coding solutions**. Your role is to deliver actionable, clear, and concise advice for resolving coding issues.\n\n## Goals\n1. **Identify Issues:** Detect syntax errors, logical flaws, performance bottlenecks, and security vulnerabilities.\n2. **Provide Solutions:** Offer specific and practical recommendations with code examples where necessary.\n3. **Explain Causes:** Describe the underlying reasons for the issues in a way that builds understanding.\n4. **Suggest Best Practices:** Recommend coding standards, optimizations, and preventive measures.\n5. **Reference Documentation:** Share authoritative sources like official documentation, relevant tutorials, or community discussions for further reading.\n\n---\n\n## Context\n### StackOverflow Insights\n${\n stackOverflowResults\n ? `\nHere are **relevant StackOverflow threads** related to the issue:\n${\n stackOverflowResults.map(result =>\n `- [**${result.title}**](${result.link}) \n **Score:** ${result.score} | **Tags:** ${result.tags.join(\", \")}`\n ).join(\"\\n\")\n }\nIncorporate insights from these discussions if applicable.\n`\n : \"No relevant StackOverflow results were provided.\"\n }\n\n### Code Snippet Analysis Focus\n1. **Syntax Errors**: Missing or incorrect syntax.\n2. **Logical Errors**: Misbehaving logic or unexpected behavior.\n3. **Performance Issues**: Slow execution, resource inefficiency, or scalability concerns.\n4. **Security Vulnerabilities**: Flaws that might expose the system to attacks.\n5. **Potential Improvements**: Suggestions for cleaner, more maintainable, or optimized code.\n\n---\n\n### Diagnostic Approach\nWhen analyzing the problem:\n1. Use **step-by-step diagnostic steps** to pinpoint issues.\n2. Provide **actionable solutions** with clear examples and code snippets.\n3. Offer links to **relevant documentation or tutorials** for further understanding.\n\n### Response Formatting\n- **Headings and Bullet Points**: For clarity and logical separation.\n- **Code Blocks**: Include formatted code snippets using markdown (\\`\\`\\`).\n- **Links**: Share relevant and authoritative resources.\n- **Emphasis**: Use bold or italics to highlight key points.\n\n---\n\n### Output Expectations\n- Start with a **summary of the issue**.\n- Break down your response into **clear sections**: Problem, Cause, Solution, and Best Practices.\n- Keep your tone professional, concise, and solution-oriented.\n\n> 💡 Always aim to make the response easy to follow, even for non-experts.\n`;\n\n const enhancedMessages = [\n { role: \"system\", content: systemPrompt },\n ...messages,\n ];\n\n const response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: enhancedMessages,\n max_tokens: 1500,\n });\n\n const generatedMessage = response.choices[0].message;\n\n // Append StackOverflow references if available\n if (stackOverflowResults) {\n generatedMessage.content += `\\n\\n### 🔗 Relevant StackOverflow Resources\\n${\n stackOverflowResults.map(result => `- [${result.title}](${result.link}) (Score: ${result.score})`).join(\"\\n\")\n }`;\n }\n\n return Response.json({ message: generatedMessage });\n } catch (error) {\n console.error(\"Error calling Cerebras API:\", error);\n\n if (error.status === 429) {\n return Response.json({ error: \"Debugging service rate limit reached. Please try again later.\" }, {\n status: 429,\n });\n } else {\n return Response.json({ error: `API Error: ${error.message}` }, { status: 500 });\n }\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Code Debugging Assistant\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// CSS remains unchanged from previous version\nconst css = `\nbody {\n font-family: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #1e1e1e;\n color: #d4d4d4;\n}\n\n.debug-container {\n width: 100%;\n max-width: 800px;\n height: 90vh;\n display: flex;\n flex-direction: column;\n border: 1px solid #333;\n border-radius: 8px;\n overflow: hidden;\n background-color: #252526;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n background-color: #1e1e1e;\n}\n\n.message {\n margin-bottom: 15px;\n padding: 15px;\n border-radius: 8px;\n max-width: 100%;\n line-height: 1.6;\n}\n\n.message.code {\n background-color: #2d2d2d;\n font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;\n white-space: pre-wrap;\n word-break: break-all;\n}\n\n.message.user {\n background-color: #264f78;\n color: white;\n}\n\n.message.assistant {\n background-color: #1e1e1e;\n color: #9cdcfe;\n border: 1px solid #333;\n}\n\n.message.assistant h1,\n.message.assistant h2,\n.message.assistant h3 {\n color: #4ec9b0;\n margin-top: 15px;\n margin-bottom: 10px;\n border-bottom: 1px solid #333;\n padding-bottom: 5px;\n}\n\n.message.assistant strong {\n color: #569cd6;\n}\n\n.message.assistant blockquote {\n border-left: 4px solid #4ec9b0;\n padding-left: 10px;\n color: #6a9955;\n margin: 10px 0;\n font-style: italic;\n}\n\n.message.assistant code {\n background-color: #2d2d2d;\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n.message.assistant pre {\n background-color: #2d2d2d;\n padding: 10px;\n border-radius: 5px;\n overflow-x: auto;\n}\n\n.error-message {\n background-color: #ff000033;\n color: #f14c4c;\n padding: 10px;\n border-radius: 8px;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.chat-input-form {\n display: flex;\n padding: 10px;\n background-color: #252526;\n border-top: 1px solid #333;\n}\n\ntextarea {\n flex-grow: 1;\n padding: 10px;\n background-color: #1e1e1e;\n color: #d4d4d4;\n border: 1px solid #333;\n border-radius: 4px;\n margin-right: 10px;\n font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;\n resize: vertical;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #0e639c;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #1f6faf;\n}\n\nbutton:disabled {\n background-color: #555;\n cursor: not-allowed;\n}\n\n.source-link {\n text-align: center;\n padding: 10px;\n font-size: 0.8em;\n background-color: #252526;\n}\n\n.source-link a {\n color: #4ec9b0;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n\n/* Markdown Specific Styles */\n.markdown-body {\n background-color: transparent !important;\n color: #d4d4d4 !important;\n}\n`;",["D",1737458161895],"version",42,"currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal",{"_94":154,"_96":155,"_127":156,"_143":157,"_158":-5},"633ea5ca-d4f0-11ef-b120-e6cdfca9ef9f","stevekrouse","cerebrasTemplate",7,"prDisabledHint","interval","description","Cerebras Inference template This val shows you how you can deploy an app using Cerebras Inference on Val Town\nin seconds. What is Cerebras? Cerebras is an American chip manufacturer that\nproduces large wafer chips that deliver mind-blowing LLM inference speeds.\nAs of this writing on Jan 17, 2025, Cerebras Inference \nprovides Llama 3.18b, 3.1 70b, and 3.370b at a jaw-dropping 2k tokens per second –\nthat's 50x faster than what the frontier labs produce. Llama 3.370b at 2k tokens\nper second is particularly noteworthy because it is\n a GPT-4-class model . This level\nof intelligence at that level of speed will unlock whole new classes of applications. Quick start Set up Cerebras Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Once Cerebras is set up in your Val Town account, there are two ways to get started: Fork this app and customize it (or ask Townie AI to customize it) Start a new chat with Townie AI and copy & paste\nthe following instructions: . Use Cerebras for AI on the backend like so:\n\nconst { OpenAI } = await import(\"https://esm.sh/openai\");\nconst client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\"\n});\nconst response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: [],\n});\nconst generatedText = response.choices[0].message.content; For example, the val in this template was created by asking\n Townie AI to \"Make a chatgpt clone\",\nthen I hit shift-enter twice, and then pasted in the instructions on\nhow to use Cerebras from above, then hit enter. Townie built this app on its first try, in about 20 seconds. Sample apps Cerebras Searcher - a Perplexity clone that uses the SerpAPI to do RAG\nand summaries with Cerebras ( requires a SerpAPI key ) Cerebras Coder - an app that\ngenerates websites in a second with Cerebras Cerebras Debater - an\napp that truly shows Cerebras's speed: it's Cerebras talking to Cerebras in a debate","latestEvaluation","slug","sakshamkapoor2911/Code_Debugger","versions",[167,171,175,179,183,187,191,195,199,203],{"_98":168,"_143":144,"_169":170},["D",1737458161895],"n","1",{"_98":172,"_143":173,"_169":174},["D",1737458088886],41,"2",{"_98":176,"_143":177,"_169":178},["D",1737457616235],40,"3",{"_98":180,"_143":181,"_169":182},["D",1737457485810],39,"4",{"_98":184,"_143":185,"_169":186},["D",1737456526232],38,"5",{"_98":188,"_143":189,"_169":190},["D",1737456489133],37,"6",{"_98":192,"_143":193,"_169":194},["D",1737456000147],36,"7",{"_98":196,"_143":197,"_169":198},["D",1737455891359],35,"8",{"_98":200,"_143":201,"_169":202},["D",1737455641623],34,"9",{"_98":204,"_143":205,"_169":206},["D",1737455580867],33,"10","hasNext","routes/_app","actionData","errors"]