| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Phone Cover Designer</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"> |
| <style> |
| @keyframes gradientShift { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| body::before { |
| content: ""; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #8fd3f4); |
| background-size: 400% 400%; |
| z-index: -1; |
| animation: gradientShift 15s ease infinite; |
| } |
| .design-box { |
| background: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(10px); |
| border-radius: 15px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| } |
| .gallery-item { |
| transition: transform 0.3s, box-shadow 0.3s; |
| } |
| .gallery-item:hover { |
| transform: scale(1.05); |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); |
| } |
| .loading-dots span { |
| animation: typing 1s infinite ease-in-out; |
| } |
| @keyframes typing { |
| 0% { transform: translateY(0); opacity: 0.4; } |
| 50% { transform: translateY(-5px); opacity: 1; } |
| 100% { transform: translateY(0); opacity: 0.4; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen font-sans"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="text-center mb-12"> |
| <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-blue-500"> |
| AI Phone Cover Designer |
| </h1> |
| <p class="text-xl text-gray-700">Create custom phone covers with AI</p> |
| </header> |
|
|
| |
| <div class="design-box p-8 max-w-4xl mx-auto"> |
| |
| <div class="flex gap-4 mb-8"> |
| <button data-tab="home" class="tab-btn px-6 py-2 rounded-full bg-blue-500 text-white font-semibold"> |
| Home |
| </button> |
| <button data-tab="design" class="tab-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700"> |
| Design |
| </button> |
| <button data-tab="about" class="tab-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700"> |
| About |
| </button> |
| </div> |
|
|
| |
| <div id="home-tab" class="tab-content active"> |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Welcome</h2> |
| <div class="grid grid-cols-2 gap-4" id="gallery"> |
| |
| </div> |
| </div> |
|
|
| |
| <div id="design-tab" class="tab-content hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2 font-semibold">Color</label> |
| <input type="text" id="color-input" class="w-full p-3 border rounded-lg" |
| placeholder="E.g., Red"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2 font-semibold">Mobile Type</label> |
| <input type="text" id="type-input" class="w-full p-3 border rounded-lg" |
| placeholder="E.g., iPhone 15"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2 font-semibold">Design Details</label> |
| <textarea id="design-input" class="w-full p-3 border rounded-lg" rows="3" |
| placeholder="E.g., Bold stripes with geometric patterns"></textarea> |
| </div> |
| <button id="generate-btn" class="w-full bg-blue-500 text-white py-3 rounded-lg font-semibold |
| hover:bg-blue-600 transition-colors"> |
| Generate Design |
| </button> |
| <button id="save-btn" class="w-full mt-4 bg-green-500 text-white py-3 rounded-lg font-semibold |
| hover:bg-green-600 transition-colors"> |
| Save Design |
| </button> |
| </div> |
| <div> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 aspect-square flex items-center justify-center" |
| id="output-image"> |
| <span class="text-gray-400">Your design will appear here</span> |
| </div> |
| <div class="mt-4 p-4 bg-blue-50 rounded-lg" id="ai-message"> |
| <div class="text-blue-600 font-semibold">AI Assistant:</div> |
| <div id="message-text" class="mt-2"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="about-tab" class="tab-content hidden"> |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">About</h2> |
| <div class="space-y-4 text-gray-700"> |
| <p>The AI Phone Cover Maker is a cutting-edge tool designed to help users create personalized phone cover designs quickly and easily.</p> |
| <div class="bg-white p-4 rounded-lg"> |
| <h3 class="font-semibold text-lg mb-2">Features:</h3> |
| <ul class="list-disc pl-6"> |
| <li>Create custom designs using simple prompts</li> |
| <li>Generate designs for various phone models</li> |
| <li>Save your designs for future use</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="loading" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| <div class="bg-white p-8 rounded-lg text-center"> |
| <div class="loading-dots space-x-1 mb-4"> |
| <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span> |
| <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span> |
| <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span> |
| </div> |
| <p class="text-gray-700">Generating your design...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const API_URL = "https://api-inference.huggingface.co/models/artificialguybr/TshirtDesignRedmond-V2"; |
| const tabs = { |
| home: document.getElementById('home-tab'), |
| design: document.getElementById('design-tab'), |
| about: document.getElementById('about-tab') |
| }; |
| |
| |
| document.querySelectorAll('.tab-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| |
| Object.values(tabs).forEach(tab => tab.classList.add('hidden')); |
| document.querySelectorAll('.tab-btn').forEach(b => |
| b.classList.replace('bg-blue-500', 'bg-gray-200')); |
| |
| |
| const tabId = this.dataset.tab; |
| tabs[tabId].classList.remove('hidden'); |
| this.classList.replace('bg-gray-200', 'bg-blue-500'); |
| }); |
| }); |
| |
| |
| document.getElementById('generate-btn').addEventListener('click', async function() { |
| const color = document.getElementById('color-input').value; |
| const type = document.getElementById('type-input').value; |
| const design = document.getElementById('design-input').value; |
| |
| if (!color || !type || !design) { |
| alert('Please fill in all fields'); |
| return; |
| } |
| |
| showLoading(true); |
| try { |
| const prompt = `A single vertical ${color} colored ${type} back cover featuring a bold ${design} design on the front, hanging on the plain wall. The soft light and shadows, creating a striking contrast against the minimal background, evoking modern sophistication.`; |
| |
| const response = await queryAPI(prompt); |
| const imageUrl = URL.createObjectURL(response); |
| |
| |
| const output = document.getElementById('output-image'); |
| output.innerHTML = `<img src="${imageUrl}" class="w-full h-full object-contain rounded-lg">`; |
| |
| |
| const message = `Your design is generated with the color '${color}', mobile type '${type}', and design '${design}'.`; |
| document.getElementById('message-text').textContent = message; |
| speakMessage(message); |
| } catch (error) { |
| alert('Error generating design: ' + error.message); |
| } |
| showLoading(false); |
| }); |
| |
| |
| document.getElementById('save-btn').addEventListener('click', function() { |
| const img = document.querySelector('#output-image img'); |
| if (!img) { |
| alert('No design to save'); |
| return; |
| } |
| |
| const link = document.createElement('a'); |
| link.download = 'phone-design.png'; |
| link.href = img.src; |
| link.click(); |
| document.getElementById('message-text').textContent = 'Design saved successfully!'; |
| }); |
| |
| async function queryAPI(prompt) { |
| const payload = { |
| inputs: prompt, |
| parameters: { |
| negative_prompt: "(worst quality, low quality, lowres, oversaturated, grayscale, bad photo:1.4)", |
| num_inference_steps: 30, |
| scheduler: "DPMSolverMultistepScheduler", |
| } |
| }; |
| |
| let retries = 0; |
| while (retries < 5) { |
| const response = await fetch(API_URL, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(payload) |
| }); |
| |
| if (response.ok) return await response.blob(); |
| if (response.status === 503) { |
| await new Promise(resolve => setTimeout(resolve, 1000)); |
| retries++; |
| } else { |
| throw new Error(`API Error: ${response.status}`); |
| } |
| } |
| throw new Error('Server busy, please try again later'); |
| } |
| |
| function showLoading(show) { |
| document.getElementById('loading').style.display = show ? 'flex' : 'none'; |
| } |
| |
| function speakMessage(text) { |
| const synth = window.speechSynthesis; |
| const utterance = new SpeechSynthesisUtterance(text); |
| synth.speak(utterance); |
| } |
| |
| |
| const gallery = document.getElementById('gallery'); |
| ['https://via.placeholder.com/300x500/FFB6C1/ffffff?text=Sample+1', |
| 'https://via.placeholder.com/300x500/87CEEB/ffffff?text=Sample+2', |
| 'https://via.placeholder.com/300x500/98FB98/ffffff?text=Sample+3', |
| 'https://via.placeholder.com/300x500/DDA0DD/ffffff?text=Sample+4'] |
| .forEach(url => { |
| gallery.innerHTML += ` |
| <div class="gallery-item bg-white rounded-lg overflow-hidden"> |
| <img src="${url}" class="w-full h-48 object-cover"> |
| <div class="p-3 text-gray-700">Sample Design</div> |
| </div> |
| `; |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
