Fal AI Image Generator

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/\") {\n return new Response(\n `\n \n \n \n \n \n Fal AI Image Generator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n }\n\n if (url.pathname === \"/api/fal/proxy\") {\n return falProxyRequest(req);\n }\n\n return new Response(\"Not Found\", { status: 404 });\n}",[],[104],"files",[152,172],"counts",{"_184":31,"_185":160,"_186":187,"_188":31},"pulls","branches","forks",12,"envVars","contents",[],{"_108":173,"_100":104,"_155":121,"_157":-5,"_158":142,"_159":141,"_161":114,"_110":192,"_105":175,"_163":176,"_165":177,"_167":27,"_168":-5,"_103":193},["D",1730296393256],[104],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_98":99,"_100":101,"_102":42,"_103":104,"_106":200,"_164":204,"_207":208,"_233":234,"_242":-7,"_243":31,"_244":27},{"_108":109,"_100":101,"_110":201,"_112":-5,"_113":114,"_115":116,"_117":-5,"_118":-5,"_12":119,"_120":121,"_122":114,"_123":-5,"_124":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_135":27,"_21":202,"_139":203},["D",1746037426307],{"_98":99,"_137":138},{"_105":141,"_100":42,"_108":142,"_143":109,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":101,"_149":99},{"_108":173,"_100":104,"_155":121,"_157":-5,"_158":142,"_159":141,"_161":114,"_110":205,"_105":175,"_163":176,"_165":177,"_167":27,"_168":-5,"_103":206},["D",1730296393256],[104],"history",[209,211,216,220,225,229],{"_108":173,"_158":142,"_155":121,"_100":104,"_165":177,"_163":176,"_105":175,"_157":-5,"_110":210,"_159":141,"_168":-5},["D",1730296393256],{"_108":212,"_158":142,"_155":121,"_100":104,"_165":213,"_163":176,"_105":214,"_157":-5,"_110":215,"_159":175,"_168":-5},"412ad9da-25f0-11f0-ad23-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport { createFalClient } from \"https://esm.sh/@fal-ai/client\";\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { falProxyRequest } from \"https://esm.town/v/stevekrouse/falProxyRequest\";\n\nfunction App() {\n const [prompt, setPrompt] = useState(\"\");\n const [imageUrl, setImageUrl] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const generateImage = async (e?: React.FormEvent) => {\n e?.preventDefault();\n setLoading(true);\n try {\n const fal = createFalClient({\n proxyUrl: \"/api/fal/proxy\",\n });\n\n const result = await fal.run(\"fal-ai/flux/schnell\", {\n input: {\n prompt,\n image_size: \"landscape_4_3\",\n num_inference_steps: 4,\n num_images: 1,\n enable_safety_checker: true,\n sync_mode: true,\n },\n });\n setImageUrl(result.data.images[0].url);\n } catch (error) {\n console.error(\"Error generating image:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Fal AI Image Generator

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n \n View Source\n \n

Fal AI Image Generator

\n \n setPrompt(e.target.value)}\n placeholder=\"Enter your image prompt\"\n className=\"flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500\"\n />\n \n {loading\n ? (\n \n \n \n \n \n \n \n Generating...\n \n )\n : (\n \"Generate Image\"\n )}\n \n \n

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n \n View Source\n \n

Fal AI Image Generator

\n {\n e.preventDefault();\n generateImage();\n }}\n >\n setPrompt(e.target.value)}\n placeholder=\"Enter your image prompt\"\n className=\"flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500\"\n />\n \n {loading\n ? (\n \n \n \n \n \n \n \n Generating...\n \n )\n : (\n \"Generate Image\"\n )}\n \n \n

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n \n View Source\n \n

Fal AI Image Generator

\n setPrompt(e.target.value)}\n placeholder=\"Enter your image prompt\"\n className=\"flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500\"\n />\n \n {loading ? (\n \n \n Generating...\n \n ) : (\n \"Generate Image\"\n )}\n \n

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/\") {\n return new Response(`\n \n \n \n \n \n Fal AI Image Generator\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" },\n });\n }\n\n if (url.pathname === \"/api/fal/proxy\") {\n return falProxyRequest(req);\n }\n\n return new Response(\"Not Found\", { status: 404 });\n}",["D",1729181048202],{"_108":230,"_158":142,"_155":121,"_100":104,"_165":231,"_163":176,"_105":31,"_157":-5,"_110":232,"_159":160,"_168":-5},"411c21ba-25f0-11f0-ad23-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { falProxyRequest } from \"https://esm.town/v/stevekrouse/falProxyRequest\";\nimport { createFalClient } from \"https://esm.sh/@fal-ai/client\";\n\nfunction App() {\n const [prompt, setPrompt] = useState(\"\");\n const [imageUrl, setImageUrl] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const generateImage = async () => {\n setLoading(true);\n try {\n const fal = createFalClient({\n proxyUrl: \"/api/fal/proxy\",\n });\n\n const result = await fal.run(\"fal-ai/flux/schnell\", {\n input: {\n prompt,\n image_size: \"landscape_4_3\",\n num_inference_steps: 4,\n num_images: 1,\n enable_safety_checker: true,\n sync_mode: true,\n },\n });\n setImageUrl(result.data.images[0].url);\n } catch (error) {\n console.error(\"Error generating image:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Fal AI Image Generator

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

\n {imageUrl && (\n

\n $\"Generated$ \n

\n )}\n

\n View Source\n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" },\n });\n }\n\n if (url.pathname === \"/api/fal/proxy\") {\n return falProxyRequest(req);\n }\n\n return new Response(\"Not Found\", { status: 404 });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\nh1 {\n text-align: center;\n color: #333;\n}\n.input-container {\n display: flex;\n margin-bottom: 20px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ddd;\n border-radius: 4px 0 0 4px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 0 4px 4px 0;\n cursor: pointer;\n}\nbutton:disabled {\n background-color: #ddd;\n cursor: not-allowed;\n}\n.image-container {\n text-align: center;\n}\nimg {\n max-width: 100%;\n border-radius: 4px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n.source-link {\n text-align: center;\n margin-top: 20px;\n}\n.source-link a {\n color: #4CAF50;\n text-decoration: none;\n}\n`;",["D",1729181007018],"versions",[235,237,238,239,240,241],{"_164":209,"_236":211},"previous",{"_164":211,"_236":216},{"_164":216,"_236":220},{"_164":220,"_236":225},{"_164":225,"_236":229},{"_164":229,"_236":-5},"versionNumber","page","hasNext","routes/_app","actionData","errors"]

History for main.tsx