Updated Gradio UI

app.py

@@ -52,16 +52,41 @@ def predict_accent(audio):
     label_map = {0: "Canadian English", 1: "England English"}
     return label_map[predicted_class_id]
 
+# # Gradio UI
+# interface = gr.Interface(
+#     fn=predict_accent,
+#     inputs=gr.Audio(sources=["upload", "microphone"], type="filepath", label="Upload or Record Audio (WAV)"),
+#     outputs=gr.Textbox(label="Predicted Accent"),
+#     title="Accent Classification",
+#     description="This app classifies English accents as either Canadian or England using a fine-tuned Wav2Vec2 model.",
+#     allow_flagging="never"
+# )
 
-# Custom UI with gr.Blocks
-with gr.Blocks() as demo:
+
+# Gradio UI with gr.Blocks
+
+# Gradio UI with gr.Blocks and Custom Styling
+
+custom_css = """
+#predict-btn {
+    background-color: orange !important;
+    color: white !important;
+    font-weight: bold;
+}
+#author-section {
+    font-size: 18px;
+    font-weight: 500;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("## 🗣️ Accent Classification App")
     gr.Markdown("This app classifies English accents as either **Canadian** or **England** using a fine-tuned Wav2Vec2 model.")
     
     with gr.Row():
         with gr.Column():
             audio_input = gr.Audio(sources=["upload", "microphone"], type="filepath", label="Upload or Record Audio (WAV)")
-            predict_button = gr.Button("Predict")
+            predict_button = gr.Button("Predict Accent", elem_id="predict-btn")
         with gr.Column():
             result_output = gr.Textbox(label="Predicted Accent")
 
@@ -69,8 +94,12 @@ with gr.Blocks() as demo:
 
     gr.Markdown("---")
     gr.Markdown("""
-    👨‍💻 Created by **Anand Purushottam**  
-    🔗 [GitHub](https://github.com/creativepurus) | [LinkedIn](https://linkedin.com/in/creativepurus)
-    """)
+    <div id="author-section">
+    👨‍💻 Created by <strong>Anand Purushottam</strong>  
+    🔗 <a href="https://github.com/creativepurus" target="_blank">GitHub</a> | 
+    <a href="https://linkedin.com/in/creativepurus" target="_blank">LinkedIn</a>
+    </div>
+    """, unsafe_allow_html=True 
+    )
 
-demo.launch()
+demo.launch()