\n {generation.input.prompt}\n

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

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

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

\n ))\n )\n : generation.status === \"succeeded\" && generation.data\n ? (\n generation.data.images.map((image, i) => (\n \n ))\n )\n : (\n

\n Error generating images: {generation.error}\n

\n )}\n

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

faltown

\n \n a fal.ai + valtown image generator\n \n

\n {currentUser !== null\n ? (\n \n $\"profile$ \n \n )\n : (\n \n Sign in\n \n )}\n

\n \n\n

\n {generate.isError && (\n

\n {generate.error.message}\n

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

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

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