Upload 3 files

Dockerfile

@@ -1,17 +1,27 @@
-# Base image
-FROM python:3.9-slim
-
-# Set the working directory
-WORKDIR /app
-
-# Copy application files
-COPY . /app
-
-# Install dependencies
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Expose the port your app runs on
-EXPOSE 7860
-
-# Command to run the application
-CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:app"]
+FROM python:3.9-slim
+
+WORKDIR /code
+
+# Create audio directory with proper permissions
+RUN mkdir -p /code/static/audio && \
+    chmod 777 /code/static/audio
+
+COPY ./requirements.txt /code/requirements.txt
+COPY ./final_price_data.csv /code/final_price_data.csv
+COPY ./app.py /code/app.py
+COPY ./static /code/static 
+
+RUN mkdir -p /code/static/audio && \
+    chmod 777 /code/static/audio
+
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    espeak \
+    libespeak1 \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

app.py

@@ -1,127 +1,620 @@
-import os
-from flask import Flask, render_template, request, jsonify
-import requests
-import pandas as pd
-from datetime import datetime
-app = Flask(__name__)
-
-# Function to fetch data from the API
-def fetch_market_data(state=None, district=None, market=None, commodity=None):  
-    api_key = os.getenv("GOV_API_KEY")
-    api_key = api_key
-    base_url = "https://api.data.gov.in/resource/9ef84268-d588-465a-a308-a864a43d0070"
-    params = {
-        "api-key": api_key,
-        "format": "json",
-        "limit": 15000,
-    }
-
-    if state:
-        params["filters[state.keyword]"] = state
-    if district:
-        params["filters[district.keyword]"] = district
-    if market:
-        params["filters[market.keyword]"] = market
-    if commodity:
-        params["filters[commodity.keyword]"] = commodity
-
-    response = requests.get(base_url, params=params)
-
-    if response.status_code == 200:
-        data = response.json()
-        records = data.get("records", [])
-        df = pd.DataFrame(records)
-        return df
-    else:
-        return pd.DataFrame()
-
-# Fetch initial state data
-@app.route("/")
-def index():
-    # Fetch distinct states for dropdown
-    market_data = fetch_market_data()
-    states = market_data['state'].dropna().unique().tolist()
-    today = datetime.today().strftime('%Y-%m-%d')
-    return render_template('index.html', states=states, today=today)
-
-# Handle AJAX requests to filter market data
-@app.route("/filter_data", methods=["POST"])
-def filter_data():
-    state = request.form.get("state")
-    district = request.form.get("district")
-    market = request.form.get("market")
-    commodity = request.form.get("commodity")
-
-    # Fetch filtered data
-    filtered_data = fetch_market_data(state, district, market, commodity)
-
-    # Generate HTML for the filtered table
-    table_html = ""
-    for _, row in filtered_data.iterrows():
-        table_html += f"""
-            <tr>
-                <td>{row['state']}</td>
-                <td>{row['district']}</td>
-                <td>{row['market']}</td>
-                <td>{row['commodity']}</td>
-                <td>{row['variety']}</td>
-                <td>{row['grade']}</td>
-                <td>{row['arrival_date']}</td>
-                <td>{row['min_price']}</td>
-                <td>{row['max_price']}</td>
-                <td>{row['modal_price']}</td>
-            </tr>
-        """
-
-    # Get top 5 cheapest crops by modal price
-    cheapest_crops = filtered_data.sort_values("modal_price", ascending=True).head(5)
-    cheapest_html = ""
-    for _, row in cheapest_crops.iterrows():
-        cheapest_html += f"""
-            <tr>
-                <td>{row['commodity']}</td>
-                <td>{row['modal_price']}</td>
-            </tr>
-        """
-
-    # Get top 5 costliest crops by modal price
-    costliest_crops = filtered_data.sort_values("modal_price", ascending=False).head(5)
-    costliest_html = ""
-    for _, row in costliest_crops.iterrows():
-        costliest_html += f"""
-            <tr>
-                <td>{row['commodity']}</td>
-                <td>{row['modal_price']}</td>
-            </tr>
-        """
-
-    return jsonify({
-        "market_html": table_html,
-        "cheapest_html": cheapest_html,
-        "costliest_html": costliest_html
-    })
-
-# Handle AJAX requests for dropdown filtering
-@app.route("/get_districts", methods=["POST"])
-def get_districts():
-    state = request.form.get("state")
-    market_data = fetch_market_data(state=state)
-    districts = market_data["district"].dropna().unique().tolist()
-    return jsonify(districts)
-
-@app.route("/get_markets", methods=["POST"])
-def get_markets():
-    district = request.form.get("district")
-    market_data = fetch_market_data(district=district)
-    markets = market_data["market"].dropna().unique().tolist()
-    return jsonify(markets)
-
-@app.route("/get_commodities", methods=["POST"])
-def get_commodities():
-    market = request.form.get("market")
-    market_data = fetch_market_data(market=market)
-    commodities = market_data["commodity"].dropna().unique().tolist()
-    return jsonify(commodities)
-
-if __name__ == "__main__":
-     app.run(debug=True, host="0.0.0.0", port=7860)
+import os
+from flask import Flask, render_template, request, jsonify, send_file
+import requests
+import pandas as pd
+from datetime import datetime
+import plotly.express as px
+import plotly.io as pio
+import numpy as np
+import dotenv
+import json
+import gtts
+import uuid
+from pathlib import Path
+
+dotenv.load_dotenv()
+
+app = Flask(__name__)
+
+# Create audio directory if it doesn't exist
+AUDIO_DIR = Path("static/audio")
+AUDIO_DIR.mkdir(parents=True, exist_ok=True)
+
+def fetch_market_data(state=None, district=None, market=None, commodity=None):
+    """Fetch data from the agricultural market API.
+    If the API fails or returns empty data, fallback to the CSV file.
+    Filters (state, district, market, commodity) are applied manually on CSV data.
+    """
+    api_key = "579b464db66ec23bdd000001189bbb99e979428764bdbe8fdd44ebb7"
+    base_url = "https://api.data.gov.in/resource/9ef84268-d588-465a-a308-a864a43d007"
+    
+    params = {
+        "api-key": api_key,
+        "format": "json",
+        "limit": 1000,
+    }
+    
+    if state:
+        params["filters[state]"] = state
+    if district:
+        params["filters[district]"] = district
+    if market:
+        params["filters[market]"] = market
+    if commodity:
+        params["filters[commodity]"] = commodity
+
+    try:
+        response = requests.get(base_url, params=params)
+        if response.status_code == 200:
+            data = response.json()
+            records = data.get("records", [])
+            df = pd.DataFrame(records)
+        else:
+            print(f"API Error: {response.status_code}")
+            raise Exception(f"API Error: {response.status_code}")
+    except Exception as e:
+        print(f"Error fetching data from API: {str(e)}. Falling back to CSV file.")
+        df = pd.read_csv("final_price_data.csv")
+        if 'min_price' not in df.columns:
+            rename_mapping = {
+                'State': 'state',
+                'District': 'district',
+                'Market': 'market',
+                'Commodity': 'commodity',
+                'Variety': 'variety',
+                'Grade': 'grade',
+                'Arrival_Date': 'arrival_date',
+                'Min_x0020_Price': 'min_price',
+                'Max_x0020_Price': 'max_price',
+                'Modal_x0020_Price': 'modal_price'
+            }
+            df.rename(columns=rename_mapping, inplace=True)
+    
+    if df.empty:
+        print("API returned empty data. Falling back to CSV file.")
+        df = pd.read_csv("final_price_data.csv")
+        if 'min_price' not in df.columns:
+            rename_mapping = {
+                'State': 'state',
+                'District': 'district',
+                'Market': 'market',
+                'Commodity': 'commodity',
+                'Variety': 'variety',
+                'Grade': 'grade',
+                'Arrival_Date': 'arrival_date',
+                'Min_x0020_Price': 'min_price',
+                'Max_x0020_Price': 'max_price',
+                'Modal_x0020_Price': 'modal_price'
+            }
+            df.rename(columns=rename_mapping, inplace=True)
+    
+    if state:
+        df = df[df['state'] == state]
+    if district:
+        df = df[df['district'] == district]
+    if market:
+        df = df[df['market'] == market]
+    if commodity:
+        df = df[df['commodity'] == commodity]
+    
+    return df
+
+def get_ai_insights(market_data, state, district, market=None, commodity=None, language="English"):
+    """Get enhanced insights from Gemini API with focus on profitable suggestions for farmers.
+       Supports multiple languages through the prompt.
+       Returns dynamic insights only. If something goes wrong, returns an empty string.
+    """
+    if not state or not district or market_data.empty:
+        return ""
+    
+    try:
+        # Filter data based on provided parameters
+        district_data = market_data[market_data['district'] == district]
+        if district_data.empty:
+            return ""
+        
+        # Apply market filter if provided
+        if market and not market_data[market_data['market'] == market].empty:
+            market_specific = True
+            district_data = district_data[district_data['market'] == market]
+        else:
+            market_specific = False
+            
+        # Apply commodity filter if provided
+        if commodity and not market_data[market_data['commodity'] == commodity].empty:
+            commodity_specific = True
+            district_data = district_data[district_data['commodity'] == commodity]
+        else:
+            commodity_specific = False
+        
+        # Calculate price trends
+        price_trends = district_data.groupby('commodity').agg({
+            'modal_price': ['mean', 'min', 'max', 'std']
+        }).round(2)
+        
+        # Using environment variable for Gemini API key
+        api_key = "AIzaSyBtXV2xJbrWVV57B5RWy_meKXOA59HFMeY"
+        if not api_key:
+            print("Warning: Gemini API key not set")
+            return ""
+            
+        price_trends['price_stability'] = (price_trends['modal_price']['std'] / 
+                                         price_trends['modal_price']['mean']).round(2)
+        
+        district_data['arrival_date'] = pd.to_datetime(district_data['arrival_date'])
+        district_data['month'] = district_data['arrival_date'].dt.month
+        monthly_trends = district_data.groupby(['commodity', 'month'])['modal_price'].mean().round(2)
+        
+        market_competition = len(district_data['market'].unique())
+        top_commodities = district_data.groupby('commodity')['modal_price'].mean().nlargest(5).index.tolist()
+        
+        # Get min and max prices for key commodities
+        price_range_info = {}
+        for commodity in top_commodities[:3]:
+            comm_data = district_data[district_data['commodity'] == commodity]
+            if not comm_data.empty:
+                price_range_info[commodity] = {
+                    'min': comm_data['modal_price'].min(),
+                    'max': comm_data['modal_price'].max(),
+                    'avg': comm_data['modal_price'].mean()
+                }
+        
+        # Calculate market-specific metrics if market is selected
+        market_details = ""
+        if market_specific:
+            market_details = f"""
+            Market-specific information for {market}:
+            - Number of commodities: {len(district_data['commodity'].unique())}
+            - Most expensive commodity: {district_data.groupby('commodity')['modal_price'].mean().idxmax()}
+            - Cheapest commodity: {district_data.groupby('commodity')['modal_price'].mean().idxmin()}
+            """
+        
+        # Commodity-specific details if commodity is selected
+        commodity_details = ""
+        if commodity_specific:
+            commodity_data = district_data[district_data['commodity'] == commodity]
+            best_market = commodity_data.loc[commodity_data['modal_price'].idxmin()]['market']
+            worst_market = commodity_data.loc[commodity_data['modal_price'].idxmax()]['market']
+            
+            commodity_details = f"""
+            Commodity-specific information for {commodity}:
+            - Best market to buy (lowest price): {best_market}
+            - Highest priced market: {worst_market}
+            - Price variance across markets: {commodity_data['modal_price'].std().round(2)}
+            """
+        
+        # Improved prompt for better structured output with language support
+        prompt = f"""
+        Analyze the following agricultural market data for {district}, {state} and provide insights in {language} language.
+        
+        Market data:
+        - Active markets: {market_competition}
+        - Top crops: {', '.join(top_commodities[:5])}
+        - Data from {len(price_trends.index)} crops and {len(monthly_trends)} monthly entries.
+        
+        Price information:
+        {json.dumps(price_range_info, indent=2)}
+        
+        {market_details}
+        {commodity_details}
+        
+        Analyze this data and provide insights about crop market trends and profitability. 
+        Include specific numbers from the data about prices.
+        
+        Provide structured insights with clear sections. Use this exact format with bullet points:
+        
+        Crop Profitability Analysis:
+        * [First insight about profitable crops with specific prices mentioned]
+        * [Second insight]
+        
+        Market Price Analysis:
+        * [First insight about markets with specific price ranges]
+        * [Second insight]
+        
+        Recommendations for Farmers:
+        * [Action item 1]
+        * [Action item 2]
+        """
+        
+        api_url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent"
+        headers = {"Content-Type": "application/json"}
+        
+        payload = {
+            "contents": [
+                {
+                    "parts": [
+                        {"text": prompt}
+                    ]
+                }
+            ],
+            "generationConfig": {
+                "temperature": 0.4,
+                "maxOutputTokens": 1024
+            }
+        }
+        
+        response = requests.post(
+            f"{api_url}?key={api_key}", 
+            headers=headers, 
+            json=payload, 
+            timeout=20
+        )
+        
+        if response.status_code == 200:
+            response_data = response.json()
+            if 'candidates' in response_data and len(response_data['candidates']) > 0:
+                content = response_data['candidates'][0]['content']
+                if 'parts' in content and len(content['parts']) > 0:
+                    insights = content['parts'][0]['text']
+                    return format_ai_insights(insights, language)
+            print(f"API Response issue: {response.text[:100]}")
+        else:
+            print(f"Gemini API Error: {response.status_code} - {response.text[:100]}")
+        
+        return ""
+    
+    except Exception as e:
+        print(f"Error generating insights: {str(e)}")
+        return ""
+
+def extract_text_from_insights(insights_html):
+    """Extract pure text content from HTML insights for text-to-speech conversion."""
+    # Simple HTML tag removal - for production, consider using BeautifulSoup for better parsing
+    import re
+    text = re.sub(r'<.*?>', ' ', insights_html)
+    text = re.sub(r'\s+', ' ', text)  # Remove extra whitespace
+    return text.strip()
+
+def create_audio_from_text(text, language_code="en"):
+    """Generate audio file from text using gTTS."""
+    if not text:
+        return None
+    
+    # Map UI language selection to gTTS language codes
+    language_map = {
+        "English": "en",
+        "Hindi": "hi",
+        "Tamil": "ta",
+        "Telugu": "te",
+        "Marathi": "mr",
+        "Bengali": "bn",
+        "Gujarati": "gu",
+        "Kannada": "kn", 
+        "Malayalam": "ml",
+        "Punjabi": "pa"
+    }
+    
+    tts_lang = language_map.get(language_code, "en")
+    
+    # Generate unique filename
+    filename = f"{uuid.uuid4()}.mp3"
+    filepath = AUDIO_DIR / filename
+    
+    try:
+        tts = gtts.gTTS(text, lang=tts_lang, slow=False)
+        tts.save(str(filepath))
+        return f"/static/audio/{filename}"
+    except Exception as e:
+        print(f"Error creating audio: {str(e)}")
+        return None
+
+def create_audio_local_fallback(text, language_code="en"):
+    """Local fallback for TTS when network is unavailable."""   
+    try:
+        # This requires pyttsx3 to be installed
+        import pyttsx3
+        engine = pyttsx3.init()
+        
+        # Generate unique filename
+        filename = f"{uuid.uuid4()}.mp3"
+        filepath = AUDIO_DIR / filename
+        
+        engine.save_to_file(text, str(filepath))
+        engine.runAndWait()
+        
+        return f"/static/audio/{filename}"
+    except Exception as e:
+        print(f"Local TTS fallback failed: {str(e)}")
+        return None
+
+def format_ai_insights(insights_data, language="English"):
+    """Format AI insights into structured HTML.
+       Returns an empty string if no valid insights are provided.
+    """
+    if not insights_data or not insights_data.strip():
+        return ""
+    
+    # Process the insights text - each bullet point becomes a formatted item
+    formatted_content = ""
+    
+    # Split by bullet points
+    bullet_points = insights_data.split('*')
+    
+    # Filter out empty items and process each bullet point
+    bullet_points = [point.strip() for point in bullet_points if point.strip()]
+    
+    # Check if any section headers exist in the content
+    sections = {}
+    current_section = "Recommendations"
+    
+    for point in bullet_points:
+        if ":" in point and len(point.split(":")[0]) < 30:  # Likely a section header
+            current_section = point.split(":")[0].strip()
+            # Start a new section
+            if current_section not in sections:
+                sections[current_section] = []
+        else:
+            # Add to current section
+            if current_section not in sections:
+                sections[current_section] = []
+            sections[current_section].append(point)
+    
+    # Now build the HTML with proper sections
+    for section, points in sections.items():
+        formatted_content += f'<div class="insight-card"><h5>{section}</h5><ul class="insight-list">'
+        for point in points:
+            # Highlight prices with special styling
+            if "₹" in point:
+                # Replace price mentions with highlighted spans
+                parts = point.split("₹")
+                styled_point = parts[0]
+                for i in range(1, len(parts)):
+                    # Extract the price value
+                    price_text = parts[i].split()[0]
+                    # Add the highlighted price and the rest of the text
+                    styled_point += f'<span class="price-highlight">₹{price_text}</span>' + parts[i][len(price_text):]
+                formatted_content += f'<li>{styled_point}</li>'
+            else:
+                formatted_content += f'<li>{point}</li>'
+        formatted_content += '</ul></div>'
+    
+    # Create the plain text version for audio generation
+    plain_text = f"Market Insights for {language}.\n\n"
+    for section, points in sections.items():
+        plain_text += f"{section}:\n"
+        for point in points:
+            # Clean up for speech
+            clean_point = point.replace("₹", " rupees ")
+            plain_text += f"• {clean_point}\n"
+        plain_text += "\n"
+    
+    # Generate audio file
+    audio_path = create_audio_from_text(plain_text, language)
+    if audio_path is None:
+        audio_path = create_audio_local_fallback(plain_text)
+    
+    # Add a wrapper for the insights with audio player
+    audio_player = ""
+    if audio_path:
+        audio_player = f"""
+        <div class="audio-player-container">
+            <h4>Listen to Insights</h4>
+            <audio id="insightsAudio" controls>
+                <source src="{audio_path}" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+            <button class="btn btn-sm btn-custom mt-2" id="playAudioBtn">
+                <i class="fa fa-play"></i> Play Audio
+            </button>
+        </div>
+        """
+    
+    html = f"""
+    <div class="insights-header">
+        <h3>AI Market Insights</h3>
+        {audio_player}
+    </div>
+    <div class="insight-section">
+        {formatted_content}
+    </div>
+    """
+    
+    return html
+
+def generate_plots(df):
+    """Generate all plots in English"""
+    if df.empty:
+        return {}, "No data available"
+    
+    price_cols = ['min_price', 'max_price', 'modal_price']
+    for col in price_cols:
+        df[col] = pd.to_numeric(df[col], errors='coerce')
+    
+    colors = ["#4CAF50", "#8BC34A", "#CDDC39", "#FFC107", "#FF5722"]
+    
+    df_bar = df.groupby('commodity')['modal_price'].mean().reset_index()
+    fig_bar = px.bar(df_bar, 
+                     x='commodity', 
+                     y='modal_price',
+                     title="Average Price by Commodity",
+                     color_discrete_sequence=colors)
+    
+    fig_line = None
+    if 'commodity' in df.columns and len(df['commodity'].unique()) == 1:
+        df['arrival_date'] = pd.to_datetime(df['arrival_date'])
+        df_line = df.sort_values('arrival_date')
+        fig_line = px.line(df_line, 
+                          x='arrival_date', 
+                          y='modal_price',
+                          title="Price Trend",
+                          color_discrete_sequence=colors)
+    
+    fig_box = px.box(df, 
+                     x='commodity', 
+                     y='modal_price',
+                     title="Price Distribution",
+                     color='commodity',
+                     color_discrete_sequence=colors)
+    
+    plots = {
+        'bar': pio.to_html(fig_bar, full_html=False),
+        'box': pio.to_html(fig_box, full_html=False)
+    }
+    if fig_line:
+        plots['line'] = pio.to_html(fig_line, full_html=False)
+    
+    return plots
+
+@app.route('/')
+def index():
+    try:
+        initial_data = fetch_market_data()
+        states = sorted(initial_data['state'].dropna().unique()) if not initial_data.empty else []
+    except Exception as e:
+        print(f"Error fetching initial data: {str(e)}")
+        states = []
+    
+    return render_template('index.html', 
+                           states=states,
+                           today=datetime.today().strftime('%Y-%m-%d'))
+
+@app.route('/filter_data', methods=['POST'])
+def filter_data():
+    state = request.form.get('state')
+    district = request.form.get('district')
+    market = request.form.get('market')
+    commodity = request.form.get('commodity')
+    language = request.form.get('language', 'English')  # Default to English
+    
+    df = fetch_market_data(state, district, market, commodity)
+    plots = generate_plots(df)
+    # Pass market and commodity to get_ai_insights
+    insights = get_ai_insights(df, state, district, market, commodity, language) if state and district and not df.empty else ""
+    
+    market_table_html = """
+    <div class="table-responsive">
+        <table class="table table-striped table-bordered">
+            <thead>
+                <tr>
+                    <th>State</th>
+                    <th>District</th>
+                    <th>Market</th>
+                    <th>Commodity</th>
+                    <th>Variety</th>
+                    <th>Grade</th>
+                    <th>Arrival Date</th>
+                    <th>Min Price</th>
+                    <th>Max Price</th>
+                    <th>Modal Price</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+    
+    for _, row in df.iterrows():
+        market_table_html += f"""
+            <tr>
+                <td>{row['state']}</td>
+                <td>{row['district']}</td>
+                <td>{row['market']}</td>
+                <td>{row['commodity']}</td>
+                <td>{row['variety']}</td>
+                <td>{row['grade']}</td>
+                <td>{row['arrival_date']}</td>
+                <td>₹{row['min_price']}</td>
+                <td>₹{row['max_price']}</td>
+                <td>₹{row['modal_price']}</td>
+            </tr>
+        """
+    market_table_html += "</tbody></table></div>"
+
+    cheapest_crops = df.sort_values('modal_price', ascending=True).head(5)
+    cheapest_table_html = """
+    <div class="table-responsive">
+        <table class="table table-sm table-bordered">
+            <thead>
+                <tr>
+                    <th>Commodity</th>
+                    <th>Market</th>
+                    <th>Modal Price</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+    
+    for _, row in cheapest_crops.iterrows():
+        cheapest_table_html += f"""
+            <tr>
+                <td>{row['commodity']}</td>
+                <td>{row['market']}</td>
+                <td>₹{row['modal_price']}</td>
+            </tr>
+        """
+    cheapest_table_html += "</tbody></table></div>"
+
+    costliest_crops = df.sort_values('modal_price', ascending=False).head(5)
+    costliest_table_html = """
+    <div class="table-responsive">
+        <table class="table table-sm table-bordered">
+            <thead>
+                <tr>
+                    <th>Commodity</th>
+                    <th>Market</th>
+                    <th>Modal Price</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+    
+    for _, row in costliest_crops.iterrows():
+        costliest_table_html += f"""
+            <tr>
+                <td>{row['commodity']}</td>
+                <td>{row['market']}</td>
+                <td>₹{row['modal_price']}</td>
+            </tr>
+        """
+    costliest_table_html += "</tbody></table></div>"
+
+    market_stats = {
+        'total_commodities': len(df['commodity'].unique()),
+        'avg_modal_price': f"₹{df['modal_price'].mean():.2f}",
+        'price_range': f"₹{df['modal_price'].min():.2f} - ₹{df['modal_price'].max():.2f}",
+        'total_markets': len(df['market'].unique())
+    }
+
+    response = {
+        'plots': plots,
+        'insights': insights,
+        'success': not df.empty,
+        'hasStateDistrict': bool(state and district),
+        'market_html': market_table_html,
+        'cheapest_html': cheapest_table_html,
+        'costliest_html': costliest_table_html,
+        'market_stats': market_stats
+    }
+    
+    return jsonify(response)
+
+@app.route('/get_districts', methods=['POST'])
+def get_districts():
+    state = request.form.get('state')
+    df = fetch_market_data(state=state)
+    districts = sorted(df['district'].dropna().unique())
+    return jsonify(districts)
+
+@app.route('/get_markets', methods=['POST'])
+def get_markets():
+    district = request.form.get('district')
+    df = fetch_market_data(district=district)
+    markets = sorted(df['market'].dropna().unique())
+    return jsonify(markets)
+
+@app.route('/get_commodities', methods=['POST'])
+def get_commodities():
+    market = request.form.get('market')
+    df = fetch_market_data(market=market)
+    commodities = sorted(df['commodity'].dropna().unique())
+    return jsonify(commodities)
+
+@app.route('/static/audio/<filename>')
+def serve_audio(filename):
+    try:
+        return send_file(f"static/audio/{filename}", mimetype="audio/mpeg")
+    except Exception as e:
+        print(f"Error serving audio file: {str(e)}")
+        return "Audio file not found", 404
+
+if __name__ == '__main__':
+    pio.templates.default = "plotly_white"
+    app.run(debug=True, host='0.0.0.0', port=7860)

templates/index.html

@@ -3,222 +3,785 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crop Financial Market Analysis & Prediction</title>
+    <title>Crop Market Analysis</title>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
+        :root {
+            --primary-color: #4CAF50;
+            --secondary-color: #45a049;
+            --background-color: #f9f9f9;
+            --text-color: #333;
+            --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            --border-radius: 8px;
+        }
+        
         body {
-            background-color: #f9f9f9;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            font-family: 'Arial', sans-serif;
+            line-height: 1.6;
         }
+        
         .container {
-            margin-top: 30px;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
         }
-        h1 {
-            color: #4CAF50;
+        
+        .header {
             text-align: center;
+            margin-bottom: 30px;
+            padding: 20px 0;
+        }
+        
+        .header h1 {
+            color: var(--primary-color);
             font-weight: bold;
+            margin: 0;
+            font-size: 2.5rem;
+        }
+        
+        .form-section {
+            background: white;
+            padding: 25px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--card-shadow);
+            margin-bottom: 30px;
+        }
+        
+        .chart-container {
+            background: white;
+            padding: 25px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--card-shadow);
+            margin-bottom: 30px;
+        }
+        
+        .insights-container {
+            background: white;
+            padding: 25px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--card-shadow);
+            margin-bottom: 30px;
+            border-left: 5px solid var(--primary-color);
+        }
+        
+        .insights-container h3 {
+            color: var(--primary-color);
+            margin-bottom: 20px;
+        }
+        
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: var(--border-radius);
+            box-shadow: var(--card-shadow);
+            z-index: 1000;
+        }
+        
+        .btn-custom {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            transition: background-color 0.3s ease;
+        }
+        
+        .btn-custom:hover {
+            background-color: var(--secondary-color);
+            color: white;
+        }
+        
+        .form-control {
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            padding: 8px 12px;
+            height: auto;
         }
-        .form-row {
+        
+        .form-control:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
+        }
+        
+        label {
+            font-weight: 500;
+            margin-bottom: 8px;
+            color: var(--text-color);
+        }
+        
+        #barChart, #lineChart, #boxChart {
+            width: 100%;
+            margin-bottom: 20px;
+        }
+        
+        #aiInsights {
+            line-height: 1.8;
+            font-size: 1.1rem;
+        }
+        
+        .alert {
+            border-radius: var(--border-radius);
+            padding: 15px 20px;
             margin-bottom: 20px;
         }
-        .table-container {
-            border: 1px solid #4CAF50;
+        
+        .spinner-border {
+            width: 3rem;
+            height: 3rem;
+            color: var(--primary-color);
+        }
+        
+        #marketData {
+            height: 600px;
+            overflow-y: scroll;
+        }
+        
+        .table-responsive{
+            height: 600px;
+        }
+
+        .insights-header {
+            background: #4CAF50;
+            color: white;
+            padding: 15px 20px;
+            border-radius: 8px 8px 0 0;
+            margin: -25px -25px 20px -25px;
+        }
+        
+        .insights-header h3 {
+            margin: 0;
+            color: white;
+        }
+        
+        .insight-section {
+            background: #f8f9fa;
             border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-left: 4px solid #4CAF50;
+        }
+        
+        .insight-section h4 {
+            color: #2E7D32;
+            margin-bottom: 15px;
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+        
+        .insight-card {
+            background: white;
+            border-radius: 6px;
             padding: 15px;
-            background-color: #fff;
-            max-height: 400px;
-            overflow-y: auto;
-            width: 100%;
+            margin-bottom: 15px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
-        .table-container table {
-            width: 100%;
+        
+        .insight-card h5 {
+            color: #1B5E20;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+        }
+        
+        .insight-list {
+            list-style: none;
+            padding-left: 0;
             margin-bottom: 0;
         }
-        .result-section {
-            margin-top: 30px;
+        
+        .insight-list li {
+            position: relative;
+            padding-left: 20px;
+            margin-bottom: 8px;
+            line-height: 1.5;
         }
-        .bordered-table {
-            border: 1px solid #4CAF50;
-            background-color: #fff;
+        
+        .insight-list li:before {
+            content: "•";
+            color: #4CAF50;
+            font-size: 1.2em;
+            position: absolute;
+            left: 0;
+            top: -2px;
         }
-        .bold-header {
+        
+        .price-highlight {
+            color: #2E7D32;
             font-weight: bold;
-            color: #333;
         }
-        th {
-            background-color: #4CAF50;
-            color: white;
+        
+        .percentage-up {
+            color: #2E7D32;
+            font-weight: bold;
         }
-        .chart-container {
-            display: flex;
-            justify-content: space-between;
+        
+        .percentage-down {
+            color: #c62828;
+            font-weight: bold;
+        }
+        
+        .action-box {
+            background: #E8F5E9;
+            border-radius: 6px;
+            padding: 15px;
             margin-top: 20px;
+            border: 1px dashed #4CAF50;
+        }
+        
+        .action-box h5 {
+            color: #2E7D32;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+        }
+        
+        .action-list {
+            list-style: none;
+            padding-left: 0;
+            margin-bottom: 0;
+        }
+        
+        .action-list li {
+            position: relative;
+            padding-left: 25px;
+            margin-bottom: 8px;
+            line-height: 1.5;
+        }
+        
+        .action-list li:before {
+            content: "✓";
+            color: #4CAF50;
+            position: absolute;
+            left: 0;
+            font-weight: bold;
+        }
+        
+        @media (max-width: 768px) {
+            .insights-container {
+                padding: 15px;
+            }
+            
+            .insights-header {
+                padding: 12px 15px;
+                margin: -15px -15px 15px -15px;
+            }
+            
+            .insight-section {
+                padding: 15px;
+            }
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .form-row {
+                flex-direction: column;
+            }
+            
+            .form-group {
+                margin-bottom: 15px;
+            }
+            
+            .btn-custom {
+                width: 100%;
+            }
+            
+            .insights-container {
+                padding: 15px;
+            }
+            
+            #aiInsights {
+                font-size: 1rem;
+            }
+        }
+.language-selector {
+    margin-top: 10px;
+}
+
+.lang-btn {
+    font-size: 0.85rem;
+    padding: 0.25rem 0.5rem;
+    margin: 0 2px;
+    border-radius: 4px;
+}
+
+.lang-btn.active {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.current-language-indicator {
+    font-size: 0.8rem;
+    color: #555;
+    margin: 5px 0 15px 0;
+}
+
+/* For mobile responsiveness */
+@media (max-width: 768px) {
+    .language-selector .btn-group {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .lang-btn {
+        margin: 2px;
+        flex: 0 0 auto;
+    }
+}
+        select {
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+    .audio-player-container {
+        background: #e8f5e9;
+        padding: 12px;
+        border-radius: 8px;
+        margin: 10px 0 0 20px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    
+    .audio-player-container h4 {
+        color: #2E7D32;
+        margin: 0 0 8px 0;
+        font-size: 0.9rem;
+        font-weight: bold;
+    }
+    
+    .audio-player-container audio {
+        height: 35px;
+        vertical-align: middle;
+    }
+    
+    #playAudioBtn {
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        margin-left: 5px;
+        font-size: 0.85em;
+    }
+    
+    #playAudioBtn:hover {
+        background-color: #45a049;
+    }
+    
+    @media (max-width: 768px) {
+        .insights-header {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .audio-player-container {
+            margin: 10px 0 0 0;
+            width: 100%;
+        }
+        
+        .audio-player-container audio {
+            width: 100%;
         }
-        .chart {
-            width: 48%;
+        
+        #playAudioBtn {
+            display: block;
+            width: 100%;
+            margin: 5px 0 0 0;
         }
-    </style>
+    }
+
+    /* Add FontAwesome for play/pause icons */
+    .fa {
+        display: inline-block;
+        font: normal normal normal 14px/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    .fa-play:before {
+        content: "\f04b";
+    }
+    .fa-pause:before {
+        content: "\f04c";
+    }
+</style>
 </head>
 <body>
     <div class="container">
-        <h1>Crop Financial Market Analysis & Prediction</h1>
-        <form id="filterForm">
-            <div class="form-row">
-                <div class="form-group col-md-3">
-                    <label for="state">State</label>
-                    <select class="form-control" id="state" name="state">
-                        <option value="">Select State</option>
-                        {% for state in states %}
-                        <option value="{{ state }}">{{ state }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div class="form-group col-md-3">
-                    <label for="district">District</label>
-                    <select class="form-control" id="district" name="district">
-                        <option value="">Select District</option>
-                    </select>
-                </div>
-                <div class="form-group col-md-3">
-                    <label for="market">Market</label>
-                    <select class="form-control" id="market" name="market">
-                        <option value="">Select Market</option>
-                    </select>
+        <div class="header">
+            <h1>Crop Market Analysis</h1>
+        </div>
+
+        <div class="form-section">
+            <form id="filterForm">
+                <div class="form-row">
+                    <div class="form-group col-md-3">
+                        <label for="state">State</label>
+                        <select class="form-control" id="state" name="state">
+                            <option value="">Select State</option>
+                            {% for state in states %}
+                            <option value="{{ state }}">{{ state }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="form-group col-md-3">
+                        <label for="district">District</label>
+                        <select class="form-control" id="district" name="district" disabled>
+                            <option value="">Select District</option>
+                        </select>
+                    </div>
+                    <div class="form-group col-md-3">
+                        <label for="market">Market</label>
+                        <select class="form-control" id="market" name="market" disabled>
+                            <option value="">Select Market</option>
+                        </select>
+                    </div>
+                    <div class="form-group col-md-3">
+                        <label for="commodity">Commodity</label>
+                        <select class="form-control" id="commodity" name="commodity" disabled>
+                            <option value="">Select Commodity</option>
+                        </select>
+                    </div>
                 </div>
-                <div class="form-group col-md-3">
-                    <label for="commodity">Commodity</label>
-                    <select class="form-control" id="commodity" name="commodity">
-                        <option value="">Select Commodity</option>
-                    </select>
+                <div class="language-selector">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Select Language for AI Insights</h5>
+                            <div class="btn-group" role="group" aria-label="Language selection">
+                                <button type="button" class="btn btn-sm lang-btn active" data-lang="English">English</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Hindi">हिन्दी</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Tamil">தமிழ்</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Telugu">తెలుగు</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Marathi">मराठी</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Bengali">বাংলা</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Gujarati">ગુજરાતી</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Kannada">ಕನ್ನಡ</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Malayalam">മലയാളം</button>
+                                <button type="button" class="btn btn-sm lang-btn" data-lang="Punjabi">ਪੰਜਾਬੀ</button>
+                            </div>
+                            <div class="current-language-indicator mt-2">
+                                Current language: <span id="currentLanguage">English</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+            </form>
+        </div>
+
+        <div class="loading" id="loadingIndicator">
+            <div class="spinner-border" role="status">
+                <span class="sr-only">Loading...</span>
             </div>
-        </form>
-
-        <div class="result-section">
-            <div class="table-container">
-                <h3 class="bold-header">Market Data as of {{ today }}</h3>
-                <div class="bordered-table">
-                    <table class="table table-bordered table-hover">
-                        <thead>
-                            <tr>
-                                <th>State</th>
-                                <th>District</th>
-                                <th>Market</th>
-                                <th>Commodity</th>
-                                <th>Variety</th>
-                                <th>Grade</th>
-                                <th>Arrival Date</th>
-                                <th>Min Price</th>
-                                <th>Max Price</th>
-                                <th>Modal Price</th>
-                            </tr>
-                        </thead>
-                        <tbody id="marketData">
-                            <!-- Market data will be populated here via AJAX -->
-                        </tbody>
-                    </table>
+        </div>
+
+        <div class="chart-container">
+            <div id="barChart"></div>
+            <div id="lineChart"></div>
+            <div id="boxChart"></div>
+        </div>
+        <div class="market-data-container">
+            <div class="row">
+                <div class="col-md-12 mb-4">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4>Market Statistics</h4>
+                        </div>
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-3">
+                                    <div class="stat-item">
+                                        <h6>Total Commodities</h6>
+                                        <span id="totalCommodities"></span>
+                                    </div>
+                                </div>
+                                <div class="col-md-3">
+                                    <div class="stat-item">
+                                        <h6>Average Price</h6>
+                                        <span id="avgPrice"></span>
+                                    </div>
+                                </div>
+                                <div class="col-md-3">
+                                    <div class="stat-item">
+                                        <h6>Price Range</h6>
+                                        <span id="priceRange"></span>
+                                    </div>
+                                </div>
+                                <div class="col-md-3">
+                                    <div class="stat-item">
+                                        <h6>Total Markets</h6>
+                                        <span id="totalMarkets"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <div class="result-section">
-                <h3 class="bold-header">Top 5 Cheapest Crops</h3>
-                <div class="bordered-table">
-                    <table class="table table-bordered table-hover">
-                        <thead>
-                            <tr>
-                                <th>Commodity</th>
-                                <th>Modal Price</th>
-                            </tr>
-                        </thead>
-                        <tbody id="cheapestCrops">
-                            <!-- Cheapest crops data will be populated here -->
-                        </tbody>
-                    </table>
+            <div class="row">
+                <div class="col-md-6 mb-4">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4>Top 5 Cheapest Crops</h4>
+                        </div>
+                        <div class="card-body" id="cheapestCrops">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 mb-4">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4>Top 5 Costliest Crops</h4>
+                        </div>
+                        <div class="card-body" id="costliestCrops">
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <div class="result-section">
-                <h3 class="bold-header">Top 5 Costliest Crops</h3>
-                <div class="bordered-table">
-                    <table class="table table-bordered table-hover">
-                        <thead>
-                            <tr>
-                                <th>Commodity</th>
-                                <th>Modal Price</th>
-                            </tr>
-                        </thead>
-                        <tbody id="costliestCrops">
-                            <!-- Costliest crops data will be populated here -->
-                        </tbody>
-                    </table>
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h4>Market Data</h4>
+                </div>
+                <div class="card-body" id="marketData">
                 </div>
             </div>
         </div>
+        <div class="insights-container">
+            <div id="aiInsights"></div>
+        </div>
     </div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
-        // Fetch districts based on state selection
-        $('#state').change(function() {
-            let state = $(this).val();
+        // Add this to your JavaScript
+        function updateAudioPlayer(audioPath) {
+            if (audioPath) {
+                $('#audioPlayerContainer').show();
+                $('#insightsAudio').attr('src', audioPath);
+            } else {
+                $('#audioPlayerContainer').hide();
+            }
+        }
+        function showLoading() {
+            $('#loadingIndicator').show();
+        }
+
+        function hideLoading() {
+            $('#loadingIndicator').hide();
+        }
+
+        function enableSelect(selectId) {
+            $(`#${selectId}`).prop('disabled', false);
+        }
+
+        function disableSelect(selectId) {
+            $(`#${selectId}`).prop('disabled', true);
+        }
+
+        function updateContent() {
+            showLoading();
+            const formData = new FormData($('#filterForm')[0]);
+
             $.ajax({
-                url: '/get_districts',
+                url: '/filter_data',
                 method: 'POST',
-                data: { state: state },
-                success: function(districts) {
-                    $('#district').empty().append('<option value="">Select District</option>');
-                    districts.forEach(function(district) {
-                        $('#district').append('<option value="' + district + '">' + district + '</option>');
-                    });
+                data: formData,
+                processData: false,
+                contentType: false,
+                success: function(response) {
+                    if (response.success) {
+                        if (response.plots.bar) $('#barChart').html(response.plots.bar);
+                        if (response.plots.line) $('#lineChart').html(response.plots.line);
+                        if (response.plots.box) $('#boxChart').html(response.plots.box);
+                        
+                        $('#totalCommodities').text(response.market_stats.total_commodities);
+                        $('#avgPrice').text(response.market_stats.avg_modal_price);
+                        $('#priceRange').text(response.market_stats.price_range);
+                        $('#totalMarkets').text(response.market_stats.total_markets);
+                        
+                        $('#marketData').html(response.market_html);
+                        $('#cheapestCrops').html(response.cheapest_html);
+                        $('#costliestCrops').html(response.costliest_html);
+                        
+                        if (response.hasStateDistrict) {
+                            $('.insights-container').show();
+                            $('#aiInsights').html(response.insights);
+                        } else {
+                            $('.insights-container').hide();
+                            $('#aiInsights').html('');
+                        }
+                    } else {
+                        alert('Please select both state and district to view analysis');
+                    }
+                    hideLoading();
+                },
+                error: function() {
+                    alert('Error loading data');
+                    hideLoading();
                 }
             });
+        }
+
+        $('#state').change(function() {
+            const state = $(this).val();
+            $('#district, #market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
+            
+            if (state) {
+                showLoading();
+                $.post('/get_districts', { state: state }, function(districts) {
+                    $('#district').html('<option value="">Select District</option>');
+                    districts.forEach(district => {
+                        $('#district').append(`<option value="${district}">${district}</option>`);
+                    });
+                    enableSelect('district');
+                    hideLoading();
+                });
+            }
+            updateContent();
         });
 
-        // Fetch markets based on district selection
         $('#district').change(function() {
-            let district = $(this).val();
-            $.ajax({
-                url: '/get_markets',
-                method: 'POST',
-                data: { district: district },
-                success: function(markets) {
-                    $('#market').empty().append('<option value="">Select Market</option>');
-                    markets.forEach(function(market) {
-                        $('#market').append('<option value="' + market + '">' + market + '</option>');
+            const district = $(this).val();
+            $('#market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
+            
+            if (district) {
+                showLoading();
+                $.post('/get_markets', { district: district }, function(markets) {
+                    $('#market').html('<option value="">Select Market</option>');
+                    markets.forEach(market => {
+                        $('#market').append(`<option value="${market}">${market}</option>`);
                     });
-                }
-            });
+                    enableSelect('market');
+                    hideLoading();
+                });
+            }
+            updateContent();
         });
 
-        // Fetch commodities based on market selection
         $('#market').change(function() {
-            let market = $(this).val();
-            $.ajax({
-                url: '/get_commodities',
-                method: 'POST',
-                data: { market: market },
-                success: function(commodities) {
-                    $('#commodity').empty().append('<option value="">Select Commodity</option>');
-                    commodities.forEach(function(commodity) {
-                        $('#commodity').append('<option value="' + commodity + '">' + commodity + '</option>');
+            const market = $(this).val();
+            $('#commodity').html('<option value="">Select</option>').prop('disabled', true);
+            
+            if (market) {
+                showLoading();
+                $.post('/get_commodities', { market: market }, function(commodities) {
+                    $('#commodity').html('<option value="">Select Commodity</option>');
+                    commodities.forEach(commodity => {
+                        $('#commodity').append(`<option value="${commodity}">${commodity}</option>`);
                     });
-                }
-            });
+                    enableSelect('commodity');
+                    hideLoading();
+                });
+            }
+            updateContent();
         });
 
-        // Filter data and update table upon form change
-        $('#filterForm select').change(function() {
-            let formData = $('#filterForm').serialize();
-            $.ajax({
-                url: '/filter_data',
-                method: 'POST',
-                data: formData,
-                success: function(data) {
-                    $('#marketData').html(data.market_html);
-                    $('#cheapestCrops').html(data.cheapest_html);
-                    $('#costliestCrops').html(data.costliest_html);
-                }
-            });
+        $('#commodity').change(function() {
+            updateContent();
+        });
+
+        $(document).ready(function() {
+            $('.insights-container').hide();
+            updateContent();
         });
+
+// Language handling
+let currentLanguage = "English";
+
+$('.lang-btn').click(function() {
+    $('.lang-btn').removeClass('active');
+    $(this).addClass('active');
+    currentLanguage = $(this).data('lang');
+    $('#currentLanguage').text(currentLanguage);
+    
+    // If state and district are selected, update the content to reflect the new language
+    if ($('#state').val() && $('#district').val()) {
+        updateContent();
+    }
+});
+
+// Modify the updateContent function to include language
+function updateContent() {
+    showLoading();
+    const formData = new FormData($('#filterForm')[0]);
+    
+    // Add language to form data
+    formData.append('language', currentLanguage);
+
+    $.ajax({
+        url: '/filter_data',
+        method: 'POST',
+        data: formData,
+        processData: false,
+        contentType: false,
+        success: function(response) {
+            if (response.success) {
+                if (response.plots.bar) $('#barChart').html(response.plots.bar);
+                if (response.plots.line) $('#lineChart').html(response.plots.line);
+                if (response.plots.box) $('#boxChart').html(response.plots.box);
+                
+                $('#totalCommodities').text(response.market_stats.total_commodities);
+                $('#avgPrice').text(response.market_stats.avg_modal_price);
+                $('#priceRange').text(response.market_stats.price_range);
+                $('#totalMarkets').text(response.market_stats.total_markets);
+                
+                $('#marketData').html(response.market_html);
+                $('#cheapestCrops').html(response.cheapest_html);
+                $('#costliestCrops').html(response.costliest_html);
+                
+                if (response.hasStateDistrict) {
+                    $('.insights-container').show();
+                    $('#aiInsights').html(response.insights);
+                } else {
+                    $('.insights-container').hide();
+                    $('#aiInsights').html('');
+                }
+            } else {
+                alert('Please select both state and district to view analysis');
+            }
+            hideLoading();
+        },
+        error: function() {
+            alert('Error loading data');
+            hideLoading();
+        }
+    });
+}
+// Add this in the <head> section after the jQuery import
+
+$(document).on('click', '#playAudioBtn', function() {
+    const audioPlayer = document.getElementById('insightsAudio');
+    
+    if (audioPlayer) {
+        if (audioPlayer.paused) {
+            audioPlayer.play();
+            $(this).html('<i class="fa fa-pause"></i> Pause Audio');
+        } else {
+            audioPlayer.pause();
+            $(this).html('<i class="fa fa-play"></i> Play Audio');
+        }
+    }
+});
+
+// Reset play button text when audio ends
+$(document).on('ended', '#insightsAudio', function() {
+    $('#playAudioBtn').html('<i class="fa fa-play"></i> Play Audio');
+});
     </script>
+        <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
+
 </body>
 </html>