add content in flow component
This commit is contained in:
Robin COuret
@@ -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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 49 KiB |
@@ -17,8 +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;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
main{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
6
user-interface/src/assets/fonts.css
Normal file
6
user-interface/src/assets/fonts.css
Normal 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
BIN
user-interface/src/assets/fonts/Exo-Black.ttf
Normal file
Binary file not shown.
37
user-interface/src/assets/global.css
Normal file
37
user-interface/src/assets/global.css
Normal 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
22
user-interface/src/assets/svg/a-b-2.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 585 B |
19
user-interface/src/assets/svg/check.svg
Normal file
19
user-interface/src/assets/svg/check.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 321 B |
22
user-interface/src/assets/svg/file-description.svg
Normal file
22
user-interface/src/assets/svg/file-description.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 476 B |
20
user-interface/src/assets/svg/file-import.svg
Normal file
20
user-interface/src/assets/svg/file-import.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 440 B |
19
user-interface/src/assets/svg/message-circle-star.svg
Normal file
19
user-interface/src/assets/svg/message-circle-star.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 734 B |
1
user-interface/src/assets/svg/neural-network.svg
Normal file
1
user-interface/src/assets/svg/neural-network.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
19
user-interface/src/assets/svg/question-mark.svg
Normal file
19
user-interface/src/assets/svg/question-mark.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 417 B |
@@ -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>
|
||||
@@ -44,12 +44,39 @@
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<!-- @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
|
||||
@@ -59,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>
|
||||
@@ -72,19 +99,47 @@
|
||||
</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>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { onBeforeMount, ref, watch } from "vue";
|
||||
|
||||
import type { Knowledge, Question, MetricCreate, Metric } from "@/types/types"
|
||||
import { BCollapse, BSlider } from "buefy";
|
||||
|
||||
import { useStepStore } from '@/stores/step'
|
||||
import { useItemStore } from '@/stores/item'
|
||||
@@ -79,10 +80,55 @@
|
||||
|
||||
<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" :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>
|
||||
@@ -99,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>
|
||||
@@ -27,15 +27,21 @@
|
||||
|
||||
<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>
|
||||
@@ -80,7 +80,13 @@
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="(kW, index) in knowledgesWorkflow" :key="index" class="list-element">
|
||||
<div class="list-element-index">
|
||||
@@ -115,11 +121,6 @@
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container{
|
||||
background-color: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 34px;
|
||||
}
|
||||
.list-element{
|
||||
margin-bottom: 8px;
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -21,5 +21,8 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 24px;
|
||||
height: 100%;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user