JSON to DALL-E Image Generator

\n );\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n }\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n form {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n textarea {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n }\n button {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .error {\n color: red;\n }\n #loadingIndicator {\n margin-top: 10px;\n font-style: italic;\n }\n #imageContainer {\n margin-top: 20px;\n }\n img {\n max-width: 100%;\n height: auto;\n }\n .source-link {\n margin-top: 20px;\n }\n`;\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const url = new URL(request.url);\n\n // Initialize OpenAI here to avoid issues with Deno.env in browser context\n if (!openai) {\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n openai = new OpenAI({ apiKey });\n }\n\n if (request.method === \"POST\" && url.pathname === \"/generate\") {\n try {\n const { json } = await request.json();\n\n // Generate DALL-E prompt using GPT\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: systemPrompt,\n },\n {\n role: \"user\",\n content: JSON.stringify(json),\n },\n ],\n model: \"gpt-3.5-turbo\",\n max_tokens: 100,\n });\n\n const dallePrompt = completion.choices[0].message.content;\n\n // Generate DALL-E image\n const response = await openai.images.generate({\n model: \"dall-e-3\",\n prompt: dallePrompt,\n n: 1,\n size: \"1024x1024\",\n });\n\n return new Response(JSON.stringify({ imageUrl: response.data[0].url, dallePrompt }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Prepare the HTML with the React root element\n const html = `\n \n \n JSON to DALL-E Image Generator\n \n \n \n

\n \n \n \n `;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/weaverwhale/jsonToDalleForm/code/main.tsx","extension","actionData","errors"]