| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GameForge - AI Game Asset Pipeline</title> |
| <link rel="stylesheet" href="/static/css/app.css"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| </head> |
| <body> |
| <div id="app"> |
| |
| <nav class="sidebar"> |
| <div class="logo"> |
| <span class="logo-icon">⚔️</span> |
| <span class="logo-text">GameForge</span> |
| </div> |
| <ul class="nav"> |
| <li class="nav-item active" data-tab="dashboard"> |
| <span class="nav-icon">📊</span> Dashboard |
| </li> |
| <li class="nav-item" data-tab="generate"> |
| <span class="nav-icon">✨</span> Generate |
| </li> |
| <li class="nav-item" data-tab="pipelines"> |
| <span class="nav-icon">🔗</span> Pipelines |
| </li> |
| <li class="nav-item" data-tab="assets"> |
| <span class="nav-icon">📁</span> Assets |
| </li> |
| <li class="nav-item" data-tab="models"> |
| <span class="nav-icon">🧠</span> Models |
| </li> |
| <li class="nav-item" data-tab="batch"> |
| <span class="nav-icon">📦</span> Batch |
| </li> |
| </ul> |
| <div class="sidebar-footer"> |
| <div class="gpu-status"> |
| <span class="status-dot"></span> |
| <span>ZeroGPU Ready</span> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="main"> |
| |
| <section class="tab-content active" id="tab-dashboard"> |
| <h1>Dashboard</h1> |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-value" id="stat-models">--</div> |
| <div class="stat-label">Models Available</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value" id="stat-free">--</div> |
| <div class="stat-label">Free (ZeroGPU)</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value" id="stat-pipelines">--</div> |
| <div class="stat-label">Pipelines</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value" id="stat-assets">--</div> |
| <div class="stat-label">Generated Assets</div> |
| </div> |
| </div> |
| <h2>Quick Generate</h2> |
| <div class="quick-gen-grid"> |
| <button class="quick-gen-card" data-pipeline="character" data-prompt="fantasy knight in silver armor"> |
| <span class="qg-icon">⚔️</span> |
| <span class="qg-label">Character</span> |
| </button> |
| <button class="quick-gen-card" data-pipeline="prop" data-prompt="enchanted magic sword with glowing runes"> |
| <span class="qg-icon">🗡️</span> |
| <span class="qg-label">Prop</span> |
| </button> |
| <button class="quick-gen-card" data-pipeline="environment" data-prompt="dark fantasy forest clearing at twilight"> |
| <span class="qg-icon">🌲</span> |
| <span class="qg-label">Environment</span> |
| </button> |
| <button class="quick-gen-card" data-pipeline="npc_voice" data-prompt="Welcome, traveler. What brings you to our village?"> |
| <span class="qg-icon">🗣️</span> |
| <span class="qg-label">NPC Voice</span> |
| </button> |
| <button class="quick-gen-card" data-pipeline="audio" data-prompt="epic orchestral battle theme"> |
| <span class="qg-icon">🎵</span> |
| <span class="qg-label">Music</span> |
| </button> |
| <button class="quick-gen-card" data-pipeline="audio" data-prompt="sword slash whoosh with metallic ring"> |
| <span class="qg-icon">💥</span> |
| <span class="qg-label">SFX</span> |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section class="tab-content" id="tab-generate"> |
| <h1>Generate Asset</h1> |
| <div class="generate-panel"> |
| <div class="gen-form"> |
| <div class="form-group"> |
| <label>Asset Type</label> |
| <select id="gen-type"> |
| <option value="image">Image (FLUX)</option> |
| <option value="3d">3D Model (TRELLIS.2)</option> |
| <option value="voice">NPC Voice (MeloTTS)</option> |
| <option value="music">Music (ACE-Step)</option> |
| <option value="video">Video (LTX 2.3)</option> |
| <option value="sfx">Sound Effect (TangoFlux)</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Prompt</label> |
| <textarea id="gen-prompt" placeholder="Describe your asset..." rows="4"></textarea> |
| </div> |
| <div class="form-group" id="neg-prompt-group"> |
| <label>Negative Prompt (optional)</label> |
| <input type="text" id="gen-negative" placeholder="blurry, low quality, watermark"> |
| </div> |
| <div class="form-group" id="ref-image-group" style="display:none"> |
| <label>Reference Image (for 3D)</label> |
| <input type="file" id="gen-ref-image" accept="image/*"> |
| </div> |
| <button class="btn btn-primary btn-lg" id="gen-btn"> |
| <span class="btn-text">Generate</span> |
| <span class="btn-loading" style="display:none">Generating...</span> |
| </button> |
| </div> |
| <div class="gen-preview"> |
| <div class="preview-box" id="gen-preview-box"> |
| <div class="preview-placeholder"> |
| <span>✨</span> |
| <p>Your generated asset will appear here</p> |
| </div> |
| </div> |
| <div class="gen-result-info" id="gen-result-info" style="display:none"> |
| <div id="gen-result-meta"></div> |
| <button class="btn btn-secondary" id="gen-download">Download</button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="tab-content" id="tab-pipelines"> |
| <h1>Pipelines</h1> |
| <div class="pipeline-grid" id="pipeline-grid"> |
| |
| </div> |
| </section> |
|
|
| |
| <section class="tab-content" id="tab-assets"> |
| <h1>Generated Assets</h1> |
| <div class="assets-toolbar"> |
| <select id="asset-filter"> |
| <option value="">All Types</option> |
| </select> |
| <button class="btn btn-secondary" id="asset-refresh">Refresh</button> |
| </div> |
| <div class="assets-grid" id="assets-grid"> |
| |
| </div> |
| </section> |
|
|
| |
| <section class="tab-content" id="tab-models"> |
| <h1>Model Registry</h1> |
| <div class="models-filters"> |
| <select id="model-filter-type"> |
| <option value="">All Asset Types</option> |
| </select> |
| <label><input type="checkbox" id="model-filter-free"> Free Only</label> |
| <label><input type="checkbox" id="model-filter-safe"> Commercial Safe</label> |
| </div> |
| <table class="models-table" id="models-table"> |
| <thead> |
| <tr> |
| <th>Asset Type</th> |
| <th>Variant</th> |
| <th>Model</th> |
| <th>Type</th> |
| <th>License</th> |
| <th>Hardware</th> |
| <th>Free</th> |
| <th>Safe</th> |
| </tr> |
| </thead> |
| <tbody id="models-tbody"></tbody> |
| </table> |
| </section> |
|
|
| |
| <section class="tab-content" id="tab-batch"> |
| <h1>Batch Generator</h1> |
| <div class="batch-form"> |
| <div class="form-group"> |
| <label>Pipeline</label> |
| <select id="batch-pipeline"></select> |
| </div> |
| <div class="form-group"> |
| <label>Base Prompt</label> |
| <textarea id="batch-prompt" placeholder="enchanted sword with glowing runes" rows="2"></textarea> |
| </div> |
| <div class="form-group"> |
| <label>Variants: <span id="batch-count-val">3</span></label> |
| <input type="range" id="batch-count" min="1" max="10" value="3"> |
| </div> |
| <button class="btn btn-primary" id="batch-btn">Generate Variants</button> |
| </div> |
| <div class="batch-results" id="batch-results"></div> |
| </section> |
| </main> |
|
|
| |
| <div id="toast-container"></div> |
| </div> |
|
|
| <script type="module" src="/static/js/app.js"></script> |
| </body> |
| </html> |
|
|
