Gradient descent training + Added all dataset + graphs improvements

resources/js/components/LinkHeader.vue

@@ -11,9 +11,9 @@ const links = [
         data: { type: 'simple' },
     },
     {
-        name: 'Perceptron Complex',
+        name: 'Descente du gradient',
         href: '/perceptron',
-        data: { type: 'complex' },
+        data: { type: 'gradientdescent' },
     },
 ];
 

resources/js/components/PerceptronDecisionGraph.vue

@@ -7,7 +7,7 @@ import type {
 } from 'chart.js';
 import { computed } from 'vue';
 import { Chart } from 'vue-chartjs';
-import { colors } from '@/types/graphs';
+import { colors, gridColor, gridColorBold } from '@/types/graphs';
 import type { Iteration } from '@/types/perceptron';
 
 const props = defineProps<{
@@ -157,10 +157,28 @@ function getPerceptronDecisionBoundaryDataset(
                 x: {
                     type: 'linear',
                     position: 'bottom',
+                    grid: {
+                        color: function (context) {
+                            if (context.tick.value == 0) {
+                                return gridColorBold;
+                            } 
+
+                            return gridColor;
+                        },
+                    },
                 },
                 y: {
                     type: 'linear',
                     position: 'left',
+                    grid: {
+                        color: function (context) {
+                            if (context.tick.value == 0) {
+                                return gridColorBold;
+                            } 
+
+                            return gridColor;
+                        },
+                    },
                 },
             },
         }"

resources/js/components/PerceptronIterationsErrorsGraph.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ChartData } from 'chart.js';
 import { Bar } from 'vue-chartjs';
-import { colors } from '@/types/graphs';
+import { colors, gridColor, gridColorBold } from '@/types/graphs';
 import type { Iteration } from '@/types/perceptron';
 
 const props = defineProps<{
@@ -17,6 +17,7 @@ function getPerceptronErrorsPerIteration(): ChartData<
 >[] {
     const datasets: ChartData<'bar', (number | [number, number] | null)[]>[] =
         [];
+    const epochAverageError: number[] = [];
 
     const backgroundColors = colors;
 
@@ -27,6 +28,7 @@ function getPerceptronErrorsPerIteration(): ChartData<
             dataset = {
                 label: exampleLabel,
                 data: [],
+                order: 1,
                 backgroundColor:
                     backgroundColors[
                         iteration.exampleIndex % backgroundColors.length
@@ -35,6 +37,11 @@ function getPerceptronErrorsPerIteration(): ChartData<
             datasets.push(dataset);
         }
         dataset.data.push(iteration.error);
+
+        // Epoch error
+        epochAverageError[iteration.iteration - 1] =
+            (epochAverageError[iteration.iteration - 1] || 0) +
+            iteration.error ** 2 / 2;
     });
 
     // Sort dataset by label (Exemple 0, Exemple 1, ...)
@@ -44,6 +51,23 @@ function getPerceptronErrorsPerIteration(): ChartData<
         return aIndex - bIndex;
     });
 
+    // Epoch error
+    const epochErrorDataset = {
+        type: 'line',
+        label: "Erreur de l'époque",
+        data: [],
+        backgroundColor: '#fff',
+        borderColor: '#fff',
+        order: 0,
+        tension: 0.3,
+    };
+
+    epochAverageError.forEach((error) => {
+        epochErrorDataset.data.push(error);
+    });
+
+    datasets.push(epochErrorDataset);
+
     return datasets;
 }
 </script>
@@ -68,6 +92,15 @@ function getPerceptronErrorsPerIteration(): ChartData<
                 y: {
                     stacked: true,
                     beginAtZero: true,
+                    grid: {
+                        color: function (context) {
+                            if (context.tick.value == 0) {
+                                return gridColorBold;
+                            } 
+
+                            return gridColor;
+                        },
+                    },
                 },
             },
         }"

resources/js/components/PerceptronSetup.vue

@@ -73,10 +73,10 @@ function startTraining() {
         },
         credentials: 'same-origin',
         body: JSON.stringify({
-            type: 'simple',
+            type: props.type,
             dataset: selectedDatasetCopy.value,
             weight_init_method: selectedMethod.value,
-            min_error: 0.01,
+            min_error: minError.value,
             learning_rate: learningRate.value,
             session_id: props.sessionId,
             training_id: trainingId.value,

resources/js/pages/PerceptronViewer.vue

@@ -155,6 +155,8 @@ function getActivationFunction(type: string): (x: number) => number {
             return (x) => 1 / (1 + Math.exp(-x));
         case 'tanh':
             return (x) => Math.tanh(x);
+        case 'linear':
+            return (x) => x;
         default:
             return (x) => x; // Identity function as fallback
     }

resources/js/types/graphs.ts

@@ -32,3 +32,6 @@ export const colors = [
                             '#DC143C',
                             '#00FF00',
                         ] as const;
+
+export const gridColor = '#444';
+export const gridColorBold = '#999';