Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IconCraft - AI Icon Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <link rel="apple-touch-icon" href="apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="iconx192.png"> | |
| <link rel="icon" type="image/png" sizes="512x512" href="iconx512.png"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .icon-preview { | |
| transition: all 0.3s ease; | |
| } | |
| .icon-preview:hover { | |
| transform: scale(1.05); | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .prompt-input:focus { | |
| box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-12"> | |
| <div class="flex justify-center items-center mb-6"> | |
| <i class="fas fa-icons text-5xl mr-4"></i> | |
| <h1 class="text-4xl font-bold">iconic</h1> | |
| </div> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto">Transform your ideas into beautiful icons</p> | |
| </header> | |
| <main class="max-w-4xl mx-auto"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-8 shadow-xl"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <div class="mb-6"> | |
| <label for="prompt" class="block text-lg font-medium mb-2"> | |
| <i class="fas fa-lightbulb mr-2"></i>Describe your icon | |
| </label> | |
| <textarea | |
| id="prompt" | |
| class="w-full prompt-input bg-white bg-opacity-20 rounded-lg p-4 text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:border-transparent" | |
| rows="4" | |
| placeholder="e.g. A cute cat icon with glasses, flat design"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2"> | |
| <i class="fas fa-palette mr-2"></i> Style | |
| </label> | |
| <div class="grid grid-cols-2 sm:grid-cols-4 gap-3"> | |
| <button class="style-btn bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg flex items-center justify-center" data-style="flat"> | |
| <i class="fas fa-square mr-2"></i> Flat | |
| </button> | |
| <button class="style-btn bg-pink-500 hover:bg-pink-600 text-white py-2 px-4 rounded-lg flex items-center justify-center" data-style="3d"> | |
| <i class="fas fa-cube mr-2"></i> 3D | |
| </button> | |
| <button class="style-btn bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg flex items-center justify-center" data-style="minimal"> | |
| <i class="fas fa-brush mr-2"></i> Minimal | |
| </button> | |
| <button class="style-btn bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg flex items-center justify-center" data-style="cartoon"> | |
| <i class="fas fa-smile mr-2"></i> Cartoon | |
| </button> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="w-full bg-white text-indigo-600 hover:bg-indigo-100 font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Icon | |
| </button> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-white bg-opacity-20 rounded-xl p-6 h-full flex flex-col"> | |
| <h3 class="text-lg font-medium mb-4 flex items-center"> | |
| <i class="fas fa-image mr-2"></i> Icon Preview | |
| </h3> | |
| <div id="preview-container" class="flex-1 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-icons text-6xl opacity-30 mb-4"></i> | |
| <p class="opacity-70">Your generated icon will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="download-section" class="mt-8 hidden"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download Options | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <button id="download-png" class="bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-image mr-2"></i> PNG | |
| </button> | |
| <button id="download-jpg" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-image mr-2"></i> JPG | |
| </button> | |
| <button id="download-ico" class="bg-purple-500 hover:bg-purple-600 text-white py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file mr-2"></i> ICO | |
| </button> | |
| <button id="download-all" class="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-archive mr-2"></i> All Formats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-16 text-center text-white text-opacity-70"> | |
| <p>AI <i class="fas fa-heart text-red-400"></i> Stable Diffusion</p> | |
| <p class="mt-2 text-sm">powered by Cloudflare Workers</p> | |
| </footer> | |
| </div> | |
| <script> | |
| let currentImageUrl = ""; | |
| document.getElementById("generate-btn").addEventListener("click", function () { | |
| const prompt = document.getElementById("prompt").value.trim(); | |
| if (!prompt) { | |
| alert("Please enter a description for your icon."); | |
| return; | |
| } | |
| document.getElementById("generate-btn").disabled = true; | |
| document.getElementById("generate-btn").innerHTML = "Generating... <i class='fas fa-spinner fa-spin'></i>"; | |
| fetch("https://text-to-image.jessejesse.workers.dev", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ | |
| prompt: prompt | |
| }) | |
| }) | |
| .then(response => response.blob()) | |
| .then(blob => { | |
| const url = URL.createObjectURL(blob); | |
| currentImageUrl = url; | |
| document.getElementById("preview-container").innerHTML = `<img src="${url}" class="icon-preview rounded-lg shadow-xl max-w-full">`; | |
| document.getElementById("download-section").classList.remove("hidden"); | |
| document.getElementById("generate-btn").disabled = false; | |
| document.getElementById("generate-btn").innerHTML = "<i class='fas fa-magic mr-2'></i> Generate Icon"; | |
| }) | |
| .catch(error => { | |
| console.error("Error:", error); | |
| alert("An error occurred while generating the icon. Please try again."); | |
| document.getElementById("generate-btn").disabled = false; | |
| document.getElementById("generate-btn").innerHTML = "<i class='fas fa-magic mr-2'></i> Generate Icon"; | |
| }); | |
| }); | |
| document.getElementById("download-png").addEventListener("click", function () { | |
| downloadImage("png"); | |
| }); | |
| document.getElementById("download-jpg").addEventListener("click", function () { | |
| downloadImage("jpg"); | |
| }); | |
| document.getElementById("download-ico").addEventListener("click", function () { | |
| downloadImage("ico"); | |
| }); | |
| function downloadImage(format) { | |
| if (!currentImageUrl) { | |
| alert("Please generate an icon first."); | |
| return; | |
| } | |
| const img = new Image(); | |
| img.crossOrigin = "anonymous"; | |
| img.src = currentImageUrl; | |
| img.onload = function () { | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = img.width; | |
| canvas.height = img.height; | |
| const ctx = canvas.getContext('2d'); | |
| ctx.drawImage(img, 0, 0); | |
| let mimeType = 'image/png'; | |
| if (format === 'jpg') mimeType = 'image/jpeg'; | |
| else if (format === 'ico') mimeType = 'image/x-icon'; | |
| canvas.toBlob(function (blob) { | |
| const link = document.createElement('a'); | |
| link.href = URL.createObjectURL(blob); | |
| link.download = `icon.${format}`; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }, mimeType); | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> | |