| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Image Prompt Generator</title> |
| <style> |
| :root { |
| --primary: #6366f1; |
| --secondary: #4f46e5; |
| --dark: #1e293b; |
| --light: #f8fafc; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, sans-serif; |
| background: var(--light); |
| color: var(--dark); |
| line-height: 1.6; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 2rem auto; |
| padding: 0 1rem; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 3rem; |
| } |
| |
| .header h1 { |
| font-size: 2.5rem; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| margin-bottom: 1rem; |
| } |
| |
| .main-content { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 2rem; |
| } |
| |
| .panel { |
| background: white; |
| padding: 2rem; |
| border-radius: 1rem; |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); |
| } |
| |
| .image-upload { |
| position: relative; |
| height: 300px; |
| border: 2px dashed #e2e8f0; |
| border-radius: 1rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .image-upload:hover { |
| border-color: var(--primary); |
| } |
| |
| .image-upload input { |
| display: none; |
| } |
| |
| .image-upload img { |
| max-width: 100%; |
| max-height: 100%; |
| object-fit: contain; |
| } |
| |
| .upload-icon { |
| font-size: 3rem; |
| color: #94a3b8; |
| margin-bottom: 1rem; |
| } |
| |
| .prompt-results { |
| height: 300px; |
| overflow-y: auto; |
| padding: 1rem; |
| background: #f8fafc; |
| border-radius: 0.5rem; |
| margin-top: 1rem; |
| } |
| |
| .prompt-item { |
| padding: 1rem; |
| background: white; |
| border-radius: 0.5rem; |
| margin-bottom: 1rem; |
| box-shadow: 0 2px 4px rgb(0 0 0 / 0.05); |
| } |
| |
| .prompt-type { |
| font-size: 0.875rem; |
| color: var(--primary); |
| font-weight: 500; |
| margin-bottom: 0.5rem; |
| } |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0.75rem 1.5rem; |
| border: none; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary { |
| background: var(--primary); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| background: var(--secondary); |
| } |
| |
| .settings { |
| margin-top: 1rem; |
| padding: 1rem; |
| background: #f8fafc; |
| border-radius: 0.5rem; |
| } |
| |
| .setting-item { |
| display: flex; |
| align-items: center; |
| margin-bottom: 0.5rem; |
| } |
| |
| .setting-item label { |
| margin-left: 0.5rem; |
| } |
| |
| .loading { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| border: 3px solid #f3f3f3; |
| border-top: 3px solid var(--primary); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin-right: 0.5rem; |
| display: none; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| @media (max-width: 768px) { |
| .main-content { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header class="header"> |
| <h1>AI Image Prompt Generator</h1> |
| <p>Upload an image to generate creative prompts</p> |
| </header> |
|
|
| <div class="main-content"> |
| <div class="panel"> |
| <h2>Image Input</h2> |
| <label class="image-upload" for="imageInput" id="dropZone"> |
| <input type="file" id="imageInput" accept="image/*" onchange="handleImageUpload(event)"> |
| <div id="uploadPlaceholder"> |
| <div class="upload-icon">📸</div> |
| <p>Click or drag image here</p> |
| </div> |
| <img id="previewImage" style="display: none;"> |
| </label> |
|
|
| <div class="settings"> |
| <h3>Generation Settings</h3> |
| <div class="setting-item"> |
| <input type="checkbox" id="detailedDescription" checked> |
| <label for="detailedDescription">Detailed Description</label> |
| </div> |
| <div class="setting-item"> |
| <input type="checkbox" id="styleAnalysis" checked> |
| <label for="styleAnalysis">Style Analysis</label> |
| </div> |
| <div class="setting-item"> |
| <input type="checkbox" id="technicalDetails" checked> |
| <label for="technicalDetails">Technical Details</label> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="panel"> |
| <h2>Generated Prompts</h2> |
| <button class="btn btn-primary" onclick="generatePrompts()"> |
| <span id="loading" class="loading"></span> |
| Generate Prompts |
| </button> |
| <div class="prompt-results" id="promptResults"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function handleImageUpload(event) { |
| const file = event.target.files[0]; |
| if (file && file.type.startsWith('image/')) { |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| const previewImage = document.getElementById('previewImage'); |
| const uploadPlaceholder = document.getElementById('uploadPlaceholder'); |
| |
| previewImage.src = e.target.result; |
| previewImage.style.display = 'block'; |
| uploadPlaceholder.style.display = 'none'; |
| } |
| reader.readAsDataURL(file); |
| } |
| } |
| |
| |
| const dropZone = document.getElementById('dropZone'); |
| |
| dropZone.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| dropZone.style.borderColor = var(--primary); |
| }); |
| |
| dropZone.addEventListener('dragleave', (e) => { |
| e.preventDefault(); |
| dropZone.style.borderColor = '#e2e8f0'; |
| }); |
| |
| dropZone.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| dropZone.style.borderColor = '#e2e8f0'; |
| |
| const file = e.dataTransfer.files[0]; |
| if (file && file.type.startsWith('image/')) { |
| const input = document.getElementById('imageInput'); |
| input.files = e.dataTransfer.files; |
| handleImageUpload({ target: { files: [file] } }); |
| } |
| }); |
| |
| |
| async function generatePrompts() { |
| const previewImage = document.getElementById('previewImage'); |
| if (previewImage.style.display === 'none') { |
| alert('Please upload an image first'); |
| return; |
| } |
| |
| const loading = document.getElementById('loading'); |
| loading.style.display = 'inline-block'; |
| |
| const settings = { |
| detailedDescription: document.getElementById('detailedDescription').checked, |
| styleAnalysis: document.getElementById('styleAnalysis').checked, |
| technicalDetails: document.getElementById('technicalDetails').checked |
| }; |
| |
| try { |
| const prompts = await simulateAIAnalysis(settings); |
| displayPrompts(prompts); |
| } finally { |
| loading.style.display = 'none'; |
| } |
| } |
| |
| function simulateAIAnalysis(settings) { |
| return new Promise((resolve) => { |
| setTimeout(() => { |
| const prompts = []; |
| |
| if (settings.detailedDescription) { |
| prompts.push({ |
| type: 'Detailed Description', |
| content: 'A stunning visual composition featuring vibrant colors and intricate details, capturing the essence of modern artistic expression through digital media.' |
| }); |
| } |
| |
| if (settings.styleAnalysis) { |
| prompts.push({ |
| type: 'Style Analysis', |
| content: 'Contemporary digital art style with elements of minimalism and abstract expressionism, utilizing a harmonious color palette dominated by cool tones and subtle gradients.' |
| }); |
| } |
| |
| if (settings.technicalDetails) { |
| prompts.push({ |
| type: 'Technical Details', |
| content: 'Created using advanced digital techniques, incorporating layered compositions, dynamic lighting effects, and precise geometric patterns with a resolution of 4K.' |
| }); |
| } |
| |
| resolve(prompts); |
| }, 2000); |
| }); |
| } |
| |
| function displayPrompts(prompts) { |
| const promptResults = document.getElementById('promptResults'); |
| promptResults.innerHTML = ''; |
| |
| prompts.forEach(prompt => { |
| const promptItem = document.createElement('div'); |
| promptItem.className = 'prompt-item'; |
| promptItem.innerHTML = ` |
| <div class="prompt-type">${prompt.type}</div> |
| <div class="prompt-content">${prompt.content}</div> |
| `; |
| promptResults.appendChild(promptItem); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
