robin.couret/manolia-alpha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add content in flow component

Browse Source
This commit is contained in:
Robin COuret
2026-03-08 19:00:10 +01:00
parent d1e5a6b0c7
commit e0bc69e98f
21 changed files with 413 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
user-interface/index.html
View File

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

BIN
user-interface/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 49 KiB

13
user-interface/src/App.vue
View File

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

6
user-interface/src/assets/fonts.css Normal file
View File

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

BIN
user-interface/src/assets/fonts/Exo-Black.ttf Normal file
View File

Binary file not shown.

37
user-interface/src/assets/global.css Normal file
View File

@@ -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;
}
}

22
user-interface/src/assets/svg/a-b-2.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

19
user-interface/src/assets/svg/check.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

22
user-interface/src/assets/svg/file-description.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 476 B

20
user-interface/src/assets/svg/file-import.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

19
user-interface/src/assets/svg/message-circle-star.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 734 B

1
user-interface/src/assets/svg/neural-network.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

19
user-interface/src/assets/svg/question-mark.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 417 B

44
user-interface/src/components/AppTopbar.vue
View File

@@ -1,29 +1,33 @@
<script setup lang="ts">
import { BNavbar, BNavbarItem } from "buefy";
</script>
<template> <template>
<div class="topbar-container"> <b-navbar class="navbar" shadow >
<div class="logo-container"> <template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }" id="brand">
<img class="logo" src="../assets/svg/manolia-logo.svg" alt="Manolia logo" /> <img class="logo" src="../assets/svg/manolia-logo.svg" alt="Manolia logo" />
<span>MANOLIA</span> <h1 class="title">MANOLIA</h1>
</div> </b-navbar-item>
</div> </template>
</b-navbar>
</template> </template>
<style scoped> <style scoped>
.topbar-container { .navbar{
border-radius: 16px;
margin-bottom: 24px;
height: 4rem; 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> </style>

71
user-interface/src/components/CollectKnowledge.vue
View File

@@ -44,12 +44,39 @@
<template> <template>
<div class="container"> <div class="container">
<h2>Ajouter une connaissance</h2> <div class="title-container">
<div class="title-icon">
<img src="../assets/svg/file-import.svg" alt="file import" />
</div>
<h2>Collecte de 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"> <b-field label="Connaissance">
<!-- @vue-ignore --> <!-- @vue-ignore -->
<b-input <b-input
v-model="knowledgeModel" 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" maxlength="1200"
type="textarea" type="textarea"
required required
@@ -59,7 +86,7 @@
<!-- @vue-ignore --> <!-- @vue-ignore -->
<b-input <b-input
v-model="uriModel" v-model="uriModel"
placeholder="en.wikipedia.org/wiki/Knowledge" placeholder="fr.wikipedia.org/wiki/Connaissance"
maxlength="100" maxlength="100"
required required
></b-input> ></b-input>
@@ -71,20 +98,48 @@
</div> </div>
</b-field> </b-field>
</div> </div>
</div>
</div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.container{ .body-container{
background-color: #ffffff; display: flex;
border-radius: 16px; flex-direction: column;
padding: 34px; gap: 48px;
} }
.btn-container{ .btn-container{
height: 100%;
display: flex; display: flex;
justify-content: end; 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> </style>

108
user-interface/src/components/EvaluateQuestion.vue
View File

@@ -2,6 +2,7 @@
import { onBeforeMount, ref, watch } from "vue"; import { onBeforeMount, ref, watch } from "vue";
import type { Knowledge, Question, MetricCreate, Metric } 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 { useItemStore } from '@/stores/item'
@@ -79,10 +80,55 @@
<template> <template>
<div class="container"> <div class="container">
<h2>Evaluate Questions</h2> <div class="title-container">
<ul> <div class="title-icon">
<li v-for="(question, index) in questions" :key="index"> <img src="../assets/svg/message-circle-star.svg" alt="evaluate icon" />
<p>{{ question.question }}</p> </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" :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-field>
<b-slider v-model="metrics![getIndexMetrics(question)]!.need_index"></b-slider> <b-slider v-model="metrics![getIndexMetrics(question)]!.need_index"></b-slider>
</b-field> </b-field>
@@ -99,13 +145,57 @@
</template> </template>
<style scoped> <style scoped>
.container{
background-color: #ffffff;
border-radius: 16px;
padding: 34px;
}
.btn-container{ .btn-container{
display: flex; display: flex;
justify-content: end; 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> </style>

18
user-interface/src/components/GenerateQuestion.vue
View File

@@ -27,15 +27,21 @@
<template> <template>
<div class="container"> <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> <b-progress></b-progress>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.container{
background-color: #ffffff;
border-radius: 16px;
padding: 34px;
}
</style> </style>

11
user-interface/src/components/ReadKnowledges.vue
View File

@@ -80,7 +80,13 @@
<template> <template>
<div class="container"> <div class="container">
<div class="title-container">
<div class="title-icon">
<img src="../assets/svg/file-description.svg" alt="file description" />
</div>
<h2>Connaissances</h2> <h2>Connaissances</h2>
</div>
<ul> <ul>
<li v-for="(kW, index) in knowledgesWorkflow" :key="index" class="list-element"> <li v-for="(kW, index) in knowledgesWorkflow" :key="index" class="list-element">
<div class="list-element-index"> <div class="list-element-index">
@@ -115,11 +121,6 @@
</template> </template>
<style scoped> <style scoped>
.container{
background-color: #ffffff;
border-radius: 16px;
padding: 34px;
}
.list-element{ .list-element{
margin-bottom: 8px; margin-bottom: 8px;

3
user-interface/src/main.ts
View File

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

3
user-interface/src/views/ExperimentView.vue
View File

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