Update app.py

app.py

@@ -30,8 +30,8 @@ css = """
     size:1.2em;
 }
 :target {
-    background-color: #CCF3DF; /* Change the text color to red */
-  }
+    background-color: #CCF3DF;
+}
 .source {
     float:left;
     max-width:17%;
@@ -42,16 +42,16 @@ css = """
     cursor: pointer;
     font-variant-position: super;
     color: #97999b;
-  }
+}
   
-  .tooltip:hover::after {
+.tooltip:hover::after {
     content: attr(data-text);
     position: absolute;
     left: 0;
-    top: 120%; /* Adjust this value as needed to control the vertical spacing between the text and the tooltip */
-    white-space: pre-wrap; /* Allows the text to wrap */
-    width: 500px; /* Sets a fixed maximum width for the tooltip */
-    max-width: 500px; /* Ensures the tooltip does not exceed the maximum width */
+    top: 120%;
+    white-space: pre-wrap;
+    width: 500px;
+    max-width: 500px;
     z-index: 1;
     background-color: #f9f9f9;
     color: #000;
@@ -59,10 +59,33 @@ css = """
     border-radius: 5px;
     padding: 5px;
     display: block;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds a subtle shadow for better visibility */
-  }"""
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+/* New styles for diff */
+.deleted {
+    background-color: #ffcccb;
+    text-decoration: line-through;
+}
+.inserted {
+    background-color: #90EE90;
+}
+"""
 
-#Curtesy of chatgpt
+#Curtesy of claude
+def generate_html_diff(old_text, new_text):
+    d = difflib.Differ()
+    diff = list(d.compare(old_text.split(), new_text.split()))
+    
+    html_diff = []
+    for word in diff:
+        if word.startswith('  '):
+            html_diff.append(word[2:])
+        elif word.startswith('- '):
+            html_diff.append(f'<span style="background-color: #ffcccb; text-decoration: line-through;">{word[2:]}</span>')
+        elif word.startswith('+ '):
+            html_diff.append(f'<span style="background-color: #90EE90;">{word[2:]}</span>')
+    
+    return ' '.join(html_diff)
 
 # Class to encapsulate the Falcon chatbot
 class MistralChatBot:
@@ -71,12 +94,16 @@ class MistralChatBot:
 
     def predict(self, user_message):
         sampling_params = SamplingParams(temperature=0.9, top_p=0.95, max_tokens=4000, presence_penalty=0, stop=["#END#"])
-        detailed_prompt = correction = f"### TEXT ###\n{user_message}\n\n### CORRECTION ###\n"
+        detailed_prompt = f"### TEXT ###\n{user_message}\n\n### CORRECTION ###\n"
         print(detailed_prompt)
         prompts = [detailed_prompt]
-        outputs = llm.generate(prompts, sampling_params, use_tqdm = False)
+        outputs = llm.generate(prompts, sampling_params, use_tqdm=False)
         generated_text = outputs[0].outputs[0].text
-        generated_text = '<h2 style="text-align:center">Réponse</h3>\n<div class="generation">' + generated_text + "</div>"
+        
+        # Generate HTML diff
+        html_diff = generate_html_diff(user_message, generated_text)
+        
+        generated_text = '<h2 style="text-align:center">Réponse</h3>\n<div class="generation">' + html_diff + "</div>"
         return generated_text
 
 # Create the Falcon chatbot instance