Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,954 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary-color: #8b5cf6;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --dark-bg: #0f172a;
+    --card-bg: #1e293b;
+    --border-color: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+/* Navigation */
+.navbar {
+    background: rgba(30, 41, 59, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.nav-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.nav-brand i {
+    font-size: 2rem;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.nav-link {
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color 0.3s;
+    font-weight: 500;
+}
+
+.nav-link:hover, .nav-link.active {
+    color: var(--primary-color);
+}
+
+.user-menu {
+    position: relative;
+}
+
+.user-btn {
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    transition: background 0.3s;
+}
+
+.user-btn:hover {
+    background: rgba(99, 102, 241, 0.1);
+}
+
+.user-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    min-width: 200px;
+    display: none;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.user-dropdown.show {
+    display: block;
+}
+
+.dropdown-item {
+    display: block;
+    padding: 0.75rem 1rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: background 0.3s;
+}
+
+.dropdown-item:hover {
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--text-primary);
+}
+
+.user-dropdown hr {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 0.5rem 0;
+}
+
+/* Main Content */
+.main-content {
+    min-height: calc(100vh - 70px);
+    padding: 2rem 0;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+.page {
+    animation: fadeIn 0.3s ease-in;
+}
+
+.page.hidden {
+    display: none;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.page-header {
+    margin-bottom: 2rem;
+}
+
+.page-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.page-subtitle {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+}
+
+.stat-card {
+    background: var(--card-bg);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+}
+
+.stat-info h3 {
+    font-size: 2rem;
+    margin-bottom: 0.25rem;
+}
+
+.stat-info p {
+    color: var(--text-secondary);
+}
+
+/* Quick Actions */
+.quick-actions h2 {
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+}
+
+.action-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.action-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    color: var(--text-primary);
+}
+
+.action-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.15);
+    border-color: var(--primary-color);
+}
+
+.action-card i {
+    font-size: 3rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.action-card h3 {
+    margin-bottom: 0.5rem;
+    font-size: 1.25rem;
+}
+
+.action-card p {
+    color: var(--text-secondary);
+}
+
+/* Forms */
+.train-form-container {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.form-section {
+    margin-bottom: 2rem;
+}
+
+.form-section h3 {
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 0.75rem;
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    color: var(--text-primary);
+    font-size: 1rem;
+    transition: border-color 0.3s;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-group small {
+    display: block;
+    margin-top: 0.25rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: auto;
+}
+
+.form-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Buttons */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
+}
+
+.btn-secondary {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--primary-color);
+    color: var(--text-primary);
+}
+
+.btn-danger {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.btn-large {
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+}
+
+/* Models Grid */
+.models-filter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    gap: 1rem;
+}
+
+.filter-group {
+    display: flex;
+    gap: 1rem;
+    flex: 1;
+    max-width: 500px;
+}
+
+.filter-group input,
+.filter-group select {
+    flex: 1;
+    padding: 0.75rem;
+    background: rgba(30, 41, 59, 0.5);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    color: var(--text-primary);
+}
+
+.models-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+}
+
+.model-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    transition: all 0.3s;
+}
+
+.model-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
+}
+
+.model-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    margin-bottom: 1rem;
+}
+
+.model-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.model-type {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+}
+
+.model-status {
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.status-completed {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--success-color);
+}
+
+.status-training {
+    background: rgba(245, 158, 11, 0.2);
+    color: var(--warning-color);
+}
+
+.status-failed {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--danger-color);
+}
+
+.model-metrics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin: 1rem 0;
+    padding: 1rem 0;
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.model-metric {
+    text-align: center;
+}
+
+.model-metric h4 {
+    font-size: 1.25rem;
+    color: var(--primary-color);
+}
+
+.model-metric p {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.model-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.model-actions .btn {
+    flex: 1;
+    padding: 0.5rem;
+    font-size: 0.875rem;
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background: var(--card-bg);
+    border-radius: 1rem;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: slideUp 0.3s ease-out;
+}
+
+.modal-large {
+    max-width: 800px;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(50px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h2 {
+    margin: 0;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.25rem;
+}
+
+.close-btn:hover {
+    color: var(--text-primary);
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.switch-form {
+    margin-top: 1rem;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.switch-form a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.switch-form a:hover {
+    text-decoration: underline;
+}
+
+/* Training Progress */
+.training-info {
+    margin-bottom: 1.5rem;
+}
+
+.training-info p {
+    margin-bottom: 0.5rem;
+}
+
+.progress-container {
+    margin-bottom: 2rem;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    width: 0%;
+}
+
+.progress-text {
+    color: var(--text-secondary);
+}
+
+.training-metrics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.metric {
+    background: rgba(15, 23, 42, 0.5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    text-align: center;
+}
+
+.metric i {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+}
+
+.metric h4 {
+    font-size: 1.25rem;
+    margin-top: 0.25rem;
+}
+
+.training-logs {
+    margin-bottom: 2rem;
+}
+
+.training-logs h4 {
+    margin-bottom: 1rem;
+}
+
+.log-container {
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    height: 200px;
+    overflow-y: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+}
+
+.log-entry {
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+}
+
+.log-entry.info {
+    color: var(--primary-color);
+}
+
+.log-entry.success {
+    color: var(--success-color);
+}
+
+.log-entry.error {
+    color: var(--danger-color);
+}
+
+.training-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+}
+
+/* Profile */
+.profile-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.profile-avatar {
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+}
+
+.profile-info h2 {
+    margin-bottom: 0.5rem;
+}
+
+.profile-info p {
+    color: var(--text-secondary);
+}
+
+.member-since {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.settings-section {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 2rem;
+}
+
+.settings-section h3 {
+    margin-bottom: 1.5rem;
+}
+
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.setting-item:last-child {
+    border-bottom: none;
+}
+
+/* Toggle Switch */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--border-color);
+    transition: 0.4s;
+    border-radius: 24px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: var(--primary-color);
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+/* Toast Notification */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1rem 1.5rem;
+    display: none;
+    align-items: center;
+    gap: 0.75rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    z-index: 3000;
+    animation: slideInRight 0.3s ease-out;
+}
+
+.toast.show {
+    display: flex;
+}
+
+@keyframes slideInRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+
+.toast-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.toast i {
+    color: var(--success-color);
+    font-size: 1.25rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-container {
+        padding: 1rem;
+    }
+
+    .nav-links {
+        gap: 1rem;
+    }
+
+    .nav-link span {
+        display: none;
+    }
+
+    .page-header h1 {
+        font-size: 2rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .action-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .models-filter {
+        flex-direction: column;
+    }
+
+    .filter-group {
+        max-width: 100%;
+    }
+
+    .models-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .profile-card {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .training-metrics {
+        grid-template-columns: 1fr;
+    }
+
+    .form-actions {
+        flex-direction: column;
+    }
+
+    .modal-content {
+        width: 95%;
+        margin: 1rem;
+    }
+}
+
+/* Loading Spinner */
+.spinner {
+    border: 3px solid var(--border-color);
+    border-top: 3px solid var(--primary-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-secondary);
+}
+
+.empty-state i {
+    font-size: 4rem;
+    color: var(--border-color);
+    margin-bottom: 1rem;
+}
+
+.empty-state h3 {
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+/* Footer */
+.footer {
+    margin-top: 4rem;
+    padding: 2rem;
+    text-align: center;
+    border-top: 1px solid var(--border-color);
+    color: var(--text-secondary);
+}
+
+.footer a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}

assets/js/app.js

@@ -0,0 +1,619 @@
+// Application State
+let appState = {
+    user: null,
+    currentPage: 'dashboard',
+    models: [],
+    isTraining: false,
+    trainingInterval: null
+};
+
+// Initialize Application
+document.addEventListener('DOMContentLoaded', function() {
+    initializeApp();
+    loadStoredData();
+    setupEventListeners();
+    checkAuthStatus();
+});
+
+function initializeApp() {
+    // Load saved models
+    const savedModels = localStorage.getItem('aiModels');
+    if (savedModels) {
+        appState.models = JSON.parse(savedModels);
+    }
+    
+    // Update UI
+    updateModelsList();
+    updateStats();
+}
+
+function loadStoredData() {
+    // Check for saved user session
+    const savedUser = localStorage.getItem('currentUser');
+    if (savedUser) {
+        appState.user = JSON.parse(savedUser);
+        updateUserUI();
+    }
+}
+
+function setupEventListeners() {
+    // Navigation
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const page = this.dataset.page;
+            if (page) {
+                navigateToPage(page);
+            }
+        });
+    });
+
+    // Action cards navigation
+    document.querySelectorAll('.action-card').forEach(card => {
+        card.addEventListener('click', function() {
+            const page = this.dataset.page;
+            if (page) {
+                navigateToPage(page);
+            }
+        });
+    });
+
+    // User menu
+    document.getElementById('userBtn').addEventListener('click', function() {
+        document.getElementById('userDropdown').classList.toggle('show');
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('.user-menu')) {
+            document.getElementById('userDropdown').classList.remove('show');
+        }
+    });
+
+    // Modals
+    document.getElementById('closeLoginModal').addEventListener('click', () => closeModal('loginModal'));
+    document.getElementById('closeRegisterModal').addEventListener('click', () => closeModal('registerModal'));
+    document.getElementById('closeTrainingModal').addEventListener('click', () => closeModal('trainingModal'));
+
+    // Login/Register forms
+    document.getElementById('loginForm').addEventListener('submit', handleLogin);
+    document.getElementById('registerForm').addEventListener('submit', handleRegister);
+
+    // Switch between login/register
+    document.getElementById('showRegister').addEventListener('click', function(e) {
+        e.preventDefault();
+        closeModal('loginModal');
+        openModal('registerModal');
+    });
+
+    document.getElementById('showLogin').addEventListener('click', function(e) {
+        e.preventDefault();
+        closeModal('registerModal');
+        openModal('loginModal');
+    });
+
+    // Train form
+    document.getElementById('trainForm').addEventListener('submit', handleTrainSubmit);
+
+    // Logout
+    document.getElementById('logoutBtn').addEventListener('click', handleLogout);
+
+    // Profile navigation
+    document.querySelectorAll('.dropdown-item').forEach(item => {
+        item.addEventListener('click', function(e) {
+            e.preventDefault();
+            const page = this.dataset.page;
+            if (page) {
+                navigateToPage(page);
+                document.getElementById('userDropdown').classList.remove('show');
+            }
+        });
+    });
+
+    // Model search and filter
+    document.getElementById('modelSearch').addEventListener('input', filterModels);
+    document.getElementById('modelFilter').addEventListener('change', filterModels);
+
+    // Training controls
+    document.getElementById('stopTraining').addEventListener('click', stopTraining);
+    document.getElementById('pauseTraining').addEventListener('click', pauseTraining);
+}
+
+function checkAuthStatus() {
+    if (!appState.user) {
+        openModal('loginModal');
+    }
+}
+
+function navigateToPage(page) {
+    // Hide all pages
+    document.querySelectorAll('.page').forEach(p => {
+        p.classList.add('hidden');
+    });
+
+    // Show selected page
+    const pageElement = document.getElementById(page + 'Page');
+    if (pageElement) {
+        pageElement.classList.remove('hidden');
+    }
+
+    // Update nav active state
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.classList.remove('active');
+        if (link.dataset.page === page) {
+            link.classList.add('active');
+        }
+    });
+
+    appState.currentPage = page;
+
+    // Page-specific actions
+    if (page === 'models') {
+        updateModelsList();
+    }
+}
+
+function openModal(modalId) {
+    document.getElementById(modalId).classList.add('show');
+}
+
+function closeModal(modalId) {
+    document.getElementById(modalId).classList.remove('show');
+}
+
+function handleLogin(e) {
+    e.preventDefault();
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+
+    // Simulate authentication
+    const user = {
+        id: Date.now(),
+        email: email,
+        name: email.split('@')[0],
+        memberSince: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+    };
+
+    appState.user = user;
+    localStorage.setItem('currentUser', JSON.stringify(user));
+    updateUserUI();
+    closeModal('loginModal');
+    showToast('Successfully logged in!');
+}
+
+function handleRegister(e) {
+    e.preventDefault();
+    const name = document.getElementById('regName').value;
+    const email = document.getElementById('regEmail').value;
+    const password = document.getElementById('regPassword').value;
+
+    // Simulate registration
+    const user = {
+        id: Date.now(),
+        email: email,
+        name: name,
+        memberSince: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+    };
+
+    appState.user = user;
+    localStorage.setItem('currentUser', JSON.stringify(user));
+    updateUserUI();
+    closeModal('registerModal');
+    showToast('Account created successfully!');
+}
+
+function handleLogout() {
+    appState.user = null;
+    localStorage.removeItem('currentUser');
+    updateUserUI();
+    openModal('loginModal');
+    showToast('Logged out successfully');
+}
+
+function updateUserUI() {
+    if (appState.user) {
+        document.getElementById('username').textContent = appState.user.name;
+        document.getElementById('dashboardUsername').textContent = appState.user.name;
+        document.getElementById('profileName').textContent = appState.user.name;
+        document.getElementById('profileEmail').textContent = appState.user.email;
+        document.getElementById('memberSince').textContent = appState.user.memberSince;
+    } else {
+        document.getElementById('username').textContent = 'Guest';
+        document.getElementById('dashboardUsername').textContent = 'Guest';
+    }
+}
+
+function handleTrainSubmit(e) {
+    e.preventDefault();
+    
+    if (!appState.user) {
+        showToast('Please login to train models');
+        openModal('loginModal');
+        return;
+    }
+
+    const formData = {
+        modelName: document.getElementById('modelName').value,
+        modelType: document.getElementById('modelType').value,
+        datasetPath: document.getElementById('datasetPath').value,
+        trainSplit: document.getElementById('trainSplit').value,
+        valSplit: document.getElementById('valSplit').value,
+        epochs: parseInt(document.getElementById('epochs').value),
+        batchSize: parseInt(document.getElementById('batchSize').value),
+        learningRate: parseFloat(document.getElementById('learningRate').value),
+        autoSave: document.getElementById('autoSave').checked,
+        generateConfig: document.getElementById('generateConfig').checked,
+        useGPU: document.getElementById('useGPU').checked,
+        userId: appState.user.id
+    };
+
+    // Create new model entry
+    const model = {
+        id: Date.now(),
+        ...formData,
+        status: 'training',
+        createdAt: new Date().toISOString(),
+        metrics: {
+            accuracy: 0,
+            loss: 1.0,
+            epochs: 0
+        }
+    };
+
+    appState.models.unshift(model);
+    localStorage.setItem('aiModels', JSON.stringify(appState.models));
+
+    // Start training simulation
+    startTraining(model);
+}
+
+function startTraining(model) {
+    appState.isTraining = true;
+    
+    // Show training modal
+    document.getElementById('trainingModelName').textContent = model.modelName;
+    document.getElementById('trainingDataset').textContent = model.datasetPath;
+    document.getElementById('totalEpochs').textContent = model.epochs;
+    openModal('trainingModal');
+
+    // Clear logs
+    document.getElementById('logContainer').innerHTML = '';
+
+    // Simulate training progress
+    let currentEpoch = 0;
+    let progress = 0;
+    let startTime = Date.now();
+
+    appState.trainingInterval = setInterval(() => {
+        currentEpoch++;
+        progress = (currentEpoch / model.epochs) * 100;
+
+        // Update progress bar
+        document.getElementById('progressFill').style.width = progress + '%';
+        document.getElementById('progressPercent').textContent = Math.round(progress);
+        document.getElementById('currentEpoch').textContent = currentEpoch;
+
+        // Simulate metrics
+        const loss = Math.max(0.1, 1.0 - (currentEpoch / model.epochs) * 0.9 + Math.random() * 0.1);
+        const accuracy = Math.min(99, (currentEpoch / model.epochs) * 95 + Math.random() * 5);
+        
+        document.getElementById('currentLoss').textContent = loss.toFixed(3);
+        document.getElementById('currentAccuracy').textContent = accuracy.toFixed(2) + '%';
+
+        // Update time elapsed
+        const elapsed = Math.floor((Date.now() - startTime) / 1000);
+        const minutes = Math.floor(elapsed / 60);
+        const seconds = elapsed % 60;
+        document.getElementById('timeElapsed').textContent = 
+            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+        // Add log entry
+        addLogEntry(`Epoch ${currentEpoch}/${model.epochs} - Loss: ${loss.toFixed(3)}, Accuracy: ${accuracy.toFixed(2)}%`, 'info');
+
+        // Update model in storage
+        const modelIndex = appState.models.findIndex(m => m.id === model.id);
+        if (modelIndex !== -1) {
+            appState.models[modelIndex].metrics = {
+                accuracy: accuracy,
+                loss: loss,
+                epochs: currentEpoch
+            };
+            localStorage.setItem('aiModels', JSON.stringify(appState.models));
+        }
+
+        // Check if training is complete
+        if (currentEpoch >= model.epochs) {
+            completeTraining(model);
+        }
+    }, 1000); // Update every second for demo purposes
+}
+
+function completeTraining(model) {
+    clearInterval(appState.trainingInterval);
+    appState.isTraining = false;
+
+    // Update model status
+    const modelIndex = appState.models.findIndex(m => m.id === model.id);
+    if (modelIndex !== -1) {
+        appState.models[modelIndex].status = 'completed';
+        appState.models[modelIndex].completedAt = new Date().toISOString();
+        localStorage.setItem('aiModels', JSON.stringify(appState.models));
+    }
+
+    addLogEntry('Training completed successfully!', 'success');
+    showToast('Model training completed!');
+
+    // Generate config files if requested
+    if (model.generateConfig) {
+        setTimeout(() => {
+            addLogEntry('Configuration files generated and saved to your account', 'success');
+        }, 1000);
+    }
+
+    // Close modal after delay
+    setTimeout(() => {
+        closeModal('trainingModal');
+        navigateToPage('models');
+        updateModelsList();
+        updateStats();
+    }, 3000);
+}
+
+function stopTraining() {
+    if (appState.isTraining) {
+        clearInterval(appState.trainingInterval);
+        appState.isTraining = false;
+        
+        // Find current training model
+        const trainingModel = appState.models.find(m => m.status === 'training');
+        if (trainingModel) {
+            trainingModel.status = 'failed';
+            localStorage.setItem('aiModels', JSON.stringify(appState.models));
+        }
+
+        addLogEntry('Training stopped by user', 'error');
+        showToast('Training stopped');
+        
+        setTimeout(() => {
+            closeModal('trainingModal');
+            updateModelsList();
+        }, 1500);
+    }
+}
+
+function pauseTraining() {
+    // For demo purposes, pause just stops the interval
+    if (appState.isTraining) {
+        clearInterval(appState.trainingInterval);
+        appState.isTraining = false;
+        document.getElementById('pauseTraining').innerHTML = '<i class="fas fa-play"></i> Resume';
+        addLogEntry('Training paused', 'info');
+    } else {
+        // Resume logic would go here
+        showToast('Resume functionality not implemented in demo');
+    }
+}
+
+function addLogEntry(message, type = 'info') {
+    const logContainer = document.getElementById('logContainer');
+    const entry = document.createElement('div');
+    entry.className = `log-entry ${type}`;
+    const timestamp = new Date().toLocaleTimeString();
+    entry.textContent = `[${timestamp}] ${message}`;
+    logContainer.appendChild(entry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+}
+
+function updateModelsList() {
+    const grid = document.getElementById('modelsGrid');
+    const userModels = appState.user ? 
+        appState.models.filter(m => m.userId === appState.user.id) : 
+        [];
+
+    if (userModels.length === 0) {
+        grid.innerHTML = `
+            <div class="empty-state" style="grid-column: 1 / -1;">
+                <i class="fas fa-robot"></i>
+                <h3>No models yet</h3>
+                <p>Start training your first AI model</p>
+                <button class="btn btn-primary" onclick="navigateToPage('train')">
+                    <i class="fas fa-plus"></i>
+                    Train Model
+                </button>
+            </div>
+        `;
+        return;
+    }
+
+    grid.innerHTML = userModels.map(model => `
+        <div class="model-card">
+            <div class="model-header">
+                <div>
+                    <div class="model-title">${model.modelName}</div>
+                    <div class="model-type">${model.modelType} • ${model.datasetPath}</div>
+                </div>
+                <div class="model-status status-${model.status}">
+                    ${model.status}
+                </div>
+            </div>
+            <div class="model-metrics">
+                <div class="model-metric">
+                    <h4>${model.metrics.accuracy.toFixed(1)}%</h4>
+                    <p>Accuracy</p>
+                </div>
+                <div class="model-metric">
+                    <h4>${model.metrics.loss.toFixed(3)}</h4>
+                    <p>Loss</p>
+                </div>
+                <div class="model-metric">
+                    <h4>${model.metrics.epochs}/${model.epochs}</h4>
+                    <p>Epochs</p>
+                </div>
+            </div>
+            <div class="model-actions">
+                <button class="btn btn-secondary" onclick="downloadModel('${model.id}')">
+                    <i class="fas fa-download"></i>
+                    Download
+                </button>
+                <button class="btn btn-secondary" onclick="viewConfig('${model.id}')">
+                    <i class="fas fa-cog"></i>
+                    Config
+                </button>
+                <button class="btn btn-danger" onclick="deleteModel('${model.id}')">
+                    <i class="fas fa-trash"></i>
+                    Delete
+                </button>
+            </div>
+        </div>
+    `).join('');
+}
+
+function filterModels() {
+    const searchTerm = document.getElementById('modelSearch').value.toLowerCase();
+    const filterType = document.getElementById('modelFilter').value;
+    
+    const cards = document.querySelectorAll('.model-card');
+    cards.forEach(card => {
+        const title = card.querySelector('.model-title').textContent.toLowerCase();
+        const type = card.querySelector('.model-type').textContent.toLowerCase();
+        const status = card.querySelector('.model-status').textContent.toLowerCase();
+        
+        let matchesSearch = title.includes(searchTerm) || type.includes(searchTerm);
+        let matchesFilter = filterType === 'all' || status === filterType;
+        
+        card.style.display = matchesSearch && matchesFilter ? 'block' : 'none';
+    });
+}
+
+function downloadModel(modelId) {
+    const model = appState.models.find(m => m.id == modelId);
+    if (model) {
+        showToast(`Downloading ${model.modelName}...`);
+        
+        // Simulate download
+        setTimeout(() => {
+            showToast(`${model.modelName} downloaded successfully!`);
+        }, 2000);
+    }
+}
+
+function viewConfig(modelId) {
+    const model = appState.models.find(m => m.id == modelId);
+    if (model) {
+        // Create config object
+        const config = {
+            model_name: model.modelName,
+            model_type: model.modelType,
+            dataset: {
+                path: model.datasetPath,
+                train_split: model.trainSplit,
+                validation_split: model.valSplit
+            },
+            training: {
+                epochs: model.epochs,
+                batch_size: model.batchSize,
+                learning_rate: model.learningRate,
+                use_gpu: model.useGPU
+            },
+            metrics: model.metrics,
+            created_at: model.createdAt,
+            status: model.status
+        };
+        
+        // Show config in a modal or new window
+        const configJson = JSON.stringify(config, null, 2);
+        
+        // Create a temporary modal for config
+        const modal = document.createElement('div');
+        modal.className = 'modal show';
+        modal.innerHTML = `
+            <div class="modal-content modal-large">
+                <div class="modal-header">
+                    <h2>Model Configuration</h2>
+                    <button class="close-btn" onclick="this.closest('.modal').remove()">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <pre style="background: rgba(15, 23, 42, 0.5); padding: 1rem; border-radius: 0.5rem; overflow-x: auto;">${configJson}</pre>
+                    <div style="margin-top: 1rem; display: flex; gap: 1rem;">
+                        <button class="btn btn-primary" onclick="copyConfig('${btoa(configJson)}')">
+                            <i class="fas fa-copy"></i>
+                            Copy to Clipboard
+                        </button>
+                        <button class="btn btn-secondary" onclick="downloadConfig('${model.modelName}', '${btoa(configJson)}')">
+                            <i class="fas fa-download"></i>
+                            Download Config
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+    }
+}
+
+function copyConfig(encodedConfig) {
+    const config = atob(encodedConfig);
+    navigator.clipboard.writeText(config).then(() => {
+        showToast('Configuration copied to clipboard!');
+    });
+}
+
+function downloadConfig(modelName, encodedConfig) {
+    const config = atob(encodedConfig);
+    const blob = new Blob([config], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${modelName}_config.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    showToast('Configuration downloaded!');
+}
+
+function deleteModel(modelId) {
+    if (confirm('Are you sure you want to delete this model?')) {
+        appState.models = appState.models.filter(m => m.id != modelId);
+        localStorage.setItem('aiModels', JSON.stringify(appState.models));
+        updateModelsList();
+        updateStats();
+        showToast('Model deleted successfully');
+    }
+}
+
+function updateStats() {
+    const userModels = appState.user ? 
+        appState.models.filter(m => m.userId === appState.user.id) : 
+        [];
+
+    document.getElementById('totalModels').textContent = userModels.length;
+    
+    const completedModels = userModels.filter(m => m.status === 'completed');
+    const avgAccuracy = completedModels.length > 0 ?
+        completedModels.reduce((sum, m) => sum + m.metrics.accuracy, 0) / completedModels.length : 0;
+    document.getElementById('avgAccuracy').textContent = avgAccuracy.toFixed(1) + '%';
+    
+    const totalEpochs = userModels.reduce((sum, m) => sum + m.metrics.epochs, 0);
+    document.getElementById('trainingHours').textContent = Math.round(totalEpochs * 0.1); // Estimate
+    
+    const uniqueDatasets = [...new Set(userModels.map(m => m.datasetPath))];
+    document.getElementById('datasetsUsed').textContent = uniqueDatasets.length;
+}
+
+function resetForm() {
+    document.getElementById('trainForm').reset();
+    showToast('Form reset');
+}
+
+function showTutorial() {
+    showToast('Tutorial coming soon!');
+}
+
+function showToast(message) {
+    const toast = document.getElementById('toast');
+    document.getElementById('toastMessage').textContent = message;
+    toast.classList.add('show');
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}

index.html

@@ -1,19 +1,425 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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">&times;</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">&times;</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">&times;</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>