Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-Modal Knowledge Distillation</title> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1><i class="fas fa-brain"></i> Multi-Modal Knowledge Distillation</h1> | |
| <p>Create new AI models through knowledge distillation from multiple pre-trained models</p> | |
| </div> | |
| </header> | |
| <!-- Advanced Features Navigation --> | |
| <nav class="advanced-nav"> | |
| <div class="nav-container"> | |
| <h3><i class="fas fa-cogs"></i> Advanced Features</h3> | |
| <div class="nav-links"> | |
| <a href="/tokens" class="nav-link"> | |
| <i class="fas fa-key"></i> | |
| <span>Token Management</span> | |
| <small>Manage HF tokens</small> | |
| </a> | |
| <a href="/medical-datasets" class="nav-link"> | |
| <i class="fas fa-database"></i> | |
| <span>Medical Datasets</span> | |
| <small>Specialized medical data</small> | |
| </a> | |
| <a href="#google-models" class="nav-link" onclick="showGoogleModels()"> | |
| <i class="fab fa-google"></i> | |
| <span>Google Models</span> | |
| <small>Open source models</small> | |
| </a> | |
| <a href="#system-info" class="nav-link" onclick="showSystemInfo()"> | |
| <i class="fas fa-microchip"></i> | |
| <span>System Info</span> | |
| <small>Performance metrics</small> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Step 1: Model Selection --> | |
| <section class="step-section" id="step-1"> | |
| <div class="step-header"> | |
| <h2><span class="step-number">1</span> Select Teacher Models</h2> | |
| <p>Choose 1-10 pre-trained models to serve as teachers for knowledge distillation</p> | |
| </div> | |
| <div class="model-selection"> | |
| <!-- Model Management Tabs --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <ul class="nav nav-tabs card-header-tabs" id="model-tabs" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" id="configured-models-tab" data-bs-toggle="tab" data-bs-target="#configured-models-panel" type="button" role="tab"> | |
| <i class="fas fa-list"></i> النماذج المُعدة | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="search-models-tab" data-bs-toggle="tab" data-bs-target="#search-models-panel" type="button" role="tab"> | |
| <i class="fas fa-search"></i> البحث عن نماذج | |
| </button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="upload-models-tab" data-bs-toggle="tab" data-bs-target="#upload-models-panel" type="button" role="tab"> | |
| <i class="fas fa-upload"></i> رفع نماذج محلية | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="card-body"> | |
| <div class="tab-content" id="model-tab-content"> | |
| <!-- Configured Models Panel --> | |
| <div class="tab-pane fade show active" id="configured-models-panel" role="tabpanel"> | |
| <div class="configured-models-section"> | |
| <div class="d-flex justify-content-between align-items-center mb-3"> | |
| <h6><i class="fas fa-robot"></i> النماذج المعلمة المتاحة</h6> | |
| <button class="btn btn-sm btn-outline-primary" id="refresh-models"> | |
| <i class="fas fa-sync"></i> تحديث | |
| </button> | |
| </div> | |
| <div id="configured-models-list" class="models-list"> | |
| <div class="text-center"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">جاري تحميل النماذج...</span> | |
| </div> | |
| <p class="mt-2 text-muted">جاري تحميل النماذج المتاحة...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Models Panel --> | |
| <div class="tab-pane fade" id="search-models-panel" role="tabpanel"> | |
| <div class="search-models-section"> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" id="model-search-query" placeholder="ابحث عن النماذج..."> | |
| <button class="btn btn-primary" type="button" id="search-models-btn"> | |
| <i class="fas fa-search"></i> بحث | |
| </button> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <select class="form-select" id="model-type-filter"> | |
| <option value="">جميع الأنواع</option> | |
| <option value="text">نصوص</option> | |
| <option value="vision">رؤية</option> | |
| <option value="audio">صوت</option> | |
| </select> | |
| </div> | |
| <div class="col-md-3"> | |
| <button class="btn btn-outline-secondary w-100" id="add-custom-model"> | |
| <i class="fas fa-plus"></i> إضافة نموذج مخصص | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Results --> | |
| <div id="model-search-results" class="search-results" style="display: none;"> | |
| <h6><i class="fas fa-list"></i> نتائج البحث</h6> | |
| <div id="model-search-results-list" class="results-list"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Models Panel --> | |
| <div class="tab-pane fade" id="upload-models-panel" role="tabpanel"> | |
| <div class="upload-section"> | |
| <h6><i class="fas fa-upload"></i> رفع نماذج محلية</h6> | |
| <div class="upload-area" id="upload-area"> | |
| <div class="upload-content"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>اسحب وأفلت ملفات النماذج هنا أو انقر للتصفح</p> | |
| <p class="upload-hint">الصيغ المدعومة: .pt, .pth, .bin, .safetensors (حد أقصى 5GB لكل ملف)</p> | |
| </div> | |
| <input type="file" id="file-input" multiple accept=".pt,.pth,.bin,.safetensors" hidden> | |
| </div> | |
| <div class="uploaded-files" id="uploaded-files"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hugging Face Models --> | |
| <div class="hf-section"> | |
| <h3><i class="fab fa-github"></i> Hugging Face Models</h3> | |
| <!-- Token Selection for Model Access --> | |
| <div class="token-selection mb-3"> | |
| <label for="model-access-type" class="form-label"> | |
| <i class="fas fa-key me-1"></i>نوع الوصول للنموذج | |
| </label> | |
| <select id="model-access-type" class="form-select"> | |
| <option value="read">نماذج عامة (رمز القراءة)</option> | |
| <option value="private">نماذج خاصة (رمز مخصص)</option> | |
| <option value="medical">نماذج طبية (رمز مخصص)</option> | |
| <option value="commercial">نماذج تجارية (رمز مخصص)</option> | |
| </select> | |
| <div class="help-text"> | |
| <small class="text-muted">سيتم استخدام الرمز المناسب تلقائياً حسب نوع النموذج</small> | |
| </div> | |
| </div> | |
| <div class="hf-input-group"> | |
| <input type="text" id="hf-repo" placeholder="Enter Hugging Face model repository (e.g., google/bert_uncased_L-2_H-128_A-2)" class="hf-input"> | |
| <button id="test-model" class="btn btn-secondary"> | |
| <i class="fas fa-vial"></i> Test | |
| </button> | |
| <button id="add-hf-model" class="btn btn-secondary"> | |
| <i class="fas fa-plus"></i> Add Model | |
| </button> | |
| </div> | |
| <div class="hf-token-section"> | |
| <label for="hf-token"> | |
| <i class="fas fa-key"></i> Hugging Face Token (for private/gated models): | |
| </label> | |
| <div class="token-input-group"> | |
| <input type="password" id="hf-token" placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" class="hf-input"> | |
| <button id="test-token" class="btn btn-secondary"> | |
| <i class="fas fa-check"></i> Test Token | |
| </button> | |
| </div> | |
| <small class="token-help"> | |
| Optional: Required only for private or gated models. | |
| <a href="https://huggingface.co/settings/tokens" target="_blank">Get your token here</a> | |
| </small> | |
| <div id="token-status" class="token-status hidden"></div> | |
| </div> | |
| <div class="trust-code-section"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="trust-remote-code"> | |
| <span class="checkmark"></span> | |
| <i class="fas fa-shield-alt"></i> Trust Remote Code | |
| </label> | |
| <small class="trust-help"> | |
| ⚠️ Enable this for models that require custom code execution (e.g., briaai/RMBG-1.4). | |
| <strong>Only enable if you trust the model source!</strong> | |
| </small> | |
| </div> | |
| <!-- Incremental Training Section --> | |
| <div class="incremental-training-section"> | |
| <h4><i class="fas fa-layer-group"></i> Incremental Training (Optional)</h4> | |
| <p class="section-description"> | |
| Use a previously trained model as a starting point and add new teachers to it. | |
| </p> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="enable-incremental"> | |
| <span class="checkmark"></span> | |
| <i class="fas fa-plus-circle"></i> Enable Incremental Training | |
| </label> | |
| <div id="incremental-options" class="incremental-options hidden"> | |
| <div class="form-group"> | |
| <label for="student-source">Student Model Source:</label> | |
| <div class="radio-group"> | |
| <label class="radio-label"> | |
| <input type="radio" name="student-source" value="local" checked> | |
| <span class="radio-mark"></span> | |
| Local Trained Models | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="student-source" value="huggingface"> | |
| <span class="radio-mark"></span> | |
| Hugging Face Model | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="student-source" value="space"> | |
| <span class="radio-mark"></span> | |
| Hugging Face Space | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="student-source" value="upload"> | |
| <span class="radio-mark"></span> | |
| Upload Model Files | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Local Models --> | |
| <div id="local-student-options" class="student-source-options"> | |
| <div class="form-group"> | |
| <label for="existing-student">Select Local Student Model:</label> | |
| <select id="existing-student" class="form-control"> | |
| <option value="">Loading trained models...</option> | |
| </select> | |
| <button id="refresh-students" class="btn btn-secondary btn-sm"> | |
| <i class="fas fa-refresh"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hugging Face Models --> | |
| <div id="hf-student-options" class="student-source-options hidden"> | |
| <div class="form-group"> | |
| <label for="hf-student-repo">Hugging Face Student Model:</label> | |
| <div class="hf-input-group"> | |
| <input type="text" id="hf-student-repo" placeholder="username/student-model-name" class="hf-input"> | |
| <button id="test-student-model" class="btn btn-secondary"> | |
| <i class="fas fa-vial"></i> Test | |
| </button> | |
| <button id="add-hf-student" class="btn btn-secondary"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| <small>Enter a Hugging Face repository containing a trained student model</small> | |
| </div> | |
| </div> | |
| <!-- Hugging Face Spaces --> | |
| <div id="space-student-options" class="student-source-options hidden"> | |
| <div class="form-group"> | |
| <label for="hf-space-repo">Hugging Face Space:</label> | |
| <div class="hf-input-group"> | |
| <input type="text" id="hf-space-repo" placeholder="username/space-name (e.g., fokan/train-modle2)" class="hf-input"> | |
| <button id="test-space-model" class="btn btn-secondary"> | |
| <i class="fas fa-vial"></i> Test | |
| </button> | |
| <button id="add-space-student" class="btn btn-secondary"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| <small>Enter a Hugging Face Space that contains trained models (like fokan/train-modle2)</small> | |
| <div class="alert alert-info" style="margin-top: 0.5rem; font-size: 0.85rem;"> | |
| <i class="fas fa-info-circle"></i> | |
| <strong>Note:</strong> This will load models from another training Space. Make sure the Space has completed training and saved models. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Models --> | |
| <div id="upload-student-options" class="student-source-options hidden"> | |
| <div class="form-group"> | |
| <label for="student-file-upload">Upload Student Model Files:</label> | |
| <input type="file" id="student-file-upload" multiple accept=".safetensors,.bin,.pt,.json"> | |
| <small>Upload model files (.safetensors, .bin, .pt) and config.json</small> | |
| </div> | |
| </div> | |
| <div id="student-info" class="student-info hidden"> | |
| <h5>Model Information:</h5> | |
| <div class="info-grid"> | |
| <div class="info-item"> | |
| <strong>Architecture:</strong> <span id="student-arch">-</span> | |
| </div> | |
| <div class="info-item"> | |
| <strong>Original Teachers:</strong> <span id="student-teachers">-</span> | |
| </div> | |
| <div class="info-item"> | |
| <strong>Training Sessions:</strong> <span id="student-sessions">-</span> | |
| </div> | |
| <div class="info-item"> | |
| <strong>Last Training:</strong> <span id="student-last">-</span> | |
| </div> | |
| </div> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle"></i> | |
| <strong>Note:</strong> New teachers will be added to the existing teachers. | |
| The model will learn from both old and new teachers. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="suggested-models"> | |
| <h4>Suggested Models:</h4> | |
| <div class="model-suggestions"> | |
| <button class="suggestion-btn" data-model="google/bert_uncased_L-2_H-128_A-2">BERT Small</button> | |
| <button class="suggestion-btn" data-model="distilbert-base-uncased">DistilBERT</button> | |
| <button class="suggestion-btn" data-model="microsoft/DialoGPT-small">DialoGPT Small</button> | |
| <button class="suggestion-btn" data-model="google/vit-base-patch16-224">ViT Base</button> | |
| <button class="suggestion-btn" data-model="openai/clip-vit-base-patch32">CLIP</button> | |
| <button class="suggestion-btn trust-required" data-model="briaai/RMBG-1.4" title="Requires Trust Remote Code">RMBG-1.4 ⚠️</button> | |
| <button class="suggestion-btn trust-required" data-model="google/siglip-base-patch16-224" title="Advanced Vision Model">SigLIP ⚠️</button> | |
| <button class="suggestion-btn trust-required gated-model" data-model="google/gemma-2b" title="Requires HF Token + Access">Gemma 2B 🔒</button> | |
| </div> | |
| <small class="suggestions-help"> | |
| ⚠️ Models with warning icon may require "Trust Remote Code" or special requirements.<br> | |
| 🔒 Gated models require Hugging Face token and access permission. | |
| </small> | |
| </div> | |
| <div class="hf-models" id="hf-models"></div> | |
| </div> | |
| <!-- URL Models --> | |
| <div class="url-section"> | |
| <h3><i class="fas fa-link"></i> Direct URLs</h3> | |
| <div class="url-input-group"> | |
| <input type="text" id="model-url" placeholder="Enter direct download URL for model file" class="url-input"> | |
| <button id="add-url-model" class="btn btn-secondary"> | |
| <i class="fas fa-plus"></i> Add URL | |
| </button> | |
| </div> | |
| <div class="url-models" id="url-models"></div> | |
| </div> | |
| </div> | |
| <!-- Selected Models Summary --> | |
| <div class="selected-models" id="selected-models"> | |
| <h3>Selected Teacher Models (<span id="model-count">0</span>/10)</h3> | |
| <div class="models-grid" id="models-grid"></div> | |
| </div> | |
| <div class="step-actions"> | |
| <button id="next-step-1" class="btn btn-primary" disabled> | |
| Next: Configure Training <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Step 2: Training Configuration --> | |
| <section class="step-section hidden" id="step-2"> | |
| <div class="step-header"> | |
| <h2><span class="step-number">2</span> Configure Training</h2> | |
| <p>Set up training parameters for knowledge distillation</p> | |
| </div> | |
| <div class="config-grid"> | |
| <!-- Student Model Configuration --> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-cog"></i> Student Model</h3> | |
| <div class="form-group"> | |
| <label for="hidden-size">Hidden Size</label> | |
| <select id="hidden-size" class="form-control"> | |
| <option value="256">256 (Small)</option> | |
| <option value="512">512 (Medium)</option> | |
| <option value="768" selected>768 (Large)</option> | |
| <option value="1024">1024 (Extra Large)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="num-layers">Number of Layers</label> | |
| <select id="num-layers" class="form-control"> | |
| <option value="3">3 (Fast)</option> | |
| <option value="6" selected>6 (Balanced)</option> | |
| <option value="12">12 (Deep)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Training Parameters --> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-chart-line"></i> Training Parameters</h3> | |
| <div class="form-group"> | |
| <label for="max-steps">Training Steps</label> | |
| <select id="max-steps" class="form-control"> | |
| <option value="500">500 (Quick)</option> | |
| <option value="1000" selected>1000 (Standard)</option> | |
| <option value="2000">2000 (Thorough)</option> | |
| <option value="5000">5000 (Extensive)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="learning-rate">Learning Rate</label> | |
| <select id="learning-rate" class="form-control"> | |
| <option value="1e-5">1e-5 (Conservative)</option> | |
| <option value="1e-4" selected>1e-4 (Standard)</option> | |
| <option value="1e-3">1e-3 (Aggressive)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="temperature">Temperature</label> | |
| <select id="temperature" class="form-control"> | |
| <option value="2">2 (Sharp)</option> | |
| <option value="4" selected>4 (Balanced)</option> | |
| <option value="8">8 (Smooth)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Distillation Strategy --> | |
| <div class="config-section"> | |
| <h3><i class="fas fa-network-wired"></i> Distillation Strategy</h3> | |
| <div class="form-group"> | |
| <label for="strategy">Strategy</label> | |
| <select id="strategy" class="form-control"> | |
| <option value="ensemble" selected>Ensemble (Average teachers)</option> | |
| <option value="weighted">Weighted (Smart weighting)</option> | |
| <option value="sequential">Sequential (One by one)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="alpha">Distillation Weight (α)</label> | |
| <select id="alpha" class="form-control"> | |
| <option value="0.5">0.5 (Balanced)</option> | |
| <option value="0.7" selected>0.7 (Favor distillation)</option> | |
| <option value="0.9">0.9 (Strong distillation)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button id="back-step-2" class="btn btn-secondary"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <button id="start-training" class="btn btn-primary"> | |
| <i class="fas fa-play"></i> Start Training | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Step 3: Training Progress --> | |
| <section class="step-section hidden" id="step-3"> | |
| <div class="step-header"> | |
| <h2><span class="step-number">3</span> Training Progress</h2> | |
| <p>Monitor the knowledge distillation training process</p> | |
| </div> | |
| <div class="progress-container"> | |
| <!-- Overall Progress --> | |
| <div class="progress-section"> | |
| <h3><i class="fas fa-tasks"></i> Overall Progress</h3> | |
| <div class="progress-bar-container"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="overall-progress"></div> | |
| </div> | |
| <span class="progress-text" id="progress-percentage">0%</span> | |
| </div> | |
| <div class="progress-info"> | |
| <div class="info-item"> | |
| <span class="info-label">Status:</span> | |
| <span class="info-value" id="training-status">Initializing...</span> | |
| </div> | |
| <div class="info-item"> | |
| <span class="info-label">Step:</span> | |
| <span class="info-value" id="current-step">0 / 1000</span> | |
| </div> | |
| <div class="info-item"> | |
| <span class="info-label">ETA:</span> | |
| <span class="info-value" id="eta">Calculating...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Training Metrics --> | |
| <div class="metrics-section"> | |
| <h3><i class="fas fa-chart-area"></i> Training Metrics</h3> | |
| <div class="metrics-grid"> | |
| <div class="metric-card"> | |
| <div class="metric-label">Loss</div> | |
| <div class="metric-value" id="current-loss">-</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-label">Learning Rate</div> | |
| <div class="metric-value" id="learning-rate-display">-</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-label">Temperature</div> | |
| <div class="metric-value" id="temperature-display">-</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Console --> | |
| <div class="console-section"> | |
| <h3><i class="fas fa-terminal"></i> Live Console</h3> | |
| <div class="console" id="training-console"> | |
| <div class="console-line">Initializing training session...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button id="back-step-3" class="btn btn-secondary"> | |
| <i class="fas fa-arrow-left"></i> Back to Configuration | |
| </button> | |
| <button id="cancel-training" class="btn btn-danger"> | |
| <i class="fas fa-stop"></i> Cancel Training | |
| </button> | |
| <button id="download-model" class="btn btn-success hidden"> | |
| <i class="fas fa-download"></i> Download Trained Model | |
| </button> | |
| <button id="upload-to-hf" class="btn btn-info hidden"> | |
| <i class="fab fa-github"></i> Upload to Hugging Face | |
| </button> | |
| <button id="start-new-training" class="btn btn-primary hidden"> | |
| <i class="fas fa-plus"></i> Start New Training | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <p>© 2024 Multi-Modal Knowledge Distillation. Built with FastAPI and PyTorch.</p> | |
| </footer> | |
| </div> | |
| <!-- Modals --> | |
| <!-- Upload to HF Modal --> | |
| <div id="hf-upload-modal" class="modal hidden"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3><i class="fab fa-github"></i> Upload to Hugging Face</h3> | |
| <button class="modal-close">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="hf-upload-form"> | |
| <div class="form-group"> | |
| <label for="hf-repo-name">Repository Name *</label> | |
| <input type="text" id="hf-repo-name" placeholder="username/model-name" required onblur="app.validateRepoName()"> | |
| <small>Format: your-username/your-model-name (will be auto-suggested based on your token)</small> | |
| <div id="repo-validation-status" class="validation-status hidden"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="hf-description">Model Description</label> | |
| <textarea id="hf-description" placeholder="Describe your model..." rows="3"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="hf-upload-token">Hugging Face Token *</label> | |
| <input type="password" id="hf-upload-token" placeholder="hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" required onblur="app.validateTokenAndSuggestName(this.value)"> | |
| <small>Your HF token with <strong>write permissions</strong>. <a href="https://huggingface.co/settings/tokens" target="_blank">Get token here</a></small> | |
| <div class="alert alert-warning" style="margin-top: 0.5rem; font-size: 0.85rem;"> | |
| <strong>⚠️ Important:</strong> Make sure your token has "Write" permissions and you're using your correct username in the repository name. | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="hf-private"> | |
| <span class="checkmark"></span> | |
| Make repository private | |
| </label> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="cancel-hf-upload" class="btn btn-secondary">Cancel</button> | |
| <button id="confirm-hf-upload" class="btn btn-primary"> | |
| <i class="fas fa-upload"></i> Upload to Hugging Face | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal hidden" id="confirm-modal"> | |
| <div class="modal-content"> | |
| <h3>Confirm Training</h3> | |
| <p>Are you sure you want to start training with the selected configuration?</p> | |
| <div class="modal-actions"> | |
| <button id="confirm-cancel" class="btn btn-secondary">Cancel</button> | |
| <button id="confirm-start" class="btn btn-primary">Start Training</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal hidden" id="error-modal"> | |
| <div class="modal-content"> | |
| <h3><i class="fas fa-exclamation-triangle"></i> Error</h3> | |
| <p id="error-message">An error occurred.</p> | |
| <div class="modal-actions"> | |
| <button id="error-ok" class="btn btn-primary">OK</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/js/main.js"></script> | |
| </body> | |
| </html> | |