Update app.py

app.py

@@ -1,216 +1,376 @@
-import gradio as gr
-from openai import OpenAI
-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."
-    
-    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."},
-                {"role": "user", "content": f"Explain this text from a learning resource:\n\n\"\"\"\n{selected_text}\n\"\"\""}
-            ],
-            temperature=0.7,
-            max_tokens=500
-        )
-        return response.choices[0].message.content
-    except Exception as e:
-        return f"Error: {str(e)}"
-
-# ---- Your work content ----
-YOUR_WORK_HTML = """
-<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. 
-        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 
-        trained using next-token prediction.
-    </p>
-    <p>
-        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;">
-    <h1>Text Generation (Hugging Face Reference)</h1>
-
-    <h1>About Text Generation</h1>
-    <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.
-    </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>.
-    </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>.
-    </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>!
-    </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):
-    if choice == "My Work":
-        return YOUR_WORK_HTML
-    else:
-        return HF_REFERENCE_HTML
-
-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 }));
-        }
+import { useState, useRef, useCallback } from "react";
+
+const CONTENT = `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.
+
+Most modern text generation models are based on the transformer architecture and are trained using next-token prediction. The transformer uses self-attention mechanisms to weigh the importance of different words in a sequence when making predictions.
+
+During inference, the model repeatedly samples the most likely next token until a stopping condition is reached. This process is called autoregressive generation. Parameters like temperature and top-p sampling control the randomness and diversity of the output.
+
+Large language models (LLMs) like GPT-4, Claude, and Llama are trained on vast corpora of text from the internet, books, and other sources. This gives them broad world knowledge and language understanding.
+
+Instruction-tuned models are further trained to follow user instructions, using techniques like supervised fine-tuning (SFT) and reinforcement learning from human feedback (RLHF). This makes them much more useful as assistants compared to base language models.`;
+
+const PARAGRAPHS = CONTENT.split("\n\n");
+
+export default function App() {
+  const [segments, setSegments] = useState(() =>
+    PARAGRAPHS.map((text, i) => ({
+      id: i,
+      parts: [{ type: "text", content: text }],
+    }))
+  );
+  const [selection, setSelection] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [buttonPos, setButtonPos] = useState(null);
+  const contentRef = useRef(null);
+
+  const handleMouseUp = useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed) {
+      setSelection(null);
+      setButtonPos(null);
+      return;
+    }
+    const text = sel.toString().trim();
+    if (!text || text.length < 3) {
+      setSelection(null);
+      setButtonPos(null);
+      return;
+    }
+
+    // Find which paragraph this belongs to
+    let paraIndex = -1;
+    let node = sel.anchorNode;
+    while (node && node !== contentRef.current) {
+      if (node.dataset && node.dataset.para !== undefined) {
+        paraIndex = parseInt(node.dataset.para);
+        break;
+      }
+      node = node.parentNode;
     }
-});
-</script>
-""") 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
-    )
-    
-    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()
+
+    if (paraIndex === -1) {
+      setSelection(null);
+      setButtonPos(null);
+      return;
+    }
+
+    const range = sel.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const containerRect = contentRef.current.getBoundingClientRect();
+
+    setSelection({ text, paraIndex });
+    setButtonPos({
+      top: rect.bottom - containerRect.top + 8,
+      left: Math.min(
+        rect.left - containerRect.left,
+        containerRect.width - 160
+      ),
+    });
+  }, []);
+
+  const handleExplain = async () => {
+    if (!selection || loading) return;
+    const { text, paraIndex } = selection;
+    setLoading(true);
+    setButtonPos(null);
+
+    try {
+      const response = await fetch("https://api.anthropic.com/v1/messages", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          model: "claude-sonnet-4-20250514",
+          max_tokens: 1000,
+          messages: [
+            {
+              role: "user",
+              content: `You are an ML instructor. A student highlighted this text from a learning resource and wants a clear, concise explanation (2-4 sentences, no fluff):\n\n"${text}"\n\nExplain it simply and intuitively.`,
+            },
+          ],
+        }),
+      });
+      const data = await response.json();
+      const explanation = data.content?.[0]?.text || "Could not generate explanation.";
+
+      // Replace the selected text in the paragraph with [original, explanation]
+      setSegments((prev) =>
+        prev.map((para) => {
+          if (para.id !== paraIndex) return para;
+          const newParts = [];
+          for (const part of para.parts) {
+            if (part.type !== "text") {
+              newParts.push(part);
+              continue;
+            }
+            const idx = part.content.indexOf(text);
+            if (idx === -1) {
+              newParts.push(part);
+              continue;
+            }
+            if (idx > 0) newParts.push({ type: "text", content: part.content.slice(0, idx) });
+            newParts.push({ type: "explained", original: text, explanation });
+            const after = part.content.slice(idx + text.length);
+            if (after) newParts.push({ type: "text", content: after });
+          }
+          return { ...para, parts: newParts };
+        })
+      );
+    } catch (e) {
+      console.error(e);
+    }
+
+    setSelection(null);
+    setLoading(false);
+    window.getSelection()?.removeAllRanges();
+  };
+
+  const dismissExplain = (paraId, partIdx) => {
+    setSegments((prev) =>
+      prev.map((para) => {
+        if (para.id !== paraId) return para;
+        const newParts = [...para.parts];
+        const part = newParts[partIdx];
+        if (part.type === "explained") {
+          newParts.splice(partIdx, 1, { type: "text", content: part.original });
+        }
+        // Merge adjacent text parts
+        const merged = [];
+        for (const p of newParts) {
+          if (p.type === "text" && merged.length && merged[merged.length - 1].type === "text") {
+            merged[merged.length - 1] = { type: "text", content: merged[merged.length - 1].content + p.content };
+          } else {
+            merged.push(p);
+          }
+        }
+        return { ...para, parts: merged };
+      })
+    );
+  };
+
+  return (
+    <div style={{ fontFamily: "'Georgia', serif", background: "#faf8f4", minHeight: "100vh", padding: "0" }}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');
+        
+        * { box-sizing: border-box; }
+        
+        .reader-wrap {
+          max-width: 680px;
+          margin: 0 auto;
+          padding: 60px 32px 120px;
+        }
+
+        h1.title {
+          font-family: 'Playfair Display', Georgia, serif;
+          font-size: 2.4rem;
+          font-weight: 600;
+          color: #1a1208;
+          margin: 0 0 8px;
+          letter-spacing: -0.5px;
+          line-height: 1.15;
+        }
+
+        .subtitle {
+          font-family: 'Source Serif 4', Georgia, serif;
+          font-size: 0.9rem;
+          color: #a09070;
+          margin: 0 0 48px;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        .hint {
+          font-family: 'Source Serif 4', Georgia, serif;
+          font-size: 0.85rem;
+          color: #b0a080;
+          margin: 0 0 36px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .hint-icon {
+          width: 18px;
+          height: 18px;
+          background: #e8dfc8;
+          border-radius: 50%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 10px;
+          flex-shrink: 0;
+        }
+
+        .para {
+          font-family: 'Source Serif 4', Georgia, serif;
+          font-size: 1.08rem;
+          line-height: 1.85;
+          color: #2c2010;
+          margin-bottom: 1.6em;
+          position: relative;
+        }
+
+        .explained-bubble {
+          display: inline;
+          position: relative;
+        }
+
+        .explained-original {
+          background: linear-gradient(120deg, #f5e6a3 0%, #f0d870 100%);
+          border-radius: 3px;
+          padding: 1px 3px;
+          text-decoration: line-through;
+          text-decoration-color: #c8a800;
+          color: #6b5a10;
+          font-style: italic;
+          opacity: 0.7;
+          font-size: 0.88em;
+          cursor: pointer;
+        }
+
+        .explained-text {
+          display: inline-block;
+          background: linear-gradient(135deg, #fffbee 0%, #fff8e0 100%);
+          border-left: 3px solid #d4a800;
+          border-radius: 0 6px 6px 0;
+          padding: 6px 12px 6px 12px;
+          margin: 4px 0;
+          color: #3a2e08;
+          font-size: 0.95rem;
+          line-height: 1.65;
+          box-shadow: 0 2px 8px rgba(180,140,0,0.1);
+          position: relative;
+        }
+
+        .dismiss-btn {
+          position: absolute;
+          top: 4px;
+          right: 6px;
+          background: none;
+          border: none;
+          color: #c8a800;
+          cursor: pointer;
+          font-size: 14px;
+          padding: 0 2px;
+          opacity: 0.6;
+          line-height: 1;
+          transition: opacity 0.15s;
+        }
+        .dismiss-btn:hover { opacity: 1; }
+
+        .float-btn {
+          position: absolute;
+          z-index: 100;
+          background: #1a1208;
+          color: #f5e8c0;
+          border: none;
+          border-radius: 6px;
+          padding: 8px 16px;
+          font-family: 'Source Serif 4', Georgia, serif;
+          font-size: 0.82rem;
+          letter-spacing: 0.04em;
+          cursor: pointer;
+          box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          transition: background 0.15s, transform 0.1s;
+          white-space: nowrap;
+        }
+        .float-btn:hover { background: #2e2010; transform: translateY(-1px); }
+        .float-btn:active { transform: translateY(0); }
+
+        .loading-overlay {
+          position: fixed;
+          bottom: 28px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #1a1208;
+          color: #f5e8c0;
+          border-radius: 24px;
+          padding: 10px 22px;
+          font-family: 'Source Serif 4', Georgia, serif;
+          font-size: 0.85rem;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+
+        .spinner {
+          width: 14px;
+          height: 14px;
+          border: 2px solid rgba(245,232,192,0.3);
+          border-top-color: #f5e8c0;
+          border-radius: 50%;
+          animation: spin 0.7s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        .divider {
+          border: none;
+          border-top: 1px solid #e0d4b8;
+          margin: 40px 0;
+        }
+      `}</style>
+
+      <div className="reader-wrap">
+        <h1 className="title">Text Generation</h1>
+        <p className="subtitle">Machine Learning · Reading Guide</p>
+
+        <div className="hint">
+          <span className="hint-icon">✦</span>
+          Highlight any text, then click <em style={{ fontStyle: "italic", color: "#8a7450" }}>&nbsp;Explain&nbsp;</em> to replace it with an AI explanation.
+        </div>
+
+        <hr className="divider" />
+
+        <div ref={contentRef} style={{ position: "relative" }} onMouseUp={handleMouseUp}>
+          {segments.map((para) => (
+            <p key={para.id} className="para" data-para={para.id}>
+              {para.parts.map((part, pi) =>
+                part.type === "text" ? (
+                  <span key={pi} data-para={para.id}>{part.content}</span>
+                ) : (
+                  <span key={pi} className="explained-bubble">
+                    {" "}
+                    <span className="explained-text">
+                      <button className="dismiss-btn" onClick={() => dismissExplain(para.id, pi)} title="Restore original">✕</button>
+                      {part.explanation}
+                    </span>{" "}
+                    <span
+                      className="explained-original"
+                      title="Click to restore"
+                      onClick={() => dismissExplain(para.id, pi)}
+                    >
+                      {part.original}
+                    </span>
+                  </span>
+                )
+              )}
+            </p>
+          ))}
+
+          {buttonPos && !loading && (
+            <button
+              className="float-btn"
+              style={{ top: buttonPos.top, left: buttonPos.left }}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={handleExplain}
+            >
+              ✦ Explain
+            </button>
+          )}
+        </div>
+      </div>
+
+      {loading && (
+        <div className="loading-overlay">
+          <div className="spinner" />
+          Generating explanation…
+        </div>
+      )}
+    </div>
+  );
+}