Upload app.py

app.py

@@ -346,6 +346,43 @@ def generate_response(message: str, history: List[List[str]], system_prompt: str
         logger.error(error_msg)
         yield error_msg
 
+# CSS to fix avatar distortion and positioning issues
+avatar_css = """
+/* Fix avatar image distortion and positioning */
+.avatar-container img {
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 50% !important;
+    object-fit: cover !important;
+    margin: 0px !important;
+    padding: 0px !important;
+    display: block !important;
+}
+
+/* Fix message row positioning */
+.message-row img {
+    margin: 0px !important;
+    padding: 0px !important;
+}
+
+/* Additional fix for Gradio v5 centering issues */
+.message img {
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 50% !important;
+    object-fit: cover !important;
+    margin: 0px !important;
+    padding: 0px !important;
+}
+
+/* Ensure proper aspect ratio for all chatbot images */
+#chatbot img {
+    aspect-ratio: 1 !important;
+    object-fit: cover !important;
+    border-radius: 50% !important;
+}
+"""
+
 # Create Gradio ChatInterface
 chatbot = gr.ChatInterface(
     generate_response,
@@ -354,7 +391,8 @@ chatbot = gr.ChatInterface(
             "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f464.png",  # User avatar (person emoji)
             "https://cdn-avatars.huggingface.co/v1/production/uploads/64e6d37e02dee9bcb9d9fa18/o_HhUnXb_PgyYlqJ6gfEO.png"  # Bot avatar
         ],
-        height="64vh"
+        height="64vh",
+        elem_id="chatbot"
     ),
     additional_inputs=[
         gr.Textbox(
@@ -375,7 +413,8 @@ chatbot = gr.ChatInterface(
     ],
     title="🤖 DQ Micro Agent",
     description="DevQuasar self hosted Micro Agent with websearch capabilities",
-    theme="finlaymacklon/smooth_slate"
+    theme="finlaymacklon/smooth_slate",
+    css=avatar_css
 )
 
 if __name__ == "__main__":