adding French

Camembert/Camembert/label_encoder.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0298d9049295e4472f832099653bec067850fb84c8e19f84aa994a7124d5cf4e
+size 187

Camembert/Camembert/saved_model/config.json

@@ -0,0 +1,43 @@
+{
+  "_name_or_path": "camembert-base",
+  "architectures": [
+    "CamembertForSequenceClassification"
+  ],
+  "attention_probs_dropout_prob": 0.1,
+  "bos_token_id": 5,
+  "classifier_dropout": null,
+  "eos_token_id": 6,
+  "hidden_act": "gelu",
+  "hidden_dropout_prob": 0.1,
+  "hidden_size": 768,
+  "id2label": {
+    "0": "LABEL_0",
+    "1": "LABEL_1",
+    "2": "LABEL_2",
+    "3": "LABEL_3",
+    "4": "LABEL_4"
+  },
+  "initializer_range": 0.02,
+  "intermediate_size": 3072,
+  "label2id": {
+    "LABEL_0": 0,
+    "LABEL_1": 1,
+    "LABEL_2": 2,
+    "LABEL_3": 3,
+    "LABEL_4": 4
+  },
+  "layer_norm_eps": 1e-05,
+  "max_position_embeddings": 514,
+  "model_type": "camembert",
+  "num_attention_heads": 12,
+  "num_hidden_layers": 12,
+  "output_past": true,
+  "pad_token_id": 1,
+  "position_embedding_type": "absolute",
+  "problem_type": "single_label_classification",
+  "torch_dtype": "float32",
+  "transformers_version": "4.41.2",
+  "type_vocab_size": 1,
+  "use_cache": true,
+  "vocab_size": 32005
+}

Camembert/Camembert/saved_model/model.safetensors

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

Camembert/Camembert/saved_tokenizer/added_tokens.json

@@ -0,0 +1,3 @@
+{
+  "<unk>NOTUSED": 32005
+}

Camembert/Camembert/saved_tokenizer/sentencepiece.bpe.model

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:988bc5a00281c6d210a5d34bd143d0363741a432fefe741bf71e61b1869d4314
+size 810912

Camembert/Camembert/saved_tokenizer/special_tokens_map.json

@@ -0,0 +1,20 @@
+{
+  "additional_special_tokens": [
+    "<s>NOTUSED",
+    "</s>NOTUSED",
+    "<unk>NOTUSED"
+  ],
+  "bos_token": "<s>",
+  "cls_token": "<s>",
+  "eos_token": "</s>",
+  "mask_token": {
+    "content": "<mask>",
+    "lstrip": true,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "pad_token": "<pad>",
+  "sep_token": "</s>",
+  "unk_token": "<unk>"
+}

Camembert/Camembert/saved_tokenizer/tokenizer_config.json

@@ -0,0 +1,83 @@
+{
+  "added_tokens_decoder": {
+    "0": {
+      "content": "<s>NOTUSED",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "1": {
+      "content": "<pad>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "2": {
+      "content": "</s>NOTUSED",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "4": {
+      "content": "<unk>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "5": {
+      "content": "<s>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "6": {
+      "content": "</s>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "32004": {
+      "content": "<mask>",
+      "lstrip": true,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "32005": {
+      "content": "<unk>NOTUSED",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    }
+  },
+  "additional_special_tokens": [
+    "<s>NOTUSED",
+    "</s>NOTUSED",
+    "<unk>NOTUSED"
+  ],
+  "bos_token": "<s>",
+  "clean_up_tokenization_spaces": true,
+  "cls_token": "<s>",
+  "eos_token": "</s>",
+  "mask_token": "<mask>",
+  "model_max_length": 512,
+  "pad_token": "<pad>",
+  "sep_token": "</s>",
+  "tokenizer_class": "CamembertTokenizer",
+  "unk_token": "<unk>"
+}

FrModel.py

@@ -0,0 +1,159 @@
+
+import torch
+import torch.nn as nn
+import numpy as np
+from transformers import  AutoTokenizer
+import pickle
+
+fr_tokenizer = AutoTokenizer.from_pretrained("camembert-base")
+
+# FRENCH Tokenizer
+fr_tokenizer.add_special_tokens({'additional_special_tokens': ['<MULT>']})
+fr_mult_token_id = fr_tokenizer.convert_tokens_to_ids('<MULT>')
+fr_cls_token_id = fr_tokenizer.cls_token_id
+fr_sep_token_id = fr_tokenizer.sep_token_id
+fr_pad_token_id = fr_tokenizer.pad_token_id
+
+## Voice Part functions
+maxlen = 255 # maximum of length
+batch_size = 32
+max_pred = 5  # max tokens of prediction
+n_layers = 6 # number of Encoder of Encoder Layer
+n_heads = 12 # number of heads in Multi-Head Attention
+d_model = 768 # Embedding Size
+d_ff = 768 * 4  # 4*d_model, FeedForward dimension
+d_k = d_v = 64  # dimension of K(=Q), V
+n_segments = 2
+fr_vocab_size = fr_tokenizer.vocab_size +2
+
+def get_attn_pad_mask(seq_q, seq_k):
+    batch_size, len_q = seq_q.size()
+    batch_size, len_k = seq_k.size()
+    # eq(zero) is PAD token
+    pad_attn_mask = seq_k.data.eq(1).unsqueeze(1)  # batch_size x 1 x len_k(=len_q), one is masking
+    return pad_attn_mask.expand(batch_size, len_q, len_k) # batch_size x len_q x len_k
+
+class Embedding(nn.Module):
+    def __init__(self):
+        super(Embedding, self).__init__()
+        self.tok_embed = nn.Embedding(fr_vocab_size, d_model)  # token embedding
+        self.pos_embed = nn.Embedding(maxlen, d_model)  # position embedding
+        self.seg_embed = nn.Embedding(n_segments, d_model)  # segment(token type) embedding
+        self.norm = nn.LayerNorm(d_model)
+
+    def forward(self, x, seg):
+        seq_len = x.size(1)
+        pos = torch.arange(seq_len, dtype=torch.long, device=x.device)
+        pos = pos.unsqueeze(0).expand_as(x)  # (seq_len,) -> (batch_size, seq_len)
+        embedding = self.tok_embed(x)
+        embedding += self.pos_embed(pos)
+        embedding += self.seg_embed(seg)
+        return self.norm(embedding)
+
+class ScaledDotProductAttention(nn.Module):
+    def __init__(self):
+        super(ScaledDotProductAttention, self).__init__()
+
+    def forward(self, Q, K, V, attn_mask):
+        scores = torch.matmul(Q, K.transpose(-1, -2)) / np.sqrt(d_k) # scores : [batch_size x n_heads x len_q(=len_k) x len_k(=len_q)]
+        scores.masked_fill_(attn_mask, -1e9) # Fills elements of self tensor with value where mask is one.
+        attn = nn.Softmax(dim=-1)(scores)
+        context = torch.matmul(attn, V)
+        return scores , context, attn
+
+class MultiHeadAttention(nn.Module):
+    def __init__(self):
+        super(MultiHeadAttention, self).__init__()
+        self.W_Q = nn.Linear(d_model, d_k * n_heads)
+        self.W_K = nn.Linear(d_model, d_k * n_heads)
+        self.W_V = nn.Linear(d_model, d_v * n_heads)
+        self.fc = nn.Linear(n_heads * d_v, d_model)
+        self.norm = nn.LayerNorm(d_model)
+    def forward(self, Q, K, V, attn_mask):
+        # q: [batch_size x len_q x d_model], k: [batch_size x len_k x d_model], v: [batch_size x len_k x d_model]
+        residual, batch_size = Q, Q.size(0)
+        device = Q.device
+        Q, K, V = Q.to(device), K.to(device), V.to(device)
+        # (B, S, D) -proj-> (B, S, D) -split-> (B, S, H, W) -trans-> (B, H, S, W)
+        q_s = self.W_Q(Q).view(batch_size, -1, n_heads, d_k).transpose(1,2)  # q_s: [batch_size x n_heads x len_q x d_k]
+        k_s = self.W_K(K).view(batch_size, -1, n_heads, d_k).transpose(1,2)  # k_s: [batch_size x n_heads x len_k x d_k]
+        v_s = self.W_V(V).view(batch_size, -1, n_heads, d_v).transpose(1,2)  # v_s: [batch_size x n_heads x len_k x d_v]
+
+        attn_mask = attn_mask.unsqueeze(1).repeat(1, n_heads, 1, 1) # attn_mask : [batch_size x n_heads x len_q x len_k]
+
+        # context: [batch_size x n_heads x len_q x d_v], attn: [batch_size x n_heads x len_q(=len_k) x len_k(=len_q)]
+        scores ,context, attn = ScaledDotProductAttention()(q_s, k_s, v_s, attn_mask)
+        context = context.transpose(1, 2).contiguous().view(batch_size, -1, n_heads * d_v) # context: [batch_size x len_q x n_heads * d_v]
+        output = self.fc(context)
+        return self.norm(output + residual), attn # output: [batch_size x len_q x d_model]
+
+class PoswiseFeedForwardNet(nn.Module):
+    def __init__(self):
+        super(PoswiseFeedForwardNet, self).__init__()
+        self.fc1 = nn.Linear(d_model, d_ff)
+        self.fc2 = nn.Linear(d_ff, d_model)
+        self.gelu = nn.GELU()
+    def forward(self, x):
+        # (batch_size, len_seq, d_model) -> (batch_size, len_seq, d_ff) -> (batch_size, len_seq, d_model)
+        return self.fc2(self.gelu(self.fc1(x)))
+
+class EncoderLayer(nn.Module):
+    def __init__(self):
+        super(EncoderLayer, self).__init__()
+        self.enc_self_attn = MultiHeadAttention()
+        self.pos_ffn = PoswiseFeedForwardNet()
+
+    def forward(self, enc_inputs, enc_self_attn_mask):
+        enc_outputs, attn = self.enc_self_attn(enc_inputs, enc_inputs, enc_inputs, enc_self_attn_mask.to(enc_inputs.device)) # enc_inputs to same Q,K,V
+        enc_outputs = self.pos_ffn(enc_outputs) # enc_outputs: [batch_size x len_q x d_model]
+        return enc_outputs, attn
+
+class FR_BERT(nn.Module):
+    def __init__(self):
+        super(FR_BERT, self).__init__()
+        self.embedding = Embedding()
+        self.layers = nn.ModuleList([EncoderLayer() for _ in range(n_layers)])
+        self.fc = nn.Linear(d_model, d_model)
+        self.activ1 = nn.Tanh()
+        self.linear = nn.Linear(d_model, d_model)
+        self.activ2 = nn.GELU()
+        self.norm = nn.LayerNorm(d_model)
+        self.classifier = nn.Linear(d_model, 2)
+        # decoder is shared with embedding layer
+        embed_weight = self.embedding.tok_embed.weight
+        n_vocab, n_dim = embed_weight.size()
+        self.decoder = nn.Linear(n_dim, n_vocab, bias=False)
+        self.decoder.weight = embed_weight
+        self.decoder_bias = nn.Parameter(torch.zeros(n_vocab))
+        self.mclassifier = nn.Linear(d_model, 17)
+
+    def forward(self, input_ids, segment_ids, masked_pos):
+        output = self.embedding(input_ids, segment_ids)
+        enc_self_attn_mask = get_attn_pad_mask(input_ids, input_ids).to(output.device)
+        for layer in self.layers:
+            output, enc_self_attn = layer(output, enc_self_attn_mask)
+        # output : [batch_size, len, d_model], attn : [batch_size, n_heads, d_mode, d_model]
+        # it will be decided by first token(CLS)
+        h_pooled = self.activ1(self.fc(output[:, 0])) # [batch_size, d_model]
+        logits_clsf = self.classifier(h_pooled) # [batch_size, 2]
+
+        masked_pos = masked_pos[:, :, None].expand(-1, -1, output.size(-1)) # [batch_size, max_pred, d_model]
+        # get masked position from final output of transformer.
+        h_masked = torch.gather(output, 1, masked_pos) # masking position [batch_size, max_pred, d_model]
+        h_masked = self.norm(self.activ2(self.linear(h_masked)))
+        logits_lm = self.decoder(h_masked) + self.decoder_bias # [batch_size, max_pred, n_vocab]
+
+        h_mult_sent1 = self.activ1(self.fc(output[:, 1]))
+        logits_mclsf1 = self.mclassifier(h_mult_sent1)
+
+        mult2_token_id = fr_mult_token_id  # Assuming mult_token_id is defined globally
+        mult2_positions = (input_ids == mult2_token_id).nonzero(as_tuple=False)  # Find positions of [MULT2] tokens
+        # Ensure there are exactly two [MULT] tokens in each input sequence
+        assert mult2_positions.size(0) == 2 * input_ids.size(0)
+        mult2_positions = mult2_positions[1::2][:, 1]
+        # Gather the hidden states corresponding to the second [MULT] token
+        h_mult_sent2 = output[torch.arange(output.size(0)), mult2_positions]
+
+        logits_mclsf2 = self.mclassifier(h_mult_sent2)
+        logits_mclsf2 = self.mclassifier(h_mult_sent2)
+        return logits_lm, logits_clsf , logits_mclsf1 , logits_mclsf2

Model.py

@@ -2,7 +2,7 @@
 import torch
 import torch.nn as nn
 import numpy as np
-from transformers import  AutoTokenizer 
+from transformers import  AutoTokenizer
 import pickle
 
 # Load the tokenizer

app.py

@@ -1,5 +1,6 @@
 from flask import Flask, render_template,request, redirect,url_for, jsonify , session
-from helper_functions import predict_class , prepare_text , inference , predict , align_predictions_with_sentences , load_models
+from helper_functions import predict_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 
 import fitz  # PyMuPDF
 import os, shutil
 import torch
@@ -13,13 +14,21 @@ app.config['UPLOAD_FOLDER'] = 'static/uploads'
 # Global variables for models
 global_model = None
 global_neptune = None
-global_tokenizer = None
 global_pipe = None
+global_fr_model = None
+global_fr_neptune = None
+global_fr_pipe = None
+
+
   
 def init_app():
     global global_model, global_neptune, global_pipe
-    print("Loading models...")
+    print("Loading English models...")
     global_model, global_neptune, global_pipe = load_models()
+    
+    global global_fr_model, global_fr_neptune, global_fr_pipe
+    print("Loading French models...")
+    global_fr_model , global_fr_neptune , global_fr_pipe = load_fr_models()
     print("Models loaded successfully!")
 
 init_app()
@@ -36,11 +45,12 @@ def pdf():
     predict_class = ""
     class_probabilities = dict()
     chart_data = dict()
-    return render_template('pdf.html', class_probabilities= class_probabilities, predicted_class=predict_class,chart_data = chart_data)
+    sentences_prediction = dict()
+    return render_template('pdf.html', class_probabilities= class_probabilities, predicted_class=predict_class,chart_data = chart_data,sentences_prediction=sentences_prediction)
 
 @app.route('/pdf/upload' , methods = ['POST'])
 def treatment():
-    global global_model, global_tokenizer
+    global global_model , global_neptune
     if request.method == 'POST' :
         # Récupérer le fichier PDF de la requête
         file = request.files['file']
@@ -71,6 +81,10 @@ def treatment():
         pdf_document.close()
         # Prepare data for the chart
         predicted_class , class_probabilities = predict_class([extracted_text] , global_model)
+        # Process the transcribed text
+        inference_batch, sentences = inference(extracted_text)
+        predictions = predict(inference_batch, global_neptune)
+        sentences_prediction = align_predictions_with_sentences(sentences, predictions)
         chart_data = {
             'datasets': [{
                 'data': list(class_probabilities.values()),
@@ -81,6 +95,7 @@ def treatment():
         }
         print(predict_class)
         print(chart_data)
+        print(sentences_prediction)
          # clear the uploads folder
         for filename in os.listdir(app.config['UPLOAD_FOLDER']):
             file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
@@ -91,14 +106,14 @@ def treatment():
                     shutil.rmtree(file_path)
             except Exception as e:
                 print('Failed to delete %s. Reason: %s' % (file_path, e))
-        return render_template('pdf.html',extracted_text = extracted_text, class_probabilities=class_probabilities, predicted_class=predicted_class, chart_data = chart_data)
+        return render_template('pdf.html',extracted_text = extracted_text, class_probabilities=class_probabilities, predicted_class=predicted_class, chart_data = chart_data,sentences_prediction=sentences_prediction)
     return render_template('pdf.html')
 
 ## Sentence
 
 @app.route('/sentence' , methods = ['GET' , 'POST'])
 def sentence():
-    global global_model, global_tokenizer
+    global global_model
     if request.method == 'POST':
         # Get the form data
         text = [request.form['text']]
@@ -113,16 +128,6 @@ def sentence():
             'labels': [label[0] for label in class_probabilities.keys()]
         }
         print(chart_data)
-         # clear the uploads folder
-        for filename in os.listdir(app.config['UPLOAD_FOLDER']):
-            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-            try:
-                if os.path.isfile(file_path) or os.path.islink(file_path):
-                    os.unlink(file_path)
-                elif os.path.isdir(file_path):
-                    shutil.rmtree(file_path)
-            except Exception as e:
-                print('Failed to delete %s. Reason: %s' % (file_path, e))
         return render_template('response_sentence.html', text=text, class_probabilities=class_probabilities, predicted_class=predicted_class,chart_data = chart_data)
 
     # Render the initial form page
@@ -244,5 +249,171 @@ def slu():
                            chart_data={}, 
                            sentences_prediction={})
 
+## French Pages 
+@app.route('/pdf_fr')
+def pdf_fr():
+    predict_class = ""
+    class_probabilities = dict()
+    chart_data = dict()
+    return render_template('pdf_fr.html', class_probabilities= class_probabilities, predicted_class=predict_class,chart_data = chart_data)
+
+@app.route('/pdf_fr/upload' , methods = ['POST'])
+def treatment_fr():
+    global global_fr_neptune
+    if request.method == 'POST' :
+        # Récupérer le fichier PDF de la requête
+        file = request.files['file']
+        filename = file.filename
+
+        # Enregistrer le fichier dans le répertoire de téléchargement
+        filepath = app.config['UPLOAD_FOLDER'] + "/" + filename
+        file.save(filepath)
+
+        # Ouvrir le fichier PDF
+        pdf_document = fitz.open(filepath)
+
+        # Initialiser une variable pour stocker le texte extrait
+        extracted_text = ""
+
+        # Boucler à travers chaque page pour extraire le texte
+        for page_num in range(len(pdf_document)):
+            # Récupérer l'objet de la page
+            page = pdf_document.load_page(page_num)
+
+            # Extraire le texte de la page
+            page_text = page.get_text()
+
+            # Ajouter le texte de la page à la variable d'extraction
+            extracted_text += f"\nPage {page_num + 1}:\n{page_text}"
+
+        # 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)
+        # Prepare data for the chart
+        predicted_class , class_probabilities = predict_fr_class([extracted_text] , global_fr_model)
+        
+        chart_data = {
+            'datasets': [{
+                'data': list(class_probabilities.values()),
+                'backgroundColor': [color[2] for color in class_probabilities.keys()],
+                'borderColor': [color[2] for color in class_probabilities.keys()]
+            }],
+            'labels': [label[0] for label in class_probabilities.keys()]
+        }
+        print(predict_class)
+        print(chart_data)
+         # clear the uploads folder
+        for filename in os.listdir(app.config['UPLOAD_FOLDER']):
+            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            try:
+                if os.path.isfile(file_path) or os.path.islink(file_path):
+                    os.unlink(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+            except Exception as e:
+                print('Failed to delete %s. Reason: %s' % (file_path, e))
+        return render_template('pdf_fr.html',extracted_text = extracted_text, class_probabilities=class_probabilities, predicted_class=predicted_class, chart_data = chart_data, sentences_prediction=sentences_prediction)
+    return render_template('pdf_fr.html')
+
+@app.route('/sentence_fr' , methods = ['GET' , 'POST'])
+def sentence_fr():
+    global global_fr_model
+    if request.method == 'POST':
+        # Get the form data
+        text = [request.form['text']]
+        predicted_class , class_probabilities = predict_fr_class(text , global_fr_model)
+        # Prepare data for the chart
+        chart_data = {
+            'datasets': [{
+                'data': list(class_probabilities.values()),
+                'backgroundColor': [color[2 ] for color in class_probabilities.keys()],
+                'borderColor': [color[2] for color in class_probabilities.keys()]
+            }],
+            'labels': [label[0] for label in class_probabilities.keys()]
+        }
+        print(predicted_class)
+        print(chart_data)
+        return render_template('response_fr_sentence.html', text=text, class_probabilities=class_probabilities, predicted_class=predicted_class,chart_data = chart_data)
+
+    # Render the initial form page
+    return render_template('sentence_fr.html')
+
+@app.route("/voice_fr", methods=['GET', 'POST'])
+def slu_fr():
+    global global_fr_neptune, global_fr_pipe, global_fr_model
+
+    if request.method == 'POST':
+        logging.debug("Received POST request")
+        audio_file = request.files.get('audio')
+
+        if audio_file:
+            logging.debug(f"Received audio file: {audio_file.filename}")
+            
+            # Save audio data to a temporary file
+            with tempfile.NamedTemporaryFile(delete=False, suffix='.wav') as temp_audio:
+                audio_file.save(temp_audio)
+                temp_audio_path = temp_audio.name
+
+            logging.debug(f"Saved audio to temporary file: {temp_audio_path}")
+
+            try:
+                # Transcribe audio using Whisper
+                result = global_fr_pipe(temp_audio_path)
+                extracted_text = result["text"]
+                logging.debug(f"Transcribed text: {extracted_text}")
+
+                # Process the transcribed text
+                inference_batch, sentences = fr_inference(extracted_text)
+                predictions = predict(inference_batch, global_fr_neptune)
+                sentences_prediction = align_fr_predictions_with_sentences(sentences, predictions)
+                predicted_class, class_probabilities = predict_fr_class([extracted_text], global_fr_model)
+
+                chart_data = {
+                    'datasets': [{
+                        'data': list(class_probabilities.values()),
+                        'backgroundColor': [color[2] for color in class_probabilities.keys()],
+                        'borderColor': [color[2] for color in class_probabilities.keys()]
+                    }],
+                    'labels': [label[0] for label in class_probabilities.keys()]
+                }
+
+                response_data = {
+                    'extracted_text': extracted_text,
+                    'class_probabilities' : class_probabilities,
+                    'predicted_class': predicted_class,
+                    'chart_data': chart_data,
+                    'sentences_prediction': sentences_prediction
+                }
+                logging.debug(f"Prepared response data: {response_data}")
+
+                return render_template('voice_fr.html', 
+                           class_probabilities= class_probabilities, 
+                           predicted_class= predicted_class, 
+                           chart_data= chart_data, 
+                           sentences_prediction=sentences_prediction)
+
+            except Exception as e:
+                logging.error(f"Error processing audio: {str(e)}")
+                return jsonify({'error': str(e)}), 500
+
+            finally:
+                # Remove temporary file
+                os.unlink(temp_audio_path)
+
+        else:
+            logging.error("No audio file received")
+            return jsonify({'error': 'No audio file received'}), 400
+
+    # For GET request
+    logging.debug("Received GET request")
+    return render_template('voice_fr.html', 
+                           class_probabilities={}, 
+                           predicted_class=[""], 
+                           chart_data={}, 
+                           sentences_prediction={})
+
 if __name__ == '__main__':
     app.run(debug=True)

fr_neptune/fr_neptune/added_tokens.json

@@ -0,0 +1,4 @@
+{
+  "<MULT>": 32006,
+  "<unk>NOTUSED": 32005
+}

fr_neptune/fr_neptune/model.pt

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

fr_neptune/fr_neptune/sentencepiece.bpe.model

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:988bc5a00281c6d210a5d34bd143d0363741a432fefe741bf71e61b1869d4314
+size 810912

fr_neptune/fr_neptune/special_tokens_map.json

@@ -0,0 +1,24 @@
+{
+  "additional_special_tokens": [
+    {
+      "content": "<MULT>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false
+    }
+  ],
+  "bos_token": "<s>",
+  "cls_token": "<s>",
+  "eos_token": "</s>",
+  "mask_token": {
+    "content": "<mask>",
+    "lstrip": true,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "pad_token": "<pad>",
+  "sep_token": "</s>",
+  "unk_token": "<unk>"
+}

fr_neptune/fr_neptune/tokenizer_config.json

@@ -0,0 +1,89 @@
+{
+  "added_tokens_decoder": {
+    "0": {
+      "content": "<s>NOTUSED",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "1": {
+      "content": "<pad>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "2": {
+      "content": "</s>NOTUSED",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "4": {
+      "content": "<unk>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "5": {
+      "content": "<s>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "6": {
+      "content": "</s>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "32004": {
+      "content": "<mask>",
+      "lstrip": true,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "32005": {
+      "content": "<unk>NOTUSED",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "32006": {
+      "content": "<MULT>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    }
+  },
+  "additional_special_tokens": [
+    "<MULT>"
+  ],
+  "bos_token": "<s>",
+  "clean_up_tokenization_spaces": true,
+  "cls_token": "<s>",
+  "eos_token": "</s>",
+  "mask_token": "<mask>",
+  "model_max_length": 512,
+  "pad_token": "<pad>",
+  "sep_token": "</s>",
+  "tokenizer_class": "CamembertTokenizer",
+  "unk_token": "<unk>"
+}

fr_neptune/fr_neptune/unique_labels.json

@@ -0,0 +1 @@
+["Physics", "ai", "economies", "environments", "sports", "technologies"]

helper_functions.py

@@ -1,13 +1,15 @@
 import torch
 import pickle
-from transformers import  AutoTokenizer , DistilBertForSequenceClassification
+from transformers import  AutoTokenizer , DistilBertForSequenceClassification , CamembertForSequenceClassification
 from transformers import BatchEncoding, PreTrainedTokenizerBase
 from typing import Optional
 from torch import Tensor
 import numpy as np 
 from random import shuffle
 from Model import BERT
+from FrModel import FR_BERT
 from Model import tokenizer , mult_token_id , cls_token_id , pad_token_id , max_pred , maxlen , sep_token_id 
+from FrModel import fr_tokenizer , fr_mult_token_id , fr_cls_token_id , fr_pad_token_id , fr_sep_token_id
 from transformers import pipeline
 
 device = "cpu"
@@ -37,6 +39,28 @@ def load_models():
     
     return model, neptune, pipe
 
+def load_fr_models():
+    print("Loading Camembert model")
+    fr_model = CamembertForSequenceClassification.from_pretrained("Camembert/Camembert/saved_model")
+    print("Loading BERT model...")
+    fr_neptune = FR_BERT()
+    device = "cpu"
+    model_save_path = "fr_neptune/fr_neptune/model.pt"
+    fr_neptune.load_state_dict(torch.load(model_save_path, map_location=torch.device('cpu')))
+    fr_neptune.to(device)
+    print("Loading speech recognition pipeline...")
+    pipe = pipeline(
+        "automatic-speech-recognition",
+        model="openai/whisper-tiny.en",
+        chunk_length_s=30,
+        device=device,
+    )
+    print(pipe)
+    return fr_model , fr_neptune , pipe
+
+fr_class_labels = {0: ('Physics', 'primary', '#0f6fec'), 1: ('AI','cyan', '#0dcaf0'),
+                   2: ('economies', 'warning' , '#f7c32e'), 3: ('environments','success' , '#0cbc87'), 
+                   4: ('sports', 'orange', '#fd7e14')}
 class_labels = {
     16: ('vehicles','info' , '#4f9ef8'),
     10: ('environments','success' , '#0cbc87'),
@@ -333,4 +357,189 @@ def align_predictions_with_sentences(sentences, preds):
     dc = {}  # Initialize an empty dictionary
     for sentence, pred in zip(sentences, preds):  # Iterate through sentences and predictions
         dc[sentence] = class_labels.get(pred, "Unknown")  # Look up the label for each prediction
-    return dc
+    return dc
+
+#### FRENCH PREPROCESSING ####
+def predict_fr_class(text , model):
+    # Tokenisation du texte
+    inputs = transform_list_of_fr_texts(text, fr_tokenizer, 126, 30, 1, 2550)
+    # Extraire le tenseur de la liste
+    input_ids_tensor = inputs["input_ids"][0]
+    attention_mask_tensor = inputs["attention_mask"][0]
+    # Passage du texte à travers le modèle
+    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]
+
+    # Identification de la classe majoritaire
+    predicted_class_index = torch.argmax(probabilities).item()
+    predicted_class = fr_class_labels[predicted_class_index]
+
+    # Créer un dictionnaire de pourcentages trié par probabilité
+    sorted_percentages = {fr_class_labels[idx]: probabilities[idx].item() * 100 for idx in range(len(fr_class_labels))}
+    sorted_percentages = dict(sorted(sorted_percentages.items(), key=lambda item: item[1], reverse=True))
+
+    return predicted_class, sorted_percentages
+
+def prepare_fr_text(tokens_splitted: BatchEncoding):
+    batch = []
+    sentences = []
+    input_ids_list = tokens_splitted['input_ids']
+    
+    for i in range(0, len(input_ids_list), 2):  # Adjust loop to stop at second last index
+        k = i + 1
+        if k == len(input_ids_list):
+            input_ids_a = input_ids_list[i]
+            input_ids_a = [token for token in input_ids_a.view(-1).tolist() if token != pad_token_id]
+            input_ids_b = []
+            input_ids = [fr_cls_token_id] + [fr_mult_token_id] + input_ids_a + [fr_sep_token_id] + [fr_mult_token_id] + input_ids_b + [fr_sep_token_id]
+            text_input_a = fr_tokenizer.decode(input_ids_a)
+            sentences.append(text_input_a)
+            segment_ids = [0] * (1 + 1 + len(input_ids_a) + 1) + [1] * (1 + len(input_ids_b) + 1)
+            
+            # MASK LM
+            n_pred = min(max_pred, max(1, int(round(len(input_ids) * 0.15))))
+            cand_masked_pos = [idx for idx, token in enumerate(input_ids) if token not in [fr_cls_token_id, fr_sep_token_id, fr_mult_token_id]]
+            shuffle(cand_masked_pos)
+            masked_tokens, masked_pos = [], []
+            for pos in cand_masked_pos[:n_pred]:
+                masked_pos.append(pos)
+                masked_tokens.append(input_ids[pos])
+                input_ids[pos] = fr_tokenizer.mask_token_id
+
+            # Zero Padding
+            n_pad = maxlen - len(input_ids)
+            input_ids.extend([fr_pad_token_id] * n_pad)
+            segment_ids.extend([0] * n_pad)
+
+            # Zero Padding for masked tokens
+            if max_pred > n_pred:
+                n_pad = max_pred - n_pred
+                masked_tokens.extend([0] * n_pad)
+                masked_pos.extend([0] * n_pad)
+        else:
+            input_ids_a = input_ids_list[i]  # Correct the indexing here
+            input_ids_b = input_ids_list[k]  # Correct the indexing here
+            input_ids_a = [token for token in input_ids_a.view(-1).tolist() if token != pad_token_id]
+            input_ids_b = [token for token in input_ids_b.view(-1).tolist() if token != pad_token_id]
+            input_ids = [fr_cls_token_id] + [fr_mult_token_id] + input_ids_a + [fr_sep_token_id] + [fr_mult_token_id] + input_ids_b + [fr_sep_token_id]
+            segment_ids = [0] * (1 + 1 + len(input_ids_a) + 1) + [1] * (1 + len(input_ids_b) + 1)
+            text_input_a = fr_tokenizer.decode(input_ids_a)
+            text_input_b = fr_tokenizer.decode(input_ids_b)
+            sentences.append(text_input_a)
+            sentences.append(text_input_b)
+
+            # MASK LM
+            n_pred = min(max_pred, max(1, int(round(len(input_ids) * 0.15))))
+            cand_masked_pos = [idx for idx, token in enumerate(input_ids) if token not in [fr_cls_token_id, fr_sep_token_id, fr_mult_token_id]]
+            shuffle(cand_masked_pos)
+            masked_tokens, masked_pos = [], []
+            for pos in cand_masked_pos[:n_pred]:
+                masked_pos.append(pos)
+                masked_tokens.append(input_ids[pos])
+                input_ids[pos] = fr_tokenizer.mask_token_id
+
+            # Zero Padding
+            n_pad = maxlen - len(input_ids)
+            input_ids.extend([fr_pad_token_id] * n_pad)
+            segment_ids.extend([0] * n_pad)
+
+            # Zero Padding for masked tokens
+            if max_pred > n_pred:
+                n_pad = max_pred - n_pred
+                masked_tokens.extend([0] * n_pad)
+                masked_pos.extend([0] * n_pad)
+
+        batch.append([input_ids, segment_ids, masked_pos])
+    return batch, sentences
+
+def fr_inference(text: str):
+    encoded_text = transform_for_inference_fr_text(text, fr_tokenizer, 125, 125, 1, 2550)
+    batch, sentences = prepare_fr_text(encoded_text)
+    return batch, sentences
+
+def align_fr_predictions_with_sentences(sentences, preds):
+    dc = {}  # Initialize an empty dictionary
+    for sentence, pred in zip(sentences, preds):  # Iterate through sentences and predictions
+        dc[sentence] = fr_class_labels.get(pred, "Unknown")  # Look up the label for each prediction
+    return dc
+
+def transform_for_inference_fr_text(text: str,
+    tokenizer: PreTrainedTokenizerBase,
+    chunk_size: int,
+    stride: int,
+    minimal_chunk_length: int,
+    maximal_text_length: Optional[int],) -> BatchEncoding:
+    if maximal_text_length:
+        tokens = tokenize_text_with_truncation(text, tokenizer, maximal_text_length)
+    else:
+        tokens = tokenize_whole_text(text, tokenizer)
+    input_id_chunks, mask_chunks = split_tokens_into_smaller_chunks(tokens, chunk_size, stride, minimal_chunk_length)
+    add_special_tokens_at_beginning_and_end_inference(input_id_chunks, mask_chunks)
+    add_padding_fr_tokens_inference(input_id_chunks, mask_chunks, chunk_size)
+    input_ids, attention_mask = stack_tokens_from_all_chunks_for_inference(input_id_chunks, mask_chunks)
+    return {"input_ids": input_ids, "attention_mask": attention_mask} 
+
+def add_padding_fr_tokens_inference(input_id_chunks: list[Tensor], mask_chunks: list[Tensor], chunk_size: int) -> None:
+    """Adds padding tokens at the end to make sure that all chunks have exactly chunk_size tokens."""
+    pad_token_id = 1  # Assuming this is defined somewhere in your code
+    for i in range(len(input_id_chunks)):
+        # get required padding length
+        pad_len = chunk_size - input_id_chunks[i].shape[0]
+        # check if tensor length satisfies required chunk size
+        if pad_len > 0:
+            # if padding length is more than 0, we must add padding
+            input_id_chunks[i] = torch.cat([input_id_chunks[i], torch.tensor([pad_token_id] * pad_len)])
+            mask_chunks[i] = torch.cat([mask_chunks[i], torch.tensor([0] * pad_len)])
+
+
+def transform_list_of_fr_texts(
+    texts: list[str],
+    tokenizer: PreTrainedTokenizerBase,
+    chunk_size: int,
+    stride: int,
+    minimal_chunk_length: int,
+    maximal_text_length: Optional[int] = None,
+) -> BatchEncoding:
+    model_inputs = [
+        transform_single_fr_text(text, tokenizer, chunk_size, stride, minimal_chunk_length, maximal_text_length)
+        for text in texts
+    ]
+    input_ids = [model_input[0] for model_input in model_inputs]
+    attention_mask = [model_input[1] for model_input in model_inputs]
+    tokens = {"input_ids": input_ids, "attention_mask": attention_mask}
+    return BatchEncoding(tokens)
+
+
+def transform_single_fr_text(
+    text: str,
+    tokenizer: PreTrainedTokenizerBase,
+    chunk_size: int,
+    stride: int,
+    minimal_chunk_length: int,
+    maximal_text_length: Optional[int],
+) -> tuple[Tensor, Tensor]:
+    """Transforms (the entire) text to model input of BERT model."""
+    if maximal_text_length:
+        tokens = tokenize_text_with_truncation(text, tokenizer, maximal_text_length)
+    else:
+        tokens = tokenize_whole_text(text, tokenizer)
+    input_id_chunks, mask_chunks = split_tokens_into_smaller_chunks(tokens, chunk_size, stride, minimal_chunk_length)
+    add_fr_special_tokens_at_beginning_and_end(input_id_chunks, mask_chunks)
+    add_padding_tokens(input_id_chunks, mask_chunks , chunk_size)
+    input_ids, attention_mask = stack_tokens_from_all_chunks(input_id_chunks, mask_chunks)
+    return input_ids, attention_mask
+
+def add_fr_special_tokens_at_beginning_and_end(input_id_chunks: list[Tensor], mask_chunks: list[Tensor]) -> None:
+    """
+    Adds special CLS token (token id = 101) at the beginning.
+    Adds SEP token (token id = 102) at the end of each chunk.
+    Adds corresponding attention masks equal to 1 (attention mask is boolean).
+    """
+    for i in range(len(input_id_chunks)):
+        # adding CLS (token id 101) and SEP (token id 102) tokens
+        input_id_chunks[i] = torch.cat([Tensor([5]), input_id_chunks[i], Tensor([6])])
+        # adding attention masks  corresponding to special tokens
+        mask_chunks[i] = torch.cat([Tensor([1]), mask_chunks[i], Tensor([1])])

static/icons/flag-for-flag-france.htm

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="icon" href="/favicon.ico"/><link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="SVG Repo"/><script type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":"https://www.svgrepo.com/","name":"SVG Repo - Free SVG Vectors and Icons","alternateName":"Free SVG Icons","potentialAction":{"@type":"SearchAction","target":"http://www.svgrepo.com/vectors/{search_term_string}/","query-input":"required name=search_term_string"}},{"@context":"http://schema.org","@type":"Organization","name":"SVG Repo","legalName":"SVG Repo LLC","foundingDate":"2013","url":"https://www.svgrepo.com","logo":"https://www.svgrepo.com/logo.png","founders":[{"@type":"Person","name":"Burak Tokak"}],"address":{"@type":"PostalAddress","streetAddress":"123 Genting Lane","addressLocality":"Yenom","addressRegion":"SG","postalCode":"24","addressCountry":"Singapore"},"contactPoint":{"@type":"ContactPoint","contactType":"Support","telephone":"[+561-526-8457]","email":"info@svgrepo.com"},"sameAs":["http://www.twitter.com/svgrepo","http://www.instagram.com/svgrepo","http://www.facebook.com/svgrepo","https://www.producthunt.com/products/svgrepo","https://dribbble.com/svgrepo"]},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://www.svgrepo.com/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https://www.svgrepo.com/collections/","name":"SVG Vector"}},{"@type":"ListItem","position":3,"item":{"@id":"https://www.svgrepo.com/svg/405485/flag-for-flag-france","name":"Flag For Flag France"}}]}]</script><title>Flag For Flag France Vector SVG Icon - SVG Repo</title><meta name="robots" content="index,follow,max-image-preview:large"/><meta name="googlebot" content="index,follow,max-image-preview:large"/><meta name="description" content="Free Flag For Flag France Vector Icon in SVG format. ✅ Download Free Flag For Flag France Vector and icons for commercial use. Flag For Flag France SVG vector illustration graphic art design format.SVG Vector vectors."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@svgrepo"/><meta name="twitter:creator" content="@svgrepo"/><meta property="og:title" content="Flag For Flag France Vector SVG Icon - SVG Repo"/><meta property="og:description" content="Free Flag For Flag France Vector Icon in SVG format. ✅ Download Free Flag For Flag France Vector and icons for commercial use. Flag For Flag France SVG vector illustration graphic art design format.SVG Vector vectors."/><meta property="og:url" content="https://www.svgrepo.com/svg/405485/flag-for-flag-france"/><meta property="og:image" content="https://www.svgrepo.com/social.png"/><meta property="og:image:alt" content=" Free Icons and Vectors"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1600"/><meta property="og:image:height" content="800"/><meta property="og:site_name" content="SVG Repo"/><link rel="canonical" href="https://www.svgrepo.com/svg/405485/flag-for-flag-france"/><link rel="preload" href="/show/405485/flag-for-flag-france.svg" as="image" fetchpriority="high"/><meta name="next-head-count" content="23"/><meta name="next-font-preconnect"/><link rel="preload" href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/c9f2e23721645114.css" as="style"/><link rel="stylesheet" href="/_next/static/css/c9f2e23721645114.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b4b0348ba0c97866.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b4b0348ba0c97866.css" data-n-p=""/><link rel="preload" href="/_next/static/css/fb2c987d854b03ca.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fb2c987d854b03ca.css"/><link rel="preload" href="/_next/static/css/853c26dabccca674.css" as="style"/><link rel="stylesheet" href="/_next/static/css/853c26dabccca674.css"/><link rel="preload" href="/_next/static/css/f5d51dbe22da7e06.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f5d51dbe22da7e06.css"/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/675-bbaffee85ab26582.js" as="script"/><link rel="preload" href="/_next/static/chunks/400-cf97d6bdbdf0f340.js" as="script"/><link rel="preload" href="/_next/static/chunks/451.5f026fc39acc1202.js" as="script"/><link rel="preload" href="/_next/static/chunks/929.0b4636598979df75.js" as="script"/><link rel="preload" href="/_next/static/chunks/293.58b6d7eb60abc47f.js" as="script"/><link rel="preload" href="/_next/static/chunks/webpack-915b915b0059e2ac.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework-63157d71ad419e09.js" as="script"/><link rel="preload" href="/_next/static/chunks/main-76fff4db6e2e1f3e.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-14ac00e97c23b48c.js" as="script"/><link rel="preload" href="/_next/static/chunks/914-237739ac1bf6acde.js" as="script"/><link rel="preload" href="/_next/static/chunks/675-bbaffee85ab26582.js" as="script"/><link rel="preload" href="/_next/static/chunks/962-5f0fda52dcac7bd5.js" as="script"/><link rel="preload" href="/_next/static/chunks/28-3a8558ea2bc8e2bd.js" as="script"/><link rel="preload" href="/_next/static/chunks/454-8e7fbd1b315808b6.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/svg/%5B%5B...param%5D%5D-6f17f889eae5f5f5.js" as="script"/><style id="__jsx-619996359">html,input{font-family:'__Inter_e66fe9', '__Inter_Fallback_e66fe9',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}</style></head><body><div id="__next"><div><div class="style_header__zGlFh"><div class="style_headerHolder__i_tTb"><a style="display:auto" href="/"><span class="style_logoHolder__YKj11"><img class="style_logo__OFa7_" src="/logo.svg" width="73" height="22" alt="SVG Repo - Search, explore, edit and share open licensed SVG vectors"/></span></a><div class="style_searchHolder__s_8Sf" style="display:auto"><div class="style_search__5Sx9r"><div class="style_pressEnter__Rv8T3"><span>CTRL</span> + K</div><div class="style_searchIndicator__sASd0"><svg alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="transform:scale(1)"><path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path></svg><img alt="Searching" loading="lazy" width="21" height="21" decoding="async" data-nimg="1" style="color:transparent;opacity:0" src="/_next/static/media/spin.6ffd8bb2.svg"/></div><form><input type="text" placeholder="Search for vectors and icons..." style="text-indent:40px" value=""/><input type="submit" style="display:none"/></form><div class="style_recommendation__SXg4e" style="opacity:1"></div></div></div><ul class="style_menuMobile__uHUfg" style="display:auto"><li><a alt="Saved Vectors" title="Saved Vectors" href="/saved/"><svg style="position:relative;top:5px;margin-left:5px;margin-right:5px" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></a></li><li><div><svg style="position:relative;top:5px;margin-left:5px;margin-right:5px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="21" height="21" fill="#333"><path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path></svg></div></li></ul><ul class="style_menu__qDQTZ"><li><a href="/collections/">Vector Collections</a></li><li><a alt="Saved Vectors" title="Saved Vectors" href="/saved/"><svg style="position:relative;top:5px;margin-left:5px;margin-right:5px" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></a></li></ul></div></div><div class="style_headerSpacer__lt8mM"></div><div class="style_fixed__LxyCF"><div class="style_breadCrumbs__UNVWH"><div class="style_breadCrumbsScroller__93Cu8"><a href="/"><span>Home</span></a><div><svg width="24" height="24" viewBox="0 0 24 24" fill="#e1e1e1"><path d="M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z"></path><path fill="none" d="M0,0h24v24H0V0z"></path></svg><a href="/collections/"><span>SVG Vector</span></a></div><div><svg width="24" height="24" viewBox="0 0 24 24" fill="#e1e1e1"><path d="M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z"></path><path fill="none" d="M0,0h24v24H0V0z"></path></svg><a href="/svg/405485/flag-for-flag-france"><span class="style_current__O54cA">Flag For Flag France</span></a></div></div></div><div class="styles_contentHolder__tGZ_5" style="opacity:1"><div class="styles_mediaDescription__RUGi3"><h1>Flag For Flag France<!-- --> SVG Vector </h1><p class="subtext" style="margin-bottom:5px">Free Download <!-- -->Flag For Flag France<!-- --> SVG vector file in monocolor and multicolor type for Sketch and Figma from <!-- -->Flag For Flag France<!-- --> Vectors svg vector collection. <!-- -->Flag For Flag France<!-- --> Vectors SVG vector illustration graphic art design format.</p><ul class="styles_manifest__YTzNu"><li><b>COLLECTION:</b> <a href="/collections/">SVG Vector</a></li><li><b>LICENSE:</b> <a target="_blank" href="/page/licensing/#CC0">CC0<!-- --> License</a></li><li><b>UPLOADER<!-- -->:</b> <a href="/">SVG Repo</a></li><li class="styles_tags__Ng0DG"><a class="tag" style="margin-left:0" href="/vectors/flag-for-flag-france/">flag for flag france</a></li></ul><div class="styles_buttons__BCMQN"><div><div class="button buttonActive" style="padding-right:35px"><a style="width:100%;display:flex;justify-content:center;align-items:center;height:100%" href="/download/405485/flag-for-flag-france.svg"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span>Download SVG<span> Vector</span></span></a><div class="buttonExtra"><svg height="18" width="18" viewBox="0 0 24 24" stroke="#fff" fill="none" transform="rotate(90)" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs" style="margin-left:5px"><path d="M9 18l6-6-6-6"></path></svg></div><div class="buttonOptions"><a href="/download/405485/flag-for-flag-france.svg"><li>SVG <span>Optimized</span></li></a><a href="/svg/405485/flag-for-flag-france?edit=true"><li>PNG <span>256x256</span></li></a><a href="/svg/405485/flag-for-flag-france?edit=true"><li>PNG <span>512x512</span></li></a><a href="/svg/405485/flag-for-flag-france?edit=true"><li>PNG <span>1024x1024</span></li></a></div></div></div><div style="width:15px"></div><div class="button"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><span>Save</span></div></div></div><div class="styles_mediaContent__xVExe" itemscope="" itemType="http://schema.org/ImageObject"><img alt="Flag For Flag France SVG Vector Icon" fetchpriority="high" width="250" height="250" decoding="async" data-nimg="1" style="color:transparent;width:250px;height:250px" src="/show/405485/flag-for-flag-france.svg"/><div class="styles_mediaButtons__gS452"><a href="/svg/405485/flag-for-flag-france?edit=true"><div class="button buttonSmall"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"><circle cx="13.5" cy="6.5" r=".5"></circle><circle cx="17.5" cy="10.5" r=".5"></circle><circle cx="8.5" cy="7.5" r=".5"></circle><circle cx="6.5" cy="12.5" r=".5"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 011.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg><span>Edit Vector</span></div></a><span itemProp="creator" itemscope="" itemType="http://schema.org/Organization"><meta itemProp="name" content="SVG Repo"/></span><meta itemProp="author" content="SVG Repo"/><meta itemProp="name" content="Flag For Flag France SVG Vector Icon"/><meta itemProp="contentUrl" content="https://www.svgrepo.com/show/405485/flag-for-flag-france.svg"/><meta itemProp="creditText" content="SVG Repo"/><meta itemProp="copyrightNotice" content="CC0"/><meta itemProp="license" content="https://www.svgrepo.com/page/licensing/#CC0"/><meta itemProp="acquireLicensePage" content="https://www.svgrepo.com/page/licensing/#CC0"/><meta itemProp="url" content="https://www.svgrepo.com/svg/405485/flag-for-flag-france"/></div><div></div></div></div><div class="style_native__ce_K5" id="native-vector-405485" style="min-height:110px"><div class="style_nativeInline__5nS3E"><div class="style_nativeContent__6Vvo4"><div class="style_nativeImagePlaceholder___q1OM"></div><div class="style_nativeText__faLaF"><div class="style_textPlaceholder__Tlefp" style="width:60%"></div><div class="style_textPlaceholder__Tlefp" style="width:90%"></div></div></div></div><div class="style_request__p92Kt" style="opacity:0;top:10px"><h3>No Ads here 🤗</h3><p style="font-size:15px">Instead, you can give us a <a href="http://twitter.com/share?text=Check%20out%20SVG%20Repo%21%0AFree%20500.000%20Open%20Licensed%20SVG%20Vector%20and%20Icons%0A%F0%9F%91%87&amp;url=https://www.svgrepo.com/ @svgrepo" target="_blank" rel="noreferrer">Share on Twitter.</a></p><p style="position:absolute;top:20px;right:20px;padding:1px;padding-left:10px;padding-right:10px;border-radius:50px;cursor:pointer;background-color:#fafafa">×</p></div></div><div class="carrier"><div class="content"><div class="compact"><h2>SVG Vector<!-- --> SVG Vectors</h2><p class="description">Flag For Flag France<!-- --> SVG Vector is a part of <!-- -->SVG Vector<!-- --> vector collection. Following vectors are from the same pack as this vector also checkout all <!-- -->SVG Vector<!-- --> icons and vectors.</p></div><div class="style_nodeListing__7Nmro"><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div></div><a href="/collections/"><div class="button" style="margin-bottom:15px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"><path d="M5 12h13M12 5l7 7-7 7"></path></svg><span>See All Collection</span></div></a><div class="style_native__ce_K5" id="native-vector-405485-2" style="min-height:80px"><div class="style_nativeInline__5nS3E"><div class="style_nativeContent__6Vvo4"><div class="style_nativeImagePlaceholder___q1OM"></div><div class="style_nativeText__faLaF"><div class="style_textPlaceholder__Tlefp" style="width:60%"></div><div class="style_textPlaceholder__Tlefp" style="width:90%"></div></div></div></div><div class="style_request__p92Kt" style="opacity:0;top:10px"><h3>No Ads here 🤗</h3><p style="font-size:15px">Instead, you can give us a <a href="http://twitter.com/share?text=Check%20out%20SVG%20Repo%21%0AFree%20500.000%20Open%20Licensed%20SVG%20Vector%20and%20Icons%0A%F0%9F%91%87&amp;url=https://www.svgrepo.com/ @svgrepo" target="_blank" rel="noreferrer">Share on Twitter.</a></p><p style="position:absolute;top:20px;right:20px;padding:1px;padding-left:10px;padding-right:10px;border-radius:50px;cursor:pointer;background-color:#fafafa">×</p></div></div><h2>Flag For Flag France<!-- --> SVG Vectors</h2><p class="description">Checkout other <!-- -->Flag For Flag France<!-- --> Vectors with different styles in SVG vector and icon library.</p><div class="style_nodeListing__7Nmro"><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div><div class="style_Node__GkK82"><div class="style_NodeImage__FiBL5"><div class="style_loading__ImzqA"></div></div><div class="style_action__wYD0A"><svg class="" title="Like undefined SVG File" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8899a4" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path></svg><span class="style_actionTitle__o1rFS"> SVG Icon</span></div></div></div><a href="/vectors/flag-for-flag-france/"><div class="button"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"><path d="M5 12h13M12 5l7 7-7 7"></path></svg><span>See More <span>Flag For Flag France<!-- --> </span>Vectors</span></div></a></div></div></div><div class="style_flexbarHolder__DgQcl"><div class="style_flexbar__DvWpX" id="native-flex-svg-405485-flag-for-flag-france"></div></div><div class="style_footerCarrier__SziG4"><h3 style="height:0;overflow:hidden;padding:0;margin:0">Website Content</h3><div class="style_footer__Ozqwl"><div class="style_footerInner__HZ_6Q"><div class="style_footerLogoHolder__zWQrk"><a id="footer" href="/"><span class="style_logoHolder__vMETC"><img alt="SVG Repo - Search, explore, edit and share open licensed SVG vectors" loading="lazy" width="100" height="30" decoding="async" data-nimg="1" class="style_logo___nBAe" style="color:transparent" src="/logo.svg"/></span></a><p>Search, explore, edit and share open-licensed SVG vectors</p><div class="style_socialLinks__Bvs4v"><a href="https://twitter.com/svgrepo" target="_blank" rel="noopener noreferrer"><img alt="SVG Repo Twitter" loading="lazy" width="21" height="21" decoding="async" data-nimg="1" style="color:transparent" src="/_next/static/media/twitter.29b6fbd9.svg"/></a><a href="https://instagram.com/svgrepo" target="_blank" rel="noopener noreferrer"><img alt="SVG Repo Instagram" loading="lazy" width="21" height="21" decoding="async" data-nimg="1" style="color:transparent" src="/_next/static/media/instagram.7062f55e.svg"/></a><a href="https://dribbble.com/svgrepo" target="_blank" rel="noopener noreferrer"><img alt="SVG Repo Dribbble" loading="lazy" width="21" height="21" decoding="async" data-nimg="1" style="color:transparent" src="/_next/static/media/dribbble.e6cbf389.svg"/></a><a href="https://producthunt.com/products/svgrepo" target="_blank" rel="noopener noreferrer"><img alt="SVG Repo ProductHunt" loading="lazy" width="21" height="21" decoding="async" data-nimg="1" style="color:transparent" src="/_next/static/media/producthunt.fabbb697.svg"/></a></div><div style="height:60px"><div><div id="footer-native-native-flex-svg-405485-flag-for-flag-france"></div></div></div></div><div><h4>Free Vectors</h4><ul><li><a href="/collections/monocolor/">Monocolor Vectors</a></li><li><a href="/collections/multicolor/">Multicolor Vectors</a></li><li><a href="/collections/filled/">Filled Vectors</a></li><li><a href="/collections/outlined/">Outlined Vectors</a></li><li><a href="/collections/icon/">Icon Vectors</a></li></ul></div><div><h4>Other Collections</h4><ul><li><a href="/collections/icon/">Glyphs Vectors</a></li><li><a href="/collections/circular/">Circular Vectors</a></li><li><a href="/collections/duotone/">Duotone Vectors</a></li><li><a href="/collections/flat/">Flat Vectors</a></li><li><a href="https://upload.svgrepo.com" target="_blank" rel="noopener">Submit Assets</a></li></ul></div><div><h4>Developers / Designers</h4><ul><li><a href="/tools/">Free Tools</a></li><li><a href="https://www.svgapi.com" target="_blank" rel="noopener">Icon API</a></li><li><a href="https://vectormaker.co" target="_blank" rel="noopener">vectormaker</a></li><li><a href="https://www.fontrepo.com" target="_blank" rel="noopener">Font Repo</a></li><li><a href="https://svgfind.com" target="_blank" rel="noopener">SVG Find</a></li></ul></div></div><div class="style_footerBottom__l8wqE"><div>© <!-- -->2024<!-- --> · SVG Repo LLC</div><div><a href="/page/terms-of-use/">Terms of Use</a><a href="/page/privacy-policy/">Privacy Policy</a><a href="/page/licensing/">Licensing</a><a href="/page/contact/">Contact</a></div></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"ssrIcon":{"id":"405485","slug":"flag-for-flag-france","title":"flag-for-flag-france","similar":[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false]}},"__N_SSP":true},"page":"/svg/[[...param]]","query":{"param":["405485/flag-for-flag-france"]},"buildId":"9UdWXZJ2dR-D_IkpQGEy7","isFallback":false,"dynamicIds":[451,6929,2293],"gssp":true,"customServer":true,"scriptLoader":[]}</script><script nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script async="" src="/_next/static/chunks/400-cf97d6bdbdf0f340.js"></script><script async="" src="/_next/static/chunks/451.5f026fc39acc1202.js"></script><script async="" src="/_next/static/chunks/929.0b4636598979df75.js"></script><script async="" src="/_next/static/chunks/293.58b6d7eb60abc47f.js"></script><script src="/_next/static/chunks/webpack-915b915b0059e2ac.js" async=""></script><script src="/_next/static/chunks/framework-63157d71ad419e09.js" async=""></script><script src="/_next/static/chunks/main-76fff4db6e2e1f3e.js" async=""></script><script src="/_next/static/chunks/pages/_app-14ac00e97c23b48c.js" async=""></script><script src="/_next/static/chunks/914-237739ac1bf6acde.js" async=""></script><script src="/_next/static/chunks/675-bbaffee85ab26582.js" async=""></script><script src="/_next/static/chunks/962-5f0fda52dcac7bd5.js" async=""></script><script src="/_next/static/chunks/28-3a8558ea2bc8e2bd.js" async=""></script><script src="/_next/static/chunks/454-8e7fbd1b315808b6.js" async=""></script><script src="/_next/static/chunks/pages/svg/%5B%5B...param%5D%5D-6f17f889eae5f5f5.js" async=""></script><script src="/_next/static/9UdWXZJ2dR-D_IkpQGEy7/_buildManifest.js" async=""></script><script src="/_next/static/9UdWXZJ2dR-D_IkpQGEy7/_ssgManifest.js" async=""></script></body></html>

static/js/pdf.js

@@ -8,8 +8,10 @@ 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 staticDiv = document.getElementById("static");
 const dynamicDiv = document.getElementById("dynamic");
+const sentenceResultDiv = document.getElementById("dynamicResult");
 var chartData;
 let file;
 
@@ -115,9 +117,21 @@ form.addEventListener("submit", (event) => {
       currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
       const PredictedClass = responseDOM.getElementById("predicted-class")
       currentPredictedClass.innerHTML = PredictedClass.innerHTML;
+      document.getElementById('transcribedText').innerHTML = responseDOM.getElementById('transcribedText').innerHTML;
+      const sentencePredictionsResponse= responseDOM.getElementById('classifiedText').innerHTML;
+      sentencePredictions.innerHTML = sentencePredictionsResponse;
       dynamicDiv.classList.remove('d-none');
       staticDiv.classList.add('d-none');
-
+      sentenceResultDiv.classList.remove('d-none');
+      setTimeout(() => {
+        const resultsDiv = document.getElementById('dynamicResult');
+        if (resultsDiv) {
+          resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, 100);
+      if (resultsHeading) {
+        resultsHeading.scrollIntoView({ behavior: 'smooth' });
+      }
       var canvasElement = responseDOM.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
       chartData = canvasElement.getAttribute('data-chart');
       var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);

static/js/pdf_fr.js

@@ -0,0 +1,236 @@
+const dropArea = document.getElementById("dropArea");
+const dragText = dropArea.querySelector("h6");
+const input = dropArea.querySelector("input");
+const form = document.querySelector("form");
+const ocrResult = document.getElementById("ocr-result");
+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 staticDiv = document.getElementById("static");
+const dynamicDiv = document.getElementById("dynamic");
+const sentenceResultDiv = document.getElementById("dynamicResult");
+var chartData;
+let file;
+
+
+
+// Event listener for clicking the dropArea to upload a file
+dropArea.addEventListener("click", () => {
+  // Trigger click event on the file input when the dropArea is clicked
+  const input = document.getElementById("file-input");
+  input.click();
+});
+
+// Update the event listener for input change to handle file selection
+const fileInput = document.getElementById("file-input");
+fileInput.addEventListener("change", function () {
+  file = this.files[0];
+  dropArea.classList.add("active");
+  viewFile();
+});
+
+
+input.addEventListener("change", function () {
+  file = this.files[0];
+  dropArea.classList.add("active");
+  viewFile();
+});
+
+dropArea.addEventListener("dragover", (event) => {
+  event.preventDefault();
+  dropArea.classList.add("active");
+  dragText.textContent = "Release to Upload File";
+});
+
+dropArea.addEventListener("dragleave", () => {
+  dropArea.classList.remove("active");
+  dragText.textContent = "Drag & Drop or Click to Upload File";
+});
+
+dropArea.addEventListener("drop", (event) => {
+  event.preventDefault();
+  file = event.dataTransfer.files[0];
+  viewFile();
+});
+
+// Définir la fonction initializeChart en premier
+function initializeChart(data, backgroundColor, borderColor, labels) {
+  // Créer une nouvelle instance Chart.js pour chaque élément canvas avec la classe 'bestSellers'
+  data = data.map(function (element) {
+    return parseFloat(element).toFixed(2);
+  });
+  document.querySelectorAll('.bestSellers').forEach(function (canvas) {
+    // Initialiser le graphique
+    new Chart(canvas, {
+      type: 'doughnut', // Définir le type de graphique sur doughnut
+      data: {
+        datasets: [{
+          data: data,
+          backgroundColor: backgroundColor,
+          borderColor: borderColor,
+        }],
+        labels: labels
+      },
+      options: {
+        responsive: true, // Rendre le graphique responsive
+        cutoutPercentage: 80, // Définir le pourcentage de découpe
+        legend: {
+          display: false, // Masquer la légende
+        },
+        animation: {
+          animateScale: true,
+          animateRotate: true
+        },
+        plugins: {
+          datalabels: {
+            display: false,
+            align: 'center',
+            anchor: 'center'
+          }
+        }
+      }
+    });
+  });
+}
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  if (!file) {
+    alert("Please select a file!");
+    return;
+  }
+  const formData = new FormData();
+  formData.append("file", file);
+  fetch("/pdf_fr/upload", {
+    method: "POST",
+    body: formData,
+  })
+    .then((response) => response.text())
+    .then((html) => {
+      const responseDOM = new DOMParser().parseFromString(html, "text/html");
+      const resultTextArea = responseDOM.getElementById("ocr-result");
+      ocrResult.value = resultTextArea.value;
+      const classProbabilitiesList = responseDOM.getElementById("class-probabilities");
+      currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
+      const PredictedClass = responseDOM.getElementById("predicted-class")
+      currentPredictedClass.innerHTML = PredictedClass.innerHTML;
+      document.getElementById('transcribedText').innerHTML = responseDOM.getElementById('transcribedText').innerHTML;
+      const sentencePredictionsResponse= responseDOM.getElementById('classifiedText').innerHTML;
+      sentencePredictions.innerHTML = sentencePredictionsResponse;
+      dynamicDiv.classList.remove('d-none');
+      staticDiv.classList.add('d-none');
+      sentenceResultDiv.classList.remove('d-none');
+      setTimeout(() => {
+        const resultsDiv = document.getElementById('dynamicResult');
+        if (resultsDiv) {
+          resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, 100);
+      if (resultsHeading) {
+        resultsHeading.scrollIntoView({ behavior: 'smooth' });
+      }
+      var canvasElement = responseDOM.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
+      chartData = canvasElement.getAttribute('data-chart');
+      var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
+      var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
+      var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
+      var labels = JSON.parse(chartData).labels.slice(0, 5);
+
+      // Créer de nouveaux graphiques
+      loadDashboardScript(data, backgroundColor, borderColor, labels);
+    })
+    .catch((error) => console.error(error));
+});
+
+function destroyPreviousCharts() {
+  // Trouver tous les éléments canvas avec la classe 'bestSellers'
+  document.querySelectorAll('.bestSellers').forEach(function (canvas) {
+    // Récupérer l'instance du graphique
+    var chartInstance = Chart.getChart(canvas);
+    // Si une instance existe, détruire le graphique
+    if (chartInstance) {
+      chartInstance.destroy();
+    }
+  });
+}
+
+function loadDashboardScript(data, backgroundColor, borderColor, labels) { // Correction ici
+  var scriptElement = document.createElement('script');
+  scriptElement.type = 'text/javascript';
+  scriptElement.src = '../static/js/dashboard_pdf.js';
+  // Attendez que le script soit chargé avant d'appeler la fonction d'initialisation
+  scriptElement.onload = function () {
+    initializeChart(data, backgroundColor, borderColor, labels);
+  };
+  document.body.appendChild(scriptElement);
+}
+
+
+// Define the original HTML structure of the drop area
+const originalDropAreaHTML = `
+  <h6 class="text-white-50">Drag and Drop File Here</h6>
+  <span class="text-white-50">OR</span>
+  <h6 class="text-white-50">Click here</h6>
+  <input id="file-input" type="file" name="image" accept=".pdf" hidden>
+`;
+
+function deleteCurrentFile() {
+  // Recharger le fichier index.js après l'envoi du formulaire
+  window.location.reload();
+  file = null;
+
+  // Restore the original HTML structure
+  dropArea.innerHTML = originalDropAreaHTML;
+
+  // Remove the 'active' class to reset the styling
+  dropArea.classList.remove("active");
+
+  // Update the event listener for input change to handle file selection
+  const fileInput = document.getElementById("file-input");
+
+  fileInput.addEventListener("change", function () {
+    file = this.files[0];
+    dropArea.classList.add("active");
+    viewFile();
+  });
+}
+
+
+function viewFile() {
+  let fileType = file.type;
+  let validExtensions = ["application/pdf"];
+  if (validExtensions.includes(fileType)) {
+    let fileURL = URL.createObjectURL(file);
+    let pdfTag = `<iframe src="${fileURL}" style="width:100%;height:100%;"></iframe>`;
+    dropArea.innerHTML = pdfTag;
+  } else {
+    alert("This is not a PDF File!");
+    dropArea.classList.remove("active");
+    dragText.textContent = "Drag & Drop or Click to Upload File";
+  }
+}
+
+const copyBtn = document.getElementById("copy-btn");
+
+copyBtn.addEventListener("click", () => {
+  ocrResult.select();
+  document.execCommand("copy");
+});
+
+function createResponseElement(response) {
+  var pdfResponseElement = document.createElement('ul');
+  pdfResponseElement.classList.add('graph-legend-rectangle');
+  pdfResponseElement.innerHTML = response;
+  return pdfResponseElement;
+}
+
+// Modifiez la fonction reloadDashboardScript pour accepter les données supplémentaires
+function reloadDashboardScript(data, backgroundColor, borderColor, labels) {
+  var scriptElement = document.createElement('script');
+  scriptElement.type = 'text/javascript';
+  scriptElement.src = `../static/js/dashboard_pdf.js?data=${encodeURIComponent(JSON.stringify(data))}&backgroundColor=${encodeURIComponent(JSON.stringify(backgroundColor))}&borderColor=${encodeURIComponent(JSON.stringify(borderColor))}&labels=${encodeURIComponent(JSON.stringify(labels))}`;
+  document.body.appendChild(scriptElement);
+}

static/js/sentence_fr.js

@@ -0,0 +1,253 @@
+var chartData;
+function generateUniqueId() {
+    return 'chart-' + Date.now(); // Utilisez un timestamp comme identifiant unique
+}
+
+function submitForm() {
+    event.preventDefault(); // Prevent the default form submission
+
+    var form = document.getElementById('sentenceForm');
+    var textarea = document.getElementById("ocr-result");
+
+    // Check if the textarea is empty
+    if (textarea.value.trim() === "") {
+        textarea.setCustomValidity("Input is required."); // Set custom validation message
+        textarea.reportValidity(); // Display the validation message
+        return; // Do not proceed with form submission
+    } else {
+        textarea.setCustomValidity(""); // Clear any previous validation message
+    }
+$
+    var formData = new FormData(form);
+
+    // Hide the presentation div
+    var presentationDiv = document.getElementById('presentation');
+    presentationDiv.classList.add('d-none');
+
+    // Send a POST request to the Flask route with the form data
+    fetch('/sentence_fr', {
+        method: 'POST',
+        body: formData
+    })
+        .then(response => response.text())
+        .then(data => {
+
+            // Reset the textarea height to its initial value
+            var textarea = document.getElementById("ocr-result");
+            textarea.style.height = "50px";
+
+            // Add the new user message to the chat conversation
+            var userMessageElement = createUserMessageElement(formData.get('text'));
+            var chatConversation = document.querySelector('.chat-conversation-content .os-content');
+            chatConversation.appendChild(userMessageElement);
+
+            // Create a new message element for Flask response
+            var flaskResponseElement = createFlaskResponseElement(data);
+            // Append the Flask response as a left message to the chat conversation
+            chatConversation.appendChild(flaskResponseElement);
+            var canvasElement = document.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
+            chartData = canvasElement.getAttribute('data-chart');
+            var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
+            var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
+            var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
+            var labels = JSON.parse(chartData).labels.slice(0, 5);
+            // Scroll to the bottom of the chat conversation
+            addAutoResize();
+            scrollDown();
+            // Clear the textarea after submitting
+            form.reset();
+            // Create a new canvas element for the new chart
+            var canvasId = generateUniqueId();
+            var canvasHTML = document.getElementById('bestSellers#');
+            canvasHTML.id = generateUniqueId();
+            canvasId = canvasHTML.id;
+
+            // Update the new chart with data
+            updateChart(canvasId);
+        })
+        .catch(error => console.error('Error:', error));
+}
+function updateChart(canvasId) {
+    var canvas = document.getElementById(canvasId);
+    var chartData = JSON.parse(canvas.dataset.chart);
+    var data = chartData.datasets[0].data.slice(0, 5).map(function(element) {
+        return parseFloat(element).toFixed(2);
+    });
+    var backgroundColor = chartData.datasets[0].backgroundColor.slice(0,5);
+    var borderColor  = chartData.datasets[0].borderColor.slice(0,5);
+    var labels = chartData.labels.slice(0,5);
+    var Data = {
+        datasets: [{
+            data: data,
+            backgroundColor: 
+                backgroundColor
+            ,
+            borderColor: backgroundColor,
+        }],
+        // These labels appear in the legend and in the tooltips when hovering different arcs
+        labels: labels
+    };
+    var pieChart = new Chart(canvas, {
+        type: 'doughnut',
+        data: Data,
+        options: {
+            responsive: true, // Rendre le graphique responsive
+            cutoutPercentage: 80, // Définir le pourcentage de découpe
+            legend: {
+                display: false, // Masquer la légende
+            },
+            animation: {
+                animateScale: true,
+                animateRotate: true
+            },
+            plugins: {
+                datalabels: {
+                    display: false,
+                    align: 'center',
+                    anchor: 'center'
+                }
+            }
+        }
+    });
+}
+
+
+function handleEnter(event) {
+    if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault(); // Prevent default behavior (line break)
+        submitForm(); // Submit the form asynchronously
+    }
+}
+
+
+document.getElementById('sentenceForm').addEventListener('submit', function (event) {
+    event.preventDefault(); // Prevent the form from submitting normally
+    var form = event.target;
+    var formData = new FormData(form);
+
+    // Hide the presentation div
+    var presentationDiv = document.getElementById('presentation');
+    presentationDiv.classList.add('d-none');
+
+    // Send a POST request to the Flask route with the form data
+    fetch('/sentence_fr', {
+        method: 'POST',
+        body: formData
+    })
+        .then(response => response.text())
+        .then(data => {
+
+            // Reset the textarea height to its initial value
+            var textarea = document.getElementById("ocr-result");
+            textarea.style.height = "50px";
+            // Add the new user message to the chat conversation
+            var userMessageElement = createUserMessageElement(formData.get('text'));
+            var chatConversation = document.querySelector('.chat-conversation-content .os-content');
+            chatConversation.appendChild(userMessageElement);
+
+            // Create a new message element for Flask response
+            var flaskResponseElement = createFlaskResponseElement(data);
+
+            // Append the Flask response as a left message to the chat conversation
+            chatConversation.appendChild(flaskResponseElement);
+            var canvasElement = document.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
+            chartData = canvasElement.getAttribute('data-chart');
+            var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
+            var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
+            var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
+            var labels = JSON.parse(chartData).labels.slice(0, 5);
+            addAutoResize();
+            scrollDown();
+            // Clear the textarea after submitting
+            form.reset();
+            // Create a new canvas element for the new chart
+            var canvasId = generateUniqueId();
+            var canvasHTML = document.getElementById('bestSellers#');
+            canvasHTML.id = generateUniqueId();
+            canvasId = canvasHTML.id;
+
+            // Update the new chart with data
+            updateChart(canvasId);
+        })
+        .catch(error => console.error('Error:', error));
+});
+
+// Function to create a message element for user's message
+function createUserMessageElement(message) {
+    var userMessageElement = document.createElement('div');
+    userMessageElement.classList.add('d-flex', 'justify-content-end', 'text-end', 'mb-1');
+    var userMessageSubElement = document.createElement('div');
+    userMessageSubElement.classList.add('w-100');
+    var userMessageContainer = document.createElement('div');
+    userMessageContainer.classList.add('d-flex', 'flex-column', 'align-items-end');
+    // Add message content
+    var userMessageContent = document.createElement('div');
+    userMessageContent.classList.add('bg-primary', 'text-white', 'p-2', 'px-3', 'rounded-2', 'mw-80');
+    var userMessageText = document.createTextNode(message);
+    userMessageContent.appendChild(userMessageText);
+    userMessageContainer.appendChild(userMessageContent);
+    userMessageSubElement.appendChild(userMessageContainer);
+    userMessageElement.appendChild(userMessageSubElement);
+    return userMessageElement;
+}
+
+// Function to create a message element for Flask response
+function createFlaskResponseElement(response) {
+    var flaskResponseElement = document.createElement('div');
+    flaskResponseElement.classList.add('d-flex', 'mb-1');
+    var flaskAvatarElement = document.createElement('div');
+    flaskAvatarElement.classList.add('flex-shrink-0', 'avatar', 'avatar-xs', 'me-2');
+    var flaskAvatarImg = document.createElement('img');
+    flaskAvatarImg.classList.add('avatar-img', 'rounded-circle');
+    flaskAvatarImg.setAttribute('src', '../static/icons/logo_header_128x128.png');
+    flaskAvatarElement.appendChild(flaskAvatarImg);
+    var flaskMessageContent = document.createElement('div');
+    flaskMessageContent.classList.add('flex-grow-1');
+    flaskMessageContent.innerHTML = response;
+    flaskResponseElement.appendChild(flaskAvatarElement);
+    flaskResponseElement.appendChild(flaskMessageContent);
+    return flaskResponseElement;
+}
+// Function to reload the dashboard.js file with chartData
+function reloadDashboardScript(data, backgroundColor, borderColor, labels) {
+    // Create a new script element
+    var scriptElement = document.createElement('script');
+    scriptElement.type = 'text/javascript';
+    scriptElement.onload = function () {
+        initializeChart(data, backgroundColor, borderColor, labels);
+    };
+    // Add chartData to the script source as a query parameter
+    scriptElement.src = `../static/js/dashboard_sentence.js?data=${data}&backgroundColor=${backgroundColor}&borderColor=${borderColor}&labels=${labels}`;
+
+    // Append the script element to the body
+    document.body.appendChild(scriptElement);
+}
+// START: 12 Auto resize textarea
+function addAutoResize() {
+    document.querySelectorAll('[data-autoresize]').forEach(function (element) {
+        element.style.boxSizing = 'border-box';
+        var offset = element.offsetHeight - element.clientHeight;
+        element.addEventListener('input', function (event) {
+            event.target.style.height = 'auto';
+            event.target.style.height = event.target.scrollHeight + offset + 'px';
+        });
+        element.removeAttribute('data-autoresize');
+    });
+}
+// SCROLLDOWN
+function scrollDown() {
+    var objDiv = document.getElementsByClassName("os-viewport os-viewport-native-scrollbars-invisible");
+    var index = 0;
+    while (index < objDiv.length) {
+        objDiv[index].scrollTop = objDiv[index].scrollHeight;
+        index++;
+    }
+}
+
+// RESIZE TEXTAREA
+function resizeTextarea(textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+}
+
+

templates/pdf.html

@@ -2,7 +2,7 @@
 <html lang="en-US">
 
 <head>
-    <title>OCR</title>
+    <title>Pdf Categorization</title>
     <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png">
     <link rel="stylesheet" href="../static/css/style2.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -45,6 +45,14 @@
                     <li class="nav-item nav-pills nav-pills-ocr">
                         <a class="nav-item nav-link " href="voice">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">language</a>
+                        <ul class="dropdown-menu" aria-labelledby="accounntMenu">
+                            <li> <a class="dropdown-item " href="pdf_fr"><img src="../static/icons/France.svg"
+                                        class="avatar avatar" style="height: 20px;" alt="French flag"> French </a> </li>
+                        </ul>
+                    </li>
                 </ul>
             </div>
             <!-- Main navbar END -->
@@ -79,12 +87,12 @@
                         <div class="col-12 d-flex justify-content-center">
                             <div class="col-sm-12 d-inline align-items-center" style="height: 175px; width: 229px;">
                                 <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">Get more insights about your pdf 📑📑.</h5>
                             </div>
-                            
+
                         </div>
                     </div>
                     <div class="card-body d-none" id="dynamic">
@@ -128,6 +136,36 @@
 
                 <!-- Right sidebar 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'>
+                    <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="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>
+                                <div class="text-center">
+                                    <div class="col-12 d-flex justify-content-center">
+                                        <div class="col-sm-12 d-inline align-items-center" id="classifiedText">
+                                            {% if sentences_prediction %}
+                                            {% for sentence, color in sentences_prediction.items() %}
+                                            <span class="text-bold text-start bg-{{color[1]}}">
+                                                {{sentence}}
+                                            </span>
+                                            {% endfor %}
+                                            {% endif %}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div>
     </main>
 

templates/pdf_fr.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <title>Pdf Categorization</title>
+    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png">
+    <link rel="stylesheet" href="../static/css/style2.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="../static/css/vendor.bundle.base.css">
+
+
+</head>
+
+<body style="background-color: #1F2020;">
+    <nav class="navbar navbar-expand-lg bg-ocr mb-5">
+        <div class="container h-100">
+            <!-- Logo START -->
+            <a class="navbar-brand" href="pdf_fr">
+                <img class="navbar-brand-item" src="../static/icons/avignon_universite_blanc_RVB.png" alt="logo">
+            </a>
+            <!-- Logo END -->
+
+            <!-- Responsive navbar toggler -->
+            <button class="navbar-toggler ms-auto icon-md btn btn-light p-0 collapsed" type="button"
+                data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
+                aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-animation">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </button>
+
+            <!-- Main navbar START -->
+            <div class="navbar-collapse collapse" id="navbarCollapse">
+                <ul class="navbar-nav navbar-nav-scroll ms-auto p-xl-0">
+                    <!-- Nav item 1 Demos -->
+                    <li class="nav-item nav-pills nav-pills-ocr">
+                        <a class="nav-item nav-link active mb-5" href="pdf_fr">Classificateur PDF</a>
+                    </li>
+                    <!-- Nav item 2 Pages -->
+                    <li class="nav-item nav-pills nav-pills-ocr">
+                        <a class="nav-item nav-link " href="sentence_fr">Classificateur de texte</a>
+                    </li>
+                    <li class="nav-item nav-pills nav-pills-ocr">
+                        <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>
+                </ul>
+            </div>
+            <!-- Main navbar END -->
+        </div>
+    </nav>
+    <!-- Container START -->
+    <main>
+        <div class="row d-sm-flex justify-content-center ">
+            <div class="col-lg-6 col-11 mb-lg-0 mb-5">
+                <form class="" action="/pdf/upload" style="height: 88%;" id="upload-form" method="POST"
+                    enctype="multipart/form-data">
+
+                    <div class="drag-image" id="dropArea">
+                        <div class="text-center ">
+                            <h6 class="text-white-50 mb-3">Glisser-déposer le PDF ici</h6>
+                            <span class="text-white-50">OU</span>
+                            <h6 class="text-white-50 mt-3">Cliquez ici</h6>
+                            <input id="file-input" type="file" name="image" accept=".pdf" hidden>
+                        </div>
+                    </div>
+                    <div class="d-flex justify-content-center">
+                        <button class="btn me-3 btn-ocr" id="reset" type="button" onclick="deleteCurrentFile()"> <i
+                                class="bi bi-pencil-fill pe-1"></i> Supprimer </button>
+                        <button type="submit" class="btn ms-3 btn-ocr">Envoyer</button>
+                    </div>
+                </form>
+            </div>
+            <!-- la categorie la plus dominante-->
+            <div class="col-lg-5  col-xl-5 col-11 mt-5 mt-lg-0">
+                <div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                    <div class="card-body text-center" id="static">
+                        <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=""> 
+                                </div>
+                                <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">
+                        <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">
+                                    {% 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="">
+                    <textarea id="category-result" readonly>{{predicted_class}}</textarea>
+                </div> -->
+
+                <div class="result mt-3">
+                    <h6 class="text-start">Texte extrait</h6>
+                    <textarea id="ocr-result" readonly>{{extracted_text}}</textarea>
+                    <button id="copy-btn" class="btn btn-ocr">Copier</button>
+                </div>
+
+                <!-- Right sidebar 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'>
+                    <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="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>
+                                <div class="text-center">
+                                    <div class="col-12 d-flex justify-content-center">
+                                        <div class="col-sm-12 d-inline align-items-center" id="classifiedText">
+                                            {% if sentences_prediction %}
+                                            {% for sentence, color in sentences_prediction.items() %}
+                                            <span class="text-bold text-start bg-{{color[1]}}">
+                                                {{sentence}}
+                                            </span>
+                                            {% endfor %}
+                                            {% endif %}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- Container END -->
+    <script id="dashboard-pdf-script" src="../static/js/dashboard_pdf.js"></script>
+    <script src="../static/js/Chart.min.js"></script>
+    <script src="../static/js/pdf_fr.js" type="text/javascript"></script>
+    <script src="../static/js/vendor.bundle.base.js"></script>
+
+</body>
+
+</html>

templates/response_fr_sentence.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Include jQuery library -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+    <div class="d-flex flex-column align-items-start">
+        <div class="text-secondary p-2 px-3 rounded-2">
+            <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-6 col-6">
+                            <ul class="graphl-legend-rectangle">
+                                <!-- Populate categories dynamically -->
+                                <!-- class_label has two elements : the class and the color (for display)-->
+                                {% 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-6 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">{{ predicted_class[0] }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        var chartData = {{ chart_data | tojson | safe}};
+    </script>
+    <script src="../static/js/dashboard_sentence.js"></script>    
+</body>
+</html>

templates/sentence.html

@@ -2,7 +2,7 @@
 <html lang="en-US">
 
 <head>
-    <title>OCR</title>
+    <title>Chat Categorization</title>
     <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png">
     <link rel="stylesheet" href="../static/css/style2.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -47,6 +47,12 @@
                         <li class="nav-item nav-pills nav-pills-ocr">
                             <a class="nav-item nav-link " href="voice">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">language</a>
+                            <ul class="dropdown-menu" aria-labelledby="accounntMenu">
+                                <li> <a class="dropdown-item " href="sentence_fr"><img src="../static/icons/France.svg" class="avatar avatar" style="height: 20px;" alt="French flag"> French</a> </li>
+                            </ul>
+                        </li>
                     </ul>
                 </div>
                 <!-- Main navbar END -->
@@ -61,7 +67,7 @@
             <div class="justify-content-lg-around justify-content-xl-center justify-content-md-between">
 
                 <!-- Chat conversation START -->
-                <div class="card card-chat bg-ocr" >
+                <div class="card card-chat bg-ocr">
                     <div class="card-body h-100 bg-ocr rounded-2">
                         <div class="tab-content py-0 mb-0 h-100" id="chatTabsContent">
                             <!-- Conversation item START -->
@@ -75,17 +81,16 @@
                                             style="overflow-y: scroll;">
                                             <div class="os-content" style="padding: 0px; height: 100%; width: 100%;">
                                                 <!-- Chat message right -->
-                                                <div class="d-inline mb-1 align-content-between position-relative top-xl-45 top-lg-0 top-lg-30" id = "presentation">
+                                                <div class="d-inline mb-1 align-content-between position-relative top-xl-45 top-lg-0 top-lg-30"
+                                                    id="presentation">
                                                     <div class="flex-grow-1 row">
                                                         <div class="w-100 col-1 text-center">
                                                             <div class="d-flex flex-column">
                                                                 <div class="text-secondary p-2 px-3 rounded-2">
                                                                     <div class="card"
                                                                         style="background-color: #303131;">
-                                                                        <div
-                                                                            class="card-body">
-                                                                            <div
-                                                                                class="">
+                                                                        <div class="card-body">
+                                                                            <div class="">
                                                                                 <div
                                                                                     class="flex-shrink-0 avatar avatar-lg mb-lg-3 ">
                                                                                     <img class="avatar-img rounded-circle"
@@ -106,14 +111,17 @@
                                                             <div class="flex-grow-1">
                                                                 <div class="w-100">
                                                                     <div class="d-flex flex-column align-items-start">
-                                                                        <div class="text-secondary p-2 px-3 rounded-2 w-100">
+                                                                        <div
+                                                                            class="text-secondary p-2 px-3 rounded-2 w-100">
                                                                             <div class="card"
                                                                                 style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
                                                                                 <div class="card-body">
                                                                                     <h5 class="card-title text-white">
                                                                                         Text Classifier</h5>
                                                                                     <div class="mb-lg-0 text-white-50">
-                                                                                        Enter a sentence or paragraph in the text box below to discover its category.
+                                                                                        Enter a sentence or paragraph in
+                                                                                        the text box below to discover
+                                                                                        its category.
                                                                                     </div>
 
                                                                                 </div>
@@ -127,14 +135,21 @@
                                                             <div class="flex-grow-1">
                                                                 <div class="w-100">
                                                                     <div class="d-flex flex-column align-items-start">
-                                                                        <div class="text-secondary p-2 px-3 rounded-2 w-100">
+                                                                        <div
+                                                                            class="text-secondary p-2 px-3 rounded-2 w-100">
                                                                             <div class="card"
                                                                                 style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
                                                                                 <div class="card-body">
                                                                                     <h5 class="card-title text-white">
                                                                                         Example</h5>
                                                                                     <div class="mb-lg-0 text-white-50">
-                                                                                        The sentence <span class="text-white">'Chatbots use AI to communicate with users'</span> is categorized as <span class="text-white"> 'Artificial Intelligence' </span> .
+                                                                                        The sentence <span
+                                                                                            class="text-white">'Chatbots
+                                                                                            use AI to communicate with
+                                                                                            users'</span> is categorized
+                                                                                        as <span class="text-white">
+                                                                                            'Artificial Intelligence'
+                                                                                        </span> .
                                                                                     </div>
 
                                                                                 </div>
@@ -172,14 +187,16 @@
                     </div>
 
                     <div class="card-footer" style="background-color: #242525;">
-                        <form class="d-flex align-items-center" action="/sentence" method="post" id="sentenceForm" onsubmit="submitForm(event)">
+                        <form class="d-flex align-items-center" action="/sentence" method="post" id="sentenceForm"
+                            onsubmit="submitForm(event)">
                             <textarea class="form-control mb-sm-0 mb-3" id="ocr-result" name="text" data-autoresize=""
                                 placeholder="Type your text" rows="1" style="height: 50px;box-sizing: border-box;
-                                resize: none; max-height: 120px;" onclick="addAutoResize()" onkeydown="handleEnter(event)" required></textarea>
+                                resize: none; max-height: 120px;" onclick="addAutoResize()"
+                                onkeydown="handleEnter(event)" required></textarea>
                             <button class="btn btn-sm btn-sentence ms-2" type="submit"><img class="avatar avatar-xs"
                                     src="../static/icons/avignon_universite_blanc_RVB-1.png"></button>
                         </form>
-                    </div>                     
+                    </div>
                 </div>
                 <!-- Chat conversation END -->
             </div> <!-- Row END -->

templates/sentence_fr.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <title>Chat Categorization</title>
+    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png">
+    <link rel="stylesheet" href="../static/css/style2.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="../static/css/vendor.bundle.base.css">
+    <link rel="stylesheet" href="../static/css/OverlayScrollbars.min.css">
+
+
+</head>
+
+<body style="background-color: #1F2020">
+    <header>
+        <nav class="navbar navbar-expand-lg bg-ocr mb-5">
+            <div class="container h-100">
+                <!-- Logo START -->
+                <a class="navbar-brand" href="pdf_fr">
+                    <img class="navbar-brand-item" src="../static/icons/avignon_universite_blanc_RVB.png" alt="logo">
+                </a>
+                <!-- Logo END -->
+
+                <!-- Responsive navbar toggler -->
+                <button class="navbar-toggler ms-auto icon-md btn btn-light p-0 collapsed" type="button"
+                    data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-animation">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
+                </button>
+
+                <!-- Main navbar START -->
+                <div class="navbar-collapse collapse" id="navbarCollapse">
+                    <ul class="navbar-nav navbar-nav-scroll ms-auto p-xl-0">
+                        <!-- Nav item 1 Demos -->
+                        <li class="nav-item nav-pills nav-pills-ocr">
+                            <a class="nav-item nav-link" href="pdf_fr">Classificateur PDF</a>
+                        </li>
+                        <!-- Nav item 2 Pages -->
+                        <li class="nav-item nav-pills nav-pills-ocr">
+                            <a class="nav-item nav-link active" href="sentence_fr">Classificateur de texte</a>
+                        </li>
+                        <li class="nav-item nav-pills nav-pills-ocr">
+                            <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="sentence"><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 -->
+            </div>
+        </nav>
+    </header>
+
+    <main class="pt-3 pt-md-5 pb-md-5 pt-lg-0 mt-3    ">
+
+        <!-- Container START -->
+        <div class="container mt-lg-7 ">
+            <div class="justify-content-lg-around justify-content-xl-center justify-content-md-between">
+
+                <!-- Chat conversation START -->
+                <div class="card card-chat bg-ocr">
+                    <div class="card-body h-100 bg-ocr rounded-2">
+                        <div class="tab-content py-0 mb-0 h-100" id="chatTabsContent">
+                            <!-- Conversation item START -->
+                            <div class="fade tab-pane show active h-100" id="chat-1" role="tabpanel"
+                                aria-labelledby="chat-1-tab">
+                                <!-- Chat conversation START -->
+                                <div
+                                    class="chat-conversation-content custom-scrollbar os-host os-theme-dark os-host-overflow os-host-overflow-y os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-transition h-100">
+                                    <div class="os-padding">
+                                        <div class="os-viewport os-viewport-native-scrollbars-invisible"
+                                            style="overflow-y: scroll;">
+                                            <div class="os-content" style="padding: 0px; height: 100%; width: 100%;">
+                                                <!-- Chat message right -->
+                                                <div class="d-inline mb-1 align-content-between position-relative top-xl-45 top-lg-0 top-lg-30"
+                                                    id="presentation">
+                                                    <div class="flex-grow-1 row">
+                                                        <div class="w-100 col-1 text-center">
+                                                            <div class="d-flex flex-column">
+                                                                <div class="text-secondary p-2 px-3 rounded-2">
+                                                                    <div class="card"
+                                                                        style="background-color: #303131;">
+                                                                        <div class="card-body">
+                                                                            <div class="">
+                                                                                <div
+                                                                                    class="flex-shrink-0 avatar avatar-lg mb-lg-3 ">
+                                                                                    <img class="avatar-img rounded-circle"
+                                                                                        src="../static/icons/logo_header_128x128.png"
+                                                                                        alt="">
+                                                                                </div>
+                                                                                <h4 class="text-white">Comment puis-je vous aider aujourd'hui ?</h4>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row d-flex  justify-content-center">
+                                                        <div class="col-lg-6 ">
+                                                            <div class="flex-grow-1">
+                                                                <div class="w-100">
+                                                                    <div class="d-flex flex-column align-items-start">
+                                                                        <div
+                                                                            class="text-secondary p-2 px-3 rounded-2 w-100">
+                                                                            <div class="card"
+                                                                                style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                                                                                <div class="card-body">
+                                                                                    <h5 class="card-title text-white">
+                                                                                        Classificateur de texte</h5>
+                                                                                    <div class="mb-lg-0 text-white-50">
+                                                                                        Saisissez une phrase ou un paragraphe dans la zone de texte ci-dessous pour découvrir sa catégorie.
+                                                                                    </div>
+
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-lg-6 ">
+                                                            <div class="flex-grow-1">
+                                                                <div class="w-100">
+                                                                    <div class="d-flex flex-column align-items-start">
+                                                                        <div
+                                                                            class="text-secondary p-2 px-3 rounded-2 w-100">
+                                                                            <div class="card"
+                                                                                style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                                                                                <div class="card-body">
+                                                                                    <h5 class="card-title text-white">
+                                                                                        Exemple</h5>
+                                                                                    <div class="mb-lg-0 text-white-50">
+                                                                                        La phrase  <span
+                                                                                            class="text-white">'Les chatbots utilisent l'IA pour communiquer avec les utilisateurs'</span> est classée <span class="text-white">
+                                                                                            'Artificial Intelligence'
+                                                                                        </span> .
+                                                                                    </div>
+
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Chat message left -->
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden">
+                                        <div class="os-scrollbar-track os-scrollbar-track-off">
+                                            <div class="os-scrollbar-handle"
+                                                style="width: 100%; transform: translate(0px, 0px);"></div>
+                                        </div>
+                                    </div>
+                                    <div class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden">
+                                        <div class="os-scrollbar-track os-scrollbar-track-off">
+                                            <div class="os-scrollbar-handle"
+                                                style="height: 32.4192%; transform: translate(0px, 0px);"></div>
+                                        </div>
+                                    </div>
+                                    <div class="os-scrollbar-corner"></div>
+                                </div>
+                                <!-- Chat conversation END -->
+                            </div>
+                            <!-- Conversation item END -->
+                        </div>
+                    </div>
+
+                    <div class="card-footer" style="background-color: #242525;">
+                        <form class="d-flex align-items-center" action="/sentence_fr" method="post" id="sentenceForm"
+                            onsubmit="submitForm(event)">
+                            <textarea class="form-control mb-sm-0 mb-3" id="ocr-result" name="text" data-autoresize=""
+                                placeholder="Saisir votre texte" rows="1" style="height: 50px;box-sizing: border-box;
+                                resize: none; max-height: 120px;" onclick="addAutoResize()"
+                                onkeydown="handleEnter(event)" required></textarea>
+                            <button class="btn btn-sm btn-sentence ms-2" type="submit"><img class="avatar avatar-xs"
+                                    src="../static/icons/avignon_universite_blanc_RVB-1.png"></button>
+                        </form>
+                    </div>
+                </div>
+                <!-- Chat conversation END -->
+            </div> <!-- Row END -->
+            <!-- =======================
+            Chat END -->
+
+        </div>
+        <!-- Container END -->
+
+    </main>
+    <!-- Container END -->
+    <script src="../static/js/sentence_fr.js" type="text/javascript"></script>
+    <script src="../static/js/vendor.bundle.base.js"></script>
+    <script src="../static/js/Chart.min.js"></script>
+    <!-- Custom js for this page-->
+
+    <script src="../static/js/bootstrap.bundle.min.js"></script>
+    <script src="../static/js/OverlayScrollbars.min.js"></script>
+    <script>
+        // START: 12 Auto resize textarea
+        function addAutoResize() {
+            document.querySelectorAll('[data-autoresize]').forEach(function (element) {
+                element.style.boxSizing = 'border-box';
+                var offset = element.offsetHeight - element.clientHeight;
+                element.addEventListener('input', function (event) {
+                    event.target.style.height = 'auto';
+                    event.target.style.height = event.target.scrollHeight + offset + 'px';
+                });
+                element.removeAttribute('data-autoresize');
+            });
+        }
+        // END: Auto resize textarea
+    </script>
+</body>
+
+</html>

templates/voice.html

@@ -41,6 +41,12 @@
                     <li class="nav-item nav-pills nav-pills-ocr">
                         <a class="nav-item nav-link active" href="voice">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">language</a>
+						<ul class="dropdown-menu" aria-labelledby="accounntMenu">
+							<li> <a class="dropdown-item " href="voice_fr"><img src="../static/icons/France.svg" class="avatar avatar" style="height: 20px;" alt="French flag"> French</a> </li>
+						</ul>
+					</li>
                 </ul>
             </div>
             <!-- Main navbar END -->

templates/voice_fr.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <title>Speech Transcription</title>
+    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png">
+    <link rel="stylesheet" href="../static/css/style2.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="../static/css/vendor.bundle.base.css">
+</head>
+
+<body style="background-color: #1F2020;">
+    <nav class="navbar navbar-expand-lg bg-ocr mb-5">
+        <div class="container h-100">
+            <!-- Logo START -->
+            <a class="navbar-brand" href="pdf_fr">
+                <img class="navbar-brand-item" src="../static/icons/avignon_universite_blanc_RVB.png" alt="logo">
+            </a>
+            <!-- Logo END -->
+
+            <!-- Responsive navbar toggler -->
+            <button class="navbar-toggler ms-auto icon-md btn btn-light p-0 collapsed" type="button"
+                data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
+                aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-animation">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </button>
+
+            <!-- Main navbar START -->
+            <div class="navbar-collapse collapse" id="navbarCollapse">
+                <ul class="navbar-nav navbar-nav-scroll ms-auto p-xl-0">
+                    <!-- Nav item 1 Demos -->
+                    <li class="nav-item nav-pills nav-pills-ocr">
+                        <a class="nav-item nav-link" href="pdf_fr">Classificateur PDF</a>
+                    </li>
+                    <!-- Nav item 2 Pages -->
+                    <li class="nav-item nav-pills nav-pills-ocr">
+                        <a class="nav-item nav-link " href="sentence_fr">Classificateur de texte</a>
+                    </li>
+                    <li class="nav-item nav-pills nav-pills-ocr">
+                        <a class="nav-item nav-link active" 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="voice"><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 -->
+        </div>
+    </nav>
+
+    <main class="pt-3 pt-md-5 pb-md-5 pt-lg-0 mt-3">
+        <div class="container mt-lg-7">
+            <div class="row">
+                <div class="col-lg-6 mb-4">
+                    <div class="card bg-ocr h-100">
+                        <div class="card-body">
+                            <h5 class="card-title text-white">Enregistrement du discours</h5>
+                            <p class="card-text text-white-50">Cliquez sur le bouton pour commencer à enregistrer votre discours.</p>
+                            <div class="mt-auto text-center">
+                                <button id="startRecord" class="btn btn-ocr">Démarrer l'enregistrement</button>
+                                <button id="stopRecord" class="btn btn-green" disabled>Arrêter l'enregistrement</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 mb-4">
+                    <div class="card bg-ocr">
+                        <div class="card-body">
+                            <h5 class="card-title text-white">Télécharger un fichier audio</h5>
+                            <p class="card-text text-white-50">Cliquez ou faites un glisser-déposer pour télécharger un fichier audio.</p>
+                            <div class="file-upload-wrapper" id="fileUploadWrapper">
+                                <input type="file" id="audioFileInput" accept="audio/*">
+                                <div class="file-upload-text">
+                                    <i class="bi bi-cloud-upload" style="font-size: 2rem;"></i>
+                                    <p>Cliquez ou glissez le fichier audio ici</p>
+                                    <p class="file-name"></p>
+                                </div>
+                            </div>
+                            <div class="text-center">
+                                <button id="uploadAudio" class="btn btn-ocr mt-3 text-center">Télécharger et transcrire</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <h1 class="text-center text-white-50"> R��sultats</h1>
+            <div class="card" id = 'static' style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
+                <div class="card-body text-center" id="static">
+                    <div class="col-12 d-flex justify-content-center">
+                        <div class="col-sm-12 d-inline align-items-center" style="height: 175px; width: 290px;">
+                            <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=""> 
+                            </div>
+                            <h5 class="card-title text-white-50">Obtenez plus d'informations sur votre discours 📣📢.</h5>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+            <div class="row d-none" id = 'dynamic'>
+                <div class="col-4">
+                    <div class="nav flex-column position-sticky top-10 shadow-lg" style="background-color: #222424;">
+                        <div class="card mb-3" 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">
+                                            {% if class_probabilities %}
+                                                {% 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 %}
+                                            {% endif %}
+                                        </ul>
+                                    </div>
+                                    <div class="col-sm-5 grid-margin col-6">
+                                        <canvas class="bestSellers" data-chart='{{ chart_data | tojson}}'
+                                            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] if predicted_class else ""
+                                        }}</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>
+                
+                <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">Texte transcrit et classifié</h5>
+                            <div id="transcribedText" class="text-white-50 mb-4"></div>
+                            <div id="static" class="text-center">
+                                <div class="col-12 d-flex justify-content-center">
+                                    <div class="col-sm-12 d-inline align-items-center" id="classifiedText">
+                                        {% if sentences_prediction %}
+                                            {% for sentence, color in sentences_prediction.items() %}
+                                            <span class="text-bold text-start bg-{{color[1]}}">
+                                                {{sentence}}
+                                            </span>
+                                            {% endfor %}
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <div id="loadingIndicator" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999;">
+        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white;">
+            Processing...
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="../static/js/voice.js" type="text/javascript"></script>
+    <script src="../static/js/vendor.bundle.base.js"></script>
+</body>
+
+</html>