Revert "Fix reverb host"

This reverts commit 24b2d29a41.

public/helptext/intro.md

@@ -4,7 +4,7 @@ Cet outil vous permet d'expérimenter avec les réseaux de neurones et les perce
 
 ## Contexte
 
-Ce projet a été d'abord créé pour un cours de réseaux de neurones artificiels que j'ai suivi durant mon master en Architecture des Systèmes Informatiques à la Haute École de la Province de Liège.  Il s'agit ici d'une version plus conviviale, documentée et optimisée. Cependant le projet n'est pas très mobile friendly et je conseille l'utilisation d'un écran horizontal. 📵
+Ce projet a été d'abord créé pour un cours de réseaux de neurones artificiels que j'ai suivi durant mon master en Architecture des Systèmes Informatiques à la Haute École de la Province de Liège.  Il s'agit ici d'une version plus conviviale, documentée et optimisée.
 
 Je conseille de finir de lire les prochains chapitres qui traitent des bases des réseaux de neurones et qui présentent l'interface. Je conseille ensuite d'utiliser les onglets au-dessus de la page dans l'ordre indiqué. Chaque onglet présente une évolution des réseaux de neurones dans l'ordre chronologique des découvertes et des améliorations faites.
 

resources/js/components/PerceptronDecisionGraph.vue

@@ -332,7 +332,7 @@ function getPerceptronDecisionBoundaryDataset(
 <template>
     <Chart
         v-if="props.cleanedDataset.length > 0 || props.iterations.length > 0"
-        class="flex bg-primary dark:bg-transparent!"
+        class="w-full flex bg-primary dark:bg-transparent!"
         type="scatter"
         :options="{
             responsive: true,

resources/js/components/PerceptronIterationsErrorsGraph.vue

@@ -92,7 +92,7 @@ const datasets = computed<ErrorDataset[]>(() => {
 <template>
     <Chart
         type="bar"
-        class="bg-primary dark:bg-transparent!"
+        class="w-full bg-primary dark:bg-transparent!"
         :options="{
             responsive: true,
             maintainAspectRatio: true,

resources/js/pages/Home.vue

@@ -1,17 +1,81 @@
 <script lang="ts" setup>
 import { Head } from '@inertiajs/vue3';
+import { onMounted, ref } from 'vue';
 import HelpText from '@/components/HelpText.vue';
 import LinkHeader from '@/components/LinkHeader.vue';
+
+const icons = {
+    'matthiasgdev.png': {
+        href: 'https://abcd.matthiasg.dev/q/portfolio',
+        alt: 'Portfolio',
+    },
+    'gitea.png': {
+        href: 'https://git.matthiasg.dev/Ninluc/perceptron-viewer',
+        alt: 'Dépôt Git',
+    },
+};
+const iconsFolder: string = '/img/footerIcons/';
+const iconHtml = ref<Record<string, string>>({});
+
+onMounted(async () => {
+    try {
+        const svgEntries = await Promise.all(
+            Object.keys(icons)
+                .filter((icon) => icon.endsWith('.svg'))
+                .map(async (icon) => {
+                    const response = await fetch(`${iconsFolder}${icon}`);
+
+                    if (!response.ok) {
+                        throw new Error(`Failed to load ${icon}`);
+                    }
+
+                    return [icon, await response.text()] as const;
+                }),
+        );
+
+        iconHtml.value = Object.fromEntries(svgEntries);
+    } catch (error) {
+        console.error('Could not load footer icons:', error);
+    }
+});
 </script>
 
 <template>
     <Head title="Perceptron Viewer"></Head>
     <main class="flex min-h-dvh flex-col gap-6 pb-6">
         <LinkHeader class="w-full my-0! py-6 sticky top-0 z-10 bg-background" />
+
         <div
             class="flex flex-col items-center gap-6 rounded-lg p-6 shadow sm:p-8"
         >
             <HelpText markdownFileName="intro" class="max-w-[90ch]" />
         </div>
+
+        <hr />
+
+        <footer class="p-10 flex flex-col gap-6">
+            <p class="text-center text-muted-foreground">
+                Autres liens :
+            </p>
+
+            <div class="flex flex-wrap justify-center align-center gap-10">
+                <a
+                    v-for="(iconData, icon) in icons"
+                    :key="icon"
+                    :href="iconData.href"
+                    :aria-label="iconData.alt"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="min-h-full flex flex-col  justify-between items-center gap-2 transition hover:scale-110"
+                >
+                    <img
+                        :src="iconsFolder + icon"
+                        :alt="iconData.alt"
+                        class="contain-size w-20 transition brightness-200 hover:brightness-100 hover:saturate-100 hover:opacity-70"
+                    />
+                    <p>{{ iconData.alt }}</p>
+                </a>
+            </div>
+        </footer>
     </main>
 </template>

resources/js/pages/PerceptronViewer.vue

@@ -256,10 +256,10 @@ watch([iterations, trainingEnded], async () => {
             @update:training-id="setTrainingId"
         />
         <div
-            class="align-items-start justify-content-center grid max-w-dvw grid-cols-2"
+            class="align-items-start justify-content-center grid min-w-0 max-w-dvw grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(36rem,1fr))]"
             v-if="selectedDatasetName || iterations.length > 0"
         >
-            <div class="pt-3 h-dvh max-h-dvh min-h-0 w-full min-w-0">
+            <div class="order-2 pt-3 xl:h-dvh h-[50dvh] max-h-dvh min-h-0 w-full min-w-0 xl:order-0">
                 <ScrollArea ref="iterationScrollArea" :keep-bottom="true" type="scroll" class="relative h-full max-h-full min-h-0 w-full">
                     <IterationTable
                         :iterations="iterations"
@@ -305,7 +305,7 @@ watch([iterations, trainingEnded], async () => {
                     </template>
                 </ScrollArea>
             </div>
-            <div class="h-full w-full min-w-0 space-y-6">
+            <div class="order-1 h-full w-full min-w-0 space-y-6 md:order-0">
                 <div>
                     <PerceptronDecisionGraph
                         :cleanedDataset="cleanedDataset"