Toggle for A/B testing

app.py

@@ -14,7 +14,7 @@ def explain_text(selected_text):
     
     try:
         response = client.chat.completions.create(
-            model="gpt-4o",  # or "gpt-4-turbo" or "gpt-3.5-turbo"
+            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\"\"\""}
@@ -26,8 +26,8 @@ def explain_text(selected_text):
     except Exception as e:
         return f"Error: {str(e)}"
 
-# ---- Page content ----
-PAGE_HTML = """
+# ---- 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>
@@ -45,6 +45,134 @@ PAGE_HTML = """
 </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>
+    
+    <h2>What is text generation?</h2>
+    <p>
+        Text generation is the task of generating new text given another text. These models can, 
+        for example, fill in incomplete text or paraphrase.
+    </p>
+    
+    <h2>Use Cases</h2>
+    
+    <h3>Story Generation</h3>
+    <p>Models can be used to generate creative stories given a prompt.</p>
+    
+    <h3>Code Generation</h3>
+    <p>Models can help developers by generating code snippets or entire functions.</p>
+    
+    <h3>Text Completion</h3>
+    <p>Text generation models can autocomplete sentences or fill in missing words.</p>
+    
+    <h2>Task Variants</h2>
+    
+    <h3>Completion Generation Models</h3>
+    <p>
+        In this task, the model is trained to predict the next word(s) given an input sequence. 
+        GPT-2 and GPT-3 are examples of this.
+    </p>
+    
+    <h3>Text-to-Text Generation Models</h3>
+    <p>
+        Some text generation models are trained in a text-to-text manner. T5 and BART are examples 
+        of this, where the model is trained to generate text given another text as input 
+        (e.g., translation, summarization).
+    </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>Popular Models</h2>
+    <ul>
+        <li>GPT-2</li>
+        <li>GPT-Neo</li>
+        <li>GPT-J</li>
+        <li>BLOOM</li>
+        <li>LLaMA</li>
+        <li>Falcon</li>
+        <li>Mistral</li>
+        <li>Phi</li>
+    </ul>
+    <p>These models vary in size from millions to hundreds of billions of parameters.</p>
+    
+    <h2>Example Applications</h2>
+    
+    <h3>Creative Writing Assistant</h3>
+    <p>
+        Use text generation to help with creative writing by suggesting plot developments, 
+        character dialogues, or descriptive passages.
+    </p>
+    
+    <h3>Chatbots and Conversational AI</h3>
+    <p>Many modern chatbots use text generation models to provide natural, contextual responses.</p>
+    
+    <h3>Content Creation</h3>
+    <p>Generate blog posts, product descriptions, social media content, and marketing copy.</p>
+    
+    <h3>Programming Assistance</h3>
+    <p>
+        Code generation models can help developers write code faster by suggesting completions, 
+        explaining code, or generating boilerplate.
+    </p>
+    
+    <h2>Training</h2>
+    <p>
+        Text generation models are typically trained on large corpora of text using causal language 
+        modeling, where the model learns to predict the next token given previous tokens.
+    </p>
+    
+    <h3>Common training objectives:</h3>
+    <ul>
+        <li><strong>Causal Language Modeling (CLM):</strong> Predict next token (GPT-style)</li>
+        <li><strong>Masked Language Modeling (MLM):</strong> Predict masked tokens (BERT-style, though BERT isn't typically used for generation)</li>
+        <li><strong>Sequence-to-Sequence:</strong> Map input text to output text (T5, BART)</li>
+    </ul>
+    
+    <h2>Metrics</h2>
+    <p>Common metrics for evaluating text generation:</p>
+    <ul>
+        <li><strong>Perplexity:</strong> Measures how well the model predicts the test data</li>
+        <li><strong>BLEU:</strong> Measures overlap with reference texts (common for translation)</li>
+        <li><strong>ROUGE:</strong> Measures overlap, often used for summarization</li>
+        <li><strong>Human Evaluation:</strong> Often the gold standard for creative tasks</li>
+    </ul>
+    
+    <h2>Ethical Considerations</h2>
+    <p>Text generation models can:</p>
+    <ul>
+        <li>Generate biased or harmful content based on training data</li>
+        <li>Be misused to create misleading information or spam</li>
+        <li>Reproduce and amplify stereotypes present in training data</li>
+    </ul>
+    
+    <p>It's important to:</p>
+    <ul>
+        <li>Carefully curate training data</li>
+        <li>Implement content filters</li>
+        <li>Be transparent about model capabilities and limitations</li>
+        <li>Consider the societal impact of deployed systems</li>
+    </ul>
+</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", () => {
@@ -64,7 +192,22 @@ document.addEventListener("mouseup", () => {
 </script>
 """) as demo:
     gr.Markdown("### 📘 Highlight text and ask GPT for help")
-    gr.HTML(PAGE_HTML)
+    
+    # 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",