Update app.py

GPT versions of all sites

app.py

@@ -81,131 +81,164 @@ 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>
-        Generating text is the task of generating new text given another text. 
-        These models can, for example, fill in incomplete text or paraphrase.
+        Text generation is like supercharged autocomplete. You type a few words, and the model continues the text. 
+        It can complete sentences, answer questions, rewrite text, or follow instructions like a helpful assistant.
     </p>
-    {IMAGE_HTML}
+    {IMAGE_HTML}""" + """
     <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.
+        This page covers two main types of models:
+        <a href="https://huggingface.co/models?pipeline_tag=text-generation&sort=downloads">text generation</a> (continue the text) and 
+        <a href="https://huggingface.co/models?other=text2text-generation&sort=downloads">text-to-text generation</a> (turn one text into another, like translate or summarize).
+        Popular open models used for chat and instructions are also included. 
+        You can see a ranked list of open large language 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>
-        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>.
+        Some models are tuned to follow everyday instructions, such as “Write a friendly email to my landlord.” 
+        Try open-access 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>
-        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>.
+        Models can also help with coding by writing snippets from descriptions or continuing your code. 
+        StarCoder is a popular open model that can write code in many languages. Try it 
+        <a href="https://huggingface.co/spaces/bigcode/bigcode-playground">here</a>.
     </p>
     
-    <h3>Stories Generation</h3>
+    <h3>Story Writing</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>!
+        Give a starting 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 your needs are very specific, 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 Generation Models</h3>
+    <h3>Completion-Style 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:
+        These models predict the next words, one after another, to build longer text. They can:
     <ul>
-        <li>Given an incomplete sentence, complete it.
-        <li>Continue a story given the first sentences.
-        <li>Provided a code description, generate the code.
+        <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>
-    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.
+    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 Generation Models</h3>
+    <h3>Text-to-Text 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.
+        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 Variants</h3>
-        When it comes to text generation, the underlying language model can come in several types:
-        <ul>
-            <li><b>Base models</b>: 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><b>Instruction-trained models</b>: 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><b>Human feedback models</b>: 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>
+    
+    <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>
-        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.
+        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 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.
+        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 = pipeline("text-generation", model="gpt2")
 generator("Hello, I'm a language model,", max_length=30, num_return_sequences=3)
     </pre>
-
     <p>
-        Text-to-Text generation models have a separate pipeline called text2text-generation. 
-        This pipeline takes an input containing the sentence including the task and returns the output of the accomplished task.
-    <p>
-""" + """<pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+        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>
+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 use huggingface.js to infer text classification models on Hugging Face Hub.
+        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);
-await inference.conversational({
-    model: "distilbert-base-uncased-finetuned-sst-2-english",
-    inputs: "I love this movie!",
+
+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-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>
+    <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 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.
+    <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>
 """
 
@@ -213,47 +246,74 @@ QUESTION_ANSWER = f"""
 <div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
     <h1>Question Answering (Hugging Face)</h1>
     <p>
-        Question Answering models can retrieve the answer to a question from a given text, which is useful for searching for an answer in a document. 
-        Some question answering models can generate answers without context!
+        Question Answering (QA) is about asking a question and getting an answer from text you provide. 
+        Think of it like using “find” in a digital book: you ask a question, and the tool scans the text to pull out the answer. 
+        Some QA systems can also answer without any text given, by writing an answer on their own.
     </p>
-    {QA_IMAGE_HTML}
+    {QA_IMAGE_HTML}"""+"""
     <h1>About Question Answering</h1>
+
     <h2>Use Cases</h2>
     <h3>Frequently Asked Questions</h3>
     <p>
-        You can use Question Answering (QA) models to automate the response to frequently asked questions by using a knowledge base (documents) as context. 
-        Answers to customer questions can be drawn from those documents.
-        ⚡⚡ If you’d like to save inference time, you can first use <a href="https://huggingface.co/tasks/sentence-similarity">passage ranking</a> models to see which document might contain the answer to the question and iterate over that document with the QA model instead.
+        QA models can help automatically answer common questions by looking up information in a set of documents (your knowledge base). 
+        For example, a customer support bot can pull answers from product manuals or help center articles.
+        ⚡⚡ To speed things up, you can first find the most relevant page or paragraph, then run QA only on that smaller piece. 
+        One way to do this is with <a href="https://huggingface.co/tasks/sentence-similarity">passage ranking</a> models that suggest where the answer is most likely to be.
     </p>
+
     <h2>Task Variants</h2>
     <p>
-        There are different QA variants based on the inputs and outputs:
+        There are a few ways QA can work, depending on what you give it and what you want back:
         <ul>
-            <li><b>Extractive QA:</b> The model <b>extracts</b> the answer from a context. 
-            The context here could be a provided text, a table or even HTML! This is usually solved with BERT-like models.</li>
-            <li><b>Open Generative QA:</b> The model <b>generates</b> free text directly based on the context. 
-            You can learn more about the Text Generation task in its page.</li>
-            <li><b>Closed Generative QA:</b> In this case, no context is provided. The answer is completely generated by a model.</li>
+            <li><b>Extractive QA:</b> The model <b>picks</b> the answer from the text you provide (like highlighting a sentence in a document). 
+            The text could be a paragraph, a table, or even a web page.</li>
+            <li><b>Open Generative QA:</b> You give some text as context, and the model <b>writes</b> the answer in its own words based on that text.</li>
+            <li><b>Closed Generative QA:</b> You do <b>not</b> give any text. The model writes an answer from what it has learned before. (This can be helpful, but it can also guess or be wrong.)</li>
         </ul>
-        The schema above illustrates extractive, open book QA. The model takes a context and the question and extracts the answer from the given context.
-
-        You can also differentiate QA models depending on whether they are open-domain or closed-domain. 
-        Open-domain models are not restricted to a specific domain, while closed-domain models are restricted to a specific domain (e.g. legal, medical documents).
+        The visual above shows the “open-book” style: you provide both a question and some text, and the model pulls the answer from that text.
+        <br><br>
+        Some models aim to handle any topic, while others are trained for a specific field (for example, law or medicine). 
+        Topic‑specific models can do better on their area but may struggle outside it.
     </p>
+
+    <h2>What you need for good results</h2>
+    <ul>
+        <li><b>Clear questions:</b> Short, direct questions work best (“What is the refund period?”).</li>
+        <li><b>Relevant context:</b> Provide text that actually contains the answer. If the answer isn’t there, extractive QA cannot find it.</li>
+        <li><b>High‑quality sources:</b> Clean, up‑to‑date documents lead to better answers.</li>
+        <li><b>Right model for the job:</b> Use models that support your language and, if needed, your domain (e.g., legal, medical).</li>
+        <li><b>Manage long documents:</b> Break long text into smaller parts or first pick the most relevant passage before running QA.</li>
+        <li><b>Be specific:</b> If a question can mean many things, clarify it to reduce confusion.</li>
+    </ul>
+
+    <h2>Limits and common misconceptions</h2>
+    <ul>
+        <li><b>Extractive QA cannot invent answers:</b> If the text doesn’t contain the answer, it won’t magically appear.</li>
+        <li><b>Generative QA can make things up:</b> When writing answers, models may sound confident but be wrong. Verify important facts.</li>
+        <li><b>Not a web browser:</b> QA does not search the internet unless you connect it to a search or retrieval step.</li>
+        <li><b>Confidence is not certainty:</b> A high score does not guarantee correctness; always sanity‑check critical outputs.</li>
+        <li><b>Very long or messy input can confuse the model:</b> Short, relevant passages work better.</li>
+        <li><b>Sensitive topics need human review:</b> For medical, legal, or safety‑critical answers, involve an expert.</li>
+    </ul>
+
     <h2>Inference</h2>
     <p>
-    You can infer with QA models with the 🤗 Transformers library using the question-answering pipeline. 
-    If no model checkpoint is given, the pipeline will be initialized with distilbert-base-cased-distilled-squad. 
-    This pipeline takes a question and a context from which the answer will be extracted and returned.
+        You can try QA with the 🤗 Transformers library using the question‑answering pipeline. 
+        If you don’t choose a specific model, it uses a small default one (distilbert-base-cased-distilled-squad). 
+        Give it a question and a piece of text that contains the answer, and it will return the answer span.
     </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."
-qa_model(question = question, context = context)
-## {{'answer': 'İstanbul', 'end': 39, 'score': 0.953, 'start': 31}}
+
+result = qa_model(question=question, context=context)
+print(result)
+# Example: {'answer': 'İstanbul', 'start': 31, 'end': 39, 'score': 0.953}
     </pre>
 </div>
 """
@@ -262,118 +322,192 @@ SUMMARISATION = f"""
 <div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
     <h1>Summarisation (Hugging Face)</h1>
     <p>
-        Summarization is the task of producing a shorter version of a document while preserving its important information. 
-        Some models can extract text from the original input, while other models can generate entirely new text.
+        Summarisation means turning a long piece of text into a much shorter version that keeps the main ideas. 
+        Think of it like a movie trailer for an article: you get the key moments without watching the whole film.
+        Some tools pick the most important sentences from the original text, while others rewrite the main points in their own words.
     </p>
-    {SUMMARISATION_IMAGGE_HTML}
+    {SUMMARISATION_IMAGGE_HTML}""" + """
     <h1>About Summarisation</h1>
+
     <h2>Use Cases</h2>
-    <h3>Research Paper Summarization 🧐</h3>
+    <h3>Research Paper Summarisation 🧐</h3>
     <p>
-        Research papers can be summarized to allow researchers to spend less time selecting which articles to read. 
-        There are several approaches you can take for a task like this:
+        Summaries of research papers help readers quickly decide what to read in full. You can approach this in a few simple ways:
         <ol>
-            <li>Use an existing extractive summarization model on the Hub to do inference.</li>
-            <li>Pick an existing language model trained for academic papers. This model can then be trained in a process called fine-tuning so it can solve the summarization task.</li>
-            <li>Use a sequence-to-sequence model like T5 for abstractive text summarization.</li>
+            <li>Use an existing summariser from the Hugging Face Hub and run it as-is.</li>
+            <li>Choose a model that works well on academic writing and, if needed, teach it with your own examples so it better matches your field.</li>
+            <li>Use a model that rewrites content in its own words (for example, T5) to create clear, natural summaries.</li>
         </ol>
+        Real-world examples:
+        - A scientist gets a short overview of a 20-page paper before diving in.
+        - A student creates a quick “abstract-style” note from lecture notes.
+        - A librarian builds short descriptions for new entries in a repository.
+    </p>
+
+    <h3>What helps good performance</h3>
+    <p>
+        To get clear and reliable summaries:
+        <ul>
+            <li>Start with clean input: remove boilerplate (menus, ads, repeated footers).</li>
+            <li>Match the model to your content type: news, scientific text, product reviews, etc.</li>
+            <li>Give enough context: include the full section you want summarised, not just a fragment.</li>
+            <li>Set the target length: decide if you want a headline, a paragraph, or a multi-paragraph summary.</li>
+            <li>Use examples when possible: if you can, show the model examples of “good” summaries for your use case.</li>
+        </ul>
+        Analogy: If you want a great travel summary, give the guide your full itinerary and tell them how long the recap should be.
     </p>
+
+    <h3>Limits and common misconceptions</h3>
+    <p>
+        It’s important to know what summarisation can and cannot do:
+        <ul>
+            <li>May miss fine details: short summaries can skip edge cases, citations, or numbers.</li>
+            <li>Can sound confident but be wrong: some models may introduce small mistakes or dates that weren’t in the text.</li>
+            <li>Very long documents are hard: splitting into sections and summarising step by step often works better.</li>
+            <li>Style matters: a model used to news articles may not do as well on legal or medical text without examples.</li>
+            <li>Not a replacement for careful reading: don’t rely on a summary alone for decisions with high stakes.</li>
+        </ul>
+        Common misconception: “The model truly understands the text.” In reality, it’s very good at pattern-matching and rewriting, but it doesn’t “know” like a human does.
+    </p>
+
     <h3>Inference</h3>
     <p>
-        You can use the 🤗 Transformers library summarization pipeline to infer with existing Summarization models. 
-        If no model name is provided the pipeline will be initialized with <a href="https://huggingface.co/sshleifer/distilbart-cnn-12-6">sshleifer/distilbart-cnn-12-6</a>.
+        You can use the 🤗 Transformers summarisation pipeline to run existing models. 
+        If you don’t provide a model name, it uses <a href="https://huggingface.co/sshleifer/distilbart-cnn-12-6">sshleifer/distilbart-cnn-12-6</a> by default.
     </p>
     <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
 from transformers import pipeline
 
-classifier = pipeline("summarization")
-classifier("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.")
-## [{{ "summary_text": " Paris is the capital and most populous city of France..." }}]
+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 use <a href="https://github.com/huggingface/huggingface.js">huggingface.js</a> to infer summarization models on Hugging Face Hub.
+        You can also use <a href="https://github.com/huggingface/huggingface.js">huggingface.js</a> to run summarisation 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.";
+  "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,
+  model: "sshleifer/distilbart-cnn-12-6",
+  inputs,
 }});
     </pre>
-</div>    
+</div>
 """
 
 TEXT_2_IMAGGE = f"""
 <div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
     <h1>Text-to-Image (Hugging Face)</h1>
     <p>
-        Text-to-image is the task of generating images from input text. These pipelines can also be used to modify and edit images based on text prompts.
+        Text-to-image tools turn words into pictures. You describe what you want (like telling an artist), and the system creates an image from that description. 
+        These tools can also change existing photos by following simple written instructions.
     </p>
     {TEXT2IMAGE_IMAGE_HTML}
     <h1>About Text-to-Image</h1>
+
+    <h2>What this can do</h2>
+    <p>
+        Think of it like giving directions to a skilled illustrator. You can ask for:
+    </p>
+    <ul>
+        <li>Brand-new images made from a short sentence or detailed paragraph.</li>
+        <li>Edits to your own photos (for example, “make the sky orange” or “add a cozy lamp on the table”).</li>
+        <li>Variations on a theme (try different styles, moods, or times of day).</li>
+    </ul>
+
+    <h2>What you need for good results</h2>
+    <ul>
+        <li>Clear instructions: Mention the main subject, setting, style, and any key details. Start simple, then add specifics.</li>
+        <li>Good input images (for editing): Sharp, well-lit photos make better edits.</li>
+        <li>Right model choice: Some models are better at people, products, or certain art styles.</li>
+        <li>Enough compute: A modern GPU speeds things up and can improve output size/quality.</li>
+        <li>Iterate: Try a basic prompt first, look at the result, then refine your wording step by step.</li>
+    </ul>
+
     <h2>Use Cases</h2>
     <h3>Data Generation</h3>
     <p>
-        Businesses can generate data for their use cases by inputting text and getting image outputs.
+        Companies can quickly create example images from text to plan ideas, test layouts, or fill prototypes without needing a photo shoot.
     </p>
     <h3>Immersive Conversational Chatbots</h3>
     <p>
-        Chatbots can be made more immersive if they provide contextual images based on the input provided by the user.
+        Chatbots can show helpful images on the fly (like “show me a cozy reading corner” or “illustrate this recipe’s final dish”) to make conversations more engaging.
     </p>
     <h3>Creative Ideas for Fashion Industry</h3>
     <p>
-        Different patterns can be generated to obtain unique pieces of fashion. 
-        Text-to-image models make creations easier for designers to conceptualize their design before actually implementing it.
+        Designers can explore patterns, colors, and cuts before making real samples. 
+        It’s like sketching hundreds of options instantly to see what stands out.
     </p>
     <h3>Architecture Industry </h3>
     <p>
-        Architects can utilise the models to construct an environment based out on the requirements of the floor plan. 
-        This can also include the furniture that has to be placed in that environment.
+        Architects and interior designers can visualize rooms from rough descriptions (floor plans, style, furniture) to quickly explore different looks and layouts.
     </p>
+
     <h2>Task Variants</h2>
     <h3>Image Editing</h3>
     <p>
-        Image editing with text-to-image models involves modifying an image following edit instructions provided in a text prompt.
+        You can change an image by writing simple instructions (for example, “turn it into sunset lighting” or “add a plant next to the sofa”).
         <ul>
-            <li><b>Synthetic image editing:</b> Adjusting images that were initially created using an input prompt while preserving the overall meaning or context of the original image.</li>
+            <li><b>Synthetic image editing:</b> Editing images that were created by a model in the first place, while keeping the main idea the same.</li>
         </ul>
         {SYNTHETIC_HTML}
         <ul>
-            <li>Real image editing: Similar to synthetic image editing, except we're using real photos/images. This task is usually more complex.</li>
+            <li>Real image editing: Editing real photos. This is often trickier because the model must match real-world lighting, texture, and detail.</li>
         </ul>
         {REAL_HTML}
-    </p>
+    </p>""" + """
+
     <h3>Personalization</h3>
     <p>
-        Personalization refers to techniques used to customize text-to-image models. 
-        We introduce new subjects or concepts to the model, which the model can then generate when we refer to them with a text prompt.
-
-        For example, you can use these techniques to generate images of your dog in imaginary settings, after you have taught the model using a few reference images of the subject (or just one in some cases). 
-        Teaching the model a new concept can be achieved through fine-tuning, or by using training-free techniques.
+        Personalization means teaching the system about a new subject (like your dog, your product, or your logo) using a few example photos. 
+        After that, you can ask for new images of that same subject in different scenes (for example, “my dog as an astronaut”).
+        This can be done by briefly “learning” from your examples or by using lighter, training-free methods.
     </p>
+
+    <h2>Limits and common misconceptions</h2>
+    <ul>
+        <li>Realism varies: Hands, text in images (like signs), and fine details can look odd or inaccurate.</li>
+        <li>Consistency is hard: Getting the exact same character or object across many images can be difficult without personalization.</li>
+        <li>Bias and gaps: Outputs reflect patterns in the data the model 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 upscaling tools.</li>
+        <li>Safety and rights: Avoid sharing sensitive images. Be mindful of copyrights, trademarks, and people’s privacy.</li>
+    </ul>
+
     <h3>Inference</h3>
     <p>
-        You can use diffusers pipelines to infer with text-to-image models.
+        You can run text-to-image models locally with diffusers pipelines, or call them from the web. 
+        Try a short, simple prompt first. If the result is close, add 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")
+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 use <a href="https://github.com/huggingface/huggingface.js">huggingface.js</a> to infer text-to-image models on Hugging Face Hub.
+        You can 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";