This model has no parameters to configure.

'; return; } Object.keys(params).forEach(paramKey => { const param = params[paramKey]; const div = document.createElement('div'); div.innerHTML = ` ${param.label} `; hyperparametersDiv.appendChild(div); }); } function log(message) { trainingLog.textContent += `> ${message}\n`; trainingLog.scrollTop = trainingLog.scrollHeight; } // --- TRAINING LOGIC (PYTHON IN JS) --- async function handleTrain() { if (!pyodide) { alert("AI Environment is not ready. Please wait."); return; } trainingLog.textContent = ''; trainingLog.classList.remove('hidden'); log('Starting training process...'); const dataset = datasetSelect.value; const modelKey = modelSelect.value; const hyperparams = {}; const paramsConfig = models[datasets[dataset].type][modelKey].params; Object.keys(paramsConfig).forEach(key => { hyperparams[key] = parseFloat(document.getElementById(`param-${key}`).value); }); pyodide.globals.set('dataset_name', dataset); pyodide.globals.set('model_key', modelKey); pyodide.globals.set('hyperparams_js', pyodide.toPy(hyperparams)); try { const pythonCode = ` import numpy as np from sklearn.model_selection import train_test_split from sklearn.datasets import load_iris, load_diabetes from sklearn.neighbors import KNeighborsClassifier from sklearn.svm import SVC from sklearn.linear_model import LinearRegression, Ridge from sklearn.metrics import accuracy_score, mean_squared_error import json # Get variables from JS dataset_name = dataset_name model_key = model_key hyperparams = hyperparams_js.to_dict() # Load data if dataset_name == 'iris': data = load_iris() X, y = data.data, data.target problem_type = 'classification' elif dataset_name == 'diabetes': data = load_diabetes() X, y = data.data, data.target problem_type = 'regression' # Split data X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=42) # Instantiate model if problem_type == 'classification': if model_key == 'knn': model = KNeighborsClassifier(n_neighbors=int(hyperparams.get('n_neighbors', 5))) elif model_key == 'svc': model = SVC(C=hyperparams.get('C', 1.0)) else: # regression if model_key == 'linear': model = LinearRegression() elif model_key == 'ridge': model = Ridge(alpha=hyperparams.get('alpha', 1.0)) # Train model model.fit(X_train, y_train) # Make predictions y_pred = model.predict(X_test) # Evaluate if problem_type == 'classification': metric_name = 'Accuracy' metric_value = accuracy_score(y_test, y_pred) # For chart: use first two features chart_data = {'y_test': y_test.tolist(), 'y_pred': y_pred.tolist(), 'X_test_0': X_test[:, 0].tolist(), 'X_test_1': X_test[:, 1].tolist()} else: metric_name = 'Mean Squared Error' metric_value = mean_squared_error(y_test, y_pred) # For chart: predictions vs actuals chart_data = {'y_test': y_test.tolist(), 'y_pred': y_pred.tolist()} results = { 'metric_name': metric_name, 'metric_value': metric_value, 'problem_type': problem_type, 'chart_data': chart_data } json.dumps(results) `; log('Executing Python code with scikit-learn...'); const resultsJson = await pyodide.runPythonAsync(pythonCode); log('Training complete!'); const results = JSON.parse(resultsJson); displayResults(results); document.getElementById('next-btn-2').classList.remove('hidden'); } catch (error) { log(`An error occurred: ${error}`); } } function displayResults(results) { metricsOutput.innerHTML = ` `; const ctx = resultsChartCanvas.getContext('2d'); if(resultsChart) resultsChart.destroy(); if (results.problem_type === 'classification') { const data = { datasets: [ { label: 'Correct Predictions', data: [], backgroundColor: 'rgba(59, 130, 246, 0.7)' }, { label: 'Incorrect Predictions', data: [], backgroundColor: 'rgba(239, 68, 68, 0.7)' } ] }; for (let i = 0; i < results.chart_data.y_test.length; i++) { const point = { x: results.chart_data.X_test_0[i], y: results.chart_data.X_test_1[i] }; if (results.chart_data.y_test[i] === results.chart_data.y_pred[i]) { data.datasets[0].data.push(point); } else { data.datasets[1].data.push(point); } } resultsChart = new Chart(ctx, { type: 'scatter', data: data, options: { scales: { x: { title: { display: true, text: 'Feature 1' } }, y: { title: { display: true, text: 'Feature 2' } } } } }); } else { // Regression const data = { labels: results.chart_data.y_test.map((_, i) => `Sample ${i+1}`), datasets: [ { label: 'Actual Values', data: results.chart_data.y_test, backgroundColor: 'rgba(59, 130, 246, 0.7)' }, { label: 'Predicted Values', data: results.chart_data.y_pred, backgroundColor: 'rgba(22, 163, 74, 0.7)' } ] }; resultsChart = new Chart(ctx, { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } } }); } document.getElementById('results-placeholder').classList.add('hidden'); document.getElementById('results-content').classList.remove('hidden'); document.getElementById('export-section').classList.remove('hidden'); } async function downloadPDF() { pdfLoader.classList.remove('hidden'); pdfDownloadBtn.disabled = true; try { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); pdf.setFontSize(18); pdf.setFont('helvetica', 'bold'); pdf.text('Machine Learning Model Training Report', 105, 15, { align: 'center' }); // Add Config pdf.setFontSize(14); pdf.text('1. Configuration', 15, 30); pdf.setFontSize(11); pdf.text(`- Dataset: ${datasets[datasetSelect.value].name}`, 20, 38); pdf.text(`- Model: ${models[datasets[datasetSelect.value].type][modelSelect.value].name}`, 20, 44); // Add Metrics const metricsCanvas = await html2canvas(metricsOutput); pdf.text('2. Performance Metrics', 15, 54); pdf.addImage(metricsCanvas.toDataURL('image/png'), 'PNG', 20, 60, 80, 0); // Add Chart const chartCanvas = await html2canvas(resultsChartCanvas); pdf.text('3. Result Visualization', 15, 100); pdf.addImage(chartCanvas.toDataURL('image/png'), 'PNG', 15, 106, 180, 0); pdf.save('ml-training-report.pdf'); } catch (error) { console.error(error); alert("Failed to generate PDF."); } finally { pdfLoader.classList.add('hidden'); pdfDownloadBtn.disabled = false; } } // --- EVENT LISTENERS --- datasetSelect.addEventListener('change', updateDatasetInfo); modelSelect.addEventListener('change', updateHyperparameters); trainBtn.addEventListener('click', handleTrain); pdfDownloadBtn.addEventListener('click', downloadPDF); document.getElementById('next-btn-1').addEventListener('click', () => switchTab(2)); document.getElementById('prev-btn-2').addEventListener('click', () => switchTab(1)); document.getElementById('next-btn-2').addEventListener('click', () => switchTab(3)); document.getElementById('prev-btn-3').addEventListener('click', () => switchTab(2)); // --- INITIALIZATION --- updateDatasetInfo(); });