/** @jsxImportSource https://esm.sh/react */ import { createFalClient, WebHookResponse } from "https://esm.sh/@fal-ai/client"; import { createRouteHandler } from "https://esm.sh/@fal-ai/server-proxy/hono"; import { keepPreviousData, QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, } from "https://esm.sh/@tanstack/react-query"; import { Context, Hono } from "https://esm.sh/hono"; import { HTTPException } from "https://esm.sh/hono/http-exception"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { API_URL } from "https://esm.town/v/std/API_URL"; import { blob } from "https://esm.town/v/std/blob"; // --- helpers --- const isClient = typeof document !== "undefined"; const FAL_ENDPOINT = "fal-ai/flux/schnell"; // --- types --- type User = { id: string; username: string; email: string; url: string; profileImageUrl: string; tier: "free" | "pro"; }; type InitialState = { currentUser: User | null; }; type InfereneceInput = { prompt: string; image_size: | "portrait_4_3" | "portrait_16_9" | "landscape_4_3" | "landscape_16_9" | "square_hd"; num_images: 1 | 2 | 3 | 4; }; type InferenceOutput = { images: Array<{ url: string; width: number; height: number; }>; seed: number; }; type ImageGeneration = { requestId: string; createdAt: number; input: InfereneceInput; status: "pending" | "in_progress" | "succeeded" | "failed"; data?: InferenceOutput; error?: string; }; type NewImageGeneration = Pick; // --- App API Client --- async function sendRequest( url: string, init?: RequestInit, ): Promise { const response = await fetch(url, { ...init, headers: { ...init?.headers, Accept: "application/json", "Content-Type": "application/json", }, }); if (!response.ok) { throw new Error(response.statusText); } return (await response.json()) as Output; } const api = { generations: { list: () => sendRequest("/api/generations"), create: (generation: NewImageGeneration) => sendRequest("/api/generations", { method: "POST", body: JSON.stringify(generation), }), update: (generation: ImageGeneration) => sendRequest(`/api/generations/${generation.requestId}`, { method: "PUT", body: JSON.stringify(generation), }), }, } as const; // --- React client-side app --- const fal = createFalClient({ // See API endpoints below for details on the proxy the fal client // will call to handle credentials safely proxyUrl: "/api/fal/proxy/shared", // proxyUrl: "/api/fal/proxy" }); // This allow client-side components to read the initial state from // the server when it rendered the initial page. function useInitialState(): InitialState { return ((window as any).__INITIAL_STATE ?? { currentUser: null, }) as InitialState; } type ImageGenerationProps = { generation: ImageGeneration; }; const IMAGE_PLACEHOLDERS = Array(4).fill(null); function ImageGenerationRow({ generation }: ImageGenerationProps) { const queryClient = useQueryClient(); // If the item is still in progress, let's subscribe to status updates so // the UI is updated as soon as it's done useEffect(() => { if (generation.status === "in_progress") { const { requestId } = generation; fal.queue .subscribeToStatus(FAL_ENDPOINT, { requestId, // you can also opt for polling in use cases where inference is slower mode: "streaming", }) .then(() => fal.queue.result(FAL_ENDPOINT, { requestId })) // we will update the storage with the UI result, which is redundant given the // webhook will take care of that. But this redundancy gives a more responsive UI // and also helps in case the webhook takes too long to trigger .then((result) => { return api.generations.update({ ...generation, status: "succeeded", data: result.data, }); }) .catch((error: any) => { return api.generations.update({ ...generation, status: "failed", error: error.message ?? "Unknown error", }); }) .finally(() => { queryClient.invalidateQueries(["generations"]); }); } }, [generation.status]); const badgeColors: Record = { pending: "bg-gray-500/30 text-gray-400", in_progress: "bg-sky-500/30 text-sky-400", succeeded: "bg-emerald-700/30 text-emerald-500", failed: "bg-rose-700/30 text-rose-500", }; const isLoading = generation.status === "in_progress" || generation.status === "pending"; return (

{generation.input.prompt}

{generation.status.replaceAll("_", " ")}

{new Date(generation.createdAt).toLocaleString()}

{isLoading ? ( IMAGE_PLACEHOLDERS.map((_, i) => (

)) ) : generation.status === "succeeded" && generation.data ? ( generation.data.images.map((image, i) => ( {`Generated

)) ) : (

Error generating images: {generation.error}

)}

); } function MainPage() { const queryClient = useQueryClient(); const { currentUser } = useInitialState(); const [input, setInput] = useState({ prompt: "", image_size: "square_hd", num_images: 4, }); const { data: generations = [] as ImageGeneration[], refetch } = useQuery({ queryKey: ["generations"], queryFn: api.generations.list, placeholderData: keepPreviousData, }); // The useMutation hook allows us to easily do optimistic updates to the UI // so the user doesn't experience delays between pressing the button // and seeing the UI updated. // See https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates const generate = useMutation({ mutationFn: async (input: InfereneceInput) => { const { request_id: requestId } = await fal.queue.submit(FAL_ENDPOINT, { input, // NOTE: it's a good practice to receive the result in your server via a webhook // so if your UI is unresponsive (closed by the user for instance), your result // is still saved in your backend webhookUrl: `${window.location}api/fal/webhook/${currentUser?.id}`, }); return api.generations.create({ requestId, input }); }, onSettled: async () => { return await queryClient.invalidateQueries({ queryKey: ["generations"] }); }, }); const handleOnSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!currentUser || input.prompt.trim().length === 0) { return; } const payload = { ...input }; setInput({ ...input, prompt: "" }); await generate.mutate(input); }; return (

faltown

a fal.ai + valtown image generator

{currentUser !== null ? (

) : ( Sign in )}

{generate.isError && (

{generate.error.message}

)} {generate.isPending && ( )} {generations.map((generation: ImageGeneration) => ( ))}

); } function App() { const queryClient = new QueryClient(); return ( ); } function client() { createRoot(document.getElementById("root")!).render(); } if (isClient) { client(); } // --- server side app --- function createApp() { const BLOB_PREFIX = "val:faltown"; const app = new Hono(); const getCurrentUser = async (context: Context): Promise => { const token = Deno.env.get("valtown"); const response = await fetch(`${API_URL}/v1/me`, { method: "GET", headers: { authorization: `Bearer ${token}`, }, }); if (!response.ok) { const error = await response.json(); console.log(error); return null; } return (await response.json()) as User; }; const requireCurrentUser = async (context: Context): Promise => { const user = await getCurrentUser(context); if (user === null) { throw new HTTPException(401, { message: "Unauthorized" }); } return user; }; // Just serve a minimal page so the React client-side can load. // For more complex apps you can modify this to do SSR if needed. app.get("/", async (c: Context) => { const currentUser = await getCurrentUser(c); const initialState: InitialState = { currentUser, }; return c.html( ` AI Image Generator

`, ); }); // Image generation storage API // Create ImageGeneration app.post("/api/generations", async (c: Context) => { const currentUser = await requireCurrentUser(c); const generation: ImageGeneration = await c.req.json(); await blob.setJSON( `${BLOB_PREFIX}:${currentUser.id}:${generation.requestId}`, { ...generation, status: "in_progress", createdAt: Date.now(), } satisfies ImageGeneration, ); return c.json(generation, { status: 201 }); }); // Get ImageGeneration app.put("/api/generations/:id", async (c: Context) => { const currentUser = await requireCurrentUser(c); const requestId = c.req.param("id"); const key = `${BLOB_PREFIX}:${currentUser.id}:${requestId}`; const existing: ImageGeneration | undefined = await blob.getJSON(key); if (!existing || existing.requestId !== requestId) { throw new HTTPException(400, { message: "Invalid request" }); } const generation = await c.req.json(); const updated = { ...existing, ...generation }; await blob.setJSON( `${BLOB_PREFIX}:${currentUser.id}:${generation.requestId}`, updated, ); return c.json(updated, { status: 200 }); }); // List generations app.get("/api/generations", async (c: Context) => { const currentUser = await requireCurrentUser(c); const keys = await blob.list(`${BLOB_PREFIX}:${currentUser.id}:`); const result = await Promise.all( keys.map(({ key }) => blob.getJSON(key)), ); return c.json(result.sort((a, b) => b.createdAt - a.createdAt)); }); // Create a route that will get the requests to fal from the client, add the credentials and send to fal.ai // so that the front-end can use the client without exposing the API key. // See https://fal.ai/docs/model-endpoints/server-side // Shared proxy: this uses a valtown provided proxy that allows you to generate images // with fal.ai using your valtown account. It's the one set by default. app.all("/api/fal/proxy/shared", async (c: Context) => { const token = Deno.env.get("valtown"); if (!token) { return c.json({ error: "Unauthorized" }, 401); } const url = Deno.env.get("FALTOWN_PROXY_URL") ?? "https://fal-faltownproxy.web.val.run/api/faltown/proxy"; if (!url) { return c.json({ error: "FALTOWN_PROXY_URL not set" }, 500); } const method = c.req.method; const body = method === "GET" || method === "HEAD" ? undefined : await c.req.text(); return fetch(url, { method, headers: { ...c.req.header(), "x-proxy-authorization": `Bearer ${token}`, }, body, }); }); // Private proxy: this one relies on your own API Key obtained from fal.ai // you can customize it to your application needs. const falHandler = createRouteHandler({ resolveApiKey: async () => Deno.env.get("FAL_API_KEY"), }); app.all("/api/fal/proxy", async (c: Context) => { // You can handle your own logic here, such as auth, rate limiting, metrics, etc // see for details https://fal.ai/docs/model-endpoints/server-side return falHandler(c); }); // Also let's listen for fal webhook events, so we catch results even when the UI is not active // Specially useful for when you have data storage on the server, so you can update your database // regardless if the UI received the result or not app.post("/api/fal/webhook/:userId", async (c: Context) => { // see https://fal.ai/docs/model-endpoints/webhooks const body = (await c.req.json()) as WebHookResponse; const requestId = body.request_id; const userId = c.req.param("userId"); const key = `${BLOB_PREFIX}:${userId}:${requestId}`; const existing = await blob.getJSON(key); if (!existing) { throw new HTTPException(400, { message: "Invalid request" }); } const isSuccessful = body.status === "OK"; const updated = { ...existing, status: isSuccessful ? "succeeded" : "failed", data: isSuccessful ? body.payload : undefined, error: !isSuccessful ? body.error : undefined, } satisfies ImageGeneration; await blob.setJSON(key, updated); return c.json({ ok: true, }); }); return app; } const app = isClient ? {} : createApp(); export default app.fetch;