add prod config

server/requirements.txt

@@ -1,4 +1,6 @@
-fastapi==0.128.6
+# X86_V2 arch :
+# numpy<2.4.0
+fastapi[standard]==0.128.6
 sqlmodel==0.0.32
 python-dotenv==1.2.1
 openai==2.21.0
@@ -8,3 +10,5 @@ PyJWT>=2.11.0
 # python -m spacy download fr_core_news_sm
 argon2-cffi>=25.1.0
 pydantic-settings==2.13.1
+gunicorn==25.1.0
+mariadb==1.1.14

server/src/app/api/v1/__init__.py

@@ -3,8 +3,10 @@ from fastapi import APIRouter
 from .knowledges import router as knowledge_router
 from .metrics import router as metric_router
 from .auth import router as auth_router
+from .questions import router as question_router
 
 router = APIRouter(prefix="/v1")
 router.include_router(knowledge_router)
+router.include_router(question_router)
 router.include_router(metric_router)
 router.include_router(auth_router)

server/src/app/api/v1/knowledges.py

@@ -44,7 +44,7 @@ def generate_questions(id: int, current_user: Annotated[str, Depends(get_current
     )
     questions_raw = questions_generation(knowledge)
     for q in questions_raw:
-        question = Question(question = q, knowledge=knowledge)
+        question = Question(question = q, knowledge=knowledge, user=current_user)
         create_question(question)
     return questions_raw
 

server/src/app/api/v1/metrics.py

@@ -8,8 +8,8 @@ from src.app.auth.dependancies import get_current_user
 
 router = APIRouter(tags=["metrics"])
 
-@router.post("/metrics/")
-def create(metric_data: MetricCreate, current_user: Annotated[str, Depends(get_current_user)]):
-    metric: Metric = Metric(question_id = metric_data.question_id, need_index = metric_data.need_index, user = current_user)
-    created_metric: Metric = create_metric(metric)
-    return created_metric
+# @router.post("/metrics/")
+# def create(metric_data: MetricCreate, current_user: Annotated[str, Depends(get_current_user)]):
+#     metric: Metric = Metric(question_id = metric_data.question_id, need_index = metric_data.need_index, user = current_user)
+#     created_metric: Metric = create_metric(metric)
+#     return created_metric

server/src/app/api/v1/questions.py

@@ -0,0 +1,38 @@
+from typing import Annotated
+from fastapi import APIRouter, Depends, HTTPException, status
+
+from src.app.auth.dependancies import get_current_user
+
+from src.app.models.question import Question
+from src.app.models.metric import Metric, MetricCreate
+
+from src.app.data.question import get_question_by_id
+from src.app.data.metric import get_metrics, create_metric
+
+#Added in __ini__
+router = APIRouter(tags=["questions"])
+
+@router.get("/questions/{id}/metrics")
+def read_questions(id: int, current_user: Annotated[str, Depends(get_current_user)]):
+    question: Question = get_question_by_id(id, current_user)
+    if not question:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Forbidden. The requested knowledge is not available for the provided ID.",
+            headers={"WWW-Authenticate": "Bearer"},
+    )
+    metrics = get_metrics(question)
+    return metrics
+
+@router.post("/questions/{id}/metrics")
+def create(id: int, metric_data: MetricCreate, current_user: Annotated[str, Depends(get_current_user)]):
+    question: Question = get_question_by_id(id, current_user)
+    if not question:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail="Forbidden. The requested knowledge is not available for the provided ID.",
+            headers={"WWW-Authenticate": "Bearer"},
+    )
+    metric: Metric = Metric(question_id = id, need_index = metric_data.need_index, user = current_user)
+    created_metric: Metric = create_metric(metric)
+    return created_metric

server/src/app/auth/security.py

@@ -39,7 +39,7 @@ def verify_token(token: str, token_type: str = "access") -> Optional[dict]:
 
 def verify_beyond_user_limit() -> bool:
     users: Sequence[User] = get_users()
-    if (len(users) > settings.USER_LIMIT):
+    if (len(users) >= settings.USER_LIMIT):
         return True
     else:
         return False

server/src/app/data/question.py

@@ -1,13 +1,21 @@
 from sqlmodel import Session, select
 
 from src.app.models.question import Question
+from src.app.models.user import User
 from src.app.database import engine
 
-def get_question_by_id(question_id: int):
+def get_question_by_id(question_id: int, user: User):
     with Session(engine) as session:
-        question = session.get(Question, question_id)
+        statement = select(Question).where(Question.id == question_id, Question.user_id == user.id)
+        results = session.exec(statement)
+        question = results.first()
     return question
 
+# def get_question_by_id(question_id: int):
+#     with Session(engine) as session:
+#         question = session.get(Question, question_id)
+#     return question
+
 def get_questions(knowledge):
     with Session(engine) as session:
         statement = select(Question).where(Question.knowledge_id == knowledge.id)

server/src/app/models/metric.py

@@ -15,5 +15,4 @@ class Metric(SQLModel, table=True):
     user: User | None =  Relationship(back_populates="metrics")
 
 class MetricCreate(BaseModel):
-    question_id: int
     need_index: int

server/src/app/services/language_generation.py

@@ -14,7 +14,7 @@ nlp = spacy.load("fr_core_news_sm")
 def questions_generation(knowledge: Knowledge):
 
     context = "Texte : ```" + knowledge.content + "```"
-    instruction = "A partir du texte génère 3 questions :"
+    instruction = "A partir du texte génère 3 questions. Ces 3 questions vise à approfonfir (augmenter, intensifier, accroître, creuser) le texte. "
     prompt = context + "\n" + instruction
 
     #SLM processing

user-interface/.env

@@ -1 +1,3 @@
+# PROD
+# VITE_API_URL=http://127.0.0.1:8082/
 VITE_API_URL=http://127.0.0.1:8000/

user-interface/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Manolia</title>
   </head>
   <body>
     <div id="app"></div>

user-interface/src/App.vue

@@ -17,18 +17,17 @@ import AppTopbar from '@/components/AppTopbar.vue'
 
 <style>
 #app {
-  background-color: #FFF4EA;
   padding-inline: 5%;
-  height: 100vh;
-}
+  padding-top: 8px;
+  padding-bottom: 32px;
+  min-height: 100vh;
 
-/* main {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-
-@media screen and (min-width: 768px) {
-  #app {
-    height: 100vh;
+main{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
-} */
 </style>

user-interface/src/assets/fonts.css

@@ -0,0 +1,6 @@
+@font-face{
+    font-family:"Exo-Black";
+    src: local("Exo-Black"), url("./fonts/Exo-Black.ttf");
+    format: "truetype";
+    font-weight: black;
+}

user-interface/src/assets/global.css

@@ -0,0 +1,37 @@
+body{
+    background-color: #FFF4EA;
+    min-height: 100vh;
+}
+
+.container{
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 34px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.title-container{
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+    gap: 8px;
+
+    .title-icon{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 4px;
+        border-radius: 8px;
+        background-color: #ebebeb;
+        img{
+            width: 24px;
+            height: 24px;
+        }
+    }
+    h2 {
+        font-size: large;
+    }
+}

user-interface/src/assets/svg/a-b-2.svg

@@ -0,0 +1,22 @@
+<!--
+tags: [test, visual, user]
+version: "1.76"
+unicode: "f25f"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 21h3c.81 0 1.48 -.67 1.48 -1.48l.02 -.02c0 -.82 -.69 -1.5 -1.5 -1.5h-3v3z" />
+  <path d="M16 15h2.5c.84 -.01 1.5 .66 1.5 1.5s-.66 1.5 -1.5 1.5h-2.5v-3z" />
+  <path d="M4 9v-4c0 -1.036 .895 -2 2 -2s2 .964 2 2v4" />
+  <path d="M2.99 11.98a9 9 0 0 0 9 9m9 -9a9 9 0 0 0 -9 -9" />
+  <path d="M8 7h-4" />
+</svg>

user-interface/src/assets/svg/check.svg

@@ -0,0 +1,19 @@
+<!--
+category: System
+tags: [tick, "yes", confirm]
+version: "1.0"
+unicode: "ea5e"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 12l5 5l10 -10" />
+</svg>

user-interface/src/assets/svg/file-description.svg

@@ -0,0 +1,22 @@
+<!--
+tags: [text, paper, report, details, job]
+category: Document
+version: "1.55"
+unicode: "f028"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+  <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+  <path d="M9 17h6" />
+  <path d="M9 13h6" />
+</svg>

user-interface/src/assets/svg/file-import.svg

@@ -0,0 +1,20 @@
+<!--
+tags: [arrow, data, paper, document, format]
+category: Document
+version: "1.37"
+unicode: "edea"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+  <path d="M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3" />
+</svg>

user-interface/src/assets/svg/message-circle-star.svg

@@ -0,0 +1,19 @@
+<!--
+category: Communication
+version: "2.10"
+unicode: "f980"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10.517 19.869a9.757 9.757 0 0 1 -2.817 -.869l-4.7 1l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c1.666 1.421 2.594 3.29 2.747 5.21" />
+  <path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" />
+</svg>

user-interface/src/assets/svg/question-mark.svg

@@ -0,0 +1,19 @@
+<!--
+tags: [sign, symbol, ask, sentence, word, letters, "?"]
+version: "1.16"
+unicode: "ec9d"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#000000"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4" />
+  <path d="M12 19l0 .01" />
+</svg>

user-interface/src/components/AppTopbar.vue

@@ -1,29 +1,33 @@
+<script setup lang="ts">
+  import { BNavbar, BNavbarItem } from "buefy";
+</script>
+
 <template>
-    <div class="topbar-container">
-        <div class="logo-container">
+    <b-navbar class="navbar" shadow >
+      <template #brand>
+         <b-navbar-item tag="router-link" :to="{ path: '/' }" id="brand">
                     <img class="logo" src="../assets/svg/manolia-logo.svg" alt="Manolia logo" />
-            <span>MANOLIA</span>
-        </div>
-    </div>
+                    <h1 class="title">MANOLIA</h1>
+          </b-navbar-item>
+      </template>
+    </b-navbar>
 </template>
 
 <style scoped>
-.topbar-container {
+  .navbar{
+    border-radius: 16px;
+    margin-bottom: 24px;
     height: 4rem;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: left;
   }
-.logo-container {
-  width: 20rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
 
-  img {
-    width: 2rem;
+  #brand:hover, #brand:focus, #brand:active{
+    background-color: inherit;
   }
+
+  .title{
+    font-size: 1.5rem;
+    font-family: "Exo-Black";
   }
 
+
 </style>

user-interface/src/components/CollectKnowledge.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-    import { BField, BInput, BButton, useToast } from "buefy";
-    //import { apiClient } from "@/services/api";
-    import api from "@/services/apiAxios"
-    import type { AxiosResponse } from "axios";
-    import { ref } from "vue";
+    import { BField, BInput, BButton, useToast } from "buefy"
+    import api from "@/services/api"
+    import type { AxiosResponse } from "axios"
+    import { ref } from "vue"
 
-    import type { Knowledge, KnowledgeCreate } from "@/types/types";
+    import type { Knowledge, KnowledgeCreate } from "@/types/types"
     import { useStepStore } from '@/stores/step'
     import { useItemStore } from '@/stores/item'
 
@@ -45,12 +44,39 @@
 
 <template>
 <div class="container">
-    <h2>Collect Knowledge</h2>
-    <b-field label="Knowledge">
+    <div class="title-container">
+        <div class="title-icon">
+            <img src="../assets/svg/file-import.svg" alt="file import" />
+        </div>
+        <h2>Collecter une connaissance</h2>
+    </div>
+    <div class="body-container">
+        <div>
+            <ul class="list">
+                <li class="list-item">
+                    <span class="list-index">1</span>
+                    <p>Dans votre base de connaissances, identifiez un texte contenant de l'incertitude.</p>
+                </li>
+                <li class="list-item">
+                    <span class="list-index">2</span>
+                    <p>Selectionnez la partie du texte qui nécessite des précisions et copiez/coller vers le formulaire.</p>
+                </li>
+                <li class="list-item">
+                    <span class="list-index">3</span>
+                    <p>Selectionnez l'URI où se trouve la connaissance et copiez/coller vers le formulaire.</p>
+                </li>
+                <li class="list-item">
+                    <span class="list-index">4</span>
+                    <p>Partager via le formulaire.</p>
+                </li>
+            </ul>
+        </div>
+        <div class="form">
+            <b-field label="Connaissance">
             <!-- @vue-ignore -->
             <b-input
                 v-model="knowledgeModel"
-        placeholder="Knowledge is an awareness of facts, a familiarity with individuals and situations, or a practical skill."
+                placeholder="La connaissance est une notion aux sens multiples, à la fois utilisée dans le langage courant et objet d'étude poussée de la part des sciences cognitives et des philosophes contemporains."
                 maxlength="1200" 
                 type="textarea" 
                 required
@@ -60,7 +86,7 @@
                 <!-- @vue-ignore -->
                 <b-input 
                     v-model="uriModel" 
-            placeholder="en.wikipedia.org/wiki/Knowledge"
+                    placeholder="fr.wikipedia.org/wiki/Connaissance"
                     maxlength="100"
                     required
                 ></b-input>
@@ -68,24 +94,52 @@
             <div class="btn-container">
                 <b-field>
                 <div class="control">
-            <b-button type="is-primary" @click="postKnowledge" >Share</b-button>
+                    <b-button type="is-primary" @click="postKnowledge" >Partager</b-button>
                 </div>
                 </b-field>
             </div>
         </div>
+    </div>
+</div>
 
 </template>
 
 <style scoped>
-    .container{
-        background-color: #ffffff;
-        border-radius: 16px;
-        padding: 34px;
+    .body-container{
+        display: flex;
+        flex-direction: column;
+        gap: 48px;
     }
-
     .btn-container{
+        height: 100%;
         display: flex;
         justify-content: end;
     }
+    .list{
+        padding-left: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+    .list-item{
+        display: flex;
+        flex-direction: raw;
+        align-items: center;
+        gap: 8px;
+    }
+    .list-index{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 24px;
+        height: 24px;
+        border: 1px solid #D6D9E0;
+        border-radius: 4px;
+    }
+    .form{
+        border: 1px solid #D6D9E0;
+        padding: 24px;
+        border-radius: 16px;
+    }
 
 </style>

user-interface/src/components/EvaluateQuestion.vue

@@ -1,35 +1,44 @@
 <script setup lang="ts">
-    import { ref } from "vue";
-    import { onBeforeMount } from 'vue'
+    import { onBeforeMount, ref, watch } from "vue";
 
-    import type { Knowledge, Question, MetricCreate } from "@/types/types"
+    import type { Knowledge, Question, MetricCreate, Metric } from "@/types/types"
+    import { BCollapse, BSlider } from "buefy";
 
-    //import { useStepStore } from '@/stores/step'
+    import { useStepStore } from '@/stores/step'
     import { useItemStore } from '@/stores/item'
 
-    import api from "@/services/apiAxios"
+    import api from "@/services/api"
     import type { AxiosResponse } from "axios";
 
-    //const stepStore = useStepStore()
+    const stepStore = useStepStore()
     const itemStore = useItemStore()
 
     const questions = ref<Question[]>()
-    const metrics = ref<MetricCreate[]>([])
+    const metrics = ref<Metric[]>([])
 
     onBeforeMount(async () => {
-        if(itemStore.knowledge != undefined){
-            questions.value = await getQuestions(itemStore.knowledge)
-        }
-        else{
+        if(!itemStore.knowledge){
             throw new Error("There is no knowledge element in itemStore.");
         }
-        if(questions.value != undefined){
-            initializeMetrics(questions.value)
-        }
-        else{
+        questions.value = await getQuestions(itemStore.knowledge)
+
+        if(!questions.value){
             throw new Error("There is no questions element from API.");
         }
+        initializeMetrics(questions.value)
+    })
 
+    watch( () => itemStore.knowledge, async () =>{
+        metrics.value = []
+        if(!itemStore.knowledge){
+            throw new Error("There is no knowledge element in itemStore.");
+        }
+        questions.value = await getQuestions(itemStore.knowledge)
+
+        if(!questions.value){
+            throw new Error("There is no questions element from API.");
+        }
+        initializeMetrics(questions.value)
     })
 
     async function getQuestions(knowledge: Knowledge): Promise<Question[]>{
@@ -40,7 +49,7 @@
 
     function initializeMetrics(questions: Question[]){
         questions.forEach((q)=>{
-              const metric: MetricCreate = {
+              const metric: Metric = {
                 question_id: q.id!,
                 need_index: -1
             }
@@ -58,20 +67,68 @@
     }
 
     async function postMetrics(){
+        console.log( metrics.value)
         metrics.value?.forEach(async (metric) => {
-            const response = await api.post(`api/v1/metrics/`, metric)
+            const metricCreate: MetricCreate = { need_index: metric.need_index }
+            const response = await api.post(`api/v1/questions/${metric.question_id}/metrics`, metricCreate)
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const metric_data = response.data
         })
+        stepStore.nextStep()
     }
 </script>
 
 <template>
     <div class="container">
-        <h2>Evaluate Questions</h2>
-        <ul>
-            <li v-for="(question, index) in questions" :key="index">
-                <p>{{ question.question }}</p>
+        <div class="title-container">
+            <div class="title-icon">
+                <img src="../assets/svg/message-circle-star.svg" alt="evaluate icon" />
+            </div>
+            <h2>Evaluer les questions</h2>
+        </div>
+        <div>
+            <ul class="list">
+                <li class="list-item">
+                    <span class="list-index">1</span>
+                    <p>Un ensemble de questions a été généré à partir d'une connaissance que vous avez saisie (ci-dessous).</p>
+                </li>
+                <li class="list-item">
+                    <span class="list-index">2</span>
+                    <p>Mise en situation : si vous deviez vous adresser à une personne capable d'améliorer la connaissance incertaine, la question générée serait-elle pertinente ?</p>
+                </li>
+                <li class="list-item">
+                    <span class="list-index">3</span>
+                    <p>Evaluez de 0 à 100, pour chaque question, la pertinence de celle-ci.</p>
+                </li>
+            </ul>
+        </div>
+        <b-collapse class="card" animation="slide" aria-id="contentIdForA11y3">
+            <template #trigger="props">
+                <div
+                    class="card-header"
+                    role="button"
+                    aria-controls="contentIdForA11y3"
+                    :aria-expanded="props.open"
+                >
+                    <p class="card-header-title">Connaissance</p>
+                    <a class="card-header-icon">
+                        {{ props.open ? "▲" : "▼" }}
+                    </a>
+                </div>
+            </template>
+
+            <div class="card-content">
+                <div class="content">
+                    {{ itemStore.knowledge?.content }}
+                </div>
+            </div>
+        </b-collapse>
+        <ul class="question-list">
+            <li v-for="(question, index) in questions?.slice(0,3)" :key="index" class="question-list-item">
+                <div class="question">
+                    <img src="../assets/svg/question-mark.svg" alt="question-mark " />
+                    {{ question.question }}
+                </div>
                 <b-field>
                     <b-slider v-model="metrics![getIndexMetrics(question)]!.need_index"></b-slider>
                 </b-field>
@@ -80,7 +137,7 @@
         <div class="btn-container">
             <b-field>
             <div class="control">
-                <b-button type="is-primary" @click="postMetrics" >Share</b-button>
+                <b-button type="is-primary" @click="postMetrics" >Partager</b-button>
             </div>
             </b-field>
         </div>
@@ -88,13 +145,57 @@
 </template>
 
 <style scoped>
-    .container{
-        background-color: #ffffff;
-        border-radius: 16px;
-        padding: 34px;
-    }
     .btn-container{
             display: flex;
             justify-content: end;
         }
+    .list{
+        padding-left: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+    .list-item{
+        display: flex;
+        flex-direction: raw;
+        align-items: center;
+        gap: 8px;
+    }
+    .list-index{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 24px;
+        height: 24px;
+        border: 1px solid #D6D9E0;
+        border-radius: 4px;
+    }
+    .card-header{
+        box-shadow: none;
+    }
+    .card{
+        box-shadow: none;
+        border: 1px solid #D6D9E0;
+    }
+    .question-list{
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+    .question-list-item{
+        padding: 24px;
+        border: 1px solid #D6D9E0;
+        border-radius: 16px;
+    }
+    .question{
+        background-color: #ebebeb;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+        img{
+            border-right: 1px solid;
+        }
+    }
 </style>

user-interface/src/components/GenerateQuestion.vue

@@ -3,10 +3,12 @@
     import { BProgress } from "buefy";
     import type { Knowledge } from "@/types/types";
 
-    import api from "@/services/apiAxios";
+    import api from "@/services/api";
     import { useItemStore } from '@/stores/item'
     import { useStepStore } from '@/stores/step'
 
+    import { ProcessStep } from '@/services/knowledgeWorklow'
+
     const stepStore = useStepStore()
     const itemStore = useItemStore()
 
@@ -18,21 +20,28 @@
     
     async function generateQuestions (knowledge: Knowledge) {
         await api.post(`api/v1/knowledges/${knowledge.id}/questions`)
+        if(stepStore.indexStep == ProcessStep.WaitGeneration)
             stepStore.nextStep()
     }
 </script>
 
 <template>
     <div class="container">
-        <h2>Generation</h2>
+        <div class="title-container">
+            <div class="title-icon">
+                <img src="../assets/svg/a-b-2.svg" alt="generation icon" />
+            </div>
+            <h2>Génération de questions</h2>
+        </div>
+        <p>La génération par Small Language Model (SML) peut prendre plusieurs minutes, nous éxécutons le modèle sur CPU.</p>
+        <p>En attendant, vous pouvez ajouter des nouvelles connaissances.</p>
+        <div>
+                <img src="../assets/svg/neural-network.svg" alt="neural network" />
+            </div>
         <b-progress></b-progress>
     </div>
 </template>
 
 <style scoped>
-.container{
-    background-color: #ffffff;
-    border-radius: 16px;
-    padding: 34px;
-}
+
 </style>

user-interface/src/components/ReadKnowledges.vue

@@ -1,17 +1,149 @@
 <script setup lang="ts">
+    import { reactive, onMounted, onBeforeMount } from "vue"
+    import api from "@/services/api"
+    import { BButton } from "buefy"
+    import { identifyProcessStep, ProcessStep }from "@/services/knowledgeWorklow"
+    
+    import type { AxiosResponse } from "axios"
+    import type { Knowledge } from "@/types/types"
+
+    import { useStepStore } from '@/stores/step'
+    import { useItemStore } from '@/stores/item'
+
+    const stepStore = useStepStore()
+    const itemStore = useItemStore()
+
+    interface KnowledgesWorkflow {
+        knowledge: Knowledge,
+        processStep: ProcessStep,
+        isSelected: boolean
+    }
+
+    const knowledgesWorkflow = reactive<KnowledgesWorkflow[]>([])
+
+    async function getKnowledges(): Promise<Knowledge[]>{
+        const response: AxiosResponse<Knowledge[]> = await api.get("api/v1/knowledges/")
+        return response.data
+    }
+
+    function truncateString(str: string){
+        return (str.length <= 18) ? str : str.slice(0, 9) + "..." + str.slice(-9)
+    }
+    
+    async function initializeKnowledgeWorkflow(){
+        const knowledges: Knowledge[] = await getKnowledges()
+        knowledges.forEach(async (knowledge) => {
+            const kWorkflow: KnowledgesWorkflow = {
+                knowledge,
+                processStep: await identifyProcessStep(knowledge as Knowledge),
+                isSelected: false
+            }
+            knowledgesWorkflow.push(kWorkflow)
+        })
+    }
+
+    async function getKnowledgeWorkflow(){
+        if(knowledgesWorkflow.length == 0){
+            initializeKnowledgeWorkflow()
+        } else {
+            const knowledges: Knowledge[] = await getKnowledges()
+
+            knowledges.forEach(async (knowledge) => {
+                const kWorkflow: KnowledgesWorkflow = {
+                    knowledge,
+                    processStep: await identifyProcessStep(knowledge as Knowledge),
+                    isSelected: false
+                }
+
+                const indexKW = knowledgesWorkflow.findIndex((kW: KnowledgesWorkflow) => kW.knowledge.id === knowledge.id)
+                indexKW != -1 ? knowledgesWorkflow[indexKW] = kWorkflow : knowledgesWorkflow.push(kWorkflow)
+            })
+        }
+    }
+
+    onBeforeMount(() => getKnowledgeWorkflow())
+
+    onMounted(()=>{
+        setInterval(() => getKnowledgeWorkflow(), 10000)
+    })
+
+    function goToEvaluateQuestion(knowledge_data: Knowledge){
+        itemStore.$patch({ knowledge: knowledge_data })
+        stepStore.goToStep(ProcessStep.EvaluateQuestion)
+    }
+
+    function goToCollectKnowledge(){
+        stepStore.goToStep(ProcessStep.CollectKnowledge)
+    }
 
 </script>
 
 <template>
     <div class="container">
-    <h2>Knowledge</h2>
+        <div class="title-container">
+            <div class="title-icon">
+                <img src="../assets/svg/file-description.svg" alt="file description" />
+            </div>
+            <h2>Connaissances</h2>
+        </div>
+        
+        <ul>
+            <li v-for="(kW, index) in knowledgesWorkflow" :key="index" class="list-element">
+                <div class="list-element-index">
+                    {{ index + 1 }}
+                </div>
+                <div class="list-element-body">
+                    <span class="list-element-text">
+                        {{ truncateString(kW.knowledge.uri) }}
+                    </span>
+                    
+                    <!-- <b-button v-if="kW.processStep == ProcessStep.CollectKnowledge" type="is-primary" @click="goTo" >
+                        Collect
+                    </b-button> -->
+                    <b-button v-if="kW.processStep == ProcessStep.WaitGeneration" type="is-info is-light" loading >
+                        ...
+                    </b-button>
+                    <b-button v-if="kW.processStep == ProcessStep.EvaluateQuestion" type="is-warning" @click="goToEvaluateQuestion(kW.knowledge)" >
+                        Evaluer
+                    </b-button>
+                    <b-button v-if="kW.processStep == ProcessStep.ProcessDone" type="is-success is-light" disabled >
+                        Fait
+                    </b-button>
+                </div>
+            </li>
+            <li >
+                <b-button type="is-primary" outlined @click="goToCollectKnowledge()" >
+                        Ajouter une connaissance
+                </b-button>
+            </li>
+        </ul>
     </div>
 </template>
 
 <style scoped>
-.container{
-    background-color: #ffffff;
-    border-radius: 16px;
-    padding: 34px;
+    .list-element{
+        margin-bottom: 8px;
+
+        border: 1px solid #D6D9E0;
+        border-radius: 8px;
+
+        display: grid;
+        grid-template-columns: 40px 1fr;
+
+    }
+    .list-element-index{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-right: 1px solid #D6D9E0;
+    }
+    .list-element-body{
+        display: grid;
+        grid-template-columns: 66% 34%;
+    }
+    .list-element-text{
+        display: flex;
+        align-items: center;
+        padding-left: 12px;
     }
 </style>

user-interface/src/main.ts

@@ -6,6 +6,9 @@ import router from './router'
 
 import Buefy from "buefy";
 import "buefy/dist/css/buefy.css";
+import "@/assets/fonts.css"
+import "@/assets/global.css"
+
 
 const app = createApp(App)
 

user-interface/src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { isAuthenticated } from '@/services/apiAxios'
+import { isAuthenticated } from '@/services/api'
 
 const pagesWithoutGuard = ['login', 'app', 'register']
  
@@ -33,9 +33,10 @@ const router = createRouter({
   ],
 })
 
+// Guard system
 router.beforeEach(async (to, from) => {
   const isAuth = await isAuthenticated()
-  if (!isAuth && pagesWithoutGuard.includes(to.name!.toString())) {
+  if (!isAuth && !pagesWithoutGuard.includes(to.name!.toString())) {
     return { name: 'login' }
   }
 })

user-interface/src/services/api.ts

@@ -1,74 +1,45 @@
-class ApiClient {
-  private baseURL: string
-  private defaultHeaders: Record<string, string>
+import axios from "axios"
+import type { AxiosResponse } from "axios";
 
-  constructor(baseURL: string) {
-    this.baseURL = baseURL
-    this.defaultHeaders = {
-      'Content-Type': 'application/json',
+const api = axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+});
+
+api.interceptors.request.use((config) => {
+    const token = localStorage.getItem('access_token')
+    if (token){
+        config.headers.Authorization = `Bearer ${token}`
     }
+    return config
+})
+
+export const authAPI = {
+    register: (username: string, password: string)  => 
+        api.post(
+            '/api/v1/auth/register', 
+            { "username":username, "plain_password":password }
+        ),
+    login: (username: string, password: string) => 
+        api.post(
+            '/api/v1/auth/login',
+            new URLSearchParams({ username, password }),
+            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
+        ),
+    getMe: () => api.get('/api/v1/auth/me')
 }
 
-  private async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
-    const url = `${this.baseURL}${endpoint}`
-    const config: RequestInit = {
-      headers: { ...this.defaultHeaders, ...options.headers },
-      ...options,
-    }
-
-    let response
-
+export const isAuthenticated = async () => {
     try {
-      response = await fetch(url, config)
-    } catch (error) {
-      if (error instanceof Error) {
-        throw new HTTPError(`Network error: ${error.message}`)
+            const response: AxiosResponse = await authAPI.getMe()
+        if (response.status==200)
+            return true
+        else 
+            return false
     }
-      throw new HTTPError('Unknown network error')
+    catch{
+        return false
     }
     
-    if (response?.ok) {
-      return response.json()
 }
 
-    const errorData = await response.json().catch(() => ({}))
-    throw new HTTPError(
-      errorData.message || `HTTP ${response.status}: ${response.statusText}`,
-      response.status,
-      response,
-    )
-  }
-
-  /**
-   * HTTP Get
-   * @param endpoint
-   * @returns
-   */
-
-  async get<T>(endpoint: string): Promise<T> {
-    return this.request<T>(endpoint, { method: 'GET' })
-  }
-
-  /**
-   * HTTP Post
-   * @param endpoint
-   * @param data
-   * @returns
-   */
-  async post<T>(endpoint: string, data: unknown): Promise<T> {
-    return this.request<T>(endpoint, { method: 'POST', body: JSON.stringify(data) })
-  }
-}
-
-class HTTPError extends Error {
-  constructor(
-    message: string,
-    private status: number | null = null,
-    private reponse: Response | null = null,
-  ) {
-    super(message)
-    this.name = 'HTTPError'
-  }
-}
-
-export const apiClient = new ApiClient(import.meta.env.VITE_API_URL)
+export default api;

user-interface/src/services/apiAxios.ts

@@ -1,45 +0,0 @@
-import axios from "axios"
-import type { AxiosResponse } from "axios";
-
-const api = axios.create({
-    baseURL: import.meta.env.VITE_API_URL
-});
-
-api.interceptors.request.use((config) => {
-    const token = localStorage.getItem('access_token')
-    if (token){
-        config.headers.Authorization = `Bearer ${token}`
-    }
-    return config
-})
-
-export const authAPI = {
-    register: (username: string, password: string)  => 
-        api.post(
-            '/api/v1/auth/register', 
-            { "username":username, "plain_password":password }
-        ),
-    login: (username: string, password: string) => 
-        api.post(
-            '/api/v1/auth/login',
-            new URLSearchParams({ username, password }),
-            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
-        ),
-    getMe: () => api.get('/api/v1/auth/me')
-}
-
-export const isAuthenticated = async () => {
-    try {
-        const response: AxiosResponse = await authAPI.getMe()
-    if (response.status==200)
-        return true
-    else 
-        return false
-    }
-    catch{
-        return false
-    }
-    
-}
-
-export default api;

user-interface/src/services/knowledgeWorklow.ts

@@ -0,0 +1,54 @@
+import type { Knowledge, Metric, Question } from "@/types/types"
+import api from "@/services/api"
+import type { AxiosResponse } from "axios"
+
+const processFlow = ["CollectKnowledge", "GenerateQuestion", "EvaluateQuestion", "Done"]
+
+//From user action in worlfow
+export enum ProcessStep {
+    CollectKnowledge,
+    WaitGeneration,
+    EvaluateQuestion,
+    ProcessDone
+}
+
+export async function identifyProcessStep(knowledge: Knowledge | null): Promise<ProcessStep>{
+        if (knowledge == null)
+            return ProcessStep.CollectKnowledge
+
+        //Check questions exist
+        const apiGetQuestions: AxiosResponse<Question[]> = await api.get(
+            `api/v1/knowledges/${knowledge.id}/questions/`, 
+            {
+                validateStatus: function (status) {
+                    return status < 500
+                },
+            })
+        if (apiGetQuestions.status >= 400 && apiGetQuestions.status < 500)
+            return ProcessStep.WaitGeneration
+
+        const questions: Question[] = apiGetQuestions.data
+        if (questions.length == 0)
+            return ProcessStep.WaitGeneration
+        
+        //Check metrics exist
+        const apiGetMetrics: AxiosResponse<Metric[]> = await api.get(
+            `api/v1/questions/${questions[0]!.id}/metrics/`, 
+            {
+                validateStatus: function (status) {
+                    return status < 500
+                },
+            })
+        if (apiGetMetrics.status >= 400 && apiGetMetrics.status < 500)
+            return ProcessStep.EvaluateQuestion
+        
+        const metrics: Metric[] = apiGetMetrics.data
+        if (metrics.length == 0)
+            return ProcessStep.EvaluateQuestion
+
+        //Data is complete
+        return ProcessStep.ProcessDone
+    }
+    
+    
+    

user-interface/src/stores/step.ts

@@ -5,6 +5,8 @@ import CollectKnowledge from '@/components/CollectKnowledge.vue'
 import EvaluateQuestion from '@/components/EvaluateQuestion.vue'
 import GenerateQuestion from '@/components/GenerateQuestion.vue'
 
+import { ProcessStep } from '@/services/knowledgeWorklow'
+
 const steps: Component = [
   CollectKnowledge,
   GenerateQuestion,
@@ -17,8 +19,15 @@ export const useStepStore = defineStore('step', () => {
   const getCurrentComponent = computed(() => steps[indexStep.value])
 
   function nextStep() {
+    if(indexStep.value + 1 < steps.length)
       indexStep.value++
+    else
+      indexStep.value = 0
   }
 
-  return { steps, getCurrentComponent, nextStep }
+  function goToStep(processStep: ProcessStep){
+    indexStep.value = processStep
+  }
+
+  return { indexStep, steps, getCurrentComponent, nextStep, goToStep }
 })

user-interface/src/types/types.d.ts

@@ -18,9 +18,15 @@ interface Question {
     user: User
 }
 
-interface MetricCreate {
+interface Metric {
+    //id
     question_id: number,
     need_index: number
+    //user
+}
+
+interface MetricCreate {
+    need_index: number
 }
 
 interface User {
@@ -28,4 +34,4 @@ interface User {
     token: string
 }
 
-export type {KnowledgeCreate, Knowledge, Question, MetricCreate}
+export type {KnowledgeCreate, Knowledge, Question, MetricCreate, Metric}

user-interface/src/views/ExperimentView.vue

@@ -21,5 +21,8 @@
         display: grid;
         grid-template-columns: 1fr 3fr;
         gap: 24px;
+        height: 100%;
+
+        flex: 1;
     }
 </style>

user-interface/src/views/LoginView.vue

@@ -2,7 +2,7 @@
     import router from '@/router/index' 
     import { BField, BInput, BButton, useToast } from "buefy";
     import { ref } from "vue"
-    import { authAPI } from '@/services/apiAxios'
+    import { authAPI } from '@/services/api'
     
     const username = ref<string>("")
     const password = ref<string>("")
@@ -27,7 +27,7 @@
 </script>
 
 <template>
-    <div class="container">
+    <div class="container container-size">
             <b-field label="Username">
                 <!-- @vue-ignore -->
                 <b-input
@@ -51,10 +51,10 @@
 </template>
 
 <style scoped>
-.container{
-        width: 20%;
-        background-color: #ffffff;
-        border-radius: 16px;
-        padding: 34px;
+.container-size{
+        flex: none;
+        gap:0;
+        width: 20rem;
+        height: 20rem ;
     }
 </style>

user-interface/src/views/RegisterView.vue

@@ -2,7 +2,7 @@
     import router from '@/router/index' 
     import { BField, BInput, BButton, useToast } from "buefy";
     import { ref } from "vue"
-    import { authAPI } from '@/services/apiAxios'
+    import { authAPI } from '@/services/api'
     
     const username = ref<string>("")
     const password = ref<string>("")
@@ -30,7 +30,7 @@
 </script>
 
 <template>
-    <div class="container">
+    <div class="container container-size">
             <b-field label="Username">
                 <!-- @vue-ignore -->
                 <b-input
@@ -54,10 +54,10 @@
 </template>
 
 <style scoped>
-.container{
-        width: 20%;
-        background-color: #ffffff;
-        border-radius: 16px;
-        padding: 34px;
+.container-size{
+        flex: none;
+        gap:0;
+        width: 20rem;
+        height: 20rem ;
     }
 </style>