;\n}\n\nfunction PromptLines({ lines }) {\n return (\n

\n {lines.map((line, index) => (\n

{line}

\n ))}\n

\n );\n}\n\nfunction App() {\n const [promptLines, setPromptLines] = useState([]);\n const [currentLine, setCurrentLine] = useState(\"\");\n const [output, setOutput] = useState([]);\n const [generatedCode, setGeneratedCode] = useState(\"\");\n const [isCodeVisible, setIsCodeVisible] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const generateCode = useCallback(async (promptLines: string[]) => {\n if (promptLines.length === 0) {\n setGeneratedCode(\"\");\n return;\n }\n setIsLoading(true);\n try {\n const response = await fetch(\"/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt: promptLines.join(\"\\n\") }),\n });\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const result = await response.json();\n setGeneratedCode(result.generatedCode);\n } catch (error) {\n setOutput([`Error generating code: ${error.message}`]);\n setGeneratedCode(\"\");\n } finally {\n setIsLoading(false);\n }\n }, []);\n\n const executeCode = useCallback(() => {\n if (!generatedCode) return;\n\n let output = [];\n try {\n const originalConsoleLog = console.log;\n console.log = (...args) => {\n const logString = args.map(arg => String(arg)).join(\" \");\n output.push(extractMessage(logString));\n };\n\n // Execute the generated code\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer();\n \n const executeGeneratedCode = new Function('scene', 'camera', 'renderer', 'THREE', generatedCode);\n executeGeneratedCode(scene, camera, renderer, THREE);\n\n console.log = originalConsoleLog;\n } catch (error) {\n output.push(`Error executing code: ${error.message}`);\n }\n setOutput(output);\n }, [generatedCode]);\n\n\n useEffect(() => {\n executeCode();\n }, [executeCode]);\n\n const toggleCodeVisibility = () => {\n setIsCodeVisible(!isCodeVisible);\n };\n\n const handleAddLine = async (e) => {\n e.preventDefault();\n if (currentLine.trim()) {\n const newPromptLines = [...promptLines, currentLine.trim()];\n setCurrentLine(\"\");\n setPromptLines(newPromptLines);\n await generateCode(newPromptLines);\n }\n };\n\n const resetSession = () => {\n setPromptLines([]);\n setCurrentLine(\"\");\n setOutput([]);\n setGeneratedCode(\"\");\n setIsCodeVisible(false);\n setIsLoading(false);\n };\n\n return (\n

Three.js Scene Generator

\n Enter a prompt to generate a Three.js scene. Add one line at a time and press Enter.\n

\n \n

\n setCurrentLine(e.target.value)}\n placeholder=\"Enter a line of your Three.js scene prompt...\"\n />\n \n \n \n \n

Console Output:

\n {isLoading ?

Generating code...

: (\n output.map((log, index) => (\n

\n {log}\n

\n ))\n )}\n

\n {generatedCode && (\n

\n \n {isCodeVisible && (\n

\n              {generatedCode}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nfunction stripCodeFences(code: string): string {\n return code.replace(/^```javascript\\n|^```\\n|```$/gm, \"\").trim();\n}\n\nfunction extractMessage(logOutput: string): string {\n try {\n const parsed = JSON.parse(logOutput);\n return parsed.message || logOutput;\n } catch (e) {\n return logOutput;\n }\n}\n\nconst sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));\n\nasync function retryWithBackoff(fn: () => Promise, maxRetries = 5) {\n let retries = 0;\n while (retries < maxRetries) {\n try {\n return await fn();\n } catch (error) {\n if (error.status === 429) {\n const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000;\n console.log(`Rate limited. Retrying in ${delay}ms...`);\n await sleep(delay);\n retries++;\n } else {\n throw error;\n }\n }\n }\n throw new Error(\"Max retries reached\");\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const { prompt } = await request.json();\n\n try {\n const completion = await retryWithBackoff(() =>\n openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a Three.js code generator. Generate valid JavaScript code using Three.js 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. Do not use import statements. The variables 'scene', 'camera', 'renderer', and 'THREE' are available in the code environment. Use these variables directly in your generated code. Focus on creating 3D scenes, geometries, materials, and animations. If you need an animation loop, use the provided requestAnimationFrame and cancelAnimationFrame functions instead of the global ones.\",\n },\n { role: \"user\", content: prompt },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 500,\n })\n );\n\n let generatedCode = stripCodeFences(completion.choices[0].message.content);\n\n return new Response(JSON.stringify({ generatedCode }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error generating code:\", error);\n return new Response(JSON.stringify({ error: \"Failed to generate code. Please try again later.\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Three.js Scene Generator\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n }\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\nh1 {\n color: #333;\n}\np {\n margin-bottom: 15px;\n}\ncode {\n background-color: #f0f0f0;\n padding: 2px 4px;\n border-radius: 4px;\n}\ninput[type=\"text\"] {\n width: calc(100% - 100px);\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\nbutton {\n padding: 8px 15px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\nbutton:hover {\n background-color: #45a049;\n}\n.prompt-lines {\n margin-bottom: 10px;\n padding: 10px;\n background-color: #f8f8f8;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n.reset-button {\n margin-left: 10px;\n background-color: #f44336;\n}\n.reset-button:hover {\n background-color: #d32f2f;\n}\n.prompt-lines {\n margin-bottom: 10px;\n padding: 10px;\n background-color: #f8f8f8;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n.prompt-line {\n margin-bottom: 5px;\n}\n.output {\n margin-top: 20px;\n background-color: #f8f8f8;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 10px;\n}\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n.code-accordion {\n margin-top: 20px;\n}\n.accordion-toggle {\n width: 100%;\n text-align: left;\n background-color: #f1f1f1;\n color: #444;\n padding: 10px;\n border: none;\n outline: none;\n transition: 0.4s;\n cursor: pointer;\n}\n.accordion-toggle:hover {\n background-color: #ddd;\n}\n.generated-code {\n background-color: #f8f8f8;\n border: 1px solid #ddd;\n border-top: none;\n padding: 10px;\n max-height: 300px;\n overflow-y: auto;\n}\n.log-entry {\n background-color: #fff;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 10px;\n margin-bottom: 10px;\n font-family: monospace;\n}\n.log-message {\n color: #333;\n}\n.loading {\n text-align: center;\n padding: 20px;\n font-style: italic;\n color: #666;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/JamesAndrew/tenaciousPlumWoodpecker/code/main.tsx","extension","actionData","errors"]