Added text2image, gotta add images next

app.py

@@ -284,6 +284,84 @@ await inference.summarization({{
 </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.
+    </p>
+    <h1>About Text-to-Image</h1>
+    <h2>Use Cases</h2>
+    <h3>Data Generation</h3>
+    <p>
+        Businesses can generate data for their use cases by inputting text and getting image outputs.
+    </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.
+    </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.
+    </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.
+    </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.
+        <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>
+        </ul>
+        <ul>
+            <li>Real image editing: Similar to synthetic image editing, except we're using real photos/images. This task is usually more complex.</li>
+        </ul>
+    </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.
+    </p>
+    <h3>Inference</h3>
+    <p>
+        You can use diffusers pipelines to infer with text-to-image models.
+    </p>
+    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+from diffusers import StableDiffusionPipeline, EulerDiscreteScheduler
+
+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")
+
+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.
+    </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
 
@@ -291,11 +369,7 @@ QUESTION_ANSWER_HTML = QUESTION_ANSWER
 
 SUMMARISATION_HTML = SUMMARISE
 
-IMAGE_GENERATION_HTML = """
-<div style="max-width: 800px; margin: auto;">
-    <h1>Image Generation</h1>
-    <p>Image generation content goes here...</p>
-</div>
+TEXT_2_IMAGGE_HTML = TEXT_2_IMAGGE
 """
 
 # ---- Page switching function ----
@@ -305,7 +379,7 @@ def switch_content(choice):
         "Text Generation": TEXT_GENERATION_HTML,
         "Question Answering": QUESTION_ANSWER_HTML,
         "Summarisation": SUMMARISATION_HTML,
-        "Image Generation": IMAGE_GENERATION_HTML,
+        "Text-to-Image": TEXT_2_IMAGGE_HTML,
     }
 
     return pages.get(choice, TEXT_GENERATION_HTML)