Update app.py

app.py

@@ -2,19 +2,37 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 import os
 
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
+css = """
+.message-row {
+    justify-content: space-evenly !important;
+}
+.message-bubble-border {
+    border-radius: 6px !important;
+}
+.dark.message-bubble-border {
+    border-color: #21293b !important;
+}
+.dark.user {
+    background: #0a1120 !important;
+}
+.dark.assistant {
+    background: transparent !important;
+}
 """
 
-# Main code to run the application
-if __name__ == '__main__':
-    api_token = os.getenv('HF_API_TOKEN2')
-    if not api_token:
-        raise ValueError("HF_API_TOKEN not found in environment variables")
-        
-client = InferenceClient("meta-llama/Meta-Llama-3-70B-Instruct",token=api_token)
+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;">
+        <h2 style="text-align: left; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">AI Prompt Engineering Tutor</h2>
+        <p style="text-align: left; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">Your AI tutor for mastering prompt engineering techniques.</p>
+    </div>    
+</div>
+"""
 
-system_message="""
+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.
 
 1. Initial Assessment:
@@ -56,7 +74,7 @@ As an AI Prompt Engineering Tutor, your role is to guide the user through an int
    Conclude with a complex prompt-writing task that incorporates all learned techniques. Compare this final prompt to their initial attempt to showcase progress.
 
 10. Learning Summary:
-   Provide a comprehensive review of the user's journey, highlighting key improvements and areas for continued practice.
+    Provide a comprehensive review of the user's journey, highlighting key improvements and areas for continued practice.
 
 To begin the tutorial, follow these steps:
 
@@ -72,14 +90,15 @@ Try to be funny, use smart format to answer using bullet points.
 
 Begin the tutorial by introducing yourself and asking for the first prompt as described above.
 """
-def respond(
-    message,
-    history: list[tuple[str, str]],
-   # system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
+
+if __name__ == '__main__':
+    api_token = os.getenv('HF_API_TOKEN2')
+    if not api_token:
+        raise ValueError("HF_API_TOKEN not found in environment variables")
+        
+client = InferenceClient("meta-llama/Meta-Llama-3-70B-Instruct", token=api_token)
+
+def respond(message, history: list[tuple[str, str]]):
     messages = [{"role": "system", "content": system_message}]
 
     for val in history:
@@ -94,36 +113,36 @@ def respond(
 
     for message in client.chat_completion(
         messages,
-        max_tokens=max_tokens,
+        max_tokens=512,
         stream=True,
-        temperature=temperature,
-        top_p=top_p,
+        temperature=0.7,
+        top_p=0.95,
     ):
         token = message.choices[0].delta.content
 
         response += token
         yield response
 
-
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
 demo = gr.ChatInterface(
     respond,
-    additional_inputs=[
-       # gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new 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 (nucleus sampling)",
-        ),
-    ],
+    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,
+    retry_btn="Retry",
+    undo_btn="Undo",
+    clear_btn="Clear",
+    submit_btn="Send",
+    description="AI Prompt Engineering Tutor: Master the art of crafting effective prompts",
+    chatbot=gr.Chatbot(scale=1, placeholder=PLACEHOLDER)
 )
 
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()