Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HF Uploader Dashboard</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1 class="logo">HF Uploader</h1> | |
| <nav class="nav"> | |
| <a href="#dashboard" class="nav-link active" data-section="dashboard">Dashboard</a> | |
| <a href="#queue" class="nav-link" data-section="queue">Queue</a> | |
| <a href="#config" class="nav-link" data-section="config">Configuration</a> | |
| <a href="#logs" class="nav-link" data-section="logs">Logs</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="section active"> | |
| <div class="section-header"> | |
| <h2>Dashboard</h2> | |
| <div class="divider-line"></div> | |
| </div> | |
| <!-- Statistics Grid --> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="stat-processed">0</div> | |
| <div class="stat-label">Files Processed</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="stat-pending">0</div> | |
| <div class="stat-label">Pending Upload</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="stat-uploaded">0</div> | |
| <div class="stat-label">Uploaded</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="stat-failed">0</div> | |
| <div class="stat-label">Failed</div> | |
| </div> | |
| </div> | |
| <!-- Processing Status --> | |
| <div class="card"> | |
| <h3>Processing Status</h3> | |
| <div class="status-content"> | |
| <div class="status-row"> | |
| <span class="status-label">Status:</span> | |
| <span class="status-value" id="processing-status">Idle</span> | |
| </div> | |
| <div class="status-row"> | |
| <span class="status-label">Progress:</span> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="processing-progress" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="status-row"> | |
| <span class="status-label">Matched Pairs:</span> | |
| <span class="status-value" id="matched-pairs">0</span> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" id="btn-start-processing">Start Processing</button> | |
| </div> | |
| <!-- Upload Status --> | |
| <div class="card"> | |
| <h3>Upload Status</h3> | |
| <div class="status-content"> | |
| <div class="status-row"> | |
| <span class="status-label">Rate Limit:</span> | |
| <span class="status-value" id="rate-limit-status">Ready</span> | |
| </div> | |
| <div class="status-row"> | |
| <span class="status-label">Remaining Uploads:</span> | |
| <span class="status-value" id="remaining-uploads">128</span> | |
| </div> | |
| <div class="status-row"> | |
| <span class="status-label">Current Upload:</span> | |
| <span class="status-value" id="current-upload">None</span> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" id="btn-start-upload">Start Upload</button> | |
| </div> | |
| </section> | |
| <!-- Queue Section --> | |
| <section id="queue" class="section"> | |
| <div class="section-header"> | |
| <h2>Upload Queue</h2> | |
| <div class="divider-line"></div> | |
| </div> | |
| <div class="queue-controls"> | |
| <button class="btn btn-secondary" id="btn-add-to-queue">Add Processed Files</button> | |
| <button class="btn btn-secondary" id="btn-clear-queue">Clear Queue</button> | |
| <select id="queue-filter" class="filter-select"> | |
| <option value="">All Files</option> | |
| <option value="pending">Pending</option> | |
| <option value="uploading">Uploading</option> | |
| <option value="completed">Completed</option> | |
| <option value="failed">Failed</option> | |
| </select> | |
| </div> | |
| <div class="queue-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>File Name</th> | |
| <th>Size</th> | |
| <th>Status</th> | |
| <th>Retries</th> | |
| <th>Action</th> | |
| </tr> | |
| </thead> | |
| <tbody id="queue-tbody"> | |
| <tr class="empty-row"> | |
| <td colspan="5">No files in queue</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Configuration Section --> | |
| <section id="config" class="section"> | |
| <div class="section-header"> | |
| <h2>Configuration</h2> | |
| <div class="divider-line"></div> | |
| </div> | |
| <div class="config-form"> | |
| <div class="form-group"> | |
| <label for="hf-token">Hugging Face Token</label> | |
| <input type="password" id="hf-token" placeholder="hf_..." class="form-input"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="source-all-repo">Source ALL Repository</label> | |
| <input type="text" id="source-all-repo" placeholder="samfred2/ALL" class="form-input"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="source-ato-repo">Source ATO Repository</label> | |
| <input type="text" id="source-ato-repo" placeholder="samfred2/ATO" class="form-input"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="target-repo">Target Repository</label> | |
| <input type="text" id="target-repo" placeholder="samfred2/ALL2" class="form-input"> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="batch-size">Upload Batch Size</label> | |
| <input type="number" id="batch-size" value="10" min="1" max="50" class="form-input"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="max-uploads">Max Uploads/Hour</label> | |
| <input type="number" id="max-uploads" value="128" min="1" max="1000" class="form-input"> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" id="btn-save-config">Save Configuration</button> | |
| </div> | |
| </section> | |
| <!-- Logs Section --> | |
| <section id="logs" class="section"> | |
| <div class="section-header"> | |
| <h2>Error Logs</h2> | |
| <div class="divider-line"></div> | |
| </div> | |
| <div class="logs-controls"> | |
| <button class="btn btn-secondary" id="btn-clear-logs">Clear Logs</button> | |
| </div> | |
| <div class="logs-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>File Name</th> | |
| <th>Error Code</th> | |
| <th>Message</th> | |
| <th>Retryable</th> | |
| <th>Time</th> | |
| </tr> | |
| </thead> | |
| <tbody id="logs-tbody"> | |
| <tr class="empty-row"> | |
| <td colspan="5">No errors logged</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Notification Toast --> | |
| <div id="toast" class="toast"></div> | |
| <!-- Modal for File Preview --> | |
| <div id="preview-modal" class="modal"> | |
| <div class="modal-content"> | |
| <button class="modal-close">×</button> | |
| <h2>File Preview</h2> | |
| <div id="preview-content" class="preview-content"></div> | |
| </div> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |