From 4cfe4642b210895fd704cccd4ab0791ad67ca99e Mon Sep 17 00:00:00 2001 From: Beryl Koller Date: Tue, 15 Mar 2022 15:33:49 +0100 Subject: [PATCH 1/5] designed callout box for restults --- frontend/src/components/Upload.vue | 50 ++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/Upload.vue b/frontend/src/components/Upload.vue index 223f93fc..7a6d99bd 100644 --- a/frontend/src/components/Upload.vue +++ b/frontend/src/components/Upload.vue @@ -65,17 +65,26 @@

Analyse...

+
+ Basegun est un outil d'aide à la décision. Il ne remplace en aucun cas l'avis d'un expert. +
-

{{ resultText }}

- Image téléversée +
+ Image téléversée +
+
+
+ +

Indice de fiabilité : {{ Math.floor(confidence) }}%

+
+

Type d'arme :

+

{{ label }}

+
-
- Basegun est un outil d'aide à la décision. Il ne remplace en aucun cas l'avis d'un expert. -
@@ -91,7 +100,9 @@ resultText: null, imgName: null, baseUrl: import.meta.env.BASE_URL, - labelButton: "Démarrer" + labelButton: "Démarrer", + label: null, + confidence: null } }, methods: { @@ -107,6 +118,8 @@ axios.post('/upload', fd) .then(res => { + this.label = res.data.label + this.confidence = res.data.confidence this.resultText = "Type d'arme : " + res.data.label + " " + res.data.confidence + "%" this.imgName = import.meta.env.BASE_URL + "temp/" + res.data.file_name.substring(res.data.file_name.lastIndexOf("/")+1) @@ -134,6 +147,9 @@ margin: 0 auto; max-width: 1000px; } + .result-image { + text-align: center; + } .result-text { background-color: #ececfe; padding: 20px 0; @@ -155,14 +171,28 @@ .accueil-subtitle { font-size: 14px; } - .warning-bottom { + .footer-background { position: fixed; top: 100%; left: 50%; transform: translate(-50%, -100%); - padding: 20px 10px; - text-align: center; background-color: #f5f5fe; width: 100%; } - + .footer-text { + padding: 20px 10px; + text-align: center; + } + .custom-tag { + color: #297254; + background-color: #9ef9be; + margin-left: 5px; + } + .callout-head { + display: flex; + align-items: center; + } + .custom-callout { + margin: 15px; + } + \ No newline at end of file From 864e64bbe3c737e6cfd9ea4770dcbc650dc6b69c Mon Sep 17 00:00:00 2001 From: Beryl Koller Date: Tue, 15 Mar 2022 15:54:03 +0100 Subject: [PATCH 2/5] added footer with actions --- frontend/src/components/Upload.vue | 38 +++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Upload.vue b/frontend/src/components/Upload.vue index 7a6d99bd..f22c561d 100644 --- a/frontend/src/components/Upload.vue +++ b/frontend/src/components/Upload.vue @@ -81,8 +81,16 @@

Type d'arme :

{{ label }}

-
- +
+
+
+ +

RECOMMENCER

+
+
+ +

A PROPOS

+
@@ -150,12 +158,6 @@ .result-image { text-align: center; } - .result-text { - background-color: #ececfe; - padding: 20px 0; - font-size: 24px; - font-weight: bold; - } .centered { position: fixed; top: 50%; @@ -193,6 +195,24 @@ align-items: center; } .custom-callout { - margin: 15px; + margin: 12px; + } + .footer-actions { + display: flex; + justify-content: space-around; + color: #000091 + } + .action-group { + text-align: center; + cursor: pointer; + margin: 8px 0 + } + .action-group-text { + font-size: 12px; + font-weight: bold; + margin: 0 + } + .blank { + height: 80px } \ No newline at end of file From 5c8146ea0e38cf302bfdea49f06f508ea5f8401a Mon Sep 17 00:00:00 2001 From: Beryl Koller Date: Wed, 16 Mar 2022 11:37:56 +0100 Subject: [PATCH 3/5] displaying results according to confidence rate --- frontend/src/components/Upload.vue | 37 +++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Upload.vue b/frontend/src/components/Upload.vue index f22c561d..0308e354 100644 --- a/frontend/src/components/Upload.vue +++ b/frontend/src/components/Upload.vue @@ -74,12 +74,27 @@ Image téléversée
-
- -

Indice de fiabilité : {{ Math.floor(confidence) }}%

+
+
+ +

Indice de fiabilité insuffisant

+
+

Nous n'avons pas suffisamment d'éléments pour fournir une réponse fiable. Nous vous conseillons de faire appel à un expert.

+
+
+
+
+ +

Indice de fiabilité : {{ Math.floor(confidence) }}%

+
+
+
+ +

Indice de fiabilité : {{ Math.floor(confidence) }}%

+
+

Type d'arme :

+

{{ label }}

-

Type d'arme :

-

{{ label }}

@@ -185,11 +200,21 @@ padding: 20px 10px; text-align: center; } - .custom-tag { + .success-tag { color: #297254; background-color: #9ef9be; margin-left: 5px; } + .error-tag { + color: #ce0500; + background-color: #ffe9e9; + margin-left: 5px; + } + .warning-tag { + color: #b34000; + background-color: #ffe8e5; + margin-left: 5px; + } .callout-head { display: flex; align-items: center; From 3ffe86cfd2e04c5650c0ec5801dce82d57aaad68 Mon Sep 17 00:00:00 2001 From: Beryl Koller Date: Wed, 16 Mar 2022 14:08:04 +0100 Subject: [PATCH 4/5] added user-friendly label + displays categories in the result section --- frontend/src/components/Upload.vue | 68 +++++++++++++++++++++++++++--- 1 file changed, 61 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Upload.vue b/frontend/src/components/Upload.vue index 0308e354..5a160344 100644 --- a/frontend/src/components/Upload.vue +++ b/frontend/src/components/Upload.vue @@ -74,7 +74,7 @@ Image téléversée
-
+

Indice de fiabilité insuffisant

@@ -91,9 +91,10 @@

Indice de fiabilité : {{ Math.floor(confidence) }}%

+

Nous vous conseillons de faire appel à un expert pour confirmer cette réponse.

-

Type d'arme :

-

{{ label }}

+

Catégorie {{ cleanCategory }}

+

Type d'arme : {{ cleanLabel }}

@@ -125,7 +126,57 @@ baseUrl: import.meta.env.BASE_URL, labelButton: "Démarrer", label: null, - confidence: null + confidence: null, + results: { + revolver: { + displayLabel: "revolver", + category: "B ou D" + }, + pistolet_semi_auto_moderne: { + displayLabel: "pistolet semi-automatique moderne", + category: "B" + }, + pistolet_a_percussion_silex: { + displayLabel: "pistolet à percussion ou à silex", + category: "D" + }, + autre_pistolet: { + displayLabel: "pistolet", + category: "B ou D" + }, + epaule_a_percussion_silex: { + displayLabel: "arme d'épaule à percussion ou à silex", + category: "D" + }, + epaule_a_un_coup: { + displayLabel: "arme d'épaule à un coup par canon", + category: "C" + }, + epaule_a_levier_sous_garde: { + displayLabel: "arme d'épaule à levier de sous-garde", + category: "B ou C" + }, + epaule_a_verrou: { + displayLabel: "arme d'épaule à verrou", + category: "B ou C" + }, + epaule_a_pompe: { + displayLabel: "arme d'épaule à pompe", + category: "B ou C" + }, + autre_epaule: { + displayLabel: "arme d'épaule non manuelle", + category: "A, B ou C" + } + } + } + }, + computed: { + cleanLabel() { + return this.results[`${this.label}`].displayLabel + }, + cleanCategory() { + return this.results[`${this.label}`].category } }, methods: { @@ -163,9 +214,6 @@