/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [prompt, setPrompt] = useState(""); const [imageData, setImageData] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); if (!prompt) return; setLoading(true); setError(""); setImageData(""); try { const response = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }), }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || `HTTP error! status: ${response.status}`); } if (data.error) { throw new Error(data.error); } // Ensure we have a valid base64 image with data URI prefix const fullBase64Image = data.image.startsWith('data:image') ? data.image : `data:image/png;base64,${data.image}`; setImageData(fullBase64Image); console.log("Image data received:", fullBase64Image.slice(0, 100) + "..."); } catch (error) { console.error("Error generating image:", error); setError(error.message || "Failed to generate image"); } finally { setLoading(false); } }; const handleInputChange = (e) => { setPrompt(e.target.value); }; return (

Image Generation

{loading &&

Generating image, please wait...

} {error &&

Error: {error}

} {imageData && (

Generated Image:

{ console.error("Image failed to load", e); setError("Failed to render image"); }} />

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Utility function to validate and adjust image dimensions function validateImageDimensions(width: number, height: number): { width: number, height: number, warnings: string[] } { const MIN_DIMENSION = 256; const MAX_DIMENSION = 2048; const ASPECT_RATIO_TOLERANCE = 0.25; // Allow 25% deviation from 1:1 aspect ratio const DEFAULT_WIDTH = 1024; const DEFAULT_HEIGHT = 768; const warnings: string[] = []; // Check if inputs are valid numbers const safeWidth = isNaN(width) ? DEFAULT_WIDTH : Math.abs(Math.round(width)); const safeHeight = isNaN(height) ? DEFAULT_HEIGHT : Math.abs(Math.round(height)); // Clamp dimensions let adjustedWidth = Math.min(Math.max(safeWidth, MIN_DIMENSION), MAX_DIMENSION); let adjustedHeight = Math.min(Math.max(safeHeight, MIN_DIMENSION), MAX_DIMENSION); // Check aspect ratio const originalAspectRatio = safeWidth / safeHeight; const adjustedAspectRatio = adjustedWidth / adjustedHeight; if (Math.abs(originalAspectRatio - adjustedAspectRatio) > ASPECT_RATIO_TOLERANCE) { warnings.push(`Original aspect ratio (${originalAspectRatio.toFixed(2)}) adjusted to match API constraints.`); } // Add specific warnings if (safeWidth !== adjustedWidth) { warnings.push(`Width adjusted from ${safeWidth} to ${adjustedWidth} to meet API requirements.`); } if (safeHeight !== adjustedHeight) { warnings.push(`Height adjusted from ${safeHeight} to ${adjustedHeight} to meet API requirements.`); } return { width: adjustedWidth, height: adjustedHeight, warnings }; } export default async function server(request: Request): Promise { const url = new URL(request.url); const imagePrompt = url.searchParams.get('image'); // Parse width and height with advanced validation const rawWidth = parseInt(url.searchParams.get('width') || '1024', 10); const rawHeight = parseInt(url.searchParams.get('height') || '768', 10); // Validate dimensions const { width: safeWidth, height: safeHeight, warnings } = validateImageDimensions(rawWidth, rawHeight); if (url.pathname === "/generate" && request.method === "POST") { const apiKey = Deno.env.get("TOGETHER_API_KEY"); if (!apiKey) { console.error("API key not found in environment variables"); return new Response(JSON.stringify({ error: "API key not found" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } try { const { prompt } = await request.json(); console.log("Received prompt:", prompt); const togetherApiUrl = "https://api.together.xyz/v1/images/generations"; console.log("Sending request to Together AI API:", togetherApiUrl); const response = await fetch(togetherApiUrl, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}`, }, body: JSON.stringify({ model: "black-forest-labs/FLUX.1-schnell", prompt: prompt, width: safeWidth, height: safeHeight, steps: 3, response_format: "b64_json", }), }); console.log("Together AI API response status:", response.status); if (!response.ok) { const errorText = await response.text(); console.error("Together AI API error:", errorText); throw new Error(`API request failed with status ${response.status}: ${errorText}`); } const result = await response.json(); console.log("Together AI API full response:", JSON.stringify(result, null, 2)); // Robust extraction of base64 image data let imageBase64; if (result.data && Array.isArray(result.data) && result.data.length > 0) { imageBase64 = result.data[0].b64_json || result.data[0]; } else if (result.b64_json) { imageBase64 = result.b64_json; } else if (result.data && result.data.b64_json) { imageBase64 = result.data.b64_json; } else { console.error("Unexpected response structure:", result); throw new Error("No image found in API response"); } // Ensure imageBase64 is a string and trim any whitespace imageBase64 = (typeof imageBase64 === 'string' ? imageBase64 : JSON.stringify(imageBase64)).trim(); console.log("Extracted image base64 (first 100 chars):", imageBase64.slice(0, 100)); // Include warnings in the response if any return new Response(JSON.stringify({ image: imageBase64, warnings: warnings.length > 0 ? warnings : undefined }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error generating image:", error.message); console.error("Full error details:", error); return new Response(JSON.stringify({ error: error.message || "Failed to generate image" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } // Handle direct image generation from URL query if (imagePrompt) { const apiKey = Deno.env.get("TOGETHER_API_KEY"); if (!apiKey) { return new Response("API key not found", { status: 500 }); } try { const togetherApiUrl = "https://api.together.xyz/v1/images/generations"; const response = await fetch(togetherApiUrl, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}`, }, body: JSON.stringify({ model: "black-forest-labs/FLUX.1-schnell", prompt: imagePrompt, width: safeWidth, height: safeHeight, steps: 3, response_format: "b64_json", }), }); if (!response.ok) { const errorText = await response.text(); throw new Error(`API request failed with status ${response.status}: ${errorText}`); } const result = await response.json(); let imageBase64; if (result.data && Array.isArray(result.data) && result.data.length > 0) { imageBase64 = result.data[0].b64_json || result.data[0]; } else if (result.b64_json) { imageBase64 = result.b64_json; } else if (result.data && result.data.b64_json) { imageBase64 = result.data.b64_json; } else { throw new Error("No image found in API response"); } // Ensure imageBase64 is a string and trim any whitespace imageBase64 = (typeof imageBase64 === 'string' ? imageBase64 : JSON.stringify(imageBase64)).trim(); // If the request accepts HTML, return a full HTML page with the image if (request.headers.get('Accept')?.includes('text/html')) { return new Response(` Generated Image

${warnings.length > 0 ? `

⚠️ Image dimensions adjusted:

${warning}

` : ''}

`, { headers: { 'Content-Type': 'text/html' } }); } // Otherwise, return the base64 image directly return new Response(imageBase64, { headers: { 'Content-Type': 'image/png', 'X-Image-Warnings': warnings.length > 0 ? JSON.stringify(warnings) : '' } }); } catch (error) { return new Response(error.message, { status: 500 }); } } // Default HTML page remains unchanged return new Response( ` Image Generation

`, { headers: { "Content-Type": "text/html" }, } ); } // CSS remains unchanged 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, h2 { color: #333; } form { display: flex; gap: 10px; margin-bottom: 20px; } .input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .submit-btn { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .submit-btn:hover { background-color: #0056b3; } .submit-btn:disabled { background-color: #cccccc; cursor: not-allowed; } .image-container { margin-top: 20px; } .generated-image { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .loading { color: #007bff; font-weight: bold; } .error { color: #dc3545; font-weight: bold; } `;

imggen