Update app.py

app.py

@@ -87,6 +87,7 @@ def detect_language(text):
             if any(ord(char) >= 0x0900 and ord(char) <= 0x097F for char in text):  # Devanagari script
                 return 'hi'
         return 'en'  # Default to English if no Indic script is detected
+
 @spaces.GPU
 def generate_response(transcription, sarvam_pipe):
     if sarvam_pipe is None:
@@ -121,22 +122,142 @@ def indic_language_assistant(input_type, audio_input, text_input):
     except Exception as e:
         error_message = f"An error occurred: {str(e)}"
         return error_message, error_message, None
+
+# Updated Custom CSS
+custom_css = """
+body {
+    background-color: #0b0f19;
+    color: #e2e8f0;
+    font-family: 'Arial', sans-serif;
+}
+#custom-header {
+    text-align: center;
+    padding: 20px 0;
+    background-color: #1a202c;
+    margin-bottom: 20px;
+    border-radius: 10px;
+}
+#custom-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+#custom-header h1 .blue {
+    color: #60a5fa;
+}
+#custom-header h1 .pink {
+    color: #f472b6;
+}
+#custom-header h2 {
+    font-size: 1.5rem;
+    color: #94a3b8;
+}
+.suggestions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 20px 0;
+}
+.suggestion {
+    background-color: #1e293b;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    transition: transform 0.3s ease;
+    width: 200px;
+}
+.suggestion:hover {
+    transform: translateY(-5px);
+}
+.suggestion-icon {
+    font-size: 1.5rem;
+    margin-right: 1rem;
+    background-color: #2d3748;
+    padding: 0.5rem;
+    border-radius: 50%;
+}
+.gradio-container {
+    max-width: 100% !important;
+}
+#component-0, #component-1, #component-2 {
+    max-width: 100% !important;
+}
+footer {
+    text-align: center;
+    margin-top: 2rem;
+    color: #64748b;
+}
+"""
+
+# Custom HTML for the header
+custom_header = """
+<div id="custom-header">
+    <h1>
+        <span class="blue">Hello,</span>
+        <span class="pink">User</span>
+    </h1>
+    <h2>How can I help you today?</h2>
+</div>
+"""
+
+# Custom HTML for suggestions
+custom_suggestions = """
+<div class="suggestions">
+    <div class="suggestion">
+        <span class="suggestion-icon">🎤</span>
+        <p>Speak in any Indic language</p>
+    </div>
+    <div class="suggestion">
+        <span class="suggestion-icon">⌨️</span>
+        <p>Type in any Indic language</p>
+    </div>
+    <div class="suggestion">
+        <span class="suggestion-icon">🤖</span>
+        <p>Get AI-generated responses</p>
+    </div>
+    <div class="suggestion">
+        <span class="suggestion-icon">🔊</span>
+        <p>Listen to audio responses</p>
+    </div>
+</div>
+"""
+
 # Create Gradio interface
-iface = gr.Interface(
-    fn=indic_language_assistant,
-    inputs=[
-        gr.Radio(["audio", "text"], label="Input Type", value="audio"),
-        gr.Audio(type="filepath", label="Speak (if audio input selected)"),
-        gr.Textbox(label="Type your message (if text input selected)")
-    ],
-    outputs=[
-        gr.Textbox(label="Transcription/Input"),
-        gr.Textbox(label="Generated Response"),
-        gr.Audio(label="Audio Response")
-    ],
-    title="Indic Language Virtual Assistant",
-    description="Speak or type in any supported Indic language or English. The assistant will respond in text and audio."
-)
+with gr.Blocks(css=custom_css, theme=gr.themes.Base().set(
+    body_background_fill="#0b0f19",
+    body_text_color="#e2e8f0",
+    button_primary_background_fill="#3b82f6",
+    button_primary_background_fill_hover="#2563eb",
+    button_primary_text_color="white",
+    block_title_text_color="#94a3b8",
+    block_label_text_color="#94a3b8",
+)) as iface:
+    gr.HTML(custom_header)
+    gr.HTML(custom_suggestions)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### Indic Assistant")
+        with gr.Column(scale=1, min_width=100):
+            gr.Button("Try Advanced Features", size="sm")
+    
+    input_type = gr.Radio(["audio", "text"], label="Input Type", value="audio")
+    audio_input = gr.Audio(type="filepath", label="Speak (if audio input selected)")
+    text_input = gr.Textbox(label="Type your message (if text input selected)")
+    
+    submit_btn = gr.Button("Submit")
+    
+    output_transcription = gr.Textbox(label="Transcription/Input")
+    output_response = gr.Textbox(label="Generated Response")
+    output_audio = gr.Audio(label="Audio Response")
+    
+    submit_btn.click(
+        fn=indic_language_assistant,
+        inputs=[input_type, audio_input, text_input],
+        outputs=[output_transcription, output_response, output_audio]
+    )
+    gr.HTML("<footer>Powered by Indic Language AI</footer>")
 
 # Launch the app
 iface.launch()