Update app.py

app.py

@@ -20,19 +20,6 @@ css = """
 }
 """
 
-PLACEHOLDER = """
-<div class="message-bubble-border" style="display:flex; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);">
-    <figure style="margin: 0;">
-        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643" style="width: 100%; height: 100%; border-radius: 8px;">
-    </figure>
-    <div style="padding: .5rem 1.5rem;">
-        <img src="https://huggingface.co/spaces/baconnier/Finance/resolve/main/banker_plus.jpg" style="width: 100%; height: 10%; border-radius: 8px;">    
-        <h2 style="text-align: left; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;"> </h2>
-        <p style="text-align: left; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">Banker++ is trained to act like a Senior Banker. Use this template for learning purposes only. Also a Real time version exist</p>
-    </div>    
-</div>
-"""
-
 system_message = """
 As an AI Prompt Engineering Tutor, your role is to guide the user through an interactive learning journey to master prompt engineering techniques. You will progressively challenge the user to write prompts, provide feedback, and offer tailored tips for improvement based on their previous responses.
 
@@ -120,23 +107,31 @@ def respond(message, chat_history):
         response += token
         yield response
 
-demo = gr.ChatInterface(
-    respond,
-    chatbot=gr.Chatbot(scale=1, placeholder=PLACEHOLDER),
-    theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="blue", neutral_hue="gray",font=[gr.themes.GoogleFont("Exo"), "ui-sans-serif", "system-ui", "sans-serif"]).set(
-        body_background_fill_dark="#0f172a",
-        block_background_fill_dark="#0f172a",
-        block_border_width="1px",
-        block_title_background_fill_dark="#070d1b",
-        button_secondary_background_fill_dark="#070d1b",
-        border_color_primary_dark="#21293b",
-        background_fill_secondary_dark="#0f172a",
-        color_accent_soft_dark="transparent"
-    ),
-    css=css,
-    title="AI Prompt Engineering Tutor",
-    description="Master the art of crafting effective prompts",
-)
+with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="blue", neutral_hue="gray",font=[gr.themes.GoogleFont("Exo"), "ui-sans-serif", "system-ui", "sans-serif"]).set(
+    body_background_fill_dark="#0f172a",
+    block_background_fill_dark="#0f172a",
+    block_border_width="1px",
+    block_title_background_fill_dark="#070d1b",
+    button_secondary_background_fill_dark="#070d1b",
+    border_color_primary_dark="#21293b",
+    background_fill_secondary_dark="#0f172a",
+    color_accent_soft_dark="transparent"
+)) as demo:
+    gr.Markdown("# AI Prompt Engineering Tutor")
+    gr.Markdown("Master the art of crafting effective prompts")
+    
+    with gr.Row():
+        gr.Image("https://huggingface.co/spaces/baconnier/Finance/resolve/main/banker.jpg", show_label=False, container=False)
+        with gr.Column():
+            gr.Image("https://huggingface.co/spaces/baconnier/Finance/resolve/main/banker_plus.jpg", show_label=False, container=False)
+            gr.Markdown("AI Prompt Engineering Tutor is trained to guide you through mastering prompt engineering techniques. Use this for learning purposes only.")
+    
+    chatbot = gr.Chatbot(scale=1)
+    msg = gr.Textbox(label="Type your message here...")
+    clear = gr.Button("Clear")
+
+    msg.submit(respond, [msg, chatbot], chatbot)
+    clear.click(lambda: None, None, chatbot, queue=False)
 
 if __name__ == "__main__":
     demo.launch(share=True)