jkorstad/gameforge
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>GameForge - AI Game Asset Pipeline</title>7 <link rel="stylesheet" href="/static/css/app.css">8 <link rel="preconnect" href="https://fonts.googleapis.com">9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">10</head>11<body>12 <div id="app">13 <!-- Sidebar -->14 <nav class="sidebar">15 <div class="logo">16 <span class="logo-icon">⚔️</span>17 <span class="logo-text">GameForge</span>18 </div>19 <ul class="nav">20 <li class="nav-item active" data-tab="dashboard">21 <span class="nav-icon">📊</span> Dashboard22 </li>23 <li class="nav-item" data-tab="generate">24 <span class="nav-icon">✨</span> Generate25 </li>26 <li class="nav-item" data-tab="pipelines">27 <span class="nav-icon">🔗</span> Pipelines28 </li>29 <li class="nav-item" data-tab="assets">30 <span class="nav-icon">📁</span> Assets31 </li>32 <li class="nav-item" data-tab="models">33 <span class="nav-icon">🧠</span> Models34 </li>35 <li class="nav-item" data-tab="batch">36 <span class="nav-icon">📦</span> Batch37 </li>38 </ul>39 <div class="sidebar-footer">40 <div class="gpu-status">41 <span class="status-dot"></span>42 <span>ZeroGPU Ready</span>43 </div>44 </div>45 </nav>46 47 <!-- Main Content -->48 <main class="main">49 <!-- Dashboard -->50 <section class="tab-content active" id="tab-dashboard">51 <h1>Dashboard</h1>52 <div class="stats-grid">53 <div class="stat-card">54 <div class="stat-value" id="stat-models">--</div>55 <div class="stat-label">Models Available</div>56 </div>57 <div class="stat-card">58 <div class="stat-value" id="stat-free">--</div>59 <div class="stat-label">Free (ZeroGPU)</div>60 </div>61 <div class="stat-card">62 <div class="stat-value" id="stat-pipelines">--</div>63 <div class="stat-label">Pipelines</div>64 </div>65 <div class="stat-card">66 <div class="stat-value" id="stat-assets">--</div>67 <div class="stat-label">Generated Assets</div>68 </div>69 </div>70 <h2>Quick Generate</h2>71 <div class="quick-gen-grid">72 <button class="quick-gen-card" data-pipeline="character" data-prompt="fantasy knight in silver armor">73 <span class="qg-icon">⚔️</span>74 <span class="qg-label">Character</span>75 </button>76 <button class="quick-gen-card" data-pipeline="prop" data-prompt="enchanted magic sword with glowing runes">77 <span class="qg-icon">🗡️</span>78 <span class="qg-label">Prop</span>79 </button>80 <button class="quick-gen-card" data-pipeline="environment" data-prompt="dark fantasy forest clearing at twilight">81 <span class="qg-icon">🌲</span>82 <span class="qg-label">Environment</span>83 </button>84 <button class="quick-gen-card" data-pipeline="npc_voice" data-prompt="Welcome, traveler. What brings you to our village?">85 <span class="qg-icon">🗣️</span>86 <span class="qg-label">NPC Voice</span>87 </button>88 <button class="quick-gen-card" data-pipeline="audio" data-prompt="epic orchestral battle theme">89 <span class="qg-icon">🎵</span>90 <span class="qg-label">Music</span>91 </button>92 <button class="quick-gen-card" data-pipeline="audio" data-prompt="sword slash whoosh with metallic ring">93 <span class="qg-icon">💥</span>94 <span class="qg-label">SFX</span>95 </button>96 </div>97 </section>98 99 <!-- Generate -->100 <section class="tab-content" id="tab-generate">101 <h1>Generate Asset</h1>102 <div class="generate-panel">103 <div class="gen-form">104 <div class="form-group">105 <label>Asset Type</label>106 <select id="gen-type">107 <option value="image">Image (FLUX)</option>108 <option value="3d">3D Model (TRELLIS.2)</option>109 <option value="voice">NPC Voice (MeloTTS)</option>110 <option value="music">Music (ACE-Step)</option>111 <option value="video">Video (LTX 2.3)</option>112 <option value="sfx">Sound Effect (TangoFlux)</option>113 </select>114 </div>115 <div class="form-group">116 <label>Prompt</label>117 <textarea id="gen-prompt" placeholder="Describe your asset..." rows="4"></textarea>118 </div>119 <div class="form-group" id="neg-prompt-group">120 <label>Negative Prompt (optional)</label>121 <input type="text" id="gen-negative" placeholder="blurry, low quality, watermark">122 </div>123 <div class="form-group" id="ref-image-group" style="display:none">124 <label>Reference Image (for 3D)</label>125 <input type="file" id="gen-ref-image" accept="image/*">126 </div>127 <button class="btn btn-primary btn-lg" id="gen-btn">128 <span class="btn-text">Generate</span>129 <span class="btn-loading" style="display:none">Generating...</span>130 </button>131 </div>132 <div class="gen-preview">133 <div class="preview-box" id="gen-preview-box">134 <div class="preview-placeholder">135 <span>✨</span>136 <p>Your generated asset will appear here</p>137 </div>138 </div>139 <div class="gen-result-info" id="gen-result-info" style="display:none">140 <div id="gen-result-meta"></div>141 <button class="btn btn-secondary" id="gen-download">Download</button>142 </div>143 </div>144 </div>145 </section>146 147 <!-- Pipelines -->148 <section class="tab-content" id="tab-pipelines">149 <h1>Pipelines</h1>150 <div class="pipeline-grid" id="pipeline-grid">151 <!-- Loaded dynamically -->152 </div>153 </section>154 155 <!-- Assets -->156 <section class="tab-content" id="tab-assets">157 <h1>Generated Assets</h1>158 <div class="assets-toolbar">159 <select id="asset-filter">160 <option value="">All Types</option>161 </select>162 <button class="btn btn-secondary" id="asset-refresh">Refresh</button>163 </div>164 <div class="assets-grid" id="assets-grid">165 <!-- Loaded dynamically -->166 </div>167 </section>168 169 <!-- Models -->170 <section class="tab-content" id="tab-models">171 <h1>Model Registry</h1>172 <div class="models-filters">173 <select id="model-filter-type">174 <option value="">All Asset Types</option>175 </select>176 <label><input type="checkbox" id="model-filter-free"> Free Only</label>177 <label><input type="checkbox" id="model-filter-safe"> Commercial Safe</label>178 </div>179 <table class="models-table" id="models-table">180 <thead>181 <tr>182 <th>Asset Type</th>183 <th>Variant</th>184 <th>Model</th>185 <th>Type</th>186 <th>License</th>187 <th>Hardware</th>188 <th>Free</th>189 <th>Safe</th>190 </tr>191 </thead>192 <tbody id="models-tbody"></tbody>193 </table>194 </section>195 196 <!-- Batch -->197 <section class="tab-content" id="tab-batch">198 <h1>Batch Generator</h1>199 <div class="batch-form">200 <div class="form-group">201 <label>Pipeline</label>202 <select id="batch-pipeline"></select>203 </div>204 <div class="form-group">205 <label>Base Prompt</label>206 <textarea id="batch-prompt" placeholder="enchanted sword with glowing runes" rows="2"></textarea>207 </div>208 <div class="form-group">209 <label>Variants: <span id="batch-count-val">3</span></label>210 <input type="range" id="batch-count" min="1" max="10" value="3">211 </div>212 <button class="btn btn-primary" id="batch-btn">Generate Variants</button>213 </div>214 <div class="batch-results" id="batch-results"></div>215 </section>216 </main>217 218 <!-- Toast notifications -->219 <div id="toast-container"></div>220 </div>221 222 <script type="module" src="/static/js/app.js"></script>223</body>224</html>225