Update app.py

app.py

@@ -8,21 +8,15 @@ from threading import Thread
 
 MODEL_LIST = ["nawhgnuj/DonaldTrump-Llama-3.1-8B-Chat"]
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
-MODEL = os.environ.get("MODEL_ID")
+MODEL = os.environ.get("MODEL_ID", "nawhgnuj/DonaldTrump-Llama-3.1-8B-Chat")
 
-TITLE = "<h1 style='color: #E53935; text-align: center;'>Donald Trump Chatbot</h1>"
+TITLE = "<h1 style='color: #B71C1C; text-align: center;'>Donald Trump Chatbot</h1>"
 
-PLACEHOLDER = """
-<div style='text-align: center;'>
-<img src='https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg' style='width: 200px; border-radius: 50%;'>
-<p style='color: #E53935; font-weight: bold;'>Hi! I'm Donald Trump!</p>
-<p>Let's Make America Great Again! Ask me anything.</p>
-</div>
-"""
+TRUMP_AVATAR = "https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg"
 
 CSS = """
 .chatbot {
-    background-color: #FFCDD2;
+    background-color: white;
 }
 .duplicate-button {
     margin: auto !important;
@@ -32,7 +26,17 @@ CSS = """
 }
 h3 {
     text-align: center;
-    color: #E53935;
+    color: #B71C1C;
+}
+.contain {object-fit: contain}
+.avatar {width: 40px; height: 40px; border-radius: 50%; object-fit: cover;}
+.user-message {
+    background-color: white !important;
+    color: black !important;
+}
+.bot-message {
+    background-color: #B71C1C !important;
+    color: white !important;
 }
 """
 
@@ -98,20 +102,52 @@ def stream_chat(
         buffer += new_text
         yield buffer
 
-chatbot = gr.Chatbot(height=600, placeholder=PLACEHOLDER, elem_classes="chatbot")
+def add_text(history, text):
+    history = history + [(text, None)]
+    return history, ""
+
+def bot(history):
+    user_message = history[-1][0]
+    bot_response = stream_chat(user_message, history[:-1])
+    history[-1][1] = ""
+    for character in bot_response:
+        history[-1][1] += character
+        yield history
 
 with gr.Blocks(css=CSS, theme=gr.themes.Default()) as demo:
     gr.HTML(TITLE)
-    gr.ChatInterface(
-        fn=stream_chat,
-        chatbot=chatbot,
-        fill_height=True,
+    chatbot = gr.Chatbot(
+        [],
+        elem_id="chatbot",
+        avatar_images=(None, TRUMP_AVATAR),
+        height=600,
+        bubble_full_width=False,
+        show_label=False,
+    )
+    msg = gr.Textbox(
+        placeholder="Ask Donald Trump a question",
+        container=False,
+        scale=7
+    )
+    with gr.Row():
+        submit = gr.Button("Submit", scale=1, variant="primary")
+        clear = gr.Button("Clear", scale=1)
+
+    gr.Examples(
         examples=[
-            ["What do you think about the economy?"],
-            ["How would you handle foreign policy?"],
             ["What's your stance on immigration?"],
+            ["How would you describe your economic policies?"],
+            ["What are your thoughts on the media?"],
         ],
-        cache_examples=False,
+        inputs=msg,
+    )
+
+    submit.click(add_text, [chatbot, msg], [chatbot, msg], queue=False).then(
+        bot, chatbot, chatbot
+    )
+    clear.click(lambda: [], outputs=[chatbot], queue=False)
+    msg.submit(add_text, [chatbot, msg], [chatbot, msg], queue=False).then(
+        bot, chatbot, chatbot
     )
 
 if __name__ == "__main__":