Code Commenter

\n);\n\nfunction App() {\n const [input, setInput] = useState(\"\");\n const [output, setOutput] = useState(\"\");\n const [language, setLanguage] = useState(\"javascript\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleInputChange = (e) => {\n setInput(e.target.value);\n };\n\n const handleLanguageChange = (e) => {\n setLanguage(e.target.value);\n };\n\n const handleSubmit = async () => {\n try {\n setIsLoading(true);\n const response = await fetch(\"/comment\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ code: input, language }),\n });\n const data = await response.json();\n setIsLoading(false);\n setOutput(data.commentedCode);\n } catch (error) {\n console.error(\"Error:\", error);\n setOutput(\"An error occurred while processing the code.\");\n }\n };\n\n useEffect(() => {\n if (output) {\n Prism.highlightAll();\n }\n }, [output]);\n\n return (\n

\n \n

\n \n \n

\n {isLoading ? (\n \n ) : (\n

\n            \n              {output}\n            \n

\n )}\n

\n );\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/comment\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const { code, language } = await request.json();\n\n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: \"You are a helpful assistant that adds concise and useful comments to code.\" },\n { role: \"user\", content: `Comment this ${language} code with concise useful comments. Return only the complete commented code:\\n\\n${code}` },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 1000,\n });\n\n return new Response(JSON.stringify({ commentedCode: completion.choices[0].message.content }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const html = `\n \n \n Code Commenter\n \n \n \n \n

\n \n \n \n \n `;\n\n return new Response(html, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n}\n\n.spinner {\n margin: 100px auto 0;\n width: 70px;\n text-align: center;\n}\n\n.spinner > div {\n width: 18px;\n height: 18px;\n background-color: #333;\n border-radius: 100%;\n display: inline-block;\n animation: sk-bouncedelay 1.4s infinite ease-in-out both;\n}\n\n.spinner .bounce1 {\n animation-delay: -0.32s;\n}\n\n.spinner .bounce2 {\n animation-delay: -0.16s;\n}\n\n@keyframes sk-bouncedelay {\n 0%, 80%, 100% { \n transform: scale(0);\n } 40% { \n transform: scale(1.0);\n }\n}\n`;\n\nexport { App };","deleted","label",[98],"permalink","https://www.val.town/x/JamesAndrew/codecommenter/code/main.tsx","extension","actionData","errors"]