Update app.py

app.py

@@ -129,33 +129,31 @@ def indic_language_assistant(input_type, audio_input, text_input):
 
 
 
-# Updated Custom CSS
+# Updated Custom CSS for dark theme
 custom_css = """
 body {
-    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
-    font-family: Arial, sans-serif;
+    background-color: #0b0f19;
+    color: #ffffff;
 }
 
 #indic-assistant {
-    text-align: center;
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    position: relative;
+    margin-bottom: 20px;
 }
 
 #indic-assistant h1 {
-    color: #4CAF50;
+    color: #ff6b6b;
     font-size: 2em;
     margin-bottom: 10px;
 }
 
 .concept {
-    position: relative;
-    transition: transform 0.3s;
     display: inline-block;
     margin: 0 10px;
+    transition: transform 0.3s;
 }
 
 .concept:hover {
@@ -163,106 +161,52 @@ body {
 }
 
 .concept img {
-    width: 100px;
+    width: 50px;
+    height: 50px;
     border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: #2c3e50;
+    padding: 10px;
 }
 
 .concept-description {
-    position: absolute;
-    bottom: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #4CAF50;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 5px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    white-space: nowrap;
-}
-
-.concept:hover .concept-description {
-    opacity: 1;
-}
-
-.artifact {
-    position: absolute;
-    background: rgba(76, 175, 80, 0.1);
-    border-radius: 50%;
+    color: #bdc3c7;
+    margin-top: 5px;
+    font-size: 0.9em;
 }
 
-.artifact.large {
-    width: 300px;
-    height: 300px;
-    top: -50px;
-    left: -150px;
-}
-
-.artifact.medium {
-    width: 200px;
-    height: 200px;
-    bottom: -50px;
-    right: -100px;
-}
-
-.artifact.small {
-    width: 100px;
-    height: 100px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.input-box {
-    width: 100%;
-    padding: 10px;
-    border-radius: 20px;
-    border: none;
-    background-color: rgba(255, 255, 255, 0.8);
-    color: #333;
-    margin-top: 20px;
+.input-box, .output-box {
+    background-color: #1e2a38 !important;
+    border: 1px solid #34495e !important;
+    color: #ecf0f1 !important;
 }
 
 .submit-btn {
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 20px;
-    cursor: pointer;
-    margin-top: 10px;
-    transition: background-color 0.3s ease;
+    background-color: #ff6b6b !important;
+    color: white !important;
 }
 
 .submit-btn:hover {
-    background-color: #45a049;
+    background-color: #ff8787 !important;
 }
 """
 
 # Updated Custom HTML
 custom_html = """
 <div id="indic-assistant">
-    <!-- Artifacts -->
-    <div class="artifact large"></div>
-    <div class="artifact medium"></div>
-    <div class="artifact small"></div>
-    
-    <!-- Content -->
     <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://github.com/yourusername/yourrepo/assets/placeholder-audio-icon.png" alt="Audio Input">
+            <img src="https://img.icons8.com/nolan/64/microphone.png" alt="Audio Input">
             <div class="concept-description">Speak in any Indic language</div>
         </div>
         <div class="concept">
-            <img src="https://github.com/yourusername/yourrepo/assets/placeholder-text-icon.png" alt="Text Input">
+            <img src="https://img.icons8.com/nolan/64/keyboard.png" alt="Text Input">
             <div class="concept-description">Type in any Indic language</div>
         </div>
         <div class="concept">
-            <img src="https://github.com/yourusername/yourrepo/assets/placeholder-response-icon.png" alt="AI Response">
+            <img src="https://img.icons8.com/nolan/64/artificial-intelligence.png" alt="AI Response">
             <div class="concept-description">Get AI-generated responses</div>
         </div>
     </div>
@@ -278,16 +222,16 @@ iface = gr.Interface(
         gr.Textbox(label="Type your message (if text input selected)", elem_classes="input-box")
     ],
     outputs=[
-        gr.Textbox(label="Transcription/Input"),
-        gr.Textbox(label="Generated Response"),
+        gr.Textbox(label="Transcription/Input", elem_classes="output-box"),
+        gr.Textbox(label="Generated Response", elem_classes="output-box"),
         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="default"  # Changed from "dark" to "default" to match the new light theme
+    theme="dark"
 )
 
 # Launch the app
-iface.launch()
+iface.launch()