Update app.py

app.py

@@ -126,57 +126,89 @@ def indic_language_assistant(input_type, audio_input, text_input):
         error_message = f"An error occurred: {str(e)}"
         return error_message, error_message, None
 
-# Custom CSS
+# Updated Custom CSS
 custom_css = """
 body {
-    background-color: #1a1a1a;
-    color: #ffffff;
+    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
     font-family: Arial, sans-serif;
 }
 
-.container {
-    max-width: 800px;
-    margin: 0 auto;
+#indic-assistant {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.8);
     padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    position: relative;
 }
 
-h1 {
-    font-size: 2.5em;
-    background: linear-gradient(45deg, #4a90e2, #f48fb1);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+#indic-assistant h1 {
+    color: #4CAF50;
+    font-size: 2em;
     margin-bottom: 10px;
 }
 
-h2 {
-    color: #a0a0a0;
-    font-weight: normal;
+.concept {
+    position: relative;
+    transition: transform 0.3s;
+    display: inline-block;
+    margin: 0 10px;
 }
 
-.task-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-top: 30px;
+.concept:hover {
+    transform: scale(1.1);
 }
 
-.task-card {
-    background-color: #2a2a2a;
+.concept img {
+    width: 100px;
     border-radius: 10px;
-    padding: 15px;
-    margin: 10px 0;
-    width: calc(50% - 10px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease;
 }
 
-.task-card:hover {
-    transform: translateY(-5px);
+.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;
 }
 
-.task-icon {
-    font-size: 24px;
-    margin-bottom: 10px;
+.concept:hover .concept-description {
+    opacity: 1;
+}
+
+.artifact {
+    position: absolute;
+    background: rgba(76, 175, 80, 0.1);
+    border-radius: 50%;
+}
+
+.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 {
@@ -184,13 +216,13 @@ h2 {
     padding: 10px;
     border-radius: 20px;
     border: none;
-    background-color: #333;
-    color: #fff;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #333;
     margin-top: 20px;
 }
 
 .submit-btn {
-    background-color: #4a90e2;
+    background-color: #4CAF50;
     color: white;
     border: none;
     padding: 10px 20px;
@@ -201,23 +233,34 @@ h2 {
 }
 
 .submit-btn:hover {
-    background-color: #3a7bd5;
+    background-color: #45a049;
 }
 """
 
-# Custom HTML
+# Updated Custom HTML
 custom_html = """
-<div class="container">
-    <h1>Hello, User</h1>
-    <h2>How can I help you today?</h2>
-    <div class="task-container">
-        <div class="task-card">
-            <div class="task-icon">🎤</div>
-            <p>Speak in any Indic language</p>
+<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">
+            <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">
+            <div class="concept-description">Type in any Indic language</div>
         </div>
-        <div class="task-card">
-            <div class="task-icon">⌨️</div>
-            <p>Type in any Indic language</p>
+        <div class="concept">
+            <img src="https://github.com/yourusername/yourrepo/assets/placeholder-response-icon.png" alt="AI Response">
+            <div class="concept-description">Get AI-generated responses</div>
         </div>
     </div>
 </div>
@@ -239,8 +282,8 @@ iface = gr.Interface(
     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,
-    elem_id="indic-assistant",
-    theme="dark"
+    article=custom_html,
+    theme="default"  # Changed from "dark" to "default" to match the new light theme
 )
 
 # Launch the app