Update app.py

app.py

@@ -136,64 +136,38 @@ body {
     font-family: 'Arial', sans-serif;
 }
 
-#indic-assistant {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-}
-
-.header select {
-    background-color: #1e293b;
-    color: #e2e8f0;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    border: none;
-    font-size: 1rem;
-}
-
-.header button {
-    background-color: #3b82f6;
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    border: none;
-    cursor: pointer;
-    font-size: 1rem;
+#custom-header {
+    text-align: center;
+    padding: 20px 0;
+    background-color: #1a202c;
+    margin-bottom: 20px;
+    border-radius: 10px;
 }
 
-h1 {
+#custom-header h1 {
     font-size: 2.5rem;
     margin-bottom: 0.5rem;
-    text-align: center;
 }
 
-h1 .blue {
+#custom-header h1 .blue {
     color: #60a5fa;
 }
 
-h1 .pink {
+#custom-header h1 .pink {
     color: #f472b6;
 }
 
-h2 {
+#custom-header h2 {
     font-size: 1.5rem;
     color: #94a3b8;
-    margin-bottom: 2rem;
-    text-align: center;
 }
 
 .suggestions {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
     gap: 1rem;
-    margin-bottom: 2rem;
+    margin: 20px 0;
 }
 
 .suggestion {
@@ -203,6 +177,7 @@ h2 {
     display: flex;
     align-items: center;
     transition: transform 0.3s ease;
+    width: 200px;
 }
 
 .suggestion:hover {
@@ -221,25 +196,8 @@ h2 {
     max-width: 100% !important;
 }
 
-.input-container, .output-container {
-    background-color: #1e293b !important;
-    border-radius: 0.5rem !important;
-    margin-bottom: 1rem !important;
-}
-
-.input-container input, .input-container textarea {
-    background-color: #2d3748 !important;
-    border: none !important;
-    color: #e2e8f0 !important;
-}
-
-#component-0 {
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-#component-1, #component-2 {
-    height: 150px !important;
+#component-0, #component-1, #component-2 {
+    max-width: 100% !important;
 }
 
 footer {
@@ -249,70 +207,75 @@ footer {
 }
 """
 
-# Updated Custom HTML
-custom_html = """
-<div id="indic-assistant">
-    <header class="header">
-        <select>
-            <option>Indic Assistant</option>
-        </select>
-        <button>Try Advanced Features</button>
-    </header>
-    <main>
-        <h1>
-            <span class="blue">Hello,</span>
-            <span class="pink">User</span>
-        </h1>
-        <h2>How can I help you today?</h2>
-        <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>
-    </main>
-    <footer>
-        Powered by Indic Language AI
-    </footer>
+# 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>
 """
 
-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)", elem_classes="input-container")
-    ],
-    outputs=[
-        gr.Textbox(label="Transcription/Input", elem_classes="output-container"),
-        gr.Textbox(label="Generated Response", elem_classes="output-container"),
-        gr.Audio(label="Audio Response")
-    ],
-    css=custom_css,
-    article=custom_html,
-    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",
+# 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
+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()