\n Flux Image Generator\n

\n\n

\n Generate images with{\" \"}\n \n Flux\n {\" \"}\n on{\" \"}\n \n Replicate\n , and host it on{\" \"}\n \n Val town\n .\n

\n\n

\n );\n}\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render();",[],[150,169],{"_107":178,"_99":179,"_151":180,"_153":152,"_154":140,"_155":181,"_157":122,"_109":182,"_104":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_165":186,"_102":187},"1853cdbc-f910-11ef-ae13-569c3dd06744","index.html","9bb57f26-f90f-11ef-9545-569c3dd06744",17,["D",1741103299463],4,"file","\n\n\n\t\n\t\n\tFlux Image Generator\n\t\n\n\n\t

\n \n\t\n\n",[],[150,179],[150],{"_107":190,"_99":191,"_151":192,"_153":-5,"_154":140,"_155":139,"_157":122,"_109":193,"_104":194,"_160":184,"_162":195,"_163":27,"_164":-5,"_165":196,"_102":197},"9b735848-f910-11ef-91b3-569c3dd06744","README.md","8dc6175e-f90f-11ef-854d-569c3dd06744",["D",1741103519449],3,"# Getting started with Val Town and Replicate\n\nPorted from https://github.com/replicate/getting-started-cloudflare-workers\n\nThis is a template for a simple web app using [Hono](https://honojs.dev/), and [Replicate](https://replicate.com/) to generate images using [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell), a fast and high-quality open-source image generation model.\n\n![Screenshot 2025-03-04 at 10.51.39@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/63806b79-4a28-4ca3-7bf5-e5a631986800/public)\n\n## Stack\n\n- [Hono](https://honojs.dev/) is a minimalist web framework for building serverless applications. It's built and maintained by Cloudflare.\n- [Replicate](https://replicate.com/) is a platform for building and running machine learning models.\n- [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell) is a fast and high-quality open-source image generation model, made by the original creators of Stable Diffusion.",[],[191],{"_107":199,"_99":200,"_151":120,"_153":-5,"_154":140,"_155":201,"_157":122,"_109":202,"_104":183,"_160":203,"_162":204,"_163":27,"_164":-5,"_165":205,"_102":206},"26c72344-f910-11ef-ae13-569c3dd06744","index.ts",19,["D",1741103323708],"http","import { parseProject, serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport Replicate from \"npm:replicate\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\", import.meta.url));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Generate image\napp.post(\"/generate-image\", async (c) => {\n try {\n const { prompt } = await c.req.json();\n\n const replicate = new Replicate({ auth: Deno.env.get(\"REPLICATE_API_TOKEN\") });\n const model = \"black-forest-labs/flux-schnell\";\n const output = await replicate.run(model, {\n input: {\n prompt,\n image_format: \"webp\",\n },\n }) as { url: string }[] | { url: string };\n\n // Some image models return an array of output files, others just a single file.\n const imageUrl = Array.isArray(output) ? output[0].url() : output.url();\n\n console.log({ imageUrl });\n\n return c.json({ imageUrl });\n } catch (error) {\n console.error(error);\n return c.json({ error: (error as Error).message }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[200],"files",[148,167,177,189,198],"counts",{"_211":33,"_212":159,"_213":94,"_214":159},"pulls","branches","forks","envVars","contents",[],{"_107":168,"_99":169,"_151":170,"_153":152,"_154":140,"_155":171,"_157":122,"_109":218,"_104":94,"_160":173,"_162":174,"_163":27,"_164":-5,"_102":219},["D",1741103284530],[150,169],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_97":98,"_99":100,"_101":43,"_102":103,"_105":225,"_184":229,"_232":233,"_245":246,"_251":-7,"_252":33,"_253":27},{"_107":108,"_99":100,"_109":226,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":-5,"_12":118,"_119":120,"_121":122,"_123":-5,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":227,"_137":228},["D",1741103056611],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":-5,"_143":-5,"_144":-5,"_145":-5},{"_107":168,"_99":169,"_151":170,"_153":152,"_154":140,"_155":171,"_157":122,"_109":230,"_104":94,"_160":173,"_162":174,"_163":27,"_164":-5,"_102":231},["D",1741103284530],[150,169],"history",[234,236,240],{"_107":168,"_154":140,"_151":170,"_99":169,"_162":174,"_160":173,"_104":94,"_153":152,"_109":235,"_155":171,"_164":-5},["D",1741103284530],{"_107":237,"_154":140,"_151":170,"_99":169,"_162":70,"_160":173,"_104":159,"_153":152,"_109":238,"_155":239,"_164":-5},"0e5e4b34-f910-11ef-9f33-569c3dd06744",["D",1741103282754],15,{"_107":241,"_154":140,"_151":170,"_99":242,"_162":70,"_160":173,"_104":33,"_153":152,"_109":243,"_155":244,"_164":-5},"0b8bda3e-f910-11ef-ac51-569c3dd06744","righteousEmeraldBarnacle",["D",1741103278024],14,"versions",[247,249,250],{"_184":234,"_248":236},"previous",{"_184":236,"_248":240},{"_184":240,"_248":-5},"versionNumber","page","hasNext","routes/_app","actionData","errors"]

History for App.tsx