Update app.py

app.py

@@ -21,186 +21,34 @@ st.set_page_config(
 # Add all CSS styles
 st.markdown("""
     <style>
-        /* Agent Team Section */
-        .agent-team {
-            display: flex;
-            justify-content: space-around;
-            margin-bottom: 20px;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.9);
-            border-radius: 15px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-        }
-        
-        .agent-card {
-            text-align: center;
-            padding: 15px;
-            border-radius: 10px;
-            transition: all 0.3s ease;
-        }
-        
-        .agent-card.active {
-            transform: scale(1.05);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-        }
-        
-        .agent-avatar {
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            margin: 0 auto 10px;
+        /* Progress Tracker Section */
+        .progress-step {
             display: flex;
             align-items: center;
-            justify-content: center;
-            font-size: 30px;
-            background: white;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-        
-        /* Chat Messages */
-        .chat-container {
-            height: 400px;
-            overflow-y: auto;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.9);
-            border-radius: 15px;
-            margin: 20px 0;
-        }
-        
-        .chat-message {
-            display: flex;
-            margin: 15px 0;
-            opacity: 0;
-            animation: fadeIn 0.5s forwards;
-        }
-        
-        @keyframes fadeIn {
-            to { opacity: 1; }
-        }
-        
-        .message-content {
-            background: white;
-            padding: 15px;
-            border-radius: 15px;
-            margin-left: 15px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            max-width: 80%;
-        }
-        
-        /* Progress Bar */
-        .progress-container {
-            width: 100%;
-            height: 8px;
-            background: #f0f0f0;
-            border-radius: 4px;
-            overflow: hidden;
-            margin: 20px 0;
-        }
-        
-        .progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #4CAF50, #81C784);
-            transition: width 0.5s ease;
+            margin: 10px 0;
+            font-size: 1.1em;
         }
-        
-        /* Report Sections */
-        .report-header {
-            background: #f8f9fa;
-            padding: 15px;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            border-left: 4px solid #ff4444;
-        }
-        
-        .exec-summary {
-            background: white;
-            padding: 25px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-        }
-        
-        .key-findings {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin: 20px 0;
-        }
-        
-        .finding-card {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+        .progress-step.active::before {
+            content: '🍕';
+            margin-right: 10px;
         }
-        
-        .detailed-section {
-            background: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin: 20px 0;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+
+        .progress-step.done::before {
+            content: '✅';
+            margin-right: 10px;
         }
     </style>
 """, unsafe_allow_html=True)
 
-def display_agent_team(container, active_agent=None):
-    """Display the team of agents with active state"""
-    agents = [
-        {"role": "Research Analyst", "icon": "🔍", "color": "#E3F2FD"},
-        {"role": "Data Analyst", "icon": "📊", "color": "#F3E5F5"},
-        {"role": "Report Writer", "icon": "✍️", "color": "#E8F5E9"}
-    ]
-    
-    html = '<div class="agent-team">'
-    for agent in agents:
-        active_class = "active" if agent["role"] == active_agent else ""
-        html += f"""
-            <div class="agent-card {active_class}" style="background: {agent['color']}">
-                <div class="agent-avatar">{agent['icon']}</div>
-                <div class="agent-role">{agent['role']}</div>
-                <div class="agent-status">
-                    {"Working..." if agent["role"] == active_agent else "Standby"}
-                </div>
-            </div>
-        """
-    html += '</div>'
-    
+def display_progress_tracker(container, steps, current_step_index):
+    """Display a progress tracker like a recipe being made."""
+    html = ""
+    for index, step in enumerate(steps):
+        step_class = "done" if index < current_step_index else "active" if index == current_step_index else ""
+        html += f"<div class='progress-step {step_class}'>{step}</div>"
     container.markdown(html, unsafe_allow_html=True)
 
-def display_agent_message(container, agent_type: str, message: str):
-    """Display an agent message with improved styling"""
-    icons = {"researcher": "🔍", "analyst": "📊", "writer": "✍️"}
-    colors = {
-        "researcher": "#E3F2FD",
-        "analyst": "#F3E5F5",
-        "writer": "#E8F5E9"
-    }
-    
-    html = f"""
-        <div class="chat-message">
-            <div class="agent-avatar" style="background: {colors.get(agent_type, '#fff')}">
-                {icons.get(agent_type, "👤")}
-            </div>
-            <div class="message-content">
-                <div>{message}</div>
-            </div>
-        </div>
-    """
-    container.markdown(html, unsafe_allow_html=True)
-
-def update_progress(container, progress, message=""):
-    """Update progress bar with animation"""
-    progress_html = f"""
-        <div class="progress-container">
-            <div class="progress-bar" style="width: {progress}%"></div>
-        </div>
-        <div style="text-align: center; color: #666;">
-            {message}
-        </div>
-    """
-    container.markdown(progress_html, unsafe_allow_html=True)
-
 def create_research_crew(topic: str):
     """Create the research crew with enhanced prompts"""
     researcher = Agent(
@@ -292,29 +140,27 @@ def create_research_crew(topic: str):
 def run_market_research(topic: str, progress_container, chat_container):
     """Run the market research process"""
     try:
-        # Initialize with team display
-        display_agent_team(progress_container, None)
-        update_progress(progress_container, 0, "Initializing research team...")
+        steps = [
+            "Initializing research team...",
+            "Gathering market data...",
+            "Analyzing findings...",
+            "Compiling final report..."
+        ]
+        
+        # Step 1: Initialize research team
+        display_progress_tracker(progress_container, steps, 0)
+        time.sleep(1)
         
-        # Research Phase
-        display_agent_team(progress_container, "Research Analyst")
-        display_agent_message(chat_container, "researcher", 
-            f"Starting comprehensive research on {topic}...")
-        update_progress(progress_container, 25, "Gathering market data...")
+        # Step 2: Gathering market data
+        display_progress_tracker(progress_container, steps, 1)
         time.sleep(1)
         
-        # Analysis Phase
-        display_agent_team(progress_container, "Data Analyst")
-        display_agent_message(chat_container, "analyst", 
-            "Processing research data and identifying key insights...")
-        update_progress(progress_container, 50, "Analyzing findings...")
+        # Step 3: Analyzing findings
+        display_progress_tracker(progress_container, steps, 2)
         time.sleep(1)
         
-        # Report Phase
-        display_agent_team(progress_container, "Report Writer")
-        display_agent_message(chat_container, "writer", 
-            "Compiling final report with executive summary and detailed analysis...")
-        update_progress(progress_container, 75, "Generating report...")
+        # Step 4: Compiling final report
+        display_progress_tracker(progress_container, steps, 3)
         
         # Create and run the crew
         crew = create_research_crew(topic)
@@ -335,9 +181,7 @@ def run_market_research(topic: str, progress_container, chat_container):
         charts = generate_visualizations(report_data)
         report_data['charts'] = charts
         
-        update_progress(progress_container, 100, "Report completed!")
-        display_agent_message(chat_container, "writer", 
-            "✨ Report generation completed! You can now view the full report.")
+        st.success("✨ Report generation completed! You can now view the full report.")
         
         # Store the report data in session state
         st.session_state.current_report = report_data
@@ -381,7 +225,6 @@ def main():
                         
                         try:
                             run_market_research(topic, progress_container, chat_container)
-                            st.success("Report generated successfully! View it in the Reports tab.")
                         except Exception as e:
                             st.error(f"Error generating report: {str(e)}")
                         finally: