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'' with open("QuestionAnswerTeaser.png", "rb") as f: encoded = base64.b64encode(f.read()).decode() QA_IMAGE_HTML = f'' with open("SummarisationTeaser.png", "rb") as f: encoded = base64.b64encode(f.read()).decode() SUMMARISATION_IMAGGE_HTML = f'' with open("Text2ImageTeaser.png", "rb") as f: encoded = base64.b64encode(f.read()).decode() TEXT2IMAGE_IMAGE_HTML = f'' with open("SyntheticImage.png", "rb") as f: encoded = base64.b64encode(f.read()).decode() SYNTHETIC_HTML = f'' with open("RealImage.jpeg", "rb") as f: encoded = base64.b64encode(f.read()).decode() REAL_HTML = f'' 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 = """

Text Generation

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.

During inference, the model repeatedly samples the most likely next token until a stopping condition is reached.

""" # ---- Hugging Face reference content ---- TEXT_GENERATION = f"""

Text Generation (Hugging Face)

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.

{IMAGE_HTML}""" + """

About Text Generation

There are two main types of models for text generation: text generation (which continues the text you start) and text-to-text generation (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 here.

Use Cases

Instruction Models

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 Hugging Chat.

Code Generation

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 here.

Story Writing

Start with a line like “Once upon a time,” and the model can continue with a story. Try a story-focused app by MosaicML here. If you have very specific needs, you can train a model from scratch. Learn how in the free Transformers course.

Task Variants

Completion-Style Models

These models predict the next words, one after another, to build longer text. They can:

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.

Text-to-Text Models

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.

Language Model Types

When you pick a model, you’ll often see three broad types:

Text Generation from Image and Text

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.

Inference

You can use the 🤗 Transformers text-generation helper to run a model. Give it a starting prompt, and it will continue from there.

from transformers import pipeline
generator = pipeline("text-generation", model="gpt2")
generator("Hello, I'm a language model,", max_length=30, num_return_sequences=3)
    

Text-to-text models use a separate text2text-generation helper. You include the task in the input, and the model returns the result.

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'}]

You can also use huggingface.js to run text generation models from the browser or Node.js.

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);
    

Getting Good Results

Think of these models as smart helpers that guess what should come next based on patterns they’ve seen. To get strong, useful answers:

Limits and Common Misconceptions

Text Generation Inference

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.

ChatUI Spaces

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.

""" QUESTION_ANSWER = """

Understanding Question Answering

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.

How Question Answering Works

Real-Life Uses

Answering Common Questions

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.

Different Ways QA Can Work

QA can work in a few different ways, depending on what you give it and what you want:

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.

Getting Good Results

Limits and Misunderstandings

Trying It Out

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.

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}
    
""" SUMMARISATION = """

Summarization (Hugging Face)

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.

About Summarization

Use Cases

Research Paper Summarization 🧐

Summarizing research papers helps people quickly decide if they want to read the whole thing. Here are some simple ways to do it:

  1. Use a ready-made summarizer from Hugging Face and run it as it is.
  2. 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.
  3. Use a model that can rewrite content in its own words to make clear and natural summaries.
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.

What helps good performance

To get clear and reliable summaries:

Analogy: If you want a great travel summary, give the guide your full travel plan and tell them how long the recap should be.

Limits and common misconceptions

It's important to know what summarization can and cannot do:

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.

Inference

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 sshleifer/distilbart-cnn-12-6.

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..." }}]
    

You can also use huggingface.js to run summarization models hosted on Hugging Face Hub.

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,
}});
    
""" TEXT_2_IMAGGE = f"""

Turning Words into Pictures

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.

{TEXT2IMAGE_IMAGE_HTML}

Understanding Text-to-Image Tools

What Can These Tools Do?

Think of these tools as a digital artist at your service. You can ask them to:

How to Get Good Results

Real-World Uses

Creating Sample Images

Businesses can quickly make example images from text to plan ideas, test layouts, or create prototypes without needing a photo shoot.

Interactive Chatbots

Chatbots can show helpful images during conversations, like illustrating a cozy reading corner or a recipe’s final dish, making interactions more engaging.

Fashion Design

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.

Architecture and Interior Design

Architects and interior designers can visualize rooms from rough descriptions, like floor plans or furniture styles, to quickly explore different looks and layouts.

Different Ways to Use These Tools

Editing Images

You can change an image by writing simple instructions, like turning it into sunset lighting or adding a plant next to the sofa.

{SYNTHETIC_HTML} {REAL_HTML}

""" + """

Personalizing Images

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.

Limits and Misunderstandings

How to Use These Tools

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.

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]
    

You can also use huggingface.js to run text-to-image models on Hugging Face Hub.

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",
    }},
}});
    
""" # ---- 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=""" """) 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("""
Remember to return to the survey once you're done here!
""") nav_bar.change( fn=switch_content, inputs=nav_bar, outputs=content_display ) demo.launch(allowed_paths=["."], share=True)