{mode === \"image\" ? \"🖼️ AI Image Generator\" : \"📝 AI Text Generator\"}

\n setMode(\"image\")}\n style={{\n ...styles.modeButton,\n backgroundColor: mode === \"image\" ? \"#4CAF50\" : \"#f0f0f0\",\n color: mode === \"image\" ? \"white\" : \"black\",\n }}\n >\n Image\n \n setMode(\"text\")}\n style={{\n ...styles.modeButton,\n backgroundColor: mode === \"text\" ? \"#4CAF50\" : \"#f0f0f0\",\n color: mode === \"text\" ? \"white\" : \"black\",\n }}\n >\n Text\n \n

\n setPrompt(e.target.value)}\n placeholder={mode === \"image\"\n ? \"Describe the image you want to create\"\n : \"Enter a prompt for text generation\"}\n style={styles.input}\n />\n \n {isLoading ? \"Generating...\" : `Generate ${mode === \"image\" ? \"Image\" : \"Text\"}`}\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n {imageUrl && mode === \"image\" && (\n

\n \n

{prompt}

\n )}\n\n {generatedText && mode === \"text\" && (\n

{generatedText}

\n )}\n\n \n View Source\n \n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"Arial, sans-serif\",\n maxWidth: \"600px\",\n margin: \"0 auto\",\n padding: \"20px\",\n textAlign: \"center\",\n },\n modeToggle: {\n display: \"flex\",\n justifyContent: \"center\",\n marginBottom: \"20px\",\n },\n modeButton: {\n padding: \"10px 15px\",\n margin: \"0 10px\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n },\n inputContainer: {\n display: \"flex\",\n marginBottom: \"20px\",\n },\n input: {\n flex: 1,\n padding: \"10px\",\n fontSize: \"16px\",\n marginRight: \"10px\",\n borderRadius: \"5px\",\n border: \"1px solid #ddd\",\n },\n button: {\n padding: \"10px 15px\",\n backgroundColor: \"#4CAF50\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n },\n errorMessage: {\n backgroundColor: \"#f8d7da\",\n color: \"#721c24\",\n padding: \"10px\",\n borderRadius: \"5px\",\n marginBottom: \"20px\",\n },\n imageContainer: {\n marginTop: \"20px\",\n },\n generatedImage: {\n maxWidth: \"100%\",\n borderRadius: \"10px\",\n boxShadow: \"0 4px 6px rgba(0,0,0,0.1)\",\n },\n textContainer: {\n marginTop: \"20px\",\n padding: \"15px\",\n backgroundColor: \"#f9f9f9\",\n borderRadius: \"10px\",\n },\n generatedText: {\n textAlign: \"left\",\n lineHeight: \"1.6\",\n },\n imageDescription: {\n fontStyle: \"italic\",\n color: \"#666\",\n marginTop: \"10px\",\n },\n sourceLink: {\n display: \"block\",\n marginTop: \"20px\",\n color: \"#666\",\n textDecoration: \"none\",\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default function server(request: Request) {\n const app = new Hono();\n\n app.get(\"/\", (c) => {\n return c.html(`\n \n \n AI Content Generator\n \n \n \n

\n \n \n \n \n `);\n });\n\n app.post(\"/generate-content\", async (c) => {\n try {\n const { prompt, mode } = await c.req.json();\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n if (mode === \"image\") {\n const response = await openai.images.generate({\n model: \"dall-e-3\",\n prompt: prompt,\n n: 1,\n size: \"1024x1024\",\n });\n\n const imageUrl = response.data[0].url;\n return c.json({ imageUrl });\n } else {\n const response = await openai.chat.completions.create({\n messages: [{ role: \"user\", content: prompt }],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n const text = response.choices[0].message.content;\n return c.json({ text });\n }\n } catch (error) {\n return c.json({ error: error.message }, 500);\n }\n });\n\n return app.fetch(request);\n}","deleted","label",[98],"permalink","https://www.val.town/x/KALPESHPATEL/textToGenerate/code/main.tsx","extension","actionData","errors"]