Create an “image generator” module (or service) that uses a state-of-the-art image generation backbone (from Hugging Face) as the base, but fine-tunes (or conditions) it using the dataset / checkpoint at Garbeexkx/68e473f245a5b5ec62019f6c (hereafter “the Garbeexkx model/dataset”).
3d88449 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelPotion AI - Image Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .result-card { | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .prompt-input:focus { | |
| box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-100"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="mb-16 text-center"> | |
| <div class="inline-block p-3 rounded-full gradient-bg shadow-lg mb-6"> | |
| <i data-feather="image" class="w-10 h-10 text-white"></i> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">PixelPotion AI</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Transform your creative visions into stunning digital art with our advanced Garbeexkx-powered AI image generator</p> | |
| <div class="mt-4 bg-white/50 backdrop-blur-sm rounded-lg p-4 inline-block shadow-md"> | |
| <p class="text-lg text-purple-800 font-medium">Using Garbeexkx/68e473f245a5b5ec62019f6c model</p> | |
| </div> | |
| </header> | |
| <!-- Generator Section --> | |
| <section class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden mb-16"> | |
| <div class="p-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Create Your Masterpiece</h2> | |
| <div class="mb-8"> | |
| <label for="prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe what you want to generate</label> | |
| <div class="flex"> | |
| <input type="text" id="prompt" placeholder="A mystical forest with glowing mushrooms and fairies..." | |
| class="flex-1 prompt-input px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button id="generate-btn" class="gradient-bg text-white px-6 py-3 rounded-r-lg font-medium hover:opacity-90 transition"> | |
| Generate <i data-feather="zap" class="inline ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Style</label> | |
| <select id="style" class="w-full px-4 py-3 border border-gray-300 rounded-lg"> | |
| <option value="realistic">Realistic</option> | |
| <option value="fantasy">Fantasy</option> | |
| <option value="anime">Anime</option> | |
| <option value="cyberpunk">Cyberpunk</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Resolution</label> | |
| <select id="resolution" class="w-full px-4 py-3 border border-gray-300 rounded-lg"> | |
| <option value="512x512">512x512 (Square)</option> | |
| <option value="768x512">768x512 (Landscape)</option> | |
| <option value="512x768">512x768 (Portrait)</option> | |
| <option value="768x768">768x768 (HD Square)</option> | |
| <option value="1024x1024">1024x1024 (High Res)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Negative Prompt</label> | |
| <input type="text" id="negative-prompt" placeholder="Things to exclude from image..." | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-8 text-center">Your Generated Images</h2> | |
| <div id="results-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white/30 backdrop-blur-sm rounded-xl p-6 col-span-1 sm:col-span-2 lg:col-span-3 text-center"> | |
| <i data-feather="info" class="w-10 h-10 text-purple-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-medium text-gray-800 mb-2">How It Works</h3> | |
| <p class="text-gray-700 mb-4">Our AI uses the Garbeexkx/68e473f245a5b5ec62019f6c model trained on high-quality datasets</p> | |
| <ul class="grid grid-cols-1 md:grid-cols-3 gap-4 text-left max-w-4xl mx-auto"> | |
| <li class="bg-white/70 p-4 rounded-lg shadow-sm"> | |
| <span class="font-semibold text-purple-600">1. Enter Prompt</span> - Describe what you want to generate | |
| </li> | |
| <li class="bg-white/70 p-4 rounded-lg shadow-sm"> | |
| <span class="font-semibold text-purple-600">2. Select Style</span> - Choose from realistic to fantasy styles | |
| </li> | |
| <li class="bg-white/70 p-4 rounded-lg shadow-sm"> | |
| <span class="font-semibold text-purple-600">3. Generate</span> - Watch as our AI creates your custom image | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Generated images will appear here --> | |
| </div> | |
| </section> | |
| <!-- Loading State (hidden by default) --> | |
| <div id="loading" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white p-8 rounded-xl text-center max-w-md"> | |
| <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-purple-500 mx-auto mb-6"></div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Generating Your Image</h3> | |
| <p class="text-gray-600">Our AI is working its magic to create your unique artwork. This may take a moment...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 text-white py-8 mt-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold mb-2">PixelPotion AI</h3> | |
| <div class="bg-purple-900/20 rounded-lg p-4 inline-block"> | |
| <p class="text-purple-300">Powered by Garbeexkx API</p> | |
| <p class="text-xs text-purple-400 mt-1">Model: 68e473f245a5b5ec62019f6c</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-purple-400 transition"><i data-feather="github"></i></a> | |
| <a href="#" class="hover:text-purple-400 transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="hover:text-purple-400 transition"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| © 2023 PixelPotion AI. All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| color: 0x7d5fff, | |
| backgroundColor: 0xf8fafc, | |
| points: 12, | |
| maxDistance: 20, | |
| spacing: 15 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Demo image generation with placeholder images | |
| document.getElementById('generate-btn').addEventListener('click', async function() { | |
| const prompt = document.getElementById('prompt').value; | |
| const style = document.getElementById('style').value; | |
| const resolution = document.getElementById('resolution').value; | |
| if (!prompt) { | |
| alert('Please enter a prompt'); | |
| return; | |
| } | |
| document.getElementById('loading').classList.remove('hidden'); | |
| try { | |
| // Call our backend service | |
| const [width, height] = resolution.split('x').map(Number); | |
| const response = await fetch('/generate', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| prompt: prompt, | |
| style: style, | |
| width: width, | |
| height: height, | |
| seed: Math.floor(Math.random() * 1000000) | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Generation failed'); | |
| } | |
| const blob = await response.blob(); | |
| const imageUrl = URL.createObjectURL(blob); | |
| addResultImage(prompt, style, resolution, imageUrl); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| alert('Failed to generate image. Please try again.'); | |
| } finally { | |
| document.getElementById('loading').classList.add('hidden'); | |
| } | |
| }); | |
| function addResultImage(prompt, style, resolution, imageUrl) { | |
| const resultCard = ` | |
| <div class="result-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <img src="${imageUrl}" alt="AI generated art" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800 mb-2">${prompt.substring(0, 30)}${prompt.length > 30 ? '...' : ''}</h3> | |
| <p class="text-sm text-gray-600 mb-3">${style} - ${resolution}</p> | |
| <div class="flex justify-between"> | |
| <button onclick="downloadImage('${imageUrl}')" class="text-purple-600 hover:text-purple-800"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="shareImage('${imageUrl}', '${prompt}')" class="text-purple-600 hover:text-purple-800"> | |
| <i data-feather="share-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i data-feather="heart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| document.getElementById('results-container').insertAdjacentHTML('afterbegin', resultCard); | |
| feather.replace(); | |
| } | |
| function downloadImage(url) { | |
| const link = document.createElement('a'); | |
| link.href = url; | |
| link.download = 'ai-generated-image.png'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| function shareImage(url, prompt) { | |
| if (navigator.share) { | |
| navigator.share({ | |
| title: 'AI Generated Art', | |
| text: `Check out this AI-generated image: ${prompt}`, | |
| url: url | |
| }).catch(console.error); | |
| } else { | |
| alert('Web Share API not supported in your browser. Copy the image URL instead.'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |