app.py

# app.py
import os
import streamlit as st
from groq import Groq
import time
import plotly.express as px
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

# Initialize Groq client
client = Groq(api_key=os.getenv("GROQ_API_KEY"))

# Set up Streamlit page
st.set_page_config(
    page_title="Legal Rights Explorer",
    page_icon="⚖️",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for styling
st.markdown("""
<style>
    :root {
        --primary: #4361ee;
        --secondary: #3f37c9;
        --accent: #4895ef;
        --success: #4cc9f0;
        --dark: #3a0ca3;
        --light: #f8f9fa;
        --text: #212529;
    }
    
    .stApp {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: var(--text);
    }
    
    .header {
        background: linear-gradient(90deg, var(--dark) 0%, var(--primary) 100%);
        color: white;
        padding: 1.5rem;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        margin-bottom: 2rem;
    }
    
    .card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        margin-bottom: 1.5rem;
        transition: transform 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    .scenario-btn {
        width: 100%;
        padding: 1rem;
        background: linear-gradient(90deg, var(--accent) 0%, var(--success) 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        margin: 0.5rem 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .scenario-btn:hover {
        background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
        transform: scale(1.02);
    }
    
    .response-card {
        background: rgba(255, 255, 255, 0.95);
        border-left: 5px solid var(--primary);
        border-radius: 10px;
        padding: 1.5rem;
        margin-top: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    
    .footer {
        text-align: center;
        padding: 1.5rem;
        margin-top: 2rem;
        color: var(--text);
        font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
        .header {
            padding: 1rem;
        }
        
        .card {
            padding: 1rem;
        }
    }
</style>
""", unsafe_allow_html=True)

# Country data with flags
COUNTRIES = {
    "🇺🇸 United States": "US",
    "🇬🇧 United Kingdom": "UK",
    "🇨🇦 Canada": "Canada",
    "🇦🇺 Australia": "Australia",
    "🇮🇳 India": "India",
    "🇩🇪 Germany": "Germany",
    "🇫🇷 France": "France",
    "🇯🇵 Japan": "Japan",
    "🇧🇷 Brazil": "Brazil",
    "🇿🇦 South Africa": "South Africa",
    "🇪🇸 Spain": "Spain",
    "🇮🇹 Italy": "Italy"
}

# Common legal scenarios
SCENARIOS = [
    "Traffic Stop by Police",
    "Workplace Discrimination",
    "Rental Housing Issues",
    "Medical Emergency Rights",
    "Consumer Protection",
    "Arrest or Detention",
    "Border Crossing",
    "Online Privacy",
    "Employment Termination",
    "Debt Collection",
    "Freedom of Speech",
    "Immigration Rights"
]

# LLM models available on Groq
MODELS = {
    "Llama3-70b-8192": "llama3-70b-8192",
    "Llama3-8b-8192": "llama3-8b-8192",
    "Mixtral-8x7b-32768": "mixtral-8x7b-32768",
    "Gemma-7b-It": "gemma-7b-it"
}

# Function to get rights information from Groq API
def get_legal_rights(country, scenario, model_name):
    """Get legal rights information using Groq API"""
    system_prompt = f"""
    You are an expert legal assistant specializing in {country} law. 
    Provide clear, accurate information about an individual's rights in the given scenario.
    
    Guidelines:
    - List 5-7 key rights as bullet points
    - Use plain language understandable to non-lawyers
    - Include relevant legal references when appropriate
    - Highlight any critical actions the person should take
    - Mention any country-specific variations
    - Keep response under 300 words
    - Format with emojis for readability
    """
    
    user_prompt = f"""
    Scenario: {scenario}
    Country: {country}
    
    Please provide a comprehensive list of rights for this situation in {country}.
    """
    
    try:
        chat_completion = client.chat.completions.create(
            messages=[
                {
                    "role": "system",
                    "content": system_prompt
                },
                {
                    "role": "user",
                    "content": user_prompt
                }
            ],
            model=model_name,
            temperature=0.3,
            max_tokens=1024,
            top_p=1,
            stream=False,
            stop=None,
        )
        
        return chat_completion.choices[0].message.content
    
    except Exception as e:
        st.error(f"Error fetching data: {str(e)}")
        return None

# Function to display response with animation
def display_response(response):
    """Display the response with typing animation effect"""
    message_placeholder = st.empty()
    full_response = ""
    
    # Simulate stream of response with milliseconds delay
    for chunk in response.split():
        full_response += chunk + " "
        time.sleep(0.05)
        # Add a blinking cursor to simulate typing
        message_placeholder.markdown(f'<div class="response-card">{full_response}▌</div>', unsafe_allow_html=True)
    
    # Display final message without the cursor
    message_placeholder.markdown(f'<div class="response-card">{response}</div>', unsafe_allow_html=True)

# Main app
def main():
    # Header section
    st.markdown("""
    <div class="header">
        <h1>Legal Rights Explorer</h1>
        <p>Know your rights in any situation, anywhere in the world</p>
    </div>
    """, unsafe_allow_html=True)
    
    # Sidebar for settings
    with st.sidebar:
        st.markdown("## ⚙️ Settings")
        selected_model = st.selectbox("Select AI Model", list(MODELS.keys()), index=0)
        
        st.markdown("---")
        st.markdown("### About")
        st.markdown("This app helps you understand your legal rights in various situations across different countries using AI technology.")
        st.markdown("Powered by Groq API and open-source LLMs.")
        
        st.markdown("---")
        st.markdown("### How to Use")
        st.markdown("1. Select your country 🇬🇧")
        st.markdown("2. Choose a legal scenario 🚔")
        st.markdown("3. Get instant rights information ⚖️")
        
        st.markdown("---")
        st.markdown("Built with ❤️ for legal empowerment")
    
    # Main content columns
    col1, col2 = st.columns([1, 2])
    
    with col1:
        st.markdown("### 🌍 Select Your Country")
        country_display = st.selectbox("Choose country", list(COUNTRIES.keys()), index=0)
        country_code = COUNTRIES[country_display]
        
        st.markdown("### 🚨 Choose a Scenario")
        
        # Create buttons for each scenario
        for scenario in SCENARIOS:
            if st.button(scenario, key=scenario, use_container_width=True, 
                         help=f"Click to see your rights for {scenario}"):
                st.session_state.selected_scenario = scenario
        
        # Custom scenario input
        custom_scenario = st.text_input("Or enter your own scenario:")
        if custom_scenario:
            st.session_state.selected_scenario = custom_scenario
        
        # Add some visualizations
        st.markdown("### 📊 Global Rights Awareness")
        countries = list(COUNTRIES.values())
        awareness = [80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25]  # Simulated data
        
        fig = px.bar(
            x=countries,
            y=awareness,
            labels={'x': 'Country', 'y': 'Awareness Level'},
            color=awareness,
            color_continuous_scale='Blues'
        )
        fig.update_layout(
            title='Rights Awareness by Country',
            plot_bgcolor='rgba(0,0,0,0)',
            paper_bgcolor='rgba(0,0,0,0)'
        )
        st.plotly_chart(fig, use_container_width=True)
    
    with col2:
        st.markdown("### ⚖️ Your Legal Rights")
        
        if 'selected_scenario' in st.session_state and st.session_state.selected_scenario:
            with st.spinner(f"Getting your rights for {st.session_state.selected_scenario} in {country_code}..."):
                response = get_legal_rights(
                    country_code, 
                    st.session_state.selected_scenario, 
                    MODELS[selected_model]
                )
                
                if response:
                    display_response(response)
                else:
                    st.error("Failed to get response. Please try again.")
        else:
            st.info("Please select a legal scenario from the left panel to see your rights.")
            st.image("https://images.unsplash.com/photo-1589391886645-d51941baf7fb?auto=format&fit=crop&w=600&h=400", 
                     caption="Know Your Rights, Exercise Your Freedom")
            
            st.markdown("""
            <div class="card">
                <h3>Why Know Your Rights?</h3>
                <p>Understanding your legal rights empowers you to:</p>
                <ul>
                    <li>Protect yourself in difficult situations</li>
                    <li>Make informed decisions</li>
                    <li>Prevent exploitation</li>
                    <li>Access justice when needed</li>
                    <li>Confidently navigate legal systems</li>
                </ul>
            </div>
            """, unsafe_allow_html=True)
    
    # Footer
    st.markdown("""
    <div class="footer">
        <p>Legal Rights Explorer | For Educational Purposes Only | Not Legal Advice</p>
        <p>Always consult a qualified attorney for your specific legal situation</p>
    </div>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    main()