Update app.py

app.py

@@ -440,164 +440,308 @@ def process_text_with_members(text, selected_members):
         return f"Error processing text with members: {str(e)}"
 
 # Create Gradio interface
+custom_theme = gr.themes.Soft(
+    primary_hue="gray",
+    secondary_hue="gray",
+    neutral_hue="gray",
+    text_size=gr.themes.sizes.text_md,
+)
+
 with gr.Blocks(
     title="TaskWhisper",
+    theme=custom_theme,
     css="""
-        #component-0 {
-            max-width: 900px;
-            margin: auto;
-            padding: 20px;
-            background-color: #f5f9f9;
-        }
+        /* Reset Gradio defaults */
         .gradio-container {
-            font-family: 'Inter', -apple-system, sans-serif;
+            margin: 0 !important;
+            padding: 0 !important;
+            max-width: none !important;
         }
-        .tabs.svelte-710i53 {
-            background-color: #e0f2f1;
-            border-radius: 10px;
-            padding: 10px;
-            margin-bottom: 20px;
+        
+        /* Remove Gradio footer */
+        footer {
+            display: none !important;
+        }
+        
+        /* Custom container */
+        #custom-container {
+            min-height: 100vh;
+            background: #ffffff;
+            padding: 2rem;
+        }
+        
+        /* Main content wrapper */
+        .main-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: #ffffff;
+            border-radius: 20px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            padding: 2rem;
+        }
+        
+        /* Header styling */
+        .header {
+            text-align: center;
+            padding: 2rem 0;
+            border-bottom: 1px solid #eee;
+            margin-bottom: 2rem;
         }
+        
+        .header h1 {
+            color: #000000;
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+        }
+        
+        .header p {
+            color: #000000;
+            font-size: 1.1rem;
+        }
+        
+        /* Tab styling */
+        .tabs {
+            background: none !important;
+            border: none !important;
+        }
+        
         .tab-nav {
-            background-color: #b2dfdb;
-            border-radius: 8px;
+            background: none !important;
+            border-bottom: 1px solid #eee !important;
+            padding: 0 !important;
+            margin-bottom: 2rem !important;
         }
-        .selected {
-            background-color: #4db6ac !important;
-            color: white !important;
+        
+        .tab-nav button {
+            padding: 1rem 2rem !important;
+            margin-right: 1rem !important;
+            border-radius: 8px 8px 0 0 !important;
+            border: none !important;
+            background: #f8f8f8 !important;
+            color: #000000 !important;
+            font-weight: 500 !important;
+        }
+        
+        .tab-nav button.selected {
+            background: #e8e8e8 !important;
+            color: #000000 !important;
+            font-weight: 600 !important;
+        }
+        
+        /* Input container styling */
+        .input-container {
+            background: #fafafa;
+            border-radius: 12px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            border: 1px solid #eee;
+        }
+        
+        /* Form elements */
+        .input-container label {
+            color: #000000;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+        
+        .textbox textarea {
+            border: 1px solid #eee !important;
+            border-radius: 8px !important;
+            padding: 1rem !important;
+            font-size: 1rem !important;
+            color: #000000 !important;
+            background: #ffffff !important;
+        }
+        
+        .textbox textarea:focus {
+            border-color: #000000 !important;
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
+        }
+        
+        .dropdown select {
+            border: 1px solid #eee !important;
+            border-radius: 8px !important;
+            padding: 0.8rem !important;
+            color: #000000 !important;
+            background: #ffffff !important;
         }
-        button.primary {
-            background-color: #26a69a !important;
+        
+        /* Button styling */
+        .primary {
+            background: #000000 !important;
             color: white !important;
-            border: none !important;
+            padding: 0.8rem 1.5rem !important;
             border-radius: 8px !important;
+            font-weight: 500 !important;
+            font-size: 1rem !important;
+            border: none !important;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+            transition: all 0.2s ease !important;
+        }
+        
+        .primary:hover {
+            background: #333333 !important;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
         }
-        button.primary:hover {
-            background-color: #00897b !important;
+        
+        /* Audio component */
+        .audio-component {
+            background: #ffffff;
+            border: 1px solid #eee;
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
         }
+        
+        /* Output styling */
         .output-markdown {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            background: #ffffff;
+            border-radius: 12px;
+            padding: 2rem;
+            margin-top: 2rem;
+            border: 1px solid #eee;
+            color: #000000;
         }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #f8f8f8;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #000000;
+            border-radius: 3px;
+        }
+        
+        /* Remove Gradio branding */
+        .gr-interface {
+            background: none !important;
+            border: none !important;
+            box-shadow: none !important;
+        }
+        
         .footer {
+            border-top: 1px solid #eee;
+            margin-top: 3rem;
+            padding-top: 1.5rem;
             text-align: center;
-            color: #666;
-            font-size: 0.8em;
-            margin-top: 40px;
+            color: #000000;
         }
-        .input-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
-        }
-        .dropdown {
-            background-color: white;
-            border: 1px solid #b2dfdb !important;
-            border-radius: 8px !important;
+
+        /* Tips section */
+        .tips-section {
+            color: #000000 !important;
+            font-size: 0.9rem !important;
         }
-        .textbox {
-            border: 1px solid #b2dfdb !important;
-            border-radius: 8px !important;
+        
+        .tips-section ul {
+            margin-left: 1.2rem;
+        }
+        
+        /* Make all text black */
+        * {
+            color: #000000;
         }
     """
 ) as interface:
-    gr.Markdown(
-        """
-        <div style='text-align: center; margin-bottom: 30px'>
-            <h1 style='color: #00897b; margin-bottom: 10px'>🎙️ TaskWhisper</h1>
-            <p style='color: #666; font-size: 1.1em'>Transform your voice or text into structured tasks</p>
-        </div>
-        """
-    )
-    
-    # Get Trello members for the dropdown
-    members = get_trello_members()
-    
-    with gr.Tab("Voice Input"):
-        with gr.Column(elem_classes="input-container"):
-            audio_input = gr.Audio(
-                label="Record or Upload Audio",
-                sources=["microphone", "upload"],
-                type="filepath",
-                format="wav",
-                interactive=True
-            )
+    with gr.Column(elem_id="custom-container"):
+        with gr.Column(elem_classes="main-content"):
             gr.Markdown(
                 """
-                <div style='color: #666; font-size: 0.9em; margin: 10px 0'>
-                    <p><strong>Tips for best results:</strong></p>
-                    <ul>
-                        <li>Speak clearly and at a normal pace</li>
-                        <li>Use a quiet environment</li>
-                        <li>Include key details like deadlines or priority</li>
-                    </ul>
+                <div class='header'>
+                    <h1>🎙️ TaskWhisper</h1>
+                    <p>Transform your voice or text into structured tasks</p>
                 </div>
                 """
             )
-            member_dropdown_audio = gr.Dropdown(
-                choices=list(members.keys()),
-                multiselect=True,
-                label="Assign Task To",
-                info="Select team members",
-                value=[],
-                elem_classes="dropdown"
+            
+            # Get Trello members for the dropdown
+            members = get_trello_members()
+            
+            with gr.Tab("Voice Input"):
+                with gr.Column(elem_classes="input-container"):
+                    audio_input = gr.Audio(
+                        label="Record or Upload Audio",
+                        sources=["microphone", "upload"],
+                        type="filepath",
+                        format="wav",
+                        interactive=True
+                    )
+                    gr.Markdown(
+                        """
+                        <div class='tips-section'>
+                            <p><strong>Tips for best results:</strong></p>
+                            <ul>
+                                <li>Speak clearly and at a normal pace</li>
+                                <li>Use a quiet environment</li>
+                                <li>Include key details like deadlines or priority</li>
+                            </ul>
+                        </div>
+                        """
+                    )
+                    member_dropdown_audio = gr.Dropdown(
+                        choices=list(members.keys()),
+                        multiselect=True,
+                        label="Assign Task To",
+                        info="Select team members",
+                        value=[],
+                        elem_classes="dropdown"
+                    )
+                    audio_button = gr.Button("Create Task", elem_classes="primary")
+            
+            with gr.Tab("Text Input"):
+                with gr.Column(elem_classes="input-container"):
+                    text_input = gr.Textbox(
+                        lines=3,
+                        placeholder="Describe your task here (e.g., 'Need to prepare quarterly report with sales data by next Friday')",
+                        label="Task Description",
+                        elem_classes="textbox"
+                    )
+                    member_dropdown_text = gr.Dropdown(
+                        choices=list(members.keys()),
+                        multiselect=True,
+                        label="Assign Task To",
+                        info="Select team members",
+                        value=[],
+                        elem_classes="dropdown"
+                    )
+                    text_button = gr.Button("Create Task", elem_classes="primary")
+            
+            with gr.Column(elem_classes="output-markdown"):
+                output = gr.Markdown(
+                    label="Task Details",
+                    value="Task details will appear here..."
+                )
+            
+            # Set up event handlers
+            audio_button.click(
+                fn=process_audio_with_members,
+                inputs=[audio_input, member_dropdown_audio],
+                outputs=output
             )
-            audio_button = gr.Button("Create Task", elem_classes="primary")
-    
-    with gr.Tab("Text Input"):
-        with gr.Column(elem_classes="input-container"):
-            text_input = gr.Textbox(
-                lines=3,
-                placeholder="Describe your task here (e.g., 'Need to prepare quarterly report with sales data by next Friday')",
-                label="Task Description",
-                elem_classes="textbox"
+            
+            text_button.click(
+                fn=process_text_with_members,
+                inputs=[text_input, member_dropdown_text],
+                outputs=output
             )
-            member_dropdown_text = gr.Dropdown(
-                choices=list(members.keys()),
-                multiselect=True,
-                label="Assign Task To",
-                info="Select team members",
-                value=[],
-                elem_classes="dropdown"
+            
+            gr.Markdown(
+                """
+                <div class='footer'>
+                    <p>TaskWhisper © 2024 | Powered by AI</p>
+                </div>
+                """
             )
-            text_button = gr.Button("Create Task", elem_classes="primary")
-    
-    with gr.Column(elem_classes="output-markdown"):
-        output = gr.Markdown(
-            label="Task Details",
-            value="Task details will appear here..."
-        )
-    
-    # Set up event handlers
-    audio_button.click(
-        fn=process_audio_with_members,
-        inputs=[audio_input, member_dropdown_audio],
-        outputs=output
-    )
-    
-    text_button.click(
-        fn=process_text_with_members,
-        inputs=[text_input, member_dropdown_text],
-        outputs=output
-    )
-    
-    gr.Markdown(
-        """
-        <div class='footer'>
-            <p>TaskWhisper © 2024 | Powered by AI</p>
-        </div>
-        """
-    )
 
 if __name__ == "__main__":
     interface.launch(
         show_api=False,  # Hide API docs
         share=True,
-        favicon_path="🎙️",  # Custom favicon
-        # Remove Gradio branding
-        analytics_enabled=False
+        favicon_path="🎙️"  # Custom favicon
     )