/** @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 [imageUrls, setImageUrls] = useState([]); const [loading, setLoading] = useState(false); const [numImages, setNumImages] = useState(1); const generateImage = async (e?: React.FormEvent) => { e?.preventDefault(); setLoading(true); setImageUrls([]); const fal = createFalClient({ proxyUrl: "/api/fal/proxy", }); try { const requests = Array(numImages).fill(null).map(() => fal.run("fal-ai/flux-pro/v1.1", { input: { prompt, image_size: "landscape_4_3", num_inference_steps: 4, num_images: 1, enable_safety_checker: true, sync_mode: true, }, }) ); const results = await Promise.all(requests); const newImageUrls = results.flatMap(result => result.data.images.map((img: any) => img.url)); setImageUrls(newImageUrls); } catch (error) { console.error("Error generating image:", error); } 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" />

{imageUrls.length > 0 && (

{imageUrls.map((url, index) => (

))}

)}

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 }); }

falDemoApp