Image Generation

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

\n $\"Generated$ \n ${warnings.length > 0 ? `\n

⚠️ Image dimensions adjusted:

${warning}

\n ` : ''}\n

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

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n }\n );\n}\n\n// CSS remains unchanged\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n }\n .container {\n max-width: 800px;\n margin: 0 auto;\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n h1, h2 {\n color: #333;\n }\n form {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n }\n .input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n }\n .submit-btn {\n padding: 10px 20px;\n background-color: #007bff;\n color: #fff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .submit-btn:hover {\n background-color: #0056b3;\n }\n .submit-btn:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n }\n .image-container {\n margin-top: 20px;\n }\n .generated-image {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n }\n .loading {\n color: #007bff;\n font-weight: bold;\n }\n .error {\n color: #dc3545;\n font-weight: bold;\n }\n`;",["D",1732391858854],{"_129":130,"_131":132},{"_112":155,"_129":130,"_98":99,"_117":153,"_230":-5},"prDisabledHint","Example usage: https://your-val.val.run?image=a%20beautiful%20sunset (uses default 1024x768)\nhttps://your-val.val.run?image=a%20beautiful%20sunset&width=512&height=512 (uses 512x512)\nhttps://your-val.val.run?image=a%20beautiful%20sunset&width=4096&height=4096 (will cap at 2048x2048) This uses together.ai api and generates the image using the black-forest-labs/FLUX.1-schnell model which is very fast. You will need to set the environment var TOGETHER_API_KEY to your key. I built this entirely with Townie AI and most of it was done with the Claude 3.5 Haiku which I find for most projects get things right faster than sonnet.","latestEvaluation","andiebuk/imggenpro",[235,239,242,245],{"_115":236,"_117":197,"_237":238},["D",1732391858854],"n","1",{"_115":240,"_117":90,"_237":241},["D",1732391625793],"2",{"_115":243,"_117":122,"_237":244},["D",1732391493848],"3",{"_115":246,"_117":31,"_237":247},["D",1732391383483],"4","forksCount","valname","page",{"_112":110,"_98":99,"_129":130,"_11":96,"_117":118,"_100":101,"_113":114,"_104":105,"_111":26,"_135":136},"routes/_app","actionData","errors"]

Image Generation

Generated Image: