Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Studio - Android App Generator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #6750A4; | |
| --primary-variant: #625B71; | |
| --secondary: #625B71; | |
| --surface: #FFFBFE; | |
| --background: #FFFBFE; | |
| --error: #BA1A1A; | |
| --on-primary: #FFFFFF; | |
| --on-secondary: #FFFFFF; | |
| --on-surface: #1C1B1F; | |
| --on-background: #1C1B1F; | |
| --outline: #79747E; | |
| --outline-variant: #CAC4D0; | |
| --shadow: #000000; | |
| --success: #006D3E; | |
| --warning: #7D5700; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| color: var(--on-background); | |
| } | |
| .phone-container { | |
| width: 100%; | |
| max-width: 480px; | |
| background: var(--background); | |
| border-radius: 40px; | |
| box-shadow: 0 30px 60px rgba(0,0,0,0.3); | |
| overflow: hidden; | |
| position: relative; | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .status-bar { | |
| background: var(--primary); | |
| color: white; | |
| padding: 8px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 14px; | |
| } | |
| .app-header { | |
| background: var(--primary); | |
| color: white; | |
| padding: 16px 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .app-header h1 { | |
| font-size: 20px; | |
| font-weight: 500; | |
| flex: 1; | |
| } | |
| .app-header a { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 12px; | |
| opacity: 0.9; | |
| transition: opacity 0.3s; | |
| } | |
| .app-header a:hover { | |
| opacity: 1; | |
| } | |
| .tab-container { | |
| background: var(--surface); | |
| display: flex; | |
| border-bottom: 1px solid var(--outline-variant); | |
| } | |
| .tab { | |
| flex: 1; | |
| padding: 12px; | |
| text-align: center; | |
| background: none; | |
| border: none; | |
| color: var(--on-surface); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| position: relative; | |
| transition: all 0.3s; | |
| } | |
| .tab.active { | |
| color: var(--primary); | |
| } | |
| .tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--primary); | |
| } | |
| .content-area { | |
| padding: 20px; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| background: var(--background); | |
| } | |
| .prompt-editor { | |
| margin-bottom: 20px; | |
| } | |
| .input-group { | |
| margin-bottom: 16px; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--on-surface); | |
| } | |
| .text-input { | |
| width: 100%; | |
| padding: 16px; | |
| border: 1px solid var(--outline-variant); | |
| border-radius: 12px; | |
| font-size: 16px; | |
| font-family: inherit; | |
| transition: all 0.3s; | |
| background: var(--surface); | |
| } | |
| .text-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.1); | |
| } | |
| textarea.text-input { | |
| resize: vertical; | |
| min-height: 120px; | |
| font-family: 'Roboto Mono', monospace; | |
| } | |
| .prompt-suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .suggestion-chip { | |
| padding: 6px 12px; | |
| background: var(--surface); | |
| border: 1px solid var(--outline-variant); | |
| border-radius: 16px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .suggestion-chip:hover { | |
| background: var(--primary); | |
| color: var(--on-primary); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(103, 80, 164, 0.3); | |
| } | |
| .slider-container { | |
| margin-bottom: 16px; | |
| } | |
| .slider-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| } | |
| .slider { | |
| width: 100%; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: var(--outline-variant); | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 10px rgba(103, 80, 164, 0.5); | |
| } | |
| .btn { | |
| padding: 12px 24px; | |
| background: var(--primary); | |
| color: var(--on-primary); | |
| border: none; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn:hover { | |
| background: var(--primary-variant); | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(103, 80, 164, 0.4); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: var(--surface); | |
| color: var(--primary); | |
| border: 1px solid var(--outline-variant); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: var(--on-primary); | |
| } | |
| .btn-group { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 20px; | |
| } | |
| .image-preview { | |
| background: var(--surface); | |
| border-radius: 12px; | |
| padding: 16px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .preview-placeholder { | |
| width: 100%; | |
| height: 200px; | |
| background: linear-gradient(45deg, var(--outline-variant) 25%, transparent 25%), | |
| linear-gradient(-45deg, var(--outline-variant) 25%, transparent 25%), | |
| linear-gradient(45deg, transparent 75%, var(--outline-variant) 75%), | |
| linear-gradient(-45deg, transparent 75%, var(--outline-variant) 75%); | |
| background-size: 20px 20px; | |
| background-position: 0 0, 0 10px, 10px -10px, -10px 0px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--outline); | |
| font-size: 14px; | |
| } | |
| .generated-image { | |
| width: 100%; | |
| height: 200px; | |
| border-radius: 8px; | |
| object-fit: cover; | |
| } | |
| .build-progress { | |
| background: var(--surface); | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| } | |
| .progress-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .progress-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px; | |
| background: var(--background); | |
| border-radius: 8px; | |
| transition: all 0.3s; | |
| } | |
| .progress-step.active { | |
| background: linear-gradient(90deg, rgba(103, 80, 164, 0.1) 0%, transparent 100%); | |
| border-left: 3px solid var(--primary); | |
| } | |
| .progress-step.completed { | |
| opacity: 0.7; | |
| } | |
| .step-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: var(--outline-variant); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| transition: all 0.3s; | |
| } | |
| .progress-step.active .step-icon { | |
| background: var(--primary); | |
| color: white; | |
| animation: pulse 1.5s infinite; | |
| } | |
| .progress-step.completed .step-icon { | |
| background: var(--success); | |
| color: white; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(103, 80, 164, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(103, 80, 164, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(103, 80, 164, 0); | |
| } | |
| } | |
| .step-info { | |
| flex: 1; | |
| } | |
| .step-title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 2px; | |
| } | |
| .step-description { | |
| font-size: 12px; | |
| color: var(--outline); | |
| } | |
| .fab { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 16px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: 0 6px 20px rgba(0,0,0,0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| z-index: 10; | |
| } | |
| .fab:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 8px 30px rgba(103, 80, 164, 0.4); | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 80px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--shadow); | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| opacity: 0; | |
| transition: all 0.3s; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .template-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .template-card { | |
| background: var(--surface); | |
| border: 1px solid var(--outline-variant); | |
| border-radius: 12px; | |
| padding: 12px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .template-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 6px 20px rgba(0,0,0,0.1); | |
| border-color: var(--primary); | |
| } | |
| .template-icon { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| color: var(--primary); | |
| } | |
| .template-title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 4px; | |
| } | |
| .template-description { | |
| font-size: 12px; | |
| color: var(--outline); | |
| } | |
| .history-item { | |
| background: var(--surface); | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin-bottom: 12px; | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .history-item:hover { | |
| transform: translateX(4px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .history-thumbnail { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 8px; | |
| background: var(--outline-variant); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--outline); | |
| } | |
| .history-info { | |
| flex: 1; | |
| } | |
| .history-prompt { | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 4px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .history-date { | |
| font-size: 12px; | |
| color: var(--outline); | |
| } | |
| .settings-section { | |
| background: var(--surface); | |
| border-radius: 12px; | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .settings-title { | |
| font-size: 16px; | |
| font-weight: 500; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .toggle-switch { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 12px; | |
| } | |
| .switch { | |
| position: relative; | |
| width: 48px; | |
| height: 24px; | |
| } | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .switch-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: var(--outline-variant); | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .switch-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .switch-slider { | |
| background-color: var(--primary); | |
| } | |
| input:checked + .switch-slider:before { | |
| transform: translateX(24px); | |
| } | |
| .loading-spinner { | |
| display: none; | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid var(--outline-variant); | |
| border-top: 4px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| .loading-spinner.active { | |
| display: block; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @media (max-width: 480px) { | |
| .phone-container { | |
| border-radius: 0; | |
| max-width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="phone-container"> | |
| <div class="status-bar"> | |
| <span>9:41 AM</span> | |
| <span>⚡ 🔋 📶</span> | |
| </div> | |
| <div class="app-header"> | |
| <span class="material-icons">brush</span> | |
| <h1>AI Studio</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <div class="tab-container"> | |
| <button class="tab active" onclick="switchTab('create')"> | |
| <span class="material-icons" style="font-size: 18px;">add_circle</span> | |
| Create | |
| </button> | |
| <button class="tab" onclick="switchTab('templates')"> | |
| <span class="material-icons" style="font-size: 18px;">dashboard</span> | |
| Templates | |
| </button> | |
| <button class="tab" onclick="switchTab('history')"> | |
| <span class="material-icons" style="font-size: 18px;">history</span> | |
| History | |
| </button> | |
| <button class="tab" onclick="switchTab('settings')"> | |
| <span class="material-icons" style="font-size: 18px;">settings</span> | |
| Settings | |
| </button> | |
| </div> | |
| <div class="content-area"> | |
| <div id="create-tab" class="tab-content active"> | |
| <div class="prompt-editor"> | |
| <div class="input-group"> | |
| <label for="prompt">AI Prompt</label> | |
| <textarea id="prompt" class="text-input" placeholder="Enter your creative prompt here..."></textarea> | |
| </div> | |
| <div class="prompt-suggestions"> | |
| <div class="suggestion-chip" onclick="addToPrompt('photorealistic')">photorealistic</div> | |
| <div class="suggestion-chip" onclick="addToPrompt('4K')">4K</div> | |
| <div class="suggestion-chip" onclick="addToPrompt('cinematic lighting')">cinematic lighting</div> | |
| <div class="suggestion-chip" onclick="addToPrompt('ultra detailed')">ultra detailed</div> | |
| <div class="suggestion-chip" onclick="addToPrompt('art style')">art style</div> | |
| <div class="suggestion-chip" onclick="addToPrompt('fantasy')">fantasy</div> | |
| </div> | |
| <div class="slider-container"> | |
| <div class="slider-label"> | |
| <span>Creativity</span> | |
| <span id="creativity-value">75</span> | |
| </div> | |
| <input type="range" class="slider" id="creativity" min="0" max="100" value="75"> | |
| </div> | |
| <div class="slider-container"> | |
| <div class="slider-label"> | |
| <span>Detail Level</span> | |
| <span id="detail-value">50</span> | |
| </div> | |
| <input type="range" class="slider" id="detail" min="0" max="100" value="50"> | |
| </div> | |
| <div class="image-preview"> | |
| <div id="image-container"> | |
| <div class="preview-placeholder"> | |
| <span>AI Generated Image</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="btn-group"> | |
| <button class="btn" onclick="generateImage()"> | |
| <span class="material-icons">auto_awesome</span> | |
| Generate | |
| </button> | |
| <button class="btn btn-secondary" onclick="clearPrompt()"> | |
| <span class="material-icons">clear</span> | |
| Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div class="build-progress" id="build-progress" style="display: none;"> | |
| <h3 style="margin-bottom: 16px;">Building APK</h3> | |
| <div class="progress-steps"> | |
| <div class="progress-step" id="step1"> | |
| <div class="step-icon">1</div> | |
| <div class="step-info"> | |
| <div class="step-title">Compiling Resources</div> | |
| <div class="step-description">Processing images and assets</div> | |
| </div> | |
| </div> | |
| <div class="progress-step" id="step2"> | |
| <div class="step-icon">2</div> | |
| <div class="step-info"> | |
| <div class="step-title">Generating Code</div> | |
| <div class="step-description">Creating Android components</div> | |
| </div> | |
| </div> | |
| <div class="progress-step" id="step3"> | |
| <div class="step-icon">3</div> | |
| <div class="step-info"> | |
| <div class="step-title">Signing APK</div> | |
| <div class="step-description">Adding security signature</div> | |
| </div> | |
| </div> | |
| <div class="progress-step" id="step4"> | |
| <div class="step-icon">4</div> | |
| <div class="step-info"> | |
| <div class="step-title">Optimizing</div> | |
| <div class="step-description">Final optimizations</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="loading-spinner" id="loading-spinner"></div> | |
| </div> | |
| </div> | |
| <div id="templates-tab" class="tab-content"> | |
| <h3 style="margin-bottom: 16px;">Quick Templates</h3> | |
| <div class="template-grid"> | |
| <div class="template-card" onclick="selectTemplate('portrait')"> | |
| <div class="template-icon">👤</div> | |
| <div class="template-title">Portrait</div> | |
| <div class="template-description">Professional headshots</div> | |
| </div> | |
| <div class="template-card" onclick="selectTemplate('landscape')"> | |
| <div class="template-icon">🏔️</div> | |
| <div class="template-title">Landscape</div> | |
| <div class="template-description">Natural scenes</div> | |
| </div> | |
| <div class="template-card" onclick="selectTemplate('abstract')"> | |
| <div class="template-icon">🎨</div> | |
| <div class="template-title">Abstract</div> | |
| <div class="template-description">Modern art style</div> | |
| </div> | |
| <div class="template-card" onclick="selectTemplate('logo')"> | |
| <div class="template-icon">🏢</div> | |
| <div class="template-title">Logo</div> | |
| <div class="template-description">Brand design</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="history-tab" class="tab-content"> | |
| <h3 style="margin-bottom: 16px;">Recent Generations</h3> | |
| <div id="history-list"> | |
| <div class="history-item" onclick="loadFromHistory('item1')"> | |
| <div class="history-thumbnail"> | |
| <span class="material-icons">image</span> | |
| </div> | |
| <div class="history-info"> | |
| <div class="history-prompt">Sunset over mountains</div> | |
| <div class="history-date">2 hours ago</div> | |
| </div> | |
| </div> | |
| <div class="history-item" onclick="loadFromHistory('item2')"> | |
| <div class="history-thumbnail"> | |
| <span class="material-icons">image</span> | |
| </div> | |
| <div class="history-info"> | |
| <div class="history-prompt">Futuristic city at night</div> | |
| <div class="history-date">Yesterday</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="settings-tab" class="tab-content"> | |
| <div class="settings-section"> | |
| <div class="settings-title"> | |
| <span class="material-icons">tune</span> | |
| Generation Settings | |
| </div> | |
| <div class="toggle-switch"> | |
| <span>Auto-enhance prompts</span> | |
| <label class="switch"> | |
| <input type="checkbox" checked> | |
| <span class="switch-slider"></span> | |
| </label> | |
| </div> | |
| <div class="toggle-switch"> | |
| <span>Save to gallery</span> | |
| <label class="switch"> | |
| <input type="checkbox" checked> | |
| <span class="switch-slider"></span> | |
| </label> | |
| </div> | |
| <div class="toggle-switch"> | |
| <span>HD output</span> | |
| <label class="switch"> | |
| <input type="checkbox"> | |
| <span class="switch-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <div class="settings-title"> | |
| <span class="material-icons">developer_mode</span> | |
| APK Settings | |
| </div> | |
| <div class="input-group"> | |
| <label for="app-name">App Name</label> | |
| <input type="text" class="text-input" id="app-name" value="AI Image Generator"> | |
| </div> | |
| <div class="input-group"> | |
| <label for="package-name">Package Name</label> | |
| <input type="text" class="text-input" id="package-name" value="com.aistudio.imagegen"> | |
| </div> | |
| <div class="input-group"> | |
| <label for="version">Version</label> | |
| <input type="text" class="text-input" id="version" value="1.0.0"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="fab" onclick="buildAPK()"> | |
| <span class="material-icons">build</span> | |
| </button> | |
| </div> | |
| <div class="toast" id="toast"></div> | |
| <script> | |
| // Tab switching | |
| function switchTab(tabName) { | |
| const tabs = document.querySelectorAll('.tab'); | |
| const contents = document.querySelectorAll('.tab-content'); | |
| tabs.forEach(tab => tab.classList.remove('active')); | |
| contents.forEach(content => content.classList.remove('active')); | |
| event.target.closest('.tab').classList.add('active'); | |
| document.getElementById(`${tabName}-tab`).classList.add('active'); | |
| } | |
| // Slider updates | |
| document.getElementById('creativity').addEventListener('input', function() { | |
| document.getElementById('creativity-value').textContent = this.value; | |
| }); | |
| document.getElementById('detail').addEventListener('input', function() { | |
| document.getElementById('detail-value').textContent = this.value; | |
| }); | |
| // Add to prompt | |
| function addToPrompt(text) { | |
| const promptTextarea = document.getElementById('prompt'); | |
| if (promptTextarea.value && !promptTextarea.value.endsWith(' ')) { | |
| promptTextarea.value += ' '; | |
| } | |
| promptTextarea.value += text; | |
| showToast(`Added "${text}" to prompt`); | |
| } | |
| // Clear prompt | |
| function clearPrompt() { | |
| document.getElementById('prompt').value = ''; | |
| document.getElementById('image-container').innerHTML = ` | |
| <div class="preview-placeholder"> | |
| <span>AI Generated Image</span> | |
| </div> | |
| `; | |
| showToast('Prompt cleared'); | |
| } | |
| // Generate image (mock) | |
| function generateImage() { | |
| const prompt = document.getElementById('prompt').value; | |
| if (!prompt) { | |
| showToast('Please enter a prompt'); | |
| return; | |
| } | |
| showToast('Generating image...'); | |
| // Simulate image generation | |
| setTimeout(() => { | |
| const seed = Math.random().toString(36).substring(7); | |
| const imageUrl = `https://picsum.photos/seed/${seed}/400/200.jpg`; | |
| document.getElementById('image-container').innerHTML = ` | |
| <img src="${imageUrl}" alt="Generated" class="generated-image"> | |
| `; | |
| showToast('Image generated successfully!'); | |
| }, 2000); | |
| } | |
| // Build APK | |
| function buildAPK() { | |
| const prompt = document.getElementById('prompt').value; | |
| if (!prompt) { | |
| showToast('Please generate an image first'); | |
| return; | |
| } | |
| // Show build progress | |
| document.getElementById('build-progress').style.display = 'block'; | |
| document.getElementById('loading-spinner').classList.add('active'); | |
| let currentStep = 1; | |
| const steps = ['step1', 'step2', 'step3', 'step4']; | |
| const interval = setInterval(() => { | |
| if (currentStep > 1) { | |
| document.getElementById(steps[currentStep - 2]).classList.remove('active'); | |
| document.getElementById(steps[currentStep - 2]).classList.add('completed'); | |
| } | |
| if (currentStep <= 4) { | |
| document.getElementById(steps[currentStep - 1]).classList.add('active'); | |
| currentStep++; | |
| } else { | |
| clearInterval(interval); | |
| document.getElementById('loading-spinner').classList.remove('active'); | |
| document.getElementById(steps[3]).classList.remove('active'); | |
| document.getElementById(steps[3]).classList.add('completed'); | |
| showToast('APK built successfully! Ready to download.'); | |
| // Reset after 3 seconds | |
| setTimeout(() => { | |
| document.getElementById('build-progress').style.display = 'none'; | |
| steps.forEach((step, index) => { | |
| document.getElementById(step).classList.remove('active', 'completed'); | |
| }); | |
| }, 3000); | |
| } | |
| }, 1500); | |
| } | |
| // Select template | |
| function selectTemplate(template) { | |
| const templates = { | |
| portrait: 'Professional portrait with studio lighting, photorealistic', | |
| landscape: 'Beautiful landscape with mountains, golden hour lighting', | |
| abstract: 'Abstract geometric patterns with vibrant colors', | |
| logo: 'Modern minimalist logo design, vector art' | |
| }; | |
| document.getElementById('prompt').value = templates[template]; | |
| switchTab('create'); | |
| document.querySelector('.tab').classList.add('active'); | |
| showToast(`Template "${template}" selected`); | |
| } | |
| // Load from history | |
| function loadFromHistory(item) { | |
| const history = { | |
| item1: 'Sunset over mountains with dramatic clouds', | |
| item2: 'Futuristic cyberpunk city at night with neon lights' | |
| }; | |
| document.getElementById('prompt').value = history[item]; | |
| switchTab('create'); | |
| showToast('Loaded from history'); | |
| } | |
| // Toast notification | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| toast.textContent = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add smooth scrolling | |
| document.querySelector('.content-area').addEventListener('scroll', function() { | |
| if (this.scrollTop > 50) { | |
| document.querySelector('.fab').style.transform = 'scale(0.9)'; | |
| } else { | |
| document.querySelector('.fab').style.transform = 'scale(1)'; | |
| } | |
| }); | |
| // Add keyboard shortcuts | |
| document.addEventListener('keydown', function(e) { | |
| if (e.ctrlKey || e.metaKey) { | |
| if (e.key === 'Enter') { | |
| generateImage(); | |
| } else if (e.key === 'b') { | |
| buildAPK(); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |