generate images with replicate

craigsdennis · zeke · Dec 17, 2024 · Dec 18, 2024 · Dec 17, 2024 · 921a88a53d6007307d7a711913c898cb6ba8930f
commit 921a88a53d6007307d7a711913c898cb6ba8930f
diff --git a/.dev.vars.example b/.dev.vars.example
@@ -1 +1,2 @@
 OPENAI_API_KEY="YOUR-API-KEY"
+REPLICATE_API_TOKEN="YOUR-API-TOKEN"
diff --git a/README.md b/README.md
@@ -23,10 +23,11 @@ npm run dev
 
 ## Deploy
 
-Upload your secret
+Upload your secrets
 
 ```bash
 npx wrangler secret put OPENAI_API_KEY
+npx wrangler secret put REPLICATE_API_TOKEN
 ```
 
 ```bash

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
  "wrangler": "^3.60.3"
  },
  "dependencies": {
- "hono": "^4.6.13"
+ "hono": "^4.6.13",
+ "replicate": "^1.0.1"
  }
 }
diff --git a/public/index.html b/public/index.html
@@ -11,8 +11,9 @@
 <body>
 <div class="content">
 <h1>This is a plain old website</h1>
-<p>This is just a plain website that is using plain old JavaScript</p>
-<button onclick="talkToTheHand()">Talk to the hand</button>
+<p>I can make images with AI. Tell me what you want to see.</p>
+
+<div id="image-container"></div>
 </div>
 <footer>
 <p>Built with 🧡 on <a href="https://developers.cloudflare.com">Cloudflare Workers</a> and the <a href="https://platform.openai.com/docs/api-reference/realtime">OpenAI Realtime API</a></p>

diff --git a/public/script.js b/public/script.js
@@ -23,6 +23,24 @@ const fns = {
 await hand.sendCommand(numberOfFingers);
 return { success: true, numberOfFingers };
 },
+generateImage: async ({ prompt }) => {
+console.log('generateImage', prompt);
+const imageUrl = await fetch('/generate-image', {
+method: 'POST',
+body: prompt,
+}).then((r) => r.text());
+
+console.log('imageUrl', imageUrl);
+
+// append the image to the page
+const img = document.createElement('img');
+img.src = imageUrl;
+img.style.maxWidth = '100%';
+const container = document.getElementById('image-container');
+container.prepend(img);
+
+return { success: true, imageUrl };
+}
 };
 
 // Create a WebRTC Agent
@@ -84,6 +102,17 @@ function configureData() {
 name: 'getPageHTML',
 description: 'Gets the HTML for the current page',
 },
+{
+type: 'function',
+name: 'generateImage',
+description: 'Generates an image using AI and displays it on the page',
+parameters: {
+type: 'object',
+properties: {
+prompt: { type: 'string', description: 'Text description of the image to generate' }
+}
+}
+}
 ],
 },
 };

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,5 @@
 import { Hono } from 'hono';
+import Replicate from 'replicate';
 
 const app = new Hono<{ Bindings: Env }>();
 
@@ -34,4 +35,28 @@ app.post('/rtc-connect', async (c) => {
 });
 });
 
+
+app.post('/generate-image', async (c) => {
+const replicate = new Replicate({auth: c.env.REPLICATE_API_TOKEN})
+const model = 'black-forest-labs/flux-schnell' 
+const prompt = await c.req.text()
+const output = await replicate.run(model, {
+ input: {
+prompt,
+image_format: 'webp',
+ }
+})
+
+// Some image models return an array of output files, others just a single file.
+const imageUrl = Array.isArray(output) ? output[0].url() : output.url()
+
+console.log({imageUrl})
+
+return c.body(imageUrl, {
+headers: {
+'Content-Type': 'image/webp',
+},
+});
+});
+
 export default app;
diff --git a/worker-configuration.d.ts b/worker-configuration.d.ts
@@ -2,4 +2,5 @@
 
 interface Env {
 OPENAI_API_KEY: string;
+REPLICATE_API_TOKEN: string;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		OPENAI_API_KEY="YOUR-API-KEY"
		REPLICATE_API_TOKEN="YOUR-API-TOKEN"