🤖 AI Code Generator

\n \n setPrompt(e.target.value)}\n placeholder=\"Describe the code you want to generate...\"\n style={styles.textarea}\n rows={4}\n />\n \n \n {generatedCode && (\n

\n          {generatedCode}\n

\n )}\n \n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: 'system-ui, sans-serif',\n maxWidth: '600px',\n margin: '0 auto',\n padding: '20px',\n textAlign: 'center',\n },\n form: {\n display: 'flex',\n flexDirection: 'column',\n gap: '10px',\n },\n select: {\n padding: '10px',\n fontSize: '16px',\n },\n textarea: {\n padding: '10px',\n fontSize: '16px',\n },\n button: {\n padding: '10px',\n backgroundColor: '#007bff',\n color: 'white',\n border: 'none',\n cursor: 'pointer',\n },\n codeBlock: {\n backgroundColor: '#f4f4f4',\n padding: '15px',\n borderRadius: '5px',\n textAlign: 'left',\n overflowX: 'auto',\n },\n footer: {\n marginTop: '20px',\n fontSize: '12px',\n },\n sourceLink: {\n color: '#666',\n textDecoration: 'none',\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n \n const { prompt, language } = await request.json();\n \n const languagePrompts = {\n python: \"Generate a clean, concise Python code snippet for: \",\n java: \"Generate a clean, concise Java code snippet for: \",\n html: \"Generate a clean, semantic HTML code snippet for: \",\n css: \"Generate a clean, minimal CSS code snippet for: \",\n cpp: \"Generate a clean, concise C++ code snippet for: \"\n };\n\n const completion = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are an expert code generator. Generate clean, readable code.\" \n },\n { \n role: \"user\", \n content: `${languagePrompts[language]} ${prompt}` \n }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n const code = completion.choices[0].message.content || \"Code generation failed\";\n\n return new Response(JSON.stringify({ code }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n return new Response(`\n \n \n AI Code Generator\n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/mrshorts/CodeGeneratorApp/code/main.tsx","extension","actionData","errors"]