/** @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 generateImage = async (e?: React.FormEvent) => { e?.preventDefault(); setLoading(true); try { const fal = createFalClient({ proxyUrl: "/api/fal/proxy", }); const result = await 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, }, }); setImageUrl(result.data.images[0].url); } catch (error) { console.error("Error generating image:", error); } finally { setLoading(false); } }; return (

Fal AI Image Generator

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

falDemoApp