feat(about): adds info per corpus

Author: sandragjacinto

src/localisation/en.ts

@@ -170,6 +170,16 @@ export const en = {
     en: 'English'
   },
   landing: {
+    sourceNameTitle: 'Resource Name',
+    sourceUrlTitle: 'Resource Link',
+    sourceNumberTitle: 'Number of Documents',
+    sourcesTitle: 'About Our Resources',
+    sourcesDescription_1:
+      'WeLearn brings together open, reliable, and high-quality resources, all related to the Sustainable Development Goals (SDGs), drawn from the analysis of over 16 million online documents.',
+    sourcesDescription_2:
+      'Resources are selected based on three criteria: openness (open-access documents), reliability (recognized collections), and relevance, using a classification model that retains only content linked to one of the 17 SDGs.',
+    sourcesDescription_3: 'The table below shows the distribution of documents by source:',
+
     slogan: 'Sustainability Education Made Easy',
     description:
       'Explore resources, learn, and boost sustainability integration in your courses with AI.',

src/localisation/fr.ts

@@ -174,6 +174,16 @@ export const fr = {
     en: 'Anglais'
   },
   landing: {
+    sourceNameTitle: 'Nom de la resource',
+    sourceUrlTitle: 'Lien vers la resource',
+    sourceNumberTitle: 'Nombre de documents',
+    sourcesTitle: 'A propos de nos resources',
+    sourcesDescription_1:
+      'WeLearn rassemble des ressources ouvertes, fiables et de haute qualité, toutes liées aux Objectifs de développement durable (ODD), issues de l’analyse de plus de 16 millions de documents en ligne.',
+    sourcesDescription_2:
+      'Les ressources sont sélectionnées selon trois critères : l’ouverture (documents en libre accès), la fiabilité (collections reconnues) et la pertinence, grâce à un modèle de classification qui ne retient que les contenus liés à l’un des 17 ODD.',
+    sourcesDescription_3:
+      'Le tableau ci-dessous présente la répartition des documents par source :',
     slogan: 'L’éducation à la durabilité, facilitée',
     description:
       'Explorez des ressources, apprenez et renforcez l’intégration de la durabilité dans vos cours avec l’IA.',

src/stores/sources.ts

@@ -6,6 +6,7 @@ import i18n from '@/localisation/i18n';
 
 export const useSourcesStore = defineStore('sources', () => {
   const sourcesList = ref<ReducedCorpus[]>([]);
+  const infoPerCorpus: Ref<[]> = ref([]);
   async function getSourcesList() {
     if (sourcesList.value.length > 0) {
       return;
@@ -35,6 +36,19 @@ export const useSourcesStore = defineStore('sources', () => {
 
   const totalDocs: Ref<number> = ref(0);
 
+  const getInfoPerCorpus = async () => {
+    if (infoPerCorpus.value.length > 0) {
+      return;
+    }
+    try {
+      const response = await getAxios('/metric/nb_docs_info_per_corpus');
+      infoPerCorpus.value = response;
+    } catch {
+      console.error('unable to get info per corpus');
+      infoPerCorpus.value = [];
+    }
+  };
+
   const getNbDocsInBase = async () => {
     if (totalDocs.value > 0) {
       return;
@@ -43,5 +57,12 @@ export const useSourcesStore = defineStore('sources', () => {
     const flooredNb = Math.floor(response.nb_docs / 100) * 100;
     totalDocs.value = new Intl.NumberFormat(i18n.global.locale.value).format(flooredNb);
   };
-  return { totalDocs, getNbDocsInBase, getSourcesList, sourcesList };
+  return {
+    infoPerCorpus,
+    getInfoPerCorpus,
+    totalDocs,
+    getNbDocsInBase,
+    getSourcesList,
+    sourcesList
+  };
 });

src/views/AboutPage.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { useSourcesStore } from '@/stores/sources';
+import { onBeforeMount } from 'vue';
+import i18n from '@/localisation/i18n';
+
+const sourcesStore = useSourcesStore();
+
+onBeforeMount(() => {
+  sourcesStore.getInfoPerCorpus();
+});
+</script>
 <template>
   <div class="wrapper py-6">
     <div class="presentation is-flex is-fullwidth is-justify-content-center is-align-items-center">
@@ -8,14 +19,6 @@
         <p class="subtitle has-text-centered mt-4 mb-6">
           {{ $t('landing.description') }}
         </p>
-
-        <!-- <div class="is-flex mb-6 is-justify-content-space-around is-align-items-center"> -->
-        <!--   <p class="is-size-5 has-text-weight-semibold">+ 5 000 000 documents traités</p> -->
-        <!--   <p class="is-size-5 has-text-weight-semibold">+ {{ totalDocs }} documents retenus</p> -->
-        <!--   <p class="is-size-5 has-text-weight-semibold"> -->
-        <!--     À partir de{{ sourcesList.length }} corpus -->
-        <!--   </p> -->
-        <!-- </div> -->
       </div>
     </div>
 
@@ -36,6 +39,42 @@
       </p>
     </div>
 
+    <div class="section mt-6" v-if="sourcesStore?.infoPerCorpus?.length > 0">
+      <div class="description mx-auto">
+        <h1 class="subtitle has-text-weight-bold mb-2">{{ $t('landing.sourcesTitle') }} ></h1>
+        <p class="subtitle is-size-6">
+          {{ $t('landing.sourcesDescription_1') }}
+        </p>
+        <p class="subtitle is-size-6">
+          {{ $t('landing.sourcesDescription_2') }}
+        </p>
+        <p class="subtitle is-size-6 pb-2">
+          {{ $t('landing.sourcesDescription_3') }}
+        </p>
+        <div class="table-wrapper">
+          <table class="sources-table">
+            <thead>
+              <tr>
+                <th>{{ $t('landing.sourceNameTitle') }}</th>
+                <th>{{ $t('landing.sourceUrlTitle') }}</th>
+                <th class="qty-sources">{{ $t('landing.sourceNumberTitle') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="source in sourcesStore.infoPerCorpus" :key="source.corpus">
+                <td>{{ $t(`corpus.${source.corpus}`, source.corpus) }}</td>
+                <td>
+                  <a target="_blanc" :href="source.url">{{ source.url }}</a>
+                </td>
+                <td class="qty-sources">
+                  {{ new Intl.NumberFormat(i18n.global.locale.value).format(source.qty_in_qdrant) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
     <div class="section mt-6">
       <div class="is-flex is-fullwidth is-justify-content-space-evenly">
         <div class="description">
@@ -101,6 +140,24 @@
 </template>
 
 <style scoped>
+.sources-table {
+  width: 100%;
+}
+
+.sources-table th {
+  text-align: left;
+  padding-left: 0;
+}
+
+.sources-table td {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.sources-table .qty-sources {
+  text-align: right;
+}
+
 .wrapper {
   width: 100%;
 }