Update app.py

app.py

@@ -5,6 +5,167 @@ from groq import Groq
 import os
 from duckduckgo_search import DDGS
 
+# Set page configuration with wider layout and custom theme
+st.set_page_config(
+    page_title="Z-Agent News Analysis",
+    layout="wide",
+    initial_sidebar_state="collapsed",
+    page_icon="🔍"
+)
+
+# Custom CSS for Google DeepMind-inspired styling
+st.markdown("""
+<style>
+    /* Global font and color scheme */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
+    html, body, [class*="css"] {
+        font-family: 'Inter', sans-serif;
+    }
+    
+    /* Header styling */
+    h1 {
+        color: #101010;
+        font-weight: 700 !important;
+        margin-bottom: 1rem !important;
+        letter-spacing: -0.5px;
+    }
+    
+    h2, h3 {
+        font-weight: 600 !important;
+        color: #202020;
+        letter-spacing: -0.3px;
+    }
+    
+    /* Container styling */
+    .main .block-container {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+        max-width: 1200px;
+    }
+    
+    /* Card-like sections */
+    .card {
+        background-color: white;
+        border-radius: 12px;
+        padding: 1.5rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        margin-bottom: 1.5rem;
+    }
+    
+    /* Button styling */
+    .stButton > button {
+        background-color: #1a73e8;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        padding: 0.6rem 1.2rem;
+        font-weight: 500;
+        transition: all 0.3s;
+        width: 100%;
+    }
+    
+    .stButton > button:hover {
+        background-color: #1765cc;
+        box-shadow: 0 2px 10px rgba(26, 115, 232, 0.2);
+    }
+    
+    /* Input field styling */
+    .stTextInput input, .stSelectbox div[data-baseweb="select"] div, .stSlider div[data-baseweb="slider"] {
+        border-radius: 6px;
+        border: 1px solid #E0E0E0;
+    }
+    
+    .stTextInput input:focus, .stSelectbox div[data-baseweb="select"] div:focus {
+        border-color: #1a73e8;
+        box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+    }
+    
+    /* Analysis result styling */
+    .analysis-result {
+        background-color: #F8F9FA;
+        border-radius: 12px;
+        padding: 1.5rem;
+        border-left: 4px solid #1a73e8;
+    }
+    
+    /* Expand/collapse sections */
+    .streamlit-expanderHeader {
+        font-weight: 500;
+        color: #5f6368;
+    }
+    
+    /* Spinner/progress styling */
+    .stSpinner > div {
+        border-color: #1a73e8 transparent transparent !important;
+    }
+    
+    /* Footer styling */
+    footer {
+        border-top: 1px solid #F0F0F0;
+        padding-top: 1rem;
+        color: #5f6368;
+        font-size: 0.8rem;
+    }
+    
+    /* Logo and branding */
+    .logo-text {
+        font-weight: 600;
+        background: linear-gradient(90deg, #1a73e8, #8ab4f8);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 2.2rem;
+        letter-spacing: -1px;
+    }
+    
+    /* Sections */
+    .section-header {
+        font-size: 1.2rem;
+        font-weight: 500;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        color: #202124;
+    }
+    
+    /* Source links */
+    a {
+        color: #1a73e8;
+        text-decoration: none;
+    }
+    
+    a:hover {
+        text-decoration: underline;
+    }
+    
+    /* Tabs for analysis results */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 2px;
+    }
+    
+    .stTabs [data-baseweb="tab"] {
+        background-color: transparent;
+        border-radius: 4px 4px 0px 0px;
+        color: #5f6368;
+        padding: 10px 16px;
+    }
+    
+    .stTabs [aria-selected="true"] {
+        background-color: white !important;
+        color: #1a73e8 !important;
+        border-bottom: 2px solid #1a73e8;
+    }
+    
+    /* Info boxes */
+    .info-box {
+        background-color: #E8F0FE;
+        border-radius: 8px;
+        padding: 1rem;
+        border-left: 4px solid #1a73e8;
+        margin-bottom: 1rem;
+    }
+</style>
+""", unsafe_allow_html=True)
+
 class DuckDuckGoSearch:
     """
     Custom DuckDuckGo search implementation with robust error handling and result processing.
@@ -125,22 +286,36 @@ def log_agent_activity(prompt: str, result: str, agent_name: str):
     Creates an expandable log of agent activities in the Streamlit interface
     for transparency and debugging purposes.
     """
-    with st.expander("View Agent Activity Log"):
+    with st.expander("🔍 View Agent Activity Log"):
         st.write(f"### Agent Activity ({agent_name}):")
         st.write("**Input Prompt:**")
         st.code(prompt, language="text")
         st.write("**Analysis Output:**")
         st.code(result, language="text")
 
-# Initialize Streamlit app
-st.set_page_config(page_title="News Analysis Tool", layout="wide")
+# Header with branded logo and description
+col1, col2 = st.columns([1, 4])
+with col1:
+    st.markdown("""
+        <div style="text-align: center; padding-top: 0.5rem;">
+            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M19.5 9.5l-7.5-7.5-7.5 7.5m15 0v8c0 1.1-.9 2-2 2h-11c-1.1 0-2-.9-2-2v-8" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="12" cy="12" r="3" stroke="#1a73e8" stroke-width="2"/>
+                <path d="M12 15v3" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+        </div>
+    """, unsafe_allow_html=True)
+
+with col2:
+    st.markdown('<span class="logo-text">Z-Agent News Analysis</span>', unsafe_allow_html=True)
+    st.markdown("""
+    <p style="color: #5f6368; font-size: 1rem; margin-top: -0.5rem;">
+        Intelligent news analysis powered by AI. Get comprehensive insights and multiple perspectives on any topic.
+    </p>
+    """, unsafe_allow_html=True)
 
-# Title and description
-st.title("Z-Agent🔍 AI News Analysis Tool")
-st.write("""
-This tool combines the power of Ai Agent. Get comprehensive insights and multiple 
-perspectives on any news topic.
-""")
+# Main content area
+st.markdown('<div class="card">', unsafe_allow_html=True)
 
 # Initialize the components
 try:
@@ -148,83 +323,153 @@ try:
     llm = GroqLLM()
     search_tool = DuckDuckGoSearch()
     
-    # Input section
+    # Input section with clear design
     news_topic = st.text_input(
-        "Enter News Topic or Query:",
-        placeholder="E.g., Recent developments in renewable energy"
+        "What news topic would you like to analyze?",
+        placeholder="E.g., Recent developments in renewable energy, Tech industry layoffs, Global climate agreements..."
     )
     
-    # Analysis options
-    col1, col2 = st.columns(2)
+    # Analysis options in a cleaner layout
+    col1, col2, col3 = st.columns([2, 2, 1])
+    
     with col1:
         search_depth = st.slider(
-            "Search Depth (number of results)",
+            "Search Depth",
             min_value=3,
             max_value=10,
-            value=5
+            value=5,
+            help="Number of news sources to analyze"
         )
+    
     with col2:
         analysis_type = st.selectbox(
             "Analysis Type",
-            ["Comprehensive", "Quick Summary", "Technical", "Simplified"]
+            ["Comprehensive", "Quick Summary", "Technical", "Simplified"],
+            help="Choose the style and depth of analysis"
+        )
+    
+    with col3:
+        time_period = st.selectbox(
+            "Time Period",
+            ["Last 7 days", "Last 30 days", "Last 24 hours"],
+            help="How recent should the news be"
         )
     
     # Generate analysis button
-    if st.button("Analyze News"):
-        if news_topic:
-            with st.spinner("Gathering information and analyzing..."):
-                try:
-                    # Show search progress
-                    search_placeholder = st.empty()
-                    search_placeholder.info("Searching for recent news...")
+    col1, col2 = st.columns([3, 1])
+    with col2:
+        analyze_button = st.button("Analyze News")
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Results section
+    if analyze_button and news_topic:
+        with st.spinner(""):
+            try:
+                # Progress indicators with custom styling
+                progress_container = st.container()
+                progress_container.markdown('<div class="info-box">', unsafe_allow_html=True)
+                progress_placeholder = progress_container.empty()
+                progress_placeholder.markdown("🔎 **Searching for recent news sources...**", unsafe_allow_html=True)
+                
+                # Determine time frame from selection
+                time_map = {
+                    "Last 24 hours": "24h",
+                    "Last 7 days": "7d",
+                    "Last 30 days": "30d"
+                }
+                time_frame = time_map.get(time_period, "7d")
+                
+                # Perform search
+                search_results = search_tool(
+                    f"Latest news about {news_topic} {time_frame}",
+                    max_results=search_depth
+                )
+                
+                if not search_results.startswith(("Search error", "No results")):
+                    # Update progress
+                    progress_placeholder.markdown("🧠 **Analyzing search results and generating insights...**", unsafe_allow_html=True)
                     
-                    # Perform search
-                    search_results = search_tool(
-                        f"Latest news about {news_topic} last 7 days",
-                        max_results=search_depth
-                    )
+                    # Create analysis prompt
+                    analysis_prompt = create_analysis_prompt(news_topic, search_results)
+                    
+                    # Get analysis from LLM
+                    analysis_result = llm(analysis_prompt)
+                    
+                    # Clear progress messages
+                    progress_container.empty()
                     
-                    if not search_results.startswith(("Search error", "No results")):
-                        # Update progress
-                        search_placeholder.info("Analyzing search results...")
-                        
-                        # Create analysis prompt
-                        analysis_prompt = create_analysis_prompt(news_topic, search_results)
-                        
-                        # Get analysis from LLM
-                        analysis_result = llm(analysis_prompt)
-                        
-                        # Clear progress messages
-                        search_placeholder.empty()
-                        
-                        # Display results
-                        st.subheader("📊 Analysis Results")
+                    # Display results in tabs for better organization
+                    st.markdown('<div class="card">', unsafe_allow_html=True)
+                    st.markdown(f'<h2>Analysis: {news_topic}</h2>', unsafe_allow_html=True)
+                    
+                    tab1, tab2 = st.tabs(["📊 Analysis", "📰 Sources"])
+                    
+                    with tab1:
+                        st.markdown('<div class="analysis-result">', unsafe_allow_html=True)
                         st.markdown(analysis_result)
-                        
-                        # Log the activity
-                        log_agent_activity(
-                            analysis_prompt,
-                            analysis_result,
-                            "News Analysis Agent"
-                        )
-                    else:
-                        search_placeholder.empty()
-                        st.error(search_results)
-                        
-                except Exception as e:
-                    st.error(f"An error occurred during analysis: {str(e)}")
-        else:
-            st.warning("Please enter a news topic to analyze.")
+                        st.markdown('</div>', unsafe_allow_html=True)
+                    
+                    with tab2:
+                        st.markdown("### News Sources Used in Analysis")
+                        # Parse and display sources in a more structured way
+                        sources = search_results.split("\n\n")
+                        for source in sources:
+                            lines = source.strip().split("\n")
+                            if len(lines) >= 5:  # Ensure we have enough lines
+                                title_line = lines[0].replace("1. Title: ", "").replace("2. Title: ", "").replace("3. Title: ", "").replace("4. Title: ", "").replace("5. Title: ", "")
+                                date_line = lines[1].replace("   Date: ", "")
+                                source_line = lines[2].replace("   Source: ", "")
+                                url_line = lines[4].replace("   URL: ", "")
+                                
+                                st.markdown(f"""
+                                <div style="margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0;">
+                                    <h4 style="margin-bottom: 0.2rem;">{title_line}</h4>
+                                    <p style="color: #5f6368; margin-bottom: 0.5rem; font-size: 0.9rem;">
+                                        {source_line} • {date_line}
+                                    </p>
+                                    <a href="{url_line}" target="_blank">Read original article</a>
+                                </div>
+                                """, unsafe_allow_html=True)
+                    
+                    st.markdown('</div>', unsafe_allow_html=True)
+                    
+                    # Log the activity
+                    log_agent_activity(
+                        analysis_prompt,
+                        analysis_result,
+                        "News Analysis Agent"
+                    )
+                else:
+                    progress_container.empty()
+                    st.error(f"😕 {search_results}")
+                    
+            except Exception as e:
+                st.error(f"An error occurred during analysis: {str(e)}")
+    elif analyze_button:
+        st.warning("Please enter a news topic to analyze.")
 
-    # Add helpful tips
-    with st.expander("💡 Tips for Better Results"):
-        st.write("""
-        - Be specific with your topic for more focused analysis
-        - Use keywords related to recent events for timely information
-        - Consider including timeframes in your query
-        - Try different analysis types for various perspectives
-        - For complex topics, start with a broader search and then narrow down
+    # Help section with visually appealing design
+    st.markdown('<div class="card">', unsafe_allow_html=True)
+    st.markdown('<h3>💡 Tips for Better Results</h3>', unsafe_allow_html=True)
+    
+    tips_col1, tips_col2 = st.columns(2)
+    
+    with tips_col1:
+        st.markdown("""
+        - **Be specific** with your topic for more focused analysis
+        - Use **keywords** related to recent events for timely information
+        - Include **geographic locations** when relevant (e.g., "Climate policy in Europe")
         """)
+    
+    with tips_col2:
+        st.markdown("""
+        - Try different **analysis types** for various perspectives
+        - For complex topics, start with a **broader search** then narrow down
+        - Adjust the **time period** to control recency of news sources
+        """)
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
 except Exception as e:
     st.error(f"""
@@ -237,9 +482,17 @@ except Exception as e:
     3. You have internet connectivity for DuckDuckGo searches
     """)
 
-# Footer
+# Footer with branding
 st.markdown("---")
-st.caption(
-    " | "
-    "Created for news analysis and research purposes"
-)
+st.markdown("""
+<footer>
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div>
+            Z-Agent News Analysis Tool © 2025
+        </div>
+        <div>
+            Created for news analysis and research purposes
+        </div>
+    </div>
+</footer>
+""", unsafe_allow_html=True)