Update app.py

app.py

@@ -6,198 +6,199 @@ 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():
-        return "__NO_SELECTION__"
+    if selected_text is None:
+        return ""
+    selected_text = selected_text.strip()
+    if not selected_text:
+        return "Please select or enter some text first."
+    
     try:
-        response = client.responses.create(
-            model="gpt-4.1-mini",
-            input=[
-                {"role": "system", "content": "You are an expert ML instructor. Explain clearly for beginners."},
-                {"role": "user", "content": f'Explain this text:\n"""{selected_text}"""'}
+        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."},
+                {"role": "user", "content": f"Explain this text from a learning resource:\n\n\"\"\"\n{selected_text}\n\"\"\""}
             ],
-            max_output_tokens=400
+            temperature=0.7,
+            max_tokens=500
         )
-        return response.output_text
+        return response.choices[0].message.content
     except Exception as e:
-        return f"__ERROR__: {str(e)}"
+        return f"Error: {str(e)}"
 
-
-# ---- Page content ----
+# ---- Your work content ----
 YOUR_WORK_HTML = """
-<div id="content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.8;">
+<div id="content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
     <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.8;">
+<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
     <h1>Text Generation (Hugging Face Reference)</h1>
-    <h2>About Text Generation</h2>
+    <h1>About Text Generation</h1>
     <p>
-        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.
+        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.
     </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 Hugging Chat.
+        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>.
     </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 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.
+        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>.
     </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.
-        If your generative model training data differs from your use case, you can train a causal language model from scratch.
+        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>!
+    </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.
+    </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.
+    </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>
+    
+    <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.
+    </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.
 </div>
 """
 
 def switch_content(choice):
-    return YOUR_WORK_HTML if choice == "My Work" else HF_REFERENCE_HTML
+    if choice == "My Work":
+        return YOUR_WORK_HTML
+    else:
+        return HF_REFERENCE_HTML
 
-
-# ---- Floating FAB + tooltip JS ----
-HEAD_HTML = """
-<style>
-  #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>
+with gr.Blocks(head="""
 <script>
-(function(){
-  let selectedText="", savedRange=null, popup=null;
-
-  function buildFAB() {
-    if(document.getElementById("explain-fab")) return;
-    const btn=document.createElement("button");
-    btn.id="explain-fab"; btn.textContent="Explain 🧠";
-    document.body.appendChild(btn);
-    btn.addEventListener("click", onExplainClick);
-  }
-
-  function showFAB(text) {
-    const fab=document.getElementById("explain-fab");
-    if(!fab) return;
-    fab.style.opacity="1"; fab.disabled=false;
-    fab.dataset.text=text;
-  }
-
-  function hideFAB() { const fab=document.getElementById("explain-fab"); if(fab) fab.style.opacity="0"; }
-
-  document.addEventListener("mouseup", e=>{
-    const sel=window.getSelection();
-    if(!sel || sel.rangeCount===0) return hideFAB();
-    const text=sel.toString().trim();
-    if(text.length<3) return hideFAB();
-    selectedText=text;
-    savedRange=sel.getRangeAt(0).cloneRange();
-    showFAB(text);
-  });
-
-  async function onExplainClick() {
-    if(!selectedText) return;
-    // 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){
-    if(popup) popup.remove();
-    popup=document.createElement("div");
-    popup.style.position="absolute";
-    popup.style.background="#fef3c7";
-    popup.style.border="1px solid #f59e0b";
-    popup.style.padding="10px";
-    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){
-      const rect=savedRange.getBoundingClientRect();
-      popup.style.top=`${window.scrollY+rect.bottom+8}px`;
-      popup.style.left=`${window.scrollX+rect.left}px`;
+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 }));
+        }
     }
-    setTimeout(()=>{ if(popup) popup.remove(); popup=null; },20000);
-  }
-
-  document.addEventListener("DOMContentLoaded", buildFAB);
-})();
+});
 </script>
-"""
-
-
-with gr.Blocks(head=HEAD_HTML) as demo:
-    gr.Markdown(
-        "### 📘 Highlight any text — a floating **Explain 🧠** button will appear. "
-        "Click it to show an AI explanation in a popup near your selection."
-    )
-
+""") as demo:
+    gr.Markdown("### 📘 Highlight text and ask GPT for help")
+    
+    # Toggle between your work and HF reference
     view_toggle = gr.Radio(
         choices=["My Work", "HF Reference"],
         value="My Work",
         label="View",
+        interactive=True
     )
+    
     content_display = gr.HTML(YOUR_WORK_HTML)
-    view_toggle.change(fn=switch_content, inputs=view_toggle, outputs=content_display)
-
-    # Hidden plumbing
-    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)
+    
+    view_toggle.change(
+        fn=switch_content,
+        inputs=view_toggle,
+        outputs=content_display
+    )
+    
+    selected_text = gr.Textbox(
+        label="Selected text",
+        placeholder="Highlight text above...",
+        lines=3,
+        interactive=True
+    )
+    
+    explain_btn = gr.Button("Explain selection 🧠")
+    output = gr.Markdown()
+    
+    explain_btn.click(
+        fn=explain_text,
+        inputs=selected_text,
+        outputs=output,
+    )
 
 demo.launch()