Upload 20 files

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.10-slim
+
+# Install system dependencies for OpenCV and others
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+
+# Install Python dependencies
+# Use --no-cache-dir to keep image size down
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Create directories for uploads and reports if they don't exist
+RUN mkdir -p static/uploads/single static/uploads/multiple Reports Models
+
+# Expose the port Hugging Face Spaces expects
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,27 @@
+---
+title: Prism Content Moderation
+emoji: 🛡️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+---
+
+# Prism: AI-Powered Content Moderation
+
+Prism is an automated content moderation pipeline that uses advanced AI models to audit images for compliance, safety, and quality.
+
+## Features
+- **Text Analysis:** OCR (EasyOCR) + VLM (InternVL) to check taglines, CTAs, and Terms & Conditions.
+- **Visual Checks:** Detects ribbons, gestures, and assesses image quality.
+- **Content Safety:** Flags offensive, risky (gambling/trading), or illegal content using CLIP and text analysis.
+
+## Models Used
+- **InternVL2_5-1B-MPO:** Multimodal LLM for detailed image understanding.
+- **EasyOCR:** For robust text extraction.
+- **CLIP (ViT-B/32):** For zero-shot image classification (theme detection).
+
+## Usage
+Upload an image to get a detailed compliance report.

app.py

@@ -0,0 +1,458 @@
+from flask import Flask, render_template, request, jsonify, send_file, Response, stream_with_context
+from werkzeug.utils import secure_filename
+import os
+from pathlib import Path
+import shutil
+import io
+import zipfile
+import base64
+import json
+from pipeline import classify  # Ensure this is your classification logic
+
+app = Flask(__name__)
+
+# Configuration
+UPLOAD_FOLDER_SINGLE = 'static/uploads/single'
+UPLOAD_FOLDER_MULTIPLE = 'static/uploads/multiple'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
+
+app.config['UPLOAD_FOLDER_SINGLE'] = UPLOAD_FOLDER_SINGLE
+app.config['UPLOAD_FOLDER_MULTIPLE'] = UPLOAD_FOLDER_MULTIPLE
+app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024  # Increase to 100MB
+app.config['MAX_CONTENT_LENGTH_REPORT'] = 500 * 1024 * 1024  # 500MB for reports
+
+# Ensure upload directories exist
+os.makedirs(UPLOAD_FOLDER_SINGLE, exist_ok=True)
+os.makedirs(UPLOAD_FOLDER_MULTIPLE, exist_ok=True)
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def clear_uploads(folder):
+    upload_dir = Path(folder)
+    if upload_dir.exists():
+        shutil.rmtree(upload_dir)
+    upload_dir.mkdir(parents=True)
+
+# Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/single')
+def single():
+    return render_template('single.html')
+
+@app.route('/multiple')
+def multiple():
+    return render_template('multiple.html')
+
+@app.route('/clear_uploads', methods=['POST'])
+def clear_uploads_route():
+    try:
+        clear_uploads(app.config['UPLOAD_FOLDER_SINGLE'])
+        clear_uploads(app.config['UPLOAD_FOLDER_MULTIPLE'])
+        return jsonify({'message': 'Upload folders cleared successfully'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# Single Image Classification Routes
+@app.route('/upload_single', methods=['POST'])
+def upload_single():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    
+    if file and allowed_file(file.filename):
+        # Clear old files
+        clear_uploads(app.config['UPLOAD_FOLDER_SINGLE'])
+        
+        # Save new file
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER_SINGLE'], filename)
+        file.save(filepath)
+        
+        return jsonify({
+            'message': 'File uploaded successfully',
+            'filename': filename
+        })
+    
+    return jsonify({'error': 'Invalid file type'}), 400
+
+@app.route('/classify_single', methods=['POST'])
+def classify_single():
+    data = request.get_json()
+    filename = data.get('filename')
+    if not filename:
+        return jsonify({'error': 'No filename provided'}), 400
+    
+    filepath = os.path.join(app.config['UPLOAD_FOLDER_SINGLE'], filename)
+    if not os.path.exists(filepath):
+        return jsonify({'error': 'File not found'}), 404
+    
+    try:
+        classification_result, result_table, failure_labels = classify(filepath)
+        return jsonify({
+            'classification': classification_result,
+            'result_table': result_table
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# Multiple Image Classification Routes
+@app.route('/upload_multiple', methods=['POST'])
+def upload_multiple():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file uploaded'}), 400
+    
+    file = request.files['file']
+    if not file or not allowed_file(file.filename):
+        return jsonify({'error': 'Invalid file type'}), 400
+
+    try:
+        # Save to temp directory
+        temp_dir = os.path.join(app.config['UPLOAD_FOLDER_MULTIPLE'], 'temp')
+        os.makedirs(temp_dir, exist_ok=True)
+        
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(temp_dir, filename)
+        file.save(filepath)
+        
+        # Read the file and convert to base64
+        with open(filepath, 'rb') as img_file:
+            img_data = base64.b64encode(img_file.read()).decode()
+        
+        return jsonify({
+            'filename': filename,
+            'image': img_data,
+            'status': 'Queued'
+        })
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/classify_multiple', methods=['POST'])
+def classify_multiple():
+    temp_dir = os.path.join(app.config['UPLOAD_FOLDER_MULTIPLE'], 'temp')
+    
+    # Get list of files to process
+    files = [f for f in os.listdir(temp_dir) 
+             if os.path.isfile(os.path.join(temp_dir, f)) and allowed_file(f)]
+    
+    results = []
+    for filename in files:
+        filepath = os.path.join(temp_dir, filename)
+        
+        # Process single image
+        classification_result, result_table, failure_labels = classify(filepath)
+        
+        # Move file to appropriate directory
+        category_dir = os.path.join(app.config['UPLOAD_FOLDER_MULTIPLE'], classification_result.lower())
+        os.makedirs(category_dir, exist_ok=True)
+        dest_path = os.path.join(category_dir, filename)
+        shutil.move(filepath, dest_path)
+        
+        # Read the processed image
+        with open(dest_path, 'rb') as img_file:
+            img_data = base64.b64encode(img_file.read()).decode()
+        
+        # Return single result immediately
+        result = {
+            'filename': filename,
+            'status': classification_result,
+            'labels': failure_labels,
+            'image': img_data
+        }
+        
+        # Use Flask's Response streaming to send results one by one
+        return jsonify(result)
+
+    return jsonify({'message': 'All files processed'})
+
+@app.route('/download_multiple/<category>')
+def download_multiple(category):
+    if category not in ['pass', 'fail']:
+        return jsonify({'error': 'Invalid category'}), 400
+    
+    category_dir = os.path.join(app.config['UPLOAD_FOLDER_MULTIPLE'], category)
+    if not os.path.exists(category_dir):
+        return jsonify({'error': 'No images found'}), 404
+    
+    memory_file = io.BytesIO()
+    with zipfile.ZipFile(memory_file, 'w') as zf:
+        for filename in os.listdir(category_dir):
+            filepath = os.path.join(category_dir, filename)
+            if os.path.isfile(filepath) and allowed_file(filename):
+                zf.write(filepath, filename)
+    
+    memory_file.seek(0)
+    return send_file(
+        memory_file,
+        mimetype='application/zip',
+        as_attachment=True,
+        download_name=f'{category}_images.zip'
+    )
+
+@app.route('/save_report', methods=['POST'])
+def save_report():
+    try:
+        data = request.get_json()
+        date = data.get('date')
+        time = data.get('time')
+        summary_content = data.get('summary')
+        table_data = data.get('tableData', [])
+
+        if not all([date, time, summary_content, table_data]):
+            return jsonify({'error': 'Invalid data provided'}), 400
+
+        # Create the table HTML
+        table_rows = []
+        for item in table_data:
+            labels_html = ''
+            if item['status'].lower() == 'fail' and item['labels']:
+                labels = ' '.join(f'<span class="label">{label}</span>' for label in item['labels'])
+                labels_html = f'<div class="labels">{labels}</div>'
+            
+            row = f"""
+                <tr>
+                    <td class="serial">{item['serialNo']}</td>
+                    <td class="image-col">
+                        <img src="{item['image']}" alt="{item['filename']}"
+                             class="thumbnail" onclick="openModal(this)"
+                             style="cursor: pointer;">
+                        <div class="filename">{item['filename']}</div>
+                    </td>
+                    <td class="result-col">
+                        <span class="result-{item['status'].lower()}">{item['status']}</span>
+                    </td>
+                    <td class="labels-col">
+                        {labels_html if labels_html else '-'}
+                    </td>
+                </tr>
+            """
+            table_rows.append(row)
+
+        # Create directories
+        reports_dir = Path('Reports')
+        reports_dir.mkdir(exist_ok=True)
+        date_dir = reports_dir / date
+        date_dir.mkdir(exist_ok=True)
+
+        # Read the template
+        template_path = Path('templates/report_template.html')
+        with open(template_path, 'r', encoding='utf-8') as f:
+            template = f.read()
+
+        # Fill in the template
+        html_content = template.format(
+            date=date,
+            time=time,
+            summary_content=summary_content,
+            table_rows='\n'.join(table_rows)
+        )
+
+        # Save the file
+        filename = f'Report_{date}_{time}.html'
+        report_path = date_dir / filename
+        with open(report_path, 'w', encoding='utf-8') as f:
+            f.write(html_content)
+
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# Add new route for chunked report saving
+@app.route('/save_report_chunk', methods=['POST'])
+def save_report_chunk():
+    try:
+        chunk_data = request.get_json()
+        if not chunk_data:
+            return jsonify({'error': 'No data received'}), 400
+        
+        # Log received data for debugging
+        print(f"Received chunk data: {chunk_data.keys()}")
+        
+        # Validate all required fields are present
+        required_fields = ['chunkNumber', 'totalChunks', 'date', 'time', 'chunk']
+        if not all(field in chunk_data for field in required_fields):
+            missing_fields = [field for field in required_fields if field not in chunk_data]
+            return jsonify({'error': f'Missing required fields: {", ".join(missing_fields)}'}), 400
+
+        # Extract and validate data
+        try:
+            chunk_number = int(chunk_data['chunkNumber'])
+            total_chunks = int(chunk_data['totalChunks'])
+            date = str(chunk_data['date'])
+            time = str(chunk_data['time'])
+            chunk = chunk_data['chunk']
+            summary = chunk_data.get('summary', '')
+        except (ValueError, TypeError) as e:
+            return jsonify({'error': f'Invalid data format: {str(e)}'}), 400
+
+        # Validate chunk data
+        if not isinstance(chunk, list):
+            return jsonify({'error': 'Chunk must be an array'}), 400
+
+        # Create directories with error handling
+        try:
+            reports_dir = Path('Reports')
+            reports_dir.mkdir(exist_ok=True)
+            date_dir = reports_dir / date
+            date_dir.mkdir(exist_ok=True)
+            temp_dir = date_dir / 'temp'
+            temp_dir.mkdir(exist_ok=True)
+        except Exception as e:
+            return jsonify({'error': f'Failed to create directories: {str(e)}'}), 500
+
+        # Save chunk with error handling
+        try:
+            chunk_file = temp_dir / f'chunk_{chunk_number}.json'
+            chunk_data_to_save = {
+                'data': chunk,
+                'summary': summary if chunk_number == 0 else ''
+            }
+            with open(chunk_file, 'w', encoding='utf-8') as f:
+                json.dump(chunk_data_to_save, f)
+        except Exception as e:
+            return jsonify({'error': f'Failed to save chunk: {str(e)}'}), 500
+
+        # Process final chunk
+        if chunk_number == total_chunks - 1:
+            try:
+                # Collect all chunks
+                all_data = []
+                summary_content = ''
+                
+                # Verify all chunks exist
+                for i in range(total_chunks):
+                    chunk_file = temp_dir / f'chunk_{i}.json'
+                    if not chunk_file.exists():
+                        return jsonify({'error': f'Missing chunk file: chunk_{i}.json'}), 500
+                    
+                    with open(chunk_file, 'r', encoding='utf-8') as f:
+                        chunk_content = json.load(f)
+                        all_data.extend(chunk_content['data'])
+                        if chunk_content['summary']:
+                            summary_content = chunk_content['summary']
+
+                # Verify template exists
+                template_path = Path('templates/report_template.html')
+                multiple_path = Path('templates/multiple.html')
+                
+                if not template_path.exists() or not multiple_path.exists():
+                    return jsonify({'error': 'Template files not found'}), 500
+
+                # Copy the entire multiple.html content and remove upload section
+                with open(multiple_path, 'r', encoding='utf-8') as f:
+                    template = f.read()
+                    # Remove the upload section from template
+                    upload_start = template.find('<div class="upload-section">')
+                    upload_end = template.find('</div>', upload_start) + 6
+                    template = template.replace(template[upload_start:upload_end], '')
+                    # Replace placeholders
+                    template = template.replace('<h1>Multiple Images Classification</h1>', '<h1>Classification Report</h1>')
+                    template = template.replace('<p>Classify and segregate multiple images at once...</p>', '<p>{date} {time}</p>')
+                    template = template.replace('<div id="summary"></div>', '<div id="summary">{summary_content}</div>')
+                    template = template.replace('<tbody id="results-tbody">', '<tbody>{table_rows}</tbody>')
+
+                # Extract styles from multiple.html
+                with open(multiple_path, 'r', encoding='utf-8') as f:
+                    multiple_content = f.read()
+                    style_start = multiple_content.find('<style>') + 7
+                    style_end = multiple_content.find('</style>')
+                    styles = multiple_content[style_start:style_end].strip()
+
+                # Read and process the report template
+                with open(template_path, 'r', encoding='utf-8') as f:
+                    template = f.read()
+                    # Replace style placeholder with actual styles
+                    template = template.replace('{multiple_styles}', styles)
+                    # Replace single braces with double braces to escape them
+                    template = template.replace('{', '{{').replace('}', '}}')
+                    # Restore our format placeholders
+                    template = template.replace('{{date}}', '{date}') \
+                             .replace('{{time}}', '{time}') \
+                             .replace('{{summary_content}}', '{summary_content}') \
+                             .replace('{{table_rows}}', '{table_rows}')
+
+                # Create table rows with escaped curly braces (only failed items)
+                table_rows = []
+                serial_counter = 1  # Keep track of numbering
+                
+                for item in all_data:
+                    try:
+                        if item['status'].lower() == 'fail':  # Only process failed items
+                            labels_html = ''
+                            if item['labels']:
+                                labels = ' '.join(f'<span class="label">{label}</span>' 
+                                                for label in item['labels'])
+                                labels_html = f'<div class="labels">{labels}</div>'
+                            
+                            row = f"""
+                                <tr>
+                                    <td class="serial">{serial_counter}</td>
+                                    <td class="image-col">
+                                        <img src="{item['image']}" alt="{item['filename']}"
+                                             class="thumbnail" onclick="openModal(this)"
+                                             style="cursor: pointer;">
+                                        <div class="filename">{item['filename']}</div>
+                                    </td>
+                                    <td class="result-col">
+                                        <span class="result-fail">{item['status']}</span>
+                                    </td>
+                                    <td class="labels-col">
+                                        {labels_html if labels_html else '-'}
+                                    </td>
+                                </tr>
+                            """
+                            table_rows.append(row)
+                            serial_counter += 1
+                            
+                    except KeyError as e:
+                        return jsonify({'error': f'Missing required field in data: {str(e)}'}), 500
+
+                # Generate final HTML
+                try:
+                    html_content = template.format(
+                        date=date,
+                        time=time,
+                        summary_content=summary_content,
+                        table_rows='\n'.join(table_rows)
+                    )
+                except Exception as e:
+                    return jsonify({'error': f'Failed to generate HTML: {str(e)}'}), 500
+
+                # Save final report
+                try:
+                    filename = f'Report_{date}_{time}.html'
+                    report_path = date_dir / filename
+                    with open(report_path, 'w', encoding='utf-8') as f:
+                        f.write(html_content)
+                except Exception as e:
+                    return jsonify({'error': f'Failed to save report: {str(e)}'}), 500
+
+                # Cleanup
+                try:
+                    shutil.rmtree(temp_dir)
+                except Exception as e:
+                    print(f"Warning: Failed to clean up temp directory: {str(e)}")
+
+                return jsonify({'success': True})
+
+            except Exception as e:
+                return jsonify({'error': f'Error processing final chunk: {str(e)}'}), 500
+
+        return jsonify({'success': True, 'message': 'Chunk received'})
+
+    except Exception as e:
+        print(f"Error in save_report_chunk: {str(e)}")
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    # Clear uploads on startup
+    clear_uploads(app.config['UPLOAD_FOLDER_SINGLE'])
+    clear_uploads(app.config['UPLOAD_FOLDER_MULTIPLE'])
+    app.run(host='0.0.0.0', port=7860, debug=False)

config.py

@@ -0,0 +1,109 @@
+
+# ROI Constants
+BODY = (0.0, 0.0, 1.0, 1.0)
+TAG = (0.05, 0.62, 1.0, 0.65)
+DTAG = (0.05, 0.592, 1.0, 0.622)
+TNC = (0.02, 0.98, 1.0, 1.0)
+CTA = (0.68, 0.655, 0.87, 0.675)
+GNC = (0.5, 0.652, 0.93, 0.77)
+
+# ROIs for Ribbon Detection
+ROIS = [
+    # Top section divided into 3 parts
+    (0.0, 0.612, 0.33, 0.626),  # Top left
+    (0.33, 0.612, 0.66, 0.626),  # Top middle
+    (0.66, 0.612, 1.0, 0.626),  # Top right
+
+    # Bottom section divided into 3 parts
+    (0.0, 0.678, 0.33, 0.686),  # Bottom left
+    (0.33, 0.678, 0.66, 0.686),  # Bottom middle
+    (0.66, 0.678, 1.0, 0.686),  # Bottom right
+
+    # Extreme Right section
+    (0.95, 0.63, 1, 0.678),
+
+    # Middle Section (between Tag and Click)
+    (0.029, 0.648, 0.35, 0.658),  # Middle left
+    (0.35, 0.648, 0.657, 0.658)  # Middle right
+]
+
+# Detection parameters for Ribbon
+DETECTION_PARAMS = {
+    'clahe_clip_limit': 2.0,
+    'clahe_grid_size': (8, 8),
+    'gaussian_kernel': (5, 5),
+    'gaussian_sigma': 0,
+    'canny_low': 20,  
+    'canny_high': 80,  
+    'hough_threshold': 15,  
+    'min_line_length': 10,
+    'max_line_gap': 5,
+    'edge_pixel_threshold': 0.01
+}
+
+# Prompts
+PTAG = "Extract all the text from the image accurately."
+PEMO = "Carefully analyze the image to detect emojis. Emojis are graphical icons (e.g., 😀, 🎉, ❤️) and not regular text, symbols, or characters. Examine the image step by step to ensure only graphical emojis are counted. If no emojis are found, respond with 'NUMBER OF EMOJIS: 0'. If emojis are present, count them and provide reasoning before giving the final answer in the format 'NUMBER OF EMOJIS: [count]'. Do not count text or punctuation as emojis."
+PGNC = "Is there a HAND POINTER/EMOJI or a LARGE ARROW or ARROW POINTER? Answer only 'yes' or 'no'."
+
+# Lists for Content Checks
+RISKY_KEYWORDS = [
+    # General gambling terms
+    "casino", "poker", "jackpot", "blackjack",
+    "sports betting", "online casino", "slot machine", "pokies",
+
+    # Gambling website and app names (Global and India-promoted)
+    "stake", "betano", "bet365", "888casino", "ladbrokes", "betfair",
+    "unibet", "skybet", "coral", "betway", "sportingbet", "betvictor", "partycasino", "casinocom", "jackpot city",
+    "playtech", "meccabingo", "fanDuel", "betmobile", "10bet", "10cric",
+    "pokerstars" "fulltiltpoker", "wsop",
+
+    # Gambling websites and apps promoted or popular in India
+    "dream11", "dreamll", "my11circle", "cricbuzz", "fantasy cricket", "sportz exchange", "fun88",
+    "funbb", "funbeecom", "funbee", "rummycircle", "pokertiger", "adda52", "khelplay",
+    "paytm first games", "fanmojo", "betking", "1xbet", "parimatch", "rajapoker",
+
+    # High-risk trading and investment terms
+    "win cash", "high risk trading", "win lottery",
+    "high risk investment", "investment scheme",
+    "get rich quick", "trading signals", "financial markets", "day trading",
+    "options trading", "forex signals"
+]
+
+ILLEGAL_ACTIVITIES = [
+    "hack", "hacking", "cheating", "cheat", "drugs", "drug", "steal", "stealing",
+    "phishing", "phish", "piracy", "pirate", "fraud", "smuggling", "smuggle",
+    "counterfeiting", "blackmailing", "blackmail", "extortion", "scamming", "scam",
+    "identity theft", "illegal trading", "money laundering", "poaching", "poach",
+    "trafficking", "illegal arms", "explosives", "bomb", "bombing", "fake documents"
+]
+
+ILLEGAL_PHRASES = [
+    "how to", "learn", "steps to", "guide to", "ways to",
+    "tutorial on", "methods for", "process of",
+    "tricks for", "shortcuts to", "make"
+]
+
+COMPETITOR_BRANDS = [
+    "motorola", "oppo", "vivo", "htc", "sony", "nokia", "honor", "huawei", "asus", "lg",
+    "oneplus", "apple", "micromax", "lenovo", "gionee", "infocus", "lava", "panasonic","intex",
+    "blackberry", "xiaomi", "philips", "godrej", "whirlpool", "blue star", "voltas",
+    "hitachi", "realme", "poco", "iqoo", "toshiba", "skyworth", "redmi", "nokia", "lava"
+]
+
+APPROPRIATE_LABELS = [
+    "Inappropriate Content: Violence, Blood, political promotion, drugs, alcohol, cigarettes, smoking, cruelty, nudity, illegal activities",
+    "Appropriate Content: Games, entertainment, Advertisement, Fashion, Sun-glasses, Food, Food Ad, Fast Food, Woman or Man Model, Television, natural scenery, abstract visuals, art, everyday objects, sports, news, general knowledge, medical symbols, and miscellaneous benign content"
+]
+
+RELIGIOUS_LABELS = [
+    "Digital art or sports or news or  miscellaneous activity or miscellaneous item or Person or religious places or diya or deepak or festival or nature or earth imagery or scenery or Medical Plus Sign or Violence or Military",
+    "Hindu Deity / OM or AUM or Swastik symbol",
+    "Jesus Christ / Christianity Cross"
+]
+
+# Image Quality Thresholds
+MIN_WIDTH = 720
+MIN_HEIGHT = 1600
+MIN_PIXEL_COUNT = 1000000
+PIXEL_VARIANCE_THRESHOLD = 50

model_handler.py

@@ -0,0 +1,149 @@
+import os
+import torch
+import easyocr
+import numpy as np
+import gc
+from transformers import AutoTokenizer, AutoModel, AutoProcessor, AutoModelForZeroShotImageClassification
+import torch.nn.functional as F
+from utils import build_transform
+
+class ModelHandler:
+    def __init__(self):
+        self.device = torch.device("cpu") # Change to "cuda" if GPU available
+        self.transform = build_transform()
+        self.load_models()
+
+    def load_models(self):
+        # MODEL 1: InternVL
+        try:
+            # Check if local path exists, otherwise use HF Hub ID
+            local_path = os.path.join("Models", "InternVL2_5-1B-MPO")
+            if os.path.exists(local_path):
+                internvl_model_path = local_path
+                print(f"Loading InternVL from local path: {internvl_model_path}")
+            else:
+                internvl_model_path = "OpenGVLab/InternVL2_5-1B-MPO" # HF Hub ID
+                print(f"Local model not found. Downloading InternVL from HF Hub: {internvl_model_path}")
+
+            self.model_int = AutoModel.from_pretrained(
+                internvl_model_path,
+                torch_dtype=torch.bfloat16,
+                low_cpu_mem_usage=True,
+                trust_remote_code=True
+            ).eval()
+
+            for module in self.model_int.modules():
+                if isinstance(module, torch.nn.Dropout):
+                    module.p = 0
+
+            self.tokenizer_int = AutoTokenizer.from_pretrained(internvl_model_path, trust_remote_code=True)
+            print("\nInternVL model and tokenizer loaded successfully.")
+        except Exception as e:
+            print(f"\nError loading InternVL model or tokenizer: {e}")
+            self.model_int = None
+            self.tokenizer_int = None
+
+        # MODEL 2: EasyOCR
+        try:
+            # EasyOCR automatically handles downloading if not present
+            self.reader = easyocr.Reader(['en', 'hi'], gpu=False)
+            print("\nEasyOCR reader initialized successfully.")
+        except Exception as e:
+            print(f"\nError initializing EasyOCR reader: {e}")
+            self.reader = None
+
+        # MODEL 3: CLIP
+        try:
+            local_path = os.path.join("Models", "clip-vit-base-patch32")
+            if os.path.exists(local_path):
+                clip_model_path = local_path
+                print(f"Loading CLIP from local path: {clip_model_path}")
+            else:
+                clip_model_path = "openai/clip-vit-base-patch32" # HF Hub ID
+                print(f"Local model not found. Downloading CLIP from HF Hub: {clip_model_path}")
+
+            self.processor_clip = AutoProcessor.from_pretrained(clip_model_path)
+            self.model_clip = AutoModelForZeroShotImageClassification.from_pretrained(clip_model_path).to(self.device)
+            print("\nCLIP model and processor loaded successfully.")
+        except Exception as e:
+            print(f"\nError loading CLIP model or processor: {e}")
+            self.model_clip = None
+            self.processor_clip = None
+
+    def easyocr_ocr(self, image):
+        if not self.reader:
+            return ""
+        image_np = np.array(image)
+        results = self.reader.readtext(image_np, detail=1)
+        
+        del image_np
+        gc.collect()
+
+        if not results:
+            return ""
+        
+        sorted_results = sorted(results, key=lambda x: (x[0][0][1], x[0][0][0]))
+        ordered_text = " ".join([res[1] for res in sorted_results]).strip()
+        return ordered_text
+
+    def intern(self, image, prompt, max_tokens):
+        if not self.model_int or not self.tokenizer_int:
+            return ""
+            
+        pixel_values = self.transform(image).unsqueeze(0).to(self.device).to(torch.bfloat16)
+        with torch.no_grad():
+            response, _ = self.model_int.chat(
+                self.tokenizer_int,
+                pixel_values,
+                prompt,
+                generation_config={
+                    "max_new_tokens": max_tokens,
+                    "do_sample": False,
+                    "num_beams": 1,
+                    "temperature": 1.0,
+                    "top_p": 1.0,
+                    "repetition_penalty": 1.0,
+                    "length_penalty": 1.0,
+                    "pad_token_id": self.tokenizer_int.pad_token_id
+                },
+                history=None,
+                return_history=True
+            )
+        
+        del pixel_values
+        gc.collect()
+        return response
+
+    def clip(self, image, labels):
+        if not self.model_clip or not self.processor_clip:
+            return None
+
+        processed = self.processor_clip(
+            text=labels,
+            images=image,
+            padding=True,
+            return_tensors="pt"
+        ).to(self.device)
+
+        del image, labels
+        gc.collect()
+        return processed
+
+    def get_clip_probs(self, image, labels):
+        inputs = self.clip(image, labels)
+        if inputs is None:
+            return None
+            
+        with torch.no_grad():
+            outputs = self.model_clip(**inputs)
+        
+        logits_per_image = outputs.logits_per_image
+        probs = F.softmax(logits_per_image, dim=1)
+        
+        del inputs, outputs, logits_per_image
+        gc.collect()
+        
+        return probs
+
+# Create a global instance to be used by modules
+model_handler = ModelHandler()

modules/content_checks.py

@@ -0,0 +1,79 @@
+import re
+import torch
+from PIL import Image
+import config
+from utils import find_similar_substring, destroy_text_roi
+from model_handler import model_handler
+
+def is_risky(body_text):
+    body_text = re.sub(r'[^a-zA-Z0-9\u0966-\u096F\s]', '', body_text)
+    for keyword in config.RISKY_KEYWORDS:
+        if find_similar_substring(body_text, keyword):
+            return True
+    return False
+
+def is_prom_illegal_activity(body_text):
+    for phrase in config.ILLEGAL_PHRASES:
+        for activity in config.ILLEGAL_ACTIVITIES:
+            pattern = rf"{re.escape(phrase)}.*?{re.escape(activity)}"
+            if re.search(pattern, body_text):
+                return True
+    return False
+
+def is_competitor(body_text):
+    for brand in config.COMPETITOR_BRANDS:
+        if re.search(r'\b' + re.escape(brand) + r'\b', body_text):
+            return True
+    return False
+
+def body(image_path):
+    results = {}
+    image = Image.open(image_path).convert('RGB')
+    bd = model_handler.intern(image, config.PTAG, 500).lower()
+    ocr_substitutions = {'0': 'o', '1': 'l', '!': 'l', '@': 'a', '5': 's', '8': 'b'}
+
+    for char, substitute in ocr_substitutions.items():
+        bd = bd.replace(char, substitute)
+    bd = ' '.join(bd.split())
+
+    results["High Risk Content"] = 1 if is_risky(bd) else 0
+    results["Illegal Content"] = 1 if is_prom_illegal_activity(bd) else 0
+    results["Competitor References"] = 1 if is_competitor(bd) else 0
+
+    return results
+
+def offensive(image):
+    image = destroy_text_roi(image, *config.TAG)
+    
+    probs = model_handler.get_clip_probs(image, config.APPROPRIATE_LABELS)
+    if probs is None:
+        return False
+
+    inappropriate_prob = probs[0][0].item()
+    appropriate_prob = probs[0][1].item()
+
+    if inappropriate_prob > appropriate_prob:
+        return True
+    return False
+
+def religious(image):
+    probs = model_handler.get_clip_probs(image, config.RELIGIOUS_LABELS)
+    if probs is None:
+        return False, None
+
+    highest_score_index = torch.argmax(probs, dim=1).item()
+
+    if highest_score_index != 0:
+        return True, config.RELIGIOUS_LABELS[highest_score_index]
+    return False, None
+
+def theme(image_path):
+    results = {}
+    image = Image.open(image_path).convert('RGB')
+
+    results["Inappropriate Content"] = 1 if offensive(image) else 0
+
+    is_religious, religious_label = religious(image)
+    results["Religious Content"] = f"1 [{religious_label}]" if is_religious else "0"
+
+    return results

modules/text_checks.py

@@ -0,0 +1,125 @@
+import re
+import emoji
+from PIL import Image
+import config
+from utils import get_roi, clean_text, are_strings_similar, blur_image, is_blank, is_english, is_valid_english, destroy_text_roi
+from model_handler import model_handler
+
+def is_unreadable_tagline(htag, tag):
+    clean_htag = clean_text(htag)
+    clean_tag = clean_text(tag)
+    return not are_strings_similar(clean_htag, clean_tag)
+
+def is_hyperlink_tagline(tag):
+    substrings = ['www', '.com', 'http']
+    return any(sub in tag for sub in substrings)
+
+def is_price_tagline(tag):
+    exclude_keywords = ["crore", "thousand", "million", "billion", "trillion"]
+    exclude_pattern = r'(₹\.?\s?\d+\s*(lac|lacs|lakh|lakhs|cr|k))|(\brs\.?\s?\d+\s*(lac|lacs|lakh|lakhs|cr|k))|(\$\.?\s?\d+\s*(lac|lacs|lakh|lakhs|cr|k))'
+    price_pattern = r'(₹\s?\d+)|(\brs\.?\s?\d+)|(\$\s?\d+)|(र\d+)'
+    
+    if any(keyword in tag for keyword in exclude_keywords):
+        return False
+    if re.search(exclude_pattern, tag):
+        return False
+    return bool(re.search(price_pattern, tag))
+
+def is_multiple_emoji(emoji_text):
+    words = emoji_text.split()
+    last_word = words[-1]
+    return last_word not in ['0', '1']
+
+def is_incomplete_tagline(tag, is_eng):
+    tag = emoji.replace_emoji(tag, '')
+    tag = tag.strip()
+    if tag.endswith(('...', '..')):
+        return True
+    if not is_eng and tag.endswith(('.')):
+        return True
+    return False
+
+def tagline(image_path):
+    results = {
+        "Empty/Illegible/Black Tagline": 0,
+        "Multiple Taglines": 0,
+        "Incomplete Tagline": 0,
+        "Hyperlink": 0,
+        "Price Tag": 0,
+        "Excessive Emojis": 0
+    }
+
+    image = get_roi(image_path, *config.TAG)
+    himage = blur_image(image, 0.3)
+    easytag = model_handler.easyocr_ocr(image).lower().strip()
+    unr = model_handler.easyocr_ocr(himage).lower().strip()
+
+    if is_blank(easytag) or is_blank(unr):
+        results["Empty/Illegible/Black Tagline"] = 1
+        return results
+
+    is_eng = is_english(easytag)
+    if not is_eng:
+        results["Empty/Illegible/Black Tagline"] = 0
+        tag = easytag
+    else:
+        Tag = model_handler.intern(image, config.PTAG, 25).strip()
+        tag = Tag.lower()
+
+        htag = model_handler.intern(himage, config.PTAG, 25).lower().strip()
+        if is_unreadable_tagline(htag, tag):
+            results["Empty/Illegible/Black Tagline"] = 1
+            
+    results["Incomplete Tagline"] = 1 if is_incomplete_tagline(tag, is_eng) else 0
+    results["Hyperlink"] = 1 if is_hyperlink_tagline(tag) else 0
+    results["Price Tag"] = 1 if is_price_tagline(tag) else 0
+
+    imagedt = get_roi(image_path, *config.DTAG)
+    dtag = model_handler.easyocr_ocr(imagedt).strip()
+    results["Multiple Taglines"] = 0 if is_blank(dtag) else 1
+
+    emoji_resp = model_handler.intern(image, config.PEMO, 100)
+    results["Excessive Emojis"] = 1 if is_multiple_emoji(emoji_resp) else 0
+
+    return results
+
+def cta(image_path):
+    image = get_roi(image_path, *config.CTA)
+    cta_text = model_handler.intern(image, config.PTAG, 5).strip()
+    veng = is_valid_english(cta_text)
+    eng = is_english(cta_text)
+
+    if '.' in cta_text or '..' in cta_text or '...' in cta_text:
+        return {"Bad CTA": 1}
+
+    if any(emoji.is_emoji(c) for c in cta_text):
+        return {"Bad CTA": 1}
+
+    clean_cta_text = clean_text(cta_text)
+    # print(len(clean_cta_text)) # Removed print
+
+    if eng and len(clean_cta_text) <= 2:
+        return {"Bad CTA": 1}
+
+    if len(clean_cta_text) > 15:
+        return {"Bad CTA": 1}
+
+    return {"Bad CTA": 0}
+
+def tnc(image_path):
+    image = get_roi(image_path, *config.TNC)
+    tnc_text = model_handler.easyocr_ocr(image)
+    clean_tnc = clean_text(tnc_text)
+
+    return {"Terms & Conditions": 0 if is_blank(clean_tnc) else 1}
+
+def tooMuchText(image_path):
+    DRIB = (0.04, 0.625, 1.0, 0.677)
+    DUP = (0, 0, 1.0, 0.25)
+    DBEL = (0, 0.85, 1.0, 1)
+    image = Image.open(image_path).convert('RGB')
+    image = destroy_text_roi(image, *DRIB)
+    image = destroy_text_roi(image, *DUP)
+    image = destroy_text_roi(image, *DBEL)
+    bd = model_handler.easyocr_ocr(image).lower().strip()
+    return {"Too Much Text": 1 if len(bd) > 55 else 0}

modules/visual_checks.py

@@ -0,0 +1,99 @@
+import cv2
+import numpy as np
+from PIL import Image
+import config
+from utils import get_roi
+from model_handler import model_handler
+
+def detect_straight_lines(roi_img):
+    """Enhanced edge detection focusing on straight lines."""
+    gray = cv2.cvtColor(roi_img, cv2.COLOR_BGR2GRAY)
+    clahe = cv2.createCLAHE(
+        clipLimit=config.DETECTION_PARAMS['clahe_clip_limit'],
+        tileGridSize=config.DETECTION_PARAMS['clahe_grid_size']
+    )
+    enhanced = clahe.apply(gray)
+    blurred = cv2.GaussianBlur(
+        enhanced,
+        config.DETECTION_PARAMS['gaussian_kernel'],
+        config.DETECTION_PARAMS['gaussian_sigma']
+    )
+    edges = cv2.Canny(
+        blurred,
+        config.DETECTION_PARAMS['canny_low'],
+        config.DETECTION_PARAMS['canny_high']
+    )
+    line_mask = np.zeros_like(edges)
+    lines = cv2.HoughLinesP(
+        edges,
+        rho=1,
+        theta=np.pi/180,
+        threshold=config.DETECTION_PARAMS['hough_threshold'],
+        minLineLength=config.DETECTION_PARAMS['min_line_length'],
+        maxLineGap=config.DETECTION_PARAMS['max_line_gap']
+    )
+    if lines is not None:
+        for line in lines:
+            x1, y1, x2, y2 = line[0]
+            cv2.line(line_mask, (x1, y1), (x2, y2), 255, 2)
+    return line_mask
+
+def simple_edge_detection(roi_img):
+    """Simple edge detection."""
+    gray = cv2.cvtColor(roi_img, cv2.COLOR_BGR2GRAY)
+    return cv2.Canny(gray, 50, 150)
+
+def ribbon(image_path):
+    """Detect the presence of a ribbon in an image."""
+    image = cv2.imread(image_path)
+    if image is None:
+        raise ValueError(f"Could not read image: {image_path}")
+
+    h, w = image.shape[:2]
+    edge_present = []
+
+    for i, roi in enumerate(config.ROIS):
+        x1, y1, x2, y2 = [int(coord * (w if i % 2 == 0 else h)) for i, coord in enumerate(roi)]
+        roi_img = image[y1:y2, x1:x2]
+
+        if i < 6:  # Straight line detection for ROIs 0-5
+            edges = detect_straight_lines(roi_img)
+            edge_present.append(np.sum(edges) > edges.size * config.DETECTION_PARAMS['edge_pixel_threshold'])
+        else:  # Original method for ROIs 6-8
+            edges = simple_edge_detection(roi_img)
+            edge_present.append(np.any(edges))
+
+    result = all(edge_present[:6]) and not edge_present[6] and not edge_present[7] and not edge_present[8]
+    return {"No Ribbon": 0 if result else 1}
+
+def image_quality(image_path):
+    """
+    Check if an image is low resolution or poor quality.
+    """
+    try:
+        image = Image.open(image_path)
+        width, height = image.size
+        pixel_count = width * height
+
+        if width < config.MIN_WIDTH or height < config.MIN_HEIGHT or pixel_count < config.MIN_PIXEL_COUNT:
+            return {"Bad Image Quality": 1}
+
+        grayscale_image = image.convert("L")
+        pixel_array = np.array(grayscale_image)
+        variance = np.var(pixel_array)
+
+        if variance < config.PIXEL_VARIANCE_THRESHOLD:
+            return {"Bad Image Quality": 1}
+
+        return {"Bad Image Quality": 0}
+
+    except Exception as e:
+        print(f"Error processing image: {e}")
+        return {"Bad Image Quality": 1}
+
+def gnc(image_path):
+    """Check for gestures/coach marks and display the image."""
+    image = get_roi(image_path, *config.GNC)
+    gnc_text = model_handler.intern(image, config.PGNC, 900).lower()
+
+    return {"Visual Gesture or Icon": 1 if 'yes' in gnc_text else 0}

pipeline.py

@@ -0,0 +1,112 @@
+from tabulate import tabulate
+from modules import visual_checks, text_checks, content_checks
+
+def classify(image_path):
+    """Perform complete classification with detailed results."""
+    # Components to check
+    components = [
+        visual_checks.image_quality,
+        visual_checks.ribbon,
+        text_checks.tagline,
+        text_checks.tooMuchText,
+        content_checks.theme,
+        content_checks.body,
+        text_checks.cta,
+        text_checks.tnc,
+        visual_checks.gnc
+    ]
+
+    # Collect all results
+    all_results = {}
+    for component in components:
+        try:
+            results = component(image_path)
+            all_results.update(results)
+        except Exception as e:
+            print(f"Error in component {component.__name__}: {e}")
+            # Optionally set default values or log error
+            pass
+
+    # Calculate final classification
+    # Check if any result value is 1 (or starts with '1' for string results like "1 [Religious]")
+    final_classification = 0
+    for result in all_results.values():
+        if isinstance(result, int):
+            if result == 1:
+                final_classification = 1
+                break
+        elif isinstance(result, str):
+            if result.startswith('1'):
+                final_classification = 1
+                break
+
+    # Determine Pass or Fail
+    classification_result = "Fail" if final_classification == 1 else "Pass"
+
+    # Prepare the table data
+    table_data = []
+    labels = [
+        "Bad Image Quality", "No Ribbon", "Empty/Illegible/Black Tagline", "Multiple Taglines",
+        "Incomplete Tagline", "Hyperlink", "Price Tag", "Excessive Emojis", "Too Much Text",
+        "Inappropriate Content", "Religious Content", "High Risk Content",
+        "Illegal Content", "Competitor References", "Bad CTA", "Terms & Conditions",
+        "Visual Gesture or Icon"
+    ]
+
+    # Collect labels responsible for failure
+    failure_labels = []
+    for label in labels:
+        result = all_results.get(label, 0)
+        
+        is_fail = False
+        if isinstance(result, int) and result == 1:
+            is_fail = True
+        elif isinstance(result, str) and result.startswith('1'):
+            is_fail = True
+            
+        if is_fail:
+            failure_labels.append(label)
+
+        table_data.append([label, result])
+
+    # Format the results as a table
+    result_table = tabulate(table_data, headers=["LABEL", "RESULT"], tablefmt="fancy_grid")
+
+    # Return the final classification, result table, and failure labels (if any)
+    return classification_result, result_table, failure_labels
+
+# Dummy interface for testing (can be enabled if needed)
+def classify_dummy(image_path):
+    import random
+    all_results = {
+        "Bad Image Quality": 0,
+        "No Ribbon": random.choice([0, 1]),
+        "Empty/Illegible/Black Tagline": 0,
+        "Multiple Taglines": 0,
+        "Incomplete Tagline": 0,
+        "Hyperlink": 0,
+        "Price Tag": 0,
+        "Excessive Emojis": 0,
+        "Too Much Text": 0,
+        "Inappropriate Content": 0,
+        "Religious Content": 0,
+        "High Risk Content": 0,
+        "Illegal Content": 0,
+        "Competitor References": 0,
+        "Bad CTA": 0,
+        "Terms & Conditions": 0,
+        "Visual Gesture or Icon": 0
+    }
+    
+    final_classification = 1 if any(result == 1 for result in all_results.values()) else 0
+    classification_result = "Fail" if final_classification == 1 else "Pass"
+    
+    table_data = []
+    labels = list(all_results.keys())
+    failure_labels = [label for label in labels if all_results[label] == 1]
+    
+    for label in labels:
+        table_data.append([label, all_results[label]])
+        
+    result_table = tabulate(table_data, headers=["LABEL", "RESULT"], tablefmt="fancy_grid")
+    return classification_result, result_table, failure_labels

requirements.txt

@@ -0,0 +1,16 @@
+easyocr
+fuzzywuzzy
+emoji
+torch
+torchvision
+transformers
+matplotlib
+pillow
+opencv-python-headless
+tabulate
+nltk
+einops
+timm
+accelerate
+flask
+python-Levenshtein

templates/index.html

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PRISM Project</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+        body {
+            font-family: 'Poppins', sans-serif;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+            color: white;
+            overflow-x: hidden;
+        }
+
+        .container {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        .glass-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 4rem;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            transform: translateY(0);
+            transition: transform 0.3s ease;
+            text-align: center;
+        }
+
+        .glass-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .btn-container {
+            display: flex;
+            justify-content: space-between;
+            padding: 0 4rem;
+            margin-top: 3rem;
+        }
+
+        .btn {
+            position: relative;
+            padding: 1rem 2.5rem;
+            font-size: 1.1rem;
+            font-weight: 500;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            overflow: hidden;
+            border: none;
+            min-width: 200px;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateX(-100%);
+            transition: transform 0.3s ease;
+        }
+
+        .btn:hover::before {
+            transform: translateX(0);
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+
+        .btn-single {
+            background: linear-gradient(45deg, #4f46e5, #7c3aed);
+            color: white;
+        }
+
+        .btn-multiple {
+            background: linear-gradient(45deg, #10b981, #059669);
+            color: white;
+        }
+
+        .animated-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            overflow: hidden;
+        }
+
+        .floating-circle {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.1;
+        }
+
+        .circle1 {
+            animation: moveCircle1 15s ease-in-out infinite;
+        }
+
+        .circle2 {
+            animation: moveCircle2 20s ease-in-out infinite;
+        }
+
+        .circle3 {
+            animation: moveCircle3 25s ease-in-out infinite;
+        }
+
+        @keyframes moveCircle1 {
+            0% { transform: translate(-50%, -50%); }
+            50% { transform: translate(-40%, -40%); }
+            100% { transform: translate(-50%, -50%); }
+        }
+
+        @keyframes moveCircle2 {
+            0% { transform: translate(-50%, -50%); }
+            50% { transform: translate(-60%, -40%); }
+            100% { transform: translate(-50%, -50%); }
+        }
+
+        @keyframes moveCircle3 {
+            0% { transform: translate(-50%, -50%); }
+            50% { transform: translate(-40%, -60%); }
+            100% { transform: translate(-50%, -50%); }
+        }
+
+        .title-gradient {
+            background: linear-gradient(to right, #fff, #a5b4fc);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            font-size: 3rem; /* Increased font size */
+            font-weight: 900; /* Bolder font weight */
+            letter-spacing: 1px;
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .subtitle {
+            color: #94a3b8;
+            font-size: 1.1rem;
+            line-height: 1.6;
+            max-width: 600px;
+            margin: 0.5rem auto;
+            text-align: center;
+        }
+
+        @media (max-width: 768px) {
+            .btn-container {
+                flex-direction: column;
+                align-items: center;
+                gap: 1rem;
+                padding: 0 1rem;
+            }
+
+            .glass-card {
+                padding: 2rem;
+            }
+
+            .btn {
+                width: 100%;
+                max-width: 300px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="animated-bg">
+        <div class="floating-circle circle1" style="width: 300px; height: 300px; background: #4f46e5; left: 50%; top: 50%;"></div>
+        <div class="floating-circle circle2" style="width: 200px; height: 200px; background: #10b981; left: 50%; top: 50%;"></div>
+        <div class="floating-circle circle3" style="width: 150px; height: 150px; background: #7c3aed; left: 50%; top: 50%;"></div>
+    </div>
+
+    <div class="container animate_animated animate_fadeIn">
+        <div class="glass-card">
+            <h1 class="title-gradient animate_animated animate_fadeInDown">Lock Screen Classifier</h1>
+            <p class="subtitle animate_animated animatefadeIn animate_delay-1s">
+                Welcome to our <strong>PRISM</strong> Project
+            </p>
+            <p class="subtitle animate_animated animatefadeIn animate_delay-1s">
+                Let's classify the images with Proper Reasoning for doing so...
+            </p>
+            <div class="btn-container animate_animated animatefadeInUp animate_delay-2s">
+                <button class="btn btn-single" onclick="window.open('/single', '_blank')">
+                    Single Image
+                </button>
+                <button class="btn btn-multiple" onclick="window.open('/multiple', '_blank')">
+                    Multiple Images
+                </button>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

templates/multiple.html

@@ -0,0 +1,1186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multiple Classification</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+        :root {
+            --primary-color: #4f46e5;
+            --primary-dark: #4338ca;
+            --success-color: #22c55e;
+            --error-color: #ef4444;
+            --background-color: #1a1a2e;
+            --card-background: rgba(255, 255, 255, 0.1);
+            --text-primary: #ffffff;
+            --text-secondary: #a5b4fc;
+            --border-color: rgba(255, 255, 255, 0.18);
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+            color: var(--text-primary);
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+            width: 100%;
+        }
+
+        .glass-card {
+            background: var(--card-background);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            border: 1px solid var(--border-color);
+            transform: translateY(0);
+            transition: transform 0.3s ease;
+            text-align: center;
+        }
+
+        .glass-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .header h1 {
+            font-size: 2rem;
+            color: var(--text-primary);
+            margin-bottom: 0.25rem;
+            font-weight: 700;
+        }
+
+        .header p {
+            color: var(--text-secondary);
+            font-size: 1rem;
+        }
+
+        .upload-section {
+            background: var(--card-background);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            margin-bottom: 1.5rem;
+        }
+
+        .dropzone {
+            border: 2px dashed var(--primary-color);
+            border-radius: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            padding: 2rem;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .dropzone:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: var(--primary-dark);
+        }
+
+        .dropzone .dz-message {
+            margin: 1rem 0;
+            text-align: center;
+        }
+
+        .dropzone .dz-preview {
+            background: var(--card-background);
+            border-radius: 1rem;
+            border: 1px solid var(--border-color);
+            padding: 0.5rem;
+            margin: 1rem;
+            transition: transform 0.2s ease;
+        }
+
+        .dropzone .dz-preview:hover {
+            transform: translateY(-2px);
+        }
+
+        .dropzone .dz-image {
+            width: 120px !important;
+            height: 120px !important;
+            border-radius: 0.75rem !important;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .dropzone .dz-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .dropzone .dz-details {
+            padding-top: 0.5rem;
+            text-align: center;
+        }
+
+        .dropzone .dz-filename {
+            color: var(--text-primary);
+            font-size: 0.875rem;
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .dropzone .dz-remove {
+            color: var(--error-color);
+            text-decoration: none;
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+            display: inline-block;
+            transition: opacity 0.2s ease;
+        }
+
+        .dropzone .dz-remove:hover {
+            opacity: 0.8;
+        }
+
+        .dropzone .dz-preview .dz-progress {
+            height: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            margin-top: 0.5rem;
+            border-radius: 2px;
+        }
+
+        .dropzone .dz-preview .dz-progress .dz-upload {
+            background: var(--primary-color);
+            border-radius: 2px;
+        }
+
+        .preview-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+
+        .control-panel {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1rem;
+            justify-content: center;
+        }
+
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            border: none;
+            color: white;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1rem;
+        }
+
+        .btn:hover {
+            transform: translateY(-1px);
+        }
+
+        .btn-clear {
+            background: var(--text-secondary);
+        }
+
+        .btn-classify {
+            background: var(--primary-color);
+        }
+
+        .btn-classify:hover {
+            background: var(--primary-dark);
+        }
+
+        .btn-download {
+            background: var(--success-color);
+        }
+
+        .btn-download:hover {
+            background: #1e9c4f;
+        }
+
+        .results-section {
+            margin-top: 1.5rem;
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
+            background: var(--card-background);
+        }
+
+        .section-header h2 {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1.25rem;
+            color: var(--text-primary);
+        }
+
+        .pass-header {
+            background: rgba(34, 197, 94, 0.1);
+            color: var(--success-color);
+        }
+
+        .fail-header {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--error-color);
+        }
+
+        .download-btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1rem;
+        }
+
+        .download-btn:hover {
+            transform: translateY(-1px);
+        }
+
+        .download-btn.pass {
+            background: var(--success-color);
+        }
+
+        .download-btn.fail {
+            background: var(--error-color);
+        }
+
+        .image-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .image-ribbon {
+            display: flex;
+            align-items: center;
+            padding: 0.75rem;
+            background: var(--card-background);
+            border-radius: 0.5rem;
+            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .image-ribbon:hover {
+            transform: translateX(4px);
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .thumbnail {
+            width: 50px;
+            height: 50px;
+            border-radius: 0.375rem;
+            object-fit: cover;
+            margin-right: 1rem;
+        }
+
+        .image-info {
+            flex: 1;
+        }
+
+        .filename {
+            font-weight: 500;
+            color: var(--text-primary);
+            margin-top: 0.5rem;
+            font-size: 1rem;
+            white-space: normal;
+            word-break: break-word;
+            text-align: center;
+        }
+
+        .labels {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .label {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 0.5rem 1rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            text-align: center;
+        }
+
+        #summary {
+            background: var(--card-background);
+            padding: 1rem;
+            border-radius: 0.5rem;
+            text-align: center;
+            font-size: 1rem;
+            font-weight: 500;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
+            color: var(--text-primary);
+        }
+
+        .progress-container {
+            margin-top: 1rem;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+
+        .progress-bar {
+            height: 6px;
+            background: var(--primary-color);
+            width: 0;
+            transition: width 0.3s ease;
+        }
+
+        .loading-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.95);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+            color: white;
+        }
+
+        .loading-content {
+            background: var(--card-background);
+            padding: 2rem;
+            border-radius: 1rem;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            text-align: center;
+            color: var(--text-primary);
+        }
+
+        .loading-header {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .loading-header h3 {
+            color: var(--primary-color);
+            margin: 0;
+            margin-bottom: 0.5rem;
+        }
+
+        .loading-spinner {
+            margin: 1rem 0;
+            font-size: 2rem;
+            color: var(--primary-color);
+        }
+
+        .loading-progress {
+            font-size: 1.1rem;
+            color: var(--text-primary);
+        }
+
+        .image-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            position: relative;
+            max-width: 90%;
+            max-height: 90vh;
+            margin: auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .modal-image {
+            max-width: 100%;
+            max-height: 80vh;
+            object-fit: contain;
+            border-radius: 0.5rem;
+        }
+
+        .modal-close {
+            position: absolute;
+            top: -2rem;
+            right: 0;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            background: none;
+            border: none;
+            padding: 0.5rem;
+        }
+
+        .results-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 1.5rem;
+            background: var(--card-background);
+            border-radius: 0.5rem;
+            overflow: hidden;
+            table-layout: fixed;
+        }
+
+        .results-table th,
+        .results-table td {
+            padding: 0.75rem 0.5rem;
+            vertical-align: middle;
+            text-align: center;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .results-table .serial {
+            width: 80px;
+        }
+
+        .results-table .image-col {
+            width: 200px;
+        }
+
+        .results-table .result-col {
+            width: 180px;
+        }
+
+        .results-table .labels-col {
+            width: auto;
+            min-width: 150px;
+            padding-left: 1rem;
+            text-align: center !important;
+        }
+
+        .results-table td {
+            padding: 0.75rem 0.5rem;
+            vertical-align: middle;
+            border-bottom: 1px solid var(--border-color);
+            text-align: left;
+        }
+
+        .results-table td.serial,
+        .results-table td.image-col,
+        .results-table td.result-col {
+            text-align: center;
+        }
+
+        .results-table th.labels-col {
+            text-align: center;
+        }
+
+        .results-table td.labels-col {
+            text-align: center !important;
+            padding: 1rem;
+        }
+
+        .results-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        .result-pass,
+        .result-fail {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            text-align: center;
+        }
+
+        .result-pass {
+            background: rgba(34, 197, 94, 0.1);
+        }
+
+        .result-fail {
+            background: rgba(239, 68, 68, 0.1);
+        }
+
+        .dropzone {
+            border: 2px dashed var(--primary-color);
+            border-radius: 0.5rem;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 1rem;
+            min-height: 150px;
+        }
+
+        .dropzone .dz-preview {
+            margin: 1rem;
+        }
+
+        .dropzone .dz-preview .dz-image {
+            border-radius: 0.5rem;
+        }
+
+        .dropzone .dz-preview .dz-details {
+            color: var(--text-primary);
+        }
+
+        .dropzone .dz-preview {
+            display: inline-block;
+            margin: 1rem;
+            position: relative;
+        }
+
+        .dropzone .dz-preview:nth-child(n+5) {
+            opacity: 0.3;
+        }
+
+        .dropzone .dz-preview:nth-child(n+6) {
+            display: none !important;
+        }
+
+        .dropzone .dz-preview.dz-file-preview .dz-image,
+        .dropzone .dz-preview .dz-image {
+            border-radius: 8px;
+            width: 150px;
+            height: 150px;
+        }
+
+        .dz-more-indicator {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            border-radius: 8px;
+            display: none;
+        }
+
+        .dropzone .dz-preview:nth-child(5) .dz-more-indicator {
+            display: flex;
+        }
+
+        .dropzone .dz-preview {
+            display: none !important;
+        }
+
+        .upload-section {
+            background: var(--card-background);
+            border-radius: 1rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .dropzone {
+            border: 2px dashed var(--primary-color);
+            border-radius: 1rem;
+            padding: 2rem;
+            text-align: center;
+            background: rgba(255, 255, 255, 0.05);
+            transition: all 0.3s ease;
+            min-height: 200px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .dropzone .dz-message {
+            margin: 0;
+        }
+
+        .dropzone:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: var(--primary-dark);
+        }
+
+        #thumbnail-preview-box {
+            display: none;
+            position: absolute;
+            z-index: 9999;
+            background: var(--card-background);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 1rem;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+            max-width: 300px;
+        }
+
+        #thumbnail-preview-box img {
+            max-width: 100%;
+            border-radius: 0.5rem;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="glass-card">
+            <div class="header">
+                <h1>Multiple Images Classification</h1>
+                <p>Classify and segregate multiple images at once...</p>
+            </div>
+
+            <div class="upload-section">
+                <form action="/upload_multiple" class="dropzone" id="upload-form">
+                    <div class="dz-message">
+                        <i class="fas fa-cloud-upload-alt fa-3x" style="color: var(--primary-color); margin-bottom: 1rem;"></i>
+                        <h3 style="margin: 0.5rem 0; color: var(--text-primary);">Drop files here</h3>
+                        <p style="color: var(--text-secondary); margin: 0;">or click to browse</p>
+                        <div id="file-count" style="margin-top: 1rem; color: var(--text-secondary);"></div>
+                    </div>
+                </form>
+                <div class="progress-container">
+                    <div class="progress-bar" id="upload-progress"></div>
+                </div>
+                <div class="control-panel">
+                    <button class="btn btn-clear" onclick="clearAllImages()">
+                        <i class="fas fa-trash-alt"></i>
+                        Clear All
+                    </button>
+                    <button class="btn btn-classify" id="classify-btn" onclick="highlightClassification()">
+                        <i class="fas fa-tags"></i>
+                        Classify
+                    </button>
+                    <!-- New Download HTML Button -->
+                    <button class="btn btn-download" id="download-html-btn" onclick="downloadPageAsHTML()">
+                        <i class="fas fa-download"></i>
+                        Download HTML
+                    </button>
+                </div>
+            </div>
+
+            <div id="summary"></div>
+
+            <div class="results-section">
+                <table class="results-table" id="results-table">
+                    <thead>
+                        <tr>
+                            <th class="serial">S.No</th>
+                            <th class="image-col">Image</th>
+                            <th class="result-col">Result</th>
+                            <th class="labels-col">Labels</th>
+                        </tr>
+                    </thead>
+                    <tbody id="results-tbody">
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Loading Overlay -->
+            <div class="loading-overlay" id="loading-overlay">
+                <div class="loading-content">
+                    <div class="loading-header">
+                        <h3>Classifying Images</h3>
+                        <p>Please wait while we process your images...</p>
+                    </div>
+                    <div class="loading-spinner">
+                        <i class="fas fa-spinner fa-spin"></i>
+                    </div>
+                    <div class="loading-files" id="loading-files">
+                        <!-- Loading file items will be added here dynamically -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Image Modal -->
+            <div class="image-modal" id="image-modal">
+                <div class="modal-content">
+                    <button class="modal-close" onclick="closeModal()">
+                        <i class="fas fa-times"></i>
+                    </button>
+                    <img class="modal-image" id="modal-image" src="" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="thumbnail-preview-box">
+        <img id="thumbnail-preview-img" src="" alt="">
+    </div>
+
+    <script>
+        let isClassifying = false; // Track if classification is in progress
+
+        Dropzone.options.uploadForm = {
+            paramName: "file",
+            maxFilesize: 16,
+            acceptedFiles: "image/*",
+            previewsContainer: false,
+            init: function() {
+                let myDropzone = this;
+
+                // Add event handler for when files are dropped or selected
+                this.on("addedfile", function(file) {
+                    // If this is the first file in a new batch
+                    if (myDropzone.files.length === 1) {
+                        // Clear previous results
+                        document.getElementById('results-tbody').innerHTML = '';
+                        document.getElementById('summary').innerHTML = '';
+                        document.getElementById('upload-progress').style.width = '0';
+                        
+                        // Clear server-side uploads
+                        fetch('/clear_uploads', { method: 'POST' })
+                            .then(response => response.json())
+                            .catch(error => console.error('Error:', error));
+                    }
+                    updateFileCount(myDropzone.files.length);
+                });
+
+                this.on("success", function(file, response) {
+                    updateFileCount(this.files.length);
+                });
+
+                this.on("removedfile", function() {
+                    updateFileCount(this.files.length);
+                });
+
+                this.on("totaluploadprogress", function(progress) {
+                    document.getElementById('upload-progress').style.width = progress + "%";
+                });
+
+                // Add event handler for when the dropzone is clicked
+                this.element.querySelector(".dz-message").addEventListener("click", function() {
+                    // Clear everything before opening file dialog
+                    myDropzone.removeAllFiles(true);
+                    document.getElementById('results-tbody').innerHTML = '';
+                    document.getElementById('summary').innerHTML = '';
+                    document.getElementById('upload-progress').style.width = '0';
+                    
+                    // Clear server-side uploads
+                    fetch('/clear_uploads', { method: 'POST' })
+                        .then(response => response.json())
+                        .catch(error => console.error('Error:', error));
+                });
+            }
+        };
+
+        function updateFileCount(count) {
+            const fileCount = document.getElementById('file-count');
+            if (count > 0) {
+                fileCount.textContent = `${count} file${count === 1 ? '' : 's'} selected`;
+            } else {
+                fileCount.textContent = '';
+            }
+        }
+
+        function updateSummary() {
+            const passCount = document.querySelectorAll('.result-pass').length;
+            const failCount = document.querySelectorAll('.result-fail').length;
+            const totalFiles = passCount + failCount;
+
+            document.getElementById('summary').innerHTML = `
+                <i class="fas fa-chart-pie"></i> Results: 
+                <span style="color: var(--success-color)">${passCount} passed</span>, 
+                <span style="color: var(--error-color)">${failCount} failed</span>
+                out of ${totalFiles} total images
+            `;
+        }
+
+        function clearAllImages() {
+            fetch('/clear_uploads', { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    // Clear table
+                    document.getElementById('results-tbody').innerHTML = '';
+                    document.getElementById('summary').innerHTML = '';
+                    document.getElementById('upload-progress').style.width = '0';
+                    
+                    // Clear dropzone
+                    let myDropzone = Dropzone.forElement("#upload-form");
+                    myDropzone.removeAllFiles(true);
+                    
+                    // Remove any remaining previews manually
+                    document.querySelectorAll('.dz-preview').forEach(el => el.remove());
+                })
+                .catch(error => console.error('Error:', error));
+        }
+
+        function createTableRow(result, index) {
+            const labels = result.status === 'Fail' ? result.labels : [];
+            
+            return `
+                <tr>
+                    <td class="serial">${index + 1}</td>
+                    <td class="image-col">
+                        <img src="data:image/jpeg;base64,${result.image}" 
+                             alt="${result.filename}"
+                             class="thumbnail"
+                             onclick="openModal(this)"
+                             style="cursor: pointer;">
+                        <div class="filename">${result.filename}</div>
+                    </td>
+                    <td class="result-col">
+                        <span class="result-${result.status.toLowerCase()}">${result.status}</span>
+                    </td>
+                    <td class="labels-col">
+                        ${result.status === 'Fail' ? `
+                            <div class="labels">
+                                ${labels.map(label => `
+                                    <span class="label">${label}</span>
+                                `).join('')}
+                            </div>
+                        ` : '-'}
+                    </td>
+                </tr>
+            `;
+        }
+
+        function openModal(imageElement) {
+            const modal = document.getElementById('image-modal');
+            const modalImage = document.getElementById('modal-image');
+
+            // Set the modal image source to the clicked thumbnail's source
+            modalImage.src = imageElement.src;
+            modal.style.display = 'flex'; // Show the modal
+
+            // Add event listener to close the modal when clicking outside the image
+            document.addEventListener('click', closeModalOnClickOutside);
+        }
+
+        function closeModal() {
+            const modal = document.getElementById('image-modal');
+            modal.style.display = 'none'; // Hide the modal
+
+            // Remove the event listener for closing the modal
+            document.removeEventListener('click', closeModalOnClickOutside);
+        }
+
+        function closeModalOnClickOutside(event) {
+            const modal = document.getElementById('image-modal');
+            const modalContent = document.querySelector('.modal-content');
+
+            // Check if the click is outside the modal content
+            if (!modalContent.contains(event.target)) {
+                closeModal();
+            }
+        }
+
+        function handleEscKey(event) {
+            if (event.key === 'Escape') {
+                closeModal();
+            }
+        }
+
+        // Add event listener for Escape key
+        document.addEventListener('keydown', handleEscKey);
+
+        async function processNextImage(filesProcessed, totalFiles) {
+            try {
+                const response = await fetch('/classify_multiple', { method: 'POST' });
+                const result = await response.json();
+                
+                if (result.error) {
+                    throw new Error(result.error);
+                }
+                
+                if (result.filename) {
+                    // Update the corresponding row
+                    const row = document.getElementById(`result-row-${filesProcessed}`);
+                    if (row) {
+                        row.outerHTML = createTableRow(result, filesProcessed);
+                        updateSummary();
+                    }
+                    
+                    // Process next image if more remain
+                    if (filesProcessed + 1 < totalFiles) {
+                        setTimeout(() => {
+                            processNextImage(filesProcessed + 1, totalFiles);
+                        }, 100);
+                    } else {
+                        finishClassification();
+                    }
+                } else {
+                    finishClassification();
+                }
+            } catch (error) {
+                console.error('Error processing image:', error);
+                showError(filesProcessed);
+                finishClassification();
+            }
+        }
+
+        function finishClassification() {
+            isClassifying = false;
+            const classifyBtn = document.getElementById('classify-btn');
+            classifyBtn.disabled = false;
+            classifyBtn.innerHTML = '<i class="fas fa-tags"></i> Classify';
+        }
+
+        async function highlightClassification() {
+            if (isClassifying) {
+                alert('Classification in progress...');
+                return;
+            }
+
+            const resultsBody = document.getElementById('results-tbody');
+            const myDropzone = Dropzone.forElement("#upload-form");
+            
+            if (!myDropzone.files.length) {
+                alert("Please upload some images first!");
+                return;
+            }
+
+            // Reset classification state and UI
+            isClassifying = true;
+            const classifyBtn = document.getElementById('classify-btn');
+            classifyBtn.disabled = true;
+            classifyBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Classifying...';
+
+            // Clear previous results
+            resultsBody.innerHTML = '';
+            
+            // Reset server-side state
+            try {
+                await fetch('/clear_uploads', { method: 'POST' });
+                
+                // Re-upload all files
+                for (const file of myDropzone.files) {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    await fetch('/upload_multiple', {
+                        method: 'POST',
+                        body: formData
+                    });
+                }
+                
+                // Create placeholder rows
+                myDropzone.files.forEach((file, index) => {
+                    resultsBody.insertAdjacentHTML('beforeend', `
+                        <tr id="result-row-${index}">
+                            <td class="serial">${index + 1}</td>
+                            <td class="image-col">
+                                <div class="filename">${file.name}</div>
+                                <div style="color: var(--text-secondary);">Waiting...</div>
+                            </td>
+                            <td class="result-col">
+                                <i class="fas fa-clock"></i>
+                            </td>
+                            <td class="labels-col">
+                                <i class="fas fa-clock"></i>
+                            </td>
+                        </tr>
+                    `);
+                });
+
+                // Start processing
+                processNextImage(0, myDropzone.files.length);
+                
+            } catch (error) {
+                console.error('Error during classification:', error);
+                alert('Error during classification. Please try again.');
+                finishClassification();
+            }
+        }
+
+        function showError(index) {
+            const row = document.getElementById(`result-row-${index}`);
+            if (row) {
+                row.innerHTML = `
+                    <td class="serial">${index + 1}</td>
+                    <td colspan="3" style="color: var(--error-color);">
+                        Error processing image. Please try again.
+                    </td>
+                `;
+            }
+        }
+
+        function toggleLabels(labelsDiv) {
+            labelsDiv.classList.toggle('expanded');
+        }
+
+        document.getElementById('image-modal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeModal();
+            }
+        });
+
+        document.addEventListener('click', function(e) {
+            if (e.target.classList.contains('thumbnail')) {
+                e.preventDefault();
+                const box = document.getElementById('thumbnail-preview-box');
+                const img = document.getElementById('thumbnail-preview-img');
+                img.src = e.target.src;
+                box.style.display = 'block';
+                box.style.left = (e.pageX + 10) + 'px';
+                box.style.top = (e.pageY + 10) + 'px';
+
+                document.addEventListener('keydown', hideOnEscape);
+            } else if (!e.target.closest('#thumbnail-preview-box')) {
+                hidePreview();
+            }
+        });
+
+        function hideOnEscape(e) {
+            if (e.key === 'Escape') {
+                hidePreview();
+            }
+        }
+
+        function hidePreview() {
+            const box = document.getElementById('thumbnail-preview-box');
+            box.style.display = 'none';
+            document.removeEventListener('keydown', hideOnEscape);
+        }
+
+        // Function to download the entire page as HTML
+        function downloadPageAsHTML() {
+            const now = new Date();
+            const date = now.toLocaleDateString('en-CA');
+            const time = now.toLocaleTimeString('en-GB')
+                .replace(/:/g, '-')
+                .split('.')[0];
+
+            // Show progress message
+            const btn = document.getElementById('download-html-btn');
+            const originalBtnText = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Preparing report...';
+
+            try {
+                // Get summary content once
+                const summaryContent = document.getElementById('summary').innerHTML;
+                
+                // Collect only failed images
+                const rows = document.querySelectorAll('#results-tbody tr');
+                if (!rows.length) {
+                    throw new Error('No data to save');
+                }
+
+                const tableData = Array.from(rows)
+                    .filter(row => row.querySelector('.result-col span').textContent === 'Fail')
+                    .map(row => ({
+                        serialNo: row.querySelector('.serial').textContent,
+                        image: row.querySelector('.thumbnail').src,
+                        filename: row.querySelector('.filename').textContent,
+                        status: row.querySelector('.result-col span').textContent,
+                        labels: row.querySelector('.labels') ? 
+                            Array.from(row.querySelector('.labels').querySelectorAll('.label'))
+                                .map(label => label.textContent) : []
+                    }));
+
+                if (tableData.length === 0) {
+                    alert('No failed images to save!');
+                    return;
+                }
+
+                // Split data into smaller chunks (5 rows per chunk)
+                const CHUNK_SIZE = 5;
+                const chunks = [];
+                for (let i = 0; i < tableData.length; i += CHUNK_SIZE) {
+                    chunks.push(tableData.slice(i, i + CHUNK_SIZE));
+                }
+
+                // Progress tracking
+                let currentChunk = 0;
+                const totalChunks = chunks.length;
+
+                async function sendChunk() {
+                    try {
+                        // Update button text with progress
+                        btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Saving ${currentChunk + 1}/${totalChunks}`;
+                        
+                        const response = await fetch('/save_report_chunk', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                chunkNumber: currentChunk,
+                                totalChunks: totalChunks,
+                                date: date,
+                                time: time,
+                                summary: currentChunk === 0 ? summaryContent : '',
+                                chunk: chunks[currentChunk]
+                            })
+                        });
+
+                        if (!response.ok) {
+                            const error = await response.json();
+                            throw new Error(error.error || 'Failed to save report');
+                        }
+
+                        const result = await response.json();
+                        
+                        if (result.error) {
+                            throw new Error(result.error);
+                        }
+
+                        if (currentChunk < totalChunks - 1) {
+                            currentChunk++;
+                            await sendChunk();
+                        } else {
+                            alert(`Report saved successfully in Reports/${date}/Report_${date}_${time}.html`);
+                            btn.innerHTML = originalBtnText;
+                            btn.disabled = false;
+                        }
+                    } catch (error) {
+                        console.error('Error:', error);
+                        alert('Error saving report: ' + error.message);
+                        btn.innerHTML = originalBtnText;
+                        btn.disabled = false;
+                    }
+                }
+
+                // Start sending chunks
+                sendChunk().catch(error => {
+                    console.error('Error in chunk processing:', error);
+                    alert('Error saving report: ' + error.message);
+                    btn.innerHTML = originalBtnText;
+                    btn.disabled = false;
+                });
+
+            } catch (error) {
+                console.error('Error:', error);
+                alert('Error preparing report: ' + error.message);
+                btn.innerHTML = originalBtnText;
+                btn.disabled = false;
+            }
+        }
+    </script>
+</body>
+</html>

templates/report_template.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Classification Report</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+        :root {
+            --primary-color: #4f46e5;
+            --primary-dark: #4338ca;
+            --success-color: #22c55e;
+            --error-color: #ef4444;
+            --background-color: #1a1a2e;
+            --card-background: rgba(255, 255, 255, 0.1);
+            --text-primary: #ffffff;
+            --text-secondary: #a5b4fc;
+            --border-color: rgba(255, 255, 255, 0.18);
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            margin: 0;
+            padding: 2rem;
+            color: var(--text-primary);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .glass-card {
+            background: var(--card-background);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            border: 1px solid var(--border-color);
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .header h1 {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        #summary {
+            background: var(--card-background);
+            padding: 1rem;
+            border-radius: 0.5rem;
+            text-align: center;
+            margin-bottom: 1.5rem;
+            backdrop-filter: blur(5px);
+        }
+
+        .results-table {
+            width: 100%;
+            border-collapse: collapse;
+            background: var(--card-background);
+            border-radius: 0.5rem;
+            overflow: hidden;
+        }
+
+        .results-table th,
+        .results-table td {
+            padding: 1rem;
+            text-align: center;
+            border: 1px solid var(--border-color);
+        }
+
+        .serial {
+            width: 80px;
+        }
+
+        .image-col {
+            width: 200px;
+        }
+
+        .result-col {
+            width: 180px;
+        }
+
+        .labels-col {
+            width: auto;
+            min-width: 150px;
+        }
+
+        .thumbnail {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            border-radius: 0.5rem;
+            cursor: pointer;
+        }
+
+        .result-pass,
+        .result-fail {
+            display: inline-block;
+            padding: 0.5rem 1rem;
+            border-radius: 9999px;
+            text-align: center;
+        }
+
+        .result-pass {
+            background: rgba(34, 197, 94, 0.1);
+            color: var(--success-color);
+        }
+
+        .result-fail {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--error-color);
+        }
+
+        .labels {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            justify-content: center;
+        }
+
+        .label {
+            display: inline-block;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 0.5rem 1rem;
+            border-radius: 9999px;
+            margin: 0.25rem;
+            color: var(--text-secondary);
+        }
+
+        .image-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            position: relative;
+            max-width: 90%;
+            max-height: 90vh;
+        }
+
+        .modal-image {
+            max-width: 100%;
+            max-height: 90vh;
+            object-fit: contain;
+            border-radius: 0.5rem;
+        }
+
+        .modal-close {
+            position: absolute;
+            top: -2rem;
+            right: 0;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
+            background: none;
+            border: none;
+            padding: 0.5rem;
+        }
+
+        #thumbnail-preview-box {
+            display: none;
+            position: absolute;
+            z-index: 9999;
+            background: var(--card-background);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 1rem;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+            max-width: 300px;
+        }
+
+        #thumbnail-preview-box img {
+            max-width: 100%;
+            border-radius: 0.5rem;
+            display: block;
+        }
+
+        .filename {
+            margin-top: 0.5rem;
+            font-size: 0.9rem;
+            word-break: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="glass-card">
+            <div class="header">
+                <h1>Failed Images Report</h1>
+                <p>Date: {date}  |  Time: {time}</p>
+            </div>
+            
+            <div id="summary">
+                {summary_content}
+            </div>
+
+            <div class="results-section">
+                <table class="results-table" id="results-table">
+                    <thead>
+                        <tr>
+                            <th class="serial">S.No</th>
+                            <th class="image-col">Image</th>
+                            <th class="result-col">Result</th>
+                            <th class="labels-col">Labels</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {table_rows}
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Image Modal -->
+            <div class="image-modal" id="image-modal">
+                <div class="modal-content">
+                    <button class="modal-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                    <img class="modal-image" id="modal-image" src="" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="thumbnail-preview-box">
+        <img id="thumbnail-preview-img" src="" alt="">
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Modal functionality
+            const modal = document.getElementById('image-modal');
+            const modalImg = modal.querySelector('.modal-image');
+            const closeBtn = modal.querySelector('.modal-close');
+
+            // Close modal events
+            closeBtn.onclick = () => modal.style.display = 'none';
+            modal.onclick = e => {
+                if (e.target === modal) modal.style.display = 'none';
+            };
+
+            // Escape key to close modal
+            document.addEventListener('keydown', e => {
+                if (e.key === 'Escape') modal.style.display = 'none';
+            });
+
+            // Thumbnail preview functionality
+            document.addEventListener('click', function(e) {
+                if (e.target.classList.contains('thumbnail')) {
+                    e.preventDefault();
+                    const box = document.getElementById('thumbnail-preview-box');
+                    const img = document.getElementById('thumbnail-preview-img');
+                    img.src = e.target.src;
+                    box.style.display = 'block';
+                    box.style.left = (e.pageX + 10) + 'px';
+                    box.style.top = (e.pageY + 10) + 'px';
+                } else if (!e.target.closest('#thumbnail-preview-box')) {
+                    document.getElementById('thumbnail-preview-box').style.display = 'none';
+                }
+            });
+        });
+    </script>
+</body>
+</html>

templates/single.html

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Single Classification</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        html.dark {
+            --bg-color: #1a202c;
+            --text-color: #e2e8f0;
+            --card-bg-color: #2d3748;
+            --card-border-color: #4a5568;
+            --btn-bg-color: #4a5568;
+            --btn-hover-bg-color: #2c5282;
+            --btn-text-color: #e2e8f0;
+        }
+
+        html.light {
+            --bg-color: #f7fafc;
+            --text-color: #2d3748;
+            --card-bg-color: #ffffff;
+            --card-border-color: #e2e8f0;
+            --btn-bg-color: #3182ce;
+            --btn-hover-bg-color: #2c5282;
+            --btn-text-color: #ffffff;
+        }
+
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-color);
+        }
+
+        .card {
+            background-color: var(--card-bg-color);
+            border: 1px solid var(--card-border-color);
+        }
+
+        .btn {
+            background-color: var(--btn-bg-color);
+            color: var(--btn-text-color);
+        }
+
+        .btn:hover {
+            background-color: var(--btn-hover-bg-color);
+        }
+
+        .loading {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+        }
+
+        .result-table {
+            font-family: monospace;
+            white-space: pre;
+        }
+
+        .classification-text {
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+
+        .btn-classify {
+            background-color: #10b981;
+            color: white;
+            font-size: 1.1rem;
+            padding: 0.75rem 1.5rem;
+            border-radius: 9999px;
+        }
+
+        .btn-classify:hover {
+            background-color: #059669;
+        }
+
+        .btn-remove {
+            background-color: #ef4444;
+            color: white;
+            font-size: 1.1rem;
+            padding: 0.75rem 1.5rem;
+            border-radius: 9999px;
+        }
+
+        .btn-remove:hover {
+            background-color: #dc2626;
+        }
+
+        .results-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        .classification-result {
+            margin: 1.5rem 0;
+            text-align: center;
+        }
+
+        .table-container {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            text-align: left;
+        }
+
+        /* Loading overlay styles */
+        .loading-overlay {
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+        }
+
+        .loading-text {
+            color: white;
+            font-size: 1.2rem;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <div class="flex justify-end mb-4">
+            <button id="themeToggle" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-600">
+                ☀️
+            </button>
+        </div>
+        <h1 class="text-3xl font-bold text-center mb-8">Single Image Classification</h1>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Left Column: Image Upload -->
+            <div class="card p-6 rounded-lg shadow-md">
+                <div id="uploadSection" class="mb-4">
+                    <label class="block text-sm font-bold mb-2">Upload Image</label>
+                    <input type="file" id="imageInput" accept=".jpg,.jpeg,.png" class="hidden">
+                    <button onclick="document.getElementById('imageInput').click()" class="btn w-full py-2 px-4 rounded">
+                        Select Image
+                    </button>
+                </div>
+                
+                <div id="imagePreview" class="mt-4 hidden">
+                    <img id="preview" class="max-w-full h-auto rounded-lg">
+                    <div class="mt-4 flex space-x-4">
+                        <button onclick="removeImage()" class="btn btn-remove flex-1">
+                            Remove
+                        </button>
+                        <button onclick="classifyImage()" class="btn btn-classify flex-1">
+                            Classify
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Right Column: Results -->
+            <div class="card p-6 rounded-lg shadow-md">
+                <h2 class="text-xl font-bold mb-4 text-center">Classification Results</h2>
+                <div id="results" class="results-container"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading Overlay -->
+    <div id="loading" class="loading flex items-center justify-center">
+        <div class="loading-overlay p-8 rounded-lg text-center">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto"></div>
+            <p id="loadingText" class="mt-4 loading-text">Processing...</p>
+        </div>
+    </div>
+
+    <script>
+        // Theme handling
+        const themeToggle = document.getElementById('themeToggle');
+        const htmlElement = document.documentElement;
+        
+        // Initialize theme
+        if (!localStorage.getItem('theme')) {
+            localStorage.setItem('theme', 'dark');
+        }
+        
+        // Apply saved theme or default to dark
+        const currentTheme = localStorage.getItem('theme') || 'dark';
+        htmlElement.classList.remove('light', 'dark');
+        htmlElement.classList.add(currentTheme);
+        themeToggle.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
+
+        // Theme toggle handler
+        themeToggle.addEventListener('click', () => {
+            const isDark = htmlElement.classList.contains('dark');
+            htmlElement.classList.remove('dark', 'light');
+            const newTheme = isDark ? 'light' : 'dark';
+            htmlElement.classList.add(newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '☀️' : '🌙';
+        });
+
+        // File handling
+        let currentFile = null;
+
+        document.getElementById('imageInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                uploadFile(file);
+            }
+        });
+
+        function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            showLoading('Uploading...');
+            
+            fetch('/upload_single', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.filename) {
+                    currentFile = data.filename;
+                    document.getElementById('preview').src = `/static/uploads/single/${data.filename}`;
+                    document.getElementById('imagePreview').classList.remove('hidden');
+                    document.getElementById('uploadSection').classList.add('hidden');
+                } else {
+                    alert(data.error || 'Upload failed');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Upload failed');
+            })
+            .finally(() => {
+                hideLoading();
+            });
+        }
+
+        function removeImage() {
+            document.getElementById('imageInput').value = '';
+            document.getElementById('imagePreview').classList.add('hidden');
+            document.getElementById('uploadSection').classList.remove('hidden');
+            document.getElementById('results').innerHTML = '';
+            currentFile = null;
+        }
+
+        function classifyImage() {
+            if (!currentFile) {
+                alert('Please upload an image first');
+                return;
+            }
+
+            showLoading('Classifying...');
+
+            fetch('/classify_single', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ filename: currentFile })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                const resultsDiv = document.getElementById('results');
+                resultsDiv.innerHTML = `
+                    <div class="classification-result">
+                        <span class="font-bold">Classification: </span>
+                        <span class="classification-text ${data.classification === 'Pass' ? 'text-green-600' : 'text-red-600'}">
+                            ${data.classification}
+                        </span>
+                    </div>
+                    <div class="table-container">
+                        <pre class="whitespace-pre-wrap font-mono text-sm">${data.result_table}</pre>
+                    </div>
+                `;
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Classification failed: ' + error.message);
+            })
+            .finally(() => {
+                hideLoading();
+            });
+        }
+
+        function showLoading(text) {
+            document.getElementById('loading').style.display = 'flex';
+            document.getElementById('loadingText').textContent = text;
+        }
+
+        function hideLoading() {
+            document.getElementById('loading').style.display = 'none';
+        }
+    </script>
+</body>
+</html>

utils.py

@@ -0,0 +1,131 @@
+import re
+import numpy as np
+import cv2
+from PIL import Image
+import random
+import torch
+import torchvision.transforms as T
+from torchvision.transforms.functional import InterpolationMode
+from difflib import SequenceMatcher
+from nltk.metrics.distance import edit_distance
+import nltk
+
+# Ensure NLTK data is downloaded
+try:
+    nltk.data.find('corpora/words.zip')
+except LookupError:
+    nltk.download('words')
+try:
+    nltk.data.find('tokenizers/punkt')
+except LookupError:
+    nltk.download('punkt')
+
+from nltk.corpus import words
+
+def set_seed(seed=42):
+    random.seed(seed)
+    np.random.seed(seed)
+    torch.manual_seed(seed)
+    # torch.cuda.manual_seed_all(seed) # Uncomment if using GPU
+    torch.backends.cudnn.deterministic = True
+    torch.backends.cudnn.benchmark = False
+
+def build_transform(input_size=448):
+    mean = (0.485, 0.456, 0.406)
+    std = (0.229, 0.224, 0.225)
+    return T.Compose([
+        T.Lambda(lambda img: img.convert('RGB')),
+        T.Resize((input_size, input_size), interpolation=InterpolationMode.BICUBIC),
+        T.ToTensor(),
+        T.Normalize(mean=mean, std=std)
+    ])
+
+def get_roi(image_path_or_obj, *roi):
+    """
+    Extracts ROI from an image path or PIL Image object.
+    """
+    if isinstance(image_path_or_obj, str):
+        image = Image.open(image_path_or_obj).convert('RGB')
+    else:
+        image = image_path_or_obj.convert('RGB')
+        
+    width, height = image.size
+
+    roi_x_start = int(width * roi[0])
+    roi_y_start = int(height * roi[1])
+    roi_x_end = int(width * roi[2])
+    roi_y_end = int(height * roi[3])
+
+    cropped_image = image.crop((roi_x_start, roi_y_start, roi_x_end, roi_y_end))
+    return cropped_image
+
+def clean_text(text):
+    return re.sub(r'[^a-zA-Z0-9]', '', text).strip().lower()
+
+def are_strings_similar(str1, str2, max_distance=3, max_length_diff=2):
+    if str1 == str2:
+        return True
+    if abs(len(str1) - len(str2)) > max_length_diff:
+        return False
+    edit_distance_value = edit_distance(str1, str2)
+    return edit_distance_value <= max_distance
+
+def blur_image(image, strength):
+    image_np = np.array(image)
+    blur_strength = int(strength * 50)
+    blur_strength = max(1, blur_strength | 1)
+    blurred_image = cv2.GaussianBlur(image_np, (blur_strength, blur_strength), 0)
+    blurred_pil_image = Image.fromarray(blurred_image)
+    return blurred_pil_image
+
+def is_blank(text, limit=15):
+    return len(text) < limit
+
+def string_similarity(a, b):
+    return SequenceMatcher(None, a.lower(), b.lower()).ratio()
+
+def find_similar_substring(text, keyword, threshold=0.9):
+    text = text.lower()
+    keyword = keyword.lower()
+
+    if keyword in text:
+        return True
+
+    keyword_length = len(keyword.split())
+    words_list = text.split()
+
+    for i in range(len(words_list) - keyword_length + 1):
+        phrase = ' '.join(words_list[i:i + keyword_length])
+        similarity = string_similarity(phrase, keyword)
+        if similarity >= threshold:
+            return True
+
+    return False
+
+def destroy_text_roi(image, *roi_params):
+    image_np = np.array(image)
+
+    h, w, _ = image_np.shape
+    x1 = int(roi_params[0] * w)
+    y1 = int(roi_params[1] * h)
+    x2 = int(roi_params[2] * w)
+    y2 = int(roi_params[3] * h)
+
+    roi = image_np[y1:y2, x1:x2]
+
+    blurred_roi = cv2.GaussianBlur(roi, (75, 75), 0)
+    noise = np.random.randint(0, 50, (blurred_roi.shape[0], blurred_roi.shape[1], 3), dtype=np.uint8)
+    noisy_blurred_roi = cv2.add(blurred_roi, noise)
+    image_np[y1:y2, x1:x2] = noisy_blurred_roi
+    return Image.fromarray(image_np)
+
+def is_english(text):
+    allowed_pattern = re.compile(
+        r'^[a-zA-Z०-९\u0930\s\.,!?\-;:"\'()]*$'
+    )
+    return bool(allowed_pattern.match(text))
+
+def is_valid_english(text):
+    english_words = set(words.words())
+    cleaned_words = ''.join(c.lower() if c.isalnum() else ' ' for c in text).split()
+    return all(word.lower() in english_words for word in cleaned_words)