Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 import os
 import requests
@@ -76,18 +75,43 @@ def test_preview_chatbot(message, history):
     response = predict_beta(message, history, SYSTEM_PROMPT)
     return response
 
-welcome_preview_message = f"""
-Expand your imagination and broaden your horizons with LLM. Welcome to **{TITLE}**!:\nThis is a chatbot that can generate detailed prompts for image generation models based on simple and short user input.\nTry one of these prompts:
+# Create a Gradio custom component for image and prompt
+class ImagePromptComponent(gr.Component):
+    def __init__(self, image_url, prompt):
+        self.image_url = image_url
+        self.prompt = prompt
+        super().__init__()
 
-- "{EXAMPLE_INPUTS[0]['prompt']}"
-- "{EXAMPLE_INPUTS[1]['prompt']}"
-- "{EXAMPLE_INPUTS[2]['prompt']}"
-- "{EXAMPLE_INPUTS[3]['prompt']}"
-"""
+    def to_html(self):
+        return f"""
+        <div>
+            <img src='{self.image_url}' alt='Image' style='width:100px;height:100px;'>
+            <p>{self.prompt}</p>
+        </div>
+        """
 
-chatbot_preview = gr.Chatbot(layout="panel", value=[(None, welcome_preview_message)])
-textbox_preview = gr.Textbox(scale=7, container=False, value=EXAMPLE_INPUTS[0]['prompt'])
+# Generate instances of the custom component
+image_prompt_components = [
+    ImagePromptComponent(EXAMPLE_INPUTS[i]['image_url'], EXAMPLE_INPUTS[i]['prompt']) for i in range(4)
+]
 
-demo = gr.ChatInterface(test_preview_chatbot, chatbot=chatbot_preview, textbox=textbox_preview, examples=[[EXAMPLE_INPUTS[0]['prompt']]])
+# Display HTML and launch the interface
+gr.Interface(
+    fn=test_preview_chatbot,
+    live=False,
+    examples=[[EXAMPLE_INPUTS[0]['prompt']]],
+    inputs=image_prompt_components,
+    outputs=gr.Textbox(),
+    layout="vertical",
+    html=html_temp.format(
+        image_url_1=image_prompt_components[0].image_url,
+        prompt_1=image_prompt_components[0].prompt,
+        image_url_2=image_prompt_components[1].image_url,
+        prompt_2=image_prompt_components[1].prompt,
+        image_url_3=image_prompt_components[2].image_url,
+        prompt_3=image_prompt_components[2].prompt,
+        image_url_4=image_prompt_components[3].image_url,
+        prompt_4=image_prompt_components[3].prompt,
+    ),
+).launch(share=True)
 
-demo.launch(share=True)