Initial round of UI updates

app.py

@@ -88,7 +88,7 @@ class ModelManager:
 # Global model manager instance
 model_manager = ModelManager()
 
-
+ 
 @spaces.GPU
 def prompt_lm(audios: list[str], messages: list[dict[str, str]]) -> str:
     """Generate response using the model"""
@@ -124,12 +124,12 @@ def prompt_lm(audios: list[str], messages: list[dict[str, str]]) -> str:
 def _multimodal_textbox_factory():
     return gr.MultimodalTextbox(
         value=None,
-        interactive=True,
-        file_count="multiple",
-        placeholder="Enter message or upload file...",
+        interactive=True, 
+        sources="microphone",
+        placeholder="Enter message...",
         show_label=False,
-        submit_btn="Add input",
-        file_types=["audio"],
+        autofocus=True,
+        submit_btn="Send"
     )
 
 
@@ -186,12 +186,12 @@ def _chat_tab(examples):
     )
     
     chatbot = gr.Chatbot(
-        label="Model inputs",
+        label="Chat",
         elem_id="chatbot",
         bubble_full_width=False,
         type="messages",
         render_markdown=False,
-        resizeable=True,
+        resizeable=True
     )
 
     chat_input = _multimodal_textbox_factory()
@@ -428,15 +428,129 @@ def main(
         ],
     }
 
-    with gr.Blocks(title="NatureLM-audio", theme=gr.themes.Default(primary_hue="slate")) as app:
+    with gr.Blocks(title="NatureLM-audio", theme=gr.themes.Base(primary_hue="blue", font=[gr.themes.GoogleFont("Noto Sans")])) as app:
+        header = gr.HTML("""
+        <div style="display: flex; align-items: center; gap: 12px;"><h2 style="margin: 0;">NatureLM-audio<span style="font-size: 0.55em; color: #28a745; background: #e6f4ea; padding: 2px 6px; border-radius: 4px; margin-left: 8px; display: inline-block; vertical-align: top;">BETA</span></h2></div>
+        
+        """)
+         
         with gr.Tabs():
-            with gr.Tab("Chat"):
-                _chat_tab(examples)
-            with gr.Tab("Batch"):
+            with gr.Tab("Analyze Audio"):
+                uploaded_audio = gr.State() 
+                with gr.Column(visible=True) as onboarding_message: 
+                    gr.HTML("""
+                    <div style="
+                        background: transparent;
+                        border: 1px solid #e5e7eb;
+                        border-radius: 8px;
+                        padding: 16px 20px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        margin-bottom: 16px;
+                        margin-left: 0;
+                        margin-right: 0;
+                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                    ">
+                        <div style="display: flex; padding: 0px; align-items: center; flex: 1;">
+                            <div style="font-size: 20px; margin-right: 12px;">👋</div>
+                            <div style="flex: 1;">
+                                <div style="font-size: 16px; font-weight: 600; color: #374151; margin-bottom: 4px;">Welcome to NatureLM-audio!</div>
+                                <div style="font-size: 14px; color: #6b7280; line-height: 1.4;">Upload your first audio file below or try a sample from our library.</div>
+                            </div>
+                        </div>
+                        <a href="https://www.earthspecies.org/blog" target="_blank" style=" 
+                            padding: 6px 12px;
+                            border-radius: 6px;
+                            font-size: 13px;
+                            font-weight: 500;
+                            cursor: pointer;
+                            border: none;
+                            background: #3b82f6;
+                            color: white;
+                            text-decoration: none;
+                            display: inline-block;
+                            transition: background 0.2s ease;
+                        " 
+                        onmouseover="this.style.background='#2563eb';"
+                        onmouseout="this.style.background='#3b82f6';"
+                        >View Tutorial</a>
+                    </div>
+                    """, padding=False)
+                with gr.Column(visible=True) as upload_section:
+                    audio_input = gr.Audio( 
+                        type="filepath",
+                        container=True,  
+                        interactive=True,  
+                        sources=['upload']
+                )
+                with gr.Group(visible=False) as chat:
+                    chatbot = gr.Chatbot( 
+                        elem_id="chatbot", 
+                        type="messages", 
+                        render_markdown=False,
+                        feedback_options=["like", "dislike", "wrong species", "incorrect response", "other"],
+                        resizeable=True
+                    )
+                    chat_input = _multimodal_textbox_factory()
+                    send_all = gr.Button("Send all")
+
+                    
+                    def start_chat_interface(audio_path):
+                        return ( 
+                            gr.update(visible=False), # hide onboarding message
+                            gr.update(visible=True),  # show upload section
+                            gr.update(visible=True),  # show chat box 
+                        )
+
+                    audio_input.change(
+                        fn=start_chat_interface,
+                        inputs=[audio_input],
+                        outputs=[onboarding_message, upload_section, chat]
+                    )
+
+                    chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
+                    send_all.click(bot_response, [chatbot], [chatbot])
+
+
+            with gr.Tab("Sample Library"):
+                gr.Markdown("## Sample Library\n\nExplore example audio files below.") 
+                gr.Examples(
+                    list(examples.values()),
+                    chatbot,
+                    chatbot,
+                    example_labels=list(examples.keys()),
+                    examples_per_page=20,
+                )
+            with gr.Tab("💡 Help"):
+                gr.Markdown("## User Guide") # to fill out 
+                gr.Markdown("## Share Feedback") # to fill out
+                gr.Markdown("## FAQs") # to fill out
+ 
+            app.css = """
+            .welcome-banner {
+                background: transparent !important;
+                border: 1px solid #e5e7eb !important;
+                border-radius: 8px !important;
+                padding: 16px 20px !important;
+                margin-bottom: 16px !important;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+            }
+            
+            .welcome-banner > div {
+                background: transparent !important;
+            }
+            
+            .welcome-banner button {
+                margin: 0 4px !important;
+            }
+            """
+            # Disabling Batch and Long Recording tabs for now
+            """ with gr.Tab("Batch"):
                 _batch_tab()
             with gr.Tab("Long Recording"):
-                _long_recording_tab()
-
+                _long_recording_tab() """
+        
     return app