Update app.py

app.py

@@ -440,56 +440,137 @@ def process_text_with_members(text, selected_members):
         return f"Error processing text with members: {str(e)}"
 
 # Create Gradio interface
-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.")
+with gr.Blocks(
+    title="TaskWhisper",
+    css="""
+        #component-0 {
+            max-width: 900px;
+            margin: auto;
+            padding: 20px;
+            background-color: #f5f9f9;
+        }
+        .gradio-container {
+            font-family: 'Inter', -apple-system, sans-serif;
+        }
+        .tabs.svelte-710i53 {
+            background-color: #e0f2f1;
+            border-radius: 10px;
+            padding: 10px;
+            margin-bottom: 20px;
+        }
+        .tab-nav {
+            background-color: #b2dfdb;
+            border-radius: 8px;
+        }
+        .selected {
+            background-color: #4db6ac !important;
+            color: white !important;
+        }
+        button.primary {
+            background-color: #26a69a !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 8px !important;
+        }
+        button.primary:hover {
+            background-color: #00897b !important;
+        }
+        .output-markdown {
+            background-color: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .footer {
+            text-align: center;
+            color: #666;
+            font-size: 0.8em;
+            margin-top: 40px;
+        }
+        .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;
+        }
+        .textbox {
+            border: 1px solid #b2dfdb !important;
+            border-radius: 8px !important;
+        }
+    """
+) 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("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("Voice Input"):
+        with gr.Box(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 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>
+                """
+            )
+            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"):
-        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")
+        with gr.Box(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")
     
-    output = gr.Textbox(
-        label="Task Details",
-        lines=15
-    )
+    with gr.Box(elem_classes="output-markdown"):
+        output = gr.Markdown(
+            label="Task Details",
+            value="Task details will appear here..."
+        )
     
     # Set up event handlers
     audio_button.click(
@@ -503,6 +584,20 @@ with gr.Blocks(title="TaskWhisper - Smart Task Manager") as interface:
         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(share=True)
+    interface.launch(
+        show_api=False,  # Hide API docs
+        share=True,
+        favicon_path="🎙️",  # Custom favicon
+        # Remove Gradio branding
+        analytics_enabled=False
+    )