85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import type { ComputedRef } from 'vue';
|
|
import type { Iteration } from '@/types/perceptron';
|
|
|
|
const props = defineProps<{
|
|
iterations: Iteration[];
|
|
trainingEnded: boolean;
|
|
trainingEndReason: string;
|
|
maxDisplayedWeights: number;
|
|
}>();
|
|
|
|
// All weight in a simple array
|
|
const allWeightPerIteration: ComputedRef<number[][]> = computed(() => {
|
|
return props.iterations.map((iteration) => {
|
|
// We flatten the weights
|
|
return iteration.weights
|
|
.flat(2)
|
|
.filter((weight): weight is number => weight !== null && Number.isFinite(weight));
|
|
});
|
|
});
|
|
|
|
const displayedWeights = computed(() => {
|
|
const weights = allWeightPerIteration.value.find((weights) => weights.length > 0) || [];
|
|
|
|
return weights.length <= props.maxDisplayedWeights ? weights : [];
|
|
});
|
|
|
|
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 class="sticky top-0 z-10 bg-background">Époch</th>
|
|
<th class="sticky top-0 z-10 bg-background">Exemple</th>
|
|
<th
|
|
v-for="(weight, index) in displayedWeights"
|
|
v-bind:key="index"
|
|
class="sticky top-0 z-10 bg-background"
|
|
>
|
|
X<sub>{{ index }}</sub>
|
|
</th>
|
|
<th class="sticky top-0 z-10 bg-background">Erreur</th>
|
|
</tr>
|
|
<tr
|
|
v-for="(iteration, index) in props.iterations"
|
|
v-bind:key="index"
|
|
:class="{
|
|
'bg-gray-300 dark:bg-gray-900': rowBgDark[index],
|
|
}"
|
|
>
|
|
<td>{{ iteration.epoch }}</td>
|
|
<td>{{ iteration.exampleIndex }}</td>
|
|
<template v-if="displayedWeights.length > 0">
|
|
<td
|
|
v-for="(weight, weightIndex) in allWeightPerIteration[index]"
|
|
v-bind:key="weightIndex"
|
|
>
|
|
{{ Number.isFinite(weight) ? weight.toFixed(2) : 'N/A' }}
|
|
</td>
|
|
</template>
|
|
<td>{{ iteration.error === null ? 'N/A' : iteration.error.toFixed(2) }}</td>
|
|
</tr>
|
|
|
|
<tr
|
|
v-if="props.trainingEnded"
|
|
class="bg-red-400 text-center dark:bg-red-900"
|
|
>
|
|
<td colspan="100%">
|
|
<strong>Entraînement terminé :</strong>
|
|
{{ props.trainingEndReason }}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|