/** @jsxImportSource https://esm.sh/react */ import React, { useState } 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 generateImage = async () => { const fullPrompt = `a shirt with a design of ${promptSuffix}`; setGeneration({ id: Date.now().toString(), status: "pending", }); try { const response = await fetch("https://torlanco-shirtgenscript.web.val.run", { 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

Generate a shirt with a design of

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

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 { 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