Added Limited Epoch Event Buffer

for better frontend performance when using big  max epoch number

app/Http/Controllers/PerceptronController.php

@@ -8,6 +8,7 @@ use App\Models\SimpleBinaryPerceptronTraining;
 use App\Services\DataSetReader;
 use App\Services\ISynapticWeightsProvider;
 use App\Services\PerceptronIterationEventBuffer;
+use App\Services\PerceptronLimitedEpochEventBuffer;
 use App\Services\ZeroSynapticWeights;
 use Illuminate\Http\Request;
 
@@ -91,8 +92,15 @@ class PerceptronController extends Controller
                             case 'simple':
                                 $dataset['defaultLearningRate'] = 0.015;
                                 break;
+                            case 'gradientdescent':
+                                $dataset['defaultLearningRate'] = 0.001;
+                                $dataset['defaultMinError'] = 2.0;
+                                break;
                         }
                         break;
+                    case 'table_2_11':
+                        $dataset['defaultMinError'] = 1.0;
+                        break;
                 }
                 $datasets[] = $dataset;
             }
@@ -121,9 +129,14 @@ class PerceptronController extends Controller
             $synapticWeightsProvider = new ZeroSynapticWeights();
         }
 
+        $iterationEventBuffer = new PerceptronIterationEventBuffer($sessionId, $trainingId);
+        if ($maxIterations > config('perceptron.limited_broadcast_iterations')) {
+            $iterationsInterval = (int)($maxIterations / config('perceptron.limited_broadcast_iterations'));
+            $iterationEventBuffer = new PerceptronLimitedEpochEventBuffer($sessionId, $trainingId, $iterationsInterval);
+        }
+
         $dataSetReader = $this->getDataSetReader($dataSet);
 
-        $iterationEventBuffer = new PerceptronIterationEventBuffer($sessionId, $trainingId);
 
         $networkTraining = match ($perceptronType) {
             'simple' => new SimpleBinaryPerceptronTraining($dataSetReader, $learningRate, $maxIterations, $synapticWeightsProvider, $iterationEventBuffer, $sessionId, $trainingId),

app/Services/DataSetReader.php

@@ -51,6 +51,16 @@ class DataSetReader {
         return $randomLine;
     }
 
+    public function getNextLine(): array | null {
+        if (!isset($this->currentLines[0])) {
+            return null; // No more lines to read
+        }
+
+        $this->lastReadLineIndex = array_search($this->currentLines[0], $this->lines, true);
+        
+        return array_shift($this->currentLines);
+    }
+
     public function getInputSize(): int
     {
         return count($this->lines[0]) - 1; // Don't count the label

app/Services/IPerceptronIterationEventBuffer.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Services;
+
+interface IPerceptronIterationEventBuffer {
+
+    public function flush(): void ;
+
+    public function addIteration(int $iteration, int $exampleIndex, float $error, array $synaptic_weights): void ;
+}

app/Services/PerceptronIterationEventBuffer.php

@@ -2,15 +2,11 @@
 
 namespace App\Services;
 
-use Illuminate\Support\Facades\Log;
+class PerceptronIterationEventBuffer implements IPerceptronIterationEventBuffer {
-
-class PerceptronIterationEventBuffer {
     private $data;
     private int $nextSizeIncreaseThreshold;
     private int $underSizeIncreaseCount = 0;
 
-    private int $MAX_SIZE = 50;
-
     public function __construct(
         private string $sessionId,
         private string $trainingId,
@@ -26,9 +22,9 @@ class PerceptronIterationEventBuffer {
         $this->data = [];
     }
 
-    public function addIteration(int $iteration, int $exampleIndex, float $error, array $synaptic_weights): void {
+    public function addIteration(int $epoch, int $exampleIndex, float $error, array $synaptic_weights): void {
         $this->data[] = [
-            "iteration" => $iteration,
+            "epoch" => $epoch,
             "exampleIndex" => $exampleIndex,
             "error" => $error,
             "weights" => $synaptic_weights,
@@ -42,8 +38,8 @@ class PerceptronIterationEventBuffer {
             $this->flush();
             $this->nextSizeIncreaseThreshold *= $this->sizeIncreaseFactor;
 
-            if ($this->nextSizeIncreaseThreshold > $this->MAX_SIZE) {
+            if ($this->nextSizeIncreaseThreshold > config('perceptron.broadcast_iteration_size')) {
-                $this->nextSizeIncreaseThreshold = $this->MAX_SIZE; // Cap the threshold to the maximum size
+                $this->nextSizeIncreaseThreshold = config('perceptron.broadcast_iteration_size'); // Cap the threshold to the maximum size
             }
         }
     }

app/Services/PerceptronLimitedEpochEventBuffer.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Services;
+
+class PerceptronLimitedEpochEventBuffer implements IPerceptronIterationEventBuffer {
+    private array $data;
+    private int $underSizeIncreaseCount = 0;
+
+    public function __construct(
+        private string $sessionId,
+        private string $trainingId,
+        private int $epochInterval,
+        private int $sizeIncreaseStart = 10,
+    ) {
+        $this->data = [];
+    }
+
+    public function flush(): void {
+        event(new \App\Events\PerceptronTrainingIteration($this->data, $this->sessionId, $this->trainingId));
+        $this->data = [];
+    }
+
+    public function addIteration(int $epoch, int $exampleIndex, float $error, array $synaptic_weights): void {
+        $newData = [
+            "epoch" => $epoch,
+            "exampleIndex" => $exampleIndex,
+            "error" => $error,
+            "weights" => $synaptic_weights,
+        ];
+
+        if ($this->underSizeIncreaseCount <= $this->sizeIncreaseStart) { // Special case where we need to send each iteration separately
+            $this->underSizeIncreaseCount++;
+            $this->data[] = $newData;
+            $this->flush();
+            return;
+        }
+
+        $lastEpoch = $this->data[0]['epoch'] ?? null;
+        if ($this->data && $lastEpoch !== $epoch) { // Current Epoch has changed from the last one
+            if ($lastEpoch % $this->epochInterval === 0) { // The last epoch need to be sent
+                $this->flush(); // Flush all data from the previous epoch
+            }
+            else {
+                $this->data = [];
+            }
+
+            $lastEpoch = $epoch;
+        }
+        $this->data[] = $newData;
+    }
+}

config/perceptron.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /**
+     * Minimum number of iterations for which the broadcast of the training progress is allowed in full.
+     * Beyond this number of iterations, the broadcast will be splitted every x iterations,
+     * x is limited_broadcast_number
+     */
+   'limited_broadcast_iterations' => 200,
+
+   /**
+    * How much broadcasts is sent when in limmited broadcast mode
+    */
+   'limited_broadcast_number' => 200,
+
+   'broadcast_iteration_size' => 75,
+
+];

public/data_sets/logic_or.csv

@@ -0,0 +1,4 @@
+0, 0, -1
+0, 1, 1
+1, 0, 1
+1, 1, 1

resources/js/components/IterationTable.vue

@@ -15,14 +15,29 @@ const allWeightPerIteration: ComputedRef<number[][]> = computed(() => {
         return iteration.weights.flat(2);
     });
 });
+
+const rowBgDark = computed(() => {
+    let isEven = false;
+    return props.iterations.map((iteration, index, arr) => {
+        if (index > 0 && arr[index - 1].epoch !== iteration.epoch) {
+            isEven = !isEven;
+        }
+        return isEven;
+    });
+});
 </script>
 
 <template>
     <table class="table w-full border-collapse border border-gray-300">
         <tr class="text-left" v-if="props.iterations.length > 0">
-            <th>Itération</th>
+            <th>Époch</th>
             <th>Exemple</th>
-            <th v-for="(weight, index) in allWeightPerIteration[allWeightPerIteration.length - 1]" v-bind:key="index">
+            <th
+                v-for="(weight, index) in allWeightPerIteration[
+                    allWeightPerIteration.length - 1
+                ]"
+                v-bind:key="index"
+            >
                 X<sub>{{ index }}</sub>
             </th>
             <th>Erreur</th>
@@ -31,12 +46,15 @@ const allWeightPerIteration: ComputedRef<number[][]> = computed(() => {
             v-for="(iteration, index) in props.iterations"
             v-bind:key="index"
             :class="{
-                'bg-gray-900': iteration.iteration % 2 === 0,
+                'bg-gray-900': rowBgDark[index],
             }"
         >
-            <td>{{ iteration.iteration }}</td>
+            <td>{{ iteration.epoch }}</td>
             <td>{{ iteration.exampleIndex }}</td>
-            <td v-for="(weight, index) in allWeightPerIteration[index]" v-bind:key="index">
+            <td
+                v-for="(weight, index) in allWeightPerIteration[index]"
+                v-bind:key="index"
+            >
                 {{ weight.toFixed(2) }}
             </td>
             <td>{{ iteration.error.toFixed(2) }}</td>

resources/js/components/PerceptronDecisionGraph.vue

@@ -46,7 +46,7 @@ function getPerceptronDecisionBoundaryDataset(
         networkWeights[0].length == 1 &&
         networkWeights[0][0].length == 3
     ) { // Unique, 3 weights perceptron
-        const perceptronWeights = networkWeights[0][0]; // We take the unique
+        const perceptronWeights = networkWeights[0][0]; // We take the unique perceptron
 
         function perceptronLine(x: number): number {
             // w0 + w1*x + w2*y = 0 => y = -(w1/w2)*x - w0/w2
@@ -161,7 +161,7 @@ function getPerceptronDecisionBoundaryDataset(
                         color: function (context) {
                             if (context.tick.value == 0) {
                                 return gridColorBold;
-                            } 
+                            }
 
                             return gridColor;
                         },
@@ -174,7 +174,7 @@ function getPerceptronDecisionBoundaryDataset(
                         color: function (context) {
                             if (context.tick.value == 0) {
                                 return gridColorBold;
-                            } 
+                            }
 
                             return gridColor;
                         },

resources/js/components/PerceptronSetup.vue

@@ -47,11 +47,17 @@ watch(selectedDatasetCopy, (newvalue) => {
         (dataset) => dataset.label === newvalue
     ) || null;
 
-    let defaultLearningRate = props.defaultLearningRate;
+    // LearningRate
+    learningRate.value = props.defaultLearningRate;
     if (selectedDatasetCopy && selectedDatasetCopy.defaultLearningRate !== undefined) {
-        defaultLearningRate = selectedDatasetCopy.defaultLearningRate;
+        learningRate.value = selectedDatasetCopy.defaultLearningRate;
     }
-    learningRate.value = defaultLearningRate;
+    // MinError
+    minError.value = props.minError;
+    if (selectedDatasetCopy && selectedDatasetCopy.defaultMinError !== undefined) {
+        minError.value = selectedDatasetCopy.defaultMinError;
+    }
+    // MaxIterations
     maxIterations.value = props.defaultMaxIterations;
 })
 
@@ -196,7 +202,7 @@ watch(selectedDatasetCopy, (newValue) => {
                 <!-- MAX ITERATIONS -->
                 <FormField name="max_iterations">
                     <FormItem>
-                        <FormLabel>Nombre maximum d'itérations</FormLabel>
+                        <FormLabel>Nombre maximum d'epoch</FormLabel>
                         <FormControl>
                             <Input
                                 type="number"