/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [prompt, setPrompt] = useState(""); const [language, setLanguage] = useState("python"); const [generatedCode, setGeneratedCode] = useState(""); const [isLoading, setIsLoading] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt, language }) }); const data = await response.json(); setGeneratedCode(data.code); } catch (error) { console.error("Code generation failed", error); } finally { setIsLoading(false); } }; return (

🤖 AI Code Generator

setPrompt(e.target.value)}
          placeholder="Describe the code you want to generate..."
          style={styles.textarea}
          rows={4}
        />
        <button 
          type="submit" 
          disabled={isLoading}
          style={styles.button}
        >
          {isLoading ? "Generating..." : "Generate Code"}
        </button>
      </form>
      {generatedCode && (
        <pre style={styles.codeBlock}>
          <code>{generatedCode}</code>
        </pre>
      )}
      <footer style={styles.footer}>
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top" 
          style={styles.sourceLink}
        >
          View Source
        </a>
      </footer>
    </div>
  );
}

const styles = {
  container: {
    fontFamily: 'system-ui, sans-serif',
    maxWidth: '600px',
    margin: '0 auto',
    padding: '20px',
    textAlign: 'center',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
  },
  select: {
    padding: '10px',
    fontSize: '16px',
  },
  textarea: {
    padding: '10px',
    fontSize: '16px',
  },
  button: {
    padding: '10px',
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    cursor: 'pointer',
  },
  codeBlock: {
    backgroundColor: '#f4f4f4',
    padding: '15px',
    borderRadius: '5px',
    textAlign: 'left',
    overflowX: 'auto',
  },
  footer: {
    marginTop: '20px',
    fontSize: '12px',
  },
  sourceLink: {
    color: '#666',
    textDecoration: 'none',
  }
};

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST") {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();
    
    const { prompt, language } = await request.json();
    
    const languagePrompts = {
      python: "Generate a clean, concise Python code snippet for: ",
      java: "Generate a clean, concise Java code snippet for: ",
      html: "Generate a clean, semantic HTML code snippet for: ",
      css: "Generate a clean, minimal CSS code snippet for: ",
      cpp: "Generate a clean, concise C++ code snippet for: "
    };

const completion = await openai.chat.completions.create({
      messages: [
        { 
          role: "system", 
          content: "You are an expert code generator. Generate clean, readable code." 
        },
        { 
          role: "user", 
          content: `${languagePrompts[language]} ${prompt}` 
        }
      ],
      model: "gpt-4o-mini",
      max_tokens: 300,
    });

const code = completion.choices[0].message.content || "Code generation failed";

return new Response(JSON.stringify({ code }), {
      headers: { "Content-Type": "application/json" }
    });
  }

return new Response(`
    <html>
      <head>
        <title>AI Code Generator</title>
        <script src="https://esm.town/v/std/catch"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "Content-Type": "text/html" }
  });
}</article></body></html>

CodeGeneratorApp