/** @jsxImportSource https://esm.sh/react */ import { createFalClient } from "https://esm.sh/@fal-ai/client"; import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest"; function App() { const [prompt, setPrompt] = useState(""); const [imageUrl, setImageUrl] = useState(""); const [loading, setLoading] = useState(false); const [imageSize, setImageSize] = useState("1152x2048"); const imageSizeOptions = [ { value: "1536x1024", label: "Landscape 4:3" }, { value: "1024x1024", label: "Square 1:1" }, { value: "1152x2048", label: "Portrait 9:16" } ]; const generateImage = async (e?: React.FormEvent) => { e?.preventDefault(); setLoading(true); try { const fal = createFalClient({ proxyUrl: "/api/fal/proxy", }); const [width, height] = imageSize.split('x').map(Number); const result = await fal.run("fal-ai/flux/schnell", { input: { prompt, width, height, num_inference_steps: 4, num_images: 1, enable_safety_checker: true, sync_mode: true, }, }); if (result.data && result.data.images && result.data.images.length > 0) { setImageUrl(result.data.images[0].url); } else { console.error("No images returned", result); alert("No image could be generated. Please try again."); } } catch (error) { console.error("Error generating image:", error); alert(`Image generation failed: ${error.message}`); } finally { setLoading(false); } }; return (

Fal AI Image Generator

setPrompt(e.target.value)} placeholder="Enter your image prompt" className="flex-grow px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

{imageUrl && (

)}

View Source

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

`, { headers: { "content-type": "text/html" }, }, ); } if (url.pathname === "/api/fal/proxy") { return falProxyRequest(req); } return new Response("Not Found", { status: 404 }); }

mda1125