Refactor : Adding the Legend

app.py

@@ -1,5 +1,5 @@
 from flask import Flask, render_template,request, redirect,url_for, jsonify , session
-from helper_functions import predict_class , inference , predict , align_predictions_with_sentences , load_models , load_fr_models
+from helper_functions import predict_class ,predict_sentences_class, inference , predict , align_predictions_with_sentences , load_models , load_fr_models
 from helper_functions import predict_fr_class, fr_inference , align_fr_predictions_with_sentences , transcribe_speech
 import fitz  # PyMuPDF
 import os, shutil
@@ -85,10 +85,9 @@ def treatment():
         pdf_document.close()
         # Prepare data for the chart
         predicted_class , class_probabilities = predict_class([extracted_text] , global_model)
+        print(class_probabilities)
         # Process the transcribed text
-        inference_batch, sentences = inference(extracted_text)
-        predictions = predict(inference_batch, global_neptune)
-        sentences_prediction = align_predictions_with_sentences(sentences, predictions)
+        sentences_prediction = predict_sentences_class(extracted_text , global_model)
         chart_data = {
             'datasets': [{
                 'data': list(class_probabilities.values()),
@@ -204,9 +203,9 @@ def slu():
                 logging.debug(f"Transcribed text: {extracted_text}")
 
                 # Process the transcribed text
-                inference_batch, sentences = inference(extracted_text)
-                predictions = predict(inference_batch, global_neptune)
-                sentences_prediction = align_predictions_with_sentences(sentences, predictions)
+                ####inference_batch, sentences = inference(extracted_text)
+                ####predictions = predict(inference_batch, global_neptune)
+                sentences_prediction = predict_sentences_class(extracted_text , global_model)
                 predicted_class, class_probabilities = predict_class([extracted_text], global_model)
 
                 chart_data = {
@@ -263,7 +262,7 @@ def pdf_fr():
 
 @app.route('/pdf_fr/upload' , methods = ['POST'])
 def treatment_fr():
-    global global_fr_neptune
+    global global_fr_neptune , global_fr_model
     if request.method == 'POST' :
         # Récupérer le fichier PDF de la requête
         file = request.files['file']
@@ -293,9 +292,9 @@ def treatment_fr():
         # Fermer le fichier PDF
         pdf_document.close()
         # Process the text
-        inference_batch, sentences = fr_inference(extracted_text) 
-        predictions = predict(inference_batch, global_fr_neptune) 
-        sentences_prediction = align_fr_predictions_with_sentences(sentences, predictions)
+        ####inference_batch, sentences = fr_inference(extracted_text) 
+        ####predictions = predict(inference_batch, global_fr_neptune) 
+        sentences_prediction = predict_sentences_class(extracted_text , global_fr_model)
         # Prepare data for the chart
         predicted_class , class_probabilities = predict_fr_class([extracted_text] , global_fr_model)
         
@@ -309,7 +308,6 @@ def treatment_fr():
         }
         print(predict_class)
         print(chart_data)
-        print(sentences)
          # clear the uploads folder
         for filename in os.listdir(app.config['UPLOAD_FOLDER']):
             file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
@@ -384,9 +382,9 @@ def slu_fr():
                 logging.info(f"Transcribed text: {extracted_text}")
 
                 # Traiter le texte transcrit
-                inference_batch, sentences = fr_inference(extracted_text)
-                predictions = predict(inference_batch, global_fr_neptune)
-                sentences_prediction = align_fr_predictions_with_sentences(sentences, predictions)
+                ####inference_batch, sentences = fr_inference(extracted_text)
+                ####predictions = predict(inference_batch, global_fr_neptune)
+                sentences_prediction = predict_sentences_class(extracted_text , global_fr_model)
                 predicted_class, class_probabilities = predict_fr_class([extracted_text], global_fr_model)
 
                 chart_data = {

helper_functions.py

@@ -25,7 +25,7 @@ def load_models():
     print("Loading BERT model...")
     neptune = BERT()
     device = "cpu"
-    model_save_path = "Neptune/Neptune/model.pt"
+    model_save_path = "neptune_270_papers/neptune_270_papers/model.pt"
     neptune.load_state_dict(torch.load(model_save_path, map_location=torch.device('cpu')))
     neptune.to(device)
     
@@ -55,11 +55,11 @@ def load_fr_models():
     print("Loading Wav2Vec2 model for French...")
     wav2vec2_processor = Wav2Vec2Processor.from_pretrained("bhuang/asr-wav2vec2-french")
     wav2vec2_model = AutoModelForCTC.from_pretrained("bhuang/asr-wav2vec2-french").to(device)
-    return fr_model, fr_neptune, wav2vec2_processor, wav2vec2_model
+    return fr_model, fr_neptune, wav2vec2_processor, wav2vec2_model 
 
-fr_class_labels = {0: ('Physics', 'primary', '#478ce6'), 1: ('AI','cyan', '#0dcaf0'),
+fr_class_labels = {0: ('Physics', 'primary', '#5e7cc8'), 1: ('AI','cyan', '#0dcaf0'),
                    2: ('economies', 'warning' , '#f7c32e'), 3: ('environments','success' , '#0cbc87'), 
-                   4: ('sports', 'orange', '#fd7e14')}
+                   4: ('sports', 'orange', '#fd7e14')} 
 class_labels = {
     16: ('vehicles','info' , '#4f9ef8'),
     10: ('environments','success' , '#0cbc87'),
@@ -79,29 +79,106 @@ class_labels = {
     2: ('administration','pink', '#d63384'),
     7: ('biology' ,'cambridge' , '#88aa99')}
 
-def predict_class(text , model):
+def predict_class(text,model):
     # Tokenisation du texte
-    inputs = transform_list_of_texts(text, tokenizer, 510, 510, 1, 2550)
-    # Extraire le tenseur de la liste
-    input_ids_tensor = inputs["input_ids"][0]
-    attention_mask_tensor = inputs["attention_mask"][0]
+    inputs = transform_list_of_texts([text], tokenizer, 510, 510, 1, 2550)
+    
+    
+    # Initialiser une liste pour stocker les probabilités de chaque échantillon
+    all_probabilities = []
+    
     # Passage du texte à travers le modèle
+    model.eval()
     with torch.no_grad():
-        outputs = model(input_ids=input_ids_tensor, attention_mask=attention_mask_tensor)
-
-    # Application de la fonction softmax
-    probabilities = torch.softmax(outputs.logits, dim=1)[0]
-
+        for i, sample in enumerate(inputs['input_ids']):
+          for j in range(len(sample)):
+            input_ids_tensor = torch.tensor(sample[j], device=device).unsqueeze(0)
+            attention_mask_tensor = torch.tensor(inputs['attention_mask'][i][j], device=device).unsqueeze(0)
+            outputs = model(input_ids=input_ids_tensor, attention_mask=attention_mask_tensor)
+            
+            # Application de la fonction softmax
+            probabilities = torch.softmax(outputs.logits, dim=1)[0]
+            all_probabilities.append(probabilities)
+    
+    # Calculer la moyenne des probabilités si nous avons plusieurs échantillons
+    if len(all_probabilities) > 1:
+        mean_probabilities = torch.stack(all_probabilities).mean(dim=0)
+    else:
+        mean_probabilities = all_probabilities[0]
+    
     # Identification de la classe majoritaire
-    predicted_class_index = torch.argmax(probabilities).item()
+    predicted_class_index = torch.argmax(mean_probabilities).item()
     predicted_class = class_labels[predicted_class_index]
 
     # Créer un dictionnaire de pourcentages trié par probabilité
-    sorted_percentages = {class_labels[idx]: probabilities[idx].item() * 100 for idx in range(len(class_labels))}
+    sorted_percentages = {class_labels[idx]: mean_probabilities[idx].item() * 100 for idx in range(len(class_labels))}
+    print(sorted_percentages)
     sorted_percentages = dict(sorted(sorted_percentages.items(), key=lambda item: item[1], reverse=True))
 
     return predicted_class, sorted_percentages
 
+def predict_class_for_Neptune(text,model):
+    # Tokenize the text
+    encoded_text = transform_for_inference_text(text, tokenizer, 125, 125, 1, 2550)
+    batch, sentences = prepare_text(encoded_text)
+    
+    # Process the text through the model
+    model.eval()
+    all_probabilities = []
+    with torch.no_grad():
+        for sample in batch:
+            input_ids = torch.tensor(sample[0], device=device, dtype=torch.long).unsqueeze(0)
+            segment_ids = torch.tensor(sample[1], device=device, dtype=torch.long).unsqueeze(0)
+            masked_pos = torch.tensor(sample[2], device=device, dtype=torch.long).unsqueeze(0)
+            
+            _, _, logits_mclsf1, logits_mclsf2 = model(input_ids, segment_ids, masked_pos)
+            probabilities1 = torch.softmax(logits_mclsf1, dim=1)[0]
+            probabilities2 = torch.softmax(logits_mclsf2, dim=1)[0]
+            all_probabilities.extend([probabilities1, probabilities2])
+    
+    # Aggregate probabilities
+    aggregated_probabilities = torch.stack(all_probabilities).mean(dim=0)
+    
+    # Identify the majority class
+    predicted_class_index = torch.argmax(aggregated_probabilities).item()
+    predicted_class = class_labels[predicted_class_index]
+    
+    # Create a sorted dictionary of percentages
+    sorted_percentages = {class_labels[idx]: aggregated_probabilities[idx].item() * 100 for idx in range(len(class_labels))}
+    sorted_percentages = dict(sorted(sorted_percentages.items(), key=lambda item: item[1], reverse=True))
+    
+    return predicted_class, sorted_percentages
+
+def predict_sentences_class(text,model):
+    # Tokenisation du texte
+    inputs = transform_list_of_texts([text], tokenizer, 510, 510, 1, 2550)
+    aligned_predictions = {}
+    
+    # Passage du texte à travers le modèle
+    model.eval()
+    with torch.no_grad():
+        for i, sample in enumerate(inputs['input_ids']):
+            for j in range(len(sample)):
+                input_ids_tensor = sample[j].clone().detach().to(device).unsqueeze(0)
+                attention_mask_tensor = inputs['attention_mask'][i][j].clone().detach().to(device).unsqueeze(0)
+                
+                # Decode the sentence
+                sentence = tokenizer.decode(input_ids_tensor[0], skip_special_tokens=True)
+
+                # Passage du texte à travers le modèle
+                outputs = model(input_ids=input_ids_tensor, attention_mask=attention_mask_tensor)
+                
+                # Identification de la classe prédite
+                predicted_class_index = torch.argmax(outputs.logits, dim=1).item()
+                predicted_class = class_labels[predicted_class_index] # Get only the class name
+
+                # Ajouter la prédiction au dictionnaire
+                if sentence not in aligned_predictions:
+                    aligned_predictions[sentence] = predicted_class
+
+    return aligned_predictions
+
+
 def transform_list_of_texts(
     texts: list[str],
     tokenizer: PreTrainedTokenizerBase,

neptune_270_papers/neptune_270_papers/added_tokens.json

@@ -0,0 +1,3 @@
+{
+  "<MULT>": 30522
+}

neptune_270_papers/neptune_270_papers/model.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9bd3d3f2c5c88b820b8ed73cfe1bd889c4cdf399cd0a37514919186a6002571c
+size 269574874

neptune_270_papers/neptune_270_papers/special_tokens_map.json

@@ -0,0 +1,16 @@
+{
+  "additional_special_tokens": [
+    {
+      "content": "<MULT>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false
+    }
+  ],
+  "cls_token": "[CLS]",
+  "mask_token": "[MASK]",
+  "pad_token": "[PAD]",
+  "sep_token": "[SEP]",
+  "unk_token": "[UNK]"
+}

neptune_270_papers/neptune_270_papers/tokenizer_config.json

@@ -0,0 +1,66 @@
+{
+  "added_tokens_decoder": {
+    "0": {
+      "content": "[PAD]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "100": {
+      "content": "[UNK]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "101": {
+      "content": "[CLS]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "102": {
+      "content": "[SEP]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "103": {
+      "content": "[MASK]",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "30522": {
+      "content": "<MULT>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    }
+  },
+  "additional_special_tokens": [
+    "<MULT>"
+  ],
+  "clean_up_tokenization_spaces": true,
+  "cls_token": "[CLS]",
+  "do_lower_case": true,
+  "mask_token": "[MASK]",
+  "model_max_length": 512,
+  "pad_token": "[PAD]",
+  "sep_token": "[SEP]",
+  "strip_accents": null,
+  "tokenize_chinese_chars": true,
+  "tokenizer_class": "DistilBertTokenizer",
+  "unk_token": "[UNK]"
+}

neptune_270_papers/neptune_270_papers/unique_labels.json

@@ -0,0 +1 @@
+["Physics", "Societies", "admsci", "agriculture", "ai", "applsci", "asi", "biology", "economies", "energies", "environments", "make", "mathematics", "robotics", "sports", "technologies", "vehicles"]

static/css/style2.css

@@ -35,7 +35,7 @@
   --bs-gray-700: #495057;
   --bs-gray-800: #343a40;
   --bs-gray-900: #212529;
-  --bs-primary: #478ce6;
+  --bs-primary: #5e7cc8;
   --bs-secondary: #14191e;
   --bs-success: #0cbc87;
   --bs-info: #4f9ef8;
@@ -8849,7 +8849,7 @@ textarea.form-control-lg {
 
 .bg-primary {
   --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
+  background-color: var(--bs-primary) !important;
 }
 
 

static/js/pdf.js

@@ -7,7 +7,9 @@ const categoryResult = document.getElementById("category-result")
 const reset = document.getElementById("reset");
 const imagePreview = dropArea.querySelector("#image-preview");
 const currentClassProbabilitiesList = document.getElementById("class-probabilities");
+const currentClassProbabilitiesList_resultSection = document.getElementById("class-probabilities-result-section");
 const currentPredictedClass = document.getElementById('predicted-class')
+const currentPredictedClass_resultSection = document.getElementById('predicted-class-result-section')
 const sentencePredictions = document.getElementById('classifiedText')
 const staticDiv = document.getElementById("static");
 const dynamicDiv = document.getElementById("dynamic");
@@ -115,8 +117,10 @@ form.addEventListener("submit", (event) => {
       ocrResult.value = resultTextArea.value;
       const classProbabilitiesList = responseDOM.getElementById("class-probabilities");
       currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
+      currentClassProbabilitiesList_resultSection.innerHTML = classProbabilitiesList.innerHTML;
       const PredictedClass = responseDOM.getElementById("predicted-class")
       currentPredictedClass.innerHTML = PredictedClass.innerHTML;
+      currentPredictedClass_resultSection.innerHTML = PredictedClass.innerHTML;
       document.getElementById('transcribedText').innerHTML = responseDOM.getElementById('transcribedText').innerHTML;
       const sentencePredictionsResponse= responseDOM.getElementById('classifiedText').innerHTML;
       sentencePredictions.innerHTML = sentencePredictionsResponse;

static/js/pdf_fr.js

@@ -7,8 +7,9 @@ const categoryResult = document.getElementById("category-result")
 const reset = document.getElementById("reset");
 const imagePreview = dropArea.querySelector("#image-preview");
 const currentClassProbabilitiesList = document.getElementById("class-probabilities");
-const currentPredictedClass = document.getElementById('predicted-class')
-const sentencePredictions = document.getElementById('classifiedText')
+const currentClassProbabilitiesList_resultSection = document.getElementById("class-probabilities-result-section");
+const currentPredictedClass = document.getElementById('predicted-class');
+const sentencePredictions = document.getElementById('classifiedText');
 const staticDiv = document.getElementById("static");
 const dynamicDiv = document.getElementById("dynamic");
 const sentenceResultDiv = document.getElementById("dynamicResult");
@@ -115,6 +116,7 @@ form.addEventListener("submit", (event) => {
       ocrResult.value = resultTextArea.value;
       const classProbabilitiesList = responseDOM.getElementById("class-probabilities");
       currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
+      currentClassProbabilitiesList_resultSection.innerHTML = classProbabilitiesList.innerHTML;
       const PredictedClass = responseDOM.getElementById("predicted-class")
       currentPredictedClass.innerHTML = PredictedClass.innerHTML;
       document.getElementById('transcribedText').innerHTML = responseDOM.getElementById('transcribedText').innerHTML;

templates/pdf.html

@@ -139,11 +139,101 @@
 
         </div>
         <div class="row d-sm-flex justify-content-center mb-5">
-            <div class="col-11">
-                <div class="row d-none" id='dynamicResult'>
+            <div class="col-11 d-none" id="dynamicResult">
+                <div class="row " >
                     <h1 id="resultsHeading" class="text-center text-white-50">Results</h1>
-                    <div class="col-12">
-                        <div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                    <div class="col-4 " >
+                        <div class="nav flex-column position-sticky top-10 shadow-lg"
+                            style="background-color: #222424;">
+                            <div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                                <div class="card-body ">
+                                    <h4 class="card-title text-white">Text's Category</h4>
+                                    <div class="row d-flex">
+                                        <div class="col-sm-7 col-6">
+                                            <ul class="graphl-legend-rectangle" id="class-probabilities-result-section">
+                                                {% for class_label, probability in class_probabilities.items() %}
+                                                {% if loop.index <= 5 %} <li class="text-white-50">
+                                                    <span class="bg-{{ class_label[1] }}"></span>
+                                                    <div class="d-flex justify-content-center">
+                                                        {{ class_label[0] }}:
+                                                        <span class="text-white w-100">&nbsp;{{ "%.2f" % probability
+                                                            }}%</span>
+                                                    </div>
+                                                    </li>
+                                                    {% endif %}
+                                                    {% endfor %}
+                                            </ul>
+                                        </div>
+                                        <div class="col-sm-5 grid-margin col-6">
+                                            <canvas class="bestSellers" data-chart='{{ chart_data | tojson | safe }}'
+                                                id="bestSellers#"></canvas>
+                                        </div>
+                                    </div>
+                                    <div class="mb-lg-0 text-white-50">
+                                        la classe la plus dominante est <span class="fw-bolder text-white"
+                                            id="predicted-class-result-section">{{
+                                            predicted_class[0]
+                                            }}</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="card my-auto mt-3"
+                                style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                                <div class="card-body">
+                                    <h4 class="card-title text-white">Legend</h4>
+                                    <div class="row d-flex">
+                                        <div class="col-sm-6 col-6">
+                                            <ul class="graphl-legend-rectangle">
+                                                <li class="text-white-50"><span class="bg-info "></span>vehicles
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-success"></span>environments
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-danger"></span>energies
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-primary"></span>Physics
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-moss"></span>robotics
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-agri"></span>agriculture
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-yellow"></span>ML
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-warning"></span>economies
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-vanila"></span>technologies
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <div class="col-sm-6 col-6">
+                                            <ul class="graphl-legend-rectangle">
+
+                                                <li class="text-white-50"><span class="bg-coffe"></span>mathematics
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-orange "></span>sports
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-cyan"></span>AI
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-rosy"></span>Innovation
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-picton"></span>Science
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-purple"></span>Societies
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-pink"></span>administration
+                                                </li>
+                                                <li class="text-white-50"><span class="bg-cambridge"></span>biology
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="col-8">
+                        <div class="card " style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
                             <div class="card-body">
                                 <h5 class="card-title text-white mb-3">Transcribed and Classified Text</h5>
                                 <div id="transcribedText" class="text-white-50 mb-4"></div>
@@ -163,6 +253,7 @@
                             </div>
                         </div>
                     </div>
+
                 </div>
             </div>
 

templates/pdf_fr.html

@@ -46,11 +46,13 @@
                         <a class="nav-item nav-link " href="voice_fr">SLU</a>
                     </li>
                     <li class="nav-item dropdown">
-						<a class="nav-link" href="#" id="accounntMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">langue</a>
-						<ul class="dropdown-menu" aria-labelledby="accounntMenu">
-							<li> <a class="dropdown-item " href="pdf"><img src="../static/icons/English.svg" class="avatar avatar" style="height: 20px;" alt="French flag"> English</a> </li>
-						</ul>
-					</li>
+                        <a class="nav-link" href="#" id="accounntMenu" data-bs-toggle="dropdown" aria-haspopup="true"
+                            aria-expanded="false">langue</a>
+                        <ul class="dropdown-menu" aria-labelledby="accounntMenu">
+                            <li> <a class="dropdown-item " href="pdf"><img src="../static/icons/English.svg"
+                                        class="avatar avatar" style="height: 20px;" alt="French flag"> English</a> </li>
+                        </ul>
+                    </li>
                 </ul>
             </div>
             <!-- Main navbar END -->
@@ -85,12 +87,13 @@
                         <div class="col-12 d-flex justify-content-center">
                             <div class="col-sm-12 d-inline align-items-center" style="height: 175px; width: 260px;">
                                 <div class="flex-shrink-0 avatar avatar-lg  me-2 mb-3 mt-4">
-                                    <img class="avatar-img rounded-circle"
-                                        src="../static/icons/logo_header_128x128.png" alt=""> 
+                                    <img class="avatar-img rounded-circle" src="../static/icons/logo_header_128x128.png"
+                                        alt="">
                                 </div>
-                                <h5 class="card-title text-white-50">Obtenez plus d'informations sur votre pdf 📑📑.</h5>
+                                <h5 class="card-title text-white-50">Obtenez plus d'informations sur votre pdf 📑📑.
+                                </h5>
                             </div>
-                            
+
                         </div>
                     </div>
                     <div class="card-body d-none" id="dynamic">
@@ -133,13 +136,99 @@
                 </div>
 
                 <!-- Right sidebar END -->
-            </div> <!-- Row END -->    
+            </div> <!-- Row END -->
         </div>
         <div class="row d-sm-flex justify-content-center mb-5">
-            <div class="col-11">
-                <div class="row d-none" id='dynamicResult'>
+            <div class="col-11 d-none" id='dynamicResult'>
+                <div class="row" >
                     <h1 id="resultsHeading" class="text-center text-white-50">Results</h1>
-                    <div class="col-12">
+                    <div class="col-4">
+                        <div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                            <div class="card-body">
+                                <h4 class="card-title text-white">Catégorie du texte</h4>
+                                <div class="row d-flex">
+                                    <div class="col-sm-7 col-6">
+                                        <ul class="graphl-legend-rectangle" id="class-probabilities-result-section"> 
+                                            {% for class_label, probability in class_probabilities.items() %}
+                                            {% if loop.index <= 5 %} <li class="text-white-50">
+                                                <span class="bg-{{ class_label[1] }}"></span>
+                                                <div class="d-flex justify-content-center">
+                                                    {{ class_label[0] }}:
+                                                    <span class="text-white w-100">&nbsp;{{ "%.2f" % probability
+                                                        }}%</span>
+                                                </div>
+                                                </li>
+                                                {% endif %}
+                                                {% endfor %}
+                                        </ul>
+                                    </div>
+                                    <div class="col-sm-5 grid-margin col-6">
+                                        <canvas class="bestSellers" data-chart='{{ chart_data | tojson | safe }}'
+                                            id="bestSellers#"></canvas>
+                                    </div>
+                                </div>
+                                <div class="mb-lg-0 text-white-50">
+                                    la classe la plus dominante est <span class="fw-bolder text-white"
+                                        id="predicted-class">{{
+                                        predicted_class[0]
+                                        }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="card my-auto mt-3"
+                            style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                            <div class="card-body">
+                                <h4 class="card-title text-white">Légende</h4>
+                                <div class="row d-flex">
+                                    <div class="col-sm-6 col-6">
+                                        <ul class="graphl-legend-rectangle">
+                                            <li class="text-white-50"><span class="bg-info "></span>vehicles
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-success"></span>environments
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-danger"></span>energies
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-primary"></span>Physics
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-moss"></span>robotics
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-agri"></span>agriculture
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-yellow"></span>ML
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-warning"></span>economies
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-vanila"></span>technologies
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="col-sm-6 col-6">
+                                        <ul class="graphl-legend-rectangle">
+
+                                            <li class="text-white-50"><span class="bg-coffe"></span>mathematics
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-orange "></span>sports
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-cyan"></span>AI
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-rosy"></span>Innovation
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-picton"></span>Science
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-purple"></span>Societies
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-pink"></span>administration
+                                            </li>
+                                            <li class="text-white-50"><span class="bg-cambridge"></span>biology
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-8">
                         <div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
                             <div class="card-body">
                                 <h5 class="card-title text-white mb-3">Transcribed and Classified Text</h5>