integrated gradient highlighter plot under text

app.py

@@ -176,7 +176,7 @@ with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
             QLabel = gr.Label(label="Humanized")
-    
+
     with gr.Row():
         quillbot_highlighter_output = gr.HTML(label="Humanized Highlighter")
 
@@ -312,4 +312,8 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    demo.launch(share=True, auth=("polygraf-admin", "test@aisd"))
+    demo.launch(
+        share=True,
+        auth=("polygraf-admin", "test@aisd"),
+        allowed_paths=[".", "images"],
+    )

highlighter.py

@@ -64,4 +64,23 @@ def analyze_and_highlight(text, model_type):
         )
         highlighted_text += highlighted_sentence
 
+    if model_type == "bc":
+        gradient_labels = ["HUMAN", "AI"]
+    elif model_type == "quillbot":
+        gradient_labels = ["ORIGINAL", "HUMANIZED"]
+    else:
+        raise ValueError(f"Invalid model type: {model_type}")
+
+    highlighted_text = (
+        "<div>"
+        + highlighted_text
+        + "<div style='margin-top: 20px; text-align: center;'>"
+        + "<div style='position: relative; display: inline-block; width: 60%; height: 20px; background: linear-gradient(to right, #00FF00, #FFFFFF, #FF0000); font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif; font-size: 10px; font-weight: 600; color: #222; border-radius: 10px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);'>"
+        + f"<span style='position: absolute; left: 5px; top: 50%; transform: translateY(-50%); color: #000; font-weight: 600;'>{gradient_labels[0]}</span>"
+        + f"<span style='position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: #000; font-weight: 600;'>{gradient_labels[1]}</span>"
+        + "</div>"
+        + "</div>"
+        + "</div>"
+    )
+
     return highlighted_text