Deploy Plantoi: Update app, requirements, and model

.gitattributes

@@ -1,3 +1,4 @@
+model/*.h5 filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.webp filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,598 @@
+import os
+import pickle
+import json
+import re
+import numpy as np
+from bytez import Bytez # Import openai
+from flask import Flask, request, jsonify, render_template, session, Response, stream_with_context
+from PIL import Image
+from disease_data import DISEASE_INFO
+from showcase_data import SHOWCASE_DATA
+import io
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing.image import img_to_array
+from werkzeug.utils import secure_filename
+import matplotlib.pyplot as plt
+from matplotlib.gridspec import GridSpec
+import seaborn as sns
+import base64
+from io import BytesIO
+import cv2
+import threading
+
+sdk = Bytez('4d16a7e053afc613fc7f85b460549ef9')
+
+# --- Matplotlib Configuration ---
+plt.switch_backend('Agg')
+
+# --- Configuration ---
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'
+
+# --- Flask App Initialization ---
+app = Flask(__name__)
+app.secret_key = 'plantoi_secret'
+app.config['UPLOAD_FOLDER'] = 'static/uploads'
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# --- AI Model Loading ---
+model = None
+class_indices = None
+class_names = None
+
+def load_ai_models():
+    """Load Keras model and class indices in a background thread."""
+    global model, class_indices, class_names
+    try:
+        print("Loading Keras model in background thread...")
+        model = load_model('model/plant_disease_model_final.h5')
+        with open('data/class_indices.pkl', 'rb') as f:
+            class_indices = pickle.load(f)
+        class_names = {v: k for k, v in class_indices.items()}
+        print("✅ Keras model, class indices, and disease info loaded successfully.")
+    except Exception as e:
+        model = None
+        class_indices = None
+        class_names = None
+        print(f"❌ Error loading Keras model or class indices: {e}")
+
+# Start background loading so the Flask server can start immediately
+loader_thread = threading.Thread(target=load_ai_models, daemon=True)
+loader_thread.start()
+
+# --- Helper Functions ---
+def preprocess_image(image_bytes):
+    try:
+        img = Image.open(io.BytesIO(image_bytes)).convert('RGB')
+        img = img.resize((224, 224))
+        img_array = img_to_array(img)
+        img_array = np.expand_dims(img_array, axis=0)
+        img_array /= 255.0
+        return img_array
+    except Exception as e:
+        print(f"Error in preprocessing image: {e}")
+        return None
+
+def analyze_image_with_moondream(image_bytes):
+    """
+    Analyzes an image using a multimodal model via Bytez Cloud API and returns the raw text response.
+    NOTE: Multimodal support with the native Bytez SDK is not yet directly integrated here.
+    """
+    return "Image analysis using the native Bytez SDK is not yet supported. Please contact support for multimodal model integration."
+
+# --- Flask Routes ---
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/classes')
+def get_model_classes():
+    if class_names:
+        # Use the keys from DISEASE_INFO as the source of truth for display and IDs
+        # This ensures consistency with what the user has defined as the model's output
+        sorted_classes = sorted(list(DISEASE_INFO.keys()))
+        return jsonify(sorted_classes)
+    return jsonify({"error": "Class names not available or model not loaded."}), 500
+
+@app.route('/api/showcase/<path:class_id>')
+def get_showcase_data(class_id):
+    """Returns the showcase data for a specific class."""
+    print(f"Requested Class ID: {class_id}") # Debug print statement as requested
+    data = SHOWCASE_DATA.get(class_id)
+    if data:
+        return jsonify(data)
+    
+    print(f"DEBUG: Failed to find '{class_id}' in SHOWCASE_DATA.")
+    return jsonify({"error": f"Class ID '{class_id}' not found in showcase data."}), 404
+
+@app.route('/diagnose', methods=['POST'])
+def diagnose():
+    if 'file' not in request.files:
+        return jsonify({"error": "No file part in the request. The key should be 'file'."}), 400
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "No selected file."}), 400
+
+    filename = secure_filename(file.filename)
+    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    file.save(filepath)
+    
+    # Store absolute path in session for visualization
+    session['current_img_path'] = os.path.abspath(filepath)
+
+    file.seek(0)
+    image_bytes = file.read()
+
+    if model is None or class_names is None:
+        return jsonify({"error": "AI models are not loaded. Please check server logs."}), 500
+        
+    processed_image = preprocess_image(image_bytes)
+    if processed_image is None:
+        return jsonify({"error": "Failed to preprocess image."}), 400
+        
+    # Step A: Get Prediction & Confidence
+    prediction = model.predict(processed_image)
+    
+    # Store prediction data in session
+    session['last_prediction'] = prediction[0].tolist()
+    session['last_confidence'] = float(np.max(prediction))
+
+    confidence = np.max(prediction)
+    predicted_class_index = np.argmax(prediction)
+    predicted_class_name = class_names.get(predicted_class_index, "Unknown")
+    # Add debugging print statement
+    print(f"DEBUG: Model predicted '{predicted_class_name}' (Confidence: {confidence:.2f})")
+
+    # Step B (Fast Lane)
+    report_data = DISEASE_INFO.get(predicted_class_name)
+    if confidence > 0.55 and report_data:
+        print(f"Fast Lane: Confidence > 55% ({confidence:.2f}). Found '{predicted_class_name}' in DB.")
+        report = {
+            "disease_name": predicted_class_name.replace('___', ' ').replace('_', ' '),
+            "health_status": f"{report_data['status']}. {report_data['description']}",
+            "detailed_symptoms": "\n".join([f"- {s}" for s in report_data['symptoms']]),
+            "prevention_methods": "\n".join([f"- {p}" for p in report_data['prevention']]),
+            "smart_analysis": "Diagnosis from internal knowledge base. High confidence.",
+            "confidence": float(confidence),
+            "source_model": "Keras + DB"
+        }
+        session['last_diagnosis'] = report
+        return jsonify(report)
+    
+    # Step C (Unknown Lane - Simplified)
+    print(f"Unknown Lane: Confidence <= 55% or class not in DB. Using Moondream for text analysis.")
+    ai_text_response = analyze_image_with_moondream(image_bytes)
+    
+    report = {
+        "disease_name": "AI Visual Analysis",
+        "health_status": "See analysis below.",
+        "detailed_symptoms": ai_text_response, # The entire AI response is placed here
+        "prevention_methods": "Please refer to the analysis above.",
+        "smart_analysis": "Analysis provided by Moondream AI. This is a general analysis and may not be as specific as a diagnosis for a known plant type.",
+        "confidence": float(confidence), # Still show Keras confidence for context
+        "source_model": 'Moondream AI' 
+    }
+    
+    session['last_diagnosis'] = report
+    return jsonify(report)
+
+@app.route('/chat', methods=['POST'])
+def chat():
+    user_message = request.json.get('message')
+    if not user_message:
+        return jsonify({'error': 'No message provided'}), 400
+
+    # Initialize chat history in session if it doesn't exist
+    if 'chat_history' not in session:
+        session['chat_history'] = []
+
+    # Retrieve the last diagnosis context from the session
+    last_diagnosis = session.get('last_diagnosis', {})
+    diagnosis_context = ""
+    if last_diagnosis:
+        diagnosis_context = f"""
+        Here is the last plant diagnosis result:
+        Disease Name: {last_diagnosis.get('disease_name', 'N/A')}
+        Health Status: {last_diagnosis.get('health_status', 'N/A')}
+        Detailed Symptoms: {last_diagnosis.get('detailed_symptoms', 'N/A')}
+        Prevention Methods: {last_diagnosis.get('prevention_methods', 'N/A')}
+        Smart Analysis: {last_diagnosis.get('smart_analysis', 'N/A')}
+        Confidence: {last_diagnosis.get('confidence', 'N/A') * 100:.2f}%
+        Source Model: {last_diagnosis.get('source_model', 'N/A')}
+        """
+    
+    # Construct a system message for the AI
+    system_message_content = f"""You are a professional Botanical Expert.
+    Rule 1: If the user asks a simple question (e.g., 'Hi', 'How are you?'), reply with a warm, concise 1-sentence response.
+    Rule 2: If the user asks a technical or complex question, provide a structured response with Headings (##), Bold text for key terms, and Bullet points for steps.
+    Rule 3: Never be too long or too short; maintain a balanced, helpful tone.
+    {diagnosis_context}
+    Please answer the user's question. If the question is related to the diagnosis, use the provided context.
+    If the context is not sufficient, mention that.
+    """
+    
+    # Append user's message to chat history
+    session['chat_history'].append({'role': 'user', 'content': user_message})
+
+    # Create the full messages list to send to Ollama
+    # Ensure system message is always the first.
+    messages_to_send = [{"role": "system", "content": system_message_content}] + session['chat_history'][-10:] # Keep last 10 chat messages
+    
+
+    def generate_bytez_responses():
+        full_ai_response_content = ""
+        model_id = 'avans06/Meta-Llama-3.2-8B-Instruct' # New Bytez model ID
+        print(f"Using Model: {model_id}") # Log model ID
+        try:
+            # Prepare messages as a list of dictionaries with roles for the Bytez SDK
+            # The first message is the system prompt (rules + diagnosis context)
+            messages_for_sdk = [
+                {"role": "system", "content": system_message_content}
+            ]
+            # Append previous chat history messages (excluding the system message already added)
+            for msg in session['chat_history'][-9:]: # Keep last 9 messages + current user message
+                 # Ensure the message role is 'user' or 'assistant'
+                if msg['role'] in ['user', 'assistant']:
+                    messages_for_sdk.append({"role": msg['role'], "content": msg['content']})
+            
+            # Add the current user message as the last entry
+            # The current user_message is already added to session['chat_history'] above,
+            # so it should be included in the loop, or we add the latest one explicitly.
+            # Let's adjust the loop to include up to the current user message.
+            # Re-evaluating the session['chat_history'] logic: it contains ALL messages.
+            # So, `messages_to_send` (which includes system message and relevant history)
+            # is actually better as a base.
+
+            messages_for_sdk = []
+            messages_for_sdk.append({"role": "system", "content": system_message_content})
+            for msg in session['chat_history'][-10:]: # Get last 10 messages from history
+                messages_for_sdk.append({"role": msg['role'], "content": msg['content']})
+            
+            llm_model = sdk.model(model_id)
+            result = llm_model.run(messages_for_sdk) # Pass structured messages directly
+            
+            if result.error: # Check for error in result
+                print(f'Bytez SDK Error: {result.error}')
+                error_msg = f'AI Error: {str(result.error)}' # Capture error as a string
+                yield error_msg.encode('utf-8') # Yield specific error message
+                return # Stop generation on error
+            
+            if isinstance(result.output, dict):
+                content = result.output.get('content', '')
+            else:
+                content = str(result.output) # Extract the string content
+            if content is not None: # Safety check before encoding
+                full_ai_response_content = content
+                yield content.encode('utf-8') # Encode for Flask streaming
+            else:
+                yield "Error: Bytez SDK returned no output.".encode('utf-8')
+
+        except Exception as e:
+            app.logger.error(f"Bytez SDK error in chat: {e}", exc_info=True)
+            yield f"Error: An unexpected error occurred with the Bytez SDK. Details: {e}".encode('utf-8') # Encode error messages too
+        finally:
+            if full_ai_response_content:
+                session['chat_history'].append({'role': 'assistant', 'content': full_ai_response_content})
+            session['chat_history'] = session['chat_history'][-10:]
+
+
+    return Response(stream_with_context(generate_bytez_responses()), mimetype='text/plain')
+
+@app.route('/visualize', methods=['GET'])
+def visualize():
+    # Retrieve the image path from session
+    filepath = session.get('current_img_path', '')
+    
+    if not filepath or filepath == '':
+        return jsonify({"error": "No image has been diagnosed yet."}), 400
+    
+    if not os.path.exists(filepath):
+        return jsonify({"error": "Could not find the diagnosed image file."}), 404
+
+    # --- Retrieve data from session ---
+    prediction = np.array(session.get('last_prediction', []))
+    top_confidence = session.get('last_confidence', 0)
+    predicted_class_index = np.argmax(prediction) if prediction.size > 0 else 0
+    predicted_class_name = class_names.get(predicted_class_index, "Unknown").replace('___', ' ').replace('_', ' ')
+    
+    if prediction.size == 0:
+        return jsonify({"error": "Prediction data not found in session."}), 400
+
+    # --- Advanced Image Processing ---
+    try:
+        img = Image.open(filepath).convert('RGB')
+        img_np = np.array(img)
+        original_height, original_width = img_np.shape[:2]
+        
+        # Define "Healthy Green" as pixels where G > R + 15 and G > B + 15
+        healthy_mask = (img_np[:, :, 1] > img_np[:, :, 0] + 15) & (img_np[:, :, 1] > img_np[:, :, 2] + 15)
+        healthy_pixels = np.sum(healthy_mask)
+        total_pixels = img_np.shape[0] * img_np.shape[1]
+        necrotic_infected_pixels = total_pixels - healthy_pixels
+        
+        healthy_ratio = healthy_pixels / total_pixels if total_pixels > 0 else 0.0
+        necrotic_ratio = necrotic_infected_pixels / total_pixels if total_pixels > 0 else 0.0
+        
+        # Advanced disease region detection using color analysis
+        # Detect brown/yellow regions (common disease indicators)
+        # Convert RGB to BGR for OpenCV, then to HSV
+        img_bgr = cv2.cvtColor(img_np, cv2.COLOR_RGB2BGR)
+        hsv_img = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2HSV)
+        brown_mask = (hsv_img[:, :, 0] >= 10) & (hsv_img[:, :, 0] <= 30) & (hsv_img[:, :, 1] >= 50)
+        yellow_mask = (hsv_img[:, :, 0] >= 20) & (hsv_img[:, :, 0] <= 30) & (hsv_img[:, :, 2] >= 100)
+        disease_regions = np.logical_or(brown_mask, yellow_mask)
+        disease_pixel_ratio = np.sum(disease_regions) / total_pixels if total_pixels > 0 else 0.0
+        
+        # Calculate health score (0-100): based on healthy pixels, confidence, and disease regions
+        is_healthy_class = 'Healthy' in predicted_class_name
+        base_score = healthy_ratio * 100
+        confidence_bonus = top_confidence * 20 if is_healthy_class else 0
+        disease_penalty = disease_pixel_ratio * 30
+        health_score = min(100, max(0, base_score + confidence_bonus - disease_penalty))
+        
+        # Calculate severity level
+        if health_score >= 80:
+            severity = "Low"
+            severity_color = "#22c55e"
+        elif health_score >= 50:
+            severity = "Moderate"
+            severity_color = "#f59e0b"
+        else:
+            severity = "High"
+            severity_color = "#ef4444"
+        
+        # Calculate pigmentation ratios (RGB channel ratios)
+        red_ratio = np.mean(img_np[:, :, 0]) / 255.0
+        green_ratio = np.mean(img_np[:, :, 1]) / 255.0
+        blue_ratio = np.mean(img_np[:, :, 2]) / 255.0
+        
+        # Normalize RGB ratios for pie chart
+        rgb_total = red_ratio + green_ratio + blue_ratio
+        if rgb_total > 0:
+            red_pct = red_ratio / rgb_total
+            green_pct = green_ratio / rgb_total
+            blue_pct = blue_ratio / rgb_total
+        else:
+            red_pct, green_pct, blue_pct = 0.33, 0.33, 0.34
+        
+        # Calculate color variance (pigmentation variation - indicates disease spots)
+        color_variance = np.var(img_np.reshape(-1, 3), axis=0)
+        var_total = np.sum(color_variance)
+        if var_total > 0:
+            var_red = color_variance[0] / var_total
+            var_green = color_variance[1] / var_total
+            var_blue = color_variance[2] / var_total
+        else:
+            var_red, var_green, var_blue = 0.33, 0.33, 0.34
+        
+        # Calculate edge density (diseased leaves often have more defined edges/patterns)
+        # Convert RGB to BGR for OpenCV, then to grayscale
+        img_bgr = cv2.cvtColor(img_np, cv2.COLOR_RGB2BGR)
+        gray = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2GRAY)
+        edges = cv2.Canny(gray, 50, 150)
+        edge_density = np.sum(edges > 0) / total_pixels if total_pixels > 0 else 0.0
+        
+        # Calculate chlorophyll index approximation (healthy leaves have higher green values)
+        chlorophyll_index = green_ratio - 0.3  # Baseline adjustment
+        chlorophyll_index = max(0, min(1, chlorophyll_index))
+
+    except Exception as e:
+        print(f"Error during pixel analysis: {e}")
+        healthy_ratio, necrotic_ratio = 0.5, 0.5
+        disease_pixel_ratio = 0.3
+        health_score = 50.0
+        severity = "Unknown"
+        severity_color = "#6b7280"
+        red_pct, green_pct, blue_pct = 0.33, 0.33, 0.34
+        var_red, var_green, var_blue = 0.33, 0.33, 0.34
+        edge_density = 0.1
+        chlorophyll_index = 0.5
+        img_np = np.zeros((224, 224, 3), dtype=np.uint8)
+
+    # --- Premium Plotting Engine ---
+    try:
+        plt.style.use('dark_background')
+        sns.set_palette("husl")
+        fig = plt.figure(figsize=(20, 12), dpi=150)
+        fig.patch.set_alpha(0.0)
+        fig.suptitle('Plant Health Analysis Dashboard', color='white', fontsize=20, fontweight='bold', y=0.98)
+        
+        # Create a 2x3 grid layout
+        gs = GridSpec(2, 2, figure=fig, hspace=0.6, wspace=0.4, left=0.08, right=0.92, top=0.92, bottom=0.08)
+
+        # Chart 1: Health Metrics Analysis (Top Left)
+        ax1 = fig.add_subplot(gs[0, 0])
+        ax1.set_facecolor('none')
+        
+        # Create severity indicators with visual bars
+        metrics = [
+            ('Healthy Tissue', healthy_ratio * 100, '#22c55e'),
+            ('Disease Regions', disease_pixel_ratio * 100, '#ef4444'),
+            ('Necrotic Areas', necrotic_ratio * 100, '#dc2626'),
+            ('Edge Density', edge_density * 100, '#8b5cf6'),
+            ('Chlorophyll Index', chlorophyll_index * 100, '#10b981')
+        ]
+        
+        y_pos = np.arange(len(metrics))
+        bars = ax1.barh(y_pos, [m[1] for m in metrics], color=[m[2] for m in metrics], 
+                        alpha=0.8, edgecolor='white', linewidth=1.5, height=0.6)
+        ax1.set_yticks(y_pos)
+        ax1.set_yticklabels([m[0] for m in metrics], color='white', fontsize=10, fontweight='bold')
+        ax1.set_xlabel('Percentage (%)', color='white', fontweight='bold', fontsize=11)
+        ax1.set_title('Health Metrics Analysis', color='white', fontweight='bold', fontsize=13, pad=10)
+        ax1.set_xlim(0, 100)
+        ax1.tick_params(axis='x', colors='white')
+        ax1.grid(True, alpha=0.2, color='white', axis='x')
+        
+        # Add value labels
+        for bar, val in zip(bars, [m[1] for m in metrics]):
+            width = bar.get_width()
+            ax1.text(width + 2, bar.get_y() + bar.get_height()/2, f'{val:.1f}%',
+                    ha='left', va='center', color='white', fontsize=9, fontweight='bold')
+
+        # Chart 2: Color Variance Heatmap (Top Center)
+        ax2 = fig.add_subplot(gs[0, 1])
+        ax2.set_facecolor('none')
+        # Create a color variance map
+        if img_np.shape[0] > 0 and img_np.shape[1] > 0:
+            # Calculate local variance in a grid
+            grid_size = 20
+            h_step = max(1, img_np.shape[0] // grid_size)
+            w_step = max(1, img_np.shape[1] // grid_size)
+            variance_map = np.zeros((grid_size, grid_size))
+            
+            for i in range(grid_size):
+                for j in range(grid_size):
+                    y_start, y_end = i * h_step, min((i + 1) * h_step, img_np.shape[0])
+                    x_start, x_end = j * w_step, min((j + 1) * w_step, img_np.shape[1])
+                    region = img_np[y_start:y_end, x_start:x_end]
+                    if region.size > 0:
+                        variance_map[i, j] = np.var(region)
+            
+            im = ax2.imshow(variance_map, cmap='RdYlGn_r', aspect='auto', interpolation='bilinear')
+            ax2.set_title('Color Variance Heatmap\n(Disease Hotspots)', color='white', fontweight='bold', fontsize=12, pad=10)
+            ax2.set_xlabel('Horizontal Position', color='white', fontsize=10)
+            ax2.set_ylabel('Vertical Position', color='white', fontsize=10)
+            ax2.tick_params(colors='white', labelsize=8)
+            plt.colorbar(im, ax=ax2, label='Variance', pad=0.02)
+
+
+
+        # Chart 4: Tissue Health Composition (Bottom Left)
+        ax4 = fig.add_subplot(gs[1, 0])
+        ax4.set_facecolor('none')
+        # Enhanced pie chart with donut style
+        sizes = [healthy_ratio * 100, disease_pixel_ratio * 100, necrotic_ratio * 100]
+        labels = ['Healthy', 'Disease Regions', 'Necrotic']
+        colors_pie = ['#22c55e', '#f59e0b', '#ef4444']
+        explode = (0.05, 0.05, 0.05)
+        
+        wedges, texts, autotexts = ax4.pie(sizes, labels=labels, colors=colors_pie, autopct='%1.1f%%',
+                                           startangle=90, explode=explode, shadow=True,
+                                           textprops={'color': 'white', 'weight': 'bold', 'fontsize': 10},
+                                           wedgeprops=dict(width=0.5, edgecolor='white', linewidth=2))
+        ax4.set_title('Tissue Health Composition', color='white', fontweight='bold', fontsize=12, pad=10)
+
+        # Chart 5: Spider Web Chart - Plant Health Risk Classification (Bottom Center & Right)
+        ax5 = fig.add_subplot(gs[1, 1], projection='polar')
+        ax5.set_facecolor('none')
+        ax5.patch.set_alpha(0.0)
+        
+        # Calculate risk level based on multiple factors
+        # Factors for risk assessment
+        factors = {
+            'Health Score': health_score,
+            'Disease Coverage': 100 - (disease_pixel_ratio * 100),
+            'Chlorophyll': chlorophyll_index * 100,
+            'Tissue Integrity': healthy_ratio * 100,
+            'Disease Severity': 100 - (necrotic_ratio * 100),
+            'Recovery Potential': max(0, 100 - (disease_pixel_ratio * 100) - (necrotic_ratio * 100))
+        }
+        
+        # Determine overall risk category
+        avg_health = np.mean(list(factors.values()))
+        if avg_health >= 80:
+            risk_category = "Can Improve"
+            risk_color = '#22c55e'
+            risk_level = 1  # Low risk
+        elif avg_health >= 60:
+            risk_category = "Stable / Less Dangerous"
+            risk_color = '#f59e0b'
+            risk_level = 2  # Moderate risk
+        elif avg_health >= 30:
+            risk_category = "Extremely Dangerous"
+            risk_color = '#ef4444'
+            risk_level = 3  # High risk
+        else:
+            risk_category = "Totally Dead Plant"
+            risk_color = '#7f1d1d'
+            risk_level = 4  # Critical risk
+        
+        # Prepare data for radar chart
+        categories = list(factors.keys())
+        values = list(factors.values())
+        N = len(categories)
+        
+        # Compute angle for each category
+        angles = [n / float(N) * 2 * np.pi for n in range(N)]
+        angles += angles[:1]  # Complete the circle
+        values += values[:1]
+        
+        # Plot the spider web
+        ax5.plot(angles, values, 'o-', linewidth=3, color=risk_color, alpha=0.8, label='Current Status')
+        ax5.fill(angles, values, alpha=0.25, color=risk_color)
+        
+        # Add reference zones for different risk levels
+        # Zone 1: Can Improve (green zone - 80-100)
+        zone1_angles = np.linspace(0, 2*np.pi, 100)
+        zone1_values = [80] * 100
+        ax5.plot(zone1_angles, zone1_values, '--', linewidth=1, color='#22c55e', alpha=0.3, label='Can Improve (80+)')
+        ax5.fill_between(zone1_angles, [80]*100, [100]*100, alpha=0.1, color='#22c55e')
+        
+        # Zone 2: Stable (yellow zone - 60-80)
+        zone2_values = [60] * 100
+        ax5.plot(zone1_angles, zone2_values, '--', linewidth=1, color='#f59e0b', alpha=0.3, label='Stable (60-80)')
+        ax5.fill_between(zone1_angles, [60]*100, [80]*100, alpha=0.1, color='#f59e0b')
+        
+        # Zone 3: Dangerous (red zone - 30-60)
+        zone3_values = [30] * 100
+        ax5.plot(zone1_angles, zone3_values, '--', linewidth=1, color='#ef4444', alpha=0.3, label='Dangerous (30-60)')
+        ax5.fill_between(zone1_angles, [30]*100, [60]*100, alpha=0.1, color='#ef4444')
+        
+        # Zone 4: Dead (dark red zone - 0-30)
+        ax5.fill_between(zone1_angles, [0]*100, [30]*100, alpha=0.1, color='#7f1d1d', label='Dead (0-30)')
+        
+        # Set labels
+        ax5.set_xticks(angles[:-1])
+        ax5.set_xticklabels(categories, color='white', fontsize=10, fontweight='bold')
+        ax5.set_ylim(0, 100)
+        ax5.set_yticks([25, 50, 75, 100])
+        ax5.set_yticklabels(['25', '50', '75', '100'], color='white', fontsize=8)
+        ax5.grid(True, linestyle='--', linewidth=1, alpha=0.3, color='white')
+        ax5.set_theta_offset(np.pi / 2)
+        ax5.set_theta_direction(-1)
+        
+        # Add title with risk category
+        ax5.set_title(f'Plant Health Risk Assessment\nStatus: {risk_category}', 
+                     color=risk_color, fontweight='bold', fontsize=14, pad=20)
+        
+        # Add legend
+        ax5.legend(loc='upper right', bbox_to_anchor=(1.05, 1), 
+                  facecolor='#141c2e', edgecolor='white', labelcolor='white', fontsize=8)
+        
+        # Add value labels on the spider web
+        for angle, value, category in zip(angles[:-1], values[:-1], categories):
+            ax5.text(angle, value + 5, f'{value:.0f}%', 
+                    ha='center', va='center', color='white', 
+                    fontsize=9, fontweight='bold', bbox=dict(boxstyle='round,pad=0.3', 
+                    facecolor=risk_color, alpha=0.7, edgecolor='white', linewidth=1))
+        
+        # Add diagnosis info text at the bottom
+        diagnosis_text = f"Diagnosis: {predicted_class_name[:40]} | Confidence: {top_confidence*100:.1f}% | Model: Keras CNN"
+        fig.text(0.5, 0.01, diagnosis_text, ha='center', va='bottom', 
+                color='white', fontsize=10, style='italic', alpha=0.8)
+        
+        # --- Save to Buffer and Return ---
+        buf = BytesIO()
+        fig.savefig(buf, format='png', transparent=True, dpi=120, bbox_inches='tight')
+        buf.seek(0)
+        
+        img_b64 = base64.b64encode(buf.getvalue()).decode('utf-8')
+        graph_url = f"data:image/png;base64,{img_b64}"
+        
+        plt.close(fig)  # Close figure to free memory
+        
+        return jsonify({"graph": graph_url})
+    
+    except Exception as e:
+        print(f"Error during visualization generation: {e}")
+        import traceback
+        traceback.print_exc()
+        # Ensure any open figures are closed
+        plt.close('all')
+        return jsonify({"error": f"Failed to generate visualization: {str(e)}"}), 500
+
+# --- Main Execution ---
+if __name__ == '__main__':
+    # Disable the auto-reloader to avoid double-importing heavy ML libraries
+    app.run(host='0.0.0.0', port=7860, debug=False, use_reloader=False)

disease_data.py

@@ -0,0 +1,546 @@
+# --- Master Disease Dictionary ---
+DISEASE_INFO = {
+    'Apple Apple Scab': {
+        'status': 'Infected',
+        'description': 'Apple Scab is a common fungal disease that affects apple and crabapple trees. It is caused by the fungus Venturia inaequalis, which thrives in cool, wet spring weather, leading to cosmetic blemishes and potential defoliation.',
+        'symptoms': [
+            'Olive-green or brown spots on leaves, which may become velvety.',
+            'Infected leaves can become twisted, puckered, and may drop prematurely.',
+            'Dark, scabby spots on fruit, which can crack and become deformed.',
+            'Blossom infections can lead to fruit not developing.'
+        ],
+        'prevention': [
+            'Plant scab-resistant apple varieties whenever possible.',
+            'Rake and destroy fallen leaves in autumn to reduce the amount of overwintering fungus.',
+            'Prune trees annually to improve air circulation and allow foliage to dry faster.',
+            'Apply appropriate fungicides during the critical period from bud break until dry weather is consistent.'
+        ]
+    },
+    'Apple Apple Black rot': {
+        'status': 'Infected',
+        'description': 'Black Rot is a serious fungal disease of apple trees, caused by Botryosphaeria obtusa. It can infect the fruit, leaves, and branches, often gaining entry through wounds from insects, hail, or pruning.',
+        'symptoms': [
+            'A firm, brown rot on fruit that enlarges and turns black, often showing concentric rings.',
+            'Infected fruit may shrivel into "mummies" that remain on the tree.',
+            'Purple spots on leaves that enlarge into a "frogeye" pattern with a tan center.',
+            'Sunken, reddish-brown cankers on branches can girdle and kill them.'
+        ],
+        'prevention': [
+            'Prune out dead or cankered wood during winter dormancy.',
+            'Remove and destroy all mummified fruit to reduce fungal spores.',
+            'Control insects and other pests to prevent wounds that allow fungal entry.',
+            'Apply fungicides as part of a comprehensive disease management program.'
+        ]
+    },
+    'Apple Cedar apple rust': {
+        'status': 'Infected',
+        'description': 'Cedar Apple Rust is a fungal disease caused by Gymnosporangium juniperi-virginianae. It has a complex life cycle that requires both an apple or crabapple and an Eastern Red Cedar (or juniper) to survive.',
+        'symptoms': [
+            'Bright, orange-yellow spots on apple leaves, often with a reddish border.',
+            'Tiny black dots appear in the center of the leaf spots, followed by small, tube-like structures on the underside.',
+            'Orange, rust-colored lesions on the fruit, typically near the calyx end.',
+            'On the cedar host, brown, woody galls form and produce orange, gelatinous "horns" in the spring.'
+        ],
+        'prevention': [
+            'Remove nearby Eastern Red Cedar trees, which are the alternate host (if feasible).',
+            'Choose apple varieties that are resistant to rust diseases.',
+            'Apply fungicides to protect apple trees during the infection period, from pink bud stage through early summer.',
+            'Prune and destroy cedar galls before they produce spores.'
+        ]
+    },
+    'Apple Apple Healthy': {
+        'status': 'Healthy',
+        'description': 'The plant exhibits strong, vibrant foliage and shows no signs of fungal, bacterial, or viral distress. Its structure is sound and development appears normal for the current season.',
+        'symptoms': [
+            'Leaves are a uniform green color without spots, lesions, or yellowing.',
+            'Stems and branches are free of cankers, galls, or discoloration.',
+            'There is no sign of wilting, distortion, or premature leaf drop.'
+        ],
+        'prevention': [
+            'Continue a regimen of proper watering to avoid stress.',
+            'Ensure the plant receives adequate sunlight and balanced nutrition.',
+            'Regularly monitor for early signs of pests or disease.',
+            'Maintain good air circulation through proper spacing and pruning.'
+        ]
+    },
+    'Cherry Cherry Powdery mildew': {
+        'status': 'Infected',
+        'description': 'Powdery Mildew on cherry trees is caused by the fungus Podosphaera clandestina. The disease is favored by high humidity and moderate temperatures, affecting leaves, shoots, and fruit.',
+        'symptoms': [
+            'White, talcum-powder-like patches of fungal growth on leaves and shoots.',
+            'Infected leaves may become distorted, curl upwards, and drop prematurely.',
+            'Young, developing fruit can be infected, leading to russeting and misshapen cherries.',
+            'New shoots may be stunted and covered in the white mildew.'
+        ],
+        'prevention': [
+            'Prune trees to promote good air circulation, which helps reduce humidity within the canopy.',
+            'Avoid excessive nitrogen fertilization, as it encourages susceptible new growth.',
+            'Apply fungicides, sulfur, or horticultural oils when conditions are favorable for disease development.',
+            'Remove and destroy heavily infected shoots during dormant pruning.'
+        ]
+    },
+    'Cherry Cherry Healthy': {
+        'status': 'Healthy',
+        'description': 'The cherry tree is in excellent health, showing vigorous growth appropriate for the season. The leaves are glossy and green, with no signs of mildew, shot hole, or other common ailments.',
+        'symptoms': [
+            'Foliage is full, with a deep green color and no spots or powdery residue.',
+            'Branches are strong and free from cankers or gummy ooze.',
+            'Fruit is developing normally without blemishes or deformities.'
+        ],
+        'prevention': [
+            'Protect the trunk from mechanical injury and sunscald.',
+            'Ensure the tree is watered deeply but infrequently to encourage deep roots.',
+            'Netting may be required to protect ripening fruit from birds.',
+            'Apply dormant oil sprays to control overwintering pests.'
+        ]
+    },
+    'Corn Corn Gray leaf spot': {
+        'status': 'Infected',
+        'description': 'Gray Leaf Spot, caused by the fungus Cercospora zeae-maydis, is a major yield-limiting disease of corn. It thrives in warm, humid conditions and survives in corn residue, making it a persistent threat.',
+        'symptoms': [
+            'Initial symptoms are small, tan, rectangular lesions confined by leaf veins.',
+            'Lesions mature into long (2-4 inches), narrow, grayish-tan, rectangular streaks.',
+            'Severe infections can cause the lesions to merge, blighting entire leaves.',
+            'Symptoms typically begin on lower leaves and progress up the plant.'
+        ],
+        'prevention': [
+            'Select corn hybrids with a high tolerance or resistance rating to Gray Leaf Spot.',
+            'Use crop rotation with non-host crops like soybeans or alfalfa to reduce inoculum levels.',
+            'Manage crop residue with tillage where feasible to break down the fungal host material.',
+            'Apply a foliar fungicide between the tasseling and early silking stages if disease is present.'
+        ]
+    },
+    'Corn Corn Common rust': {
+        'status': 'Infected',
+        'description': 'Common Rust in corn is caused by the fungus Puccinia sorghi. While it can look dramatic, it typically develops late in the season and often has a minor impact on yield compared to other diseases.',
+        'symptoms': [
+            'Small, oval, cinnamon-brown pustules erupt on both upper and lower leaf surfaces.',
+            'Pustules are scattered across the leaf rather than being grouped in bands.',
+            'If you rub a pustule, a reddish-brown, powdery substance (spores) will come off on your finger.',
+            'In severe cases, leaves can yellow and die prematurely.'
+        ],
+        'prevention': [
+            'Most modern corn hybrids have good genetic resistance to Common Rust.',
+            'Fungicide applications are rarely economically justified for Common Rust alone.',
+            'Planting early can help the crop mature before rust becomes severe.',
+            'Monitor fields, but distinguish from the more aggressive Southern Rust.'
+        ]
+    },
+    'Corn Corn Northern Leaf Blight': {
+        'status': 'Infected',
+        'description': 'Northern Leaf Blight (NLB) is a significant fungal disease in corn, caused by Exserohilum turcicum. It is favored by high humidity and moderate temperatures and can cause substantial yield loss.',
+        'symptoms': [
+            'Large, distinctive, cigar-shaped lesions on the leaves, typically 1 to 7 inches long.',
+            'Lesions are tan or grayish-green and can contain dark, fuzzy areas of sporulation.',
+            'The disease typically starts on lower leaves and progresses upwards.',
+            'Severe infections can cause entire leaves to be blighted, reducing photosynthetic capacity.'
+        ],
+        'prevention': [
+            'Planting corn hybrids with genetic resistance to NLB is the most effective management strategy.',
+            'Crop rotation and tillage can help reduce the amount of fungal inoculum in crop residue.',
+            'Foliar fungicides can be effective if applied preventatively or at the first sign of disease.',
+            'Avoid dense planting to promote better air circulation.'
+        ]
+    },
+    'Corn Corn Healthy': {
+        'status': 'Healthy',
+        'description': 'The corn plant is developing well, with a strong stalk and vibrant, green leaves. There are no signs of the lesions, pustules, or discoloration associated with common corn diseases.',
+        'symptoms': [
+            'Leaves are broad, uniformly green, and free of spots or streaks.',
+            'The stalk is sturdy and shows no signs of rot or weakness.',
+            'Growth is vigorous and on track for the current stage of development.'
+        ],
+        'prevention': [
+            'Ensure a balanced fertility program, especially with adequate nitrogen.',
+            'Maintain proper soil moisture through irrigation or rainfall.',
+            'Scout regularly for common pests like corn earworm or stalk borer.',
+            'Control weeds to reduce competition for light, water, and nutrients.'
+        ]
+    },
+    'Grape Grape Black rot': {
+        'status': 'Infected',
+        'description': 'Black Rot, caused by the fungus Guignardia bidwellii, is one of the most destructive diseases of grapes, especially in warm, humid climates. It can infect all green parts of the plant, but is most damaging to the fruit.',
+        'symptoms': [
+            'Small, reddish-brown, circular lesions on leaves that develop black dots (pycnidia) in the center.',
+            'Elongated, black lesions on shoots and tendrils.',
+            'Infected berries develop a soft, brown spot, then turn black and shrivel into hard, wrinkled "mummies".',
+            'The entire grape cluster can be destroyed in a matter of days.'
+        ],
+        'prevention': [
+            'Choose grape cultivars that are less susceptible to Black Rot.',
+            'Practice diligent sanitation: remove and destroy all mummified fruit and infected canes during dormant pruning.',
+            'Promote good air circulation with proper pruning, training, and leaf removal.',
+            'Apply fungicides on a preventative schedule, starting before bloom and continuing through the growing season.'
+        ]
+    },
+    'Grape Grape Black Measles': {
+        'status': 'Infected',
+        'description': 'Esca, also known as Black Measles, is a complex and destructive fungal trunk disease of grapevines. It is caused by a group of fungi that decay the wood, leading to a range of external symptoms.',
+        'symptoms': [
+            'On leaves of white varieties, chlorotic spots appear between veins; on red varieties, spots are red, creating a "tiger-stripe" pattern.',
+            'Small, dark purple spots or specks appear on the grape berries, resembling measles.',
+            'In hot weather, a portion of the vine or the entire plant may suddenly wilt and die (apoplexy).',
+            'Cross-sections of infected trunks reveal a central area of soft, spongy, decayed wood.'
+        ],
+        'prevention': [
+            'There is no cure; management focuses on preventing new infections.',
+            'Protect large pruning wounds with a sealant to block fungal entry.',
+            'Delay pruning until late winter or early spring to allow wounds to heal faster.',
+            'Remove and destroy severely symptomatic vines to reduce the spread of spores.'
+        ]
+    },
+    'Grape Grape Isariopsis Leaf Spot': {
+        'status': 'Infected',
+        'description': 'Grape Leaf Blight, also known as Isariopsis Leaf Spot, is a fungal disease caused by Pseudocercospora vitis. While generally less damaging than Black Rot, it can cause premature defoliation in severe cases.',
+        'symptoms': [
+            'Irregularly shaped, dark brown or black lesions on the upper surface of mature leaves.',
+            'The center of the lesions may become lighter in color as they age.',
+            'On the underside of the leaf, a grayish, fuzzy mold (fungal spores) may be visible.',
+            'Infected leaves may eventually yellow and drop, exposing fruit to sunscald.'
+        ],
+        'prevention': [
+            'Rake and destroy fallen leaves to reduce overwintering inoculum.',
+            'Improve air circulation within the vine canopy through proper pruning techniques.',
+            'Most fungicide spray programs aimed at controlling Black Rot or Downy Mildew will also manage Leaf Blight.',
+            'Ensure vines are not overly stressed by drought or nutrient deficiencies.'
+        ]
+    },
+    'Grape Grape Healthy': {
+        'status': 'Healthy',
+        'description': 'The grapevine is in excellent condition, with a full canopy of healthy leaves and developing fruit clusters. There are no signs of the spots, blights, or rots that commonly affect grapes.',
+        'symptoms': [
+            'Leaves are fully expanded, uniformly green, and free of lesions or powdery growth.',
+            'Shoots are growing vigorously, and canes are a healthy brown color.',
+            'Fruit clusters are developing well without any signs of berry shrivel or rot.'
+        ],
+        'prevention': [
+            'Continue with a preventative fungicide spray schedule as recommended for your region.',
+            'Perform timely canopy management, such as shoot positioning and leaf pulling.',
+            'Monitor for insect pests like grape berry moth, Japanese beetles, and spotted wing drosophila.',
+            'Maintain proper irrigation and soil nutrient levels.'
+        ]
+    },
+    'Citrus Citrus Black spot': {
+        'status': 'Infected',
+        'description': 'A fungal disease causing cosmetic damage to citrus fruit.',
+        'symptoms': ['Small, hard, black, circular spots on fruit rind.'],
+        'prevention': ['Apply fungicides to protect fruit.', 'Manage leaf litter.']
+    },
+    'Citrus Citrus canker': {
+        'status': 'Infected',
+        'description': 'A highly contagious bacterial disease causing lesions on leaves, stems, and fruit.',
+        'symptoms': ['Raised, corky lesions, often surrounded by a yellow halo.'],
+        'prevention': ['Strict quarantine and eradication are primary controls.', 'Use windbreaks and copper-based bactericides.']
+    },
+    'Citrus Citrus greening': {
+        'status': 'Infected',
+        'description': 'Also known as Huanglongbing (HLB), one of the most destructive diseases of citrus, transmitted by the Asian citrus psyllid.',
+        'symptoms': ['Blotchy, mottled leaves (asymmetrical yellowing).', 'Fruit that is small, lopsided, and poorly colored.', 'Leads to rapid tree decline and death.'],
+        'prevention': ['Aggressive control of the psyllid vector.', 'Removal of infected trees.', 'Planting disease-free nursery stock.']
+    },
+    'Citrus Citrus Healthy': {
+        'status': 'Healthy',
+        'description': 'The citrus tree appears healthy.',
+        'symptoms': ['No abnormalities observed.'],
+        'prevention': ['Monitor for pests.', 'Provide appropriate fertilizer and good drainage.']
+    },
+    'Peach Peach Bacterial spot': {
+        'status': 'Infected',
+        'description': 'Bacterial Spot, caused by the bacterium Xanthomonas arboricola pv. pruni, is a major disease of peaches, nectarines, and plums. It is most severe in regions with warm, wet, and windy spring weather.',
+        'symptoms': [
+            'Angular, water-soaked spots on leaves that turn purple and then brown; the centers may fall out, creating a "shot-hole" appearance.',
+            'Severe leaf spotting leads to yellowing and premature defoliation, weakening the tree.',
+            'Small, circular, pitted spots on the fruit surface, which can crack as the fruit expands.',
+            'Twig cankers can form on new shoots, serving as an overwintering site for the bacteria.'
+        ],
+        'prevention': [
+            'Plant peach varieties with higher resistance to Bacterial Spot.',
+            'Avoid planting in sandy soils, which can increase stress and susceptibility.',
+            'Apply bactericides (such as copper-based products) from petal fall through the summer.',
+            'Maintain tree vigor with proper fertilization and irrigation.'
+        ]
+    },
+    'Peach Peach Healthy': {
+        'status': 'Healthy',
+        'description': 'The peach tree is exhibiting excellent health, with a full canopy of vibrant leaves and no signs of bacterial diseases or fungal issues like leaf curl. Fruit is developing well for the current season.',
+        'symptoms': [
+            'Leaves are a healthy green, without any spots, curling, or shot-hole patterns.',
+            'Twigs and branches are free of cankers or gummy ooze.',
+            'Fruit is smooth and free of spots or cracks.'
+        ],
+        'prevention': [
+            'Apply a preventative dormant season fungicide spray to control peach leaf curl.',
+            'Implement a consistent spray schedule during the growing season to manage brown rot and other pests.',
+            'Properly thin fruit to encourage larger size and reduce disease spread.',
+            'Protect the lower trunk from borers and mechanical damage.'
+        ]
+    },
+    'Bell pepper Bell pepper Bacterial spot': {
+        'status': 'Infected',
+        'description': 'Bacterial Spot on bell peppers is caused by several species of Xanthomonas bacteria. The disease thrives in warm, humid conditions and is easily spread by splashing water from rain or overhead irrigation.',
+        'symptoms': [
+            'Small, water-soaked spots on leaves that become dark brown or black and feel greasy.',
+            'Infected leaves may turn yellow and drop from the plant, exposing fruit to sunscald.',
+            'Raised, scab-like spots or cracks can form on the fruit, making them unmarketable.',
+            'Stem lesions can also occur, appearing as dark, elongated streaks.'
+        ],
+        'prevention': [
+            'Start with certified, disease-free seeds and transplants.',
+            'Rotate crops, avoiding planting peppers or tomatoes in the same location for at least a year.',
+            'Use mulch and avoid overhead watering to prevent soil splash.',
+            'Apply copper-based bactericides as a preventative measure, especially before periods of rain.'
+        ]
+    },
+    'Bell pepper Bell pepper Healthy': {
+        'status': 'Healthy',
+        'description': 'The bell pepper plant is healthy and productive, with strong stems, green leaves, and developing fruit. It shows no signs of the spots, wilting, or stunting associated with common pepper diseases.',
+        'symptoms': [
+            'Leaves are a uniform, deep green color.',
+            'The plant is upright and shows no signs of wilting.',
+            'Flowers and fruit are developing normally without any spots or rot.'
+        ],
+        'prevention': [
+            'Provide consistent watering and a balanced fertilizer to avoid stress.',
+            'Stake or cage plants to keep them upright and improve air circulation.',
+            'Monitor for common pests such as aphids, which can transmit viruses.',
+            'Ensure the soil is well-drained to prevent root rot.'
+        ]
+    },
+    'Potato Potato Early blight': {
+        'status': 'Infected',
+        'description': 'Early Blight is a common fungal disease of potatoes and tomatoes caused by Alternaria solani. It typically appears earlier in the season than Late Blight and is favored by warm, humid weather.',
+        'symptoms': [
+            'Dark brown to black spots on lower, older leaves, often with a characteristic "target" or "bullseye" pattern of concentric rings.',
+            'A yellow halo frequently surrounds the lesions.',
+            'Severe infections cause leaves to yellow and die, reducing yield.',
+            'Tubers can be infected, showing dark, sunken, circular lesions on the surface.'
+        ],
+        'prevention': [
+            'Use certified, disease-free seed potatoes.',
+            'Rotate crops with non-susceptible plants for at least two years.',
+            'Maintain plant vigor with adequate nutrition and water, as stressed plants are more susceptible.',
+            'Apply fungicides preventatively, especially when weather conditions are favorable for disease.'
+        ]
+    },
+    'Potato Potato Late blight': {
+        'status': 'Infected',
+        'description': 'Late Blight, caused by the water mold Phytophthora infestans, is a highly destructive disease of potatoes and tomatoes. It spreads rapidly in cool, moist conditions and can destroy a crop in a short time.',
+        'symptoms': [
+            'Large, dark green to black, water-soaked lesions on leaves and stems, often with a pale green border.',
+            'In high humidity, a fuzzy white ring of mold (spores) may appear on the underside of leaf lesions.',
+            'The disease progresses rapidly, killing foliage and leaving a distinct foul odor.',
+            'Infected tubers develop a reddish-brown, dry rot that extends into the flesh.'
+        ],
+        'prevention': [
+            'The most critical step is to use certified, disease-free seed potatoes.',
+            'Destroy all cull piles and volunteer potato/tomato plants before the season starts.',
+            'Promote good air circulation and avoid overhead irrigation later in the day.',
+            'A strict, preventative fungicide spray program is essential for control in most regions.'
+        ]
+    },
+    'Potato Potato Healthy': {
+        'status': 'Healthy',
+        'description': 'The potato plant is vigorous and healthy, with a full, green canopy. It is currently free from the tell-tale signs of Early Blight, Late Blight, and other common potato ailments.',
+        'symptoms': [
+            'Foliage is uniformly green and upright.',
+            'There are no spots, lesions, or wilting present on the leaves or stems.',
+            'The plant appears to be growing well for its developmental stage.'
+        ],
+        'prevention': [
+            'Practice good hilling to cover developing tubers and protect them from light (which turns them green) and pests.',
+            'Scout for and manage insect pests, especially the Colorado potato beetle.',
+            'Ensure consistent soil moisture to prevent issues like scab and hollow heart.',
+            'Begin a preventative fungicide program based on local extension recommendations.'
+        ]
+    },
+    'Strawberry Strawberry Leaf scorch': {
+        'status': 'Infected',
+        'description': 'Strawberry Leaf Scorch is a fungal disease caused by Diplocarpon earlianum. It creates purplish blotches on leaves and can reduce plant vigor and yield if it becomes severe.',
+        'symptoms': [
+            'Irregular, purplish to reddish-brown blotches on the upper surface of leaves.',
+            'Unlike other leaf spots, these lesions do not have a distinct tan center.',
+            'The spots can merge, causing the tissue between veins to dry up and look "scorched".',
+            'Infected fruit caps (calyxes) can turn brown and die.'
+        ],
+        'prevention': [
+            'Plant resistant strawberry varieties.',
+            'After harvest, renovate the strawberry bed by mowing off the old leaves and removing them.',
+            'Use mulch to reduce water splashing and keep leaves dry.',
+            'Ensure good air circulation through proper plant spacing.'
+        ]
+    },
+    'Strawberry Strawberry Healthy': {
+        'status': 'Healthy',
+        'description': 'The strawberry plant is in excellent health, with vibrant green foliage and no signs of leaf spots, scorch, or fruit rot. The plant is well-positioned for a productive harvest.',
+        'symptoms': [
+            'The leaves are a healthy, uniform green without any purple, tan, or brown spots.',
+            'The crown of the plant is robust and free from rot.',
+            'Flowers and developing berries are clean and show no signs of mold.'
+        ],
+        'prevention': [
+            'Plant in raised beds or well-drained soil to prevent root diseases.',
+            'Use a thick layer of straw mulch to keep berries clean and off the soil.',
+            'Water in the morning so foliage has time to dry before evening.',
+            'Rotate the strawberry patch to a new location every 3-4 years.'
+        ]
+    },
+    'Tomato Tomato Bacterial spot': {
+        'status': 'Infected',
+        'description': 'Bacterial Spot on tomatoes is a common and damaging disease caused by Xanthomonas bacteria. It spreads quickly in warm, wet conditions and can significantly impact both the foliage and the fruit.',
+        'symptoms': [
+            'Small, water-soaked, angular spots on leaves that turn greasy and then black.',
+            'Lesions often have a yellow halo and may cause the leaf to yellow and drop.',
+            'On fruit, spots are slightly raised and scab-like, making the fruit unmarketable.',
+            'Stem infections appear as dark, elongated lesions.'
+        ],
+        'prevention': [
+            'Start with certified clean seed and disease-free transplants.',
+            'Rotate crops, ensuring tomatoes or peppers are not planted in the same spot for at least one year.',
+            'Use mulch to act as a barrier between the soil and the plant, reducing water splash.',
+            'Avoid handling or pruning plants when they are wet to prevent spreading the bacteria.'
+        ]
+    },
+    'Tomato Tomato Early blight': {
+        'status': 'Infected',
+        'description': 'Early Blight, caused by the fungus Alternaria solani, is a very common disease of tomatoes. It typically appears on lower leaves early in the season and progresses up the plant, thriving in humid weather.',
+        'symptoms': [
+            'Dark brown to black spots on lower leaves, often with a "target" or "bullseye" pattern of concentric rings.',
+            'A yellow halo usually surrounds the dark lesions.',
+            'Dark, sunken cankers can form on stems, a condition known as "collar rot" if at the soil line.',
+            'Fruit can be infected near the stem, showing large, sunken, black spots with concentric rings.'
+        ],
+        'prevention': [
+            'Plant resistant tomato varieties if available.',
+            'Stake, cage, or trellis plants to improve air circulation and keep foliage off the ground.',
+            'Prune off the bottom 12 inches of foliage once the plant is established.',
+            'Apply a preventative fungicide program, especially as fruit begins to mature.'
+        ]
+    },
+    'Tomato Tomato Late blight': {
+        'status': 'Infected',
+        'description': 'Late Blight, caused by the oomycete Phytophthora infestans, is the most destructive disease of tomatoes and potatoes. It spreads extremely fast in cool, moist weather and can destroy an entire crop.',
+        'symptoms': [
+            'Large, dark green to black, water-soaked looking lesions on leaves and stems.',
+            'In humid conditions, a downy white ring of mold will appear on the underside of the leaf lesions.',
+            'Stems can develop large black lesions, causing the plant to collapse.',
+            'Fruit develops large, firm, greasy, brown-to-black blotches and rots quickly.'
+        ],
+        'prevention': [
+            'Plant late blight-resistant varieties where possible.',
+            'Destroy all volunteer potato and tomato plants, as they can be an early source of infection.',
+            'Space plants far apart to ensure maximum air circulation.',
+            'A strict, preventative fungicide spray schedule is critical for control in susceptible regions.'
+        ]
+    },
+    'Tomato Tomato Leaf Mold': {
+        'status': 'Infected',
+        'description': 'Leaf Mold, caused by the fungus Passalora fulva, is primarily a disease of tomatoes grown in greenhouses or high-tunnels where humidity is high and air circulation is poor.',
+        'symptoms': [
+            'Pale greenish-yellow spots with indefinite margins on the upper surface of leaves.',
+            'Directly corresponding to these spots on the leaf underside is a dense, olive-green to brownish, velvety mold.',
+            'Infections start on lower leaves and move up the plant.',
+            'Severely infected leaves turn yellow, wither, and drop off.'
+        ],
+        'prevention': [
+            'Use tomato varieties resistant to the prevalent races of Leaf Mold.',
+            'Dramatically improve air circulation by using fans and proper plant spacing.',
+            'Keep relative humidity below 85%. Vent greenhouses in the morning.',
+            'Water the soil directly and avoid getting the foliage wet.'
+        ]
+    },
+    'Tomato Tomato Septoria leaf spot': {
+        'status': 'Infected',
+        'description': 'Septoria Leaf Spot is another very common fungal disease of tomatoes, caused by Septoria lycopersici. It can be distinguished from Early Blight by its numerous small spots.',
+        'symptoms': [
+            'Numerous small, circular spots (about 1/8 inch) appear on the lower leaves.',
+            'The spots have dark brown borders and lighter tan or gray centers.',
+            'Tiny black dots (the fungal pycnidia) can be seen in the center of the spots, a key diagnostic feature.',
+            'The disease progresses up the plant, causing lower leaves to yellow, die, and fall off.'
+        ],
+        'prevention': [
+            'Rotate crops and remove plant debris at the end of the season.',
+            'Apply a layer of mulch after planting to prevent spores from splashing up from the soil.',
+            'Water at the base of the plant to keep foliage dry.',
+            'Remove and destroy the lowest infected leaves as soon as they appear.'
+        ]
+    },
+    'Tomato Tomato Spider mites': {
+        'status': 'Infected',
+        'description': 'The Two-Spotted Spider Mite is a common pest of many plants, including tomatoes. They are not insects but tiny arachnids that feed by piercing leaf cells and sucking out their contents, thriving in hot, dry conditions.',
+        'symptoms': [
+            'Fine, yellow or white stippling (tiny dots) appears on the upper surface of the leaves.',
+            'As the infestation grows, leaves may take on a yellow or bronze appearance.',
+            'In severe cases, fine, delicate webbing can be seen on the underside of leaves and around stems.',
+            'The plant may appear generally weak, and leaves can become dry and fall off.'
+        ],
+        'prevention': [
+            'Keep plants well-watered, as mites prefer drought-stressed plants.',
+            'Regularly spray the underside of leaves with a strong jet of water to dislodge mites.',
+            'Introduce or encourage natural predators like predatory mites and ladybugs.',
+            'For heavy infestations, use insecticidal soaps or horticultural oils, ensuring thorough coverage of the undersides of leaves.'
+        ]
+    },
+    'Tomato Tomato Target Spot': {
+        'status': 'Infected',
+        'description': 'Target Spot is a fungal disease of tomatoes caused by Corynespora cassiicola. It affects all parts of the plant and can be confused with Early Blight, but the spots are typically smaller and more numerous.',
+        'symptoms': [
+            'Small, water-soaked spots on upper leaf surfaces that enlarge into lesions with dark, concentric rings (a "target" look).',
+            'Lesions often have a yellow halo and can cause significant defoliation.',
+            'On fruit, spots are sunken, pitted, and can reach up to a half-inch in diameter.',
+            'Stem lesions are elongated and have the same target-like appearance.'
+        ],
+        'prevention': [
+            'Improve air circulation through staking and pruning.',
+            'Avoid overhead watering to keep foliage as dry as possible.',
+            'Rotate crops and manage weeds around the tomato patch.',
+            'A preventative fungicide program can be effective in managing the disease.'
+        ]
+    },
+    'Tomato Tomato Mosaic virus': {
+        'status': 'Infected',
+        'description': 'Tomato Mosaic Virus (ToMV) is a persistent viral disease that can severely impact tomato plants. It is easily transmitted mechanically by hands, tools, and clothing, and can survive for years in plant debris or on contaminated surfaces.',
+        'symptoms': [
+            'A light green and dark green mosaic or mottled pattern on the leaves.',
+            'Leaves may be malformed, curled, or have a "fernleaf" appearance.',
+            'Plants are often stunted, and fruit yield is significantly reduced.',
+            'Occasionally, fruit may show internal browning or yellow rings.'
+        ],
+        'prevention': [
+            'The most effective method is to plant ToMV-resistant tomato varieties.',
+            'Practice strict sanitation. Wash hands with soap and water before handling plants.',
+            'Do not use tobacco products near tomato plants, as the virus can be present in many tobacco products.',
+            'Remove and destroy infected plants immediately to prevent further spread.'
+        ]
+    },
+    'Tomato Tomato Yellow Leaf Curl Virus': {
+        'status': 'Infected',
+        'description': 'Tomato Yellow Leaf Curl Virus (TYLCV) is a devastating viral disease transmitted primarily by whiteflies. It causes severe stunting and discoloration, dramatically reducing the plant\'s ability to produce fruit.',
+        'symptoms': [
+            'Severe stunting of the plant is a primary symptom; infected plants stop growing.',
+            'New leaves are much smaller than normal and are curled upwards, cupped, and crumpled.',
+            'The margins of the leaves turn a distinct bright yellow.',
+            'The plant may produce very few flowers, and even fewer fruit.'
+        ],
+        'prevention': [
+            'Plant TYLCV-resistant varieties, which is the best line of defense.',
+            'Aggressively control whitefly populations using methods like reflective mulch, insecticides, or physical barriers.',
+            'Remove and immediately destroy any infected plants to reduce the virus source.',
+            'Eliminate weeds in and around the garden, as they can host the whiteflies and the virus.'
+        ]
+    },
+    'Tomato Tomato Healthy': {
+        'status': 'Healthy',
+        'description': 'This tomato plant is healthy and showing no signs of disease. The leaves are the correct color and shape, and the plant structure is sound, indicating it has the resources for good fruit production.',
+        'symptoms': [
+            'Leaves are uniformly green, without spots, mosaic patterns, or curling.',
+            'Stems are strong and free of cankers or lesions.',
+            'The plant is growing at a normal rate and flowers are setting fruit.'
+        ],
+        'prevention': [
+            'Continue to provide consistent watering, aiming for deep soil moisture.',
+            'Use a balanced fertilizer appropriate for the fruiting stage.',
+            'Keep the plant staked or caged to maintain good air circulation.',
+            'Continue to scout for the first signs of common pests or diseases.'
+        ]
+    }
+}

requirements.txt

@@ -0,0 +1,11 @@
+Flask
+tensorflow
+numpy
+Pillow
+ollama
+python-dotenv
+opencv-python-headless
+matplotlib
+seaborn
+openai
+bytez

showcase_data.py

@@ -0,0 +1,484 @@
+# In-depth descriptions for the model showcase, using keys from disease_data.py as the source of truth.
+SHOWCASE_DATA = {
+    'Apple Apple Scab': {
+        'title': 'Apple Scab',
+        'short_description': 'A common fungal disease that affects apple and crabapple trees, causing cosmetic damage to leaves and fruit. While it can reduce yield, it rarely kills the tree, and with proper care, your tree can thrive.',
+        'quick_symptoms': [
+            'Olive-green or brown spots on leaves, fruit, and twigs.',
+            'Leaves may become twisted and puckered.',
+            'Infected fruit develops dark, scabby lesions.'
+        ],
+        'fast_prevention': [
+            'Plant resistant varieties and ensure good air circulation through pruning.',
+            'Rake up and destroy fallen leaves in autumn to reduce fungal overwintering.'
+        ]
+    },
+    'Apple Apple Black rot': {
+        'title': 'Apple Black Rot',
+        'short_description': "A fungal disease that can cause serious damage to apple trees, affecting fruit, leaves, and bark. Early detection and management are key to protecting your harvest and the tree's health.",
+        'quick_symptoms': [
+            'Firm, brown-to-black rot on fruit that expands in concentric rings.',
+            'Purple or brown spots on leaves, often leading to defoliation.',
+            'Sunken, reddish-brown cankers on branches.'
+        ],
+        'fast_prevention': [
+            'Prune out dead or cankered wood during dormancy.',
+            'Maintain a regular spray schedule and promote rapid drying of foliage.'
+        ]
+    },
+    'Apple Cedar apple rust': {
+        'title': 'Cedar Apple Rust',
+        'short_description': 'A fascinating and complex fungal disease requiring both an apple or crabapple and a cedar or juniper tree to complete its lifecycle. It primarily affects leaves and fruit, creating striking but damaging spots.',
+        'quick_symptoms': [
+            'Bright yellow-orange spots on leaves, often with a reddish border.',
+            'Small, raised tube-like structures (aecia) may appear on the underside of leaves.',
+            'Fruit may develop similar orange lesions.'
+        ],
+        'fast_prevention': [
+            'Avoid planting susceptible apple varieties near Eastern red cedars.',
+            'Apply fungicides during the primary infection period in spring.'
+        ]
+    },
+    'Apple Apple Healthy': {
+        'title': 'Healthy Apple Tree',
+        'short_description': "Your apple tree is flourishing, showing vibrant growth and no signs of significant disease. Consistent care will ensure a bountiful harvest and long-term vitality.",
+        'quick_symptoms': [
+            'Lush, green foliage with uniform color.',
+            'Smooth, unblemished bark and strong branch structure.',
+            'Plentiful, well-formed buds and flowers.'
+        ],
+        'fast_prevention': [
+            'Continue providing consistent water, sunlight, and proper nutrition.',
+            'Monitor regularly for early signs of pests or disease to act quickly.'
+        ]
+    },
+    'Cherry Cherry Powdery mildew': {
+        'title': 'Cherry Powdery Mildew',
+        'short_description': 'A fungal disease that covers leaves and fruit with a white, powdery coating. It thrives in moderate temperatures and high humidity, but can be managed effectively with good cultural practices.',
+        'quick_symptoms': [
+            'White, powdery patches on leaves, shoots, and sometimes fruit.',
+            'Leaves can become distorted, curl, or drop prematurely.',
+            'Infected fruit may be stunted or russeted.'
+        ],
+        'fast_prevention': [
+            'Prune for good air circulation to reduce humidity within the canopy.',
+            'Apply fungicides or horticultural oils at the first sign of disease.'
+        ]
+    },
+    'Cherry Cherry Healthy': {
+        'title': 'Healthy Cherry Tree',
+        'short_description': 'A picture of health, this cherry tree shows all the signs of vitality. With continued care, it promises to provide both beauty and a delicious harvest.',
+        'quick_symptoms': [
+            'Bright green, glossy leaves.',
+            'Strong branches with no signs of cankers or oozing.',
+            'Abundant and healthy flower and fruit development.'
+        ],
+        'fast_prevention': [
+            'Maintain a consistent watering schedule, especially during dry periods.',
+            'Protect the trunk from mechanical injury and winter sunscald.'
+        ]
+    },
+     'Corn Corn Gray leaf spot': {
+        'title': 'Corn Gray Leaf Spot',
+        'short_description': 'A significant fungal disease of corn that thrives in warm, humid conditions with extended periods of leaf wetness. It reduces the photosynthetic area of leaves, which can impact grain fill and yield.',
+        'quick_symptoms': [
+            'Small, pale, rectangular lesions that elongate between leaf veins.',
+            'Lesions mature to a grayish or tan color with sharp, defined borders.',
+            'Severe infection can cause leaves to wither and die prematurely.'
+        ],
+        'fast_prevention': [
+            'Choose resistant hybrids and practice crop rotation with non-host crops.',
+            'Manage residue through tillage to reduce fungal survival.'
+        ]
+    },
+    'Corn Corn Common rust': {
+        'title': 'Corn Common Rust',
+        'short_description': 'A fungal disease that appears as small, cinnamon-brown pustules on corn leaves. While widespread, it typically develops later in the season and often has a minimal impact on the yield of healthy plants.',
+        'quick_symptoms': [
+            'Oval or elongated, cinnamon-brown pustules on both upper and lower leaf surfaces.',
+            'Pustules rupture, releasing powdery, rust-colored spores.',
+            'Can cause leaves to yellow and dry prematurely in heavy infections.'
+        ],
+        'fast_prevention': [
+            'Planting resistant corn hybrids is the most effective management strategy.',
+            'Most field corn has sufficient resistance, making fungicides unnecessary in many cases.'
+        ]
+    },
+    'Corn Corn Northern Leaf Blight': {
+        'title': 'Corn Northern Leaf Blight',
+        'short_description': 'A fungal disease characterized by large, cigar-shaped lesions on the leaves of corn plants. It flourishes in cool, wet weather and can cause significant yield loss if it develops early in the season.',
+        'quick_symptoms': [
+            'Long, elliptical, tan or grayish lesions, typically 1 to 6 inches long.',
+            'Lesions first appear on lower leaves and progress up the plant.',
+            'Heavy infestation gives the plant a blighted or "fired" appearance.'
+        ],
+        'fast_prevention': [
+            'Select resistant hybrids adapted to your region.',
+            'Use crop rotation and tillage to bury infected residue.'
+        ]
+    },
+    'Corn Corn Healthy': {
+        'title': 'Healthy Corn Plant',
+        'short_description': 'This corn plant is growing strong and tall, a testament to good soil, adequate sun, and proper care. It is on the right track for producing high-quality ears.',
+        'quick_symptoms': [
+            'Tall, sturdy stalks with broad, deep green leaves.',
+            'Well-developed tassels and silks appearing at the appropriate time.',
+            'No signs of spots, streaks, or stunting.'
+        ],
+        'fast_prevention': [
+            'Ensure consistent soil moisture, providing about 1 inch of water per week.',
+            'Manage weeds to reduce competition for nutrients and water.'
+        ]
+    },
+    'Grape Grape Black rot': {
+        'title': 'Grape Black Rot',
+        'short_description': 'A serious fungal disease of grapes that can destroy the entire fruit crop if left unchecked. It affects all green parts of the vine, but the damage to the fruit is the most devastating.',
+        'quick_symptoms': [
+            'Small, brownish, circular spots on leaves that develop dark borders.',
+            'Fruit rots, turns dark brown, and then shrivels into hard, black "mummies".',
+            'Dark, elongated lesions can appear on shoots and tendrils.'
+        ],
+        'fast_prevention': [
+            'Choose a sunny, well-drained site with good air movement.',
+            'Apply fungicides from early spring through the growing season.'
+        ]
+    },
+    'Grape Grape Black Measles': {
+        'title': 'Grape Esca (Black Measles)',
+        'short_description': 'A complex and destructive trunk disease caused by a group of fungi. It can lead to a gradual decline or sudden dieback of the vine, with symptoms that can be quite dramatic.',
+        'quick_symptoms': [
+            'Leaves show "tiger stripe" patterns of yellowing or reddening between veins.',
+            'Small, dark spots or "measles" may appear on grape berries.',
+            'In acute cases, the entire vine or a part of it may suddenly wilt and die.'
+        ],
+        'fast_prevention': [
+            'Practice good pruning hygiene, making clean cuts and protecting large wounds.',
+            'Delay pruning until late winter or early spring to allow for wound healing.'
+        ]
+    },
+    'Grape Grape Isariopsis Leaf Spot': {
+        'title': 'Grape Leaf Blight',
+        'short_description': 'Also known as Isariopsis Leaf Spot, this fungal disease typically appears late in the season. While it can cause some defoliation, it is generally considered a minor disease and rarely impacts yield significantly.',
+        'quick_symptoms': [
+            'Irregular, dark brown or black lesions on leaves, often surrounded by a yellow halo.',
+            'Lesions can merge, causing large areas of the leaf to die.',
+            'Infected leaves may drop prematurely.'
+        ],
+        'fast_prevention': [
+            'Rake and destroy fallen leaves to reduce the source of infection.',
+            'Promote good air circulation through proper pruning and training of vines.'
+        ]
+    },
+    'Grape Grape Healthy': {
+        'title': 'Healthy Grape Vine',
+        'short_description': 'This grapevine is vigorous and well-structured, a sign of excellent health and potential. It is perfectly poised to produce a crop of delicious, high-quality grapes.',
+        'quick_symptoms': [
+            'Lush canopy of large, uniformly green leaves.',
+            'Strong, flexible canes and a sturdy trunk.',
+            'Healthy development of flower clusters and fruit set.'
+        ],
+        'fast_prevention': [
+            'Maintain a balanced fertilization program based on soil tests.',
+            'Ensure the trellis system provides adequate support and sun exposure.'
+        ]
+    },
+    'Peach Peach Bacterial spot': {
+        'title': 'Peach Bacterial Spot',
+        'short_description': "A persistent bacterial disease that affects peaches, nectarines, and plums, causing spots on leaves and fruit. It is most severe in warm, rainy weather and on sandy soils.",
+        'quick_symptoms': [
+            'Angular, purple or black spots on leaves, with centers that may fall out.',
+            'Leaves can turn yellow and drop, leading to significant defoliation.',
+            'Fruit develops pitted, cracked, or sunken spots.'
+        ],
+        'fast_prevention': [
+            'Plant resistant varieties when available.',
+            'Maintain tree vigor with proper fertilization and irrigation to help withstand infection.'
+        ]
+    },
+    'Peach Peach Healthy': {
+        'title': 'Healthy Peach Tree',
+        'short_description': "Your peach tree is thriving, showing the robust health needed for a sweet and juicy harvest. It's a beautiful example of a well-cared-for fruit tree.",
+        'quick_symptoms': [
+            'Full canopy of vibrant, green leaves.',
+            'Smooth bark without cankers or signs of insect borers.',
+            'Strong fruit development with good color and size.'
+        ],
+        'fast_prevention': [
+            'Thin fruit to encourage larger peaches and prevent branch breakage.',
+            'Apply dormant oil in late winter to control overwintering pests.'
+        ]
+    },
+    'Bell pepper Bell pepper Bacterial spot': {
+        'title': 'Bell Pepper Bacterial Spot',
+        'short_description': 'A common bacterial infection in warm, humid climates that can cause spotting on leaves and fruit, potentially impacting yield and quality. Good sanitation is your first line of defense.',
+        'quick_symptoms': [
+            'Small, water-soaked spots on leaves that turn dark and angular.',
+            'Spots may have a yellow halo and centers can fall out, creating a "shot-hole" look.',
+            'Fruit develops raised, scab-like spots.'
+        ],
+        'fast_prevention': [
+            'Use disease-free seeds and rotate crops, avoiding planting peppers in the same spot for at least a year.',
+            'Water at the base of the plant to keep foliage dry.'
+        ]
+    },
+    'Bell pepper Bell pepper Healthy': {
+        'title': 'Healthy Bell Pepper Plant',
+        'short_description': 'This bell pepper plant is thriving, exhibiting strong stems and vibrant leaves, ready to produce delicious fruit. Your attentive care is paying off beautifully.',
+        'quick_symptoms': [
+            'Sturdy stems and full, deep green leaves.',
+            'Absence of spots, yellowing, or wilting.',
+            'Vigorous production of flowers and young peppers.'
+        ],
+        'fast_prevention': [
+            'Ensure consistent watering and well-drained soil.',
+            'Provide support as the plant grows to prevent stem breakage.'
+        ]
+    },
+    'Potato Potato Early blight': {
+        'title': 'Potato Early Blight',
+        'short_description': 'A common fungal disease of potatoes and tomatoes, caused by Alternaria species. Despite its name, it often appears after the plants have blossomed, causing distinctive "target-like" spots on leaves.',
+        'quick_symptoms': [
+            'Dark brown to black spots on lower leaves, often with a "bulls-eye" pattern of concentric rings.',
+            'A yellow halo may surround the spots.',
+            'Tubers can develop dark, sunken lesions.'
+        ],
+        'fast_prevention': [
+            'Rotate crops, avoiding potatoes or tomatoes in the same plot for 2-3 years.',
+            'Ensure good nutrition and soil moisture to keep plants vigorous.'
+        ]
+    },
+    'Potato Potato Late blight': {
+        'title': 'Potato Late Blight',
+        'short_description': 'A devastating disease of potatoes and tomatoes caused by a water mold, Phytophthora infestans. It thrives in cool, moist conditions and can destroy a crop in a very short time.',
+        'quick_symptoms': [
+            'Large, dark green to black, water-soaked lesions on leaves and stems.',
+            'A fuzzy, white mold may appear on the underside of leaves in humid conditions.',
+            'Tubers develop a reddish-brown, firm rot under the skin.'
+        ],
+        'fast_prevention': [
+            'Use certified disease-free seed potatoes.',
+            'Apply fungicides preventively, especially when cool, wet weather is forecast.'
+        ]
+    },
+    'Potato Potato Healthy': {
+        'title': 'Healthy Potato Plant',
+        'short_description': 'This potato plant is the picture of health, with lush foliage and strong stems. It is working hard below the ground to produce a fantastic crop of tubers.',
+        'quick_symptoms': [
+            'Dense, upright canopy of green leaves.',
+            'No signs of yellowing, spotting, or wilting.',
+            'Vigorous growth throughout the season.'
+        ],
+        'fast_prevention': [
+            '"Hill" soil around the base of the plants to protect developing tubers from sun and pests.',
+            'Monitor for pests like the Colorado potato beetle.'
+        ]
+    },
+    'Strawberry Strawberry Leaf scorch': {
+        'title': 'Strawberry Leaf Scorch',
+        'short_description': 'A fungal disease that causes purplish-brown blotches on strawberry leaves. While it can make a patch look ragged, it typically has a minor effect on yield unless the infection is very severe.',
+        'quick_symptoms': [
+            'Irregular, purplish to brownish spots on leaves.',
+            'As spots merge, the leaf takes on a "scorched" appearance between the veins.',
+            'Small, dark, speck-like fruiting bodies may appear in the center of lesions.'
+        ],
+        'fast_prevention': [
+            'Plant in a sunny location with good air circulation.',
+            'Remove and destroy infected leaves after harvest to reduce inoculum.'
+        ]
+    },
+    'Strawberry Strawberry Healthy': {
+        'title': 'Healthy Strawberry Plant',
+        'short_description': 'This strawberry plant is vibrant and robust, ready to produce sweet, juicy berries. Its healthy state is a great sign for the delicious treats to come.',
+        'quick_symptoms': [
+            'Bright green, trifoliate leaves with no discoloration.',
+            'A well-developed crown with new growth emerging from the center.',
+            'Plentiful flowers and developing fruit.'
+        ],
+        'fast_prevention': [
+            'Apply a layer of straw mulch to keep fruit clean and conserve moisture.',
+            'Renovate the strawberry patch after harvest to maintain vigor.'
+        ]
+    },
+    'Tomato Tomato Bacterial spot': {
+        'title': 'Tomato Bacterial Spot',
+        'short_description': 'A common and problematic disease of tomatoes, especially in warm, wet conditions. It can defoliate plants and cause unsightly lesions on fruit, making sanitation crucial.',
+        'quick_symptoms': [
+            'Small, water-soaked, angular spots on leaves that later turn greasy and black.',
+            'Spots may have a yellow halo.',
+            'Fruit can have raised, dark, scabby spots.'
+        ],
+        'fast_prevention': [
+            'Use disease-free seed and sanitize stakes and tools.',
+            'Avoid overhead watering to keep leaves as dry as possible.'
+        ]
+    },
+    'Tomato Tomato Early blight': {
+        'title': 'Tomato Early Blight',
+        'short_description': 'A very common fungal disease that starts on the lower, older leaves and works its way up the plant. It can cause significant defoliation, which exposes fruit to sunscald and reduces plant productivity.',
+        'quick_symptoms': [
+            'Dark, concentric "bulls-eye" spots on lower leaves.',
+            'Stems can develop dark, sunken lesions, a condition known as "collar rot".',
+            'Affected leaves yellow and drop.'
+        ],
+        'fast_prevention': [
+            'Mulch heavily to prevent spores from splashing from the soil onto leaves.',
+            'Prune lower leaves as the plant grows to improve air circulation.'
+        ]
+    },
+    'Tomato Tomato Late blight': {
+        'title': 'Tomato Late Blight',
+        'short_description': 'The same aggressive water mold that affects potatoes, late blight can decimate a tomato patch in just a few days under cool, wet conditions. Vigilance is absolutely key.',
+        'quick_symptoms': [
+            'Large, greasy, gray-green to blackish blotches on leaves.',
+            'White, fuzzy mold can grow on leaf undersides.',
+            'Fruit develops large, firm, brown or olive-colored greasy spots.'
+        ],
+        'fast_prevention': [
+            'Monitor weather forecasts and apply preventative fungicides when late blight is reported in your area.',
+            'Ensure ample spacing between plants for quick drying.'
+        ]
+    },
+    'Tomato Tomato Leaf Mold': {
+        'title': 'Tomato Leaf Mold',
+        'short_description': 'A fungal disease that thrives in high humidity, making it a common problem in greenhouses but also possible in the field. It primarily affects the leaves, reducing the plant\u0027s ability to photosynthesize.',
+        'quick_symptoms': [
+            'Pale green or yellowish spots on the upper side of leaves.',
+            'An olive-green to brownish, velvety mold grows on the underside of these spots.',
+            'Infected leaves eventually wither and die.'
+        ],
+        'fast_prevention': [
+            'Provide excellent air circulation and stake or trellis plants.',
+            'Water the soil directly and avoid getting the foliage wet, especially late in the day.'
+        ]
+    },
+    'Tomato Tomato Septoria leaf spot': {
+        'title': 'Tomato Septoria Leaf Spot',
+        'short_description': 'Another prolific leaf-spotting disease of tomato that starts on the bottom of the plant and moves up. It can cause extensive defoliation, weakening the plant and impacting fruit production.',
+        'quick_symptoms': [
+            'Many small, circular spots with dark borders and tan or gray centers.',
+            'Tiny black dots (pycnidia) can be seen in the center of the spots.',
+            'Affected leaves turn yellow, then brown, and fall off.'
+        ],
+        'fast_prevention': [
+            'Rotate crops and control weeds, especially those in the nightshade family.',
+            'Remove infected lower leaves as they appear to slow the disease\u0027s spread.'
+        ]
+    },
+    'Tomato Tomato Spider mites': {
+        'title': 'Two-Spotted Spider Mite',
+        'short_description': 'These tiny arachnids are not insects but are common pests on many plants, including tomatoes. They use piercing mouthparts to suck cell contents from leaves, causing a stippling effect.',
+        'quick_symptoms': [
+            'Yellow or white pinprick spots (stippling) on leaves.',
+            'Fine webbing may be visible on the underside of leaves and around stems.',
+            'In heavy infestations, leaves can turn yellow or bronze and drop off.'
+        ],
+        'fast_prevention': [
+            'Regularly spray plants with a strong stream of water to dislodge mites.',
+            'Encourage predatory insects or use insecticidal soaps or horticultural oils.'
+        ]
+    },
+    'Tomato Tomato Target Spot': {
+        'title': 'Tomato Target Spot',
+        'short_description': 'Caused by the fungus Corynespora cassiicola, this disease affects leaves, stems, and fruit. Its "target spot" lesions can be confused with Early Blight, but they have their own distinct characteristics.',
+        'quick_symptoms': [
+            'Brown to black leaf spots with distinct concentric rings, creating a "target" look.',
+            'Spots are often larger than Septoria and may not have the dark specks.',
+            'Fruit can develop sunken, pitted spots, often near the stem end.'
+        ],
+        'fast_prevention': [
+            'Improve air circulation by staking and pruning plants.',
+            'Rotate with non-susceptible crops and maintain a mulch layer.'
+        ]
+    },
+    'Tomato Tomato Mosaic virus': {
+        'title': 'Tomato Mosaic Virus',
+        'short_description': 'A persistent viral disease that can survive for years in plant debris or on contaminated tools. It causes a mosaic-like pattern on leaves and can reduce both fruit quality and yield.',
+        'quick_symptoms': [
+            'Light and dark green mottling or mosaic pattern on leaves.',
+            'Leaves may be fern-like in appearance or otherwise distorted.',
+            'Internal browning can occur in the fruit.'
+        ],
+        'fast_prevention': [
+            'Wash hands thoroughly, especially if you use tobacco products, before handling plants.',
+            'Disinfect tools and avoid working with plants when they are wet.'
+        ]
+    },
+    'Tomato Tomato Yellow Leaf Curl Virus': {
+        'title': 'Tomato Yellow Leaf Curl Virus',
+        'short_description': 'A devastating viral disease spread by whiteflies. It severely stunts the plant and can lead to a total loss of fruit production. Management focuses entirely on controlling the insect vector.',
+        'quick_symptoms': [
+            'New leaves are small, cupped upward, and have yellow margins.',
+            'The plant becomes severely stunted and bushy due to shortened internodes.',
+            'Flower and fruit production is drastically reduced or ceases altogether.'
+        ],
+        'fast_prevention': [
+            'Control whitefly populations using reflective mulches, insecticides, or physical barriers like netting.',
+            'Remove and destroy infected plants immediately to reduce the virus source.'
+        ]
+    },
+    'Tomato Tomato Healthy': {
+        'title': 'Healthy Tomato Plant',
+        'short_description': 'This tomato plant is a model of health, with lush foliage and a strong structure. It is well on its way to producing a delicious and rewarding crop.',
+        'quick_symptoms': [
+            'Deep green leaves and sturdy, upright stems.',
+            'Vibrant yellow flowers and steadily developing fruit.',
+            'No evidence of spots, wilting, or pest damage.'
+        ],
+        'fast_prevention': [
+            'Provide consistent water and support with stakes or cages.',
+            'Feed regularly with a balanced fertilizer designed for tomatoes.'
+        ]
+    },
+     'Citrus Citrus Black spot': {
+        'title': 'Citrus Black Spot',
+        'short_description': 'A fungal disease primarily affecting the rind of citrus fruits, causing cosmetic blemishes that can make the fruit unmarketable. It is a major concern in citrus-growing regions with summer rainfall.',
+        'quick_symptoms': [
+            'Small, hard, black, circular spots on the fruit rind.',
+            'Lesions can vary in appearance, including virulent spots, false melanose, and freckle spots.',
+            'Does not typically cause leaf symptoms or tree decline.'
+        ],
+        'fast_prevention': [
+            'Apply timely and thorough fungicide sprays to protect the developing fruit.',
+            'Manage leaf litter on the orchard floor, as it is a source of fungal spores.'
+        ]
+    },
+    'Citrus Citrus canker': {
+        'title': 'Citrus Canker',
+        'short_description': 'A highly contagious bacterial disease that causes lesions on citrus leaves, stems, and fruit. Severe infections can lead to defoliation, blemished fruit, and premature fruit drop.',
+        'quick_symptoms': [
+            'Raised, corky or spongy lesions on leaves, often surrounded by a water-soaked margin and a yellow halo.',
+            'Lesions are visible on both sides of the leaf.',
+            'Fruit lesions can become scab-like and may ooze bacteria.'
+        ],
+        'fast_prevention': [
+            'Strict quarantine measures and eradication of infected trees are the primary controls.',
+            'Planting windbreaks to reduce the spread of bacteria by wind-driven rain.'
+        ]
+    },
+    'Citrus Citrus greening': {
+        'title': 'Citrus Greening (HLB)',
+        'short_description': 'Also known as Huanglongbing (HLB), this is one of the most destructive diseases of citrus worldwide. It is caused by a bacterium that is spread by the Asian citrus psyllid insect.',
+        'quick_symptoms': [
+            'Blotchy, asymmetrical yellowing of leaves (mottling) is the most characteristic symptom.',
+            'Affected trees show stunted growth, sparse yellow foliage, and extensive twig dieback.',
+            'Fruit is often small, lopsided, poorly colored, and has a bitter taste.'
+        ],
+        'fast_prevention': [
+            'Aggressive and coordinated control of the psyllid insect vector.',
+            'Prompt removal of infected trees to prevent spread to healthy ones.'
+        ]
+    },
+    'Citrus Citrus Healthy': {
+        'title': 'Healthy Citrus Tree',
+        'short_description': 'This citrus tree is in excellent health, with lush, deep green leaves and no indication of canker, greening, or other diseases. It is well-positioned for healthy fruit production.',
+        'quick_symptoms': [
+            'Leaves are a uniform, dark green color without yellowing or mottling.',
+            'The canopy is dense and shows vigorous new growth.',
+            'Fruit is developing with good size and color for the season.'
+        ],
+        'fast_prevention': [
+            'Monitor for pests, especially the Asian citrus psyllid, and manage them proactively.',
+            'Provide a balanced fertilizer program tailored for citrus trees.'
+        ]
+    }
+}

static/css/style.css

@@ -0,0 +1,879 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;600;700;800&display=swap');
+
+:root {
+    /* Dark Green Theme Colors */
+    --primary-green: #22c55e;
+    --dark-green: #14532d;
+    --darker-green: #052e16;
+    --green-glow: rgba(34, 197, 94, 0.3);
+    --deep-green: #0d2818;
+    --emerald-green: #10b981;
+    --forest-green: #166534;
+    --lime-green: #65a30d;
+    
+    /* Neutral Colors */
+    --primary-color: #ffffff;
+    --secondary-color: #d1fae5;
+    --text-light: rgba(255, 255, 255, 0.9);
+    --text-muted: rgba(255, 255, 255, 0.6);
+    
+    /* Glassmorphism */
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-bg-strong: rgba(255, 255, 255, 0.15);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --glass-border-hover: rgba(34, 197, 94, 0.4);
+    --glass-shadow: rgba(0, 0, 0, 0.5);
+    --hover-bg: rgba(255, 255, 255, 0.2);
+    
+    /* Layout */
+    --font-family: 'Inter', 'Poppins', sans-serif;
+    --sidebar-width: 280px;
+    --sidebar-width-collapsed: 85px;
+    --content-padding: 2.5rem;
+    --border-radius: 20px;
+    --border-radius-sm: 12px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-family);
+    color: var(--primary-color);
+    overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Plant Leaves Background */
+.background-animation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-image: 
+        linear-gradient(135deg, rgba(5, 46, 22, 0.8) 0%, rgba(13, 40, 24, 0.7) 100%), 
+        url('../images/green-leaves-3840x2160-23231.jpg');
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    animation: subtleMove 60s ease-in-out infinite;
+
+}
+
+.background-animation::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(34, 197, 94, 0.02) 2px, rgba(34, 197, 94, 0.02) 4px),
+        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(16, 185, 129, 0.02) 2px, rgba(16, 185, 129, 0.02) 4px);
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.background-animation::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.05) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 0%, rgba(5, 46, 22, 0.3) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+/* If user adds plant-leaves-bg.jpg, uncomment this and comment above */
+/*
+.background-animation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-image: 
+        linear-gradient(135deg, rgba(5, 46, 22, 0.85) 0%, rgba(20, 83, 45, 0.75) 50%, rgba(13, 40, 24, 0.85) 100%),
+        url('../images/plant-leaves-bg.jpg');
+    background-color: rgba(5, 46, 22, 0.95);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    filter: brightness(0.35) saturate(1.3) contrast(1.1);
+    animation: subtleMove 60s ease-in-out infinite;
+}
+*/
+
+@keyframes subtleMove {
+    0%, 100% { background-position: center center, 0 0; }
+    50% { background-position: center 2%, 20px 20px; }
+}
+
+/* Main Container */
+.main-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    position: relative;
+    z-index: 1;
+}
+
+#content {
+    width: calc(100% - var(--sidebar-width));
+    padding: var(--content-padding);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100vh;
+    position: relative;
+}
+
+#content.full-width {
+    width: calc(100% - var(--sidebar-width-collapsed));
+}
+
+/* Enhanced Glassmorphism */
+.glass-card, 
+.sidebar-nav, 
+.upload-area-glass, 
+.chat-box-glass, 
+.chat-input-glass {
+    background: var(--glass-bg);
+    backdrop-filter: blur(25px) saturate(180%);
+    -webkit-backdrop-filter: blur(25px) saturate(180%);
+    border: 1.5px solid var(--glass-border);
+    border-radius: var(--border-radius);
+    box-shadow: 
+        0 8px 32px var(--glass-shadow),
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 1px rgba(255, 255, 255, 0.1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover,
+.upload-area-glass:hover {
+    border-color: var(--glass-border-hover);
+    box-shadow: 
+        0 12px 48px var(--glass-shadow),
+        0 4px 16px rgba(34, 197, 94, 0.2),
+        inset 0 1px 1px rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+.card-header-glass {
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1.5px solid var(--glass-border);
+    padding: 1.25rem 2rem;
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    font-weight: 600;
+    color: var(--primary-color);
+    font-size: 1.1rem;
+    letter-spacing: 0.5px;
+}
+
+.card-body-glass {
+    padding: 2rem;
+}
+
+/* Sidebar - Enhanced */
+.sidebar-nav {
+    min-width: var(--sidebar-width);
+    max-width: var(--sidebar-width);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 100vh;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(25px) saturate(180%);
+    -webkit-backdrop-filter: blur(25px) saturate(180%);
+    border-right: 2px solid var(--glass-border);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
+}
+
+.sidebar-nav .sidebar-header {
+    padding: 2rem 1.5rem;
+    text-align: center;
+    border-bottom: 2px solid var(--glass-border);
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, transparent 100%);
+}
+
+.sidebar-nav .sidebar-header h3 {
+    color: var(--primary-green);
+    font-weight: 700;
+    font-size: 1.75rem;
+    margin: 0;
+    text-shadow: 0 0 20px var(--green-glow);
+    letter-spacing: 1px;
+}
+
+.sidebar-nav .sidebar-header h3 i {
+    color: var(--emerald-green);
+    margin-right: 0.5rem;
+}
+
+.sidebar-nav ul.components {
+    padding: 1.5rem 0;
+    flex-grow: 1;
+    margin: 0;
+    list-style: none;
+}
+
+.sidebar-nav ul li {
+    margin: 0.5rem 0;
+    padding: 0 0.5rem;
+}
+
+.sidebar-nav ul li a {
+    padding: 1rem 1.25rem;
+    font-size: 1rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    color: var(--text-light);
+    text-decoration: none;
+    border-left: 3px solid transparent;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* margin: 0 1rem; -- removed */
+    border-radius: var(--border-radius-sm);
+    position: relative;
+    overflow: hidden;
+    min-width: 0;
+    white-space: nowrap;
+}
+
+.sidebar-nav ul li a::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.sidebar-nav ul li a:hover::before {
+    left: 100%;
+}
+
+.sidebar-nav ul li a span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-grow: 1; /* Allow the span to take available space */
+}
+
+.sidebar-nav ul li a i {
+    margin-right: 1rem;
+    width: 24px;
+    text-align: center;
+    font-size: 1.2rem;
+    color: var(--emerald-green);
+    transition: all 0.3s;
+}
+
+.sidebar-nav ul li a:hover {
+    color: var(--primary-color);
+    background: var(--hover-bg);
+    border-left-color: var(--primary-green);
+    transform: translateX(5px);
+    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
+}
+
+.sidebar-nav ul li.active > a {
+    color: var(--primary-color);
+    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
+    border-left-color: var(--primary-green);
+    box-shadow: 
+        inset 0 0 20px rgba(34, 197, 94, 0.15),
+        0 4px 12px rgba(34, 197, 94, 0.25);
+    font-weight: 600;
+}
+
+.sidebar-nav ul li.active > a i {
+    color: var(--primary-green);
+    text-shadow: 0 0 10px var(--green-glow);
+}
+
+.sidebar-toggler {
+    padding: 1.5rem;
+    text-align: center;
+    border-top: 2px solid var(--glass-border);
+    background: rgba(5, 46, 22, 0.3);
+}
+
+.btn-glass {
+    background: var(--glass-bg);
+    border: 1.5px solid var(--glass-border);
+    color: var(--text-light);
+    border-radius: var(--border-radius-sm);
+    padding: 0.75rem 1.5rem;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+}
+
+.btn-glass:hover {
+    background: var(--hover-bg);
+    color: var(--primary-color);
+    border-color: var(--primary-green);
+    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
+    transform: translateY(-2px);
+}
+
+/* Collapsed Sidebar */
+#sidebar.collapsed {
+    min-width: var(--sidebar-width-collapsed);
+    max-width: var(--sidebar-width-collapsed);
+}
+
+#sidebar.collapsed .sidebar-header h3,
+#sidebar.collapsed ul li a span {
+    display: none;
+}
+
+#sidebar.collapsed ul li a i {
+    margin-right: 0;
+    font-size: 1.5rem;
+}
+
+#sidebar.collapsed ul li a {
+    justify-content: center;
+    padding: 1rem;
+    margin: 0.5rem;
+}
+
+#sidebar.collapsed .sidebar-toggler i {
+    transform: rotate(180deg);
+}
+
+/* Content Tabs */
+.content-tab {
+    display: none !important;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+
+.content-tab.active-tab {
+    display: block !important;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.tab-title {
+    color: var(--primary-color);
+    font-weight: 700;
+    font-size: 2.25rem;
+    margin-bottom: 2rem;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    letter-spacing: -0.5px;
+}
+
+/* Upload Area */
+.upload-area-glass {
+    height: 400px;
+    border: 3px dashed var(--glass-border);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(5, 46, 22, 0.1) 100%);
+}
+
+.upload-area-glass.drag-over {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
+    border-color: #8A9A5B;
+    box-shadow: 0 0 40px rgba(34, 197, 94, 0.4);
+    transform: scale(1.02);
+}
+
+.upload-area-glass .upload-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.upload-area-glass .upload-icon i {
+    font-size: 5rem;
+    color: #8A9A5B;
+    /* margin-bottom: 1.5rem; -- removed */
+    filter: drop-shadow(0 0 10px rgba(138, 154, 91, 0.4));
+}
+
+.upload-area-glass p {
+    color: var(--text-light);
+    font-size: 1.1rem;
+    margin: 0.5rem 0;
+}
+
+.upload-area-glass form {
+    height: 100%;
+    width: 100%;
+    display: flex; /* Make the form a flex container too */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.upload-area-glass .text-muted {
+    color: var(--text-muted);
+}
+
+/* Image Preview */
+#image-preview {
+    max-height: 500px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: var(--border-radius-sm);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* Diagnosis Results */
+#disease-name {
+    font-weight: 700;
+    color: var(--primary-green);
+    font-size: 1.75rem;
+    margin-bottom: 1rem;
+    text-shadow: 0 0 15px var(--green-glow);
+}
+
+#health-status {
+    color: var(--text-light);
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
+#detailed-symptoms ul,
+#prevention-methods ul {
+    padding-left: 1.5rem;
+    color: var(--text-light);
+}
+
+#detailed-symptoms li,
+#prevention-methods li {
+    margin-bottom: 0.75rem;
+    line-height: 1.6;
+}
+
+/* Chat Tab */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    padding-left: 1.5rem;
+    height: 100%;
+    width: 100%; /* Ensure it takes full width */
+}
+
+.chat-box-glass {
+    flex-grow: 1;
+    padding: 2rem;
+    overflow-y: auto;
+    margin-bottom: 1.5rem;
+    min-height: 400px;
+    max-height: calc(100vh - 250px);
+}
+
+.chat-message {
+    padding: 1rem 1.5rem;
+    border-radius: var(--border-radius-sm);
+    margin-bottom: 1rem;
+    max-width: 75%;
+    line-height: 1.7;
+    font-size: 0.95rem;
+    animation: fadeIn 0.3s ease-out; /* Changed to fadeIn */
+    background: var(--glass-bg); /* Neutral glassmorphism background */
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border); /* Neutral glassmorphism border */
+    box-shadow: 0 4px 12px var(--glass-shadow); /* Consistent shadow */
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.chat-message.user {
+    color: white;
+    margin-left: auto;
+    margin-right: 0; /* Ensure right alignment */
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: var(--border-radius-sm); /* Adjust for consistent corner */
+    background: var(--glass-bg-strong); /* Slightly stronger glass for user */
+    border-color: rgba(34, 197, 94, 0.4); /* Greenish border for user */
+    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); /* Greenish shadow for user */
+}
+
+.chat-message.bot {
+    color: var(--text-light);
+    margin-right: auto;
+    margin-left: 0; /* Ensure left alignment */
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: var(--border-radius-sm); /* Adjust for consistent corner */
+    background: var(--glass-bg); /* Revert to base glass-bg */
+    border-color: var(--glass-border); /* Revert to base glass-border */
+    white-space: pre-wrap; /* Preserve formatting */
+    animation: none; /* Remove bot-pulse animation */
+}
+
+/* Remove bot-pulse keyframes as it's no longer used */
+
+/* Thinking Dots Animation */
+@keyframes fadeInOut {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 1; }
+}
+
+.thinking-dots .dot {
+    opacity: 0.3;
+    animation: fadeInOut 1.4s infinite;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--text-light);
+    margin: 0 1px;
+}
+
+.thinking-dots .dot:nth-child(1) { animation-delay: 0s; }
+.thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; }
+
+.chat-message.bot {
+    color: var(--text-light);
+    margin-right: auto;
+    margin-left: 0; /* Ensure left alignment */
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: var(--border-radius-sm); /* Adjust for consistent corner */
+    background: var(--glass-bg); /* Revert to base glass-bg */
+    border-color: var(--glass-border); /* Revert to base glass-border */
+    white-space: pre-wrap; /* Preserve formatting */
+    animation: none; /* Remove bot-pulse animation */
+    
+    /* New styles for bot message bubbles */
+    padding: 12px;
+    border-radius: 15px;
+}
+
+.bot-message {
+    white-space: pre-wrap;
+    /* Existing bot-message styles */
+}
+
+/* Markdown styling within bot messages */
+.bot-message h1, .bot-message h2, .bot-message h3, .bot-message h4, .bot-message h5, .bot-message h6 {
+    color: var(--primary-green);
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.bot-message h3 {
+    font-size: 1.1em;
+    margin-top: 10px;
+}
+
+.bot-message ul {
+    padding-left: 20px;
+    margin-bottom: 1em;
+}
+
+.bot-message ol {
+    padding-left: 20px;
+    margin-bottom: 1em;
+}
+
+.bot-message li {
+    margin-bottom: 0.5em;
+    line-height: 1.6;
+}
+
+.bot-message p {
+    margin-bottom: 8px;
+    line-height: 1.6;
+}
+
+.bot-message a {
+    color: var(--emerald-green);
+    text-decoration: underline;
+}
+
+.bot-message strong {
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.bot-message em {
+    font-style: italic;
+}
+
+.bot-message code {
+    background-color: rgba(34, 197, 94, 0.1);
+    color: var(--emerald-green);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-family: 'Fira Code', 'Roboto Mono', monospace;
+    font-size: 0.85em;
+}
+
+.bot-message pre {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 1em;
+    overflow-x: auto;
+    font-family: 'Fira Code', 'Roboto Mono', monospace;
+    font-size: 0.85em;
+    margin-bottom: 1em;
+}
+
+.bot-message blockquote {
+    border-left: 4px solid var(--primary-green);
+    padding-left: 1em;
+    margin-left: 0;
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+.bot-message hr {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 1.5em 0;
+}
+
+/* --- Model Showcase --- */
+.showcase-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem 0;
+}
+
+.showcase-btn {
+    background: var(--glass-bg);
+    border: 1.5px solid var(--glass-border);
+    border-radius: var(--border-radius-sm);
+    padding: 1.5rem;
+    color: var(--text-light);
+    font-weight: 600;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    will-change: transform, box-shadow;
+}
+
+.showcase-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: var(--green-glow);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.4s, height 0.4s;
+    opacity: 0;
+    z-index: 0;
+}
+
+.showcase-btn:hover::before,
+.showcase-btn:focus::before {
+    width: 200%;
+    height: 200%;
+    opacity: 1;
+}
+
+.showcase-btn:hover {
+    transform: translateY(-5px) scale(1.03);
+    border-color: var(--primary-green);
+    color: var(--primary-color);
+    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.3);
+}
+
+.showcase-btn-title {
+    position: relative;
+    z-index: 1;
+    font-size: 1rem;
+    pointer-events: none; /* So it doesn't interfere with the button click */
+}
+
+/* Showcase Overlay & Card */
+.showcase-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1050;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(0px);
+    -webkit-backdrop-filter: blur(0px);
+    opacity: 0;
+    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    -webkit-transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.showcase-overlay.visible {
+    opacity: 1;
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+}
+
+.showcase-card {
+    position: fixed;
+    background: rgba(20, 28, 46, 0.95); /* Slightly darker for better text read */
+    backdrop-filter: blur(40px) saturate(180%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
+    border: 1.5px solid var(--glass-border);
+    border-radius: var(--border-radius);
+    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.5);
+    z-index: 1051;
+    overflow: hidden;
+    opacity: 0;
+    will-change: transform, width, height, top, left, opacity;
+    transition: all 0.6s cubic-bezier(0.45, 0, 0.1, 1);
+    
+    /* --- KEY CHANGES FOR LANDSCAPE WIDTH --- */
+    width: 850px;       /* 300px was too small. 850px is wide/landscape. */
+    max-width: 95vw;    /* Ensures it fits on smaller screens if needed */
+    min-height: 350px; 
+    
+    /* Centering logic (optional, ensures it stays center) */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    
+    display: flex;
+    flex-direction: column;
+}
+
+.showcase-card.expanding {
+    opacity: 1;
+}
+
+.showcase-card.expanded {
+    width: 850px !important; /* Explicitly set fixed width */
+    height: 700px; /* Explicitly set fixed height */
+    max-width: 90vw; /* Responsive constraint */
+    max-height: 90vh; /* Responsive constraint */
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    margin: 0 !important; /* Remove external offsets */
+    opacity: 1;
+}
+
+.showcase-content {
+    padding: 3rem; /* Increased padding */
+    height: 100%;
+    overflow-y: auto; /* Added for scrollability */
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.4s 0.3s ease-out, transform 0.4s 0.3s ease-out;
+}
+
+/* Custom scrollbar for showcase-content */
+.showcase-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.showcase-content::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+}
+
+.showcase-content::-webkit-scrollbar-thumb {
+    background-color: var(--primary-green);
+    border-radius: 10px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.showcase-content::-webkit-scrollbar-thumb:hover {
+    background-color: var(--emerald-green);
+}
+
+.showcase-card.expanded .showcase-content {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.btn-close-glass {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    color: white;
+    font-size: 24px;
+    line-height: 38px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    z-index: 10;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 0.3s 0.5s, transform 0.3s 0.5s;
+}
+
+.showcase-card.expanded .btn-close-glass {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.btn-close-glass:hover {
+    background: rgba(255, 0, 0, 0.3);
+    transform: scale(1.1) rotate(90deg);
+}
+
+/* Showcase Content Typography */
+.showcase-content h2 {
+    color: var(--primary-green);
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 0 10px var(--green-glow);
+    font-size: 1.8rem; /* Reset font size for title */
+}
+
+.showcase-content p,
+.showcase-content ul li {
+    white-space: normal; /* Ensure text wraps naturally */
+}
+
+

static/js/main.js

@@ -0,0 +1,440 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    // --- Globals & Element Selectors ---
+    const sidebar = document.getElementById('sidebar');
+    const content = document.getElementById('content');
+    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    const navLinks = document.querySelectorAll('.sidebar-nav .list-unstyled a');
+    const tabs = document.querySelectorAll('.content-tab');
+    
+    // Diagnose Tab Elements
+    const uploadArea = document.getElementById('upload-area');
+    const imageUploadInput = document.getElementById('image-upload');
+    const loadingSpinner = document.getElementById('loading-spinner');
+    const diagnosisResult = document.getElementById('diagnosis-result');
+    const imagePreview = document.getElementById('image-preview');
+    const diseaseName = document.getElementById('disease-name');
+    const healthStatus = document.getElementById('health-status');
+    const sourceModelBadge = document.getElementById('source-model-badge');
+    const detailedSymptoms = document.getElementById('detailed-symptoms');
+    const preventionMethods = document.getElementById('prevention-methods');
+    const smartAnalysis = document.getElementById('smart-analysis');
+    const diagnoseNewImageBtn = document.getElementById('diagnose-new-image-btn');
+
+    // Analysis Tab Elements
+    const placeholderMsg = document.getElementById('placeholder-msg');
+    const analysisLoader = document.getElementById('analysis-loader');
+    const analysisDashboard = document.getElementById('analysis-dashboard');
+
+    // Chat Tab Elements
+    const chatForm = document.getElementById('chat-form');
+    const chatInput = document.getElementById('chat-input');
+    const chatBox = document.getElementById('chat-box');
+
+    // Showcase Tab Elements
+    const showcaseGrid = document.getElementById('showcase-grid');
+    const showcaseOverlay = document.getElementById('showcase-overlay');
+    const showcaseCard = document.getElementById('showcase-card');
+    const showcaseContent = document.getElementById('showcase-content');
+    const showcaseCloseBtn = document.getElementById('showcase-close-btn');
+
+    // --- Sidebar Functionality ---
+    sidebarCollapse.addEventListener('click', () => {
+        sidebar.classList.toggle('collapsed');
+        content.classList.toggle('full-width');
+    });
+
+    // --- Tab Navigation ---
+    navLinks.forEach(link => {
+        link.parentElement.addEventListener('click', (e) => {
+            e.preventDefault();
+            const tabId = link.parentElement.getAttribute('data-tab');
+
+            // Update active link
+            document.querySelector('.sidebar-nav .list-unstyled .active').classList.remove('active');
+            link.parentElement.classList.add('active');
+
+            // Update active tab
+            tabs.forEach(tab => {
+                tab.classList.remove('active-tab');
+            });
+            const targetTab = document.getElementById(`${tabId}-tab`);
+            targetTab.classList.add('active-tab');
+
+            // Smart Tab Listener: Analysis tab logic
+            if (tabId === 'analysis') {
+                // Check if imagePreview.src contains a valid image (not #)
+                if (imagePreview.src && imagePreview.src !== '#') {
+                    // Only fetch if dashboard is not currently displayed or its src is empty
+                    if (analysisDashboard.style.display === 'none' || !analysisDashboard.src || analysisDashboard.src === window.location.href + '#') {
+                        placeholderMsg.style.display = 'none';
+                        analysisLoader.style.display = 'block';
+                        analysisDashboard.style.display = 'none';
+
+                        fetch('/visualize')
+                            .then(response => {
+                                if (!response.ok) {
+                                    return response.json().then(err => { 
+                                        throw new Error(err.error || `HTTP error! Status: ${response.status}`); 
+                                    });
+                                }
+                                return response.json();
+                            })
+                            .then(data => {
+                                if (data.graph) {
+                                    // Inject the Base64 string into #analysis-dashboard
+                                    analysisDashboard.src = data.graph;
+                                    analysisDashboard.style.display = 'block';
+                                    placeholderMsg.style.display = 'none';
+                                } else {
+                                    throw new Error("No graph data received from server.");
+                                }
+                            })
+                            .catch(error => {
+                                console.error('Analysis Fetch Error:', error);
+                                placeholderMsg.innerHTML = `<p class="text-light">Error: ${error.message}</p>`;
+                                placeholderMsg.style.display = 'block';
+                                analysisDashboard.style.display = 'none';
+                            })
+                            .finally(() => {
+                                // Hide loader
+                                analysisLoader.style.display = 'none';
+                            });
+                    }
+                    // If already visible and has content, do nothing, just make sure other elements are hidden
+                    else {
+                        placeholderMsg.style.display = 'none';
+                        analysisLoader.style.display = 'none';
+                        analysisDashboard.style.display = 'block'; // Ensure it's visible if already loaded
+                    }
+                } else {
+                    // No valid image - show placeholder
+                    placeholderMsg.style.display = 'block';
+                    analysisLoader.style.display = 'none';
+                    analysisDashboard.style.display = 'none';
+                }
+            }
+        });
+    });
+
+    // --- Diagnose Tab: File Upload ---
+    uploadArea.addEventListener('click', () => imageUploadInput.click());
+
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('drag-over');
+    });
+
+    uploadArea.addEventListener('dragleave', () => {
+        uploadArea.classList.remove('drag-over');
+    });
+
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('drag-over');
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            imageUploadInput.files = files;
+            handleImageUpload(files[0]);
+        }
+    });
+
+    imageUploadInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            handleImageUpload(e.target.files[0]);
+        }
+    });
+
+    // Event listener for the new "Diagnose New Image" button
+    diagnoseNewImageBtn.addEventListener('click', () => {
+        diagnosisResult.style.display = 'none'; // Hide results
+        imagePreview.src = '#'; // Clear image preview
+        // Clear previous data
+        diseaseName.textContent = '';
+        healthStatus.textContent = '';
+        detailedSymptoms.innerHTML = '';
+        preventionMethods.innerHTML = '';
+        smartAnalysis.textContent = '';
+        sourceModelBadge.style.display = 'none';
+        
+        // Reset analysis dashboard state
+        analysisDashboard.style.display = 'none';
+        analysisDashboard.src = '#'; 
+
+        uploadArea.style.display = 'flex'; // Show upload area
+        imageUploadInput.value = ''; // Clear file input
+    });
+
+    async function handleImageUpload(file) {
+        if (!file.type.startsWith('image/')) {
+            alert('Please upload a valid image file.');
+            return;
+        }
+
+        // Show loading state
+        loadingSpinner.style.display = 'block';
+        diagnosisResult.style.display = 'none';
+        uploadArea.style.display = 'none';
+
+        // Display image preview
+        const reader = new FileReader();
+        reader.onload = e => imagePreview.src = e.target.result;
+        reader.readAsDataURL(file);
+
+        // Prepare form data and send to backend
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            const response = await fetch('/diagnose', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            displayDiagnosis(data);
+
+        } catch (error) {
+            console.error('Diagnosis Error:', error);
+            displayError('Failed to get diagnosis. Please ensure the backend is running and check the console.');
+        } finally {
+            // Hide loading state and show results
+            loadingSpinner.style.display = 'none';
+            diagnosisResult.style.display = 'block';
+        }
+    }
+    
+    function displayError(message) {
+        uploadArea.style.display = 'flex'; // Show upload area again
+        diseaseName.textContent = 'Error';
+        healthStatus.textContent = message;
+        detailedSymptoms.innerHTML = '';
+        preventionMethods.innerHTML = '';
+        smartAnalysis.textContent = '';
+        sourceModelBadge.style.display = 'none';
+        diagnosisResult.style.display = 'block';
+    }
+
+
+    function displayDiagnosis(data) {
+        // Format text with bullet points
+        const formatBulletPoints = (text) => {
+            if (!text) return '';
+            return '<ul>' + text.split('\\n').map(item => item.trim().startsWith('-') ? `<li>${item.substring(1).trim()}</li>` : `<li>${item.trim()}</li>`).join('') + '</ul>';
+        };
+
+        diseaseName.textContent = data.disease_name || 'N/A';
+        healthStatus.textContent = data.health_status || 'N/A';
+        smartAnalysis.textContent = data.smart_analysis || 'N/A';
+        
+        detailedSymptoms.innerHTML = formatBulletPoints(data.detailed_symptoms);
+        preventionMethods.innerHTML = formatBulletPoints(data.prevention_methods);
+
+        // Update source model badge
+        if (data.source_model) {
+            sourceModelBadge.textContent = `Source: ${data.source_model}`;
+            sourceModelBadge.className = 'badge'; // Reset class
+            if (data.source_model === 'Keras + DB') {
+                sourceModelBadge.classList.add('bg-success');
+            } else {
+                sourceModelBadge.classList.add('bg-info');
+            }
+            sourceModelBadge.style.display = 'inline-block';
+        }
+    }
+
+    // --- Chat Tab: Chat Functionality ---
+    chatForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const message = chatInput.value.trim();
+        if (!message) return;
+
+        // Append user message immediately
+        appendMessage(message, 'user');
+        chatInput.value = ''; // Clear input
+
+        // Create a new message bubble for the bot's response and indicate loading
+        const botDiv = appendMessage('', 'bot'); // Append '' initially
+        // Add pulsing dots
+        const thinkingIndicator = document.createElement('div');
+        thinkingIndicator.className = 'thinking-dots';
+        thinkingIndicator.innerHTML = '<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>';
+        botDiv.appendChild(thinkingIndicator);
+        chatBox.scrollTop = chatBox.scrollHeight;
+
+        try {
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: message })
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorText}`);
+            }
+
+            const botResponseText = await response.text(); // Get the full response text
+            botDiv.innerHTML = ''; // Clear thinking indicator
+            botDiv.innerHTML = marked.parse(botResponseText); // Use marked.parse for HTML rendering
+            chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom
+
+        } catch (error) {
+            console.error('Bytez API Error:', error);
+            botDiv.innerHTML = 'Sorry, I am having trouble connecting to the AI. Please try again later. ' + error.message; // Use innerHTML for error
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+    }); // This closes the chatForm.addEventListener
+
+    function appendMessage(message, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `chat-message ${sender}`;
+        if (sender === 'bot') {
+            messageDiv.classList.add('bot-message'); // Add bot-message class for styling
+        }
+        messageDiv.textContent = message;
+        chatBox.appendChild(messageDiv);
+        chatBox.scrollTop = chatBox.scrollHeight;
+        return messageDiv;
+    }
+
+    // --- Model Showcase Tab: Interactive Expansion ---
+    let activeCard = null;
+
+    async function loadModelClasses() {
+        if (!showcaseGrid) return;
+        try {
+            const response = await fetch('/api/classes');
+            if (!response.ok) throw new Error('Failed to fetch classes');
+            const classes = await response.json();
+
+            if (classes && !classes.error) {
+                showcaseGrid.innerHTML = ''; // Clear previous
+                classes.forEach(className => {
+                    const btn = document.createElement('button');
+                    btn.className = 'showcase-btn';
+                    // The className is now the source of truth, e.g., "Apple Apple Scab"
+                    btn.dataset.classId = className;
+
+                    const title = document.createElement('span');
+                    title.className = 'showcase-btn-title';
+                    // The text content is the same as the ID
+                    title.textContent = className;
+                    
+                    btn.appendChild(title);
+                    btn.addEventListener('click', () => openShowcaseCard(btn));
+                    showcaseGrid.appendChild(btn);
+                });
+            } else {
+                showcaseGrid.innerHTML = '<p class="text-danger">Could not load model classes.</p>';
+            }
+        } catch (error) {
+            console.error('Error fetching model classes:', error);
+            showcaseGrid.innerHTML = '<p class="text-danger">Could not load model classes.</p>';
+        }
+    }
+
+    async function openShowcaseCard(button) {
+        if (activeCard) return;
+        activeCard = button;
+
+        const classId = button.dataset.classId;
+        const rect = button.getBoundingClientRect();
+
+        // 1. Show overlay
+        showcaseOverlay.style.display = 'flex';
+        requestAnimationFrame(() => {
+            showcaseOverlay.classList.add('visible');
+        });
+
+        // 2. Set initial card position and size
+        showcaseCard.style.top = `${rect.top}px`;
+        showcaseCard.style.left = `${rect.left}px`;
+        showcaseCard.style.width = `${rect.width}px`;
+        showcaseCard.style.height = `${rect.height}px`;
+
+        // 3. Fetch data and prepare content
+        showcaseContent.innerHTML = '<div class="spinner-border text-light" role="status"><span class="visually-hidden">Loading...</span></div>';
+        // Use encodeURIComponent to handle spaces and special characters in the classId
+        const dataPromise = fetch(`/api/showcase/${encodeURIComponent(classId)}`).then(res => res.json());
+
+        // 4. Start expansion animation
+        requestAnimationFrame(() => {
+            showcaseCard.classList.add('expanding');
+            requestAnimationFrame(() => {
+                showcaseCard.classList.add('expanded');
+            });
+        });
+
+        // 5. Populate content when data arrives
+        try {
+            const data = await dataPromise;
+            if (data.error) throw new Error(data.error);
+
+            showcaseContent.innerHTML = `
+                <h2>${data.title}</h2>
+                <p>${data.short_description}</p>
+                <div class="row">
+                    <div class="col-md-6">
+                        <h3><i class="fa-solid fa-microscope me-2"></i>Quick Symptoms</h3>
+                        <ul>${data.quick_symptoms.map(s => `<li>${s}</li>`).join('')}</ul>
+                    </div>
+                    <div class="col-md-6">
+                        <h3><i class="fa-solid fa-shield-alt me-2"></i>Fast Prevention</h3>
+                        <ul>${data.fast_prevention.map(p => `<li>${p}</li>`).join('')}</ul>
+                    </div>
+                </div>
+            `;
+        } catch (error) {
+            showcaseContent.innerHTML = `<p class="text-danger">Error: ${error.message}</p>`;
+        }
+    }
+
+    function closeShowcaseCard() {
+        if (!activeCard) return;
+
+        const rect = activeCard.getBoundingClientRect();
+
+        // Reverse the animation
+        showcaseCard.classList.remove('expanded');
+        
+        // Reset to button's position - needs to be done after the transition starts
+        setTimeout(() => {
+            showcaseCard.style.top = `${rect.top}px`;
+            showcaseCard.style.left = `${rect.left}px`;
+            showcaseCard.style.width = `${rect.width}px`;
+            showcaseCard.style.height = `${rect.height}px`;
+        }, 0);
+
+        showcaseOverlay.classList.remove('visible');
+        
+        // Hide elements after transition
+        showcaseCard.addEventListener('transitionend', () => {
+            showcaseCard.classList.remove('expanding');
+            showcaseOverlay.style.display = 'none';
+            showcaseContent.innerHTML = '';
+            activeCard = null;
+        }, { once: true });
+    }
+
+    // Event listeners for closing the card
+    showcaseCloseBtn.addEventListener('click', closeShowcaseCard);
+    showcaseOverlay.addEventListener('click', (e) => {
+        if (e.target === showcaseOverlay) { // Only if clicking the background itself
+            closeShowcaseCard();
+        }
+    });
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && activeCard) {
+            closeShowcaseCard();
+        }
+    });
+    
+    // --- Initializations ---
+    loadModelClasses();
+});
+

templates/index.html

@@ -0,0 +1,173 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plantoi - AI Plant Diagnosis</title>
+
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- FontAwesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="background-animation"></div>
+    <div class="main-container">
+        <!-- Collapsible Sidebar -->
+        <nav id="sidebar" class="sidebar-nav">
+            <div class="sidebar-header">
+                <h3><i class="fa-solid fa-leaf me-2"></i>Plantoi</h3>
+            </div>
+            <ul class="list-unstyled components">
+                <li class="active" data-tab="diagnose">
+                    <a href="#"><i class="fa-solid fa-stethoscope"></i><span>Diagnose</span></a>
+                </li>
+                <li data-tab="analysis">
+                    <a href="#"><i class="fa-solid fa-chart-pie"></i><span>Visual Analysis</span></a>
+                </li>
+                <li data-tab="chat">
+                    <a href="#"><i class="fa-solid fa-comments"></i><span>Ask AI</span></a>
+                </li>
+                <li data-tab="showcase">
+                    <a href="#"><i class="fa-solid fa-microscope"></i><span>Model Showcase</span></a>
+                </li>
+            </ul>
+            <div class="sidebar-toggler">
+                <button type="button" id="sidebarCollapse" class="btn btn-glass">
+                    <i class="fas fa-arrow-left"></i>
+                </button>
+            </div>
+        </nav>
+
+        <!-- Page Content -->
+        <div id="content" class="flex-grow-1">
+            <!-- Diagnose Tab -->
+            <div id="diagnose-tab" class="content-tab active-tab">
+                <div class="container-fluid">
+                    <h2 class="tab-title">Plant Disease Diagnosis</h2>
+                    <div id="upload-area" class="upload-area-glass">
+                        <form class="h-100">
+                            <div class="upload-icon">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                            </div>
+                            <p><strong>Drag & Drop your plant image here</strong></p>
+                            <p class="text-muted">or click to select a file</p>
+                            <input type="file" id="image-upload" accept="image/*" hidden>
+                        </form>
+                    </div>
+                    <div id="diagnosis-result" class="mt-4" style="display: none;">
+                        <div class="row">
+                            <div class="col-lg-4 mb-4">
+                                <div class="glass-card">
+                                    <h5 class="card-header-glass"><i class="fa-solid fa-image me-2"></i>Preview</h5>
+                                    <img id="image-preview" src="#" alt="Image Preview" class="img-fluid rounded">
+                                </div>
+                            </div>
+                            <div class="col-lg-8">
+                                <div class="glass-card mb-4">
+                                     <h5 class="card-header-glass"><i class="fa-solid fa-pills me-2"></i>Diagnosis Report</h5>
+                                     <div class="card-body-glass">
+                                        <h3 id="disease-name"></h3>
+                                        <p id="health-status"></p>
+                                        <span id="source-model-badge" class="badge"></span>
+                                     </div>
+                                </div>
+                                <div class="glass-card">
+                                    <div class="card-body-glass">
+                                        <h5><i class="fa-solid fa-notes-medical me-2"></i>Detailed Symptoms</h5>
+                                        <div id="detailed-symptoms"></div>
+                                        <hr>
+                                        <h5><i class="fa-solid fa-shield-virus me-2"></i>Prevention Methods</h5>
+                                        <div id="prevention-methods"></div>
+                                        <hr>
+                                        <h5><i class="fa-solid fa-lightbulb me-2"></i>Smart Analysis</h5>
+                                        <p id="smart-analysis"></p>
+                                    </div>
+                                </div>
+                                <button id="diagnose-new-image-btn" class="btn btn-glass mt-4 w-100"><i class="fa-solid fa-redo me-2"></i>Diagnose New Image</button>
+                            </div>
+                        </div>
+                    </div>
+                     <div id="loading-spinner" class="text-center mt-5" style="display: none;">
+                        <div class="spinner-border text-light" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-2 text-light">AI is analyzing your plant...</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Visual Analysis Tab -->
+            <div id="analysis-tab" class="content-tab">
+                <div class="container-fluid">
+                    <h2 class="tab-title">Automated Visual Analysis</h2>
+                    <div class="glass-card">
+                        <div id="placeholder-msg" class="card-body-glass text-center">
+                            <p class="text-light">No diagnosis data found. Please upload a leaf in the Diagnose tab first.</p>
+                        </div>
+                        <div id="analysis-loader" class="card-body-glass text-center" style="display: none;">
+                            <div class="spinner-border text-light" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <p class="mt-2 text-light">Generating health metrics dashboard...</p>
+                        </div>
+                        <img id="analysis-dashboard" src="" alt="Analysis Dashboard" style="display:none; width: 100%; border-radius: 15px;">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Ask AI (Chat) Tab -->
+            <div id="chat-tab" class="content-tab">
+                <div class="d-flex h-100">
+
+                    <!-- Main Chat Area -->
+                    <div class="chat-container flex-grow-1">
+                        <div id="chat-box" class="chat-box-glass">
+                            <!-- Chat messages will be appended here -->
+                             <div class="chat-message bot">Welcome to the AI Botanist. Ask me anything about your plant's health.</div>
+                        </div>
+                        <div class="chat-input-glass">
+                            <form id="chat-form">
+                                <input type="text" id="chat-input" class="form-control" placeholder="Ask about your plant...">
+                                <button type="submit" class="btn btn-glass-send"><i class="fa-solid fa-paper-plane"></i></button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Model Showcase Tab -->
+            <div id="showcase-tab" class="content-tab">
+                 <div class="container-fluid">
+                    <h2 class="tab-title">Interactive Model Showcase</h2>
+                    <p class="text-light mb-4">The AI model recognizes 38 plant conditions. Click any class to see a detailed diagnosis card.</p>
+                    <div id="showcase-grid" class="showcase-grid">
+                        <!-- Glassmorphism buttons will be populated by JS -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Showcase Overlay -->
+    <div id="showcase-overlay" class="showcase-overlay" style="display: none;">
+        <div id="showcase-card" class="showcase-card">
+            <button id="showcase-close-btn" class="btn-close-glass">&times;</button>
+            <div id="showcase-content" class="showcase-content">
+                <!-- Dynamic content will be injected here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>