Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Model Trainer - Train & Store Your Models</title> | |
| <meta name="description" content="Train your own AI models with custom datasets and automatically store them in your account"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="navbar"> | |
| <div class="nav-container"> | |
| <div class="nav-brand"> | |
| <i class="fas fa-brain"></i> | |
| <span>AI Model Trainer</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#" class="nav-link" data-page="dashboard">Dashboard</a> | |
| <a href="#" class="nav-link" data-page="train">Train Model</a> | |
| <a href="#" class="nav-link" data-page="models">My Models</a> | |
| <div class="user-menu"> | |
| <button class="user-btn" id="userBtn"> | |
| <i class="fas fa-user-circle"></i> | |
| <span id="username">Guest</span> | |
| </button> | |
| <div class="user-dropdown" id="userDropdown"> | |
| <a href="#" class="dropdown-item" data-page="profile">Profile</a> | |
| <a href="#" class="dropdown-item" data-page="settings">Settings</a> | |
| <hr> | |
| <a href="#" class="dropdown-item" id="logoutBtn">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Login Modal --> | |
| <div class="modal" id="loginModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Login to Your Account</h2> | |
| <button class="close-btn" id="closeLoginModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="loginForm"> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Login</button> | |
| </form> | |
| <p class="switch-form"> | |
| Don't have an account? <a href="#" id="showRegister">Register</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Register Modal --> | |
| <div class="modal" id="registerModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Create Account</h2> | |
| <button class="close-btn" id="closeRegisterModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="registerForm"> | |
| <div class="form-group"> | |
| <label for="regName">Full Name</label> | |
| <input type="text" id="regName" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regEmail">Email</label> | |
| <input type="email" id="regEmail" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regPassword">Password</label> | |
| <input type="password" id="regPassword" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Create Account</button> | |
| </form> | |
| <p class="switch-form"> | |
| Already have an account? <a href="#" id="showLogin">Login</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Dashboard Page --> | |
| <section class="page" id="dashboardPage"> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>Welcome back, <span id="dashboardUsername">User</span>!</h1> | |
| <p class="page-subtitle">Start training your AI models today</p> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="totalModels">0</h3> | |
| <p>Total Models</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="trainingHours">0</h3> | |
| <p>Training Hours</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="datasetsUsed">0</h3> | |
| <p>Datasets Used</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="avgAccuracy">0%</h3> | |
| <p>Avg. Accuracy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quick-actions"> | |
| <h2>Quick Actions</h2> | |
| <div class="action-grid"> | |
| <button class="action-card" data-page="train"> | |
| <i class="fas fa-plus-circle"></i> | |
| <h3>Train New Model</h3> | |
| <p>Start training with a new dataset</p> | |
| </button> | |
| <button class="action-card" data-page="models"> | |
| <i class="fas fa-folder-open"></i> | |
| <h3>View Models</h3> | |
| <p>Browse your trained models</p> | |
| </button> | |
| <button class="action-card" onclick="showTutorial()"> | |
| <i class="fas fa-book"></i> | |
| <h3>Tutorial</h3> | |
| <p>Learn how to train models</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Train Model Page --> | |
| <section class="page hidden" id="trainPage"> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>Train New Model</h1> | |
| <p class="page-subtitle">Configure and train your AI model with custom datasets</p> | |
| </div> | |
| <div class="train-form-container"> | |
| <form id="trainForm"> | |
| <div class="form-section"> | |
| <h3>Model Configuration</h3> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="modelName">Model Name</label> | |
| <input type="text" id="modelName" placeholder="e.g., sentiment-analyzer-v1" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="modelType">Model Type</label> | |
| <select id="modelType" required> | |
| <option value="">Select model type</option> | |
| <option value="classification">Classification</option> | |
| <option value="regression">Regression</option> | |
| <option value="nlp">Natural Language Processing</option> | |
| <option value="cv">Computer Vision</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-section"> | |
| <h3>Dataset Configuration</h3> | |
| <div class="form-group"> | |
| <label for="datasetPath">HuggingFace Dataset Path</label> | |
| <input type="text" id="datasetPath" placeholder="e.g., imdb/sentiment" required> | |
| <small>Enter the HuggingFace dataset path (e.g., 'imdb/sentiment')</small> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="trainSplit">Training Split</label> | |
| <select id="trainSplit"> | |
| <option value="train">train</option> | |
| <option value="train[:80%]">train[:80%]</option> | |
| <option value="train[:60%]">train[:60%]</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="valSplit">Validation Split</label> | |
| <select id="valSplit"> | |
| <option value="test">test</option> | |
| <option value="train[-20%:]">train[-20%:]</option> | |
| <option value="validation">validation</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-section"> | |
| <h3>Training Parameters</h3> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="epochs">Epochs</label> | |
| <input type="number" id="epochs" min="1" max="100" value="10"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="batchSize">Batch Size</label> | |
| <input type="number" id="batchSize" min="1" max="512" value="32"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="learningRate">Learning Rate</label> | |
| <input type="number" id="learningRate" min="0.0001" max="1" step="0.0001" value="0.001"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-section"> | |
| <h3>Advanced Options</h3> | |
| <div class="form-group checkbox-group"> | |
| <label> | |
| <input type="checkbox" id="autoSave"> | |
| Automatically save model checkpoints | |
| </label> | |
| </div> | |
| <div class="form-group checkbox-group"> | |
| <label> | |
| <input type="checkbox" id="generateConfig"> | |
| Generate configuration files | |
| </label> | |
| </div> | |
| <div class="form-group checkbox-group"> | |
| <label> | |
| <input type="checkbox" id="useGPU"> | |
| Use GPU acceleration (if available) | |
| </label> | |
| </div> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="submit" class="btn btn-primary btn-large"> | |
| <i class="fas fa-play"></i> | |
| Start Training | |
| </button> | |
| <button type="button" class="btn btn-secondary" onclick="resetForm()"> | |
| <i class="fas fa-redo"></i> | |
| Reset | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Models Page --> | |
| <section class="page hidden" id="modelsPage"> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>My Models</h1> | |
| <p class="page-subtitle">Manage and download your trained models</p> | |
| </div> | |
| <div class="models-filter"> | |
| <div class="filter-group"> | |
| <input type="text" id="modelSearch" placeholder="Search models..."> | |
| <select id="modelFilter"> | |
| <option value="all">All Models</option> | |
| <option value="training">Training</option> | |
| <option value="completed">Completed</option> | |
| <option value="failed">Failed</option> | |
| </select> | |
| </div> | |
| <button class="btn btn-primary" data-page="train"> | |
| <i class="fas fa-plus"></i> | |
| Train New Model | |
| </button> | |
| </div> | |
| <div class="models-grid" id="modelsGrid"> | |
| <!-- Models will be dynamically added here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Profile Page --> | |
| <section class="page hidden" id="profilePage"> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>Profile</h1> | |
| <p class="page-subtitle">Manage your account settings</p> | |
| </div> | |
| <div class="profile-card"> | |
| <div class="profile-avatar"> | |
| <i class="fas fa-user-circle"></i> | |
| </div> | |
| <div class="profile-info"> | |
| <h2 id="profileName">John Doe</h2> | |
| <p id="profileEmail">[email protected]</p> | |
| <p class="member-since">Member since: <span id="memberSince">January 2024</span></p> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h3>Account Settings</h3> | |
| <div class="setting-item"> | |
| <label>Email Notifications</label> | |
| <label class="switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Training Completion Alerts</label> | |
| <label class="switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Public Profile</label> | |
| <label class="switch"> | |
| <input type="checkbox"> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Training Progress Modal --> | |
| <div class="modal" id="trainingModal"> | |
| <div class="modal-content modal-large"> | |
| <div class="modal-header"> | |
| <h2>Training Progress</h2> | |
| <button class="close-btn" id="closeTrainingModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="training-info"> | |
| <p><strong>Model:</strong> <span id="trainingModelName"></span></p> | |
| <p><strong>Dataset:</strong> <span id="trainingDataset"></span></p> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <p class="progress-text"><span id="progressPercent">0</span>% - Epoch <span id="currentEpoch">0</span>/<span id="totalEpochs">0</span></p> | |
| </div> | |
| <div class="training-metrics"> | |
| <div class="metric"> | |
| <i class="fas fa-chart-line"></i> | |
| <div> | |
| <p>Loss</p> | |
| <h4 id="currentLoss">0.000</h4> | |
| </div> | |
| </div> | |
| <div class="metric"> | |
| <i class="fas fa-bullseye"></i> | |
| <div> | |
| <p>Accuracy</p> | |
| <h4 id="currentAccuracy">0.00%</h4> | |
| </div> | |
| </div> | |
| <div class="metric"> | |
| <i class="fas fa-clock"></i> | |
| <div> | |
| <p>Time Elapsed</p> | |
| <h4 id="timeElapsed">00:00</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="training-logs"> | |
| <h4>Training Logs</h4> | |
| <div class="log-container" id="logContainer"></div> | |
| </div> | |
| <div class="training-actions"> | |
| <button class="btn btn-danger" id="stopTraining"> | |
| <i class="fas fa-stop"></i> | |
| Stop Training | |
| </button> | |
| <button class="btn btn-secondary" id="pauseTraining"> | |
| <i class="fas fa-pause"></i> | |
| Pause | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <div class="toast-content"> | |
| <i class="fas fa-check-circle"></i> | |
| <span id="toastMessage">Operation successful!</span> | |
| </div> | |
| </div> | |
| <script src="assets/js/app.js"></script> | |
| </body> | |
| </html> |