Update app.py

app.py

@@ -4,7 +4,6 @@ import os
 
 client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
 
-
 # ---- GPT explanation backend ----
 def explain_text(selected_text):
     if not selected_text or not selected_text.strip():
@@ -13,20 +12,10 @@ def explain_text(selected_text):
         response = client.responses.create(
             model="gpt-4.1-mini",
             input=[
-                {
-                    "role": "system",
-                    "content": (
-                        "You are an expert machine learning instructor. "
-                        "Explain concepts clearly and intuitively for learners with basic ML knowledge. "
-                        "Keep explanations concise and educational."
-                    ),
-                },
-                {
-                    "role": "user",
-                    "content": f'Explain this text from a learning resource:\n\n"""\n{selected_text}\n"""',
-                },
+                {"role": "system", "content": "You are an expert ML instructor. Explain clearly for beginners."},
+                {"role": "user", "content": f'Explain this text:\n"""{selected_text}"""'}
             ],
-            max_output_tokens=400,
+            max_output_tokens=400
         )
         return response.output_text
     except Exception as e:
@@ -77,52 +66,33 @@ HF_REFERENCE_HTML = """
         A story generation model can receive an input like "Once upon a time" and proceed to create a story-like text.
         If your generative model training data differs from your use case, you can train a causal language model from scratch.
     </p>
-    <h2>Task Variants</h2>
-    <h3>Completion Generation Models</h3>
-    <p>
-        A popular variant of Text Generation models predicts the next word given a bunch of words.
-        Common use cases include completing incomplete sentences, continuing a story, or generating code from a description.
-        The most popular models for this task are GPT-based models, Mistral or Llama series.
-    </p>
-    <h3>Text-to-Text Generation Models</h3>
-    <p>
-        These models are trained to learn the mapping between a pair of texts, for example translation from one language to another.
-        The most popular variants are NLLB, FLAN-T5, and BART, which handle summarization, translation, and text classification.
-    </p>
-    <h3>Language Model Variants</h3>
-    <p>When it comes to text generation, the underlying language model can come in several types:</p>
-    <ul>
-        <li><strong>Base models:</strong> Plain language models like Mistral 7B and Meta Llama-3-70b. Good for fine-tuning and few-shot prompting.</li>
-        <li><strong>Instruction-trained models:</strong> Trained to follow a broad range of instructions. Examples include Qwen 2 7B and Meta Llama 70B Instruct.</li>
-        <li><strong>Human feedback models:</strong> Extend base models using RLHF to align with human preferences for helpfulness, honesty, and harmlessness.</li>
-    </ul>
-    <h2>Inference</h2>
-    <p>
-        You can use the Transformers library text-generation pipeline to do inference with text generation models.
-        It takes an input text and generates a continuation of that text.
-    </p>
-    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
-from transformers import pipeline
-generator = pipeline('text-generation', model='gpt2')
-generator("Hello, I'm a language model,", max_length=30, num_return_sequences=3)
-    </pre>
-    <h2>Text Generation Inference</h2>
-    <p>
-        Text Generation Inference (TGI) is an open-source toolkit for serving LLMs, tackling challenges such as response time.
-        TGI powers inference solutions like Inference Endpoints and Hugging Chat, as well as multiple community projects.
-    </p>
 </div>
 """
 
-
 def switch_content(choice):
     return YOUR_WORK_HTML if choice == "My Work" else HF_REFERENCE_HTML
 
 
-# ---- All the magic: floating sticky button + popup tooltip ----
+# ---- Floating FAB + tooltip JS ----
 HEAD_HTML = """
 <style>
-/* Floating FAB style … same as before … */
+  #explain-fab {
+    position: fixed;
+    bottom: 36px;
+    right: 36px;
+    z-index: 99999;
+    padding: 12px 22px;
+    border-radius: 999px;
+    background: #1e1b4b;
+    color: #fff;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    opacity: 0;
+    transform: translateY(12px);
+    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
+  }
+  #explain-fab:hover:not(:disabled){background:#3730a3;}
 </style>
 <script>
 (function(){
@@ -131,7 +101,7 @@ HEAD_HTML = """
   function buildFAB() {
     if(document.getElementById("explain-fab")) return;
     const btn=document.createElement("button");
-    btn.id="explain-fab"; btn.innerHTML="Explain 🧠";
+    btn.id="explain-fab"; btn.textContent="Explain 🧠";
     document.body.appendChild(btn);
     btn.addEventListener("click", onExplainClick);
   }
@@ -157,10 +127,27 @@ HEAD_HTML = """
 
   async function onExplainClick() {
     if(!selectedText) return;
-    const response=await gradioApp().getElement("hidden-btn").clickAsync(selectedText);
-    showPopup(response);
-    selectedText=""; savedRange=null;
-    hideFAB();
+    // call hidden Gradio button with input
+    const hiddenBtn=gradioApp().getElement("hidden-btn");
+    if(hiddenBtn){
+      hiddenBtn.querySelector("button").click(); // triggers backend
+      // assign the selected text to hidden textbox
+      const ta=hiddenBtn.querySelector("textarea");
+      if(ta){ ta.value=selectedText; ta.dispatchEvent(new Event('input',{bubbles:true})); }
+      // wait for response
+      const output=await new Promise(resolve=>{
+        const obs=new MutationObserver(m=>{
+          const outTa=document.querySelector("#hidden-output textarea");
+          if(outTa && outTa.value.trim()!==""){
+            obs.disconnect();
+            resolve(outTa.value.trim());
+          }
+        });
+        obs.observe(document.querySelector("#hidden-output"),{subtree:true,childList:true});
+      });
+      showPopup(output);
+    }
+    selectedText=""; savedRange=null; hideFAB();
   }
 
   function showPopup(text){
@@ -173,6 +160,9 @@ HEAD_HTML = """
     popup.style.borderRadius="6px";
     popup.style.maxWidth="300px";
     popup.style.zIndex=99999;
+    popup.style.fontSize="14px";
+    popup.style.lineHeight="1.5";
+    popup.style.color="#1c1917";
     popup.textContent=text;
     document.body.appendChild(popup);
     if(savedRange){
@@ -188,13 +178,26 @@ HEAD_HTML = """
 </script>
 """
 
+
 with gr.Blocks(head=HEAD_HTML) as demo:
-    view_toggle = gr.Radio(choices=["My Work","HF Reference"], value="My Work", label="View")
+    gr.Markdown(
+        "### 📘 Highlight any text — a floating **Explain 🧠** button will appear. "
+        "Click it to show an AI explanation in a popup near your selection."
+    )
+
+    view_toggle = gr.Radio(
+        choices=["My Work", "HF Reference"],
+        value="My Work",
+        label="View",
+    )
     content_display = gr.HTML(YOUR_WORK_HTML)
-    view_toggle.change(switch_content, view_toggle, content_display)
+    view_toggle.change(fn=switch_content, inputs=view_toggle, outputs=content_display)
 
     # Hidden plumbing
-    hidden_btn = gr.Button("hidden-btn", visible=False)
-    hidden_btn.click(explain_text, inputs=gr.Textbox(visible=False), outputs=gr.Textbox(visible=False))
+    hidden_row = gr.Row(visible=False)
+    hidden_input = gr.Textbox(label="hidden-input", visible=False)
+    hidden_output = gr.Textbox(label="hidden-output", visible=False, elem_id="hidden-output")
+    hidden_btn = gr.Button("hidden-btn", elem_id="hidden-btn", visible=False)
+    hidden_btn.click(fn=explain_text, inputs=hidden_input, outputs=hidden_output)
 
 demo.launch()