Update app.py

app.py

@@ -16,6 +16,37 @@ COLOR = "black"
 EMOJI = "🇫🇷"  # Mistral-themed emoji
 DESCRIPTION = f"This is {MODEL_NAME} model, a powerful 24B parameter language model from Mistral AI."
 
+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;
+}
+"""
+
+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/Napoleon/resolve/main/napoleon.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;"> </h2>
+        <p style="text-align: left; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">Notre sagesse vient de notre expérience, et notre expérience vient de nos sottises</p>
+    </div>    
+</div>
+"""
+
+
 def load_system_message():
     try:
         with open('system_message.txt', 'r', encoding='utf-8') as file:
@@ -96,6 +127,7 @@ torch_dtype=torch.bfloat16
 # Create Gradio interface
 gr.ChatInterface(
     predict,
+    css=css,
     title=EMOJI + " " + MODEL_NAME,
     description=DESCRIPTION,
     examples=[
@@ -106,6 +138,7 @@ gr.ChatInterface(
         ['Comment les Français trouvent-ils le temps de faire une pause déjeuner de 2 heures ?'],
         ['Pourquoi les Français disent-ils bof à tout ?']
         ],
+    placeholder=PLACEHOLDER,
     additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=False),
     additional_inputs=[
         gr.Textbox(SYSTEM_MESSAGE, label="System prompt", visible=False),  # Hidden system prompt