Update app.py

app.py

@@ -129,87 +129,169 @@ def indic_language_assistant(input_type, audio_input, text_input):
 
 
 
-# Updated Custom CSS for dark theme
+# Custom CSS
 custom_css = """
 body {
-    background-color: #0b0f19;
-    color: #ffffff;
+    background-color: #1a202c;
+    color: #e2e8f0;
+    font-family: Arial, sans-serif;
 }
 
 #indic-assistant {
-    background: rgba(255, 255, 255, 0.05);
+    max-width: 800px;
+    margin: 0 auto;
     padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    margin-bottom: 20px;
 }
 
-#indic-assistant h1 {
-    color: #ff6b6b;
-    font-size: 2em;
-    margin-bottom: 10px;
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
 }
 
-.concept {
-    display: inline-block;
-    margin: 0 10px;
-    transition: transform 0.3s;
+.header select {
+    background-color: #2d3748;
+    color: #e2e8f0;
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+    border: none;
 }
 
-.concept:hover {
-    transform: scale(1.1);
+.header button {
+    background-color: #3182ce;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    border: none;
+    cursor: pointer;
 }
 
-.concept img {
-    width: 50px;
-    height: 50px;
-    border-radius: 10px;
-    background-color: #2c3e50;
-    padding: 10px;
+h1 {
+    font-size: 2.25rem;
+    margin-bottom: 0.5rem;
 }
 
-.concept-description {
-    color: #bdc3c7;
-    margin-top: 5px;
-    font-size: 0.9em;
+h1 .blue {
+    color: #63b3ed;
 }
 
-.input-box, .output-box {
-    background-color: #1e2a38 !important;
-    border: 1px solid #34495e !important;
-    color: #ecf0f1 !important;
+h1 .pink {
+    color: #ed64a6;
 }
 
-.submit-btn {
-    background-color: #ff6b6b !important;
-    color: white !important;
+h2 {
+    font-size: 1.5rem;
+    color: #a0aec0;
+    margin-bottom: 2rem;
 }
 
-.submit-btn:hover {
-    background-color: #ff8787 !important;
+.suggestions {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.suggestion {
+    background-color: #2d3748;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    display: flex;
+    align-items: flex-start;
+}
+
+.suggestion-icon {
+    font-size: 1.5rem;
+    margin-right: 1rem;
+}
+
+.input-container {
+    position: relative;
+    margin-bottom: 1rem;
+}
+
+.input-container input {
+    width: 100%;
+    background-color: #2d3748;
+    border: none;
+    border-radius: 9999px;
+    padding: 0.75rem 3rem 0.75rem 1.5rem;
+    color: #e2e8f0;
+}
+
+.input-container .icons {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+}
+
+.input-container .icons svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-left: 0.5rem;
+    cursor: pointer;
+}
+
+footer {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+}
+
+footer svg {
+    width: 1.5rem;
+    height: 1.5rem;
 }
 """
 
-# Updated Custom HTML
+# Custom HTML
 custom_html = """
 <div id="indic-assistant">
-    <h1>Indic Language Virtual Assistant</h1>
-    <p>Speak or type in any supported Indic language or English. The assistant will respond in text and audio.</p>
-    
-    <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
-        <div class="concept">
-            <img src="https://img.icons8.com/nolan/64/microphone.png" alt="Audio Input">
-            <div class="concept-description">Speak in any Indic language</div>
+    <header class="header">
+        <div>
+            <select>
+                <option>Indic Assistant</option>
+            </select>
         </div>
-        <div class="concept">
-            <img src="https://img.icons8.com/nolan/64/keyboard.png" alt="Text Input">
-            <div class="concept-description">Type in any Indic language</div>
+        <div>
+            <button>Try Advanced Features</button>
         </div>
-        <div class="concept">
-            <img src="https://img.icons8.com/nolan/64/artificial-intelligence.png" alt="AI Response">
-            <div class="concept-description">Get AI-generated responses</div>
+    </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>
-    </div>
+    </main>
+    <footer>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3"></circle>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+        </svg>
+    </footer>
 </div>
 """
 
@@ -219,18 +301,25 @@ iface = gr.Interface(
     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-box")
+        gr.Textbox(label="Type your message (if text input selected)", elem_classes="input-container")
     ],
     outputs=[
-        gr.Textbox(label="Transcription/Input", elem_classes="output-box"),
-        gr.Textbox(label="Generated Response", elem_classes="output-box"),
+        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.",
     css=custom_css,
     article=custom_html,
-    theme="dark"
+    theme=gr.themes.Base().set(
+        body_background_fill="*background_color",
+        body_background_fill_dark="*background_color_dark",
+        body_text_color="*neutral_800",
+        body_text_color_dark="*neutral_200",
+        button_primary_background_fill="*primary_500",
+        button_primary_background_fill_hover="*primary_600",
+        button_primary_text_color="white",
+        button_primary_text_color_dark="white",
+    )
 )
 
 # Launch the app