Update app.py

app.py

@@ -4,251 +4,360 @@ import os
 
 client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
 
+
 # ---- GPT explanation backend ----
 def explain_text(selected_text):
-    if selected_text is None:
-        return "", ""
-    selected_text = selected_text.strip()
-    if not selected_text:
-        return "Please select or enter some text first.", selected_text
-    
+    if not selected_text or not selected_text.strip():
+        return "__NO_SELECTION__"
     try:
         response = client.chat.completions.create(
             model="gpt-4o",
             messages=[
                 {
                     "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."
+                    "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\"\"\""
-                }
+                    "content": f'Explain this text from a learning resource:\n\n"""\n{selected_text}\n"""',
+                },
             ],
             temperature=0.7,
-            max_tokens=500
+            max_tokens=500,
         )
-        explanation = response.choices[0].message.content
-        # Replace the selected text box with the AI explanation
-        return explanation, explanation
+        return response.choices[0].message.content
     except Exception as e:
-        return f"Error: {str(e)}", selected_text
+        return f"__ERROR__: {str(e)}"
 
 
-# ---- Your work content (UNCHANGED) ----
+# ---- Page content ----
 YOUR_WORK_HTML = """
-<div id="content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
+<div id="content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.8;">
     <h1>Text Generation</h1>
     <p>
-        Text generation is the task of producing natural language text given an input prompt. 
+        Text generation is the task of producing natural language text given an input prompt.
         It is commonly used for chatbots, creative writing, summarization, and code generation.
     </p>
     <p>
-        Most modern text generation models are based on the transformer architecture and are 
+        Most modern text generation models are based on the transformer architecture and are
         trained using next-token prediction.
     </p>
     <p>
-        During inference, the model repeatedly samples the most likely next token until a 
+        During inference, the model repeatedly samples the most likely next token until a
         stopping condition is reached.
     </p>
 </div>
 """
 
-
-# ---- Hugging Face reference content ----
 HF_REFERENCE_HTML = """
-<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
+<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.8;">
     <h1>Text Generation (Hugging Face Reference)</h1>
-    <h1>About Text Generation</h1>
+    <h2>About Text Generation</h2>
     <p>
-        This task covers guides on both <a href="https://huggingface.co/models?pipeline_tag=text-generation&sort=downloads">text-generation</a> and <a href="https://huggingface.co/models?other=text2text-generation&sort=downloads">text-to-text generation</a> models. 
-        Popular large language models that are used for chats or following instructions are also covered in this task. 
-        You can find the list of selected open-source large language models <a href="https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard">here</a>, ranked by their performance scores.
+        This task covers guides on both text-generation and text-to-text generation models.
+        Popular large language models that are used for chats or following instructions are also covered in this task.
+        You can find the list of selected open-source large language models on the Open LLM Leaderboard, ranked by their performance scores.
     </p>
-    
     <h2>Use Cases</h2>
-    
     <h3>Instruction Models</h3>
     <p>
-        A model trained for text generation can be later adapted to follow instructions. 
-        You can try some of the most powerful instruction-tuned open-access models like Mixtral 8x7B, Cohere Command R+, and Meta Llama3 70B at <a href="https://huggingface.co/chat">Hugging Chat</a>.
+        A model trained for text generation can be later adapted to follow instructions.
+        You can try some of the most powerful instruction-tuned open-access models like Mixtral 8x7B, Cohere Command R+, and Meta Llama3 70B at Hugging Chat.
     </p>
-    
     <h3>Code Generation</h3>
     <p>
-        A Text Generation model, also known as a causal language model, can be trained on code from scratch to help the programmers in their repetitive coding tasks. 
-        One of the most popular open-source models for code generation is StarCoder, which can generate code in 80+ languages. You can try it <a href="https://huggingface.co/spaces/bigcode/bigcode-playground">here</a>.
+        A Text Generation model, also known as a causal language model, can be trained on code from scratch to help programmers with repetitive coding tasks.
+        One of the most popular open-source models for code generation is StarCoder, which can generate code in 80+ languages.
     </p>
-    
     <h3>Stories Generation</h3>
     <p>
-        A story generation model can receive an input like "Once upon a time" and proceed to create a story-like text based on those first words. 
-        You can try <a href="https://huggingface.co/spaces/mosaicml/mpt-7b-storywriter">this application</a> which contains a model trained on story generation, by MosaicML.
-        If your generative model training data is different than your use case, you can train a causal language model from scratch. 
-        Learn how to do it in the free transformers <a href="https://huggingface.co/course/chapter7/6?fw=pt">course</a>!
+        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. 
-        Word by word a longer text is formed that results in for example:
-    <ul>
-        <li>Given an incomplete sentence, complete it.
-        <li>Continue a story given the first sentences.
-        <li>Provided a code description, generate the code.
-    </ul>
-    The most popular models for this task are GPT-based models, Mistral or Llama series. 
-    These models are trained on data that has no labels, so you just need plain text to train your own model. 
-    You can train text generation models to generate a wide variety of documents, from code to stories.
+        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 (e.g. translation from one language to another). 
-        The most popular variants of these models are NLLB, FLAN-T5, and BART. 
-        Text-to-Text models are trained with multi-tasking capabilities, they can accomplish a wide range of tasks, including summarization, translation, and text classification.
+        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>
-        When it comes to text generation, the underlying language model can come in several types:
-        <ul>
-            <li>Base models: refers to plain language models like Mistral 7B and Meta Llama-3-70b. These models are good for fine-tuning and few-shot prompting.
-            <li>Instruction-trained models: these models are trained in a multi-task manner to follow a broad range of instructions like "Write me a recipe for chocolate cake". Models like Qwen 2 7B, Yi 1.5 34B Chat, and Meta Llama 70B Instruct are examples of instruction-trained models. In general, instruction-trained models will produce better responses to instructions than base models.
-            <li>Human feedback models: these models extend base and instruction-trained models by incorporating human feedback that rates the quality of the generated text according to criteria like helpfulness, honesty, and harmlessness. The human feedback is then combined with an optimization technique like reinforcement learning to align the original model to be closer with human preferences. The overall methodology is often called Reinforcement Learning from Human Feedback, or RLHF for short. Zephyr ORPO 141B A35B is an open-source model aligned through human feedback.
-        </ul>
-
-    <h2>Text Generation from Image and Text</h2>
-    <p>
-        There are language models that can input both text and image and output text, called vision language models. 
-        IDEFICS 2 and MiniCPM Llama3 V are good examples. 
-        They accept the same generation parameters as other language models. 
-        However, since they also take images as input, you have to use them with the image-to-text pipeline. 
-        You can find more information about this in the image-to-text task page.
-    </p>
-    
+    <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 <code>text-generation</code> pipeline to do inference 
-        with text generation models. It takes an input text and generates a continuation of that text.
+        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. 
-        You can use it to deploy any supported open-source large language model of your choice.
-    </p>
-
-    <h2>ChatUI Spaces</h2>
-    <p>
-        Hugging Face Spaces includes templates to easily deploy your own instance of a specific application. 
-        ChatUI is an open-source interface that enables serving conversational interface for large language models and can be deployed with few clicks at Spaces. 
-        TGI powers these Spaces under the hood for faster inference. 
-        Thanks to the template, you can deploy your own instance based on a large language model with only a few clicks and customize it. Learn more about it here and create your large language model instance here.
+        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):
-    if choice == "My Work":
-        return YOUR_WORK_HTML
-    else:
-        return HF_REFERENCE_HTML
+    return YOUR_WORK_HTML if choice == "My Work" else HF_REFERENCE_HTML
+
 
+# ---- All the magic: floating sticky button + inline DOM replacement ----
+HEAD_HTML = """
+<style>
+  /* ── Floating toolbar ─────────────────────────────────────────── */
+  #explain-fab {
+    position: fixed;
+    bottom: 36px;
+    right: 36px;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: #1e1b4b;
+    color: #fff;
+    border-radius: 999px;
+    padding: 12px 22px;
+    box-shadow: 0 6px 28px rgba(0,0,0,0.4);
+    cursor: pointer;
+    border: none;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    opacity: 0;
+    transform: translateY(12px);
+    pointer-events: none;
+    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
+    white-space: nowrap;
+  }
+  #explain-fab.visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: all;
+  }
+  #explain-fab:hover:not(:disabled) { background: #3730a3; }
+  #explain-fab:disabled { background: #4b5563; cursor: not-allowed; }
+
+  #explain-fab-preview {
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 400;
+    opacity: 0.7;
+    border-left: 1px solid rgba(255,255,255,0.3);
+    padding-left: 10px;
+  }
+
+  /* ── Inline replacement styles ───────────────────────────────── */
+  .ai-inline {
+    background: linear-gradient(135deg, #fef3c7, #fde68a);
+    border-left: 3px solid #f59e0b;
+    border-radius: 4px;
+    padding: 1px 6px;
+    font-style: italic;
+    color: #1c1917;
+    cursor: help;
+    transition: background 0.3s;
+  }
+  .ai-inline:hover {
+    background: linear-gradient(135deg, #fde68a, #fbbf24);
+  }
+  .ai-inline-loading {
+    background: #e5e7eb !important;
+    border-left-color: #9ca3af !important;
+    color: #6b7280 !important;
+    animation: ai-pulse 1.2s ease-in-out infinite;
+  }
+  @keyframes ai-pulse {
+    0%, 100% { opacity: 0.5; }
+    50%       { opacity: 1;   }
+  }
+</style>
 
-# This JS uses a more reliable approach:
-# 1. Listens for mouseup on the whole document
-# 2. Finds the Gradio textbox by its data-testid or label, then dispatches
-#    a proper React-compatible input event so Gradio picks up the value change.
-SELECTION_JS = """
 <script>
-(function() {
-    function setGradioTextbox(value) {
-        // Find the textarea inside the component labelled "Selected text"
-        const labels = document.querySelectorAll('label span');
-        for (const label of labels) {
-            if (label.textContent.trim() === 'Selected text') {
-                const container = label.closest('label') || label.parentElement;
-                // Walk up to find the wrapping block, then find textarea
-                let el = container;
-                for (let i = 0; i < 5; i++) {
-                    el = el.parentElement;
-                    if (!el) break;
-                    const ta = el.querySelector('textarea');
-                    if (ta) {
-                        // Use React's native value setter to trigger onChange
-                        const nativeSetter = Object.getOwnPropertyDescriptor(
-                            window.HTMLTextAreaElement.prototype, 'value'
-                        ).set;
-                        nativeSetter.call(ta, value);
-                        ta.dispatchEvent(new Event('input', { bubbles: true }));
-                        ta.dispatchEvent(new Event('change', { bubbles: true }));
-                        return true;
-                    }
-                }
-            }
+(function () {
+  'use strict';
+
+  let savedRange    = null;
+  let selectedText  = '';
+  let placeholder   = null;
+  let isExplaining  = false;
+  let lastSeenOutput = '';
+
+  /* ── Build the floating button ──────────────────────────────────── */
+  function buildFAB() {
+    if (document.getElementById('explain-fab')) return;
+    const btn = document.createElement('button');
+    btn.id = 'explain-fab';
+    btn.innerHTML = '<span id="explain-fab-label">Explain 🧠</span><span id="explain-fab-preview"></span>';
+    document.body.appendChild(btn);
+    btn.addEventListener('click', onExplainClick);
+  }
+
+  function showFAB(text) {
+    const fab     = document.getElementById('explain-fab');
+    const label   = document.getElementById('explain-fab-label');
+    const preview = document.getElementById('explain-fab-preview');
+    if (!fab) return;
+    label.textContent   = 'Explain 🧠';
+    preview.textContent = text.length > 30 ? text.slice(0, 30) + '…' : text;
+    fab.disabled        = false;
+    fab.classList.add('visible');
+  }
+
+  function hideFAB() {
+    const fab = document.getElementById('explain-fab');
+    if (fab) fab.classList.remove('visible');
+  }
+
+  function setFABLoading() {
+    const fab   = document.getElementById('explain-fab');
+    const label = document.getElementById('explain-fab-label');
+    const preview = document.getElementById('explain-fab-preview');
+    if (!fab) return;
+    label.textContent   = 'Thinking…';
+    preview.textContent = '';
+    fab.disabled        = true;
+  }
+
+  /* ── Selection tracking ─────────────────────────────────────────── */
+  document.addEventListener('mouseup', function (e) {
+    if (e.target.closest('#explain-fab') || isExplaining) return;
+    setTimeout(function () {
+      const sel  = window.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const text = sel.toString().trim();
+      if (text.length < 3) { hideFAB(); return; }
+      savedRange   = sel.getRangeAt(0).cloneRange();
+      selectedText = text;
+      showFAB(text);
+      pushToGradioInput(text);
+    }, 50);
+  });
+
+  /* ── Explain click ──────────────────────────────────────────────── */
+  function onExplainClick() {
+    if (!selectedText || !savedRange || isExplaining) return;
+    isExplaining = true;
+    setFABLoading();
+
+    /* Delete the highlighted text and drop in a loading span */
+    try {
+      savedRange.deleteContents();
+      placeholder = document.createElement('span');
+      placeholder.className = 'ai-inline ai-inline-loading';
+      placeholder.textContent = '⏳ explaining…';
+      savedRange.insertNode(placeholder);
+      window.getSelection().removeAllRanges();
+    } catch (err) {
+      console.warn('[explain] range insert failed', err);
+    }
+
+    /* Trigger the hidden Gradio button → calls Python backend */
+    const hiddenBtn = document.querySelector('#hidden-explain-trigger button');
+    if (hiddenBtn) hiddenBtn.click();
+  }
+
+  /* ── Poll the hidden output textarea for results ────────────────── */
+  function pollOutput() {
+    if (isExplaining) {
+      const outTA = document.querySelector('#hidden-output textarea');
+      if (outTA) {
+        const val = outTA.value.trim();
+        if (val && val !== lastSeenOutput) {
+          lastSeenOutput = val;
+          applyExplanation(val);
         }
-        return false;
+      }
     }
+    setTimeout(pollOutput, 250);
+  }
 
-    document.addEventListener('mouseup', function () {
-        // Small delay to let the browser finalize the selection
-        setTimeout(function () {
-            const selection = window.getSelection();
-            if (!selection) return;
-            const text = selection.toString().trim();
-            if (text.length > 0) {
-                setGradioTextbox(text);
-            }
-        }, 50);
-    });
+  function applyExplanation(text) {
+    if (placeholder) {
+      if (!text || text.startsWith('__NO_SELECTION__') || text.startsWith('__ERROR__')) {
+        /* Restore original text on failure */
+        placeholder.replaceWith(document.createTextNode(selectedText));
+      } else {
+        placeholder.classList.remove('ai-inline-loading');
+        placeholder.textContent = text;
+        placeholder.title = 'AI explanation — original: "' + selectedText + '"';
+      }
+      placeholder = null;
+    }
+    isExplaining = false;
+    savedRange   = null;
+    selectedText = '';
+    hideFAB();
+  }
+
+  /* ── Push selected text into the hidden Gradio textbox ─────────── */
+  function pushToGradioInput(value) {
+    const ta = document.querySelector('#hidden-input textarea');
+    if (!ta) return;
+    const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value').set;
+    setter.call(ta, value);
+    ta.dispatchEvent(new Event('input',  { bubbles: true }));
+    ta.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  /* ── Boot ───────────────────────────────────────────────────────── */
+  function boot() {
+    buildFAB();
+    pollOutput();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    setTimeout(boot, 800);
+  }
 })();
 </script>
 """
 
 
-with gr.Blocks(head=SELECTION_JS) as demo:
-    gr.Markdown("### 📘 Highlight text above and click **Explain selection** to get an AI explanation")
-    
+with gr.Blocks(head=HEAD_HTML) as demo:
+    gr.Markdown(
+        "### 📘 Highlight any text — a floating **Explain 🧠** button will appear. "
+        "Click it to replace the selection with an inline AI explanation."
+    )
+
     view_toggle = gr.Radio(
         choices=["My Work", "HF Reference"],
         value="My Work",
-        label="View"
+        label="View",
     )
-    
     content_display = gr.HTML(YOUR_WORK_HTML)
-    
-    view_toggle.change(
-        fn=switch_content,
-        inputs=view_toggle,
-        outputs=content_display
-    )
-    
-    selected_text = gr.Textbox(
-        label="Selected text",
-        placeholder="Highlight text above to populate this box, then click Explain...",
-        lines=3
-    )
-    
-    explain_btn = gr.Button("Explain selection 🧠", variant="primary")
+    view_toggle.change(fn=switch_content, inputs=view_toggle, outputs=content_display)
 
-    # The explanation replaces the content of the selected_text box
-    # so the user sees the AI output right where the selection was shown.
-    output = gr.Markdown(label="Explanation")
+    # Hidden plumbing — not shown to the user
+    with gr.Row(visible=False):
+        hidden_input  = gr.Textbox(elem_id="hidden-input",  label="hidden-input")
+        hidden_output = gr.Textbox(elem_id="hidden-output", label="hidden-output")
+        with gr.Column(elem_id="hidden-explain-trigger"):
+            hidden_btn = gr.Button("hidden")
 
-    explain_btn.click(
-        fn=explain_text,
-        inputs=selected_text,
-        outputs=[output, selected_text],
-    )
+    hidden_btn.click(fn=explain_text, inputs=hidden_input, outputs=hidden_output)
 
 demo.launch()