/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface PendingGeneration { id: string; status: "pending" | "succeeded"; imageUrl?: string; savedUrl?: string; } function ImageGenerator() { const [promptSuffix, setPromptSuffix] = useState(""); const [generation, setGeneration] = useState(null); const [useProModel, setUseProModel] = useState(false); const [isReplicateAvailable, setIsReplicateAvailable] = useState(true); useEffect(() => { // Check if Replicate is available fetch("/check-replicate") .then(response => response.json()) .then(data => setIsReplicateAvailable(data.available)) .catch(() => setIsReplicateAvailable(false)); }, []); const generateImage = async () => { const fullPrompt = `a shirt with a design of ${promptSuffix}`; setGeneration({ id: Date.now().toString(), status: "pending", }); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ prompt: fullPrompt, useProModel }), }); if (!response.ok) { throw new Error("Failed to generate image"); } const result = await response.json(); setGeneration({ id: Date.now().toString(), status: "succeeded", imageUrl: result.imageUrl, savedUrl: result.savedUrl, }); } catch (error) { console.error("Error generating image:", error); setGeneration(null); } }; return (

Shirtgen

a shirt with a design of

setPromptSuffix(e.target.value)} placeholder="Enter your design idea" />

{isReplicateAvailable && (

setUseProModel(!useProModel)} /> {useProModel ? "Pro Model" : "Standard Model"}

)}

{generation?.status === "pending" &&

Generating...

} {generation?.status === "succeeded" && generation.imageUrl && Generated

}

); } function App() { return ; } 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 === "/check-replicate") { const REPLICATE_API_KEY = Deno.env.get("REPLICATE_API_KEY"); return new Response(JSON.stringify({ available: !!REPLICATE_API_KEY }), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/generate" && request.method === "POST") { const REPLICATE_API_KEY = Deno.env.get("REPLICATE_API_KEY"); const { prompt, useProModel } = await request.json(); if (REPLICATE_API_KEY) { // Use Replicate API const modelVersion = useProModel ? "black-forest-labs/flux-1.1-pro" : "black-forest-labs/flux-schnell"; const settings = { outputFormat: "jpg", outputQuality: 90, megapixels: "1", }; console.log("Sending initial request to Replicate..."); const response = await fetch(`https://api.replicate.com/v1/models/${modelVersion}/predictions`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${REPLICATE_API_KEY}`, }, body: JSON.stringify({ input: { prompt: prompt, output_format: settings.outputFormat, output_quality: settings.outputQuality, disable_safety_checker: true, megapixels: settings.megapixels, }, }), }); const prediction = await response.json(); console.log("Initial response:", JSON.stringify(prediction, null, 2)); let resultData; while (true) { console.log("Checking result..."); const resultResponse = await fetch(prediction.urls.get, { headers: { "Authorization": `Token ${REPLICATE_API_KEY}`, }, }); resultData = await resultResponse.json(); console.log("Poll response:", JSON.stringify(resultData, null, 2)); if (resultData.status === "succeeded" || resultData.status === "failed") { break; } await new Promise(resolve => setTimeout(resolve, 1000)); } if (resultData.status === "succeeded") { console.log("Generation succeeded!"); let imageUrl: string | undefined; if (Array.isArray(resultData.output)) { imageUrl = resultData.output[0]; } else if (typeof resultData.output === "string") { imageUrl = resultData.output; } if (imageUrl) { const { blob } = await import("https://esm.town/v/std/blob"); const timestamp = new Date().getTime(); const imageName = `generated-image-${timestamp}.jpg`; const imageResponse = await fetch(imageUrl); if (!imageResponse.ok) throw new Error("Failed to download image"); const imageBlob = await imageResponse.blob(); await blob.set(imageName, imageBlob); return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), { headers: { "Content-Type": "application/json" }, }); } } } else { // Use Val Town's free image generator console.log("Using Val Town's free image generator..."); const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`; const { blob } = await import("https://esm.town/v/std/blob"); const timestamp = new Date().getTime(); const imageName = `generated-image-${timestamp}.jpg`; const imageResponse = await fetch(imageUrl); if (!imageResponse.ok) throw new Error("Failed to generate image"); const imageBlob = await imageResponse.blob(); await blob.set(imageName, imageBlob); return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), { headers: { "Content-Type": "application/json" }, }); } return new Response(JSON.stringify({ error: "Failed to generate image" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } return new Response( ` Shirtgen

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Courier New', Courier, monospace; background-color: #000; color: #0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #111; border: 2px solid #0f0; border-radius: 10px; padding: 20px; width: 90%; max-width: 600px; } h1 { text-align: center; margin-bottom: 20px; } .input-group { display: flex; flex-wrap: wrap; margin-bottom: 20px; align-items: center; } .prompt-prefix { width: 100%; margin-bottom: 10px; font-weight: bold; } input { flex-grow: 1; background-color: #000; border: 1px solid #0f0; color: #0f0; padding: 10px; font-family: inherit; } button { background-color: #0f0; color: #000; border: none; padding: 10px 20px; cursor: pointer; font-family: inherit; font-weight: bold; margin-left: 10px; } .result { text-align: center; } img { max-width: 100%; border: 1px solid #0f0; } .toggle-container { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; transition: .4s; border: 1px solid #0f0; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #0f0; transition: .4s; } input:checked + .slider { background-color: #000; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .toggle-label { margin-left: 10px; font-size: 14px; } `;

shirtGen

Version 14