Update app.py

app.py

@@ -20,6 +20,19 @@ 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://huggingface.co/spaces/baconnier/Finance/resolve/main/banker.jpg" 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;">AI Prompt Engineering Tutor is trained to guide you through mastering prompt engineering techniques. Use this for learning purposes only.</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.
 
@@ -85,10 +98,18 @@ if not api_token:
 
 client = InferenceClient("meta-llama/Meta-Llama-3-70B-Instruct", token=api_token)
 
-def respond(message, chat_history):
+def respond(
+    message,
+    history: list[tuple[str, str]],
+    max_tokens,
+    temperature,
+    top_p,
+    top_k,
+    repeat_penalty,
+):
     messages = [{"role": "system", "content": system_message}]
 
-    for user_msg, assistant_msg in chat_history:
+    for user_msg, assistant_msg in history:
         messages.append({"role": "user", "content": user_msg})
         messages.append({"role": "assistant", "content": assistant_msg})
 
@@ -98,40 +119,69 @@ def respond(message, chat_history):
 
     for message in client.chat_completion(
         messages,
-        max_tokens=512,
+        max_tokens=max_tokens,
         stream=True,
-        temperature=0.7,
-        top_p=0.95,
+        temperature=temperature,
+        top_p=top_p,
     ):
         token = message.choices[0].delta.content
         response += token
         yield response
 
-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)
+examples = [
+    ["Write a prompt for a creative writing task about a futuristic city."],
+    ["Create a prompt for generating a business plan for a startup."],
+    ["Develop a prompt for a data analysis task on climate change."],
+]
+
+demo = gr.ChatInterface(
+    respond,
+    additional_inputs=[
+        gr.Slider(minimum=1, maximum=8192, value=512, step=1, label="Max tokens"),
+        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+        gr.Slider(
+            minimum=0.1,
+            maximum=1.0,
+            value=0.95,
+            step=0.05,
+            label="Top-p",
+        ),
+        gr.Slider(
+            minimum=0,
+            maximum=100,
+            value=40,
+            step=1,
+            label="Top-k",
+        ),
+        gr.Slider(
+            minimum=0.0,
+            maximum=2.0,
+            value=1.1,
+            step=0.1,
+            label="Repetition penalty",
+        ),
+    ],
+    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"
+    ),
+    examples=examples,
+    examples_per_page=3,    
+    css=css,
+    retry_btn="Retry",
+    undo_btn="Undo",
+    clear_btn="Clear",
+    submit_btn="Send",
+    title="AI Prompt Engineering Tutor",
+    description="Master the art of crafting effective prompts",
+    chatbot=gr.Chatbot(scale=1, placeholder=PLACEHOLDER)
+)
 
 if __name__ == "__main__":
     demo.launch(share=True)