\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();",[],[149,168],{"_106":177,"_99":178,"_150":179,"_152":151,"_153":139,"_154":180,"_156":121,"_108":181,"_103":182,"_159":183,"_161":184,"_162":27,"_163":-5,"_164":185,"_102":186},"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",[],[149,178],[149],{"_106":189,"_99":190,"_150":191,"_152":-5,"_153":139,"_154":138,"_156":121,"_108":192,"_103":193,"_159":183,"_161":194,"_162":27,"_163":-5,"_164":195,"_102":196},"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.",[],[190],{"_106":198,"_99":199,"_150":119,"_152":-5,"_153":139,"_154":200,"_156":121,"_108":201,"_103":182,"_159":202,"_161":203,"_162":27,"_163":-5,"_164":204,"_102":205},"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;",[],[199],"files",[147,166,176,188,197],"counts",{"_210":33,"_211":158,"_212":94,"_213":158},"pulls","branches","forks","envVars","contents",[216,219,222],{"_106":148,"_99":149,"_150":151,"_152":-5,"_153":139,"_154":155,"_156":121,"_108":217,"_103":158,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":218},["D",1741103236203],[149],{"_106":189,"_99":190,"_150":191,"_152":-5,"_153":139,"_154":138,"_156":121,"_108":220,"_103":193,"_159":183,"_161":194,"_162":27,"_163":-5,"_102":221},["D",1741103519449],[190],{"_106":198,"_99":199,"_150":119,"_152":-5,"_153":139,"_154":200,"_156":121,"_108":223,"_103":182,"_159":202,"_161":203,"_162":27,"_163":-5,"_102":224},["D",1741103323708],[199],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":230,"_234":235,"_381":33,"_382":27},{"_106":107,"_99":100,"_108":231,"_110":-5,"_111":27,"_112":113,"_114":115,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":232,"_136":233},["D",1741103056611],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":-5,"_142":-5,"_143":-5,"_144":-5},"history",[236,241,248,253,261,266,271,278,286,294,302,307,315,323,331,338,345,353,361,367,374],{"_150":191,"_103":138,"_108":237,"_153":139,"_206":238},["D",1741103519449],[239],{"_106":189,"_153":139,"_150":191,"_99":190,"_161":194,"_159":183,"_103":193,"_152":-5,"_108":237,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":240},[190],{"_150":191,"_103":242,"_108":243,"_153":139,"_206":244},20,["D",1741103519037],[245],{"_106":246,"_153":139,"_150":191,"_99":190,"_161":194,"_159":183,"_103":94,"_152":-5,"_108":243,"_154":242,"_163":-5,"_156":27,"_162":27,"_102":247},"9b340bfc-f910-11ef-ae6b-569c3dd06744",[190],{"_150":119,"_103":200,"_108":249,"_153":139,"_206":250},["D",1741103323708],[251],{"_106":198,"_153":139,"_150":119,"_99":199,"_161":203,"_159":202,"_103":182,"_152":-5,"_108":249,"_154":200,"_163":-5,"_156":121,"_162":27,"_102":252},[199],{"_150":119,"_103":254,"_108":255,"_153":139,"_206":256},18,["D",1741103317374],[257],{"_106":258,"_153":139,"_150":119,"_99":199,"_161":259,"_159":202,"_103":193,"_152":-5,"_108":255,"_154":254,"_163":-5,"_156":27,"_162":27,"_102":260},"23013a60-f910-11ef-ae6b-569c3dd06744","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\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;",[199],{"_150":179,"_103":180,"_108":262,"_153":139,"_206":263},["D",1741103299463],[264],{"_106":177,"_153":139,"_150":179,"_99":178,"_161":184,"_159":183,"_103":182,"_152":151,"_108":262,"_154":180,"_163":-5,"_156":121,"_162":27,"_102":265},[149,178],{"_150":169,"_103":170,"_108":267,"_153":139,"_206":268},["D",1741103284530],[269],{"_106":167,"_153":139,"_150":169,"_99":168,"_161":173,"_159":172,"_103":94,"_152":151,"_108":267,"_154":170,"_163":-5,"_156":121,"_162":27,"_102":270},[149,168],{"_150":169,"_103":272,"_108":273,"_153":139,"_206":274},15,["D",1741103282754],[275],{"_106":276,"_153":139,"_150":169,"_99":168,"_161":70,"_159":172,"_103":158,"_152":151,"_108":273,"_154":272,"_163":-5,"_156":27,"_162":27,"_102":277},"0e5e4b34-f910-11ef-9f33-569c3dd06744",[149,168],{"_150":169,"_103":279,"_108":280,"_153":139,"_206":281},14,["D",1741103278024],[282],{"_106":283,"_153":139,"_150":169,"_99":284,"_161":70,"_159":172,"_103":33,"_152":151,"_108":280,"_154":279,"_163":-5,"_156":27,"_162":27,"_102":285},"0b8bda3e-f910-11ef-ac51-569c3dd06744","righteousEmeraldBarnacle",[149,284],{"_150":119,"_103":287,"_108":288,"_153":139,"_206":289},13,["D",1741103260935],[290],{"_106":291,"_153":139,"_150":119,"_99":199,"_161":292,"_159":202,"_103":94,"_152":-5,"_108":288,"_154":287,"_163":-5,"_156":27,"_162":27,"_102":293},"015d23e2-f910-11ef-8b71-569c3dd06744","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\napp.get(\"/app.js\", (c) => {\n return new Response(SCRIPT_JS, { headers: { \"Content-Type\": \"text/javascript\" } });\n});\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;",[199],{"_150":179,"_103":295,"_108":296,"_153":139,"_206":297},12,["D",1741103238128],[298],{"_106":299,"_153":139,"_150":179,"_99":178,"_161":300,"_159":183,"_103":193,"_152":151,"_108":296,"_154":295,"_163":-5,"_156":27,"_162":27,"_102":301},"f3c48d74-f90f-11ef-b874-569c3dd06744","\n\n\n\t\n\t\n\tFlux Image Generator\n\t\n\n\n\t

\n \n\t\n\n",[149,178],{"_150":151,"_103":155,"_108":303,"_153":139,"_206":304},["D",1741103236203],[305],{"_106":148,"_153":139,"_150":151,"_99":149,"_161":-5,"_159":160,"_103":158,"_152":-5,"_108":303,"_154":155,"_163":-5,"_156":121,"_162":27,"_102":306},[149],{"_150":151,"_103":308,"_108":309,"_153":139,"_206":310},10,["D",1741103232794],[311],{"_106":312,"_153":139,"_150":151,"_99":313,"_161":-5,"_159":160,"_103":33,"_152":-5,"_108":309,"_154":308,"_163":-5,"_156":27,"_162":27,"_102":314},"f0963094-f90f-11ef-9f64-569c3dd06744","supportiveWhiteLungfish",[313],{"_150":119,"_103":316,"_108":317,"_153":139,"_206":318},9,["D",1741103144910],[319],{"_106":320,"_153":139,"_150":119,"_99":199,"_161":321,"_159":202,"_103":158,"_152":-5,"_108":317,"_154":316,"_163":-5,"_156":27,"_162":27,"_102":322},"bc34a31c-f90f-11ef-9545-569c3dd06744","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[199],{"_150":119,"_103":324,"_108":325,"_153":139,"_206":326},8,["D",1741103140358],[327],{"_106":328,"_153":139,"_150":119,"_99":329,"_161":321,"_159":202,"_103":33,"_152":-5,"_108":325,"_154":324,"_163":-5,"_156":27,"_162":27,"_102":330},"b97de016-f90f-11ef-95a8-569c3dd06744","upbeatVioletAardvark",[329],{"_150":179,"_103":332,"_108":333,"_153":139,"_206":334},7,["D",1741103127670],[335],{"_106":336,"_153":139,"_150":179,"_99":178,"_161":300,"_159":183,"_103":94,"_152":-5,"_108":333,"_154":332,"_163":-5,"_156":27,"_162":27,"_102":337},"b1ee3e72-f90f-11ef-8820-569c3dd06744",[178],{"_150":179,"_103":339,"_108":340,"_153":139,"_206":341},6,["D",1741103094621],[342],{"_106":343,"_153":139,"_150":179,"_99":178,"_161":70,"_159":183,"_103":158,"_152":-5,"_108":340,"_154":339,"_163":-5,"_156":27,"_162":27,"_102":344},"9e3b1116-f90f-11ef-9545-569c3dd06744",[178],{"_150":179,"_103":346,"_108":347,"_153":139,"_206":348},5,["D",1741103090393],[349],{"_106":350,"_153":139,"_150":179,"_99":351,"_161":70,"_159":183,"_103":33,"_152":-5,"_108":347,"_154":346,"_163":-5,"_156":27,"_162":27,"_102":352},"9bb57e72-f90f-11ef-9545-569c3dd06744","jovialAquamarineBoar",[351],{"_150":354,"_103":182,"_108":355,"_153":139,"_206":356},"980ea7d0-f90f-11ef-bd01-569c3dd06744",["D",1741103087984],[357],{"_106":358,"_153":139,"_150":354,"_99":359,"_161":321,"_159":202,"_103":158,"_152":-5,"_108":355,"_154":182,"_163":-5,"_156":121,"_162":121,"_102":360},"9a465e08-f90f-11ef-9545-569c3dd06744","cheerfulBeigeMarten",[359],{"_150":354,"_103":193,"_108":362,"_153":139,"_206":363},["D",1741103084266],[364],{"_106":365,"_153":139,"_150":354,"_99":359,"_161":321,"_159":202,"_103":33,"_152":-5,"_108":362,"_154":193,"_163":-5,"_156":27,"_162":27,"_102":366},"980ea6fe-f90f-11ef-bd01-569c3dd06744",[359],{"_150":191,"_103":94,"_108":368,"_153":139,"_206":369},["D",1741103072097],[370],{"_106":371,"_153":139,"_150":191,"_99":190,"_161":372,"_159":183,"_103":158,"_152":-5,"_108":368,"_154":94,"_163":-5,"_156":27,"_162":27,"_102":373},"90ced300-f90f-11ef-84c0-569c3dd06744","# 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](https://github.com/user-attachments/assets/f123b271-09a1-468c-9aac-5fdd4ed75184)\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.",[190],{"_150":191,"_103":158,"_108":375,"_153":139,"_206":376},["D",1741103067012],[377],{"_106":378,"_153":139,"_150":191,"_99":190,"_161":379,"_159":183,"_103":33,"_152":-5,"_108":375,"_154":158,"_163":-5,"_156":27,"_162":27,"_102":380},"8dc616c8-f90f-11ef-854d-569c3dd06744","# replicate_starter",[190],"page","hasNext","routes/_app","actionData","errors"]

History