[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",25,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","a19d57bc-2761-11f0-86ff-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n\nfunction App() {\n const [prompt, setPrompt] = useState(\"\");\n const [output, setOutput] = useState([]);\n const [generatedCode, setGeneratedCode] = useState(\"\");\n const [isCodeVisible, setIsCodeVisible] = useState(false);\n const [userInput, setUserInput] = useState(\"\");\n\n const generateCode = useCallback(async (prompt) => {\n if (!prompt.trim()) {\n setGeneratedCode(\"\");\n return;\n }\n try {\n const response = await fetch(\"/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt }),\n });\n const result = await response.json();\n setGeneratedCode(result.generatedCode);\n } catch (error) {\n setOutput([`Error generating code: ${error.message}`]);\n setGeneratedCode(\"\");\n }\n }, []);\n\n const debouncedGenerateCode = useCallback(debounce(generateCode, 1000), [generateCode]);\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 with the current userInput\n eval(`\n const userInput = ${JSON.stringify(userInput)};\n ${generatedCode}\n `);\n\n console.log = originalConsoleLog;\n } catch (error) {\n output.push(`Error executing code: ${error.message}`);\n }\n setOutput(output);\n }, [generatedCode, userInput]);\n\n useEffect(() => {\n debouncedGenerateCode(prompt);\n }, [prompt, debouncedGenerateCode]);\n\n useEffect(() => {\n executeCode();\n }, [userInput, executeCode]);\n\n const toggleCodeVisibility = () => {\n setIsCodeVisible(!isCodeVisible);\n };\n\n return (\n

JavaScript Codebed with User Input

\n Enter your prompt below. You can use the variable userInput in your prompt to refer to the user's input.\n For example: \"Create a function that reverses the string stored in userInput\".\n

\n setPrompt(e.target.value)}\n placeholder=\"Enter your prompt here... (e.g., 'Create a function that reverses the string stored in userInput')\"\n />\n setUserInput(e.target.value)}\n placeholder=\"Enter user input here...\"\n />\n

Console Output:

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

\n {log}\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\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 const completion = await openai.chat.completions.create({\n messages: [\n { 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.\" },\n { role: \"user\", content: prompt },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 500,\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 }\n\n return new Response(`\n \n \n JavaScript Codebed with User Input\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\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}\ntextarea, input[type=\"text\"] {\n width: 100%;\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\ntextarea {\n height: 100px;\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`;","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n\nfunction App() {\n const [prompt, setPrompt] = useState(\"\");\n const [output, setOutput] = useState([]);\n const [generatedCode, setGeneratedCode] = useState(\"\");\n const [isCodeVisible, setIsCodeVisible] = useState(false);\n const [userInput, setUserInput] = useState(\"\");\n const outputEndRef = useRef(null);\n\n const generateCode = useCallback(async (prompt) => {\n if (!prompt.trim()) {\n setGeneratedCode(\"\");\n setOutput([]);\n return;\n }\n try {\n const response = await fetch(\"/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt }),\n });\n const result = await response.json();\n setGeneratedCode(result.generatedCode);\n setOutput([{ type: 'system', content: 'Generated code. Type your input below:' }]);\n } catch (error) {\n setOutput([{ type: 'system', content: `Error generating code: ${error.message}` }]);\n setGeneratedCode(\"\");\n }\n }, []);\n\n const debouncedGenerateCode = useCallback(debounce(generateCode, 1000), [generateCode]);\n\n const executeCode = useCallback(() => {\n if (!generatedCode || !userInput) return;\n\n let newOutput = [...output];\n newOutput.push({ type: 'user', content: userInput });\n\n try {\n const originalConsoleLog = console.log;\n console.log = (...args) => {\n const logString = args.map(arg => String(arg)).join(' ');\n newOutput.push({ type: 'system', content: extractMessage(logString) });\n };\n\n // Execute the generated code with the current userInput\n eval(`\n const userInput = ${JSON.stringify(userInput)};\n ${generatedCode}\n `);\n\n console.log = originalConsoleLog;\n } catch (error) {\n newOutput.push({ type: 'system', content: `Error executing code: ${error.message}` });\n }\n setOutput(newOutput);\n setUserInput(\"\");\n }, [generatedCode, userInput, output]);\n\n useEffect(() => {\n debouncedGenerateCode(prompt);\n }, [prompt, debouncedGenerateCode]);\n\n useEffect(() => {\n outputEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [output]);\n\n const handleInputKeyPress = (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n executeCode();\n }\n };\n\n const toggleCodeVisibility = () => {\n setIsCodeVisible(!isCodeVisible);\n };\n\n return (\n

Interactive JavaScript Console

\n Enter your prompt below to generate an interactive program.\n For example: \"Create a Hangman game that asks for letter guesses\".\n

\n setPrompt(e.target.value)}\n placeholder=\"Enter your prompt here...\"\n />\n

Console Output:

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

\n {log.type === 'user' ? 'User: ' : ''}{log.content}\n

\n ))}\n

\n setUserInput(e.target.value)}\n onKeyPress={handleInputKeyPress}\n placeholder=\"Type your input here and press Enter\"\n className=\"console-input\"\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\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 const completion = await openai.chat.completions.create({\n messages: [\n { 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. Do not wrap the code in \\`\\`\\`javascript or \\`\\`\\` tags.\n\nThe code should be designed for an interactive console environment where:\n1. The program starts by printing an initial message or prompt to the user.\n2. It then waits for user input.\n3. After receiving input (stored in the 'userInput' variable), it processes the input and provides a response.\n4. This cycle of waiting for input and responding continues until the program ends.\n\nUse console.log() for all output. The 'userInput' variable will contain the latest user input each time the code runs.\n\nFor example, for a simple echo program:\n\nconsole.log(\"Echo program. Type 'exit' to end.\");\nif (userInput.toLowerCase() === 'exit') {\n console.log(\"Goodbye!\");\n} else {\n console.log(\"You said: \" + userInput);\n console.log(\"Enter another message:\");\n}\n\nEnsure the program provides clear prompts for user input and informative responses.` },\n { role: \"user\", content: prompt },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 500,\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 }\n\n return new Response(`\n \n \n Interactive JavaScript Console\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\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}\ntextarea, .console-input {\n width: 100%;\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-family: monospace;\n}\ntextarea {\n height: 100px;\n}\n.output {\n margin-top: 20px;\n background-color: #f8f8f8;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 10px;\n}\n.console {\n height: 300px;\n overflow-y: auto;\n margin-bottom: 10px;\n padding: 10px;\n background-color: #000;\n color: #00ff00;\n font-family: monospace;\n}\n.log-entry {\n margin-bottom: 5px;\n}\n.log-entry.user {\n color: #ff9900;\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`;","createdAt",["D",1731455775607],"branchVersion","branchId","a19a7876-2761-11f0-86ff-569c3dd06744","id","a19a2b50-2761-11f0-86ff-569c3dd06744","prompt_to_code_auto_refresh_codebed",["D",1746196072500],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","4da41b95-98f3-4ccd-b2bf-bd1a5558f69c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","cd9ed03e-e204-4250-b49c-f7aeab76bc29","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",34,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","trob","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybXFIWGhwanQ4bmJSeVgwWmw5MUdIS0ZaOEgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":149,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":150,"_79":151,"_81":152,"_83":25},"tree",[144],"files",[144],"counts",{"_133":134,"_135":61,"_136":134,"_137":138,"_139":140},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_27":132},"a22ec558-2761-11f0-86ff-569c3dd06744","parentId","latest",["D",1731455775607],24,"label",[28],"pulls",0,"branches","forks","envVars",{"_141":134,"_143":134},"connections",{"_141":134,"_142":134},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":145,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_146":147,"_27":148},["D",1731455775607],"children",[],[28],["D",1746196072500],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":186,"_187":188,"_189":190,"_191":25,"_192":25,"_193":25,"_194":49,"_195":-5,"_196":-7,"_197":-7,"_198":134,"_199":25,"_200":25,"_201":-5,"_202":25,"_203":25,"_204":25,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":85,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v25