AI Image Generator

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"GET\") {\n return new Response(\n `\n \n \n \n \n \n AI Image Generator\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n }\n );\n }\n\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n\n const { prompt, useProModel } = await request.json();\n\n if (!prompt) {\n return new Response(JSON.stringify({ error: \"Prompt is required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const REPLICATE_API_KEY = Deno.env.get(\"REPLICATE_API_KEY\");\n\n if (REPLICATE_API_KEY) {\n const modelVersion = useProModel ? \"black-forest-labs/flux-1.1-pro\" : \"black-forest-labs/flux-schnell\";\n const settings = {\n outputFormat: \"jpg\",\n outputQuality: 90,\n megapixels: \"1\",\n };\n\n console.log(\"Sending initial request to Replicate...\");\n const response = await fetch(`https://api.replicate.com/v1/models/${modelVersion}/predictions`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${REPLICATE_API_KEY}`,\n },\n body: JSON.stringify({\n input: {\n prompt: prompt,\n output_format: settings.outputFormat,\n output_quality: settings.outputQuality,\n disable_safety_checker: true,\n megapixels: settings.megapixels,\n },\n }),\n });\n\n const prediction = await response.json();\n console.log(\"Initial response:\", JSON.stringify(prediction, null, 2));\n\n let resultData;\n while (true) {\n console.log(\"Checking result...\");\n const resultResponse = await fetch(prediction.urls.get, {\n headers: {\n \"Authorization\": `Token ${REPLICATE_API_KEY}`,\n },\n });\n resultData = await resultResponse.json();\n console.log(\"Poll response:\", JSON.stringify(resultData, null, 2));\n\n if (resultData.status === \"succeeded\" || resultData.status === \"failed\") {\n break;\n }\n\n await new Promise(resolve => setTimeout(resolve, 1000));\n }\n\n if (resultData.status === \"succeeded\") {\n console.log(\"Generation succeeded!\");\n let imageUrl: string | undefined;\n\n if (Array.isArray(resultData.output)) {\n imageUrl = resultData.output[0];\n } else if (typeof resultData.output === \"string\") {\n imageUrl = resultData.output;\n }\n\n if (imageUrl) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const timestamp = new Date().getTime();\n const imageName = `generated-image-${timestamp}.jpg`;\n\n const imageResponse = await fetch(imageUrl);\n if (!imageResponse.ok) throw new Error(\"Failed to download image\");\n\n const imageBlob = await imageResponse.blob();\n await blob.set(imageName, imageBlob);\n\n return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n } else {\n console.log(\"Using Val Town's free image generator...\");\n const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;\n\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const timestamp = new Date().getTime();\n const imageName = `generated-image-${timestamp}.jpg`;\n\n const imageResponse = await fetch(imageUrl);\n if (!imageResponse.ok) throw new Error(\"Failed to generate image\");\n\n const imageBlob = await imageResponse.blob();\n await blob.set(imageName, imageBlob);\n\n return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(JSON.stringify({ error: \"Failed to generate image\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n}\n\nconst css = `\nbody {\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 background-color: #f4f4f4;\n}\n\n.container {\n background-color: #fff;\n border-radius: 5px;\n padding: 20px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n text-align: center;\n color: #2c3e50;\n}\n\nform {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n resize: vertical;\n}\n\n.checkbox-container {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\nbutton {\n padding: 10px 15px;\n background-color: #3498db;\n color: #fff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\nbutton:disabled {\n background-color: #95a5a6;\n cursor: not-allowed;\n}\n\n.error {\n color: #e74c3c;\n font-weight: bold;\n}\n\n.result {\n margin-top: 20px;\n text-align: center;\n}\n\n.result img {\n max-width: 100%;\n border-radius: 4px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.source-link {\n text-align: center;\n margin-top: 20px;\n}\n\n.source-link a {\n color: #3498db;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/passionateScarletPrawn/code/main.tsx","extension","actionData","errors"]