/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function App() { const [prompt, setPrompt] = useState(""); const [output, setOutput] = useState([]); const [generatedCode, setGeneratedCode] = useState(""); const [isCodeVisible, setIsCodeVisible] = useState(false); const [userInput, setUserInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const generateCode = useCallback(async (prompt) => { if (!prompt.trim()) { setGeneratedCode(""); return; } setIsLoading(true); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); setGeneratedCode(result.generatedCode); } catch (error) { setOutput([`Error generating code: ${error.message}`]); setGeneratedCode(""); } finally { setIsLoading(false); } }, []); const debouncedGenerateCode = useCallback(debounce(generateCode, 450), [generateCode]); const executeCode = useCallback(() => { if (!generatedCode) return; let output = []; try { const originalConsoleLog = console.log; console.log = (...args) => { const logString = args.map(arg => String(arg)).join(" "); output.push(extractMessage(logString)); }; // Execute the generated code with the current userInput eval(` const userInput = ${JSON.stringify(userInput)}; ${generatedCode} `); console.log = originalConsoleLog; } catch (error) { output.push(`Error executing code: ${error.message}`); } setOutput(output); }, [generatedCode, userInput]); useEffect(() => { debouncedGenerateCode(prompt); }, [prompt, debouncedGenerateCode]); useEffect(() => { executeCode(); }, [userInput, executeCode]); const toggleCodeVisibility = () => { setIsCodeVisible(!isCodeVisible); }; return (

Instant Prompt-to-JS & Preview

Enter or edit your prompt below to see the script preview update. Edit the value for userInput as rendered in the code.

setPrompt(e.target.value)}
        placeholder="Enter your prompt here... (e.g., 'reverse the string')"
      />
      <input
        type="text"
        value={userInput}
        onChange={(e) => setUserInput(e.target.value)}
        placeholder="Enter user input here..."
      />
      <div className="output">
        <h2>Console Output:</h2>
        {isLoading ? <div className="loading">Generating code...</div> : (
          output.map((log, index) => (
            <div key={index} className="log-entry">
              <span className="log-message">{log}</span>
            </div>
          ))
        )}
      </div>
      {generatedCode && (
        <div className="code-accordion">
          <button onClick={toggleCodeVisibility} className="accordion-toggle">
            {isCodeVisible ? "Hide Generated Code" : "View Generated Code"}
          </button>
          {isCodeVisible && (
            <pre className="generated-code">
              <code>{generatedCode}</code>
            </pre>
          )}
        </div>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

function stripCodeFences(code: string): string {
  return code.replace(/^```javascript\n|^```\n|```$/gm, "").trim();
}

function extractMessage(logOutput: string): string {
  try {
    const parsed = JSON.parse(logOutput);
    return parsed.message || logOutput;
  } catch (e) {
    return logOutput;
  }
}

const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

async function retryWithBackoff(fn: () => Promise<any>, maxRetries = 5) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      return await fn();
    } catch (error) {
      if (error.status === 429) {
        const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000;
        console.log(`Rate limited. Retrying in ${delay}ms...`);
        await sleep(delay);
        retries++;
      } else {
        throw error;
      }
    }
  }
  throw new Error("Max retries reached");
}

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/generate") {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();

const { prompt } = await request.json();

try {
      const completion = await retryWithBackoff(() =>
        openai.chat.completions.create({
          messages: [
            {
              role: "system",
              content:
                "You are a JavaScript code generator. Generate valid JavaScript code based on the given prompt, without any explanations or markdown code fences. Include console.log statements at the end of the code to output the results of important operations or final values. Do not wrap the code in ```javascript or ``` tags. The variable 'userInput' is available in the code environment and contains the user's input. Use this variable directly in your generated code when the prompt refers to user input.",
            },
            { role: "user", content: prompt },
          ],
          model: "gpt-4o-mini",
          max_tokens: 500,
        })
      );

let generatedCode = stripCodeFences(completion.choices[0].message.content);

return new Response(JSON.stringify({ generatedCode }), {
        headers: { "Content-Type": "application/json" },
      });
    } catch (error) {
      console.error("Error generating code:", error);
      return new Response(JSON.stringify({ error: "Failed to generate code. Please try again later." }), {
        status: 500,
        headers: { "Content-Type": "application/json" },
      });
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>JavaScript Codebed with User Input</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    },
  );
}

prompt_to_code_auto_refresh_codebed