app.py

import gradio as gr
from openai import OpenAI
import os
import base64

with open("HFImage.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()

IMAGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'

with open("QuestionAnswerTeaser.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()

QA_IMAGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'

with open("SummarisationTeaser.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()

SUMMARISATION_IMAGGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'

with open("Text2ImageTeaser.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()

TEXT2IMAGE_IMAGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'

with open("SyntheticImage.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()

SYNTHETIC_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'

with open("RealImage.jpeg", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()

REAL_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'

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 ----
TEXT_GENERATION = f"""
<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
    <h1>Text Generation (Hugging Face)</h1>
    <p>
        Imagine your phone's autocomplete feature, but much more advanced. That's what text generation is like. You start typing a few words, and the model, like a smart assistant, continues the text for you. It can finish your sentences, answer questions, rewrite text, or follow instructions.
    </p>
    {IMAGE_HTML}""" + """
    <h1>About Text Generation</h1>
    <p>
        There are two main types of models for text generation: 
        <a href="https://huggingface.co/models?pipeline_tag=text-generation&sort=downloads">text generation</a> (which continues the text you start) and 
        <a href="https://huggingface.co/models?other=text2text-generation&sort=downloads">text-to-text generation</a> (which changes one text into another, like translating or summarizing). 
        These models are also used for chatting and following instructions. You can find a list of popular models 
        <a href="https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard">here</a>.
    </p>
    
    <h2>Use Cases</h2>
    
    <h3>Instruction Models</h3>
    <p>
        Some models are designed to follow everyday instructions, like “Write a friendly email to my landlord.” 
        You can try models like Mixtral 8x7B, Cohere Command R+, and Meta Llama 3 70B in 
        <a href="https://huggingface.co/chat">Hugging Chat</a>.
    </p>
    
    <h3>Code Generation</h3>
    <p>
        Models can also help with coding by writing code snippets from descriptions or continuing your code. 
        StarCoder is a popular model for writing code in many languages. Try it 
        <a href="https://huggingface.co/spaces/bigcode/bigcode-playground">here</a>.
    </p>
    
    <h3>Story Writing</h3>
    <p>
        Start with a line like “Once upon a time,” and the model can continue with a story. 
        Try a story-focused app by MosaicML 
        <a href="https://huggingface.co/spaces/mosaicml/mpt-7b-storywriter">here</a>.
        If you have very specific needs, you can train a model from scratch. Learn how in the free Transformers 
        <a href="https://huggingface.co/course/chapter7/6?fw=pt">course</a>.
    </p>
    
    <h2>Task Variants</h2>
    
    <h3>Completion-Style Models</h3>
    <p>
        These models predict the next words, one after another, to build longer text. They can:
    <ul>
        <li>Finish an incomplete sentence.</li>
        <li>Continue a story from a few opening lines.</li>
        <li>Write code from a short description.</li>
    </ul>
    Popular families include GPT-style models, Mistral, and the Llama series. 
    They learn from lots of regular text, so they’re flexible: letters, stories, FAQs, notes, and more.
    </p>
    
    <h3>Text-to-Text Models</h3>
    <p>
        These models turn one piece of text into another. For example, they can summarize, translate, or answer questions in a fixed format. 
        Well-known examples include FLAN-T5 and BART. 
        You tell the model the task in the input (like “Summarize: …”), and it returns the result.
    </p>
    
    <h3>Language Model Types</h3>
    <p>When you pick a model, you’ll often see three broad types:</p>
    <ul>
        <li><b>Base models</b>: general-purpose models (for example, Mistral 7B or Meta Llama 3) that are good starting points. They’re great if you plan to customize or give examples in your prompt.</li>
        <li><b>Instruction-tuned models</b>: trained to follow everyday requests like “Write a recipe for chocolate cake.” These usually give more helpful replies out of the box (for example, Qwen 2 7B, Yi 1.5 34B Chat, Llama 3 Instruct).</li>
        <li><b>Human feedback–aligned models</b>: further adjusted using people’s ratings so the answers are more helpful and safe. Open models like Zephyr are examples of this approach.</li>
    </ul>
    
    <h2>Text Generation from Image and Text</h2>
    <p>
        Some models can look at images and text together, then write text as the answer. 
        IDEFICS 2 and MiniCPM Llama 3 V are good examples. 
        They work like other text models but also accept images. 
        Use them with the image-to-text tools. You can learn more on the image-to-text task page.
    </p>
    
    <h2>Inference</h2>
    <p>
        You can use the 🤗 Transformers <code>text-generation</code> helper to run a model. 
        Give it a starting prompt, and it will continue from there.
    </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>
    <p>
        Text-to-text models use a separate <code>text2text-generation</code> helper. 
        You include the task in the input, and the model returns the result.
    </p>
<pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
from transformers import pipeline
text2text_generator = pipeline("text2text-generation")

text2text_generator("question: What is 42? context: 42 is the answer to life, the universe and everything")
# [{'generated_text': 'the answer to life, the universe and everything'}]

text2text_generator("translate from English to French: I'm very happy")
# [{'generated_text': 'Je suis très heureux'}]
</pre>
    <p>
        You can also use huggingface.js to run text generation models from the browser or Node.js.
    </p>
    
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
import { InferenceClient } from "@huggingface/inference";

const inference = new InferenceClient(HF_TOKEN);

const result = await inference.textGeneration({
  model: "gpt2",
  inputs: "Write a cheerful greeting about summer:",
  parameters: { max_new_tokens: 50 }
});

console.log(result.generated_text);
    </pre>

    <h2>Getting Good Results</h2>
    <p>
        Think of these models as smart helpers that guess what should come next based on patterns they’ve seen. 
        To get strong, useful answers:
    </p>
    <ul>
        <li><b>Be clear and specific</b>: say exactly what you want, include any rules (tone, length, format), and give examples if helpful.</li>
        <li><b>Pick the right model size</b>: bigger models can be more capable, but smaller ones are faster and cheaper. Choose what fits your task.</li>
        <li><b>Use the right kind</b>: instruction-tuned models usually follow requests better than base models.</li>
        <li><b>Give enough context</b>: include key details the model needs (background info, style, audience).</li>
        <li><b>Adjust generation settings</b>: temperature/top‑p control creativity; max tokens control length. Try small changes and compare results.</li>
        <li><b>Domain data helps</b>: for very specific topics (legal, medical, in-house jargon), fine-tuning or giving examples can improve accuracy.</li>
        <li><b>Review and iterate</b>: ask for revisions, or try a different prompt if the first try isn’t right.</li>
    </ul>

    <h2>Limits and Common Misconceptions</h2>
    <ul>
        <li><b>Not a database of facts</b>: models can sound confident yet be wrong. Always verify important information.</li>
        <li><b>Can reflect biases</b>: outputs may mirror issues in the data they learned from. Add guidelines and checks for fairness and tone.</li>
        <li><b>No personal memory by default</b>: they don’t remember past chats unless you include that text again or build a system to store it.</li>
        <li><b>Privacy matters</b>: don’t share sensitive data unless you use secure, compliant setups.</li>
        <li><b>Length limits</b>: models can only read a certain amount of text at once. Summarize or chunk long inputs.</li>
        <li><b>Creativity vs. accuracy</b>: more creative settings may produce lively text but also more mistakes. Tune for your goal.</li>
    </ul>
    
    <h2>Text Generation Inference</h2>
    <p>
        Text Generation Inference (TGI) is an open toolkit for serving large models with fast responses. 
        It powers services like Inference Endpoints and Hugging Chat, and many community projects. 
        You can use it to deploy supported open models of your choice.
    </p>

    <h2>ChatUI Spaces</h2>
    <p>
        Hugging Face Spaces has templates to spin up your own chat app with just a few clicks. 
        ChatUI is an open interface for building a conversational experience around a large language model. 
        Under the hood, Spaces can use TGI for faster replies. 
        Start from a template, customize it, and launch your own model-backed chat in minutes.
    </p>
</div>
"""

QUESTION_ANSWER = """
<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
    <h1>Understanding Question Answering</h1>
    <p>
        Imagine you have a big book and you want to find a specific piece of information. Instead of reading the whole book, you ask a question and a tool helps you find the answer quickly. This is what Question Answering (QA) does. It helps you get answers from a text you provide, like a digital assistant that reads for you.
    </p>
    <h1>How Question Answering Works</h1>

    <h2>Real-Life Uses</h2>
    <h3>Answering Common Questions</h3>
    <p>
        QA can be used to automatically answer questions people often ask. For example, a customer service chatbot can use QA to find answers in product manuals or help articles. To make it faster, you can first find the most relevant part of the text and then use QA on that smaller section.
    </p>

    <h2>Different Ways QA Can Work</h2>
    <p>
        QA can work in a few different ways, depending on what you give it and what you want:
        <ul>
            <li><b>Extractive QA:</b> The tool finds the answer directly from the text you provide, like highlighting a sentence in a book.</li>
            <li><b>Open Generative QA:</b> You give some text as a hint, and the tool writes the answer in its own words based on that text.</li>
            <li><b>Closed Generative QA:</b> You don't give any text, and the tool writes an answer based on what it has learned before. This can be helpful, but it might also guess or be wrong.</li>
        </ul>
        Some tools are designed to handle any topic, while others are better at specific subjects like law or medicine. Specialized tools can be more accurate in their field but might not work well outside it.
    </p>

    <h2>Getting Good Results</h2>
    <ul>
        <li><b>Ask Clear Questions:</b> Simple and direct questions work best, like “What is the refund period?”</li>
        <li><b>Provide Relevant Text:</b> Make sure the text you give actually contains the answer. If it's not there, the tool can't find it.</li>
        <li><b>Use Good Sources:</b> Clean and up-to-date documents lead to better answers.</li>
        <li><b>Choose the Right Tool:</b> Use tools that support your language and, if needed, your specific topic.</li>
        <li><b>Manage Long Texts:</b> Break long texts into smaller parts or find the most relevant section first.</li>
        <li><b>Be Specific:</b> If a question can mean different things, clarify it to avoid confusion.</li>
    </ul>

    <h2>Limits and Misunderstandings</h2>
    <ul>
        <li><b>Extractive QA Can't Make Up Answers:</b> If the text doesn’t have the answer, it won’t appear magically.</li>
        <li><b>Generative QA Might Guess:</b> When writing answers, the tool might sound sure but be wrong. Always check important facts.</li>
        <li><b>Not a Web Search:</b> QA doesn’t search the internet unless you connect it to a search tool.</li>
        <li><b>Confidence Isn’t Certainty:</b> A high score doesn’t mean the answer is correct; always double-check important outputs.</li>
        <li><b>Long or Messy Text Can Confuse:</b> Short, clear passages work better.</li>
        <li><b>Sensitive Topics Need Experts:</b> For medical, legal, or safety-critical answers, involve a human expert.</li>
    </ul>

    <h2>Trying It Out</h2>
    <p>
        You can try QA using a tool called the 🤗 Transformers library. If you don’t pick a specific tool, it uses a small default one. You give it a question and a piece of text with the answer, and it will find the answer for you.
    </p>
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
from transformers import pipeline

qa_model = pipeline("question-answering")

question = "Where do I live?"
context = "My name is Merve and I live in İstanbul."

result = qa_model(question=question, context=context)
print(result)
# Example: {'answer': 'İstanbul', 'start': 31, 'end': 39, 'score': 0.953}
    </pre>
</div>
"""

SUMMARISATION = """
<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
    <h1>Summarization (Hugging Face)</h1>
    <p>
        Summarization is like creating a short version of a long story. Imagine you watched a movie and then told a friend just the main parts in a few sentences. That's what summarization does with text. Some tools pick out the most important sentences, while others rewrite the main ideas in their own words.
    </p>
    <h1>About Summarization</h1>

    <h2>Use Cases</h2>
    <h3>Research Paper Summarization 🧐</h3>
    <p>
        Summarizing research papers helps people quickly decide if they want to read the whole thing. Here are some simple ways to do it:
        <ol>
            <li>Use a ready-made summarizer from Hugging Face and run it as it is.</li>
            <li>Pick a model that works well with academic writing and, if needed, teach it with your own examples to make it better for your field.</li>
            <li>Use a model that can rewrite content in its own words to make clear and natural summaries.</li>
        </ol>
        Real-world examples:
        - A scientist gets a quick overview of a 20-page paper before reading it all.
        - A student makes a short note from lecture notes.
        - A librarian creates short descriptions for new books in a library.
    </p>

    <h3>What helps good performance</h3>
    <p>
        To get clear and reliable summaries:
        <ul>
            <li>Start with clean text: remove unnecessary parts like menus or ads.</li>
            <li>Choose the right model for your text type: news, science, product reviews, etc.</li>
            <li>Provide enough context: include the full section you want summarized, not just a small part.</li>
            <li>Decide the length: choose if you want a short headline, a paragraph, or a longer summary.</li>
            <li>Use examples when possible: show the model examples of good summaries for your needs.</li>
        </ul>
        Analogy: If you want a great travel summary, give the guide your full travel plan and tell them how long the recap should be.
    </p>

    <h3>Limits and common misconceptions</h3>
    <p>
        It's important to know what summarization can and cannot do:
        <ul>
            <li>May miss small details: short summaries might skip specific cases, references, or numbers.</li>
            <li>Can sound confident but be wrong: some models might make small mistakes or add dates that weren't in the text.</li>
            <li>Very long documents are tough: breaking them into sections and summarizing step by step often works better.</li>
            <li>Style matters: a model used to news articles might not do well on legal or medical text without examples.</li>
            <li>Not a replacement for careful reading: don't rely on a summary alone for important decisions.</li>
        </ul>
        Common misconception: “The model truly understands the text.” In reality, it’s very good at finding patterns and rewriting, but it doesn’t “know” like a human does.
    </p>

    <h3>Inference</h3>
    <p>
        You can use the 🤗 Transformers summarization tool to run existing models. 
        If you don’t provide a model name, it uses a default model called <a href="https://huggingface.co/sshleifer/distilbart-cnn-12-6">sshleifer/distilbart-cnn-12-6</a>.
    </p>
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
from transformers import pipeline

summarizer = pipeline("summarization")
result = summarizer(
    "Paris is the capital and most populous city of France, with an estimated population of 2,175,601 residents as of 2018, "
    "in an area of more than 105 square kilometres (41 square miles). The City of Paris is the centre and seat of government "
    "of the region and province of Île-de-France, or Paris Region, which has an estimated population of 12,174,880, or about "
    "18 percent of the population of France as of 2017."
)
print(result)
## [{{ "summary_text": "Paris is the capital and most populous city of France..." }}]
    </pre>

    <p>
        You can also use <a href="https://github.com/huggingface/huggingface.js">huggingface.js</a> to run summarization models hosted on Hugging Face Hub.
    </p>
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
import {{ InferenceClient }} from "@huggingface/inference";

const inference = new InferenceClient(HF_TOKEN);
const inputs =
  "Paris is the capital and most populous city of France, with an estimated population of 2,175,601 residents as of 2018, "
+ "in an area of more than 105 square kilometres (41 square miles). The City of Paris is the centre and seat of government of "
+ "the region and province of Île-de-France, or Paris Region, which has an estimated population of 12,174,880, or about 18 percent "
+ "of the population of France as of 2017.";

await inference.summarization({{
  model: "sshleifer/distilbart-cnn-12-6",
  inputs,
}});
    </pre>
</div>
"""

TEXT_2_IMAGGE = f"""
<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
    <h1>Turning Words into Pictures</h1>
    <p>
        Imagine you could describe a scene to an artist, and they instantly paint it for you. That's what text-to-image tools do! You type out what you want to see, and the computer creates a picture based on your description. You can also use these tools to make changes to existing photos by giving simple instructions.
    </p>
    {TEXT2IMAGE_IMAGE_HTML}
    <h1>Understanding Text-to-Image Tools</h1>

    <h2>What Can These Tools Do?</h2>
    <p>
        Think of these tools as a digital artist at your service. You can ask them to:
    </p>
    <ul>
        <li>Create brand-new images from a short sentence or a detailed paragraph.</li>
        <li>Edit your own photos, like changing the color of the sky or adding a lamp to a table.</li>
        <li>Try different styles or moods, like making a picture look like a sunny day or a rainy night.</li>
    </ul>

    <h2>How to Get Good Results</h2>
    <ul>
        <li>Be clear with your instructions: Mention the main subject, setting, style, and any important details. Start simple, then add more specifics.</li>
        <li>Use good quality photos for editing: Clear and well-lit photos work best.</li>
        <li>Choose the right tool: Some tools are better at creating images of people, products, or specific art styles.</li>
        <li>Have a powerful computer: A modern computer can make the process faster and improve the quality of the images.</li>
        <li>Experiment: Start with a basic idea, see the result, and then refine your description step by step.</li>
    </ul>

    <h2>Real-World Uses</h2>
    <h3>Creating Sample Images</h3>
    <p>
        Businesses can quickly make example images from text to plan ideas, test layouts, or create prototypes without needing a photo shoot.
    </p>
    <h3>Interactive Chatbots</h3>
    <p>
        Chatbots can show helpful images during conversations, like illustrating a cozy reading corner or a recipe’s final dish, making interactions more engaging.
    </p>
    <h3>Fashion Design</h3>
    <p>
        Fashion designers can explore different patterns, colors, and styles before making real samples. It's like sketching hundreds of options instantly to see what stands out.
    </p>
    <h3>Architecture and Interior Design</h3>
    <p>
        Architects and interior designers can visualize rooms from rough descriptions, like floor plans or furniture styles, to quickly explore different looks and layouts.
    </p>

    <h2>Different Ways to Use These Tools</h2>
    <h3>Editing Images</h3>
    <p>
        You can change an image by writing simple instructions, like turning it into sunset lighting or adding a plant next to the sofa.
        <ul>
            <li><b>Editing Computer-Generated Images:</b> Changing images that were created by the tool itself, while keeping the main idea the same.</li>
        </ul>
        {SYNTHETIC_HTML}
        <ul>
            <li>Editing Real Photos: Changing real photos can be trickier because the tool must match real-world lighting, texture, and detail.</li>
        </ul>
        {REAL_HTML}
    </p>""" + """

    <h3>Personalizing Images</h3>
    <p>
        Personalization means teaching the tool about a new subject, like your pet or a product, using a few example photos. After that, you can ask for new images of that subject in different scenes, like your dog as an astronaut.
    </p>

    <h2>Limits and Misunderstandings</h2>
    <ul>
        <li>Realism can vary: Hands, text in images (like signs), and fine details might look odd or inaccurate.</li>
        <li>Consistency is tough: Getting the exact same character or object across many images can be difficult without personalization.</li>
        <li>Bias and gaps: The images reflect patterns in the data the tool learned from and may contain bias or miss niche subjects.</li>
        <li>Not a search engine: It creates new images; it doesn’t pull exact photos from the internet.</li>
        <li>Resolution trade-offs: Very high-resolution images may need more steps or special tools to improve quality.</li>
        <li>Safety and rights: Be careful with sensitive images and respect copyrights, trademarks, and people’s privacy.</li>
    </ul>

    <h3>How to Use These Tools</h3>
    <p>
        You can use text-to-image tools on your computer or through the internet. Start with a short, simple idea. If the result is close to what you want, add more details in small steps.
    </p>
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
from diffusers import StableDiffusionPipeline, EulerDiscreteScheduler
import torch

model_id = "stabilityai/stable-diffusion-2"
scheduler = EulerDiscreteScheduler.from_pretrained(model_id, subfolder="scheduler")
pipe = StableDiffusionPipeline.from_pretrained(model_id, scheduler=scheduler, torch_dtype=torch.float16)
pipe = pipe.to("cuda")  # Use GPU if available for faster, higher-quality results

prompt = "a photo of an astronaut riding a horse on mars"
image = pipe(prompt).images[0]
    </pre>
    <p>
        You can also use <a href="https://github.com/huggingface/huggingface.js">huggingface.js</a> to run text-to-image models on Hugging Face Hub.
    </p>
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
import {{ InferenceClient }} from "@huggingface/inference";

const inference = new InferenceClient(HF_TOKEN);
await inference.textToImage({{
    model: "stabilityai/stable-diffusion-2",
    inputs: "award winning high resolution photo of a giant tortoise/((ladybird)) hybrid, [trending on artstation]",
    parameters: {{
        negative_prompt: "blurry",
    }},
}});
    </pre>
</div>
"""

# ---- Placeholder HTML pages ----
TEXT_GENERATION_HTML = TEXT_GENERATION

QUESTION_ANSWER_HTML = QUESTION_ANSWER

SUMMARISATION_HTML = SUMMARISATION

TEXT_2_IMAGGE_HTML = TEXT_2_IMAGGE


# ---- Page switching function ----
def switch_content(choice):

    pages = {
        "Text Generation": TEXT_GENERATION_HTML,
        "Question Answering": QUESTION_ANSWER_HTML,
        "Summarisation": SUMMARISATION_HTML,
        "Text-to-Image": TEXT_2_IMAGGE_HTML,
    }

    return pages.get(choice, TEXT_GENERATION_HTML)


# =========================================================
# UI
# =========================================================

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 })
            );
        }
    }
});
</script>
""") as demo:

    gr.Markdown("### 📘 Read through the resource before completing the rest of the survey")

    # ---- Navigation bar ----
    nav_bar = gr.Radio(
        choices=[
            "Text Generation",
            "Question Answering",
            "Summarisation",
            "Text-to-Image",
        ],
        value="Text Generation",
        label="Topics",
        interactive=True
    )

    # ---- Main content ----
    content_display = gr.HTML(TEXT_GENERATION_HTML)
    
    gr.HTML("""
    <div style="
        margin: 40px auto;
        padding: 25px;
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        border-radius: 12px;
    ">
        Remember to return to the survey once you're done here!
    </div>
    """)

    nav_bar.change(
        fn=switch_content,
        inputs=nav_bar,
        outputs=content_display
    )

demo.launch(allowed_paths=["."], share=True)