Update app.py

app.py

@@ -63,6 +63,54 @@ if os.path.exists(examples_dir):
 else:
     print("Examples directory not found")
 
+
+
+# Custom CSS for better styling
+custom_css = """
+<style>
+.centered-content {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.logo-image {
+    width: 200px;
+    height: auto;
+    margin: 20px auto;
+    display: block;
+}
+
+.description-text {
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.dialect-list {
+    font-size: 15px;
+    line-height: 1.8;
+    text-align: left;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.highlight-text {
+    font-size: 16px;
+    color: #2563eb;
+    margin: 20px 0;
+}
+
+.footer-text {
+    font-size: 13px;
+    color: #6b7280;
+    margin-top: 20px;
+}
+</style>
+"""
+
+
 # Create the Gradio interface
 demo = gr.Interface(
     fn=predict_dialect,
@@ -70,7 +118,7 @@ demo = gr.Interface(
     outputs=gr.Label(num_top_classes=5, label="Predicted Dialect"),
     title="🎙️ Arabic Dialect Identification in Speech!",
         description="""
-            <div style="text-align: center;">
+            <div class="centered-content">
                 <img src="https://huggingface.co/badrex/mms-300m-arabic-dialect-identifier/resolve/main/assets/logo.png" alt="Logo" style="width: 200px; height: auto; margin-bottom: 20px;">
                 <br>
                 <div style="text-align: center; max-width: 800px; margin: 0 auto; padding: 20px;">