Fix JavaScript errors: Add missing showWarning function and improve error handling

FIXES:
- Added missing showWarning() function to KnowledgeDistillationApp class
- Added showSuccess() function to class for consistency
- Added proper app initialization with DOMContentLoaded event
- Added null checks for DOM elements before adding event listeners
- Added CSS styling for warning notifications
- Added debugging console logs for troubleshooting

IMPROVEMENTS:
- Better error handling with fallbacks
- More robust DOM element checking
- Consistent notification system across all message types
- Enhanced debugging capabilities

This fixes the 'this.showWarning is not a function' error when clicking 'Add Model' button.

static/css/style.css

@@ -1288,6 +1288,11 @@ body {
     background: #dc3545;
 }
 
+.notification-warning {
+    background: #ffc107;
+    color: #212529;
+}
+
 @keyframes slideIn {
     from {
         transform: translateX(100%);

static/js/main.js

@@ -37,48 +37,81 @@ class KnowledgeDistillationApp {
     }
     
     init() {
+        console.log('Initializing Knowledge Distillation App...');
         this.setupEventListeners();
         this.updateModelCount();
+        console.log('App initialization complete');
     }
     
     setupEventListeners() {
         // File upload
         const uploadArea = document.getElementById('upload-area');
         const fileInput = document.getElementById('file-input');
-        
-        uploadArea.addEventListener('click', () => fileInput.click());
-        uploadArea.addEventListener('dragover', this.handleDragOver.bind(this));
-        uploadArea.addEventListener('dragleave', this.handleDragLeave.bind(this));
-        uploadArea.addEventListener('drop', this.handleDrop.bind(this));
-        fileInput.addEventListener('change', this.handleFileSelect.bind(this));
-        
+
+        if (uploadArea && fileInput) {
+            uploadArea.addEventListener('click', () => fileInput.click());
+            uploadArea.addEventListener('dragover', this.handleDragOver.bind(this));
+            uploadArea.addEventListener('dragleave', this.handleDragLeave.bind(this));
+            uploadArea.addEventListener('drop', this.handleDrop.bind(this));
+            fileInput.addEventListener('change', this.handleFileSelect.bind(this));
+        }
+
         // Hugging Face models
-        document.getElementById('add-hf-model').addEventListener('click', this.addHuggingFaceModel.bind(this));
-        document.getElementById('hf-repo').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') this.addHuggingFaceModel();
-        });
-        
+        const addHfModelBtn = document.getElementById('add-hf-model');
+        const hfRepoInput = document.getElementById('hf-repo');
+
+        if (addHfModelBtn) {
+            addHfModelBtn.addEventListener('click', this.addHuggingFaceModel.bind(this));
+        }
+
+        if (hfRepoInput) {
+            hfRepoInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') this.addHuggingFaceModel();
+            });
+        }
+
         // URL models
-        document.getElementById('add-url-model').addEventListener('click', this.addUrlModel.bind(this));
-        document.getElementById('model-url').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') this.addUrlModel();
-        });
+        const addUrlModelBtn = document.getElementById('add-url-model');
+        const modelUrlInput = document.getElementById('model-url');
+
+        if (addUrlModelBtn) {
+            addUrlModelBtn.addEventListener('click', this.addUrlModel.bind(this));
+        }
+
+        if (modelUrlInput) {
+            modelUrlInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') this.addUrlModel();
+            });
+        }
         
         // Navigation
-        document.getElementById('next-step-1').addEventListener('click', () => this.goToStep(2));
-        document.getElementById('back-step-2').addEventListener('click', () => this.goToStep(1));
-        document.getElementById('back-step-3').addEventListener('click', () => this.goToStep(2));
-        document.getElementById('start-training').addEventListener('click', this.showConfirmModal.bind(this));
-        document.getElementById('start-new-training').addEventListener('click', () => this.resetAndGoToStep(1));
-        
+        const nextStep1 = document.getElementById('next-step-1');
+        const backStep2 = document.getElementById('back-step-2');
+        const backStep3 = document.getElementById('back-step-3');
+        const startTraining = document.getElementById('start-training');
+        const startNewTraining = document.getElementById('start-new-training');
+
+        if (nextStep1) nextStep1.addEventListener('click', () => this.goToStep(2));
+        if (backStep2) backStep2.addEventListener('click', () => this.goToStep(1));
+        if (backStep3) backStep3.addEventListener('click', () => this.goToStep(2));
+        if (startTraining) startTraining.addEventListener('click', this.showConfirmModal.bind(this));
+        if (startNewTraining) startNewTraining.addEventListener('click', () => this.resetAndGoToStep(1));
+
         // Training controls
-        document.getElementById('cancel-training').addEventListener('click', this.cancelTraining.bind(this));
-        document.getElementById('download-model').addEventListener('click', this.downloadModel.bind(this));
-        
+        const cancelTraining = document.getElementById('cancel-training');
+        const downloadModel = document.getElementById('download-model');
+
+        if (cancelTraining) cancelTraining.addEventListener('click', this.cancelTraining.bind(this));
+        if (downloadModel) downloadModel.addEventListener('click', this.downloadModel.bind(this));
+
         // Modals
-        document.getElementById('confirm-start').addEventListener('click', this.startTraining.bind(this));
-        document.getElementById('confirm-cancel').addEventListener('click', this.hideConfirmModal.bind(this));
-        document.getElementById('error-ok').addEventListener('click', this.hideErrorModal.bind(this));
+        const confirmStart = document.getElementById('confirm-start');
+        const confirmCancel = document.getElementById('confirm-cancel');
+        const errorOk = document.getElementById('error-ok');
+
+        if (confirmStart) confirmStart.addEventListener('click', this.startTraining.bind(this));
+        if (confirmCancel) confirmCancel.addEventListener('click', this.hideConfirmModal.bind(this));
+        if (errorOk) errorOk.addEventListener('click', this.hideErrorModal.bind(this));
 
         // Suggested models
         document.querySelectorAll('.suggestion-btn').forEach(btn => {
@@ -240,10 +273,17 @@ class KnowledgeDistillationApp {
     }
     
     async addHuggingFaceModel() {
+        console.log('addHuggingFaceModel called');
         const repoInput = document.getElementById('hf-repo');
         const tokenInput = document.getElementById('hf-token');
         const accessTypeSelect = document.getElementById('model-access-type');
 
+        console.log('Elements found:', {
+            repoInput: !!repoInput,
+            tokenInput: !!tokenInput,
+            accessTypeSelect: !!accessTypeSelect
+        });
+
         const repo = repoInput.value.trim();
         const manualToken = tokenInput.value.trim();
         const accessType = accessTypeSelect ? accessTypeSelect.value : 'read';
@@ -788,6 +828,26 @@ class KnowledgeDistillationApp {
     hideErrorModal() {
         document.getElementById('error-modal').classList.add('hidden');
     }
+
+    showWarning(message) {
+        try {
+            // Use the same notification system as showError but with warning style
+            showNotification(message, 'warning');
+        } catch (error) {
+            console.error('Error showing warning message:', error);
+            alert(`Warning: ${message}`);
+        }
+    }
+
+    showSuccess(message) {
+        try {
+            // Use the same notification system as showError but with success style
+            showNotification(message, 'success');
+        } catch (error) {
+            console.error('Error showing success message:', error);
+            alert(`Success: ${message}`);
+        }
+    }
     
     showLoading(message) {
         // Create loading overlay if it doesn't exist
@@ -1623,6 +1683,10 @@ function showError(message) {
     showNotification(message, 'error');
 }
 
+function showWarning(message) {
+    showNotification(message, 'warning');
+}
+
 function showNotification(message, type) {
     const notification = document.createElement('div');
     notification.className = `notification notification-${type}`;
@@ -1637,3 +1701,15 @@ function showNotification(message, type) {
         }
     }, 5000);
 }
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    try {
+        // Create global app instance
+        window.app = new KnowledgeDistillationApp();
+        console.log('Knowledge Distillation App initialized successfully');
+    } catch (error) {
+        console.error('Failed to initialize app:', error);
+        alert('Failed to initialize application. Please refresh the page.');
+    }
+});