Update app.py

app.py

@@ -440,381 +440,69 @@ 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="teal",
-    secondary_hue="blue",
-    neutral_hue="cyan",
-    font=("Inter", "ui-sans-serif", "system-ui", "sans-serif"),
-    font_mono=("IBM Plex Mono", "ui-monospace", "Consolas", "monospace"),
-)
-
-# Update theme colors with lighter shades
-custom_theme.background_fill_primary = "#ffffff"
-custom_theme.background_fill_secondary = "#f0fdfa"
-custom_theme.border_color_primary = "#99f6e4"
-custom_theme.button_primary_background_fill = "#14b8a6"
-custom_theme.button_primary_background_fill_hover = "#0d9488"
-custom_theme.button_primary_text_color = "white"
-custom_theme.block_label_text_color = "#0f766e"
-custom_theme.block_title_text_color = "#0f766e"
-custom_theme.body_text_color = "#134e4a"
-
-with gr.Blocks(
-    title="TaskWhisper",
-    theme=custom_theme,
-    css="""
-        /* Reset Gradio defaults */
-        .gradio-container {
-            margin: 0 !important;
-            padding: 0 !important;
-            max-width: none !important;
-        }
-        
-        /* 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: none !important;
-            border-bottom: 1px solid #eee !important;
-            padding: 0 !important;
-            margin-bottom: 2rem !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 styling */
-        .dropdown select {
-            background-color: white !important;
-            border: 1px solid #eee !important;
-            border-radius: 8px !important;
-            padding: 0.8rem !important;
-            color: #000000 !important;
-        }
-        
-        /* Style the selected options in dropdown */
-        .selected-options {
-            color: #000000 !important;
-            background: white !important;
-            padding: 4px 8px !important;
-            border-radius: 4px !important;
-            margin: 2px !important;
-        }
-        
-        /* Style the dropdown options */
-        .dropdown-option {
-            color: #ffffff !important;
-            background: white !important;
-            padding: 8px !important;
-        }
-        
-        /* Style the dropdown container */
-        .dropdown-container {
-            background: white !important;
-            border: 1px solid #eee !important;
-            border-radius: 8px !important;
-        }
-        
-        /* Style the dropdown arrow */
-        .dropdown-arrow {
-            color: #000000 !important;
-        }
-        
-        /* Button styling */
-        .primary {
-            background: #000000 !important;
-            color: white !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;
-        }
-        
-        /* 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: #ffffff;
-            border-radius: 12px;
-            padding: 2rem;
-            margin-top: 2rem;
-            border: 1px solid #eee;
-            color: #000000;
-            max-height: 400px !important;  /* Fixed height */
-            overflow-y: auto !important;   /* Enable vertical scrolling */
-        }
-        
-        /* Style the output content */
-        .output-markdown p {
-            margin: 0.5rem 0;
-            line-height: 1.5;
-        }
-        
-        .output-markdown pre {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            padding: 1rem;
-            background: #f8f8f8;
-            border-radius: 8px;
-            margin: 0.5rem 0;
-        }
-        
-        /* Add custom scrollbar for output */
-        .output-markdown::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .output-markdown::-webkit-scrollbar-track {
-            background: #f8f8f8;
-            border-radius: 3px;
-        }
-        
-        .output-markdown::-webkit-scrollbar-thumb {
-            background: #000000;
-            border-radius: 3px;
-        }
-        
-        /* 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: #000000;
-        }
-
-        /* Tips section */
-        .tips-section {
-            color: #000000 !important;
-            font-size: 0.9rem !important;
-        }
-        
-        .tips-section ul {
-            margin-left: 1.2rem;
-        }
-        
-        /* Make all text black */
-        * {
-            color: #000000;
-        }
-    """
-) as interface:
-    with gr.Column(elem_id="custom-container"):
-        with gr.Column(elem_classes="main-content"):
-            gr.Markdown(
-                """
-                <div class='header'>
-                    <h1>🎙️ TaskWhisper</h1>
-                    <p>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
-                    )
-                    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
-            )
-            
-            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>
-                """
-            )
+with gr.Blocks(title="TaskWhisper - Smart Task Manager") as interface:
+    gr.Markdown("# 🎙️ TaskWhisper - Smart Task Manager")
+    gr.Markdown("Record audio or type your task. The AI will help improve and structure your task description.")
+    
+    # Get Trello members for the dropdown
+    members = get_trello_members()
+    
+    with gr.Tab("Audio Input"):
+        audio_input = gr.Audio(
+            label="Record or Upload Audio",
+            sources=["microphone", "upload"],
+            type="filepath",
+            format="wav",
+            interactive=True
+        )
+        gr.Markdown("""
+        *Instructions:*
+        - Use microphone to record directly
+        - Or upload an audio file (WAV format)
+        - Speak clearly for better results
+        - Keep background noise minimal
+        """)
+        member_dropdown_audio = gr.Dropdown(
+            choices=list(members.keys()),
+            multiselect=True,
+            label="Assign to Members",
+            info="Select one or more members to assign the task",
+            value=[]
+        )
+        audio_button = gr.Button("Process Audio")
+    
+    with gr.Tab("Text Input"):
+        text_input = gr.Textbox(
+            lines=3,
+            placeholder="Type your task here (e.g., 'Need to prepare quarterly report with sales data by next Friday')",
+            label="Text Input"
+        )
+        member_dropdown_text = gr.Dropdown(
+            choices=list(members.keys()),
+            multiselect=True,
+            label="Assign to Members",
+            info="Select one or more members to assign the task",
+            value=[]  # Initialize with empty selection
+        )
+        text_button = gr.Button("Process Text")
+    
+    output = gr.Textbox(
+        label="Task Details",
+        lines=15
+    )
+    
+    # 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
+    )
 
 if __name__ == "__main__":
-    interface.launch(
-        show_api=False,  # Hide API docs
-        share=True,
-        favicon_path="🎙️"  # Custom favicon
-    )
+    interface.launch(share=True)