Spaces:

vectorplasticity
/

universal-model-trainer

Sleeping

App Files Files Community

vectorplasticity commited on Apr 12

Commit

cbd0089

verified ·

1 Parent(s): 66ee273

Fix search API calls - use correct parameter name 'query' instead of 'q'

Browse files

Files changed (1) hide show

app/templates/dashboard.html +250 -20

app/templates/dashboard.html CHANGED Viewed

@@ -180,6 +180,24 @@
             border-radius: 10px;
             font-size: 0.85rem;
         }
     </style>
 </head>
 <body>
@@ -415,7 +433,7 @@
                                 <div class="col-md-8">
                                     <div class="search-box mb-3">
                                         <i class="bi bi-search"></i>
-                                        <input type="text" class="form-control" id="model-search" placeholder="Search models...">
                                     </div>
                                     <input type="hidden" id="selected-model" name="model_name" required>
                                 </div>
@@ -427,6 +445,7 @@
                             </div>
                             <div id="model-results" class="row g-2 mt-2"></div>
                             <div id="model-info" class="mt-3" style="display: none;"></div>
                         </div>
                         <!-- Step 3: Dataset Selection -->
@@ -436,7 +455,7 @@
                                 <div class="col-md-8">
                                     <div class="search-box mb-3">
                                         <i class="bi bi-search"></i>
-                                        <input type="text" class="form-control" id="dataset-search" placeholder="Search datasets...">
                                     </div>
                                     <input type="hidden" id="selected-dataset" name="dataset_name" required>
                                 </div>
@@ -448,6 +467,7 @@
                             </div>
                             <div id="dataset-results" class="row g-2 mt-2"></div>
                             <div id="dataset-config" class="mt-3" style="display: none;"></div>
                         </div>
                         <!-- Step 4: Training Configuration -->
@@ -624,7 +644,20 @@
                     <i class="bi bi-box me-2"></i>Browse Models
                 </div>
                 <div class="card-body">
-                    <p class="text-muted">Search and select models from HuggingFace Hub</p>
                 </div>
             </div>
         </div>
@@ -636,7 +669,20 @@
                     <i class="bi bi-database me-2"></i>Browse Datasets
                 </div>
                 <div class="card-body">
-                    <p class="text-muted">Search and select datasets from HuggingFace Hub</p>
                 </div>
             </div>
         </div>
@@ -679,6 +725,9 @@
             document.getElementById('section-' + sectionId).style.display = 'block';
             if (sectionId === 'dashboard') loadDashboard();
             if (sectionId === 'jobs') loadJobs();
         }
         async function loadDashboard() {
@@ -724,23 +773,69 @@
             document.querySelectorAll('.task-card').forEach(card => card.classList.remove('selected'));
             document.querySelector('.task-card[data-task="' + task + '"]').classList.add('selected');
             document.getElementById('selected-task').value = task;
         }
         async function searchModels() {
-            const query = document.getElementById('model-search').value;
-            if (!query) return;
             try {
-                const res = await fetch(API_BASE + '/models/search?q=' + encodeURIComponent(query) + '&task=' + (selectedTask || ''));
                 const data = await res.json();
-                renderModelResults(data.models || []);
             } catch (error) {
                 console.error('Error searching models:', error);
             }
         }
         function renderModelResults(models) {
             const container = document.getElementById('model-results');
-            container.innerHTML = models.slice(0, 12).map(model => '<div class="col-md-3"><div class="card task-card" onclick="selectModel(\'' + model.id + '\')"><div class="card-body py-2"><small class="fw-bold">' + model.id + '</small><br><small class="text-muted">' + formatBytes(model.size_bytes || 0) + '</small></div></div></div>').join('');
         }
         async function selectModel(modelId) {
@@ -748,31 +843,54 @@
             document.getElementById('selected-model').value = modelId;
             document.querySelectorAll('#model-results .task-card').forEach(card => card.classList.remove('selected'));
             if (event.currentTarget) event.currentTarget.classList.add('selected');
             try {
-                const res = await fetch(API_BASE + '/models/' + encodeURIComponent(modelId) + '/info');
-                const info = await res.json();
-                const container = document.getElementById('model-info');
-                container.style.display = 'block';
-                container.innerHTML = '<div class="card"><div class="card-body"><h6>' + info.model_id + '</h6><div class="row"><div class="col-6"><small class="text-muted">Parameters:</small></div><div class="col-6 text-end"><small>' + (info.num_parameters || 'Unknown') + '</small></div></div><div class="row"><div class="col-6"><small class="text-muted">Architecture:</small></div><div class="col-6 text-end"><small>' + (info.architectures?.[0] || 'Unknown') + '</small></div></div></div></div>';
             } catch (error) {
                 console.error('Error loading model info:', error);
             }
         }
         async function searchDatasets() {
-            const query = document.getElementById('dataset-search').value;
-            if (!query) return;
             try {
-                const res = await fetch(API_BASE + '/datasets/search?q=' + encodeURIComponent(query));
                 const data = await res.json();
-                renderDatasetResults(data.datasets || []);
             } catch (error) {
                 console.error('Error searching datasets:', error);
             }
         }
         function renderDatasetResults(datasets) {
             const container = document.getElementById('dataset-results');
             container.innerHTML = datasets.slice(0, 12).map(ds => '<div class="col-md-3"><div class="card task-card" onclick="selectDataset(\'' + ds.id + '\')"><div class="card-body py-2"><small class="fw-bold">' + ds.id + '</small><br><small class="text-muted">' + (ds.downloads?.toLocaleString() || 0) + ' downloads</small></div></div></div>').join('');
         }
@@ -783,6 +901,104 @@
             if (event.currentTarget) event.currentTarget.classList.add('selected');
         }
         async function loadJobs() {
             try {
                 const res = await fetch(API_BASE + '/jobs/');
@@ -816,6 +1032,20 @@
         document.getElementById('training-form').addEventListener('submit', async (e) => {
             e.preventDefault();
             const formData = {
                 task_type: selectedTask,
                 model_name: selectedModel,
@@ -845,11 +1075,11 @@
                     alert('Training started! Job ID: ' + data.job_id);
                     showSection('jobs');
                 } else {
-                    alert('Error starting training: ' + (data.error || 'Unknown error'));
                 }
             } catch (error) {
                 console.error('Error starting training:', error);
-                alert('Error starting training');
             }
         });

             border-radius: 10px;
             font-size: 0.85rem;
         }
+        .search-loading {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+        .error-message {
+            background: #ffebee;
+            color: #c62828;
+            padding: 10px 15px;
+            border-radius: 8px;
+            margin-top: 10px;
+        }
+        .success-message {
+            background: #e8f5e9;
+            color: #2e7d32;
+            padding: 10px 15px;
+            border-radius: 8px;
+            margin-top: 10px;
+        }
     </style>
 </head>
 <body>
                                 <div class="col-md-8">
                                     <div class="search-box mb-3">
                                         <i class="bi bi-search"></i>
+                                        <input type="text" class="form-control" id="model-search" placeholder="Search models (e.g., gpt2, bert, llama)...">
                                     </div>
                                     <input type="hidden" id="selected-model" name="model_name" required>
                                 </div>
                             </div>
                             <div id="model-results" class="row g-2 mt-2"></div>
                             <div id="model-info" class="mt-3" style="display: none;"></div>
+                            <div id="model-recommendations" class="mt-3"></div>
                         </div>
                         <!-- Step 3: Dataset Selection -->
                                 <div class="col-md-8">
                                     <div class="search-box mb-3">
                                         <i class="bi bi-search"></i>
+                                        <input type="text" class="form-control" id="dataset-search" placeholder="Search datasets (e.g., squad, imdb, wikitext)...">
                                     </div>
                                     <input type="hidden" id="selected-dataset" name="dataset_name" required>
                                 </div>
                             </div>
                             <div id="dataset-results" class="row g-2 mt-2"></div>
                             <div id="dataset-config" class="mt-3" style="display: none;"></div>
+                            <div id="dataset-recommendations" class="mt-3"></div>
                         </div>
                         <!-- Step 4: Training Configuration -->
                     <i class="bi bi-box me-2"></i>Browse Models
                 </div>
                 <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <div class="search-box">
+                                <i class="bi bi-search"></i>
+                                <input type="text" class="form-control" id="models-page-search" placeholder="Search models...">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <button type="button" class="btn btn-primary w-100" onclick="searchModelsPage()">
+                                <i class="bi bi-search me-1"></i>Search
+                            </button>
+                        </div>
+                    </div>
+                    <div id="models-page-results" class="row g-3"></div>
                 </div>
             </div>
         </div>
                     <i class="bi bi-database me-2"></i>Browse Datasets
                 </div>
                 <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <div class="search-box">
+                                <i class="bi bi-search"></i>
+                                <input type="text" class="form-control" id="datasets-page-search" placeholder="Search datasets...">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <button type="button" class="btn btn-primary w-100" onclick="searchDatasetsPage()">
+                                <i class="bi bi-search me-1"></i>Search
+                            </button>
+                        </div>
+                    </div>
+                    <div id="datasets-page-results" class="row g-3"></div>
                 </div>
             </div>
         </div>
             document.getElementById('section-' + sectionId).style.display = 'block';
             if (sectionId === 'dashboard') loadDashboard();
             if (sectionId === 'jobs') loadJobs();
+            if (sectionId === 'new-training') loadRecommendations();
+            if (sectionId === 'models') loadPopularModels();
+            if (sectionId === 'datasets') loadPopularDatasets();
         }
         async function loadDashboard() {
             document.querySelectorAll('.task-card').forEach(card => card.classList.remove('selected'));
             document.querySelector('.task-card[data-task="' + task + '"]').classList.add('selected');
             document.getElementById('selected-task').value = task;
+            loadRecommendations();
+        }
+        async function loadRecommendations() {
+            if (!selectedTask) return;
+            try {
+                // Load model recommendations
+                const modelRecRes = await fetch(API_BASE + '/models/recommend/' + selectedTask);
+                if (modelRecRes.ok) {
+                    const modelRecs = await modelRecRes.json();
+                    const modelContainer = document.getElementById('model-recommendations');
+                    if (modelRecs && modelRecs.length > 0) {
+                        modelContainer.innerHTML = '<h6 class="mb-2">Recommended Models:</h6><div class="row g-2">' +
+                            modelRecs.slice(0, 4).map(m => '<div class="col-md-3"><div class="card task-card" onclick="selectModel(\'' + m.model_id + '\')"><div class="card-body py-2"><small class="fw-bold">' + m.model_id + '</small><br><small class="text-muted">' + (m.size || '') + '</small></div></div></div>').join('') + '</div>';
+                    }
+                }
+                // Load dataset recommendations
+                const datasetRecRes = await fetch(API_BASE + '/datasets/recommend/' + selectedTask);
+                if (datasetRecRes.ok) {
+                    const datasetRecs = await datasetRecRes.json();
+                    const datasetContainer = document.getElementById('dataset-recommendations');
+                    if (datasetRecs && datasetRecs.length > 0) {
+                        datasetContainer.innerHTML = '<h6 class="mb-2">Recommended Datasets:</h6><div class="row g-2">' +
+                            datasetRecs.slice(0, 4).map(d => '<div class="col-md-3"><div class="card task-card" onclick="selectDataset(\'' + d.dataset_id + '\')"><div class="card-body py-2"><small class="fw-bold">' + d.dataset_id + '</small><br><small class="text-muted">' + (d.size || '') + '</small></div></div></div>').join('') + '</div>';
+                    }
+                }
+            } catch (error) {
+                console.error('Error loading recommendations:', error);
+            }
         }
         async function searchModels() {
+            const query = document.getElementById('model-search').value.trim();
+            if (!query) {
+                alert('Please enter a search term');
+                return;
+            }
+            const container = document.getElementById('model-results');
+            container.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
             try {
+                const res = await fetch(API_BASE + '/models/search?query=' + encodeURIComponent(query) + '&limit=12');
+                if (!res.ok) {
+                    throw new Error('Search failed: ' + res.status);
+                }
                 const data = await res.json();
+                console.log('Model search results:', data);
+                renderModelResults(data);
             } catch (error) {
                 console.error('Error searching models:', error);
+                container.innerHTML = '<div class="col-12"><div class="error-message"><i class="bi bi-exclamation-triangle me-2"></i>Error searching models: ' + error.message + '</div></div>';
             }
         }
         function renderModelResults(models) {
             const container = document.getElementById('model-results');
+            if (!models || models.length === 0) {
+                container.innerHTML = '<div class="col-12 text-center text-muted py-3"><i class="bi bi-search fs-1 d-block mb-2"></i>No models found. Try a different search term.</div>';
+                return;
+            }
+            container.innerHTML = models.slice(0, 12).map(model => '<div class="col-md-3"><div class="card task-card" onclick="selectModel(\'' + (model.id || model.model_id) + '\')"><div class="card-body py-2"><small class="fw-bold">' + (model.id || model.model_id) + '</small><br><small class="text-muted">' + formatBytes(model.size_bytes || model.downloads || 0) + '</small></div></div></div>').join('');
         }
         async function selectModel(modelId) {
             document.getElementById('selected-model').value = modelId;
             document.querySelectorAll('#model-results .task-card').forEach(card => card.classList.remove('selected'));
             if (event.currentTarget) event.currentTarget.classList.add('selected');
+            const container = document.getElementById('model-info');
+            container.style.display = 'block';
+            container.innerHTML = '<div class="card"><div class="card-body"><div class="spinner-border spinner-border-sm" role="status"></div> Loading model info...</div></div>';
             try {
+                const res = await fetch(API_BASE + '/models/info/' + encodeURIComponent(modelId));
+                if (res.ok) {
+                    const info = await res.json();
+                    container.innerHTML = '<div class="card"><div class="card-body"><h6>' + info.model_id + '</h6><div class="row"><div class="col-6"><small class="text-muted">Downloads:</small></div><div class="col-6 text-end"><small>' + (info.downloads?.toLocaleString() || 'N/A') + '</small></div></div><div class="row"><div class="col-6"><small class="text-muted">Architecture:</small></div><div class="col-6 text-end"><small>' + (info.architectures?.[0] || info.architecture || 'Unknown') + '</small></div></div><div class="row"><div class="col-6"><small class="text-muted">Pipeline Tag:</small></div><div class="col-6 text-end"><small>' + (info.pipeline_tag || 'N/A') + '</small></div></div></div></div>';
+                } else {
+                    container.innerHTML = '<div class="card"><div class="card-body"><small class="text-muted">Selected: ' + modelId + '</small></div></div>';
+                }
             } catch (error) {
                 console.error('Error loading model info:', error);
+                container.innerHTML = '<div class="card"><div class="card-body"><small class="text-muted">Selected: ' + modelId + '</small></div></div>';
             }
         }
         async function searchDatasets() {
+            const query = document.getElementById('dataset-search').value.trim();
+            if (!query) {
+                alert('Please enter a search term');
+                return;
+            }
+            const container = document.getElementById('dataset-results');
+            container.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
             try {
+                const res = await fetch(API_BASE + '/datasets/search?query=' + encodeURIComponent(query) + '&limit=12');
+                if (!res.ok) {
+                    throw new Error('Search failed: ' + res.status);
+                }
                 const data = await res.json();
+                console.log('Dataset search results:', data);
+                renderDatasetResults(data);
             } catch (error) {
                 console.error('Error searching datasets:', error);
+                container.innerHTML = '<div class="col-12"><div class="error-message"><i class="bi bi-exclamation-triangle me-2"></i>Error searching datasets: ' + error.message + '</div></div>';
             }
         }
         function renderDatasetResults(datasets) {
             const container = document.getElementById('dataset-results');
+            if (!datasets || datasets.length === 0) {
+                container.innerHTML = '<div class="col-12 text-center text-muted py-3"><i class="bi bi-search fs-1 d-block mb-2"></i>No datasets found. Try a different search term.</div>';
+                return;
+            }
             container.innerHTML = datasets.slice(0, 12).map(ds => '<div class="col-md-3"><div class="card task-card" onclick="selectDataset(\'' + ds.id + '\')"><div class="card-body py-2"><small class="fw-bold">' + ds.id + '</small><br><small class="text-muted">' + (ds.downloads?.toLocaleString() || 0) + ' downloads</small></div></div></div>').join('');
         }
             if (event.currentTarget) event.currentTarget.classList.add('selected');
         }
+        async function loadPopularModels() {
+            const container = document.getElementById('models-page-results');
+            container.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+            try {
+                const res = await fetch(API_BASE + '/models/popular?limit=20');
+                if (res.ok) {
+                    const data = await res.json();
+                    renderModelsPage(data);
+                } else {
+                    container.innerHTML = '<div class="col-12 text-center text-muted">No models found</div>';
+                }
+            } catch (error) {
+                console.error('Error loading popular models:', error);
+                container.innerHTML = '<div class="col-12 text-center text-muted">Error loading models</div>';
+            }
+        }
+        async function searchModelsPage() {
+            const query = document.getElementById('models-page-search').value.trim();
+            if (!query) {
+                loadPopularModels();
+                return;
+            }
+            const container = document.getElementById('models-page-results');
+            container.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+            try {
+                const res = await fetch(API_BASE + '/models/search?query=' + encodeURIComponent(query) + '&limit=20');
+                if (res.ok) {
+                    const data = await res.json();
+                    renderModelsPage(data);
+                } else {
+                    container.innerHTML = '<div class="col-12 text-center text-muted">No models found</div>';
+                }
+            } catch (error) {
+                console.error('Error searching models:', error);
+            }
+        }
+        function renderModelsPage(models) {
+            const container = document.getElementById('models-page-results');
+            if (!models || models.length === 0) {
+                container.innerHTML = '<div class="col-12 text-center text-muted py-3">No models found</div>';
+                return;
+            }
+            container.innerHTML = models.map(m => '<div class="col-md-3"><div class="card model-card"><div class="card-body"><h6>' + (m.id || m.model_id) + '</h6><small class="text-muted d-block">' + (m.pipeline_tag || 'Unknown') + '</small><small class="text-muted">' + (m.downloads?.toLocaleString() || 0) + ' downloads</small></div></div></div>').join('');
+        }
+        async function loadPopularDatasets() {
+            const container = document.getElementById('datasets-page-results');
+            container.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+            try {
+                const res = await fetch(API_BASE + '/datasets/popular?limit=20');
+                if (res.ok) {
+                    const data = await res.json();
+                    renderDatasetsPage(data);
+                } else {
+                    container.innerHTML = '<div class="col-12 text-center text-muted">No datasets found</div>';
+                }
+            } catch (error) {
+                console.error('Error loading popular datasets:', error);
+                container.innerHTML = '<div class="col-12 text-center text-muted">Error loading datasets</div>';
+            }
+        }
+        async function searchDatasetsPage() {
+            const query = document.getElementById('datasets-page-search').value.trim();
+            if (!query) {
+                loadPopularDatasets();
+                return;
+            }
+            const container = document.getElementById('datasets-page-results');
+            container.innerHTML = '<div class="col-12 text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+            try {
+                const res = await fetch(API_BASE + '/datasets/search?query=' + encodeURIComponent(query) + '&limit=20');
+                if (res.ok) {
+                    const data = await res.json();
+                    renderDatasetsPage(data);
+                } else {
+                    container.innerHTML = '<div class="col-12 text-center text-muted">No datasets found</div>';
+                }
+            } catch (error) {
+                console.error('Error searching datasets:', error);
+            }
+        }
+        function renderDatasetsPage(datasets) {
+            const container = document.getElementById('datasets-page-results');
+            if (!datasets || datasets.length === 0) {
+                container.innerHTML = '<div class="col-12 text-center text-muted py-3">No datasets found</div>';
+                return;
+            }
+            container.innerHTML = datasets.map(d => '<div class="col-md-3"><div class="card model-card"><div class="card-body"><h6>' + (d.id || d.dataset_id) + '</h6><small class="text-muted d-block">' + (d.description?.substring(0, 50) || 'No description') + '</small><small class="text-muted">' + (d.downloads?.toLocaleString() || 0) + ' downloads</small></div></div></div>').join('');
+        }
         async function loadJobs() {
             try {
                 const res = await fetch(API_BASE + '/jobs/');
         document.getElementById('training-form').addEventListener('submit', async (e) => {
             e.preventDefault();
+            if (!selectedTask) {
+                alert('Please select a task type');
+                return;
+            }
+            if (!selectedModel) {
+                alert('Please select a model');
+                return;
+            }
+            if (!selectedDataset) {
+                alert('Please select a dataset');
+                return;
+            }
             const formData = {
                 task_type: selectedTask,
                 model_name: selectedModel,
                     alert('Training started! Job ID: ' + data.job_id);
                     showSection('jobs');
                 } else {
+                    alert('Error starting training: ' + (data.detail || data.error || 'Unknown error'));
                 }
             } catch (error) {
                 console.error('Error starting training:', error);
+                alert('Error starting training: ' + error.message);
             }
         });