Adding switching between 4

app.py

@@ -206,33 +206,93 @@ IMAGE_GENERATION_HTML = """
 
 # ---- Page switching function ----
 def switch_content(choice):
+
     pages = {
         "Text Generation": TEXT_GENERATION_HTML,
         "Question and Answer": QUESTION_ANSWER_HTML,
         "Summarisation": SUMMARISATION_HTML,
         "Image Generation": IMAGE_GENERATION_HTML,
     }
+
     return pages.get(choice, TEXT_GENERATION_HTML)
-    
-nav_bar = gr.Radio(
-    choices=[
-        "Text Generation",
-        "Question and Answer",
-        "Summarisation",
-        "Image Generation"
-    ],
-    value="Text Generation",
-    label="Topics",
-    interactive=True
-)
-
-content_display = gr.HTML(TEXT_GENERATION_HTML)
-
-nav_bar.change(
-    fn=switch_content,
-    inputs=nav_bar,
-    outputs=content_display
-)
 
 
+# =========================================================
+# UI
+# =========================================================
+
+with gr.Blocks(head="""
+<script>
+document.addEventListener("mouseup", () => {
+
+    const selection = window.getSelection().toString().trim();
+
+    if (selection.length > 0) {
+
+        const textbox = document.querySelector(
+            'textarea[data-testid="textbox"]'
+        );
+
+        if (textbox) {
+
+            const nativeInputValueSetter =
+                Object.getOwnPropertyDescriptor(
+                    window.HTMLTextAreaElement.prototype,
+                    "value"
+                ).set;
+
+            nativeInputValueSetter.call(textbox, selection);
+
+            textbox.dispatchEvent(
+                new Event("input", { bubbles: true })
+            );
+        }
+    }
+});
+</script>
+""") as demo:
+
+    gr.Markdown("### 📘 Highlight text and ask GPT for help")
+
+    # ---- Navigation bar ----
+    nav_bar = gr.Radio(
+        choices=[
+            "Text Generation",
+            "Question and Answer",
+            "Summarisation",
+            "Image Generation"
+        ],
+        value="Text Generation",
+        label="Topics",
+        interactive=True
+    )
+
+    # ---- Main content ----
+    content_display = gr.HTML(TEXT_GENERATION_HTML)
+
+    nav_bar.change(
+        fn=switch_content,
+        inputs=nav_bar,
+        outputs=content_display
+    )
+
+    # ---- Selected text ----
+    selected_text = gr.Textbox(
+        label="Selected text",
+        placeholder="Highlight text above...",
+        lines=3,
+        interactive=True
+    )
+
+    # ---- Explain button ----
+    explain_btn = gr.Button("Explain selection 🧠")
+
+    output = gr.Markdown()
+
+    explain_btn.click(
+        fn=explain_text,
+        inputs=selected_text,
+        outputs=output,
+    )
+
 demo.launch(allowed_paths=["."])