/** @jsxImportSource https://esm.sh/react */ import React, { useState, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import debounce from "https://esm.sh/lodash.debounce"; function App() { const [prompt, setPrompt] = useState(""); const [imageData, setImageData] = useState(""); const [loading, setLoading] = useState(false); const generateImage = useCallback( debounce(async (input) => { if (!input) return; setLoading(true); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: input }), }); if (!response.ok) throw new Error("Failed to generate image"); const data = await response.json(); setImageData(data.image); } catch (error) { console.error("Error generating image:", error); } finally { setLoading(false); } }, 300), [] ); const handleInputChange = (e) => { const input = e.target.value; setPrompt(input); generateImage(input); }; return (

Real-time Image Generation

{loading &&

Generating image...

} {imageData && ( Generated image

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/generate" && request.method === "POST") { const apiKey = Deno.env.get("TOGETHER_API_KEY"); if (!apiKey) { return new Response(JSON.stringify({ error: "API key not found" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } try { const { prompt } = await request.json(); const response = await fetch("https://api.together.xyz/inference", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}`, }, body: JSON.stringify({ model: "black-forest-labs/FLUX.1-schnell", prompt, width: 1024, height: 768, steps: 3, response_format: "base64", }), }); if (!response.ok) { throw new Error(`API request failed with status ${response.status}`); } const result = await response.json(); return new Response(JSON.stringify({ image: result.output.image }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error generating image:", error); return new Response(JSON.stringify({ error: "Failed to generate image" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` Real-time Image Generation

`, { headers: { "Content-Type": "text/html" }, } ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } .input { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px; } .generated-image { max-width: 100%; height: auto; margin-top: 20px; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } `;

imggen

Version 1