nlp ultimate tutor

Dockerfile

@@ -0,0 +1,55 @@
+# Use Python 3.9 slim image for better performance
+FROM python:3.11-slim
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV HF_HOME=/tmp/huggingface
+ENV TRANSFORMERS_CACHE=/tmp/huggingface/transformers
+ENV TORCH_HOME=/tmp/torch
+
+# Create a non-root user (required for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user
+ENV PATH=/home/user/.local/bin:$PATH
+
+# Set working directory
+WORKDIR $HOME/app
+
+# Install system dependencies (as root)
+USER root
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    software-properties-common \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Switch back to user
+USER user
+
+# Copy requirements and install Python dependencies
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Download spaCy model
+RUN python -m spacy download en_core_web_sm
+
+# Copy application code
+COPY --chown=user . .
+
+# Create cache directories
+RUN mkdir -p /tmp/huggingface/transformers
+RUN mkdir -p /tmp/torch
+
+# Expose port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/ || exit 1
+
+# Run the Flask application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,360 @@
+from flask import Flask, render_template, request, jsonify, session
+import os
+import json
+from datetime import datetime
+
+# Import components
+from components.preprocessing import preprocessing_handler
+from components.tokenization import tokenization_handler
+from components.pos_tagging import pos_tagging_handler
+from components.named_entity import named_entity_handler
+from components.sentiment import sentiment_handler
+from components.summarization import summarization_handler
+from components.topic_analysis import topic_analysis_handler
+from components.question_answering import question_answering_handler
+from components.text_generation import text_generation_handler
+from components.translation import translation_handler
+from components.classification import classification_handler
+from components.vector_embeddings import vector_embeddings_handler
+
+# Import utilities
+from utils.model_loader_hf import download_nltk_resources, load_spacy, initialize_essential_models
+from utils.helpers import text_statistics
+
+app = Flask(__name__)
+app.secret_key = 'your-secret-key-here'  # Change this in production
+
+# Sample texts
+SAMPLE_TEXTS = {
+    "News Article": "The European Commission has fined Google €1.49 billion for abusive practices in online advertising. Google abused its market dominance by imposing restrictive clauses in contracts with third-party websites, preventing competitors from placing their search adverts on these websites.",
+    "Product Review": "I absolutely love this smartphone! The camera quality is outstanding and the battery life is impressive. The user interface is intuitive and the performance is smooth even when running multiple apps. However, I find the price a bit high compared to similar models on the market.",
+    "Scientific Text": "Climate change is the long-term alteration of temperature and typical weather patterns in a place. The cause of current climate change is largely human activity, like burning fossil fuels, which adds heat-trapping gases to Earth's atmosphere. The consequences of changing climate are already being felt worldwide.",
+    "Literary Text": "The old man was thin and gaunt with deep wrinkles in the back of his neck. The brown blotches of the benevolent skin cancer the sun brings from its reflection on the tropical sea were on his cheeks. The blotches ran well down the sides of his face and his hands had the deep-creased scars from handling heavy fish on the cords."
+}
+
+# Initialize essential models for HF Spaces
+initialize_essential_models()
+
+@app.route('/')
+def index():
+    """Main page with text input and analysis options"""
+    return render_template('index.html', sample_texts=SAMPLE_TEXTS)
+
+@app.route('/api/text-stats', methods=['POST'])
+def get_text_stats():
+    """API endpoint to get text statistics"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    stats = text_statistics(text)
+    return jsonify(stats)
+
+@app.route('/api/sample-text', methods=['POST'])
+def get_sample_text():
+    """API endpoint to get sample text"""
+    data = request.get_json()
+    sample_type = data.get('sample_type', 'Custom')
+    
+    if sample_type == "Custom":
+        return jsonify({'text': ''})
+    else:
+        return jsonify({'text': SAMPLE_TEXTS.get(sample_type, '')})
+
+# Text Processing Routes
+@app.route('/preprocessing')
+def preprocessing():
+    """Text preprocessing page"""
+    return render_template('preprocessing.html')
+
+@app.route('/api/preprocessing', methods=['POST'])
+def api_preprocessing():
+    """API endpoint for text preprocessing"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = preprocessing_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/tokenization')
+def tokenization():
+    """Tokenization page"""
+    return render_template('tokenization.html')
+
+@app.route('/api/tokenization', methods=['POST'])
+def api_tokenization():
+    """API endpoint for tokenization"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = tokenization_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/pos-tagging')
+def pos_tagging():
+    """POS tagging page"""
+    return render_template('pos_tagging.html')
+
+@app.route('/api/pos-tagging', methods=['POST'])
+def api_pos_tagging():
+    """API endpoint for POS tagging"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = pos_tagging_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/named-entity')
+def named_entity():
+    """Named entity recognition page"""
+    return render_template('named_entity.html')
+
+@app.route('/api/named-entity', methods=['POST'])
+def api_named_entity():
+    """API endpoint for named entity recognition"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = named_entity_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# Analysis Routes
+@app.route('/sentiment')
+def sentiment():
+    """Sentiment analysis page"""
+    return render_template('sentiment.html')
+
+@app.route('/api/sentiment', methods=['POST'])
+def api_sentiment():
+    """API endpoint for sentiment analysis"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = sentiment_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/summarization')
+def summarization():
+    """Text summarization page"""
+    return render_template('summarization.html')
+
+@app.route('/api/summarization', methods=['POST'])
+def api_summarization():
+    """API endpoint for text summarization"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = summarization_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/topic-analysis')
+def topic_analysis():
+    """Topic analysis page"""
+    return render_template('topic_analysis.html')
+
+@app.route('/api/topic-analysis', methods=['POST'])
+def api_topic_analysis():
+    """API endpoint for topic analysis"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = topic_analysis_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# Advanced NLP Routes
+@app.route('/question-answering')
+def question_answering():
+    """Question answering page"""
+    return render_template('question_answering.html')
+
+@app.route('/api/question-answering', methods=['POST'])
+def api_question_answering():
+    """API endpoint for question answering"""
+    data = request.get_json(silent=True) or {}
+    # Accept from JSON, form, or query string
+    text = (
+        data.get('context')
+        or data.get('text')
+        or request.form.get('context')
+        or request.form.get('text')
+        or request.args.get('context')
+        or request.args.get('text')
+        or ''
+    )
+    question = (
+        data.get('question')
+        or request.form.get('question')
+        or request.args.get('question')
+        or ''
+    )
+    confidence_threshold = (
+        data.get('confidence_threshold')
+        or request.form.get('confidence_threshold')
+        or request.args.get('confidence_threshold')
+        or 0.5
+    )
+    try:
+        confidence_threshold = float(confidence_threshold)
+    except Exception:
+        confidence_threshold = 0.5
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = question_answering_handler(text, question, confidence_threshold=confidence_threshold)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/text-generation')
+def text_generation():
+    """Text generation page"""
+    return render_template('text_generation.html')
+
+@app.route('/api/text-generation', methods=['POST'])
+def api_text_generation():
+    """API endpoint for text generation"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = text_generation_handler(text)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/translation')
+def translation():
+    """Translation page"""
+    return render_template('translation.html')
+
+@app.route('/api/translation', methods=['POST'])
+def api_translation():
+    """API endpoint for translation"""
+    data = request.get_json()
+    text = data.get('text', '')
+    target_language = data.get('target_language', 'en')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = translation_handler(text, target_language)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/classification')
+def classification():
+    """Classification page"""
+    return render_template('classification.html')
+
+@app.route('/api/classification', methods=['POST'])
+def api_classification():
+    """API endpoint for classification"""
+    data = request.get_json()
+    text = data.get('text', '')
+    scenario = data.get('scenario', 'Sentiment')
+    multi_label = data.get('multi_label', False)
+    custom_labels = data.get('custom_labels', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = classification_handler(text, scenario, multi_label, custom_labels)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/vector-embeddings')
+def vector_embeddings():
+    """Vector embeddings page"""
+    return render_template('vector_embeddings.html')
+
+@app.route('/api/vector-embeddings', methods=['POST'])
+def api_vector_embeddings():
+    """API endpoint for vector embeddings"""
+    data = request.get_json()
+    text = data.get('text', '')
+    query = data.get('query', '')
+    
+    if not text:
+        return jsonify({'error': 'No text provided'}), 400
+    
+    try:
+        result = vector_embeddings_handler(text, query)
+        return jsonify({'success': True, 'result': result})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/semantic-search', methods=['POST'])
+def api_semantic_search():
+    """API endpoint for semantic search"""
+    from components.vector_embeddings import perform_semantic_search
+    
+    data = request.get_json()
+    context = data.get('context', '')
+    query = data.get('query', '')
+    
+    if not context or not query:
+        return jsonify({'error': 'Both context and query are required'}), 400
+    
+    try:
+        result = perform_semantic_search(context, query)
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    # For HF Spaces, run on port 7860
+    port = int(os.environ.get('PORT', 7860))
+    app.run(debug=False, host='0.0.0.0', port=port)

components/classification.py

@@ -0,0 +1,188 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+from utils.model_loader import load_zero_shot
+from utils.helpers import fig_to_html, df_to_html_table
+
+def classification_handler(text_input, scenario="Sentiment", multi_label=False, custom_labels=""):
+    """Show zero-shot classification capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Zero-shot Classification</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-tags"></i>
+    Zero-shot classification can categorize text into arbitrary classes without having been specifically trained on those categories.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Model Used:</h4>
+        <ul>
+            <li><b>facebook/bart-large-mnli</b> - BART model fine-tuned on MultiNLI dataset</li>
+            <li><b>Capabilities</b> - Can classify text into any user-defined categories</li>
+            <li><b>Performance</b> - Best performance on distinct, well-defined categories</li>
+        </ul>
+    </div>
+    """)
+    
+    # Classification scenarios
+    scenarios = {
+        "Sentiment": ["positive", "negative", "neutral"],
+        "Emotion": ["joy", "sadness", "anger", "fear", "surprise"],
+        "Writing Style": ["formal", "informal", "technical", "creative", "persuasive"],
+        "Intent": ["inform", "persuade", "entertain", "instruct"],
+        "Content Type": ["news", "opinion", "review", "instruction", "narrative"],
+        "Audience Level": ["beginner", "intermediate", "advanced", "expert"],
+        "Custom": []
+    }
+    
+    try:
+        # Get labels based on scenario
+        if scenario == "Custom":
+            labels = [label.strip() for label in custom_labels.split("\n") if label.strip()]
+            if not labels:
+                output_html.append("""
+                <div class="alert alert-warning">
+                    <h3>No Custom Categories</h3>
+                    <p>Please enter at least one custom category.</p>
+                </div>
+                """)
+                output_html.append('</div>')  # Close result-area div
+                return '\n'.join(output_html)
+        else:
+            labels = scenarios[scenario]
+        
+        # Update multi-label default for certain categories
+        if scenario in ["Emotion", "Intent", "Content Type"] and not multi_label:
+            multi_label = True
+        
+        # Load model
+        classifier = load_zero_shot()
+        
+        # Classification process
+        result = classifier(text_input, labels, multi_label=multi_label)
+        
+        # Display results
+        output_html.append('<h3 class="task-subheader">Classification Results</h3>')
+        
+        # Create DataFrame
+        class_df = pd.DataFrame({
+            'Category': result['labels'],
+            'Confidence': result['scores']
+        })
+        
+        # Visualization
+        fig = plt.figure(figsize=(10, 6))
+        bars = plt.barh(class_df['Category'], class_df['Confidence'], color='#1976D2')
+        
+        # Add percentage labels
+        for i, bar in enumerate(bars):
+            plt.text(bar.get_width() + 0.01, bar.get_y() + bar.get_height()/2, 
+                    f"{bar.get_width():.1%}", va='center')
+        
+        plt.xlim(0, 1.1)
+        plt.xlabel('Confidence Score')
+        plt.title(f'{scenario} Classification')
+        plt.tight_layout()
+        
+        # Layout with vertical stacking - Chart first
+        output_html.append('<div class="row mb-4">')
+        output_html.append('<div class="col-12">')
+        output_html.append('<h4>Classification Confidence Chart</h4>')
+        output_html.append(fig_to_html(fig))
+        output_html.append('</div>')
+        output_html.append('</div>')  # Close chart row
+        
+        # Data table and result in next row
+        output_html.append('<div class="row">')
+        output_html.append('<div class="col-md-6">')
+        output_html.append('<h4>Detailed Results</h4>')
+        output_html.append(df_to_html_table(class_df))
+        output_html.append('</div>')
+        
+        # Top result
+        output_html.append('<div class="col-md-6">')
+        top_class = class_df.iloc[0]['Category']
+        top_score = class_df.iloc[0]['Confidence']
+        
+        output_html.append(f"""
+        <div class="alert alert-primary">
+            <h3>Primary Classification</h3>
+            <p class="h4">{top_class}</p>
+            <p>Confidence: {top_score:.1%}</p>
+        </div>
+        """)
+        
+        output_html.append('</div>')  # Close result column
+        output_html.append('</div>')  # Close row
+        
+        # Multiple categories (if multi-label)
+        if multi_label:
+            # Get all categories with significant confidence
+            significant_classes = class_df[class_df['Confidence'] > 0.5]
+            
+            if len(significant_classes) > 1:
+                output_html.append(f"""
+                <div class="alert alert-info">
+                    <h3>Multiple Categories Detected</h3>
+                    <p>This text appears to belong to multiple categories:</p>
+                </div>
+                """)
+                
+                category_list = []
+                for _, row in significant_classes.iterrows():
+                    category_list.append(f"<li><b>{row['Category']}</b> ({row['Confidence']:.1%})</li>")
+                
+                output_html.append(f"<ul>{''.join(category_list)}</ul>")
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to classify text: {str(e)}</p>
+        </div>
+        """)
+    
+    # About zero-shot classification
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Zero-shot Classification
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Zero-shot Classification?</h5>
+            
+            <p>Unlike traditional classifiers that need to be trained on examples from each category, 
+            zero-shot classification can categorize text into arbitrary classes it has never seen 
+            during training.</p>
+            
+            <h5>How it works:</h5>
+            
+            <ol>
+                <li>The model converts your text and each potential category into embeddings</li>
+                <li>It calculates how likely the text entails or belongs to each category</li>
+                <li>The model ranks categories by confidence scores</li>
+            </ol>
+            
+            <h5>Benefits:</h5>
+            
+            <ul>
+                <li>Flexibility to classify into any categories without retraining</li>
+                <li>Can work with domain-specific or custom categories</li>
+                <li>Useful for exploratory analysis or when training data is limited</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/named_entity.py

@@ -0,0 +1,342 @@
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+import spacy
+from collections import Counter
+import networkx as nx
+from transformers import AutoTokenizer, AutoModelForTokenClassification, pipeline
+
+from utils.model_loader import load_spacy
+from utils.helpers import fig_to_html, df_to_html_table
+
+def named_entity_handler(text_input):
+    """Show named entity recognition capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Named Entity Recognition</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Named Entity Recognition identifies and classifies key information in text into pre-defined categories such as person names, organizations, locations, etc.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Models Used:</h4>
+        <ul>
+            <li><b>dslim/bert-base-NER</b> - BERT-based Named Entity Recognition model</li>
+            <li><b>spaCy en_core_web_sm</b> - Statistical NLP model for additional analysis</li>
+            <li><b>Entity Types</b> - Identifies people, organizations, locations, and miscellaneous entities</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Load BERT NER model
+        try:
+            tokenizer = AutoTokenizer.from_pretrained("dslim/bert-base-NER")
+            model = AutoModelForTokenClassification.from_pretrained("dslim/bert-base-NER")
+            ner_pipeline = pipeline("ner", model=model, tokenizer=tokenizer, aggregation_strategy="simple")
+        except Exception as model_err:
+            output_html.append(f"""
+            <div class="alert alert-warning">
+                <h4>Model Loading Issue</h4>
+                <p>Could not load BERT NER model: {str(model_err)}</p>
+                <p>Falling back to spaCy model...</p>
+            </div>
+            """)
+            # Fallback to spaCy
+            nlp = load_spacy()
+            doc = nlp(text_input)
+            bert_entities = []
+        else:
+            # Process with BERT NER
+            bert_entities = ner_pipeline(text_input)
+        
+        # Also load spaCy for additional analysis
+        nlp = load_spacy()
+        doc = nlp(text_input)
+        
+        # Combine entities from both models
+        all_entities = []
+        
+        # Add BERT entities
+        for entity in bert_entities:
+            all_entities.append({
+                'text': entity['word'].replace('##', ''),
+                'label': entity['entity_group'],
+                'confidence': entity['score'],
+                'start': entity['start'],
+                'end': entity['end'],
+                'source': 'BERT'
+            })
+        
+        # Add spaCy entities
+        for ent in doc.ents:
+            all_entities.append({
+                'text': ent.text,
+                'label': ent.label_,
+                'confidence': 1.0,  # spaCy doesn't provide confidence scores
+                'start': ent.start_char,
+                'end': ent.end_char,
+                'source': 'spaCy'
+            })
+        
+        # If no entities were found
+        if len(all_entities) == 0:
+            output_html.append("""
+            <div class="alert alert-warning">
+                <h3>No Named Entities Found</h3>
+                <p>The model couldn't identify any named entities in the provided text. Try a different text that contains names, places, organizations, dates, etc.</p>
+            </div>
+            """)
+        else:
+            # Display identified entities in text
+            output_html.append('<h3 class="task-subheader">Identified Entities</h3>')
+            
+            # Color scheme for different entity types (BERT + spaCy)
+            colors = {
+                # BERT NER labels
+                'PER': '#e6194B',         # Person - Red
+                'ORG': '#3cb44b',         # Organization - Green  
+                'LOC': '#4363d8',         # Location - Blue
+                'MISC': '#f58231',        # Miscellaneous - Orange
+                # spaCy labels
+                'PERSON': '#e6194B',      # Red
+                'ORG': '#3cb44b',         # Green
+                'GPE': '#4363d8',         # Blue (locations/geopolitical)
+                'LOC': '#42d4f4',         # Cyan (non-GPE locations)
+                'FACILITY': '#f58231',    # Orange
+                'PRODUCT': '#911eb4',     # Purple
+                'EVENT': '#f032e6',       # Magenta
+                'WORK_OF_ART': '#fabebe', # Pink
+                'LAW': '#008080',         # Teal
+                'DATE': '#9A6324',        # Brown
+                'TIME': '#800000',        # Maroon
+                'PERCENT': '#808000',     # Olive
+                'MONEY': '#000075',       # Navy
+                'QUANTITY': '#000000',    # Black
+                'CARDINAL': '#a9a9a9',    # Dark Gray
+                'ORDINAL': '#808080',     # Gray
+                'NORP': '#469990'         # Nationality/Religious/Political
+            }
+            
+            # Remove duplicates and sort entities by position
+            unique_entities = []
+            seen_spans = set()
+            
+            for entity in all_entities:
+                span = (entity['start'], entity['end'])
+                if span not in seen_spans:
+                    unique_entities.append(entity)
+                    seen_spans.add(span)
+            
+            # Sort by start position
+            sorted_ents = sorted(unique_entities, key=lambda x: x['start'])
+            
+            # Create HTML with highlighted entities
+            html_text = text_input
+            offset = 0
+            
+            for entity in sorted_ents:
+                # Get the appropriate color (default to gray if not found)
+                color = colors.get(entity['label'], '#a9a9a9')
+                
+                # Create the HTML span with tooltip including confidence and source
+                start = entity['start'] + offset
+                end = entity['end'] + offset
+                confidence_text = f" (Confidence: {entity['confidence']:.2f})" if entity['confidence'] < 1.0 else ""
+                tooltip = f"{entity['label']} - {entity['source']}{confidence_text}"
+                
+                entity_html = f'<span class="entity-badge" style="background-color: {color}; color: white; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3);" title="{tooltip}"><strong>{entity["text"]}</strong> <span style="font-size: 0.8em;">({entity["label"]}) ({entity["source"]})</span></span>'
+                
+                # Replace the entity text with the highlighted version
+                html_text = html_text[:start] + entity_html + html_text[end:]
+                
+                # Update offset for subsequent entities
+                offset += len(entity_html) - len(entity['text'])
+            
+            # Display the highlighted text
+            output_html.append(f'<div class="card"><div class="card-body"><div class="entity-text-container">{html_text}</div></div></div>')
+            
+            # Entity count and distribution
+            output_html.append('<h3 class="task-subheader">Entity Distribution</h3>')
+            
+            # Create a DataFrame for the entities
+            entities_data = []
+            for entity in unique_entities:
+                entities_data.append({
+                    'Entity': entity['text'],
+                    'Type': entity['label'],
+                    'Source': entity['source'],
+                    'Confidence': f"{entity['confidence']:.2f}" if entity['confidence'] < 1.0 else "1.00"
+                })
+            
+            entity_df = pd.DataFrame(entities_data)
+            
+            # Calculate entity type distribution
+            entity_counts = Counter([entity['label'] for entity in unique_entities])
+            
+            # Create bar chart for entity type distribution
+            fig = plt.figure(figsize=(12, 8))
+            bars = plt.bar(entity_counts.keys(), entity_counts.values(), 
+                          color=[colors.get(k, '#a9a9a9') for k in entity_counts.keys()])
+            plt.xlabel('Entity Type')
+            plt.ylabel('Count')
+            plt.title('Entity Type Distribution (BERT + spaCy)')
+            plt.xticks(rotation=45, ha='right')
+            
+            # Add count labels on top of bars
+            for bar in bars:
+                height = bar.get_height()
+                plt.text(bar.get_x() + bar.get_width()/2., height + 0.1,
+                        f'{int(height)}',
+                        ha='center', va='bottom')
+            
+            plt.tight_layout()
+            
+            # Chart section
+            output_html.append('<section class="entity-chart-section">')
+            output_html.append('<div class="chart-container">')
+            output_html.append(fig_to_html(fig))
+            output_html.append('</div>')
+            output_html.append('</section>')
+            
+            # Table section
+            output_html.append('<section class="entity-table-container">')
+            output_html.append('<h4>Entities Found</h4>')
+            output_html.append(df_to_html_table(entity_df))
+            output_html.append('</section>')
+            
+            # Entity relationship visualization (for texts with multiple entities)
+            if len(doc.ents) > 1:
+                output_html.append('<h3 class="task-subheader">Entity Relationships</h3>')
+                
+                # Create a network graph of entities that appear in the same sentence
+                G = nx.Graph()
+                
+                # Add nodes for each unique entity
+                for ent in doc.ents:
+                    G.add_node(ent.text, type=ent.label_)
+                
+                # Add edges between entities that appear in the same sentence
+                for sent in doc.sents:
+                    sent_ents = [ent for ent in doc.ents if sent.start <= ent.start < sent.end]
+                    for i, ent1 in enumerate(sent_ents):
+                        for ent2 in sent_ents[i+1:]:
+                            if G.has_edge(ent1.text, ent2.text):
+                                G[ent1.text][ent2.text]['weight'] += 1
+                            else:
+                                G.add_edge(ent1.text, ent2.text, weight=1)
+                
+                # Only show relationship visualization if there are edges
+                if G.number_of_edges() > 0:
+                    # Create a network visualization
+                    plt.figure(figsize=(10, 8))
+                    
+                    # Node colors based on entity type
+                    node_colors = [colors.get(G.nodes[node]['type'], '#a9a9a9') for node in G.nodes()]
+                    
+                    # Position nodes using spring layout
+                    pos = nx.spring_layout(G)
+                    
+                    # Draw the network
+                    nx.draw_networkx_nodes(G, pos, node_size=300, node_color=node_colors, alpha=0.8)
+                    nx.draw_networkx_edges(G, pos, width=1.5, alpha=0.7, edge_color='#888888')
+                    nx.draw_networkx_labels(G, pos, font_size=10, font_weight='bold')
+                    
+                    plt.title('Entity Co-occurrence Network')
+                    plt.axis('off')
+                    plt.tight_layout()
+                    
+                    output_html.append('<div class="alert alert-light"><p class="mb-0">This visualization shows entities that appear in the same sentences:</p></div>')
+                    output_html.append(fig_to_html(plt.gcf()))
+                    plt.close()
+                else:
+                    output_html.append('<p>No entity relationships detected in the text.</p>')
+            
+            # Legend for entity types
+            output_html.append('<h3 class="task-subheader">Entity Type Legend</h3>')
+            
+            entity_descriptions = {
+                'PERSON': 'People, including fictional',
+                'ORG': 'Organizations, companies, institutions',
+                'GPE': 'Geopolitical entities (countries, cities, states)',
+                'LOC': 'Non-GPE locations (mountain ranges, water bodies)',
+                'FACILITY': 'Buildings, airports, highways, bridges',
+                'PRODUCT': 'Products, objects, vehicles, foods',
+                'EVENT': 'Hurricanes, battles, wars, sports events',
+                'WORK_OF_ART': 'Titles of books, songs, etc.',
+                'LAW': 'Named documents made into laws',
+                'DATE': 'Absolute or relative dates',
+                'TIME': 'Times smaller than a day',
+                'PERCENT': 'Percentage',
+                'MONEY': 'Monetary values',
+                'QUANTITY': 'Measurements',
+                'CARDINAL': 'Numerals not falling under another type',
+                'ORDINAL': 'Ordinal numbers',
+                'NORP': 'Nationalities, religious or political groups'
+            }
+            
+            output_html.append('<div class="row">')
+            for entity, color in colors.items():
+                if entity in entity_counts:
+                    output_html.append(f"""
+                    <div class="col-md-6 mb-2">
+                        <div class="card">
+                            <div class="card-body p-2">
+                                <span class="badge me-2" style="background-color: {color}; color: white;">{entity}</span>
+                                <small>{entity_descriptions.get(entity, '')}</small>
+                            </div>
+                        </div>
+                    </div>
+                    """)
+            output_html.append('</div>')  # Close row
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to process named entities: {str(e)}</p>
+        </div>
+        """)
+    
+    # About NER section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Named Entity Recognition
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Named Entity Recognition?</h5>
+            
+            <p>Named Entity Recognition (NER) is an NLP technique that automatically identifies and classifies named entities 
+            in text into predefined categories. These entities are typically proper nouns such as people, organizations, 
+            locations, expressions of times, quantities, monetary values, and percentages.</p>
+            
+            <h5>Applications of NER:</h5>
+            
+            <ul>
+                <li><b>Information Extraction</b> - Identifying key information from large volumes of text</li>
+                <li><b>Question Answering</b> - Helping systems understand what entities questions are referring to</li>
+                <li><b>Document Classification</b> - Using entity types and frequencies to categorize documents</li>
+                <li><b>Customer Service</b> - Identifying product names, issue types, and user information in support tickets</li>
+                <li><b>Content Recommendation</b> - Using entities to find related content</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/pos_tagging.py

@@ -0,0 +1,540 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import nltk
+from collections import Counter
+import random
+import numpy as np
+import io
+import base64
+from PIL import Image
+
+from utils.model_loader import load_spacy
+from utils.helpers import fig_to_html, df_to_html_table, format_pos_token
+
+def pos_tagging_handler(text_input):
+    """Show part-of-speech tagging capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Part-of-Speech Tagging</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Part-of-Speech (POS) tagging is the process of marking up words in text according to their grammatical categories
+    such as noun, verb, adjective, etc.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Models Used:</h4>
+        <ul>
+            <li><b>NLTK</b> - Using the Perceptron tagger trained on the Penn Treebank corpus</li>
+            <li><b>spaCy</b> - Using the en_core_web_sm model's POS tagging capabilities</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Process with NLTK
+        words = nltk.word_tokenize(text_input)
+        nltk_pos = nltk.pos_tag(words)
+        
+        # Process with spaCy
+        nlp = load_spacy()
+        doc = nlp(text_input)
+        spacy_pos = [(token.text, token.pos_) for token in doc]
+        
+        # Display tagged text
+        output_html.append('<h3 class="task-subheader">Tagged Text</h3>')
+        
+        # Color scheme for different POS tags
+        # Using a visually distinct color palette
+        colors = {
+            # NLTK Penn Treebank Tags
+            'NN': '#e6194B',     # Noun - Red
+            'NNS': '#e6194B',    # Plural noun - Red
+            'NNP': '#3cb44b',    # Proper noun - Green
+            'NNPS': '#3cb44b',   # Plural proper noun - Green
+            'VB': '#4363d8',     # Verb - Blue
+            'VBD': '#4363d8',    # Verb, past tense - Blue
+            'VBG': '#4363d8',    # Verb, gerund - Blue
+            'VBN': '#4363d8',    # Verb, past participle - Blue
+            'VBP': '#4363d8',    # Verb, non-3rd singular present - Blue
+            'VBZ': '#4363d8',    # Verb, 3rd singular present - Blue
+            'JJ': '#f58231',     # Adjective - Orange
+            'JJR': '#f58231',    # Comparative adjective - Orange
+            'JJS': '#f58231',    # Superlative adjective - Orange
+            'RB': '#911eb4',     # Adverb - Purple
+            'RBR': '#911eb4',    # Comparative adverb - Purple
+            'RBS': '#911eb4',    # Superlative adverb - Purple
+            'IN': '#f032e6',     # Preposition - Magenta
+            'DT': '#fabebe',     # Determiner - Pink
+            'PRP': '#008080',    # Personal pronoun - Teal
+            'PRP$': '#008080',   # Possessive pronoun - Teal
+            'CC': '#9A6324',     # Coordinating conjunction - Brown
+            'CD': '#800000',     # Cardinal number - Maroon
+            'EX': '#808000',     # Existential there - Olive
+            'FW': '#000075',     # Foreign word - Navy
+            'MD': '#a9a9a9',     # Modal - Dark Gray
+            'PDT': '#469990',    # Predeterminer - Greenish
+            'POS': '#000000',    # Possessive ending - Black
+            'RP': '#aaffc3',     # Particle - Mint
+            'SYM': '#ffd8b1',    # Symbol - Light Orange
+            'TO': '#fffac8',     # to - Light Yellow
+            'UH': '#dcbeff',     # Interjection - Lavender
+            'WDT': '#808080',    # Wh-determiner - Gray
+            'WP': '#808080',     # Wh-pronoun - Gray
+            'WP$': '#808080',    # Possessive wh-pronoun - Gray
+            'WRB': '#808080',    # Wh-adverb - Gray
+            
+            # spaCy Universal POS Tags
+            'NOUN': '#e6194B',   # Noun - Red
+            'PROPN': '#3cb44b',  # Proper noun - Green
+            'VERB': '#4363d8',   # Verb - Blue
+            'ADJ': '#f58231',    # Adjective - Orange
+            'ADV': '#911eb4',    # Adverb - Purple
+            'ADP': '#f032e6',    # Adposition (preposition) - Magenta
+            'DET': '#fabebe',    # Determiner - Pink
+            'PRON': '#008080',   # Pronoun - Teal
+            'CCONJ': '#9A6324',  # Coordinating conjunction - Brown
+            'NUM': '#800000',    # Numeral - Maroon
+            'PART': '#aaffc3',   # Particle - Mint
+            'INTJ': '#dcbeff',   # Interjection - Lavender
+            'PUNCT': '#000000',  # Punctuation - Black
+            'SYM': '#ffd8b1',    # Symbol - Light Orange
+            'X': '#808080',      # Other - Gray
+            'SPACE': '#ffffff'   # Space - White
+        }
+        
+        # Function to generate HTML for POS tagged text
+        def generate_tagged_html(pos_tags, tagset_name):
+            html = '<div style="line-height: 2.5; padding: 15px; background-color: #f5f5f5; border-radius: 5px; margin-bottom: 20px; overflow-wrap: break-word; word-wrap: break-word;">'
+            
+            for word, tag in pos_tags:
+                # Skip pure whitespace tokens
+                if word.strip() == '':
+                    html += ' '
+                    continue
+                    
+                # Get color (default to gray if tag not in colors)
+                color = colors.get(tag, '#a9a9a9')
+                
+                # Add tooltip with tag and make sure tags wrap properly
+                html += f'<span style="background-color: {color}; color: white; padding: 2px 4px; margin: 2px; border-radius: 4px; display: inline-block;" title="{tag}">{word}</span>'
+            
+            html += '</div>'
+            return html
+        
+        # Display NLTK and spaCy in a row, one after another
+        output_html.append('<div class="row">')
+        
+        # NLTK Section
+        output_html.append('<div class="col-md-6">')
+        output_html.append('<div class="card">')
+        output_html.append('<div class="card-header">')
+        output_html.append('<h4 class="mb-0 text-primary">NLTK (Penn Treebank)</h4>')
+        output_html.append('</div>')
+        output_html.append('<div class="card-body">')
+        output_html.append(generate_tagged_html(nltk_pos, "Penn Treebank"))
+        output_html.append('</div>')
+        output_html.append('</div>')
+        output_html.append('</div>')
+        
+        # spaCy Section
+        output_html.append('<div class="col-md-6">')
+        output_html.append('<div class="card">')
+        output_html.append('<div class="card-header">')
+        output_html.append('<h4 class="mb-0 text-primary">spaCy (Universal)</h4>')
+        output_html.append('</div>')
+        output_html.append('<div class="card-body">')
+        output_html.append(generate_tagged_html(spacy_pos, "Universal"))
+        output_html.append('</div>')
+        output_html.append('</div>')
+        output_html.append('</div>')
+        
+        output_html.append('</div>')  # Close the row
+        
+        # Syntactic Tree Visualization (Dependency Parse)
+        output_html.append('<h3 class="task-subheader">Sentence Structure Visualization</h3>')
+        
+        # Split visualizations for each sentence to avoid overcrowding
+        sentences = list(doc.sents)
+        
+        if not sentences:
+            output_html.append('<p>No complete sentences found for visualization.</p>')
+        else:
+            # Add description for dependency parsing
+            output_html.append("""
+            <div class="alert alert-light">
+                <p class="mb-0">
+                These diagrams show the grammatical structure of each sentence. 
+                Words are connected with arrows that represent the syntactic relationships between them.
+                </p>
+            </div>
+            """)
+            
+            # For each sentence, create a dependency visualization
+            for i, sent in enumerate(sentences):
+                if len(sent) > 50:  # Skip very long sentences that might break the visualization
+                    output_html.append(f'<div class="alert alert-warning"><strong>Note:</strong> Sentence {i+1} is too long ({len(sent)} tokens) for visualization.</div>')
+                    continue
+                
+                # Create the sentence dependency visualization using matplotlib
+                try:
+                    # Try to generate the dependency visualization
+                    fig, ax = plt.subplots(figsize=(10, 3), constrained_layout=True)
+                    # Clear the axes before drawing
+                    ax.clear()
+                    
+                    # Draw connecting arcs between words
+                    words = [token.text for token in sent]
+                    positions = list(range(len(words)))
+                    
+                    # Draw words
+                    for i, word in enumerate(words):
+                        ax.text(i, 0, word, ha='center')
+                    
+                    # Draw arcs for dependencies
+                    max_height = 1
+                    for token in sent:
+                        if token.dep_ and token.head.i != token.i:  # Skip root dependency
+                            # Determine start and end positions
+                            start = token.i - sent.start
+                            end = token.head.i - sent.start
+                            
+                            # Make sure start is before end
+                            if start > end:
+                                start, end = end, start
+                            
+                            # Determine the height of the arc (based on distance)
+                            height = 0.2 + (end - start) * 0.1
+                            max_height = max(max_height, height + 0.3)
+                            
+                            # Draw the dependency arc
+                            arc_xs = np.linspace(start, end, 50)
+                            arc_ys = [height * np.sin((x - start) / (end - start) * np.pi) for x in arc_xs]
+                            ax.plot(arc_xs, arc_ys, color=colors.get(token.pos_, 'gray'), lw=1.5)
+                            
+                            # Add dependency label at the peak of the arc
+                            mid_point = (start + end) / 2
+                            label_height = height * 0.95  # Just below the peak
+                            ax.text(mid_point, label_height, token.dep_, ha='center', fontsize=8, 
+                                   bbox=dict(facecolor='white', alpha=0.8, edgecolor='none', pad=0.2))
+                    
+                    # Set axis limits
+                    ax.set_xlim([-0.5, len(words) - 0.5])
+                    ax.set_ylim([0, max_height + 0.2])
+                    
+                    # Remove axes and set title
+                    ax.axis('off')
+                    plt.tight_layout()
+                    
+                    # Render the plot to HTML
+                    output_html.append(fig_to_html(fig))
+                    plt.close(fig)
+                    
+                except Exception as viz_err:
+                    output_html.append(f'<div class="alert alert-danger"><strong>Error:</strong> Failed to visualize sentence {i+1}: {str(viz_err)}</div>')
+        
+        # POS Distribution Analysis
+        output_html.append('<h3 class="task-subheader">POS Distribution Analysis</h3>')
+        
+        # Calculate POS distribution using spaCy tags (more consistent)
+        pos_counts = Counter([token.pos_ for token in doc])
+        
+        # Create bar chart for POS distribution
+        fig = plt.figure(figsize=(10, 6))
+        bars = plt.bar(pos_counts.keys(), pos_counts.values(), color=[colors.get(k, '#a9a9a9') for k in pos_counts.keys()])
+        plt.xlabel('Part of Speech')
+        plt.ylabel('Count')
+        plt.title('Part-of-Speech Distribution')
+        plt.xticks(rotation=45, ha='right')
+        
+        # Add count labels on top of bars
+        for bar in bars:
+            height = bar.get_height()
+            plt.text(bar.get_x() + bar.get_width()/2., height + 0.1,
+                    f'{int(height)}',
+                    ha='center', va='bottom')
+        
+        plt.tight_layout()
+        
+        # Chart section
+        output_html.append('<section class="pos-chart-section">')
+        output_html.append('<div class="chart-container">')
+        output_html.append(fig_to_html(fig))
+        output_html.append('</div>')
+        output_html.append('</section>')
+        
+        # Table section
+        output_html.append('<section class="pos-table-container">')
+        output_html.append('<div class="row">')
+        output_html.append('<div class="col-md-6">')
+        
+        # Create a DataFrame for the POS counts
+        pos_df = pd.DataFrame({
+            'POS Tag': list(pos_counts.keys()),
+            'Count': list(pos_counts.values()),
+            'Percentage': [count/sum(pos_counts.values())*100 for count in pos_counts.values()]
+        })
+        pos_df = pos_df.sort_values('Count', ascending=False).reset_index(drop=True)
+        
+        # Add percentage column
+        pos_df['Percentage'] = pos_df['Percentage'].map('{:.1f}%'.format)
+        
+        output_html.append(df_to_html_table(pos_df))
+        output_html.append('</div>')
+        
+        # Most common words section
+        output_html.append('<div class="col-md-6">')
+        output_html.append('<h4 class="mt-0">Most Common Words by POS</h4>')
+        
+        # Get common words for major POS categories
+        major_pos = ['NOUN', 'VERB', 'ADJ', 'ADV']
+        common_words = {}
+        
+        for pos in major_pos:
+            words = [token.text.lower() for token in doc if token.pos_ == pos]
+            if words:
+                word_counts = Counter(words).most_common(5)
+                common_words[pos] = word_counts
+        
+        # Create HTML for common words
+        for pos, words in common_words.items():
+            if words:
+                output_html.append(f'<h5>{pos}</h5>')
+                output_html.append('<div class="d-flex flex-wrap gap-1 mb-2">')
+                
+                for word, count in words:
+                    # Get appropriate color
+                    color = colors.get(pos, '#a9a9a9')
+                    output_html.append(f'<span class="badge" style="background-color: {color}; color: white;">{word} ({count})</span>')
+                
+                output_html.append('</div>')
+        
+        output_html.append('</div>')  # Close column 2
+        output_html.append('</div>')  # Close row
+        output_html.append('</section>')  # Close table section
+        
+        # Add Sentence Grammatical Analysis
+        output_html.append('<h3 class="task-subheader">Grammatical Analysis</h3>')
+        output_html.append('<p>Detailed analysis of the grammatical components in each sentence.</p>')
+        
+        # Create Grammatical Role Table
+        grammatical_roles = []
+        for token in doc:
+            if token.dep_ not in ["punct", "space"]:  # Skip punctuation and spaces
+                grammatical_roles.append({
+                    "Word": token.text,
+                    "POS": token.pos_,
+                    "Dependency": token.dep_,
+                    "Head": token.head.text,
+                    "Description": get_dependency_description(token.dep_)
+                })
+        
+        # Convert to DataFrame
+        if grammatical_roles:
+            roles_df = pd.DataFrame(grammatical_roles)
+            output_html.append('<div class="table-responsive" style="max-height: 400px;">')
+            output_html.append(df_to_html_table(roles_df))
+            output_html.append('</div>')
+        else:
+            output_html.append('<p>No grammatical roles found to analyze.</p>')
+        
+        # POS Tag Legend
+        output_html.append('<h3 class="task-subheader">POS Tag Legend</h3>')
+        
+        # Create button toggle for different tagsets
+        output_html.append('<div class="card">')
+        output_html.append('<div class="card-header text-center">')
+        output_html.append('<div class="btn-group pos-legend-buttons" role="group" aria-label="POS Tag Types">')
+        output_html.append('<button type="button" class="btn btn-primary btn-lg active" id="universal-btn" onclick="showPOSTags(\'universal\')">Universal Tags</button>')
+        output_html.append('<button type="button" class="btn btn-outline-primary btn-lg" id="penn-btn" onclick="showPOSTags(\'penn\')">Penn Treebank Tags</button>')
+        output_html.append('</div>')
+        output_html.append('</div>')
+        output_html.append('<div class="card-body">')
+        output_html.append('<div id="pos-content">')
+        
+        # Universal Tags
+        output_html.append('<div class="pos-tags-section" id="universal-tags" style="display: block;">')
+        
+        universal_tags = {
+            'NOUN': 'Nouns - people, places, things',
+            'PROPN': 'Proper nouns - specific named entities',
+            'VERB': 'Verbs - actions, occurrences',
+            'ADJ': 'Adjectives - describe nouns',
+            'ADV': 'Adverbs - modify verbs, adjectives, or other adverbs',
+            'ADP': 'Adpositions - prepositions, postpositions',
+            'DET': 'Determiners - articles and other noun modifiers',
+            'PRON': 'Pronouns - words that substitute for nouns',
+            'CCONJ': 'Coordinating conjunctions - connect words, phrases, clauses',
+            'SCONJ': 'Subordinating conjunctions - connect clauses',
+            'NUM': 'Numerals - numbers',
+            'PART': 'Particles - function words associated with another word',
+            'INTJ': 'Interjections - exclamatory words',
+            'PUNCT': 'Punctuation',
+            'SYM': 'Symbols',
+            'X': 'Other - foreign words, typos, abbreviations',
+            'SPACE': 'Space - white spaces'
+        }
+        
+        output_html.append('<div class="row">')
+        
+        for tag, description in universal_tags.items():
+            if tag in colors:
+                output_html.append(f"""
+                <div class="col-md-6 mb-2">
+                    <div class="d-flex align-items-center p-2 border rounded">
+                        <span class="badge me-2" style="background-color: {colors[tag]}; color: white; min-width: 60px;">{tag}</span>
+                        <span class="small">{description}</span>
+                    </div>
+                </div>
+                """)
+        
+        output_html.append('</div>')  # Close row
+        output_html.append('</div>')  # Close universal tags tab
+        
+        # Penn Treebank Tags  
+        output_html.append('<div class="pos-tags-section" id="penn-tags" style="display: none;">')
+        
+        penn_tags = {
+            'CC': 'Coordinating conjunction',
+            'CD': 'Cardinal number',
+            'DT': 'Determiner',
+            'EX': 'Existential there',
+            'FW': 'Foreign word',
+            'IN': 'Preposition or subordinating conjunction',
+            'JJ': 'Adjective',
+            'JJR': 'Adjective, comparative',
+            'JJS': 'Adjective, superlative',
+            'LS': 'List item marker',
+            'MD': 'Modal',
+            'NN': 'Noun, singular or mass',
+            'NNS': 'Noun, plural',
+            'NNP': 'Proper noun, singular',
+            'NNPS': 'Proper noun, plural',
+            'PDT': 'Predeterminer',
+            'POS': 'Possessive ending',
+            'PRP': 'Personal pronoun',
+            'PRP$': 'Possessive pronoun',
+            'RB': 'Adverb',
+            'RBR': 'Adverb, comparative',
+            'RBS': 'Adverb, superlative',
+            'RP': 'Particle',
+            'SYM': 'Symbol',
+            'TO': 'to',
+            'UH': 'Interjection',
+            'VB': 'Verb, base form',
+            'VBD': 'Verb, past tense',
+            'VBG': 'Verb, gerund or present participle',
+            'VBN': 'Verb, past participle',
+            'VBP': 'Verb, non-3rd person singular present',
+            'VBZ': 'Verb, 3rd person singular present',
+            'WDT': 'Wh-determiner',
+            'WP': 'Wh-pronoun',
+            'WP$': 'Possessive wh-pronoun',
+            'WRB': 'Wh-adverb'
+        }
+        
+        output_html.append('<div class="row">')
+        
+        for tag, description in penn_tags.items():
+            if tag in colors:
+                output_html.append(f"""
+                <div class="col-md-6 mb-2">
+                    <div class="d-flex align-items-center p-2 border rounded">
+                        <span class="badge me-2" style="background-color: {colors[tag]}; color: white; min-width: 60px;">{tag}</span>
+                        <span class="small">{description}</span>
+                    </div>
+                </div>
+                """)
+        
+        output_html.append('</div>')  # Close row
+        output_html.append('</div>')  # Close penn tags section
+        output_html.append('</div>')  # Close pos content
+        output_html.append('</div>')  # Close card body
+        output_html.append('</div>')  # Close card
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to process part-of-speech tagging: {str(e)}</p>
+        </div>
+        """)
+    
+    # About POS Tagging section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Part-of-Speech Tagging
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Part-of-Speech Tagging?</h5>
+            
+            <p>Part-of-Speech (POS) tagging is the process of assigning grammatical categories (such as noun, verb, adjective, etc.) 
+            to each word in a text. It's one of the fundamental steps in natural language processing.</p>
+            
+            <h5>Why is POS Tagging Important?</h5>
+            
+            <ol>
+                <li><b>Disambiguation</b> - Words can have multiple meanings depending on their usage. POS tags help disambiguate words.</li>
+                <li><b>Syntactic Parsing</b> - POS tags form the basis for higher-level syntactic analysis.</li>
+                <li><b>Named Entity Recognition</b> - POS tags help in identifying entities.</li>
+                <li><b>Information Extraction</b> - They help in extracting specific information from text.</li>
+                <li><b>Text-to-Speech Systems</b> - For correct pronunciation based on word function.</li>
+            </ol>
+            
+            <h5>Tagsets:</h5>
+            
+            <ul>
+                <li><b>Universal Tagset</b> - A simpler, cross-linguistic set with about 17 tags.</li>
+                <li><b>Penn Treebank</b> - A more detailed English-specific tagset with about 36 tags.</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)
+
+def get_dependency_description(dep_tag):
+    """Return a description for common dependency tags"""
+    descriptions = {
+        "ROOT": "Root of the sentence",
+        "nsubj": "Nominal subject",
+        "obj": "Direct object",
+        "dobj": "Direct object",
+        "iobj": "Indirect object",
+        "det": "Determiner",
+        "amod": "Adjectival modifier",
+        "advmod": "Adverbial modifier",
+        "pobj": "Object of preposition",
+        "prep": "Preposition",
+        "aux": "Auxiliary verb",
+        "cc": "Coordinating conjunction",
+        "conj": "Conjunct",
+        "mark": "Marker",
+        "nmod": "Nominal modifier",
+        "compound": "Compound word",
+        "attr": "Attribute",
+        "case": "Case marker",
+        "neg": "Negation modifier",
+        "punct": "Punctuation",
+        "nsubjpass": "Passive nominal subject",
+        "auxpass": "Passive auxiliary",
+        "ccomp": "Clausal complement",
+        "xcomp": "Open clausal complement",
+        "acl": "Adjectival clause",
+        "advcl": "Adverbial clause modifier",
+        "relcl": "Relative clause modifier"
+    }
+    return descriptions.get(dep_tag, "Dependency relation")

components/preprocessing.py

@@ -0,0 +1,888 @@
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import matplotlib.pyplot as plt
+import pandas as pd
+import nltk
+import re
+import string
+import base64
+import io
+from collections import Counter
+from nltk.corpus import stopwords
+from nltk.stem import WordNetLemmatizer, PorterStemmer
+from wordcloud import WordCloud
+from utils.model_loader import download_nltk_resources
+from utils.helpers import fig_to_html, df_to_html_table
+from nltk.util import ngrams
+
+def preprocessing_handler(text_input):
+    """Generate HTML for text preprocessing display"""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Text Preprocessing</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Text preprocessing is the process of cleaning and transforming raw text into a format that can be easily analyzed by NLP models.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Tools & Libraries Used:</h4>
+        <ul>
+            <li><b>NLTK</b> - For stopwords, tokenization, stemming and lemmatization</li>
+            <li><b>Regular Expressions</b> - For pattern matching and text cleaning</li>
+            <li><b>WordCloud</b> - For visualizing word frequency</li>
+        </ul>
+    </div>
+    """)
+    
+    # Ensure NLTK resources are downloaded
+    download_nltk_resources()
+    
+    try:
+        # Original Text
+        output_html.append('<h3 class="task-subheader">Original Text</h3>')
+        output_html.append(f'<div class="card"><div class="card-body"><div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 500px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{text_input}</div></div></div>')
+        
+        # Text statistics
+        word_count = len(text_input.split())
+        char_count = len(text_input)
+        sentence_count = len(nltk.sent_tokenize(text_input))
+        
+        stats_html = f"""
+        <div class="stats-container">
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="card text-center stats-card">
+                        <div class="card-body">
+                            <h3 class="metric-blue">{word_count}</h3>
+                            <p>Words</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card text-center stats-card">
+                        <div class="card-body">
+                            <h3 class="metric-green">{char_count}</h3>
+                            <p>Characters</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card text-center stats-card">
+                        <div class="card-body">
+                            <h3 class="metric-orange">{sentence_count}</h3>
+                            <p>Sentences</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+        output_html.append(stats_html)
+        
+        # NEW SECTION: Text Cleaning with Regular Expressions
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Text Cleaning with Regular Expressions</h3>')
+        
+        output_html.append("""
+        <div class="alert alert-light">
+            <p>Regular expressions (regex) provide powerful pattern matching capabilities for cleaning and processing text data. 
+            Common text cleaning tasks include removing URLs, HTML tags, special characters, and normalizing text formats.</p>
+        </div>
+        """)
+        
+        # Several regex cleaning examples
+        url_pattern = r'https?://\S+|www\.\S+'
+        html_pattern = r'<.*?>'
+        whitespace_pattern = r'\s+'
+        email_pattern = r'\S+@\S+'
+        
+        # Original text for comparison
+        text_cleaned = text_input
+        
+        # 1. Remove URLs
+        urls_cleaned = re.sub(url_pattern, '[URL]', text_cleaned)
+        
+        # 2. Remove HTML tags
+        html_cleaned = re.sub(html_pattern, '', urls_cleaned)
+        
+        # 3. Remove extra whitespace
+        whitespace_cleaned = re.sub(whitespace_pattern, ' ', html_cleaned).strip()
+        
+        # 4. Remove email addresses
+        email_cleaned = re.sub(email_pattern, '[EMAIL]', whitespace_cleaned)
+        
+        # 5. Fix common contractions
+        contractions = {
+            r"won't": "will not",
+            r"can't": "cannot",
+            r"n't": " not",
+            r"'re": " are",
+            r"'s": " is",
+            r"'d": " would",
+            r"'ll": " will",
+            r"'t": " not",
+            r"'ve": " have",
+            r"'m": " am"
+        }
+        
+        contraction_cleaned = email_cleaned
+        for pattern, replacement in contractions.items():
+            contraction_cleaned = re.sub(pattern, replacement, contraction_cleaned)
+        
+        # Display the regex cleaning examples in a table
+        output_html.append("""
+        <h4>Regex Text Cleaning Operations</h4>
+        <div class="table-responsive">
+        <table class="table table-striped">
+            <thead class="table-primary">
+                <tr>
+                    <th>Operation</th>
+                    <th>Regex Pattern</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>URL Removal</td>
+                    <td><code>https?://\\S+|www\\.\\S+</code></td>
+                    <td>Removes or replaces web URLs in text</td>
+                </tr>
+                <tr>
+                    <td>HTML Tag Removal</td>
+                    <td><code>&lt;.*?&gt;</code></td>
+                    <td>Strips HTML/XML markup tags</td>
+                </tr>
+                <tr>
+                    <td>Whitespace Normalization</td>
+                    <td><code>\\s+</code></td>
+                    <td>Replaces multiple spaces, tabs, and newlines with a single space</td>
+                </tr>
+                <tr>
+                    <td>Email Anonymization</td>
+                    <td><code>\\S+@\\S+</code></td>
+                    <td>Redacts email addresses for privacy</td>
+                </tr>
+                <tr>
+                    <td>Contraction Expansion</td>
+                    <td><code>Multiple patterns</code></td>
+                    <td>Expands contractions like "don't" to "do not"</td>
+                </tr>
+            </tbody>
+        </table>
+        </div>
+        """)
+        
+        # Example of cleaned text
+        output_html.append("""
+        <h4>Example of Text After Regex Cleaning</h4>
+        <div class="row">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">Before Cleaning</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">""")
+        output_html.append(f"{text_input}")
+        output_html.append("""</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">After Regex Cleaning</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">""")
+        output_html.append(f"{contraction_cleaned}")
+        output_html.append("""</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        output_html.append("""
+        <div class="alert alert-success">
+            <h4><i class="fas fa-lightbulb"></i> Why Use Regex for Text Cleaning?</h4>
+            <ul>
+                <li><b>Precision:</b> Regular expressions allow for precise pattern matching</li>
+                <li><b>Flexibility:</b> Can be customized for domain-specific cleaning needs</li>
+                <li><b>Efficiency:</b> Processes text in a single pass for better performance</li>
+                <li><b>Standardization:</b> Creates consistent formatting across documents</li>
+            </ul>
+        </div>
+        """)
+        
+        # Word length distribution
+        word_lengths = [len(word) for word in text_input.split()]
+        fig = plt.figure(figsize=(10, 4))
+        plt.hist(word_lengths, bins=range(1, max(word_lengths) + 2), alpha=0.7, color='#1976D2')
+        plt.xlabel('Word Length')
+        plt.ylabel('Frequency')
+        plt.title('Word Length Distribution')
+        plt.grid(alpha=0.3)
+        plt.tight_layout()
+        
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Word Length Distribution</h3>')
+        output_html.append(fig_to_html(fig))
+        
+        # Case Normalization
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Case Normalization</h3>')
+        
+        lowercase_text = text_input.lower()
+        uppercase_text = text_input.upper()
+        
+        case_html = f"""
+        <div class="row">
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">Original Text</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{text_input}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">Lowercase Text</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{lowercase_text}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">Uppercase Text</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{uppercase_text}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+        output_html.append(case_html)
+        
+        # Remove Punctuation & Special Characters
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Punctuation & Special Characters Removal</h3>')
+        
+        # Count original punctuation
+        punc_count = sum([1 for char in text_input if char in string.punctuation])
+        
+        # Remove punctuation
+        no_punct_text = re.sub(r'[^\w\s]', '', text_input)
+        
+        punct_html = f"""
+        <div class="row">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">Original Text</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{text_input}</div>
+                        <small class="text-muted">Contains {punc_count} punctuation marks</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="mb-0">Without Punctuation</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{no_punct_text}</div>
+                        <small class="text-muted">Removed {punc_count} punctuation marks</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+        output_html.append(punct_html)
+        
+        # Show removed punctuation
+        punct_chars = [char for char in text_input if char in string.punctuation]
+        punct_freq = Counter(punct_chars)
+        
+        if punct_freq:
+            output_html.append('<h4>Punctuation Distribution</h4>')
+            
+            fig = plt.figure(figsize=(10, 4))
+            plt.bar(punct_freq.keys(), punct_freq.values(), color='#1976D2')
+            plt.xlabel('Punctuation')
+            plt.ylabel('Frequency')
+            plt.title('Punctuation Distribution')
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+        
+        # Tokenization
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Tokenization</h3>')
+        
+        # Word tokenization
+        words = nltk.word_tokenize(text_input)
+        
+        # Create a multi-column layout for word tokens
+        output_html.append('<h4>Word Tokens</h4>')
+        output_html.append(f'<p>Total tokens: {len(words)} (showing first 50)</p>')
+        
+        # Create a multi-column table layout
+        tokens_html = """
+        <div class="table-responsive">
+        <table class="table table-striped table-hover" style="table-layout: fixed;">
+            <thead class="table-primary">
+                <tr>
+                    <th style="width: 8%;">#</th>
+                    <th style="width: 25%;">Token</th>
+                    <th style="width: 12%;">Length</th>
+                    <th style="width: 8%;">#</th>
+                    <th style="width: 25%;">Token</th>
+                    <th style="width: 12%;">Length</th>
+                    <th style="width: 8%;">#</th>
+                    <th style="width: 25%;">Token</th>
+                    <th style="width: 12%;">Length</th>
+                </tr>
+            </thead>
+            <tbody>
+        """
+        
+        # Create rows with 3 tokens per row
+        for i in range(0, min(50, len(words)), 3):
+            tokens_html += "<tr>"
+            for j in range(3):
+                if i + j < min(50, len(words)):
+                    token = words[i + j]
+                    tokens_html += f'<td>{i + j + 1}</td><td><code>{token}</code></td><td><span class="badge bg-secondary">{len(token)}</span></td>'
+                else:
+                    tokens_html += '<td></td><td></td><td></td>'
+            tokens_html += "</tr>"
+        
+        tokens_html += """
+            </tbody>
+        </table>
+        </div>
+        """
+        
+        output_html.append(tokens_html)
+        
+        # Sentence tokenization
+        sentences = nltk.sent_tokenize(text_input)
+        
+        output_html.append('<h4>Sentence Tokens</h4>')
+        output_html.append(f'<p>Total sentences: {len(sentences)}</p>')
+        
+        for i, sentence in enumerate(sentences[:5]):
+            output_html.append(f'<div class="card mb-2"><div class="card-body"><strong>{i+1}.</strong> {sentence}</div></div>')
+        
+        if len(sentences) > 5:
+            output_html.append(f'<p class="text-muted">... and {len(sentences) - 5} more sentences.</p>')
+        
+        # Stopwords Removal
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Stopwords Removal</h3>')
+        
+        stop_words = set(stopwords.words('english'))
+        filtered_words = [word for word in words if word.lower() not in stop_words]
+        
+        # Count stopwords
+        stopword_count = len(words) - len(filtered_words)
+        stopword_percentage = (stopword_count / len(words)) * 100 if words else 0
+        
+        output_html.append(f"""
+        <div class="row mb-3">
+            <div class="col-md-4">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5>Original Words</h5>
+                        <h3 class="text-primary">{len(words)}</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5>After Stopword Removal</h5>
+                        <h3 class="text-success">{len(filtered_words)}</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5>Stopwords Removed</h5>
+                        <h3 class="text-warning">{stopword_count} ({stopword_percentage:.1f}%)</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        # Display common stopwords in the text
+        text_stopwords = [word for word in words if word.lower() in stop_words]
+        stop_freq = Counter(text_stopwords).most_common(10)
+        
+        if stop_freq:
+            output_html.append('<h4>Most Common Stopwords in Text</h4>')
+            
+            # Create a multi-column layout for stopwords
+            stopwords_html = """
+            <div class="table-responsive">
+            <table class="table table-striped table-hover" style="table-layout: fixed;">
+                <thead class="table-primary">
+                    <tr>
+                        <th style="width: 10%;">#</th>
+                        <th style="width: 35%;">Stopword</th>
+                        <th style="width: 15%;">Frequency</th>
+                        <th style="width: 10%;">#</th>
+                        <th style="width: 35%;">Stopword</th>
+                        <th style="width: 15%;">Frequency</th>
+                    </tr>
+                </thead>
+                <tbody>
+            """
+            
+            # Create rows with 2 stopwords per row
+            for i in range(0, len(stop_freq), 2):
+                stopwords_html += "<tr>"
+                for j in range(2):
+                    if i + j < len(stop_freq):
+                        stopword, freq = stop_freq[i + j]
+                        stopwords_html += f'<td>{i + j + 1}</td><td><code>{stopword}</code></td><td><span class="badge bg-warning">{freq}</span></td>'
+                    else:
+                        stopwords_html += '<td></td><td></td><td></td>'
+                stopwords_html += "</tr>"
+            
+            stopwords_html += """
+                </tbody>
+            </table>
+            </div>
+            """
+            
+            output_html.append(stopwords_html)
+            
+            # Visualization of before and after
+            fig, ax = plt.subplots(1, 2, figsize=(12, 5))
+            
+            # Before
+            ax[0].hist([len(word) for word in words], bins=range(1, 15), alpha=0.7, color='#1976D2')
+            ax[0].set_title('Word Length Before Stopword Removal')
+            ax[0].set_xlabel('Word Length')
+            ax[0].set_ylabel('Frequency')
+            
+            # After
+            ax[1].hist([len(word) for word in filtered_words], bins=range(1, 15), alpha=0.7, color='#4CAF50')
+            ax[1].set_title('Word Length After Stopword Removal')
+            ax[1].set_xlabel('Word Length')
+            ax[1].set_ylabel('Frequency')
+            
+            plt.tight_layout()
+            output_html.append(fig_to_html(fig))
+        
+        # Stemming and Lemmatization
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Stemming & Lemmatization</h3>')
+        
+        # Apply stemming (Porter Stemmer)
+        stemmer = PorterStemmer()
+        stemmed_words = [stemmer.stem(word) for word in filtered_words[:100]]  # Limit to first 100 words for performance
+        
+        # Apply lemmatization
+        lemmatizer = WordNetLemmatizer()
+        lemmatized_words = [lemmatizer.lemmatize(word) for word in filtered_words[:100]]  # Limit to first 100 words
+        
+        # Create comparison DataFrame
+        comparison_data = []
+        for i in range(min(20, len(filtered_words))):  # Show first 20 examples
+            if i < len(filtered_words) and filtered_words[i].isalpha():  # Only include alphabetic words
+                comparison_data.append({
+                    'Original': filtered_words[i],
+                    'Stemmed': stemmer.stem(filtered_words[i]),
+                    'Lemmatized': lemmatizer.lemmatize(filtered_words[i])
+                })
+        
+        comparison_df = pd.DataFrame(comparison_data)
+        
+        output_html.append('<h4>Stemming vs. Lemmatization Comparison</h4>')
+        
+        # Create a custom table for stemming vs lemmatization comparison
+        comparison_html = """
+        <div class="table-responsive">
+        <table class="table table-striped table-hover" style="table-layout: fixed;">
+            <thead class="table-primary">
+                <tr>
+                    <th style="width: 30%;">Original</th>
+                    <th style="width: 35%;">Stemmed</th>
+                    <th style="width: 35%;">Lemmatized</th>
+                </tr>
+            </thead>
+            <tbody>
+        """
+        
+        # Add comparison data rows
+        for _, row in comparison_df.iterrows():
+            comparison_html += f"""
+            <tr>
+                <td><code>{row['Original']}</code></td>
+                <td><code>{row['Stemmed']}</code></td>
+                <td><code>{row['Lemmatized']}</code></td>
+            </tr>
+            """
+        
+        comparison_html += """
+            </tbody>
+        </table>
+        </div>
+        """
+        
+        output_html.append(comparison_html)
+        
+        output_html.append("""
+        <div class="alert alert-success">
+            <h4><i class="fas fa-lightbulb"></i> Stemming vs. Lemmatization</h4>
+            <ul>
+                <li><b>Stemming</b> - Cuts off word endings based on common patterns, faster but less accurate</li>
+                <li><b>Lemmatization</b> - Uses vocabulary and morphological analysis, slower but produces actual words</li>
+            </ul>
+        </div>
+        """)
+
+        # NEW SECTION: N-gram Analysis
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">N-gram Analysis</h3>')
+        
+        output_html.append("""
+        <div class="alert alert-light">
+            <p>N-grams are contiguous sequences of n items from text. In NLP, they are used to capture word patterns and relationships,
+            and are helpful for language modeling, prediction, and feature extraction.</p>
+        </div>
+        """)
+        
+        # Process text for n-grams (use filtered_words to avoid stopwords)
+        # Convert to lowercase for consistency
+        clean_words = [word.lower() for word in filtered_words if word.isalnum()]
+        
+        # Generate n-grams
+        bigrams_list = list(ngrams(clean_words, 2))
+        trigrams_list = list(ngrams(clean_words, 3))
+        
+        # Count frequencies
+        bigram_freq = Counter(bigrams_list)
+        trigram_freq = Counter(trigrams_list)
+        
+        # Get most common
+        common_bigrams = bigram_freq.most_common(15)
+        common_trigrams = trigram_freq.most_common(15)
+        
+        # Format for display
+        bigram_labels = [' '.join(bg) for bg, _ in common_bigrams]
+        bigram_values = [count for _, count in common_bigrams]
+        
+        trigram_labels = [' '.join(tg) for tg, _ in common_trigrams]
+        trigram_values = [count for _, count in common_trigrams]
+        
+        # Create DataFrames for display
+        bigram_df = pd.DataFrame({
+            'Bigram': [' '.join(bg) for bg, _ in common_bigrams], 
+            'Frequency': [count for _, count in common_bigrams]
+        })
+        
+        trigram_df = pd.DataFrame({
+            'Trigram': [' '.join(tg) for tg, _ in common_trigrams], 
+            'Frequency': [count for _, count in common_trigrams]
+        })
+        
+        # Explanation of n-grams
+        output_html.append("""
+        <div class="alert alert-info">
+            <h4>What are N-grams?</h4>
+            <ul>
+                <li><b>Unigrams</b> - Single words (e.g., "climate")</li>
+                <li><b>Bigrams</b> - Two consecutive words (e.g., "climate change")</li>
+                <li><b>Trigrams</b> - Three consecutive words (e.g., "global climate change")</li>
+            </ul>
+            <p>N-grams capture contextual relationships between words and are valuable for many NLP tasks including language modeling, 
+            machine translation, speech recognition, and text classification.</p>
+        </div>
+        """)
+        
+        # Create visualizations for bigrams and trigrams
+        if bigram_labels and len(bigram_values) > 0:
+            # Bigram visualization
+            output_html.append('<h4>Most Common Bigrams</h4>')
+            
+            fig = plt.figure(figsize=(10, 6))
+            plt.barh(range(len(bigram_labels)), bigram_values, align='center', color='#1976D2')
+            plt.yticks(range(len(bigram_labels)), bigram_labels)
+            plt.xlabel('Frequency')
+            plt.title('Most Common Bigrams')
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Create a multi-column layout for bigrams
+            bigram_html = """
+            <div class="table-responsive">
+            <table class="table table-striped table-hover" style="table-layout: fixed;">
+                <thead class="table-primary">
+                    <tr>
+                        <th style="width: 10%;">#</th>
+                        <th style="width: 35%;">Bigram</th>
+                        <th style="width: 15%;">Freq</th>
+                        <th style="width: 10%;">#</th>
+                        <th style="width: 35%;">Bigram</th>
+                        <th style="width: 15%;">Freq</th>
+                    </tr>
+                </thead>
+                <tbody>
+            """
+            
+            # Create rows with 2 bigrams per row
+            for i in range(0, len(common_bigrams), 2):
+                bigram_html += "<tr>"
+                for j in range(2):
+                    if i + j < len(common_bigrams):
+                        bigram, freq = common_bigrams[i + j]
+                        bigram_text = ' '.join(bigram)
+                        bigram_html += f'<td>{i + j + 1}</td><td><code>{bigram_text}</code></td><td><span class="badge bg-info">{freq}</span></td>'
+                    else:
+                        bigram_html += '<td></td><td></td><td></td>'
+                bigram_html += "</tr>"
+            
+            bigram_html += """
+                </tbody>
+            </table>
+            </div>
+            """
+            
+            output_html.append(bigram_html)
+        else:
+            output_html.append('<p class="text-muted">Not enough text to generate meaningful bigrams.</p>')
+        
+        if trigram_labels and len(trigram_values) > 0:
+            # Trigram visualization
+            output_html.append('<h4>Most Common Trigrams</h4>')
+            
+            fig = plt.figure(figsize=(10, 6))
+            plt.barh(range(len(trigram_labels)), trigram_values, align='center', color='#4CAF50')
+            plt.yticks(range(len(trigram_labels)), trigram_labels)
+            plt.xlabel('Frequency')
+            plt.title('Most Common Trigrams')
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Create a multi-column layout for trigrams
+            trigram_html = """
+            <div class="table-responsive">
+            <table class="table table-striped table-hover" style="table-layout: fixed;">
+                <thead class="table-primary">
+                    <tr>
+                        <th style="width: 10%;">#</th>
+                        <th style="width: 35%;">Trigram</th>
+                        <th style="width: 15%;">Freq</th>
+                        <th style="width: 10%;">#</th>
+                        <th style="width: 35%;">Trigram</th>
+                        <th style="width: 15%;">Freq</th>
+                    </tr>
+                </thead>
+                <tbody>
+            """
+            
+            # Create rows with 2 trigrams per row
+            for i in range(0, len(common_trigrams), 2):
+                trigram_html += "<tr>"
+                for j in range(2):
+                    if i + j < len(common_trigrams):
+                        trigram, freq = common_trigrams[i + j]
+                        trigram_text = ' '.join(trigram)
+                        trigram_html += f'<td>{i + j + 1}</td><td><code>{trigram_text}</code></td><td><span class="badge bg-success">{freq}</span></td>'
+                    else:
+                        trigram_html += '<td></td><td></td><td></td>'
+                trigram_html += "</tr>"
+            
+            trigram_html += """
+                </tbody>
+            </table>
+            </div>
+            """
+            
+            output_html.append(trigram_html)
+        else:
+            output_html.append('<p class="text-muted">Not enough text to generate meaningful trigrams.</p>')
+            
+        # Applications of N-grams
+        output_html.append("""
+        <div class="alert alert-info">
+            <h4><i class="fas fa-lightbulb"></i> Applications of N-gram Analysis</h4>
+            <ul>
+                <li><b>Language Modeling</b> - Predicting the next word in a sequence</li>
+                <li><b>Machine Translation</b> - Improving translation quality</li>
+                <li><b>Text Classification</b> - Using n-grams as features</li>
+                <li><b>Spelling Correction</b> - Suggesting correct spellings</li>
+                <li><b>Information Retrieval</b> - Enhancing search results</li>
+                <li><b>Sentiment Analysis</b> - Capturing phrase-level sentiments</li>
+            </ul>
+        </div>
+        """)
+        
+        # Word Cloud
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Word Cloud</h3>')
+        
+        try:
+            # Create word cloud from filtered words
+            wordcloud_text = ' '.join(filtered_words)
+            wordcloud = WordCloud(
+                width=800, 
+                height=400, 
+                background_color='white', 
+                colormap='viridis',
+                max_words=100, 
+                contour_width=1, 
+                contour_color='#1976D2'
+            ).generate(wordcloud_text)
+            
+            # Display word cloud
+            fig = plt.figure(figsize=(12, 8))
+            plt.imshow(wordcloud, interpolation='bilinear')
+            plt.axis('off')
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+        except Exception as e:
+            output_html.append(f"<div class='alert alert-warning'>Failed to generate word cloud: {str(e)}</div>")
+        
+        # Word Frequency
+        output_html.append('<div class="section-divider"></div>')
+        output_html.append('<h3 class="task-subheader">Word Frequency Analysis</h3>')
+        
+        # Calculate word frequencies
+        word_freq = Counter(filtered_words)
+        most_common = word_freq.most_common(20)
+        
+        # Create DataFrame
+        freq_df = pd.DataFrame(most_common, columns=['Word', 'Frequency'])
+        
+        # Create horizontal bar chart
+        fig = plt.figure(figsize=(12, 16))
+        plt.barh(range(len(most_common)), [val[1] for val in most_common], align='center', color='#1976D2')
+        plt.yticks(range(len(most_common)), [val[0] for val in most_common])
+        plt.xlabel('Frequency')
+        plt.title('Top 20 Words')
+        plt.subplots_adjust(left=0.15, right=0.95, top=0.95, bottom=0.1)
+        plt.tight_layout(pad=3.0)
+        
+        # Render chart
+        output_html.append('<section class="wf-chart-section">')
+        output_html.append('<div class="chart-container">')
+        output_html.append(fig_to_html(fig))
+        output_html.append('</div>')
+        output_html.append('</section>')
+        
+        # Create a multi-column layout for word frequency
+        freq_html = """
+        <section class="wf-table-container">
+        <div class="table-responsive">
+        <table class="table table-striped table-hover" style="table-layout: fixed;">
+            <thead class="table-primary">
+                <tr>
+                    <th style="width: 10%;">#</th>
+                    <th style="width: 35%;">Word</th>
+                    <th style="width: 15%;">Freq</th>
+                    <th style="width: 10%;">#</th>
+                    <th style="width: 35%;">Word</th>
+                    <th style="width: 15%;">Freq</th>
+                </tr>
+            </thead>
+            <tbody>
+        """
+        
+        # Create rows with 2 words per row
+        for i in range(0, len(most_common), 2):
+            freq_html += "<tr>"
+            for j in range(2):
+                if i + j < len(most_common):
+                    word, freq = most_common[i + j]
+                    freq_html += f'<td>{i + j + 1}</td><td><code>{word}</code></td><td><span class="badge bg-primary">{freq}</span></td>'
+                else:
+                    freq_html += '<td></td><td></td><td></td>'
+            freq_html += "</tr>"
+        
+        freq_html += """
+            </tbody>
+        </table>
+        </div>
+        </section>
+        """
+        
+        output_html.append(freq_html)
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to process text: {str(e)}</p>
+        </div>
+        """)
+    
+    # About text preprocessing
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Text Preprocessing
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Text Preprocessing?</h5>
+            
+            <p>Text preprocessing is the first step in NLP pipelines that transforms raw text into a clean, structured format
+            suitable for analysis. It includes various techniques to standardize text and reduce noise.</p>
+            
+            <h5>Common Preprocessing Steps:</h5>
+            
+            <ul>
+                <li><b>Tokenization</b> - Splitting text into individual words or sentences</li>
+                <li><b>Normalization</b> - Converting text to lowercase, removing accents, etc.</li>
+                <li><b>Noise Removal</b> - Removing punctuation, special characters, HTML tags, etc.</li>
+                <li><b>Stopword Removal</b> - Filtering out common words that add little meaning</li>
+                <li><b>Stemming/Lemmatization</b> - Reducing words to their root forms</li>
+                <li><b>Spelling Correction</b> - Fixing typos and errors</li>
+            </ul>
+            
+            <h5>Why Preprocess Text?</h5>
+            
+            <ul>
+                <li>Reduces dimensionality and noise in the data</li>
+                <li>Standardizes text for consistent analysis</li>
+                <li>Improves performance of downstream NLP tasks</li>
+                <li>Makes text more suitable for machine learning models</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/question_answering.py

@@ -0,0 +1,498 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+from transformers import pipeline
+import nltk
+from collections import Counter
+import re
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.metrics.pairwise import cosine_similarity
+
+from utils.model_loader import load_qa_pipeline
+from utils.helpers import fig_to_html, df_to_html_table
+
+def question_answering_handler(context_text, question, answer_type="extractive", confidence_threshold=0.5):
+    """Show question answering capabilities with comprehensive analysis."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Question Answering System</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Question Answering (QA) systems extract or generate answers to questions based on a given context or knowledge base.
+    This system can handle both extractive (finding answers in text) and abstractive (generating new answers) approaches.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Models & Techniques Used:</h4>
+        <ul>
+            <li><b>RoBERTa-SQuAD2</b> - Fine-tuned transformer model for extractive QA (F1: ~83.7 on SQuAD 2.0)</li>
+            <li><b>BERT-based QA</b> - Bidirectional encoder representations for understanding context</li>
+            <li><b>TF-IDF Similarity</b> - Traditional approach for finding relevant text spans</li>
+            <li><b>Confidence Scoring</b> - Model uncertainty estimation for answer reliability</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Validate inputs
+        if not context_text or not context_text.strip():
+            output_html.append('<div class="alert alert-warning">⚠️ Please provide a context text for question answering.</div>')
+            output_html.append('</div>')
+            return "\n".join(output_html)
+            
+        if not question or not question.strip():
+            output_html.append('<div class="alert alert-warning">⚠️ Please provide a question to answer.</div>')
+            output_html.append('</div>')
+            return "\n".join(output_html)
+        
+        # Display input information
+        output_html.append('<h3 class="task-subheader">Input Analysis</h3>')
+        
+        context_stats = {
+            "Context Length": len(context_text),
+            "Word Count": len(context_text.split()),
+            "Sentence Count": len(nltk.sent_tokenize(context_text)),
+            "Question Length": len(question),
+            "Question Words": len(question.split())
+        }
+        
+        stats_df = pd.DataFrame(list(context_stats.items()), columns=['Metric', 'Value'])
+        output_html.append('<h4>Input Statistics</h4>')
+        output_html.append(df_to_html_table(stats_df))
+        
+        # Question Analysis
+        output_html.append('<h3 class="task-subheader">Question Analysis</h3>')
+        
+        # Classify question type
+        question_lower = question.lower().strip()
+        question_type = classify_question_type(question_lower)
+        
+        output_html.append(f"""
+        <div class="card">
+            <div class="card-header">
+                <h4 class="mb-0">Question Classification</h4>
+            </div>
+            <div class="card-body">
+                <p><strong>Question:</strong> {question}</p>
+                <p><strong>Type:</strong> {question_type['type']}</p>
+                <p><strong>Expected Answer:</strong> {question_type['expected']}</p>
+                <p><strong>Keywords:</strong> {', '.join(question_type['keywords'])}</p>
+            </div>
+        </div>
+        """)
+        
+        # Extractive Question Answering using Transformer
+        output_html.append('<h3 class="task-subheader">Transformer-based Answer Extraction</h3>')
+        
+        try:
+            qa_pipeline = load_qa_pipeline()
+            
+            # Get answer from the model
+            result = qa_pipeline(question=question, context=context_text)
+            
+            answer = result['answer']
+            confidence = result['score']
+            start_pos = result['start']
+            end_pos = result['end']
+            
+            # Create confidence visualization
+            fig, ax = plt.subplots(1, 1, figsize=(8, 4))
+            
+            # Confidence bar
+            colors = ['red' if confidence < 0.3 else 'orange' if confidence < 0.7 else 'green']
+            bars = ax.barh(['Confidence'], [confidence], color=colors[0])
+            ax.set_xlim(0, 1)
+            ax.set_xlabel('Confidence Score')
+            ax.set_title('Answer Confidence')
+            
+            # Add confidence threshold line
+            ax.axvline(x=confidence_threshold, color='red', linestyle='--', label=f'Threshold ({confidence_threshold})')
+            ax.legend()
+            
+            # Add value labels
+            for bar in bars:
+                width = bar.get_width()
+                ax.text(width/2, bar.get_y() + bar.get_height()/2, 
+                       f'{width:.3f}', ha='center', va='center', fontweight='bold')
+            
+            plt.tight_layout()
+            output_html.append(fig_to_html(fig))
+            plt.close()
+            
+            # Display answer with context highlighting
+            confidence_status = "High" if confidence >= 0.7 else "Medium" if confidence >= 0.3 else "Low"
+            confidence_color = "#4CAF50" if confidence >= 0.7 else "#FF9800" if confidence >= 0.3 else "#F44336"
+            
+            output_html.append(f"""
+            <div class="card" style="border-color: {confidence_color};">
+                <div class="card-header" style="background-color: {confidence_color}22;">
+                    <h4 class="mb-0">📝 Extracted Answer</h4>
+                </div>
+                <div class="card-body">
+                    <div class="alert alert-light">
+                        <strong>Answer:</strong> <span class="badge bg-warning text-dark fs-6">{answer}</span>
+                    </div>
+                    <p><strong>Confidence:</strong> {confidence:.3f} ({confidence_status})</p>
+                    <p><strong>Position in Text:</strong> Characters {start_pos}-{end_pos}</p>
+                </div>
+            </div>
+            """)
+            
+            # Show context with answer highlighted
+            highlighted_context = highlight_answer_in_context(context_text, start_pos, end_pos)
+            output_html.append(f"""
+            <div class="card">
+                <div class="card-header">
+                    <h4 class="mb-0">📄 Context with Highlighted Answer</h4>
+                </div>
+                <div class="card-body">
+                    <div style="line-height: 1.6; border: 1px solid #ddd; padding: 1rem; border-radius: 5px;">
+                        {highlighted_context}
+                    </div>
+                </div>
+            </div>
+            """)
+            
+        except Exception as e:
+            output_html.append(f'<div class="alert alert-danger">❌ Error in transformer QA: {str(e)}</div>')
+        
+        # Alternative: TF-IDF based answer extraction
+        output_html.append('<h3 class="task-subheader">TF-IDF Based Answer Extraction</h3>')
+        
+        try:
+            tfidf_answer = extract_answer_tfidf(context_text, question)
+            
+            output_html.append(f"""
+            <div class="alert alert-success">
+                <h4>🔍 TF-IDF Based Answer</h4>
+                <div class="alert alert-light">
+                    <strong>Most Relevant Sentence:</strong> {tfidf_answer['sentence']}
+                </div>
+                <p><strong>Similarity Score:</strong> {tfidf_answer['score']:.3f}</p>
+                <p><strong>Method:</strong> Cosine similarity between question and context sentences using TF-IDF vectors</p>
+            </div>
+            """)
+            
+        except Exception as e:
+            output_html.append(f'<div class="alert alert-danger">❌ Error in TF-IDF QA: {str(e)}</div>')
+        
+        # Answer Quality Assessment
+        output_html.append('<h3 class="task-subheader">Answer Quality Assessment</h3>')
+        
+        if 'confidence' in locals():
+            quality_metrics = assess_answer_quality(question, answer, confidence, context_text)
+            
+            # Create quality assessment visualization
+            fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(12, 5))
+            
+            # Quality metrics radar chart
+            categories = list(quality_metrics.keys())
+            values = list(quality_metrics.values())
+            
+            ax1.bar(categories, values, color=['#4CAF50', '#2196F3', '#FF9800', '#9C27B0'])
+            ax1.set_ylim(0, 1)
+            ax1.set_title('Answer Quality Metrics')
+            ax1.set_ylabel('Score')
+            plt.setp(ax1.get_xticklabels(), rotation=45, ha='right')
+            
+            # Overall quality score
+            overall_score = sum(values) / len(values)
+            quality_label = "Excellent" if overall_score >= 0.8 else "Good" if overall_score >= 0.6 else "Fair" if overall_score >= 0.4 else "Poor"
+            
+            ax2.pie([overall_score, 1-overall_score], labels=[f'{quality_label}\n({overall_score:.2f})', 'Room for Improvement'], 
+                   colors=['#4CAF50', '#E0E0E0'], startangle=90)
+            ax2.set_title('Overall Answer Quality')
+            
+            plt.tight_layout()
+            output_html.append(fig_to_html(fig))
+            plt.close()
+            
+            # Quality metrics table
+            quality_df = pd.DataFrame([
+                {'Metric': 'Confidence', 'Score': f"{quality_metrics['Confidence']:.3f}", 'Description': 'Model confidence in the answer'},
+                {'Metric': 'Relevance', 'Score': f"{quality_metrics['Relevance']:.3f}", 'Description': 'Semantic similarity to question'},
+                {'Metric': 'Completeness', 'Score': f"{quality_metrics['Completeness']:.3f}", 'Description': 'Answer length appropriateness'},
+                {'Metric': 'Context Match', 'Score': f"{quality_metrics['Context_Match']:.3f}", 'Description': 'How well answer fits context'}
+            ])
+            
+            output_html.append('<h4>Quality Assessment Details</h4>')
+            output_html.append(df_to_html_table(quality_df))
+        
+        # Question-Answer Pairs Suggestions
+        output_html.append('<h3 class="task-subheader">Suggested Follow-up Questions</h3>')
+        
+        try:
+            suggested_questions = generate_followup_questions(context_text, question, answer if 'answer' in locals() else "")
+            
+            output_html.append('<div class="alert alert-warning">')
+            output_html.append('<h4>💡 Follow-up Questions:</h4>')
+            output_html.append('<ul>')
+            for i, q in enumerate(suggested_questions, 1):
+                output_html.append(f'<li><strong>Q{i}:</strong> {q}</li>')
+            output_html.append('</ul>')
+            output_html.append('</div>')
+            
+        except Exception as e:
+            output_html.append(f'<div class="alert alert-danger">❌ Error generating suggestions: {str(e)}</div>')
+        
+    except Exception as e:
+        output_html.append(f'<div class="alert alert-danger">❌ Unexpected error: {str(e)}</div>')
+    
+    output_html.append('</div>')
+    return "\n".join(output_html)
+
+def classify_question_type(question):
+    """Classify the type of question and expected answer format."""
+    question = question.lower().strip()
+    
+    # Question word patterns
+    patterns = {
+        'what': {'type': 'Definition/Fact', 'expected': 'Entity, concept, or description'},
+        'who': {'type': 'Person', 'expected': 'Person name or group'},
+        'when': {'type': 'Time', 'expected': 'Date, time, or temporal expression'},
+        'where': {'type': 'Location', 'expected': 'Place, location, or spatial reference'},
+        'why': {'type': 'Reason/Cause', 'expected': 'Explanation or causal relationship'},
+        'how': {'type': 'Method/Process', 'expected': 'Process, method, or manner'},
+        'which': {'type': 'Selection', 'expected': 'Specific choice from options'},
+        'how much': {'type': 'Quantity', 'expected': 'Numerical amount or quantity'},
+        'how many': {'type': 'Count', 'expected': 'Numerical count'},
+        'is': {'type': 'Yes/No', 'expected': 'Boolean answer'},
+        'are': {'type': 'Yes/No', 'expected': 'Boolean answer'},
+        'can': {'type': 'Ability/Possibility', 'expected': 'Yes/No with explanation'},
+        'will': {'type': 'Future/Prediction', 'expected': 'Future state or prediction'},
+        'did': {'type': 'Past Action', 'expected': 'Yes/No about past events'}
+    }
+    
+    # Extract keywords from question
+    words = question.split()
+    keywords = [word for word in words if len(word) > 2 and word not in ['the', 'and', 'but', 'for']]
+    
+    # Determine question type
+    for pattern, info in patterns.items():
+        if question.startswith(pattern):
+            return {
+                'type': info['type'],
+                'expected': info['expected'],
+                'keywords': keywords[:5]  # Top 5 keywords
+            }
+    
+    # Default classification
+    return {
+        'type': 'General',
+        'expected': 'Text span or explanation',
+        'keywords': keywords[:5]
+    }
+
+def extract_answer_tfidf(context, question):
+    """Extract answer using TF-IDF similarity."""
+    # Split context into sentences
+    sentences = nltk.sent_tokenize(context)
+    
+    if len(sentences) == 0:
+        return {'sentence': 'No sentences found', 'score': 0.0}
+    
+    # Create TF-IDF vectors
+    vectorizer = TfidfVectorizer(stop_words='english', lowercase=True)
+    
+    # Combine question with sentences for vectorization
+    texts = [question] + sentences
+    tfidf_matrix = vectorizer.fit_transform(texts)
+    
+    # Calculate cosine similarity between question and each sentence
+    question_vector = tfidf_matrix[0:1]
+    sentence_vectors = tfidf_matrix[1:]
+    
+    similarities = cosine_similarity(question_vector, sentence_vectors).flatten()
+    
+    # Find the most similar sentence
+    best_idx = np.argmax(similarities)
+    best_sentence = sentences[best_idx]
+    best_score = similarities[best_idx]
+    
+    return {
+        'sentence': best_sentence,
+        'score': best_score
+    }
+
+def highlight_answer_in_context(context, start_pos, end_pos):
+    """Highlight the answer span in the context."""
+    before = context[:start_pos]
+    answer = context[start_pos:end_pos]
+    after = context[end_pos:]
+    
+    highlighted = f'{before}<mark style="background-color: #FFEB3B; padding: 2px 4px; border-radius: 3px; font-weight: bold;">{answer}</mark>{after}'
+    
+    return highlighted
+
+def assess_answer_quality(question, answer, confidence, context):
+    """Assess the quality of the extracted answer."""
+    metrics = {}
+    
+    # Confidence score (from model)
+    metrics['Confidence'] = confidence
+    
+    # Relevance (simple keyword overlap)
+    question_words = set(question.lower().split())
+    answer_words = set(answer.lower().split())
+    overlap = len(question_words.intersection(answer_words))
+    metrics['Relevance'] = min(overlap / max(len(question_words), 1), 1.0)
+    
+    # Completeness (answer length appropriateness)
+    answer_length = len(answer.split())
+    if answer_length == 0:
+        metrics['Completeness'] = 0.0
+    elif answer_length < 3:
+        metrics['Completeness'] = 0.6
+    elif answer_length <= 20:
+        metrics['Completeness'] = 1.0
+    else:
+        metrics['Completeness'] = 0.8  # Very long answers might be too verbose
+    
+    # Context match (how well the answer fits in context)
+    answer_in_context = answer.lower() in context.lower()
+    metrics['Context_Match'] = 1.0 if answer_in_context else 0.5
+    
+    return metrics
+
+def generate_followup_questions(context, original_question, answer):
+    """Generate relevant follow-up questions based on the context and answer."""
+    suggestions = []
+    
+    # Extract key entities and concepts from context
+    words = context.split()
+    
+    # Template-based question generation
+    templates = [
+        f"What else can you tell me about {answer}?",
+        "Can you provide more details about this topic?",
+        "What are the implications of this information?",
+        "How does this relate to other concepts mentioned?",
+        "What evidence supports this answer?"
+    ]
+    
+    # Add context-specific questions
+    if "when" not in original_question.lower():
+        suggestions.append("When did this happen?")
+    
+    if "where" not in original_question.lower():
+        suggestions.append("Where did this take place?")
+    
+    if "why" not in original_question.lower():
+        suggestions.append("Why is this significant?")
+    
+    if "how" not in original_question.lower():
+        suggestions.append("How does this work?")
+    
+    # Combine and limit suggestions
+    all_suggestions = templates + suggestions
+    return all_suggestions[:5]  # Return top 5 suggestions
+
+def qa_api_handler(context, question):
+    """API handler for question answering that returns structured data."""
+    try:
+        qa_pipeline = load_qa_pipeline()
+        result = qa_pipeline(question=question, context=context)
+        
+        return {
+            "answer": result['answer'],
+            "confidence": result['score'],
+            "start_position": result['start'],
+            "end_position": result['end'],
+            "success": True,
+            "error": None
+        }
+    except Exception as e:
+        return {
+            "answer": "",
+            "confidence": 0.0,
+            "start_position": 0,
+            "end_position": 0,
+            "success": False,
+            "error": str(e)
+        }
+
+def process_question_with_context(context_text, question):
+    """Process a question with the given context and return a formatted result."""
+    if not context_text or not context_text.strip():
+        return {
+            "success": False,
+            "error": "No context text provided",
+            "html": '<div class="alert alert-warning">⚠️ No context text provided.</div>'
+        }
+    
+    if not question or not question.strip():
+        return {
+            "success": False,
+            "error": "No question provided",
+            "html": '<div class="alert alert-warning">⚠️ Please enter a question.</div>'
+        }
+    
+    try:
+        qa_pipeline = load_qa_pipeline()
+        result = qa_pipeline(question=question, context=context_text)
+        
+        answer = result['answer']
+        confidence = result['score']
+        start_pos = result['start']
+        end_pos = result['end']
+        
+        # Determine confidence level
+        confidence_status = "High" if confidence >= 0.7 else "Medium" if confidence >= 0.3 else "Low"
+        confidence_color = "#4CAF50" if confidence >= 0.7 else "#FF9800" if confidence >= 0.3 else "#F44336"
+        
+        # Highlight answer in context
+        highlighted_context = highlight_answer_in_context(context_text, start_pos, end_pos)
+        
+        # Create formatted HTML result
+        html_result = f"""
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">📝 Answer Found!</h5>
+            </div>
+            <div class="card-body">
+                <div class="alert alert-light">
+                    <p><strong>Question:</strong> {question}</p>
+                    <p><strong>Answer:</strong> <span class="badge bg-warning text-dark fs-6">{answer}</span></p>
+                    <p><strong>Confidence:</strong> {confidence:.3f} ({confidence_status})</p>
+                </div>
+                
+                <div class="alert alert-light">
+                    <h6>📄 Context with Highlighted Answer:</h6>
+                    <div style="line-height: 1.6; font-size: 0.9rem; max-height: 200px; overflow-y: auto;">
+                        {highlighted_context}
+                    </div>
+                </div>
+                
+                <div class="alert alert-info">
+                    <strong>Quality Assessment:</strong>
+                    <ul class="mb-0">
+                        <li>Confidence: {confidence_status} ({confidence:.1%})</li>
+                        <li>Answer found at position: {start_pos}-{end_pos}</li>
+                        <li>Answer length: {len(answer.split())} words</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        """
+        
+        return {
+            "success": True,
+            "answer": answer,
+            "confidence": confidence,
+            "html": html_result
+        }
+        
+    except Exception as e:
+        error_html = f'<div class="alert alert-danger">❌ Error processing question: {str(e)}</div>'
+        return {
+            "success": False,
+            "error": str(e),
+            "html": error_html
+        }

components/sentiment.py

@@ -0,0 +1,549 @@
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+from nltk.sentiment.vader import SentimentIntensityAnalyzer
+import nltk
+from collections import Counter
+
+from utils.model_loader import load_sentiment_analyzer, load_emotion_classifier
+from utils.helpers import fig_to_html, df_to_html_table
+
+def sentiment_handler(text_input):
+    """Show sentiment analysis capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Sentiment Analysis</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Sentiment analysis determines the emotional tone behind text to identify if it expresses positive, negative, or neutral sentiment.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Models Used:</h4>
+        <ul>
+            <li><b>NLTK VADER</b> - Rule-based sentiment analyzer specifically tuned for social media text</li>
+            <li><b>DistilBERT</b> - Transformer model fine-tuned on SST-2 dataset, achieving ~91% accuracy</li>
+            <li><b>RoBERTa Emotion</b> - Transformer model for multi-label emotion detection</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # VADER Analysis
+        output_html.append('<h3 class="task-subheader">VADER Sentiment Analysis</h3>')
+        output_html.append('<p>VADER (Valence Aware Dictionary and sEntiment Reasoner) is a lexicon and rule-based sentiment analysis tool specifically attuned to sentiments expressed in social media.</p>')
+        
+        # Get VADER analyzer
+        vader_analyzer = SentimentIntensityAnalyzer()
+        vader_scores = vader_analyzer.polarity_scores(text_input)
+        
+        # Extract scores
+        compound_score = vader_scores['compound']
+        pos_score = vader_scores['pos']
+        neg_score = vader_scores['neg']
+        neu_score = vader_scores['neu']
+        
+        # Determine sentiment category
+        if compound_score >= 0.05:
+            sentiment_category = "Positive"
+            sentiment_color = "#4CAF50"  # Green
+            sentiment_emoji = "😊"
+        elif compound_score <= -0.05:
+            sentiment_category = "Negative"
+            sentiment_color = "#F44336"  # Red
+            sentiment_emoji = "😞"
+        else:
+            sentiment_category = "Neutral"
+            sentiment_color = "#FFC107"  # Amber
+            sentiment_emoji = "😐"
+        
+        # Create sentiment gauge display
+        output_html.append(f"""
+        <div class="card">
+            <div class="card-body">
+                <div class="text-center mb-3">
+                    <span style="font-size: 3rem; margin-right: 15px;">{sentiment_emoji}</span>
+                    <div>
+                        <h3 class="mb-0" style="color: {sentiment_color};">{sentiment_category}</h3>
+                        <p class="mb-0 fs-5">Compound Score: {compound_score:.2f}</p>
+                    </div>
+                </div>
+                
+                <div style="height: 30px; background-color: #e0e0e0; border-radius: 15px; position: relative; overflow: hidden; margin: 10px 0;">
+                    <div style="position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background-color: #000; z-index: 2;"></div>
+                    <div style="position: absolute; top: 0; bottom: 0; left: {(compound_score + 1) / 2 * 100}%; width: 10px; background-color: {sentiment_color}; border-radius: 5px; transform: translateX(-50%); z-index: 3;"></div>
+                    <div style="position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(90deg, #F44336 0%, #FFC107 100%);"></div>
+                    <div style="position: absolute; top: 0; bottom: 0; right: 0; width: 50%; background: linear-gradient(90deg, #FFC107 0%, #4CAF50 100%);"></div>
+                </div>
+                <div class="d-flex justify-content-between mt-2">
+                    <span>Negative (-1.0)</span>
+                    <span>Neutral (0.0)</span>
+                    <span>Positive (1.0)</span>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        # VADER score breakdown
+        output_html.append('<h4>VADER Score Breakdown</h4>')
+        
+        # Create pie chart
+        fig = plt.figure(figsize=(8, 8))
+        labels = ['Positive', 'Neutral', 'Negative']
+        sizes = [pos_score, neu_score, neg_score]
+        colors = ['#4CAF50', '#FFC107', '#F44336']
+        explode = (0.1, 0, 0) if pos_score > neg_score and pos_score > neu_score else \
+                  (0, 0.1, 0) if neu_score > pos_score and neu_score > neg_score else \
+                  (0, 0, 0.1)
+        
+        plt.pie(sizes, explode=explode, labels=labels, colors=colors, autopct='%1.1f%%',
+                shadow=True, startangle=90)
+        plt.axis('equal')
+        plt.title('VADER Sentiment Distribution')
+        
+        # Create detail table
+        detail_df = pd.DataFrame({
+            'Metric': ['Positive Score', 'Neutral Score', 'Negative Score', 'Compound Score'],
+            'Value': [pos_score, neu_score, neg_score, compound_score]
+        })
+        
+        # Layout with columns for VADER results
+        output_html.append('<div class="row">')
+        
+        # Column 1: Chart
+        output_html.append('<div class="col-md-6">')
+        output_html.append(fig_to_html(fig))
+        output_html.append('</div>')
+        
+        # Column 2: Data
+        output_html.append('<div class="col-md-6">')
+        output_html.append(df_to_html_table(detail_df))
+        
+        # Add interpretation
+        if compound_score >= 0.75:
+            interpretation = "Extremely positive sentiment"
+        elif compound_score >= 0.5:
+            interpretation = "Moderately positive sentiment"
+        elif compound_score >= 0.05:
+            interpretation = "Slightly positive sentiment"
+        elif compound_score > -0.05:
+            interpretation = "Neutral sentiment"
+        elif compound_score > -0.5:
+            interpretation = "Slightly negative sentiment"
+        elif compound_score > -0.75:
+            interpretation = "Moderately negative sentiment"
+        else:
+            interpretation = "Extremely negative sentiment"
+        
+        output_html.append(f"""
+        <div class="alert alert-success mt-3">
+            <h4>Interpretation</h4>
+            <p class="mb-0">{interpretation}</p>
+        </div>
+        """)
+        
+        output_html.append('</div>')  # Close column 2
+        output_html.append('</div>')  # Close row
+        
+        # Transformer-based Sentiment Analysis
+        output_html.append('<h3 class="task-subheader">Transformer-based Sentiment Analysis</h3>')
+        output_html.append('<p>This analysis uses a DistilBERT model fine-tuned on the Stanford Sentiment Treebank dataset.</p>')
+        
+        try:
+            # Load transformer model
+            sentiment_model = load_sentiment_analyzer()
+            
+            # Maximum text length for transformer model (BERT has a 512 token limit)
+            max_length = 512
+            
+            # Get prediction
+            truncated_text = text_input[:max_length * 4]  # Rough character estimate
+            transformer_result = sentiment_model(truncated_text)
+            
+            if len(text_input) > max_length * 4:
+                output_html.append(f"""
+                <div class="alert alert-warning">
+                    <p class="mb-0"><b>⚠️ Note:</b> Text was truncated for analysis as it exceeds the model's length limit.</p>
+                </div>
+                """)
+            
+            # Extract prediction
+            transformer_label = transformer_result[0]['label']
+            transformer_score = transformer_result[0]['score']
+            
+            # Display transformer result
+            sentiment_color = "#4CAF50" if transformer_label == "POSITIVE" else "#F44336"
+            sentiment_emoji = "😊" if transformer_label == "POSITIVE" else "😞"
+            
+            output_html.append(f"""
+            <div class="card" style="border-color: {sentiment_color};">
+                <div class="card-body" style="background-color: {sentiment_color}22;">
+                    <div class="d-flex align-items-center">
+                        <span style="font-size: 3rem; margin-right: 15px;">{sentiment_emoji}</span>
+                        <div>
+                            <h3 class="mb-0" style="color: {sentiment_color};">{transformer_label.capitalize()}</h3>
+                            <p class="mb-0 fs-5">Confidence: {transformer_score:.2%}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """)
+            
+            # Confidence bar
+            output_html.append(f"""
+            <div style="height: 30px; background-color: #e0e0e0; border-radius: 15px; position: relative; overflow: hidden; margin: 10px 0;">
+                <div style="position: absolute; top: 0; bottom: 0; left: 0; width: {transformer_score * 100}%; background-color: {sentiment_color}; border-radius: 5px;"></div>
+                <div style="position: absolute; top: 0; bottom: 0; width: 100%; text-align: center; line-height: 30px; color: #000; font-weight: bold;">
+                    {transformer_score:.1%} Confidence
+                </div>
+            </div>
+            """)
+        
+        except Exception as e:
+            output_html.append(f"""
+            <div class="alert alert-danger">
+                <h4>Transformer Model Error</h4>
+                <p>Failed to load or run transformer sentiment model: {str(e)}</p>
+                <p>Falling back to VADER results only.</p>
+            </div>
+            """)
+        
+        # Emotion Analysis
+        output_html.append('<h3 class="task-subheader">Emotion Analysis</h3>')
+        output_html.append('<p>Identifying specific emotions in text using a RoBERTa model fine-tuned on the emotion dataset.</p>')
+        
+        try:
+            # Load emotion classifier
+            emotion_classifier = load_emotion_classifier()
+            
+            # Get predictions
+            truncated_text = text_input[:max_length * 4]  # Rough character estimate
+            emotion_result = emotion_classifier(truncated_text)
+            
+            # Extract emotion scores
+            emotion_scores = {}
+            for item in emotion_result[0]:
+                emotion_scores[item['label']] = item['score']
+            
+            # Create emotion dataframe
+            emotion_df = pd.DataFrame({
+                'Emotion': list(emotion_scores.keys()),
+                'Score': list(emotion_scores.values())
+            }).sort_values('Score', ascending=False)
+            
+            # Get primary emotion
+            primary_emotion = emotion_df.iloc[0]['Emotion']
+            primary_score = emotion_df.iloc[0]['Score']
+            
+            # Emotion color map
+            emotion_colors = {
+                'joy': '#FFD54F',
+                'anger': '#EF5350',
+                'sadness': '#42A5F5',
+                'fear': '#9C27B0',
+                'surprise': '#26C6DA',
+                'love': '#EC407A',
+                'disgust': '#66BB6A',
+                'optimism': '#FF9800',
+                'pessimism': '#795548',
+                'trust': '#4CAF50',
+                'anticipation': '#FF7043',
+                'neutral': '#9E9E9E'
+            }
+            
+            # Emotion emoji map
+            emotion_emojis = {
+                'joy': '😃',
+                'anger': '😠',
+                'sadness': '😢',
+                'fear': '😨',
+                'surprise': '😲',
+                'love': '❤️',
+                'disgust': '🤢',
+                'optimism': '🤩',
+                'pessimism': '😒',
+                'trust': '🤝',
+                'anticipation': '🤔',
+                'neutral': '😐'
+            }
+            
+            # Create bar chart
+            fig = plt.figure(figsize=(10, 6))
+            bars = plt.barh(
+                emotion_df['Emotion'], 
+                emotion_df['Score'], 
+                color=[emotion_colors.get(emotion, '#9E9E9E') for emotion in emotion_df['Emotion']]
+            )
+            plt.xlabel('Score')
+            plt.title('Emotion Scores')
+            
+            # Add value labels
+            for i, bar in enumerate(bars):
+                plt.text(bar.get_width() + 0.01, bar.get_y() + bar.get_height()/2, 
+                        f"{bar.get_width():.2f}", va='center')
+            
+            plt.xlim(0, 1)
+            plt.tight_layout()
+            
+            # Chart section
+            output_html.append('<section class="emotion-chart-section">')
+            output_html.append('<div class="chart-container">')
+            output_html.append(fig_to_html(fig))
+            output_html.append('</div>')
+            output_html.append('</section>')
+            
+            # Primary emotion section
+            primary_color = emotion_colors.get(primary_emotion, '#9E9E9E')
+            primary_emoji = emotion_emojis.get(primary_emotion, '😐')
+            
+            output_html.append('<section class="emotion-result-container">')
+            output_html.append(f"""
+            <div class="card" style="border-color: {primary_color};">
+                <div class="card-body" style="background-color: {primary_color}22;">
+                    <div class="d-flex align-items-center">
+                        <span style="font-size: 3rem; margin-right: 15px;">{primary_emoji}</span>
+                        <div>
+                            <h3 class="mb-0" style="color: {primary_color};">{primary_emotion.capitalize()}</h3>
+                            <p class="mb-0 fs-5">Score: {primary_score:.2f}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """)
+            
+            # Show top emotions table
+            output_html.append('<h4>Top Emotions</h4>')
+            output_html.append(df_to_html_table(emotion_df.head(5)))
+            output_html.append('</section>')  # Close emotion result container
+        
+        except Exception as e:
+            output_html.append(f"""
+            <div class="alert alert-danger">
+                <h4>Emotion Analysis Error</h4>
+                <p>Failed to load or run emotion classifier: {str(e)}</p>
+            </div>
+            """)
+        
+        # Sentence-level Analysis
+        output_html.append('<h3 class="task-subheader">Sentence-level Analysis</h3>')
+        output_html.append('<p>Breaking down sentiment by individual sentences to identify sentiment variations throughout the text.</p>')
+        
+        # Split text into sentences
+        sentences = nltk.sent_tokenize(text_input)
+        
+        # Minimum 2 sentences to do the analysis
+        if len(sentences) >= 2:
+            # Calculate sentiment for each sentence
+            sentence_sentiments = []
+            for i, sentence in enumerate(sentences):
+                vader_score = vader_analyzer.polarity_scores(sentence)
+                sentence_sentiments.append({
+                    'Sentence': sentence,
+                    'Index': i + 1,
+                    'Compound': vader_score['compound'],
+                    'Positive': vader_score['pos'],
+                    'Negative': vader_score['neg'],
+                    'Neutral': vader_score['neu'],
+                    'Sentiment': 'Positive' if vader_score['compound'] >= 0.05 else 'Negative' if vader_score['compound'] <= -0.05 else 'Neutral'
+                })
+            
+            # Create DataFrame
+            sent_df = pd.DataFrame(sentence_sentiments)
+            
+            # Create line graph of sentiment flow
+            fig = plt.figure(figsize=(10, 6))
+            plt.plot(sent_df['Index'], sent_df['Compound'], 'o-', color='#1976D2', linewidth=2, markersize=8)
+            plt.axhline(y=0, color='#9E9E9E', linestyle='-', alpha=0.3)
+            plt.axhline(y=0.05, color='#4CAF50', linestyle='--', alpha=0.3)
+            plt.axhline(y=-0.05, color='#F44336', linestyle='--', alpha=0.3)
+            
+            # Annotate with sentiment
+            for i, row in sent_df.iterrows():
+                if row['Sentiment'] == 'Positive':
+                    color = '#4CAF50'
+                elif row['Sentiment'] == 'Negative':
+                    color = '#F44336'
+                else:
+                    color = '#9E9E9E'
+                    
+                plt.scatter(row['Index'], row['Compound'], color=color, s=100, zorder=5)
+            
+            plt.grid(alpha=0.3)
+            plt.xlabel('Sentence Number')
+            plt.ylabel('Compound Sentiment Score')
+            plt.title('Sentiment Flow Through Text')
+            plt.ylim(-1.05, 1.05)
+            plt.tight_layout()
+            
+            # Calculate statistics
+            positive_count = sum(1 for score in sent_df['Compound'] if score >= 0.05)
+            negative_count = sum(1 for score in sent_df['Compound'] if score <= -0.05)
+            neutral_count = len(sent_df) - positive_count - negative_count
+            
+            # Chart section
+            output_html.append('<section class="sentence-chart-section">')
+            output_html.append('<div class="chart-container">')
+            output_html.append(fig_to_html(fig))
+            output_html.append('</div>')
+            output_html.append('</section>')
+            
+            # Sentence analysis section
+            output_html.append('<section class="sentence-analysis-container">')
+            
+            # Create sentence stats
+            output_html.append(f"""
+            <div class="row mb-3">
+                <div class="col-4">
+                    <div class="card text-center">
+                        <div class="card-body p-2">
+                            <h5 class="text-success">{positive_count}</h5>
+                            <small>Positive</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="card text-center">
+                        <div class="card-body p-2">
+                            <h5 class="text-warning">{neutral_count}</h5>
+                            <small>Neutral</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="card text-center">
+                        <div class="card-body p-2">
+                            <h5 class="text-danger">{negative_count}</h5>
+                            <small>Negative</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """)
+            
+            # Display sentiment swings
+            sentiment_changes = 0
+            prev_sentiment = None
+            for sentiment in sent_df['Sentiment']:
+                if prev_sentiment is not None and sentiment != prev_sentiment:
+                    sentiment_changes += 1
+                prev_sentiment = sentiment
+            
+            if sentiment_changes > 0:
+                output_html.append(f"""
+                <div class="alert alert-success">
+                    <p class="mb-0"><b>Sentiment Shifts:</b> {sentiment_changes}</p>
+                    <p class="mb-0">The text shows {sentiment_changes} shifts in sentiment between sentences.</p>
+                </div>
+                """)
+            
+            # Show sentence breakdown table
+            output_html.append('<h4>Sentence-by-Sentence Analysis</h4>')
+            
+            # Custom HTML table for better formatting
+            output_html.append('<div class="table-responsive" style="max-height: 400px;">')
+            output_html.append('<table class="table table-striped">')
+            output_html.append('<thead><tr><th>#</th><th>Sentence</th><th>Sentiment</th></tr></thead>')
+            output_html.append('<tbody>')
+            
+            for i, row in sent_df.iterrows():
+                if row['Sentiment'] == 'Positive':
+                    bg_class = 'table-success'
+                    sentiment_html = f"""
+                    <div class="d-flex align-items-center">
+                        <span class="me-2">😊</span>
+                        <span class="text-success fw-bold">Positive</span>
+                        <span class="ms-2 text-muted">({row['Compound']:.2f})</span>
+                    </div>
+                    """
+                elif row['Sentiment'] == 'Negative':
+                    bg_class = 'table-danger'
+                    sentiment_html = f"""
+                    <div class="d-flex align-items-center">
+                        <span class="me-2">😞</span>
+                        <span class="text-danger fw-bold">Negative</span>
+                        <span class="ms-2 text-muted">({row['Compound']:.2f})</span>
+                    </div>
+                    """
+                else:
+                    bg_class = 'table-warning'
+                    sentiment_html = f"""
+                    <div class="d-flex align-items-center">
+                        <span class="me-2">😐</span>
+                        <span class="text-warning fw-bold">Neutral</span>
+                        <span class="ms-2 text-muted">({row['Compound']:.2f})</span>
+                    </div>
+                    """
+                
+                output_html.append(f'<tr class="{bg_class}">')
+                output_html.append(f'<td>{i+1}</td>')
+                output_html.append(f'<td>{row["Sentence"]}</td>')
+                output_html.append(f'<td>{sentiment_html}</td>')
+                output_html.append('</tr>')
+            
+            output_html.append('</tbody></table>')
+            output_html.append('</div>')
+            output_html.append('</section>')  # Close sentence analysis container
+        else:
+            output_html.append("""
+            <div class="alert alert-warning">
+                <p class="mb-0">Sentence-level analysis requires at least two sentences. The provided text doesn't have enough sentences for this analysis.</p>
+            </div>
+            """)
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to analyze sentiment: {str(e)}</p>
+        </div>
+        """)
+    
+    # About Sentiment Analysis section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Sentiment Analysis
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Sentiment Analysis?</h5>
+            
+            <p>Sentiment Analysis (also known as opinion mining) is a natural language processing technique that identifies
+            and extracts subjective information from text. It determines whether a piece of text expresses positive, negative,
+            or neutral sentiment.</p>
+            
+            <h5>Common Approaches:</h5>
+            
+            <ol>
+                <li><b>Lexicon-based</b> (like VADER) - Uses dictionaries of words with pre-assigned sentiment scores</li>
+                <li><b>Machine learning</b> - Supervised techniques that learn from labeled data</li>
+                <li><b>Deep learning</b> (like our Transformer models) - Neural networks that can capture complex patterns and contexts</li>
+            </ol>
+            
+            <h5>Applications:</h5>
+            
+            <ul>
+                <li><b>Brand monitoring</b> - Track public perception of a brand</li>
+                <li><b>Customer feedback analysis</b> - Understand customer satisfaction</li>
+                <li><b>Market research</b> - Analyze product reviews and consumer opinions</li>
+                <li><b>Social media monitoring</b> - Track public sentiment on topics or events</li>
+                <li><b>Stock market prediction</b> - Analyze news sentiment to predict stock movements</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/summarization.py

@@ -0,0 +1,541 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+import nltk
+from collections import Counter
+import networkx as nx
+from nltk.corpus import stopwords
+from nltk.tokenize import sent_tokenize, word_tokenize
+from nltk.stem import WordNetLemmatizer
+import re
+from sklearn.feature_extraction.text import TfidfVectorizer
+from matplotlib_venn import venn2
+
+from utils.model_loader import load_summarizer
+from utils.helpers import fig_to_html, df_to_html_table
+
+def summarization_handler(text_input, min_length=30, max_length=300, use_sampling=False):
+    """Show text summarization capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Text Summarization</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Text summarization condenses text to capture its main points, enabling quicker comprehension of large volumes of information.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Models & Techniques Used:</h4>
+        <ul>
+            <li><b>Extractive Summarization</b> - Selects important sentences from the original text</li>
+            <li><b>Abstractive Summarization</b> - BART model fine-tuned on CNN/DM dataset to generate new summary text</li>
+            <li><b>Performance</b> - ROUGE scores of approximately 40-45 on CNN/DM benchmark</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Check if text is long enough for summarization
+        sentences = nltk.sent_tokenize(text_input)
+        word_count = len(text_input.split())
+        
+        if len(sentences) < 3 or word_count < 40:
+            output_html.append(f"""
+            <div class="alert alert-warning">
+                <h3>Text Too Short for Summarization</h3>
+                <p>The provided text contains only {len(sentences)} sentences and {word_count} words. 
+                For effective summarization, please provide a longer text (at least 3 sentences and 40 words).</p>
+            </div>
+            """)
+        else:
+            # Original Text Section
+            output_html.append('<h3 class="task-subheader">Original Text</h3>')
+            output_html.append(f"""
+            <div class="card">
+                <div class="card-body">
+                    <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 500px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{text_input}</div>
+                </div>
+            </div>
+            <p>Length: {word_count} words.</p>
+            """)
+            
+            # Text Statistics
+            char_count = len(text_input)
+            avg_sentence_length = word_count / len(sentences)
+            avg_word_length = sum(len(word) for word in text_input.split()) / word_count
+            
+            # Neural Summarization Section
+            output_html.append('<h3 class="task-subheader">Neural Abstractive Summarization</h3>')
+            output_html.append('<p>Using BART model to generate a human-like summary</p>')
+            
+            # Parameter summary
+            output_html.append(f"""
+            <div class="alert alert-light">
+                <span><strong>Parameters:</strong> Min Length: {min_length} | Max Length: {max_length} | Sampling: {'Enabled' if use_sampling else 'Disabled'}</span>
+            </div>
+            """)
+            
+            try:
+                # Load summarizer model
+                summarizer = load_summarizer()
+                
+                if summarizer is None:
+                    output_html.append("""
+                    <div class="alert alert-danger">
+                        <p>Failed to load the abstractive summarization model. This may be due to memory constraints or missing dependencies.</p>
+                    </div>
+                    """)
+                else:
+                    # Check length limitations
+                    max_token_limit = 1024  # BART typically has 1024 token limit
+                    
+                    # If text is too long, warn user and truncate
+                    if word_count > max_token_limit:
+                        output_html.append(f"""
+                        <div class="alert alert-warning">
+                            <p><b>⚠️ Note:</b> Text exceeds model's length limit. Only the first ~{max_token_limit} tokens will be used for summarization.</p>
+                        </div>
+                        """)
+                    
+                    # Generate summary using the specified min_length and max_length
+                    abstractive_results = summarizer(
+                        text_input, 
+                        max_length=max_length,
+                        min_length=min_length,
+                        do_sample=use_sampling,
+                        temperature=0.7 if use_sampling else 1.0,
+                        top_p=0.9 if use_sampling else 1.0,
+                        length_penalty=2.0
+                    )
+                    
+                    abstractive_summary = abstractive_results[0]['summary_text']
+                    
+                    # Calculate reduction statistics
+                    abstractive_word_count = len(abstractive_summary.split())
+                    abstractive_reduction = (1 - abstractive_word_count / word_count) * 100
+                    
+                    # Summary Results
+                    output_html.append(f"""
+                    <div class="card">
+                        <div class="card-header">
+                            <h4 class="mb-0">Neural Summary</h4>
+                        </div>
+                        <div class="card-body">
+                            <div style="line-height: 1.6;">
+                                {abstractive_summary}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="row mt-3">
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <h5 class="text-muted">Original Length</h5>
+                                    <h3 class="text-primary">{word_count} words</h3>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <h5 class="text-muted">Summary Length</h5>
+                                    <h3 class="text-success">{abstractive_word_count} words</h3>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <h5 class="text-muted">Compression</h5>
+                                    <h3 class="text-info">{abstractive_reduction:.1f}%</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    """)
+                    
+                    # Key Terms & Topics Section
+                    output_html.append('<h3 class="task-subheader">Key Topics & Terms</h3>')
+                    
+                    # Extract key terms with TF-IDF
+                    key_terms = extract_key_terms(text_input, n=10)
+                    
+                    # Create layout stacked vertically: table first, then chart
+                    output_html.append('<div class="row">')
+                    
+                    # Row 1: Key terms table (full width)
+                    output_html.append('<div class="col-12">')
+                    output_html.append('<h4>Key Terms</h4>')
+                    
+                    # Create key terms table
+                    terms_df = pd.DataFrame({
+                        '#': range(1, len(key_terms) + 1),
+                        'Keyword': [term[0] for term in key_terms],
+                        'TF-IDF Score': [f"{term[1]:.4f}" for term in key_terms]
+                    })
+                    
+                    output_html.append(df_to_html_table(terms_df))
+                    output_html.append('</div>')  # Close row 1 column
+                    output_html.append('</div>')  # Close row 1
+                    
+                    # Row 2: Term importance chart (full width)
+                    output_html.append('<div class="row mt-3">')
+                    output_html.append('<div class="col-12">')
+                    output_html.append('<h4>Term Importance</h4>')
+                    
+                    # Create horizontal bar chart of key terms
+                    fig = plt.figure(figsize=(10, 8))
+                    
+                    # Reverse the order for bottom-to-top display
+                    terms = [term[0] for term in key_terms]
+                    scores = [term[1] for term in key_terms]
+                    
+                    # Sort by score for better visualization
+                    sorted_data = sorted(zip(terms, scores), key=lambda x: x[1])
+                    terms = [x[0] for x in sorted_data]
+                    scores = [x[1] for x in sorted_data]
+                    
+                    # Create horizontal bar chart
+                    plt.barh(terms, scores, color='#1976D2')
+                    plt.xlabel('TF-IDF Score')
+                    plt.ylabel('Keyword')
+                    plt.title('Key Terms by TF-IDF Score')
+                    plt.tight_layout()
+                    
+                    output_html.append(fig_to_html(fig))
+                    
+                    output_html.append('</div>')  # Close row 2 column
+                    output_html.append('</div>')  # Close row 2
+            
+            except Exception as e:
+                output_html.append(f"""
+                <div class="alert alert-danger">
+                    <h4>Abstractive Summarization Error</h4>
+                    <p>Failed to perform abstractive summarization: {str(e)}</p>
+                </div>
+                """)
+            
+            # Extractive Summarization
+            output_html.append('<h3 class="task-subheader">Extractive Summarization</h3>')
+            output_html.append("""
+            <div class="alert alert-light">
+                <p class="mb-0">
+                Extractive summarization works by identifying important sentences in the text and extracting them to form a summary.
+                This implementation uses a variant of the TextRank algorithm, which is based on Google's PageRank.
+                </p>
+            </div>
+            """)
+            
+            # Perform TextRank Summarization
+            extractive_summary = textrank_summarize(text_input, num_sentences=min(3, max(1, len(sentences) // 3)))
+            
+            # Clean up the placeholder separator
+            extractive_summary = extractive_summary.replace("SENTBREAKOS.OS", " ")
+            
+            # Calculate reduction statistics
+            extractive_word_count = len(extractive_summary.split())
+            extractive_reduction = (1 - extractive_word_count / word_count) * 100
+            
+            output_html.append(f"""
+            <div class="alert alert-success">
+                <h4>Extractive Summary ({extractive_reduction:.1f}% reduction)</h4>
+                <div style="line-height: 1.6;">
+                    {extractive_summary}
+                </div>
+            </div>
+            """)
+            
+            # Sentence importance visualization
+            output_html.append('<h4>Sentence Importance</h4>')
+            output_html.append('<p>The graph below shows the relative importance of each sentence based on the TextRank algorithm:</p>')
+            
+            # Get sentence scores from TextRank
+            sentence_scores = textrank_sentence_scores(text_input)
+            
+            # Sort sentences by their original order
+            sentence_items = list(sentence_scores.items())
+            sentence_items.sort(key=lambda x: int(x[0].split('_')[1]))
+            
+            # Create visualization
+            fig = plt.figure(figsize=(10, 6))
+            bars = plt.bar(
+                [f"Sent {item[0].split('_')[1]}" for item in sentence_items], 
+                [item[1] for item in sentence_items], 
+                color='#1976D2'
+            )
+            
+            # Highlight selected sentences
+            selected_indices = [int(idx.split('_')[1]) for idx in sentence_scores.keys() if idx in extractive_summary.split('SENTBREAKOS.OS')]
+            for i, bar in enumerate(bars):
+                if i+1 in selected_indices:
+                    bar.set_color('#4CAF50')
+                    plt.text(bar.get_x() + bar.get_width()/2, bar.get_height() + 0.02,
+                           'Selected', ha='center', va='bottom', fontsize=8, rotation=90)
+            
+            plt.xlabel('Sentence')
+            plt.ylabel('Importance Score')
+            plt.title('Sentence Importance Based on TextRank')
+            plt.xticks(rotation=45)
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Compare the two approaches
+            output_html.append('<h3 class="task-subheader">Summary Comparison</h3>')
+            
+            # Calculate overlap between summaries
+            extractive_words = set(re.findall(r'\b\w+\b', extractive_summary.lower()))
+            abstractive_words = set(re.findall(r'\b\w+\b', abstractive_summary.lower()))
+            common_words = extractive_words.intersection(abstractive_words)
+            
+            if len(extractive_words) > 0 and len(abstractive_words) > 0:
+                overlap_percentage = len(common_words) / ((len(extractive_words) + len(abstractive_words)) / 2) * 100
+            else:
+                overlap_percentage = 0
+            
+            # Create comparison table
+            comparison_data = {
+                'Metric': ['Word Count', 'Reduction %', 'Sentences', 'Words per Sentence', 'Unique Words'],
+                'Extractive': [
+                    extractive_word_count,
+                    f"{extractive_reduction:.1f}%",
+                    len(nltk.sent_tokenize(extractive_summary)),
+                    f"{extractive_word_count / max(1, len(nltk.sent_tokenize(extractive_summary))):.1f}",
+                    len(extractive_words)
+                ],
+                'Abstractive': [
+                    abstractive_word_count,
+                    f"{abstractive_reduction:.1f}%",
+                    len(nltk.sent_tokenize(abstractive_summary)),
+                    f"{abstractive_word_count / max(1, len(nltk.sent_tokenize(abstractive_summary))):.1f}",
+                    len(abstractive_words)
+                ]
+            }
+            
+            comparison_df = pd.DataFrame(comparison_data)
+            
+            output_html.append('<div class="row">')
+            
+            # Column 1: Comparison table
+            output_html.append('<div class="col-md-6">')
+            output_html.append('<h4>Summary Statistics</h4>')
+            output_html.append(df_to_html_table(comparison_df))
+            output_html.append('</div>')
+            
+            # Column 2: Venn diagram of word overlap
+            output_html.append('<div class="col-md-6">')
+            output_html.append('<h4>Word Overlap Visualization</h4>')
+            
+            # Create Venn diagram
+            fig = plt.figure(figsize=(8, 6))
+            venn = venn2(
+                subsets=(
+                    len(extractive_words - abstractive_words),
+                    len(abstractive_words - extractive_words),
+                    len(common_words)
+                ),
+                set_labels=('Extractive', 'Abstractive')
+            )
+            
+            # Set colors
+            venn.get_patch_by_id('10').set_color('#4CAF50')
+            venn.get_patch_by_id('01').set_color('#03A9F4')
+            venn.get_patch_by_id('11').set_color('#9C27B0')
+            
+            plt.title('Word Overlap Between Summaries')
+            plt.text(0, -0.25, f"Overlap: {overlap_percentage:.1f}%", ha='center')
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Show key shared and unique words
+            shared_words_list = list(common_words)
+            extractive_only = list(extractive_words - abstractive_words)
+            abstractive_only = list(abstractive_words - extractive_words)
+            
+            # Limit the number of words shown
+            max_words = 10
+            
+            output_html.append(f"""
+            <div class="mt-3">
+                <h5>Key Shared Words ({min(max_words, len(shared_words_list))} of {len(shared_words_list)})</h5>
+                <div class="d-flex flex-wrap gap-1 mb-2">
+                    {' '.join([f'<span class="badge bg-primary">{word}</span>' for word in shared_words_list[:max_words]])}
+                </div>
+                
+                <h5>Unique to Extractive ({min(max_words, len(extractive_only))} of {len(extractive_only)})</h5>
+                <div class="d-flex flex-wrap gap-1 mb-2">
+                    {' '.join([f'<span class="badge bg-success">{word}</span>' for word in extractive_only[:max_words]])}
+                </div>
+                
+                <h5>Unique to Abstractive ({min(max_words, len(abstractive_only))} of {len(abstractive_only)})</h5>
+                <div class="d-flex flex-wrap gap-1 mb-2">
+                    {' '.join([f'<span class="badge bg-info">{word}</span>' for word in abstractive_only[:max_words]])}
+                </div>
+            </div>
+            """)
+            
+            output_html.append('</div>')  # Close column 2
+            output_html.append('</div>')  # Close row
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to summarize text: {str(e)}</p>
+        </div>
+        """)
+    
+    # About Text Summarization section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Text Summarization
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Text Summarization?</h5>
+            
+            <p>Text summarization is the process of creating a shorter version of a text while preserving its key information
+            and meaning. It helps users quickly grasp the main points without reading the entire document.</p>
+            
+            <h5>Two Main Approaches:</h5>
+            
+            <ul>
+                <li><b>Extractive Summarization:</b> Selects and extracts existing sentences from the source text based on their importance</li>
+                <li><b>Abstractive Summarization:</b> Generates new sentences that capture the meaning of the source text (similar to how humans write summaries)</li>
+            </ul>
+            
+            <h5>Applications:</h5>
+            
+            <ul>
+                <li><b>News digests</b> - Quick summaries of news articles</li>
+                <li><b>Research papers</b> - Condensing long academic papers</li>
+                <li><b>Legal documents</b> - Summarizing complex legal text</li>
+                <li><b>Meeting notes</b> - Extracting key points from discussions</li>
+                <li><b>Content curation</b> - Creating snippets for content recommendations</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)
+
+def extract_key_terms(text, n=10):
+    """Extract key terms using TF-IDF"""
+    try:
+        # Tokenize and preprocess
+        stop_words = set(stopwords.words('english'))
+        lemmatizer = WordNetLemmatizer()
+        
+        # Tokenize and clean text
+        words = word_tokenize(text.lower())
+        words = [lemmatizer.lemmatize(word) for word in words 
+                if word.isalnum() and word not in stop_words and len(word) > 2]
+        
+        # Create document for TF-IDF
+        document = [' '.join(words)]
+        
+        # Create TF-IDF vectorizer
+        vectorizer = TfidfVectorizer(max_features=100)
+        tfidf_matrix = vectorizer.fit_transform(document)
+        
+        # Get feature names and scores
+        feature_names = vectorizer.get_feature_names_out()
+        scores = tfidf_matrix.toarray()[0]
+        
+        # Create term-score pairs and sort by score
+        term_scores = [(term, score) for term, score in zip(feature_names, scores)]
+        term_scores.sort(key=lambda x: x[1], reverse=True)
+        
+        return term_scores[:n]
+    except Exception as e:
+        print(f"Error extracting key terms: {str(e)}")
+        return [("term", 0.0) for _ in range(n)]  # Return empty placeholder
+
+# TextRank extractive summarization algorithm
+def textrank_summarize(text, num_sentences=3):
+    """Generate an extractive summary using TextRank algorithm"""
+    # Tokenize text into sentences
+    sentences = sent_tokenize(text)
+    
+    # If text is too short, return the original text
+    if len(sentences) <= num_sentences:
+        return text
+    
+    # Build a graph of sentences with similarity edges
+    sentence_scores = textrank_sentence_scores(text)
+    
+    # Sort sentences by score
+    ranked_sentences = sorted([(score, i, s) for i, (s, score) in enumerate(zip(sentences, sentence_scores.values()))], reverse=True)
+    
+    # Select top sentences based on score
+    selected_sentences = sorted(ranked_sentences[:num_sentences], key=lambda x: x[1])
+    
+    # Combine selected sentences
+    summary = "SENTBREAKOS.OS".join([s[2] for s in selected_sentences])
+    
+    return summary
+
+def textrank_sentence_scores(text):
+    """Generate sentence scores using TextRank algorithm"""
+    # Tokenize text into sentences
+    sentences = sent_tokenize(text)
+    
+    # Create sentence IDs
+    sentence_ids = [f"sentence_{i+1}" for i in range(len(sentences))]
+    
+    # Create sentence graph
+    G = nx.Graph()
+    
+    # Add nodes
+    for sentence_id in sentence_ids:
+        G.add_node(sentence_id)
+    
+    # Remove stopwords and preprocess sentences
+    stop_words = set(stopwords.words('english'))
+    sentence_words = []
+    
+    for sentence in sentences:
+        words = [word.lower() for word in word_tokenize(sentence) if word.lower() not in stop_words and word.isalnum()]
+        sentence_words.append(words)
+    
+    # Add edges based on sentence similarity
+    for i in range(len(sentence_ids)):
+        for j in range(i+1, len(sentence_ids)):
+            similarity = sentence_similarity(sentence_words[i], sentence_words[j])
+            if similarity > 0:
+                G.add_edge(sentence_ids[i], sentence_ids[j], weight=similarity)
+    
+    # Run PageRank
+    scores = nx.pagerank(G)
+    
+    return scores
+
+def sentence_similarity(words1, words2):
+    """Calculate similarity between two sentences based on word overlap"""
+    if not words1 or not words2:
+        return 0
+    
+    # Convert to sets for intersection
+    set1 = set(words1)
+    set2 = set(words2)
+    
+    # Jaccard similarity
+    intersection = len(set1.intersection(set2))
+    union = len(set1.union(set2))
+    
+    if union == 0:
+        return 0
+    return intersection / union

components/text_generation.py

@@ -0,0 +1,259 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import nltk
+import time
+
+from utils.model_loader import load_text_generator
+from utils.helpers import fig_to_html, df_to_html_table
+
+def text_generation_handler(text_input, max_length=100, temperature=0.7, top_p=0.9, num_sequences=1):
+    """Show text generation capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Text Generation</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Text generation models can continue or expand on a given text prompt, creating new content that follows the style and context of the input.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Model Used:</h4>
+        <ul>
+            <li><b>GPT-2</b> - 124M parameter language model trained on a diverse corpus of internet text</li>
+            <li><b>Capabilities</b> - Can generate coherent text continuations and completions</li>
+            <li><b>Limitations</b> - May occasionally produce repetitive or nonsensical content</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Check text length and possibly truncate
+        MAX_PROMPT_LENGTH = 100  # tokens
+        
+        # Count tokens (rough approximation)
+        token_count = len(text_input.split())
+        
+        # Truncate if necessary
+        if token_count > MAX_PROMPT_LENGTH:
+            prompt_text = " ".join(text_input.split()[:MAX_PROMPT_LENGTH])
+            output_html.append("""
+            <div class="alert alert-warning">
+                <p class="mb-0">⚠️ Text truncated to approximately 100 tokens for better generation results.</p>
+            </div>
+            """)
+        else:
+            prompt_text = text_input
+        
+        # Display prompt
+        output_html.append('<h3 class="task-subheader">Prompt</h3>')
+        output_html.append(f'<div class="card"><div class="card-body">{prompt_text}</div></div>')
+        
+        # Load model
+        text_generator = load_text_generator()
+        
+        # Set up generation parameters
+        generation_kwargs = {
+            "max_length": token_count + max_length,
+            "num_return_sequences": num_sequences,
+            "temperature": temperature,
+            "top_p": top_p,
+            "do_sample": True,
+            "no_repeat_ngram_size": 2,
+            "pad_token_id": 50256  # GPT-2's pad token ID
+        }
+        
+        # Generate text
+        start_time = time.time()
+        result = text_generator(prompt_text, **generation_kwargs)
+        generation_time = time.time() - start_time
+        
+        # Display results
+        output_html.append('<h3 class="task-subheader">Generated Text</h3>')
+        
+        for i, sequence in enumerate(result):
+            generated_text = sequence['generated_text']
+            new_text = generated_text[len(prompt_text):]
+            
+            # Display in a nice format with the prompt and generated text distinguished
+            if num_sequences > 1:
+                output_html.append(f'<h4>Version {i+1}</h4>')
+            
+            output_html.append(f"""
+            <div class="card">
+                <div class="card-body">
+                    <span class="text-muted">{prompt_text}</span>
+                    <span class="text-primary fw-bold">{new_text}</span>
+                </div>
+            </div>
+            """)
+            
+            # Generation stats for this sequence
+            prompt_tokens = len(prompt_text.split())
+            gen_tokens = len(new_text.split())
+            
+            # Calculate average word length as a crude complexity metric
+            avg_word_len = sum(len(word) for word in new_text.split()) / max(1, len(new_text.split()))
+            
+            output_html.append(f"""
+            <div class="alert alert-success">
+                <h4 class="mb-3">Generation Statistics</h4>
+                <div class="row">
+                    <div class="col-md-6">
+                        <p><b>Prompt length:</b> {prompt_tokens} tokens</p>
+                        <p><b>Generated length:</b> {gen_tokens} tokens</p>
+                        <p><b>Total length:</b> {prompt_tokens + gen_tokens} tokens</p>
+                    </div>
+                    <div class="col-md-6">
+                        <p><b>Temperature:</b> {temperature}</p>
+                        <p><b>Top-p:</b> {top_p}</p>
+                        <p><b>Avg word length:</b> {avg_word_len:.2f} characters</p>
+                    </div>
+                </div>
+                <p><b>Generation time:</b> {generation_time:.2f} seconds</p>
+            </div>
+            """)
+            
+            # Option to see full text
+            output_html.append(f"""
+            <div class="card">
+                <div class="card-header">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#fullText{i}" aria-expanded="false">
+                            Show full text (copy-paste friendly)
+                        </button>
+                    </h5>
+                </div>
+                <div class="collapse" id="fullText{i}">
+                    <div class="card-body">
+                        <div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 500px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{generated_text}</div>
+                    </div>
+                </div>
+            </div>
+            """)
+        
+        # Generate a text complexity analysis
+        if len(result) > 0:
+            output_html.append('<h3 class="task-subheader">Text Analysis</h3>')
+            
+            # Get the first generated text for analysis
+            full_text = result[0]['generated_text']
+            prompt_words = prompt_text.split()
+            full_words = full_text.split()
+            generated_words = full_words[len(prompt_words):]
+            
+            # Analyze word length distribution
+            prompt_word_lengths = [len(word) for word in prompt_words]
+            generated_word_lengths = [len(word) for word in generated_words]
+            
+            # Create comparison chart
+            fig, ax = plt.subplots(figsize=(10, 5))
+            
+            # Plot histograms
+            bins = range(1, 16)  # Word lengths from 1 to 15
+            ax.hist(prompt_word_lengths, bins=bins, alpha=0.7, label='Prompt', color='#1976D2')
+            ax.hist(generated_word_lengths, bins=bins, alpha=0.7, label='Generated', color='#4CAF50')
+            
+            ax.set_xlabel('Word Length (characters)')
+            ax.set_ylabel('Frequency')
+            ax.set_title('Word Length Distribution: Prompt vs Generated')
+            ax.legend()
+            ax.grid(alpha=0.3)
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Calculate some linguistic statistics
+            prompt_avg_word_len = sum(prompt_word_lengths) / len(prompt_word_lengths) if prompt_word_lengths else 0
+            generated_avg_word_len = sum(generated_word_lengths) / len(generated_word_lengths) if generated_word_lengths else 0
+            
+            # Create comparison table
+            stats_data = {
+                'Metric': ['Word count', 'Average word length', 'Unique words', 'Lexical diversity*'],
+                'Prompt': [
+                    len(prompt_words),
+                    f"{prompt_avg_word_len:.2f}",
+                    len(set(word.lower() for word in prompt_words)),
+                    f"{len(set(word.lower() for word in prompt_words)) / len(prompt_words):.2f}" if prompt_words else "0"
+                ],
+                'Generated': [
+                    len(generated_words),
+                    f"{generated_avg_word_len:.2f}",
+                    len(set(word.lower() for word in generated_words)),
+                    f"{len(set(word.lower() for word in generated_words)) / len(generated_words):.2f}" if generated_words else "0"
+                ]
+            }
+            
+            stats_df = pd.DataFrame(stats_data)
+            
+            output_html.append('<div class="mt-3">')
+            output_html.append(df_to_html_table(stats_df))
+            output_html.append('<p><small>*Lexical diversity = unique words / total words</small></p>')
+            output_html.append('</div>')
+            
+            # Show tips for better results
+            output_html.append("""
+            <div class="alert alert-info">
+                <h4>Tips for Better Generation Results</h4>
+                <ul class="mb-0">
+                    <li><b>Be specific</b> - More detailed prompts give the model better context</li>
+                    <li><b>Format matters</b> - If you want a list, start with a list item; if you want dialogue, include dialogue format</li>
+                    <li><b>Play with temperature</b> - Lower values (0.3-0.5) for focused, consistent text; higher values (0.7-1.0) for creative, varied output</li>
+                    <li><b>Try multiple generations</b> - Generate several options to pick the best result</li>
+                </ul>
+            </div>
+            """)
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to generate text: {str(e)}</p>
+        </div>
+        """)
+    
+    # About Text Generation section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Text Generation
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Text Generation?</h5>
+            
+            <p>Text generation is the task of creating human-like text using machine learning models. Modern text generation
+            systems use large neural networks trained on vast amounts of text data to predict the next tokens in a sequence.</p>
+            
+            <h5>How It Works:</h5>
+            
+            <ol>
+                <li><b>Training</b> - Models learn patterns in language by predicting the next word in billions of text examples</li>
+                <li><b>Prompting</b> - You provide a starting text that gives context and direction</li>
+                <li><b>Generation</b> - The model repeatedly predicts the most likely next token based on previous context</li>
+                <li><b>Sampling</b> - Various techniques (temperature, top-p) control the randomness and creativity of output</li>
+            </ol>
+            
+            <h5>Applications:</h5>
+            
+            <ul>
+                <li><b>Content creation</b> - Drafting articles, stories, and marketing copy</li>
+                <li><b>Assistive writing</b> - Helping with email drafting, summarization, and editing</li>
+                <li><b>Conversational AI</b> - Powering chatbots and digital assistants</li>
+                <li><b>Code generation</b> - Assisting developers with coding tasks</li>
+                <li><b>Creative writing</b> - Generating stories, poetry, and other creative content</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/tokenization.py

@@ -0,0 +1,460 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import nltk
+import re
+from collections import Counter
+from nltk.tokenize import word_tokenize, sent_tokenize
+import spacy
+
+from utils.model_loader import load_spacy, download_nltk_resources
+from utils.helpers import fig_to_html, df_to_html_table
+
+def tokenization_handler(text_input):
+    """Show tokenization capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Tokenization</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Tokenization is the process of breaking text into smaller units called tokens, which can be words, characters, or subwords.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Tools Used:</h4>
+        <ul>
+            <li><b>NLTK</b> - Natural Language Toolkit for basic word and sentence tokenization</li>
+            <li><b>spaCy</b> - Advanced tokenization with linguistic features</li>
+            <li><b>WordPiece</b> - Subword tokenization used by BERT and other transformers</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Ensure NLTK resources are downloaded
+        download_nltk_resources()
+        
+        # Original Text
+        output_html.append('<h3 class="task-subheader">Original Text</h3>')
+        output_html.append(f'<div class="card"><div class="card-body"><div class="text-content" style="word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-height: 500px; overflow-y: auto; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #e9ecef; line-height: 1.6;">{text_input}</div></div></div>')
+        
+        # Word Tokenization
+        output_html.append('<h3 class="task-subheader">Word Tokenization</h3>')
+        output_html.append('<p>Breaking text into individual words and punctuation marks.</p>')
+        
+        # NLTK Word Tokenization
+        nltk_tokens = word_tokenize(text_input)
+        
+        # Format tokens
+        token_html = ""
+        for token in nltk_tokens:
+            token_html += f'<span class="token">{token}</span>'
+        
+        output_html.append(f"""
+        <div class="card">
+            <div class="card-body">
+                <div style="background-color: #f5f5f5; padding: 15px; border-radius: 5px; line-height: 2.5;">
+                    {token_html}
+                </div>
+            </div>
+        </div>
+        <style>
+            .token {{
+                background-color: #E3F2FD;
+                border: 1px solid #1976D2;
+                border-radius: 4px;
+                padding: 3px 6px;
+                margin: 3px;
+                display: inline-block;
+            }}
+        </style>
+        """)
+        
+        # Token statistics
+        token_count = len(nltk_tokens)
+        unique_tokens = len(set([t.lower() for t in nltk_tokens]))
+        alpha_only = sum(1 for t in nltk_tokens if t.isalpha())
+        numeric = sum(1 for t in nltk_tokens if t.isnumeric())
+        punct = sum(1 for t in nltk_tokens if all(c in '.,;:!?-"\'()[]{}' for c in t))
+        
+        output_html.append(f"""
+        <div class="row mt-3">
+            <div class="col-md-2">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5 class="text-primary">{token_count}</h5>
+                        <small>Total Tokens</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5 class="text-success">{unique_tokens}</h5>
+                        <small>Unique Tokens</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5 class="text-info">{alpha_only}</h5>
+                        <small>Alphabetic</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5 class="text-warning">{numeric}</h5>
+                        <small>Numeric</small>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <div class="card text-center">
+                    <div class="card-body">
+                        <h5 class="text-danger">{punct}</h5>
+                        <small>Punctuation</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        # Sentence Tokenization
+        output_html.append('<h3 class="task-subheader">Sentence Tokenization</h3>')
+        output_html.append('<p>Dividing text into individual sentences.</p>')
+        
+        # NLTK Sentence Tokenization
+        nltk_sentences = sent_tokenize(text_input)
+        
+        # Format sentences
+        sentence_html = ""
+        for i, sentence in enumerate(nltk_sentences):
+            sentence_html += f'<div class="sentence"><span class="sentence-num">{i+1}</span> {sentence}</div>'
+        
+        output_html.append(f"""
+        <div class="card">
+            <div class="card-body">
+                <div style="background-color: #f5f5f5; padding: 15px; border-radius: 5px;">
+                    {sentence_html}
+                </div>
+            </div>
+        </div>
+        <style>
+            .sentence {{
+                background-color: #E1F5FE;
+                border-left: 3px solid #03A9F4;
+                padding: 10px;
+                margin: 8px 0;
+                border-radius: 0 5px 5px 0;
+                position: relative;
+            }}
+            .sentence-num {{
+                font-weight: bold;
+                color: #0277BD;
+                margin-right: 5px;
+            }}
+        </style>
+        """)
+        
+        output_html.append(f'<p class="mt-3">Text contains {len(nltk_sentences)} sentences with an average of {token_count / len(nltk_sentences):.1f} tokens per sentence.</p>')
+        
+        # Advanced Tokenization with spaCy
+        output_html.append('<h3 class="task-subheader">Linguistic Tokenization (spaCy)</h3>')
+        output_html.append('<p>spaCy provides more linguistically-aware tokenization with additional token properties.</p>')
+        
+        # Load spaCy model
+        nlp = load_spacy()
+        doc = nlp(text_input)
+        
+        # Create token table
+        token_data = []
+        for token in doc:
+            token_data.append({
+                'Text': token.text,
+                'Lemma': token.lemma_,
+                'POS': token.pos_,
+                'Tag': token.tag_,
+                'Dep': token.dep_,
+                'Shape': token.shape_,
+                'Alpha': token.is_alpha,
+                'Stop': token.is_stop
+            })
+        
+        token_df = pd.DataFrame(token_data)
+        
+        # Display interactive table with expandable rows
+        output_html.append("""
+        <div class="table-responsive">
+            <table class="table table-striped table-hover">
+                <thead class="table-primary sticky-top">
+                    <tr>
+                        <th>Token</th>
+                        <th>Lemma</th>
+                        <th>POS</th>
+                        <th>Tag</th>
+                        <th>Dependency</th>
+                        <th>Properties</th>
+                    </tr>
+                </thead>
+                <tbody>
+        """)
+        
+        for token in doc:
+            # Determine row color based on token type
+            row_class = ""
+            if token.is_stop:
+                row_class = "table-danger"  # Light red for stopwords
+            elif token.pos_ == "VERB":
+                row_class = "table-success"  # Light green for verbs
+            elif token.pos_ == "NOUN" or token.pos_ == "PROPN":
+                row_class = "table-primary"  # Light blue for nouns
+            elif token.pos_ == "ADJ":
+                row_class = "table-warning"  # Light yellow for adjectives
+            
+            output_html.append(f"""
+            <tr class="{row_class}">
+                <td><strong>{token.text}</strong></td>
+                <td>{token.lemma_}</td>
+                <td>{token.pos_}</td>
+                <td>{token.tag_}</td>
+                <td>{token.dep_}</td>
+                <td>
+                    <span class="badge {'bg-success' if token.is_alpha else 'bg-danger'}">
+                        {'Alpha' if token.is_alpha else 'Non-alpha'}
+                    </span>
+                    <span class="badge {'bg-danger' if token.is_stop else 'bg-success'}">
+                        {'Stopword' if token.is_stop else 'Content'}
+                    </span>
+                    <span class="badge bg-info">
+                        Shape: {token.shape_}
+                    </span>
+                </td>
+            </tr>
+            """)
+        
+        output_html.append("""
+                </tbody>
+            </table>
+        </div>
+        """)
+        
+        # Create visualization for POS distribution
+        pos_counts = Counter([token.pos_ for token in doc])
+        
+        # Create bar chart for POS distribution
+        fig = plt.figure(figsize=(10, 6))
+        plt.bar(pos_counts.keys(), pos_counts.values(), color='#1976D2')
+        plt.xlabel('Part of Speech')
+        plt.ylabel('Count')
+        plt.title('Part-of-Speech Distribution')
+        plt.xticks(rotation=45)
+        plt.tight_layout()
+        
+        output_html.append('<h4>Token Distribution by Part of Speech</h4>')
+        output_html.append(fig_to_html(fig))
+        
+        # Subword Tokenization
+        output_html.append('<h3 class="task-subheader">Subword Tokenization (WordPiece/BPE)</h3>')
+        output_html.append("""
+        <div class="alert alert-light">
+            <p>
+                Subword tokenization breaks words into smaller units to handle rare words and morphologically rich languages.
+                This technique is widely used in modern transformer models like BERT, GPT, etc.
+            </p>
+        </div>
+        """)
+        
+        try:
+            from transformers import BertTokenizer, GPT2Tokenizer
+            
+            # Load tokenizers
+            bert_tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')
+            gpt2_tokenizer = GPT2Tokenizer.from_pretrained('gpt2')
+            
+            # Tokenize with BERT
+            bert_tokens = bert_tokenizer.tokenize(text_input)
+            
+            # Tokenize with GPT-2
+            # GPT-2 doesn't have a special tokenize method like BERT, so we encode and decode
+            gpt2_encoding = gpt2_tokenizer.encode(text_input)
+            gpt2_tokens = [gpt2_tokenizer.decode([token]).strip() for token in gpt2_encoding]
+            
+            # BERT WordPiece Section
+            output_html.append('<h4 class="bg-primary text-white p-3 rounded">BERT WordPiece</h4>')
+            output_html.append('<p>BERT uses WordPiece tokenization which marks subword units with ##.</p>')
+            
+            # Create token display
+            output_html.append('<div class="card"><div class="card-body">')
+            output_html.append('<div style="background-color: #f5f5f5; padding: 15px; border-radius: 5px; line-height: 2.5;">')
+            
+            for token in bert_tokens:
+                if token.startswith("##"):
+                    output_html.append(f'<span class="token" style="background-color: #FFECB3; border-color: #FFA000;">{token}</span>')
+                else:
+                    output_html.append(f'<span class="token">{token}</span>')
+            
+            output_html.append('</div></div></div>')
+            output_html.append(f'<p class="mt-2">Total BERT tokens: {len(bert_tokens)}</p>')
+            
+            # GPT-2 BPE Section
+            output_html.append('<h4 class="bg-primary text-white p-3 rounded mt-4">GPT-2 BPE</h4>')
+            output_html.append('<p>GPT-2 uses Byte-Pair Encoding (BPE) tokenization where Ġ represents a space before the token.</p>')
+            
+            output_html.append('<div class="card"><div class="card-body">')
+            output_html.append('<div style="background-color: #f5f5f5; padding: 15px; border-radius: 5px; line-height: 2.5;">')
+            
+            for token in gpt2_tokens:
+                if token.startswith("Ġ"):
+                    output_html.append(f'<span class="token">{token}</span>')
+                else:
+                    output_html.append(f'<span class="token" style="background-color: #FFECB3; border-color: #FFA000;">{token}</span>')
+            
+            output_html.append('</div></div></div>')
+            output_html.append(f'<p class="mt-2">Total GPT-2 tokens: {len(gpt2_tokens)}</p>')
+            
+            # Compare token counts
+            output_html.append('<h4>Token Count Comparison</h4>')
+            token_count_data = {
+                'Tokenizer': ['Words (spaces)', 'NLTK', 'spaCy', 'BERT WordPiece', 'GPT-2 BPE'],
+                'Token Count': [
+                    len(text_input.split()),
+                    len(nltk_tokens),
+                    len(doc),
+                    len(bert_tokens),
+                    len(gpt2_tokens)
+                ]
+            }
+            
+            token_count_df = pd.DataFrame(token_count_data)
+            
+            # Create comparison chart
+            fig = plt.figure(figsize=(10, 6))
+            bars = plt.bar(token_count_df['Tokenizer'], token_count_df['Token Count'], color=['#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3'])
+            
+            # Add value labels on top of bars
+            for bar in bars:
+                height = bar.get_height()
+                plt.text(bar.get_x() + bar.get_width()/2., height + 0.5,
+                        f'{height}',
+                        ha='center', va='bottom')
+            
+            plt.ylabel('Token Count')
+            plt.title('Tokenization Comparison by Method')
+            plt.ylim(0, max(token_count_df['Token Count']) * 1.1)  # Add some headroom for labels
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Add token length distribution analysis
+            output_html.append('<h4>Token Length Distribution</h4>')
+            token_lengths = [len(token) for token in nltk_tokens]
+            
+            fig = plt.figure(figsize=(10, 6))
+            plt.hist(token_lengths, bins=range(1, max(token_lengths) + 2), color='#4CAF50', alpha=0.7)
+            plt.xlabel('Token Length')
+            plt.ylabel('Frequency')
+            plt.title('Token Length Distribution')
+            plt.grid(axis='y', alpha=0.3)
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Add tokenization statistics summary
+            avg_token_length = sum(token_lengths) / len(token_lengths) if token_lengths else 0
+            output_html.append(f"""
+            <h4>Tokenization Statistics</h4>
+            <div class="row mt-3">
+                <div class="col-md-4">
+                    <div class="card text-center">
+                        <div class="card-body">
+                            <h3 class="text-success">{token_count}</h3>
+                            <p class="mb-0">Total Tokens</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card text-center">
+                        <div class="card-body">
+                            <h3 class="text-primary">{avg_token_length:.2f}</h3>
+                            <p class="mb-0">Average Token Length</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card text-center">
+                        <div class="card-body">
+                            <h3 class="text-warning">{token_count / len(nltk_sentences):.2f}</h3>
+                            <p class="mb-0">Tokens per Sentence</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """)
+            
+        except Exception as e:
+            output_html.append(f"""
+            <div class="alert alert-warning">
+                <h4>Subword Tokenization Error</h4>
+                <p>Failed to load transformer tokenizers: {str(e)}</p>
+                <p>The transformers library may not be installed or there might be network issues when downloading models.</p>
+            </div>
+            """)
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to process tokenization: {str(e)}</p>
+        </div>
+        """)
+    
+    # About Tokenization section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Tokenization
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Tokenization?</h5>
+            
+            <p>Tokenization is the process of breaking down text into smaller units called tokens.
+            These tokens can be words, subwords, characters, or symbols, depending on the approach.
+            It's typically the first step in most NLP pipelines.</p>
+            
+            <h5>Types of Tokenization:</h5>
+            
+            <ul>
+                <li><b>Word Tokenization</b> - Splits text on whitespace and punctuation (with various rules)</li>
+                <li><b>Sentence Tokenization</b> - Divides text into sentences using punctuation and other rules</li>
+                <li><b>Subword Tokenization</b> - Splits words into meaningful subunits (WordPiece, BPE, SentencePiece)</li>
+                <li><b>Character Tokenization</b> - Treats each character as a separate token</li>
+            </ul>
+            
+            <h5>Why Subword Tokenization?</h5>
+            
+            <p>Modern NLP models use subword tokenization because:</p>
+            <ul>
+                <li>It handles out-of-vocabulary words better</li>
+                <li>It represents rare words by decomposing them</li>
+                <li>It works well for morphologically rich languages</li>
+                <li>It balances vocabulary size and token length</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/topic_analysis.py

@@ -0,0 +1,766 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+import nltk
+from collections import Counter
+import networkx as nx
+from sklearn.feature_extraction.text import CountVectorizer, TfidfVectorizer
+from sklearn.decomposition import LatentDirichletAllocation, NMF
+import wordcloud
+from nltk.corpus import stopwords
+from nltk.tokenize import word_tokenize
+from nltk.stem import WordNetLemmatizer
+import matplotlib.colors as mcolors
+import io
+import base64
+
+from utils.model_loader import download_nltk_resources
+from utils.helpers import fig_to_html, df_to_html_table
+
+def classify_topic(text_input):
+    """Classify the topic of the text into predefined categories."""
+    # Define topic keywords
+    topic_keywords = {
+        'environment': ['climate', 'environment', 'weather', 'earth', 'temperature', 'pollution', 'warming', 'planet', 'ecosystem', 'sustainable'],
+        'science': ['science', 'scientific', 'research', 'study', 'experiment', 'discovery', 'theory', 'laboratory', 'data'],
+        'business': ['business', 'company', 'market', 'economy', 'economic', 'finance', 'industry', 'corporate', 'trade'],
+        'education': ['education', 'school', 'student', 'learn', 'teach', 'academic', 'university', 'college', 'knowledge'],
+        'health': ['health', 'medical', 'doctor', 'patient', 'disease', 'treatment', 'hospital', 'medicine', 'healthcare'],
+        'technology': ['technology', 'tech', 'computer', 'digital', 'software', 'hardware', 'internet', 'device', 'innovation'],
+        'politics': ['politics', 'government', 'policy', 'election', 'political', 'law', 'president', 'party', 'vote'],
+        'sports': ['sport', 'game', 'team', 'player', 'competition', 'athlete', 'championship', 'tournament', 'coach'],
+        'entertainment': ['entertainment', 'movie', 'music', 'film', 'television', 'celebrity', 'actor', 'actress', 'show'],
+        'travel': ['travel', 'trip', 'vacation', 'tourist', 'destination', 'journey', 'adventure', 'flight', 'hotel']
+    }
+    
+    # Convert text to lowercase
+    text = text_input.lower()
+    
+    # Count keyword occurrences for each topic
+    topic_scores = {}
+    for topic, keywords in topic_keywords.items():
+        score = 0
+        for keyword in keywords:
+            # Count occurrences of the keyword
+            count = text.count(keyword)
+            # Add to the topic score
+            score += count
+        
+        # Store the normalized score
+        topic_scores[topic] = score / (len(text.split()) + 0.001)  # Normalize by text length
+
+    # Get the main topic and confidence
+    main_topic = max(topic_scores.items(), key=lambda x: x[1])
+    total_score = sum(topic_scores.values()) + 0.001  # Avoid division by zero
+    confidence = main_topic[1] / total_score if total_score > 0 else 0
+    confidence = round(confidence * 100, 1)  # Convert to percentage
+
+    # Sort topics by score for visualization
+    sorted_topics = sorted(topic_scores.items(), key=lambda x: x[1], reverse=True)
+    
+    return main_topic[0], confidence, sorted_topics, topic_scores
+
+def extract_key_phrases(text_input, top_n=10):
+    """Extract key phrases from text."""
+    # Download required NLTK resources
+    download_nltk_resources()
+    
+    # Define stop words
+    stop_words = set(stopwords.words('english'))
+    
+    # Tokenize into sentences
+    sentences = nltk.sent_tokenize(text_input)
+    
+    # Extract 2-3 word phrases (n-grams)
+    phrases = []
+    
+    # Get bigrams
+    bigram_vectorizer = CountVectorizer(ngram_range=(2, 2), stop_words='english', max_features=100)
+    try:
+        bigram_matrix = bigram_vectorizer.fit_transform([text_input])
+        bigram_features = bigram_vectorizer.get_feature_names_out()
+        bigram_scores = bigram_matrix.toarray()[0]
+        
+        for phrase, score in zip(bigram_features, bigram_scores):
+            if score >= 1:  # Must appear at least once
+                phrases.append((phrase, int(score)))
+    except:
+        pass  # Handle potential errors
+    
+    # Get trigrams
+    trigram_vectorizer = CountVectorizer(ngram_range=(3, 3), stop_words='english', max_features=100)
+    try:
+        trigram_matrix = trigram_vectorizer.fit_transform([text_input])
+        trigram_features = trigram_vectorizer.get_feature_names_out()
+        trigram_scores = trigram_matrix.toarray()[0]
+        
+        for phrase, score in zip(trigram_features, trigram_scores):
+            if score >= 1:  # Must appear at least once
+                phrases.append((phrase, int(score)))
+    except:
+        pass
+    
+    # Also extract single important words (nouns, verbs, adjectives)
+    words = word_tokenize(text_input)
+    pos_tags = nltk.pos_tag(words)
+    
+    important_words = []
+    for word, tag in pos_tags:
+        # Only consider nouns, verbs, and adjectives
+        if (tag.startswith('NN') or tag.startswith('VB') or tag.startswith('JJ')) and word.lower() not in stop_words and len(word) > 2:
+            important_words.append(word.lower())
+    
+    # Count word frequencies
+    word_freq = Counter(important_words)
+    
+    # Add important single words to phrases
+    for word, freq in word_freq.most_common(top_n):
+        if freq >= 1:
+            phrases.append((word, freq))
+    
+    # Sort phrases by frequency
+    sorted_phrases = sorted(phrases, key=lambda x: x[1], reverse=True)
+    
+    # Return top N phrases
+    return sorted_phrases[:top_n]
+
+def create_phrase_cloud(phrases):
+    """Create a word cloud from phrases."""
+    # Convert phrases to a dictionary of {phrase: frequency}
+    phrase_freq = {phrase: freq for phrase, freq in phrases}
+    
+    # Create word cloud
+    wc = wordcloud.WordCloud(
+        background_color='white',
+        width=600,
+        height=400,
+        colormap='viridis',
+        max_words=50,
+        prefer_horizontal=0.9,
+        random_state=42
+    )
+    
+    try:
+        # Generate word cloud from phrases
+        wc.generate_from_frequencies(phrase_freq)
+        
+        # Create figure
+        fig = plt.figure(figsize=(10, 6))
+        plt.imshow(wc, interpolation='bilinear')
+        plt.axis('off')
+        plt.tight_layout()
+        
+        return fig_to_html(fig)
+    except:
+        return "<p>Could not generate phrase cloud due to insufficient data.</p>"
+
+def topic_analysis_handler(text_input):
+    """Show topic analysis capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Topic Analysis</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-info-circle"></i>
+    Topic analysis identifies the main themes and subjects in a text, helping to categorize content and understand what it's about.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Models & Techniques Used:</h4>
+        <ul>
+            <li><b>Zero-shot Classification</b> - BART model that can classify text without specific training</li>
+            <li><b>TF-IDF Vectorizer</b> - Statistical method to identify important terms</li>
+            <li><b>Word/Phrase Analysis</b> - Extraction of important n-grams</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Ensure NLTK resources are downloaded
+        download_nltk_resources()
+        
+        # Check if text is long enough for meaningful analysis
+        if len(text_input.split()) < 50:
+            output_html.append(f"""
+            <div class="alert alert-warning">
+                <h3>Text Too Short for Full Topic Analysis</h3>
+                <p>The provided text contains only {len(text_input.split())} words. 
+                For meaningful topic analysis, please provide a longer text (at least 50 words).
+                We'll still perform basic frequency analysis, but topic modeling results may not be reliable.</p>
+            </div>
+            """)
+        
+        # Text cleaning and preprocessing
+        stop_words = set(stopwords.words('english'))
+        lemmatizer = WordNetLemmatizer()
+        
+        def preprocess_text(text):
+            # Tokenize
+            tokens = word_tokenize(text.lower())
+            # Remove stopwords and non-alphabetic tokens
+            filtered_tokens = [token for token in tokens if token.isalpha() and token not in stop_words]
+            # Lemmatize
+            lemmatized_tokens = [lemmatizer.lemmatize(token) for token in filtered_tokens]
+            return lemmatized_tokens
+        
+        # Process the text
+        processed_tokens = preprocess_text(text_input)
+        processed_text = ' '.join(processed_tokens)
+        
+        # Add Topic Classification section
+        output_html.append('<h3 class="task-subheader">Topic Classification</h3>')
+        
+        # Get topic classification
+        main_topic, confidence, sorted_topics, topic_scores = classify_topic(text_input)
+        
+        # Display topic classification results
+        output_html.append(f"""
+        <div class="alert alert-success">
+            <p class="mb-0 fs-5">This text is primarily about <strong>{main_topic}</strong> with {confidence}% confidence</p>
+        </div>
+        """)
+        
+        # Display topic scores (stacked rows to avoid overlap)
+        output_html.append('<div class="row">')
+        
+        # Row 1: Topic Relevance Chart (full width)
+        output_html.append('<div class="col-12">')
+        output_html.append('<h4>Topic Relevance</h4>')
+        
+        # Create horizontal bar chart for topic scores
+        plt.figure(figsize=(10, 6))
+        topics = [topic for topic, score in sorted_topics]
+        scores = [score for topic, score in sorted_topics]
+        
+        # Only show top topics for clarity
+        top_n = min(10, len(topics))
+        y_pos = np.arange(top_n)
+        
+        # Get a color gradient
+        colors = plt.cm.Blues(np.linspace(0.4, 0.8, top_n))
+        
+        # Create horizontal bars
+        bars = plt.barh(y_pos, [s * 100 for s in scores[:top_n]], color=colors)
+        
+        # Add labels and values
+        for i, bar in enumerate(bars):
+            width = bar.get_width()
+            plt.text(width + 0.5, bar.get_y() + bar.get_height()/2,
+                    f"{width:.1f}%",
+                    va='center')
+        
+        plt.yticks(y_pos, topics[:top_n])
+        plt.xlabel('Relevance')
+        plt.title('Topic Scores')
+        plt.tight_layout()
+        
+        output_html.append(fig_to_html(plt.gcf()))
+        output_html.append('</div>')
+        output_html.append('</div>')  # Close row 1
+        
+        # Row 2: Topic Scores Table (full width)
+        output_html.append('<div class="row mt-3">')
+        output_html.append('<div class="col-12">')
+        output_html.append('<h4>Topic Scores</h4>')
+        
+        # Create table of topic scores
+        topic_scores_df = pd.DataFrame({
+            'Rank': range(1, len(sorted_topics) + 1),
+            'Topic': [topic.capitalize() for topic, _ in sorted_topics],
+            'Confidence': [f"{score:.4f}" for _, score in sorted_topics]
+        })
+        
+        output_html.append(df_to_html_table(topic_scores_df))
+        output_html.append('</div>')
+        output_html.append('</div>')  # Close row 2
+        
+        # Extract and display key phrases
+        output_html.append('<h3 class="task-subheader">Key Phrases</h3>')
+        
+        # Extract key phrases
+        key_phrases = extract_key_phrases(text_input)
+        
+        # Display key phrases in a table
+        if key_phrases:
+            phrase_df = pd.DataFrame({
+                'Phrase': [phrase for phrase, _ in key_phrases],
+                'Frequency': [freq for _, freq in key_phrases]
+            })
+            
+            output_html.append('<div class="row">')
+            
+            # Row 1: Key phrases table (full width)
+            output_html.append('<div class="col-12">')
+            output_html.append(df_to_html_table(phrase_df))
+            output_html.append('</div>')
+            
+            # Row 2: Phrase cloud (full width)
+            output_html.append('</div>')  # Close row 1
+            output_html.append('<div class="row mt-3">')
+            output_html.append('<div class="col-12">')
+            output_html.append(create_phrase_cloud(key_phrases))
+            output_html.append('</div>')
+            
+            output_html.append('</div>')  # Close row 2
+        else:
+            output_html.append("<p>No key phrases could be extracted from the text.</p>")
+        
+        # Term Frequency Analysis
+        output_html.append('<h3 class="task-subheader">Key Term Frequency Analysis</h3>')
+        
+        # Get token frequencies
+        token_freq = Counter(processed_tokens)
+        
+        # Sort by frequency
+        sorted_word_freq = dict(sorted(token_freq.items(), key=lambda item: item[1], reverse=True))
+        
+        # Take top 25 words for visualization
+        top_n = 25
+        top_words = list(sorted_word_freq.keys())[:top_n]
+        top_freqs = list(sorted_word_freq.values())[:top_n]
+        
+        # Create visualization
+        fig = plt.figure(figsize=(10, 6))
+        colors = plt.cm.viridis(np.linspace(0.3, 0.85, len(top_words)))
+        bars = plt.bar(top_words, top_freqs, color=colors)
+        plt.xlabel('Term')
+        plt.ylabel('Frequency')
+        plt.title(f'Top {top_n} Term Frequencies')
+        plt.xticks(rotation=45, ha='right')
+        plt.tight_layout()
+        
+        # Add value labels on top of bars
+        for bar in bars:
+            height = bar.get_height()
+            plt.text(bar.get_x() + bar.get_width()/2., height + 0.1,
+                    f'{height}',
+                    ha='center', va='bottom',
+                    fontsize=8)
+        
+        # Show plots and table in stacked rows
+        output_html.append('<div class="row">')
+        
+        # Row 1: Chart (full width)
+        output_html.append('<div class="col-12">')
+        output_html.append(fig_to_html(fig))
+        output_html.append('</div>')
+        
+        # Row 2: Top terms table (full width)
+        output_html.append('</div>')  # Close row 1
+        output_html.append('<div class="row mt-3">')
+        output_html.append('<div class="col-12">')
+        output_html.append('<h4>Top Terms</h4>')
+        
+        # Create DataFrame of top terms
+        top_terms_df = pd.DataFrame({
+            'Term': list(sorted_word_freq.keys())[:15],
+            'Frequency': list(sorted_word_freq.values())[:15]
+        })
+        
+        output_html.append(df_to_html_table(top_terms_df))
+        output_html.append('</div>')
+        output_html.append('</div>')  # Close row 2
+        
+        # WordCloud visualization
+        output_html.append('<h3 class="task-subheader">Word Cloud Visualization</h3>')
+        output_html.append('<p>The size of each word represents its frequency in the text.</p>')
+        
+        # Generate word cloud
+        wc = wordcloud.WordCloud(
+            background_color='white',
+            max_words=100,
+            width=800,
+            height=400,
+            colormap='viridis',
+            contour_width=1,
+            contour_color='steelblue'
+        )
+        wc.generate_from_frequencies(sorted_word_freq)
+        
+        # Create figure
+        fig = plt.figure(figsize=(12, 6))
+        plt.imshow(wc, interpolation='bilinear')
+        plt.axis('off')
+        plt.tight_layout()
+        
+        output_html.append(fig_to_html(fig))
+        
+        # TF-IDF Analysis
+        output_html.append('<h3 class="task-subheader">TF-IDF Analysis</h3>')
+        output_html.append("""
+        <div class="alert alert-light">
+            <p class="mb-0">
+                Term Frequency-Inverse Document Frequency (TF-IDF) identifies terms that are distinctive to parts of the text.
+                In this case, we treat each sentence as a separate "document" for the analysis.
+            </p>
+        </div>
+        """)
+        
+        # Split text into sentences
+        sentences = nltk.sent_tokenize(text_input)
+        
+        # Only perform TF-IDF if there are enough sentences
+        if len(sentences) >= 3:
+            # Create TF-IDF vectorizer
+            tfidf_vectorizer = TfidfVectorizer(
+                max_features=100, 
+                stop_words='english',
+                min_df=1
+            )
+            
+            # Fit and transform the sentences
+            tfidf_matrix = tfidf_vectorizer.fit_transform(sentences)
+            
+            # Get feature names
+            feature_names = tfidf_vectorizer.get_feature_names_out()
+            
+            # Create a table of top TF-IDF terms for each sentence
+            tfidf_data = []
+            
+            for i, sentence in enumerate(sentences[:min(len(sentences), 5)]):  # Show max 5 sentences to avoid clutter
+                # Get top terms for this sentence
+                tfidf_scores = tfidf_matrix[i].toarray()[0]
+                top_indices = np.argsort(tfidf_scores)[-5:][::-1]  # Top 5 terms
+                
+                top_terms = [feature_names[idx] for idx in top_indices]
+                top_scores = [tfidf_scores[idx] for idx in top_indices]
+                
+                # Format for display
+                formatted_terms = ', '.join([f"{term} ({score:.3f})" for term, score in zip(top_terms, top_scores)])
+                
+                shortened_sentence = (sentence[:75] + '...') if len(sentence) > 75 else sentence
+                
+                tfidf_data.append({
+                    'Sentence': shortened_sentence,
+                    'Distinctive Terms (TF-IDF scores)': formatted_terms
+                })
+            
+            # Create dataframe
+            tfidf_df = pd.DataFrame(tfidf_data)
+            
+            output_html.append('<div class="mt-3">')
+            output_html.append(df_to_html_table(tfidf_df))
+            output_html.append('</div>')
+            
+            # Create a TF-IDF term-sentence heatmap
+            if len(sentences) <= 10:  # Only create heatmap for reasonable number of sentences
+                # Get top terms across all sentences
+                mean_tfidf = np.mean(tfidf_matrix.toarray(), axis=0)
+                top_indices = np.argsort(mean_tfidf)[-10:][::-1]  # Top 10 terms
+                top_terms = [feature_names[idx] for idx in top_indices]
+                
+                # Create heatmap data
+                heatmap_data = tfidf_matrix[:, top_indices].toarray()
+                
+                # Create heatmap
+                fig, ax = plt.subplots(figsize=(10, 6))
+                plt.imshow(heatmap_data, cmap='viridis', aspect='auto')
+                
+                # Add labels
+                plt.yticks(range(len(sentences)), [f"Sent {i+1}" for i in range(len(sentences))])
+                plt.xticks(range(len(top_terms)), top_terms, rotation=45, ha='right')
+                
+                plt.colorbar(label='TF-IDF Score')
+                plt.xlabel('Terms')
+                plt.ylabel('Sentences')
+                plt.title('TF-IDF Heatmap: Term Importance by Sentence')
+                plt.tight_layout()
+                
+                output_html.append('<h4>Term Importance Heatmap</h4>')
+                output_html.append('<p>This heatmap shows which terms are most distinctive in each sentence.</p>')
+                output_html.append(fig_to_html(fig))
+        else:
+            output_html.append("""
+            <div class="alert alert-warning">
+                <p class="mb-0">TF-IDF analysis requires at least 3 sentences. The provided text doesn't have enough sentences for this analysis.</p>
+            </div>
+            """)
+        
+        # Topic Modeling
+        output_html.append('<h3 class="task-subheader">Topic Modeling</h3>')
+        output_html.append("""
+        <div class="alert alert-light">
+            <p class="mb-0">
+                Topic modeling uses statistical methods to discover abstract "topics" that occur in a collection of documents.
+                Here, we use Latent Dirichlet Allocation (LDA) to identify potential topics.
+            </p>
+        </div>
+        """)
+        
+        # Check if text is long enough for topic modeling
+        if len(text_input.split()) < 50:
+            output_html.append("""
+            <div class="alert alert-warning">
+                <p class="mb-0">Topic modeling works best with longer texts. The provided text is too short for reliable topic modeling.</p>
+            </div>
+            """)
+        else:
+            # Create document-term matrix
+            # For short single-document text, we'll split by sentences to create a "corpus"
+            sentences = nltk.sent_tokenize(text_input)
+            
+            if len(sentences) < 4:
+                output_html.append("""
+                <div class="alert alert-warning">
+                    <p class="mb-0">Topic modeling works best with multiple documents or paragraphs. Since the provided text has few sentences,
+                    the topic modeling results may not be meaningful.</p>
+                </div>
+                """)
+            
+            # Create document-term matrix using CountVectorizer
+            vectorizer = CountVectorizer(
+                max_features=1000,
+                stop_words='english',
+                min_df=1
+            )
+            
+            # Create a document-term matrix
+            dtm = vectorizer.fit_transform(sentences)
+            feature_names = vectorizer.get_feature_names_out()
+            
+            # Set number of topics based on text length
+            n_topics = min(3, max(2, len(sentences) // 3))
+            
+            # LDA Topic Modeling
+            lda_model = LatentDirichletAllocation(
+                n_components=n_topics,
+                max_iter=10,
+                learning_method='online',
+                random_state=42
+            )
+            
+            lda_model.fit(dtm)
+            
+            # Get top terms for each topic
+            n_top_words = 10
+            topic_terms = []
+            for topic_idx, topic in enumerate(lda_model.components_):
+                top_indices = topic.argsort()[:-n_top_words - 1:-1]
+                top_terms = [feature_names[i] for i in top_indices]
+                topic_weight = topic[top_indices].sum() / topic.sum()  # Approximation of topic "importance"
+                topic_terms.append({
+                    "Topic": f"Topic {topic_idx + 1}",
+                    "Top Terms": ", ".join(top_terms),
+                    "Weight": f"{topic_weight:.2f}"
+                })
+            
+            topic_df = pd.DataFrame(topic_terms)
+            
+            output_html.append('<h4>LDA Topic Model Results</h4>')
+            output_html.append(df_to_html_table(topic_df))
+            
+            # Create word cloud for each topic
+            output_html.append('<h4>Topic Word Clouds</h4>')
+            output_html.append('<div class="row">')
+            
+            for topic_idx, topic in enumerate(lda_model.components_):
+                # Get topic words and weights
+                word_weights = {feature_names[i]: topic[i] for i in topic.argsort()[:-50-1:-1]}
+                
+                # Generate word cloud
+                wc = wordcloud.WordCloud(
+                    background_color='white',
+                    max_words=30,
+                    width=400,
+                    height=300,
+                    colormap='plasma',
+                    contour_width=1,
+                    contour_color='steelblue'
+                )
+                wc.generate_from_frequencies(word_weights)
+                
+                # Create figure
+                fig = plt.figure(figsize=(6, 4))
+                plt.imshow(wc, interpolation='bilinear')
+                plt.axis('off')
+                plt.title(f'Topic {topic_idx + 1}')
+                plt.tight_layout()
+                
+                output_html.append(f'<div class="col-12 mb-3">')
+                output_html.append(fig_to_html(fig))
+                output_html.append('</div>')
+            
+            output_html.append('</div>')  # Close row for word clouds
+            
+            # Topic distribution visualization
+            topic_distribution = lda_model.transform(dtm)
+            
+            # Calculate dominant topic for each sentence
+            dominant_topics = np.argmax(topic_distribution, axis=1)
+            
+            # Count number of sentences for each dominant topic
+            topic_counts = Counter(dominant_topics)
+            
+            # Prepare data for visualization
+            topics = [f"Topic {i+1}" for i in range(n_topics)]
+            counts = [topic_counts.get(i, 0) for i in range(n_topics)]
+            
+            # Create visualization
+            fig = plt.figure(figsize=(8, 5))
+            bars = plt.bar(topics, counts, color=plt.cm.plasma(np.linspace(0.15, 0.85, n_topics)))
+            
+            # Add value labels
+            for bar in bars:
+                height = bar.get_height()
+                plt.text(bar.get_x() + bar.get_width()/2., height + 0.1,
+                        f'{height}',
+                        ha='center', va='bottom')
+            
+            plt.xlabel('Topic')
+            plt.ylabel('Number of Sentences')
+            plt.title('Distribution of Dominant Topics Across Sentences')
+            plt.tight_layout()
+            
+            output_html.append('<h4>Topic Distribution</h4>')
+            output_html.append(fig_to_html(fig))
+            
+            # Topic network graph
+            output_html.append('<h4>Topic-Term Network</h4>')
+            output_html.append('<p>This visualization shows the relationships between topics and their most important terms.</p>')
+            
+            # Create network graph
+            G = nx.Graph()
+            
+            # Add topic nodes
+            for i in range(n_topics):
+                G.add_node(f"Topic {i+1}", type='topic', size=1000)
+            
+            # Add term nodes and edges
+            for topic_idx, topic in enumerate(lda_model.components_):
+                topic_name = f"Topic {topic_idx+1}"
+                
+                # Get top terms for this topic
+                top_indices = topic.argsort()[:-11:-1]
+                
+                for i in top_indices:
+                    term = feature_names[i]
+                    weight = topic[i]
+                    
+                    # Only add terms with significant weight
+                    if weight > 0.01:
+                        if not G.has_node(term):
+                            G.add_node(term, type='term', size=300)
+                        
+                        G.add_edge(topic_name, term, weight=weight)
+            
+            # Create graph visualization
+            fig = plt.figure(figsize=(10, 8))
+            
+            # Position nodes using spring layout
+            pos = nx.spring_layout(G, k=0.3, seed=42)
+            
+            # Draw nodes
+            topic_nodes = [node for node in G.nodes() if G.nodes[node]['type'] == 'topic']
+            term_nodes = [node for node in G.nodes() if G.nodes[node]['type'] == 'term']
+            
+            # Draw topic nodes
+            nx.draw_networkx_nodes(
+                G, pos,
+                nodelist=topic_nodes,
+                node_color='#E53935',
+                node_size=[G.nodes[node]['size'] for node in topic_nodes],
+                alpha=0.8
+            )
+            
+            # Draw term nodes
+            nx.draw_networkx_nodes(
+                G, pos,
+                nodelist=term_nodes,
+                node_color='#1976D2',
+                node_size=[G.nodes[node]['size'] for node in term_nodes],
+                alpha=0.6
+            )
+            
+            # Draw edges with varying thickness
+            edge_weights = [G[u][v]['weight'] * 5 for u, v in G.edges()]
+            nx.draw_networkx_edges(
+                G, pos,
+                width=edge_weights,
+                alpha=0.5,
+                edge_color='gray'
+            )
+            
+            # Draw labels
+            nx.draw_networkx_labels(
+                G, pos,
+                font_size=10,
+                font_weight='bold'
+            )
+            
+            plt.axis('off')
+            plt.tight_layout()
+            
+            output_html.append(fig_to_html(fig))
+            
+            # Add note about interpreting results
+            output_html.append("""
+            <div class="alert alert-info">
+                <h4>Interpreting Topic Models</h4>
+                <p>Topic modeling is an unsupervised technique that works best with large collections of documents.
+                For a single text, especially shorter ones, topics may be less distinct or meaningful.
+                The "topics" shown here represent clusters of words that frequently appear together in the text.</p>
+                <p>For better topic modeling results:</p>
+                <ul>
+                    <li>Use longer texts with at least several paragraphs</li>
+                    <li>Provide multiple related documents for analysis</li>
+                    <li>Consider domain-specific preprocessing</li>
+                </ul>
+            </div>
+            """)
+    
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Error</h3>
+            <p>Failed to analyze topics: {str(e)}</p>
+        </div>
+        """)
+    
+    # About Topic Analysis section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Topic Analysis
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Topic Analysis?</h5>
+            
+            <p>Topic analysis, also known as topic modeling or topic extraction, is the process of identifying the main themes
+            or topics that occur in a collection of documents. It uses statistical models to discover abstract topics based
+            on word distributions throughout the texts.</p>
+            
+            <h5>Common Approaches:</h5>
+            
+            <ul>
+                <li><b>Term Frequency Analysis</b> - Simple counting of terms to find the most common topics</li>
+                <li><b>TF-IDF (Term Frequency-Inverse Document Frequency)</b> - Identifies terms that are distinctive to particular documents or sections</li>
+                <li><b>LDA (Latent Dirichlet Allocation)</b> - A probabilistic model that assigns topic distributions to documents</li>
+                <li><b>NMF (Non-negative Matrix Factorization)</b> - A linear-algebraic approach to topic discovery</li>
+                <li><b>BERTopic</b> - A modern approach that uses BERT embeddings and clustering for topic modeling</li>
+            </ul>
+            
+            <h5>Applications:</h5>
+            
+            <ul>
+                <li><b>Content organization</b> - Categorizing documents by topic</li>
+                <li><b>Trend analysis</b> - Tracking how topics evolve over time</li>
+                <li><b>Content recommendation</b> - Suggesting related content based on topic similarity</li>
+                <li><b>Customer feedback analysis</b> - Understanding main themes in reviews or feedback</li>
+                <li><b>Research insights</b> - Identifying research themes in academic papers</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/translation.py

@@ -0,0 +1,337 @@
+import matplotlib.pyplot as plt
+import pandas as pd
+import numpy as np
+from collections import Counter
+import time
+
+from utils.model_loader import load_translator
+from utils.helpers import fig_to_html, df_to_html_table
+
+def translation_handler(text_input, source_lang="auto", target_lang="en"):
+    """Show machine translation capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Machine Translation</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-info">
+    <i class="fas fa-language"></i>
+    Machine translation converts text from one language to another while preserving meaning and context as accurately as possible.
+    </div>
+    """)
+    
+    # Model info
+    output_html.append("""
+    <div class="alert alert-info">
+        <h4><i class="fas fa-tools"></i> Model Used:</h4>
+        <ul>
+            <li><b>Helsinki-NLP/opus-mt</b> - A collection of pre-trained neural machine translation models</li>
+            <li><b>Capabilities</b> - Translates between various language pairs with good accuracy</li>
+            <li><b>Architecture</b> - Transformer-based sequence-to-sequence model</li>
+        </ul>
+    </div>
+    """)
+    
+    try:
+        # Check if text is empty
+        if not text_input.strip():
+            output_html.append("""
+            <div class="alert alert-warning">
+                <h3>No Text Provided</h3>
+                <p>Please enter some text to translate.</p>
+            </div>
+            """)
+            output_html.append('</div>')  # Close result-area div
+            return '\n'.join(output_html)
+        
+        # Display source text
+        output_html.append('<h3 class="task-subheader">Source Text</h3>')
+        
+        # Language mapping for display
+        language_names = {
+            "auto": "Auto-detect",
+            "en": "English",
+            "es": "Spanish",
+            "fr": "French",
+            "de": "German",
+            "ru": "Russian",
+            "zh": "Chinese",
+            "ar": "Arabic",
+            "hi": "Hindi",
+            "ja": "Japanese",
+            "pt": "Portuguese",
+            "it": "Italian"
+        }
+        
+        source_lang_display = language_names.get(source_lang, source_lang)
+        target_lang_display = language_names.get(target_lang, target_lang)
+        
+        # Format source text info
+        output_html.append(f"""
+        <div class="mb-2">
+            <span class="badge bg-primary">
+                {source_lang_display}
+            </span>
+        </div>
+        """)
+        
+        # Display source text
+        output_html.append(f'<div class="card"><div class="card-body">{text_input}</div></div>')
+        
+        # Load translation model
+        translator = load_translator(source_lang, target_lang)
+        
+        # Translate text
+        start_time = time.time()
+        
+        # Check text length and apply limit if needed
+        MAX_TEXT_LENGTH = 500  # Characters
+        truncated = False
+        
+        if len(text_input) > MAX_TEXT_LENGTH:
+            truncated_text = text_input[:MAX_TEXT_LENGTH]
+            truncated = True
+        else:
+            truncated_text = text_input
+        
+        # Perform translation
+        translation = translator(truncated_text)
+        translated_text = translation[0]['translation_text']
+        
+        # Calculate processing time
+        translation_time = time.time() - start_time
+        
+        # Display translation results
+        output_html.append('<h3 class="task-subheader">Translation</h3>')
+        
+        # Show target language
+        output_html.append(f"""
+        <div class="mb-2">
+            <span class="badge bg-success">
+                {target_lang_display}
+            </span>
+        </div>
+        """)
+        
+        # Display translated text
+        output_html.append(f'<div class="card"><div class="card-body bg-light">{translated_text}</div></div>')
+        
+        # Show truncation warning if needed
+        if truncated:
+            output_html.append(f"""
+            <div class="alert alert-warning">
+                <p class="mb-0"><b>⚠️ Note:</b> Your text was truncated to {MAX_TEXT_LENGTH} characters due to model limitations. Only the first part was translated.</p>
+            </div>
+            """)
+        
+        # Translation statistics
+        output_html.append('<h3 class="task-subheader">Translation Analysis</h3>')
+        
+        # Calculate basic stats
+        source_chars = len(text_input)
+        source_words = len(text_input.split())
+        target_chars = len(translated_text)
+        target_words = len(translated_text.split())
+        
+        # Display stats in a nice format
+        output_html.append(f"""
+        <div class="row text-center mb-4">
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="display-4 text-primary">{source_words}</div>
+                        <div>Source Words</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="display-4 text-success">{target_words}</div>
+                        <div>Translated Words</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="display-4 text-warning">{translation_time:.2f}s</div>
+                        <div>Processing Time</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        # Length comparison
+        output_html.append('<h4>Length Comparison</h4>')
+        
+        # Create bar chart comparing text lengths
+        fig, ax = plt.subplots(figsize=(10, 5))
+        
+        # Create grouped bar chart
+        x = np.arange(2)
+        width = 0.35
+        
+        ax.bar(x - width/2, [source_words, source_chars], width, label='Source Text', color='#1976D2')
+        ax.bar(x + width/2, [target_words, target_chars], width, label='Translated Text', color='#4CAF50')
+        
+        ax.set_xticks(x)
+        ax.set_xticklabels(['Word Count', 'Character Count'])
+        ax.legend()
+        
+        # Add value labels on top of bars
+        for i, v in enumerate([source_words, source_chars]):
+            ax.text(i - width/2, v + 0.5, str(v), ha='center')
+        
+        for i, v in enumerate([target_words, target_chars]):
+            ax.text(i + width/2, v + 0.5, str(v), ha='center')
+        
+        plt.title('Source vs. Translation Length Comparison')
+        plt.tight_layout()
+        
+        output_html.append(fig_to_html(fig))
+        
+        # Expansion/contraction ratio
+        word_ratio = target_words / source_words if source_words > 0 else 0
+        char_ratio = target_chars / source_chars if source_chars > 0 else 0
+        
+        expansion_type = "expansion" if word_ratio > 1.1 else "contraction" if word_ratio < 0.9 else "similar length"
+        
+        output_html.append(f"""
+        <div class="alert alert-info">
+            <h4>Translation Length Analysis</h4>
+            <p>The translation shows <b>{expansion_type}</b> compared to the source text.</p>
+            <ul>
+                <li>Word ratio: {word_ratio:.2f} (target/source)</li>
+                <li>Character ratio: {char_ratio:.2f} (target/source)</li>
+            </ul>
+            <p><small>Note: Different languages naturally have different word and character counts when expressing the same meaning.</small></p>
+        </div>
+        """)
+        
+        # Language characteristics comparison
+        source_avg_word_len = source_chars / source_words if source_words > 0 else 0
+        target_avg_word_len = target_chars / target_words if target_words > 0 else 0
+        
+        output_html.append('<h4>Language Characteristics</h4>')
+        
+        # Create comparison table
+        lang_data = {
+            'Metric': ['Average Word Length', 'Words per Character', 'Characters per Word'],
+            f'Source ({source_lang_display})': [
+                f"{source_avg_word_len:.2f} chars",
+                f"{source_words / source_chars:.3f}" if source_chars > 0 else "N/A",
+                f"{source_chars / source_words:.2f}" if source_words > 0 else "N/A"
+            ],
+            f'Target ({target_lang_display})': [
+                f"{target_avg_word_len:.2f} chars",
+                f"{target_words / target_chars:.3f}" if target_chars > 0 else "N/A",
+                f"{target_chars / target_words:.2f}" if target_words > 0 else "N/A"
+            ]
+        }
+        
+        lang_df = pd.DataFrame(lang_data)
+        
+        output_html.append(df_to_html_table(lang_df))
+        
+        # Alternative translations section
+        output_html.append('<h3 class="task-subheader">Alternative Translation Options</h3>')
+        output_html.append('<p>Machine translation models often have different ways of translating the same text. Here are some general tips for better translations:</p>')
+        
+        output_html.append("""
+        <div class="alert alert-info">
+            <h4>Tips for Better Machine Translation</h4>
+            <ul class="mb-0">
+                <li><b>Use clear, simple language</b> in your source text</li>
+                <li><b>Avoid idioms and slang</b> that may not translate well across cultures</li>
+                <li><b>Break up long, complex sentences</b> into simpler ones</li>
+                <li><b>Provide context</b> when dealing with ambiguous terms</li>
+                <li><b>Review and post-edit</b> machine translations for important documents</li>
+            </ul>
+        </div>
+        """)
+        
+        # Common translation challenges
+        output_html.append('<h4>Common Translation Challenges</h4>')
+        
+        challenge_data = {
+            'Challenge': [
+                'Ambiguity', 
+                'Idioms & Expressions', 
+                'Cultural References', 
+                'Technical Terminology',
+                'Grammatical Differences'
+            ],
+            'Description': [
+                'Words with multiple meanings may be incorrectly translated without proper context',
+                'Expressions that are unique to a culture often lose meaning when translated literally',
+                'References to culture-specific concepts may not have direct equivalents',
+                'Specialized terminology may not translate accurately without domain-specific models',
+                'Different languages have different grammatical structures that can affect translation'
+            ],
+            'Example': [
+                '"Bank" could mean financial institution or river edge',
+                '"It\'s raining cats and dogs" translated literally loses its meaning',
+                'References to local holidays or customs may be confusing when translated',
+                'Medical or legal terms often need specialized translation knowledge',
+                'Languages differ in word order, gender agreement, verb tenses, etc.'
+            ]
+        }
+        
+        challenge_df = pd.DataFrame(challenge_data)
+        
+        output_html.append(df_to_html_table(challenge_df))
+        
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h3>Translation Error</h3>
+            <p>{str(e)}</p>
+            <p>This could be due to an unsupported language pair or an issue loading the translation model.</p>
+        </div>
+        """)
+    
+    # About Machine Translation section
+    output_html.append("""
+    <div class="card mt-4">
+        <div class="card-header">
+            <h4 class="mb-0">
+                <i class="fas fa-info-circle"></i>
+                About Machine Translation
+            </h4>
+        </div>
+        <div class="card-body">
+            <h5>What is Machine Translation?</h5>
+            
+            <p>Machine translation is the automated translation of text from one language to another using computer software.
+            Modern machine translation systems use neural networks to understand and generate text, leading to significant
+            improvements in fluency and accuracy compared to older rule-based or statistical systems.</p>
+            
+            <h5>Types of Machine Translation:</h5>
+            
+            <ul>
+                <li><b>Rule-based MT</b> - Uses linguistic rules crafted by human experts</li>
+                <li><b>Statistical MT</b> - Uses statistical models trained on parallel texts</li>
+                <li><b>Neural MT</b> - Uses deep learning and neural networks (current state-of-the-art)</li>
+                <li><b>Hybrid MT</b> - Combines multiple approaches for better results</li>
+            </ul>
+            
+            <h5>Applications:</h5>
+            
+            <ul>
+                <li><b>Website localization</b> - Translating web content for international audiences</li>
+                <li><b>Document translation</b> - Quickly obtaining translations of documents</li>
+                <li><b>Real-time communication</b> - Enabling conversations across language barriers</li>
+                <li><b>E-commerce</b> - Making product listings available in multiple languages</li>
+                <li><b>Content accessibility</b> - Making information available to speakers of different languages</li>
+            </ul>
+        </div>
+    </div>
+    """)
+    
+    output_html.append('</div>')  # Close result-area div
+    
+    return '\n'.join(output_html)

components/vector_embeddings.py

@@ -0,0 +1,241 @@
+import matplotlib
+matplotlib.use('Agg')  # Use non-GUI backend
+import matplotlib.pyplot as plt
+import numpy as np
+import pandas as pd
+import spacy
+import time
+import faiss
+from sentence_transformers import SentenceTransformer, util
+from sklearn.decomposition import PCA
+import textwrap
+from sklearn.metrics.pairwise import cosine_similarity
+
+from utils.model_loader import load_embedding_model
+from utils.helpers import fig_to_html, df_to_html_table
+
+def vector_embeddings_handler(text_input, search_query=""):
+    """Show vector embeddings and semantic search capabilities."""
+    output_html = []
+    
+    # Add result area container
+    output_html.append('<div class="result-area">')
+    output_html.append('<h2 class="task-header">Vector Embeddings Analysis Results</h2>')
+    
+    output_html.append("""
+    <div class="alert alert-success">
+        <h4><i class="fas fa-check-circle me-2"></i>Embeddings Generated Successfully!</h4>
+        <p class="mb-0">Your text has been processed and converted into high-dimensional vector representations.</p>
+    </div>
+    """)
+    
+    # Load model and create embeddings
+    try:
+        model = load_embedding_model()
+        
+        # Split the text into chunks (sentences)
+        import spacy
+        nlp = spacy.load("en_core_web_sm")
+        doc = nlp(text_input)
+        sentences = [sent.text.strip() for sent in doc.sents if len(sent.text.strip()) > 10]
+        
+        # If we have too few sentences, create artificial chunks
+        if len(sentences) < 3:
+            words = text_input.split()
+            chunk_size = max(10, len(words) // 3)
+            sentences = [' '.join(words[i:i+chunk_size]) for i in range(0, len(words), chunk_size) if i+chunk_size <= len(words)]
+        
+        # Limit to 10 sentences to avoid overwhelming the visualization
+        if len(sentences) > 10:
+            sentences = sentences[:10]
+        
+        # Create embeddings
+        embeddings = model.encode(sentences)
+        
+        # Text Statistics
+        output_html.append(f"""
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header bg-primary text-white">
+                        <h4 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Processing Statistics</h4>
+                    </div>
+                    <div class="card-body">
+                        <div class="row text-center">
+                            <div class="col-md-3">
+                                <div class="stat-item">
+                                    <h3 class="text-primary">{len(text_input)}</h3>
+                                    <p class="text-muted mb-0">Characters</p>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="stat-item">
+                                    <h3 class="text-success">{len(sentences)}</h3>
+                                    <p class="text-muted mb-0">Text Segments</p>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="stat-item">
+                                    <h3 class="text-info">{embeddings.shape[1]}</h3>
+                                    <p class="text-muted mb-0">Vector Dimensions</p>
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="stat-item">
+                                    <h3 class="text-warning">{embeddings.shape[0]}</h3>
+                                    <p class="text-muted mb-0">Embedding Vectors</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        # Text Segments Display
+        output_html.append("""
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header bg-info text-white">
+                        <h4 class="mb-0"><i class="fas fa-list me-2"></i>Text Segments</h4>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+        """)
+        
+        for i, sentence in enumerate(sentences[:6]):  # Show max 6 segments
+            output_html.append(f"""
+                            <div class="col-md-6 mb-3">
+                                <div class="p-3 border rounded bg-light">
+                                    <h6 class="text-primary mb-2">Segment {i+1}</h6>
+                                    <p class="mb-0 small">{sentence}</p>
+                                </div>
+                            </div>
+            """)
+        
+        output_html.append("""
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+        # Semantic Search Interface
+        output_html.append("""
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="card border-warning">
+                    <div class="card-header bg-warning text-dark">
+                        <h4 class="mb-0"><i class="fas fa-search me-2"></i>Semantic Search</h4>
+                    </div>
+                    <div class="card-body">
+                        <p class="mb-3">Search for content by meaning, not just keywords. The system will find the most semantically similar text segments.</p>
+                        
+                        <div class="row mb-3">
+                            <div class="col-md-10">
+                                <input type="text" id="search-input" class="form-control form-control-lg" placeholder="Enter a search query to find similar content...">
+                            </div>
+                            <div class="col-md-2">
+                                <button onclick="performSemanticSearch()" class="btn btn-warning btn-lg w-100">
+                                    <i class="fas fa-search me-1"></i>Search
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="mb-3">
+                            <h6 class="mb-2"><i class="fas fa-lightbulb me-2"></i>Try these example searches:</h6>
+                            <div class="d-flex flex-wrap gap-2">
+                                <button onclick="document.getElementById('search-input').value = 'space research'; performSemanticSearch();" 
+                                        class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-rocket me-1"></i>space research
+                                </button>
+                                <button onclick="document.getElementById('search-input').value = 'scientific collaboration'; performSemanticSearch();" 
+                                        class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-users me-1"></i>scientific collaboration
+                                </button>
+                                <button onclick="document.getElementById('search-input').value = 'international project'; performSemanticSearch();" 
+                                        class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-globe me-1"></i>international project
+                                </button>
+                                <button onclick="document.getElementById('search-input').value = 'laboratory experiments'; performSemanticSearch();" 
+                                        class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-flask me-1"></i>laboratory experiments
+                                </button>
+                                <button onclick="document.getElementById('search-input').value = 'space agencies'; performSemanticSearch();" 
+                                        class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-building me-1"></i>space agencies
+                                </button>
+                                <button onclick="document.getElementById('search-input').value = 'microgravity environment'; performSemanticSearch();" 
+                                        class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-weight me-1"></i>microgravity environment
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div id="search-results" style="display: none;">
+                            <hr>
+                            <h5><i class="fas fa-list-ol me-2"></i>Search Results:</h5>
+                            <div id="results-container" class="border rounded p-3 bg-light" style="max-height: 400px; overflow-y: auto;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """)
+        
+    except Exception as e:
+        output_html.append(f"""
+        <div class="alert alert-danger">
+            <h4><i class="fas fa-exclamation-triangle me-2"></i>Error</h4>
+            <p>Could not generate embeddings: {str(e)}</p>
+        </div>
+        """)
+    
+    # Close result-area div
+    output_html.append('</div>')
+    return '\n'.join(output_html)
+
+def perform_semantic_search(context, query):
+    """Perform semantic search on the given context with the query."""
+    try:
+        # Load model
+        model = load_embedding_model()
+        
+        # Split context into sentences
+        import spacy
+        nlp = spacy.load("en_core_web_sm")
+        doc = nlp(context)
+        sentences = [sent.text.strip() for sent in doc.sents if len(sent.text.strip()) > 5]
+        
+        # Create embeddings
+        sentence_embeddings = model.encode(sentences)
+        query_embedding = model.encode([query])[0]
+        
+        # Calculate similarities
+        from sentence_transformers import util
+        similarities = util.pytorch_cos_sim(query_embedding, sentence_embeddings)[0].cpu().numpy()
+        
+        # Create result pairs (sentence, similarity)
+        results = [(sentences[i], float(similarities[i])) for i in range(len(sentences))]
+        
+        # Sort by similarity (descending)
+        results.sort(key=lambda x: x[1], reverse=True)
+        
+        # Return top results
+        return {
+            "success": True,
+            "results": [
+                {"text": text, "score": score}
+                for text, score in results[:5]  # Return top 5 results
+            ]
+        }
+        
+    except Exception as e:
+        return {
+            "success": False,
+            "error": str(e)
+        }

requirements.txt

@@ -0,0 +1,37 @@
+# Core web framework
+Flask==3.0.0
+flask-cors==4.0.0
+
+# NLP Core Libraries
+transformers==4.36.2
+torch==2.1.2
+tokenizers==0.15.0
+sentence-transformers==2.2.2
+nltk==3.8.1
+spacy==3.7.2
+
+# Data Science Libraries
+numpy==1.24.3
+pandas==2.0.3
+scikit-learn==1.3.2
+scipy==1.11.4
+
+# Text Processing
+textblob==0.17.1
+langdetect==1.0.9
+
+# Visualization (lightweight versions)
+matplotlib==3.7.5
+plotly==5.17.0
+seaborn==0.13.0
+networkx==3.1.1
+matplotlib-venn==0.11.9
+
+# Utilities
+requests==2.31.0
+Pillow==10.1.0
+faiss-cpu==1.7.4
+wordcloud==1.9.3
+
+# Memory optimization
+psutil==5.9.6

static/css/components.css

@@ -0,0 +1,1756 @@
+/* Enhanced CSS for NLP Ultimate Tutorial - Component Specific Styles */
+
+/* Vector Embeddings Page Enhancements */
+.vector-embeddings-page {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    padding: 20px 0;
+}
+
+.model-info-cards .card {
+    transition: all 0.3s ease;
+    border: none;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    overflow: hidden;
+    position: relative;
+}
+
+.model-info-cards .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+.model-info-cards .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+}
+
+.model-info-cards .card-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none;
+    padding: 20px;
+    position: relative;
+}
+
+.model-info-cards .card-header.bg-primary {
+    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
+}
+
+.model-info-cards .card-header.bg-success {
+    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%) !important;
+}
+
+.model-info-cards .card-header.bg-info {
+    background: linear-gradient(135deg, #36b9cc 0%, #258391 100%) !important;
+}
+
+.model-info-cards .card-body {
+    padding: 25px;
+    background: rgba(255,255,255,0.95);
+}
+
+.model-info-cards .list-unstyled li {
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    transition: all 0.2s ease;
+}
+
+.model-info-cards .list-unstyled li:hover {
+    background: rgba(0,0,0,0.02);
+    padding-left: 10px;
+}
+
+.model-info-cards .list-unstyled li:last-child {
+    border-bottom: none;
+}
+
+/* Visualization Cards */
+.visualization-card {
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border: none;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+    border-radius: 15px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.visualization-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+}
+
+.visualization-card .card-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    padding: 20px;
+    color: white;
+}
+
+.visualization-card .card-body {
+    padding: 30px;
+}
+
+/* Semantic Search Enhancement */
+.semantic-search-card {
+    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
+    border: none;
+    box-shadow: 0 8px 25px rgba(255,193,7,0.3);
+    border-radius: 15px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.semantic-search-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 35px rgba(255,193,7,0.4);
+}
+
+.semantic-search-card .card-header {
+    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%) !important;
+    border: none;
+    padding: 25px;
+    color: white;
+}
+
+.semantic-search-card .card-body {
+    background: rgba(255,255,255,0.9);
+    padding: 30px;
+}
+
+.semantic-search-card .form-control-lg {
+    border: 2px solid #fdcb6e;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 10px rgba(253,203,110,0.2);
+}
+
+.semantic-search-card .form-control-lg:focus {
+    border-color: #e17055;
+    box-shadow: 0 4px 15px rgba(225,112,85,0.3);
+    transform: translateY(-2px);
+}
+
+.semantic-search-card .btn-warning {
+    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
+    border: none;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(253,203,110,0.4);
+}
+
+.semantic-search-card .btn-warning:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(225,112,85,0.5);
+}
+
+/* Example Search Buttons */
+.example-search-card {
+    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+    border: none;
+    box-shadow: 0 6px 20px rgba(168,237,234,0.3);
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.example-search-card .card-header {
+    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important;
+    border: none;
+    padding: 20px;
+    color: white;
+}
+
+.example-search-card .card-body {
+    background: rgba(255,255,255,0.8);
+    padding: 25px;
+}
+
+.example-search-card .btn-outline-secondary {
+    border: 2px solid #74b9ff;
+    color: #0984e3;
+    background: rgba(255,255,255,0.9);
+    border-radius: 25px;
+    padding: 10px 20px;
+    margin: 5px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 10px rgba(116,185,255,0.2);
+}
+
+.example-search-card .btn-outline-secondary:hover {
+    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(116,185,255,0.4);
+}
+
+/* Process Flow Cards */
+.process-flow-card {
+    background: linear-gradient(135deg, #e8f4fd 0%, #d1ecf1 100%);
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.process-flow-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+.process-flow-card h4 {
+    color: #0984e3;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.process-flow-card p {
+    color: #636e72;
+    line-height: 1.6;
+}
+
+/* Info Alert Enhancements */
+.vector-embeddings-page .alert-info {
+    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+    border: none;
+    border-left: 5px solid #2196f3;
+    border-radius: 10px;
+    box-shadow: 0 3px 10px rgba(33,150,243,0.2);
+}
+
+.vector-embeddings-page .alert-success {
+    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
+    border: none;
+    border-left: 5px solid #4caf50;
+    border-radius: 10px;
+    box-shadow: 0 3px 10px rgba(76,175,80,0.2);
+}
+
+/* Chart Container Enhancements */
+.chart-container {
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    margin: 20px 0;
+    transition: all 0.3s ease;
+}
+
+.chart-container:hover {
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+/* Animation for page load */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.vector-embeddings-page .card {
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+.vector-embeddings-page .card:nth-child(1) { animation-delay: 0.1s; }
+.vector-embeddings-page .card:nth-child(2) { animation-delay: 0.2s; }
+.vector-embeddings-page .card:nth-child(3) { animation-delay: 0.3s; }
+.vector-embeddings-page .card:nth-child(4) { animation-delay: 0.4s; }
+
+/* Enhanced Vector Embeddings Components */
+.feature-list .d-flex {
+    transition: all 0.2s ease;
+    border-radius: 8px;
+    padding: 8px;
+    margin: 0 -8px 8px -8px;
+}
+
+.feature-list .d-flex:hover {
+    background: rgba(0,0,0,0.02);
+    transform: translateX(5px);
+}
+
+.process-step-icon {
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.process-step-icon:hover {
+    transform: scale(1.1);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+}
+
+.progress-bar {
+    transition: width 1s ease-in-out;
+}
+
+.bg-gradient-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.bg-gradient-info {
+    background: linear-gradient(135deg, #36b9cc 0%, #258391 100%) !important;
+}
+
+/* Model Information Cards Enhancement */
+.model-info-cards .card {
+    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    border-radius: 12px;
+}
+
+.model-info-cards .card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+}
+
+.model-info-cards .card-header {
+    border-radius: 12px 12px 0 0;
+}
+
+/* Process Flow Enhancement */
+.process-flow-card h5 {
+    position: relative;
+}
+
+.process-flow-card h5::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 2px;
+    background: currentColor;
+    opacity: 0.3;
+}
+
+/* Interactive Elements */
+.btn-outline-secondary:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+}
+
+/* Chart Container Improvements */
+.chart-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.chart-container::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, #667eea, #764ba2, #36b9cc, #1cc88a);
+    border-radius: 17px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.chart-container:hover::before {
+    opacity: 0.1;
+}
+
+/* Responsive Improvements */
+@media (max-width: 768px) {
+    .model-info-cards .card {
+        margin-bottom: 1.5rem;
+    }
+    
+    .process-step-icon {
+        width: 50px !important;
+        height: 50px !important;
+    }
+    
+    .feature-list .d-flex:hover {
+        transform: none;
+    }
+}
+
+/* POS Tagging specific styles */
+.pos-token {
+    display: inline-block;
+    margin: 2px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+}
+
+.pos-token:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* Named Entity Recognition specific styles */
+.entity-token {
+    display: inline-block;
+    margin: 2px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.entity-token:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* Sentiment Analysis specific styles */
+.sentiment-gauge {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+}
+
+.sentiment-score {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.sentiment-label {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+/* Text Generation specific styles */
+.generated-text {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border-left: 4px solid var(--primary-color);
+    padding: 15px;
+    margin: 10px 0;
+    border-radius: 8px;
+    font-family: 'Georgia', serif;
+    line-height: 1.6;
+}
+
+.prompt-text {
+    color: #666;
+    font-style: italic;
+}
+
+.generated-content {
+    color: var(--primary-color);
+    font-weight: 500;
+}
+
+/* Translation specific styles */
+.translation-pair {
+    display: flex;
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.source-text, .target-text {
+    flex: 1;
+    padding: 15px;
+    border-radius: 8px;
+    border: 2px solid #e0e0e0;
+}
+
+.source-text {
+    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
+    border-color: var(--primary-color);
+}
+
+.target-text {
+    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
+    border-color: var(--success-color);
+}
+
+.language-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.8em;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+/* Classification specific styles */
+.classification-result {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    transition: all 0.2s ease;
+}
+
+.classification-result:hover {
+    transform: translateX(5px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.classification-label {
+    flex: 1;
+    font-weight: 600;
+}
+
+.classification-score {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-left: 10px;
+}
+
+/* Vector Embeddings specific styles */
+.embedding-visualization {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.similarity-matrix {
+    display: grid;
+    gap: 2px;
+    margin: 20px 0;
+}
+
+.similarity-cell {
+    padding: 10px;
+    text-align: center;
+    border-radius: 4px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.similarity-cell:hover {
+    transform: scale(1.1);
+    z-index: 10;
+    position: relative;
+}
+
+/* Search results specific styles */
+.search-result {
+    padding: 15px;
+    margin: 10px 0;
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-color);
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    transition: all 0.2s ease;
+}
+
+.search-result:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.search-score {
+    font-size: 0.9em;
+    color: var(--primary-color);
+    font-weight: 600;
+    margin-top: 5px;
+}
+
+/* Chart containers */
+.chart-wrapper {
+    position: relative;
+    margin: 20px 0;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+[data-theme="dark"] .chart-wrapper {
+    background: #2d2d2d;
+}
+
+/* Loading animations */
+.loading-dots {
+    display: inline-block;
+}
+
+.loading-dots::after {
+    content: '';
+    animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+    0%, 20% { content: ''; }
+    40% { content: '.'; }
+    60% { content: '..'; }
+    80%, 100% { content: '...'; }
+}
+
+/* Pulse animation for important elements */
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* Slide animations */
+.slide-in-left {
+    animation: slideInLeft 0.5s ease-out;
+}
+
+.slide-in-right {
+    animation: slideInRight 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+    from { transform: translateX(-100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+/* Bounce animation for success states */
+.bounce-in {
+    animation: bounceIn 0.6s ease-out;
+}
+
+@keyframes bounceIn {
+    0% { transform: scale(0.3); opacity: 0; }
+    50% { transform: scale(1.05); }
+    70% { transform: scale(0.9); }
+    100% { transform: scale(1); opacity: 1; }
+}
+
+/* Shake animation for error states */
+.shake {
+    animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+    20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+/* Gradient text effects */
+.gradient-text {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--success-color) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+}
+
+/* Custom scrollbar for specific containers */
+.custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary-color) #f1f1f1;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-hover);
+}
+
+/* Responsive design enhancements */
+@media (max-width: 576px) {
+    .translation-pair {
+        flex-direction: column;
+    }
+    
+    .classification-result {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .classification-score {
+        margin-left: 0;
+        margin-top: 5px;
+    }
+    
+    .sentiment-gauge {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .sentiment-score {
+        font-size: 1.5rem;
+    }
+}
+
+/* Print styles */
+@media print {
+    .navbar, .btn, .alert {
+        display: none !important;
+    }
+    
+    .card {
+        border: 1px solid #000 !important;
+        box-shadow: none !important;
+    }
+    
+    body {
+        background: white !important;
+        color: black !important;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    :root {
+        --primary-color: #0000FF;
+        --success-color: #008000;
+        --warning-color: #FF8000;
+        --danger-color: #FF0000;
+    }
+    
+    .card {
+        border: 2px solid #000;
+    }
+    
+    .btn {
+        border: 2px solid #000;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Focus styles for accessibility */
+.btn:focus,
+.form-control:focus,
+.form-select:focus {
+    outline: 3px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* Skip link for screen readers */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: var(--primary-color);
+    color: white;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 4px;
+    z-index: 1000;
+}
+
+.skip-link:focus {
+    top: 6px;
+}
+
+/* ARIA live region for dynamic content */
+.aria-live {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+/* Prevent horizontal scrolling in text containers */
+.card-body {
+    overflow-x: hidden;
+    max-width: 100%;
+}
+
+.text-content {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    font-size: 14px;
+    color: #333;
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    border: 1px solid #e9ecef;
+    margin-bottom: 15px;
+}
+
+[data-theme="dark"] .text-content {
+    background-color: #2d2d2d !important;
+    color: #e0e0e0 !important;
+    border-color: #555 !important;
+}
+
+/* Responsive text containers */
+.text-container {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+@media (max-width: 768px) {
+    .text-content {
+        font-size: 13px;
+        padding: 10px !important;
+        max-height: 150px !important;
+    }
+}
+
+/* Additional text wrapping rules */
+* {
+    box-sizing: border-box;
+}
+
+.container, .container-fluid {
+    overflow-x: hidden;
+    max-width: 100%;
+}
+
+/* Ensure all text elements wrap properly */
+p, div, span, pre, code {
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+}
+
+/* Enhanced table styling for multi-column layouts */
+.table-responsive {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.table th {
+    font-weight: 600;
+    font-size: 0.9em;
+    padding: 12px 8px;
+    text-align: center !important;
+    vertical-align: middle !important;
+    background-color: var(--primary-color) !important;
+    color: white !important;
+    border: none !important;
+}
+
+.table td {
+    padding: 10px 8px;
+    text-align: center !important;
+    vertical-align: middle !important;
+    font-size: 0.9em;
+    border: 1px solid #dee2e6;
+}
+
+.table td code {
+    background-color: #f8f9fa;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.85em;
+    color: #e83e8c;
+    display: inline-block;
+}
+
+[data-theme="dark"] .table td code {
+    background-color: #2d2d2d;
+    color: #ff6b9d;
+}
+
+.table td .badge {
+    font-size: 0.8em;
+    padding: 4px 8px;
+    display: inline-block;
+}
+
+/* Fix table header alignment */
+.table thead th {
+    text-align: center !important;
+    vertical-align: middle !important;
+    white-space: nowrap;
+}
+
+/* Ensure proper table structure */
+.table {
+    margin-bottom: 0;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.table tbody tr:nth-of-type(odd) {
+    background-color: rgba(0,0,0,.02);
+}
+
+.table tbody tr:hover {
+    background-color: rgba(0,0,0,.075);
+}
+
+/* Responsive table adjustments */
+@media (max-width: 768px) {
+    .table th, .table td {
+        padding: 8px 4px;
+        font-size: 0.8em;
+    }
+    
+    .table td code {
+        font-size: 0.75em;
+        padding: 1px 4px;
+    }
+    
+    .table td .badge {
+        font-size: 0.7em;
+        padding: 2px 6px;
+    }
+}
+
+/* Additional table header fixes */
+.table-primary th {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+    text-align: center !important;
+    vertical-align: middle !important;
+    font-weight: 600 !important;
+    border: none !important;
+    padding: 12px 8px !important;
+}
+
+/* Override Bootstrap table styles */
+.table thead th {
+    border-bottom: 2px solid #dee2e6 !important;
+    text-align: center !important;
+    vertical-align: middle !important;
+}
+
+/* Ensure consistent column widths */
+.table th[style*="width"] {
+    text-align: center !important;
+}
+
+/* Fix any alignment issues */
+.table td, .table th {
+    text-align: center !important;
+    vertical-align: middle !important;
+}
+
+/* ===== VERTICAL SPACING AND TITLE HIERARCHY ===== */
+
+/* Main section headers */
+.task-subheader {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--primary-color);
+    position: relative;
+}
+
+.task-subheader:first-child {
+    margin-top: 1rem;
+}
+
+.task-subheader::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 50px;
+    height: 2px;
+    background-color: var(--accent-color);
+}
+
+/* Subsection headers */
+h4 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    padding-left: 0.5rem;
+    border-left: 4px solid var(--primary-color);
+    background-color: #f8f9fa;
+    padding: 0.75rem 1rem;
+    border-radius: 0 5px 5px 0;
+}
+
+[data-theme="dark"] h4 {
+    color: #e0e0e0;
+    background-color: #2d2d2d;
+    border-left-color: var(--primary-color);
+}
+
+/* Card spacing */
+.card {
+    margin-bottom: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    border: none;
+    border-radius: 8px;
+}
+
+.card-header {
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 8px 8px 0 0 !important;
+    padding: 1rem 1.25rem;
+    border-bottom: none;
+}
+
+.card-header h5 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.card-body {
+    padding: 1.25rem;
+    background-color: white;
+    border-radius: 0 0 8px 8px;
+}
+
+[data-theme="dark"] .card-body {
+    background-color: #2d2d2d;
+}
+
+/* Row spacing */
+.row {
+    margin-bottom: 1.5rem;
+}
+
+.row:last-child {
+    margin-bottom: 0;
+}
+
+/* Alert boxes spacing */
+.alert {
+    margin: 1.5rem 0;
+    padding: 1rem 1.25rem;
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.alert h4 {
+    margin-top: 0;
+    margin-bottom: 0.75rem;
+    font-size: 1.1rem;
+}
+
+.alert ul {
+    margin-bottom: 0;
+}
+
+.alert li {
+    margin-bottom: 0.5rem;
+}
+
+/* Statistics boxes */
+.stats-container {
+    margin: 1.5rem 0;
+}
+
+.stats-container .col-md-4 {
+    margin-bottom: 1rem;
+}
+
+/* Base stats card layout */
+.stats-container .card {
+    text-align: center;
+}
+
+/* Dark-mode stats styling (gradient + white text) */
+[data-theme="dark"] .stats-container .card {
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
+    color: #fff !important;
+    border: none !important;
+}
+
+.stats-container .card-body {
+    background: transparent !important;
+    padding: 1.5rem 1rem;
+}
+
+/* Text colors for dark-mode stats */
+[data-theme="dark"] .stats-container .card-body h3,
+[data-theme="dark"] .stats-container .card-body p,
+[data-theme="dark"] .stats-container .card-body h2,
+[data-theme="dark"] .stats-container .card-title {
+    color: #fff !important;
+}
+
+.stats-container .card-body h3 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+.stats-container .card-body p {
+    margin: 0;
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+/* Table spacing */
+.table-responsive {
+    margin: 1rem 0 1.5rem 0;
+}
+
+/* Chart spacing */
+.chart-container {
+    margin: 1.5rem 0;
+    padding: 1rem;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+[data-theme="dark"] .chart-container {
+    background-color: #2d2d2d;
+}
+
+.chart-container img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+
+/* Paragraph spacing */
+p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+p:last-child {
+    margin-bottom: 0;
+}
+
+/* Small text spacing */
+small {
+    margin-top: 0.5rem;
+    display: block;
+    color: #6c757d;
+}
+
+[data-theme="dark"] small {
+    color: #adb5bd;
+}
+
+/* Button spacing */
+.btn {
+    margin: 0.25rem;
+    border-radius: 6px;
+}
+
+/* List spacing */
+ul, ol {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+}
+
+ul li, ol li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+}
+
+/* Collapsible content spacing */
+.collapse {
+    margin-top: 0.5rem;
+}
+
+/* Section dividers */
+.section-divider {
+    height: 2px;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--primary-color));
+    margin: 2rem 0;
+    border-radius: 1px;
+}
+
+/* Responsive spacing adjustments */
+@media (max-width: 768px) {
+    .task-subheader {
+        font-size: 1.3rem;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+    }
+    
+    h4 {
+        font-size: 1.1rem;
+        margin-top: 1.25rem;
+        margin-bottom: 0.75rem;
+    }
+    
+    .card {
+        margin-bottom: 1rem;
+    }
+    
+    .alert {
+        margin: 1rem 0;
+    }
+    
+    .stats-container .card-body h3 {
+        font-size: 1.5rem;
+    }
+}
+
+/* Quick Navigation styling (scoped) */
+.quick-nav.card {
+  border: none;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.quick-nav .card-header {
+  background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
+  color: #fff !important;
+  border-radius: 12px 12px 0 0 !important;
+  padding: 0.875rem 1.25rem;
+}
+.quick-nav .card-header h5 { margin: 0; font-weight: 700; letter-spacing: .2px; }
+
+.quick-nav h6 {
+  color: #2c3e50;
+  font-weight: 700;
+  margin: .75rem 0 .5rem 0;
+  display: flex; align-items: center; gap: .5rem;
+}
+
+.quick-nav .btn {
+  border-width: 2px;
+  font-weight: 600;
+  border-radius: 28px;
+  padding: 10px 16px;
+  display: inline-flex; align-items: center; gap: .35rem;
+  transition: all .15s ease;
+}
+.quick-nav .btn i { margin: 0; font-size: .95rem; }
+.quick-nav .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,.08); }
+
+/* subtle background so outline buttons look like chips */
+.quick-nav .btn-outline-primary,
+.quick-nav .btn-outline-success,
+.quick-nav .btn-outline-info { background-color: #f8f9fa; }
+
+/* layout tweaks */
+.quick-nav .row { row-gap: .75rem; }
+
+@media (max-width: 768px) {
+  .quick-nav .btn { width: 100%; justify-content: center; }
+}
+
+/* WORD FREQUENCY OVERLAP FIX - Force vertical stacking */
+.wf-chart-section {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-bottom: 4rem !important;
+    overflow: hidden !important;
+    page-break-inside: avoid !important;
+}
+
+.wf-table-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-top: 4rem !important;
+    overflow: visible !important;
+    page-break-inside: avoid !important;
+}
+
+/* Force chart container to be completely separate */
+.wf-chart-section .chart-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin: 0 !important;
+}
+
+.chart-container { 
+    display: block !important; 
+    width: 100% !important; 
+    height: auto !important;
+    min-height: auto !important;
+    max-height: none !important;
+    margin: 1.5rem 0 !important; 
+    position: static !important; 
+    z-index: auto !important; 
+    clear: both !important;
+    overflow: visible !important;
+}
+
+.chart-container img, .chart-container canvas, .chart-container svg { 
+    display: block !important; 
+    width: 100% !important;
+    max-width: 100% !important; 
+    height: auto !important;
+    margin: 0 auto !important;
+}
+
+/* Kill all floats in word frequency section */
+.wf-table-container .table-responsive {
+    float: none !important;
+    clear: both !important;
+    display: block !important;
+    width: 100% !important;
+    position: static !important;
+}
+
+/* POS DISTRIBUTION OVERLAP FIX - Force vertical stacking */
+.pos-chart-section {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-bottom: 3rem !important;
+    overflow: hidden !important;
+    page-break-inside: avoid !important;
+}
+
+.pos-table-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-top: 3rem !important;
+    overflow: visible !important;
+    page-break-inside: avoid !important;
+}
+
+/* Force POS chart container to be completely separate */
+.pos-chart-section .chart-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin: 0 !important;
+}
+
+/* ENTITY DISTRIBUTION OVERLAP FIX - Force vertical stacking */
+.entity-chart-section {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-bottom: 3rem !important;
+    overflow: hidden !important;
+    page-break-inside: avoid !important;
+}
+
+.entity-table-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-top: 3rem !important;
+    overflow: visible !important;
+    page-break-inside: avoid !important;
+}
+
+/* Force entity chart container to be completely separate */
+.entity-chart-section .chart-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin: 0 !important;
+}
+
+/* Entity Badge Styling for Better Visibility */
+.entity-badge {
+    display: inline-block !important;
+    padding: 0.5rem 0.75rem !important;
+    margin: 0.2rem !important;
+    border-radius: 8px !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
+    border: 2px solid #ffffff !important;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
+    transition: all 0.2s ease !important;
+    cursor: help !important;
+}
+
+.entity-badge:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
+}
+
+/* Ensure entity text container has clean white background */
+.entity-text-container {
+    background-color: #ffffff !important;
+    padding: 1.5rem !important;
+    border-radius: 8px !important;
+    border: 1px solid #dee2e6 !important;
+    line-height: 2 !important;
+    margin: 1rem 0 !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
+}
+
+/* POS Legend Button Styling */
+.pos-legend-buttons {
+    margin: 1rem 0;
+}
+
+.pos-legend-buttons .btn {
+    font-weight: 700 !important;
+    border-radius: 8px !important;
+    padding: 0.875rem 2.5rem !important;
+    margin: 0 0.5rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
+    font-size: 1.1rem !important;
+}
+
+/* Active button - white background with dark text for high contrast */
+.pos-legend-buttons .btn.active {
+    background-color: #ffffff !important;
+    color: #1a365d !important;
+    border: 3px solid #ffffff !important;
+    transform: none;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
+}
+
+/* Inactive button - dark background with white text */
+.pos-legend-buttons .btn:not(.active) {
+    background-color: rgba(0,0,0,0.3) !important;
+    color: #ffffff !important;
+    border: 3px solid rgba(255,255,255,0.5) !important;
+}
+
+.pos-legend-buttons .btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
+}
+
+/* Ensure text is always visible */
+.pos-legend-buttons .btn.active:hover {
+    color: #1a365d !important;
+    background-color: #f8f9fa !important;
+}
+
+.pos-legend-buttons .btn:not(.active):hover {
+    background-color: rgba(0,0,0,0.5) !important;
+    color: #ffffff !important;
+    border-color: #ffffff !important;
+}
+
+.pos-tags-section {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* SENTIMENT ANALYSIS METHOD CARDS - Modern Design */
+.sentiment-method-card {
+    border: none !important;
+    border-radius: 16px !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+    overflow: hidden !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    position: relative !important;
+}
+
+.sentiment-method-card:hover {
+    transform: translateY(-8px) !important;
+    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
+}
+
+/* Method Header with Gradients */
+.method-header {
+    padding: 2rem 1.5rem 1rem !important;
+    text-align: center !important;
+    position: relative !important;
+    color: white !important;
+}
+
+.vader-card .method-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.distilbert-card .method-header {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
+}
+
+.roberta-card .method-header {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
+}
+
+.method-icon {
+    width: 80px !important;
+    height: 80px !important;
+    border-radius: 50% !important;
+    background: rgba(255,255,255,0.2) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 auto 1rem !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+.method-icon i {
+    font-size: 2.5rem !important;
+    color: white !important;
+}
+
+.method-title {
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+    margin: 0 0 0.5rem 0 !important;
+    color: white !important;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
+}
+
+.method-subtitle {
+    font-size: 0.9rem !important;
+    opacity: 1 !important;
+    margin: 0 !important;
+    font-weight: 500 !important;
+    color: white !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
+}
+
+/* Method Body */
+.method-body {
+    padding: 1.5rem !important;
+    background: white !important;
+    color: #333333 !important;
+}
+
+.method-description {
+    font-size: 0.95rem !important;
+    color: #6c757d !important;
+    margin-bottom: 1.5rem !important;
+    line-height: 1.6 !important;
+}
+
+.method-features {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0.75rem !important;
+}
+
+.feature-item {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.75rem !important;
+}
+
+.feature-item i {
+    color: #28a745 !important;
+    font-size: 0.9rem !important;
+    flex-shrink: 0 !important;
+}
+
+.feature-item span {
+    font-size: 0.9rem !important;
+    color: #495057 !important;
+    font-weight: 500 !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .method-header {
+        padding: 1.5rem 1rem 0.75rem !important;
+    }
+    
+    .method-icon {
+        width: 60px !important;
+        height: 60px !important;
+    }
+    
+    .method-icon i {
+        font-size: 2rem !important;
+    }
+    
+    .method-title {
+        font-size: 1.25rem !important;
+    }
+}
+
+/* SENTIMENT ANALYSIS OVERLAP FIX - Force vertical stacking */
+.emotion-chart-section,
+.sentence-chart-section {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-bottom: 3rem !important;
+    overflow: hidden !important;
+    page-break-inside: avoid !important;
+}
+
+.emotion-result-container,
+.sentence-analysis-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin-top: 3rem !important;
+    overflow: visible !important;
+    page-break-inside: avoid !important;
+}
+
+/* Force sentiment chart containers to be completely separate */
+.emotion-chart-section .chart-container,
+.sentence-chart-section .chart-container {
+    display: block !important;
+    width: 100% !important;
+    float: none !important;
+    clear: both !important;
+    position: static !important;
+    margin: 0 !important;
+}
+
+/* Stats cards - high contrast in light mode */
+.stats-card {
+  background: #eef5ff !important;          /* light blue background for readability */
+  border: 1px solid #d6e4ff !important;
+  color: #0b3d91 !important;
+  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
+  min-height: 110px;
+}
+/* Force dark text for all children in light mode */
+.stats-card *, .stats-card .card-body *, .stats-card .card-body {
+  color: #0b3d91 !important;
+}
+.stats-card .card-body { background: transparent !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.stats-card h3 { font-size: 2rem !important; margin: 0 0 .25rem 0 !important; }
+.stats-card p, .stats-card .card-title { font-weight: 700 !important; margin: 0 !important; opacity: 1; }
+
+/* Dark mode variant keeps white text on gradient */
+[data-theme="dark"] .stats-card {
+  background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
+  border: none !important;
+  color: #fff !important;
+}
+[data-theme="dark"] .stats-card *, [data-theme="dark"] .stats-card .card-body * { color: #fff !important; }
+
+/* Quick Navigation button color fixes */
+.quick-nav .btn-outline-primary { color: #0d6efd; border-color: #0d6efd; }
+.quick-nav .btn-outline-primary:hover,
+.quick-nav .btn-outline-primary:focus,
+.quick-nav .btn-outline-primary:active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; box-shadow: none; }
+
+.quick-nav .btn-outline-success { color: #198754; border-color: #198754; }
+.quick-nav .btn-outline-success:hover,
+.quick-nav .btn-outline-success:focus,
+.quick-nav .btn-outline-success:active { color: #fff; background-color: #198754; border-color: #198754; box-shadow: none; }
+
+.quick-nav .btn-outline-info { color: #0dcaf0; border-color: #0dcaf0; }
+.quick-nav .btn-outline-info:hover,
+.quick-nav .btn-outline-info:focus,
+.quick-nav .btn-outline-info:active { color: #0b2a2f; background-color: #0dcaf0; border-color: #0dcaf0; box-shadow: none; }
+
+/* Ensure readable default text color on chip background */
+.quick-nav .btn { color: inherit; }
+
+/* Quick Nav title color fixes */
+.quick-nav .card-header {
+  background: transparent !important; /* keep card bg */
+  color: #0d6efd !important;          /* visible in light mode */
+  border-bottom: 2px solid rgba(13,110,253,.15) !important;
+}
+
+[data-theme="dark"] .quick-nav .card-header {
+  color: #ffffff !important;
+  border-bottom: 2px solid rgba(255,255,255,.2) !important;
+}
+
+/* Dark mode quick navigation fixes */
+[data-theme="dark"] .quick-nav .card {
+  background-color: rgba(255,255,255,0.1) !important;
+  border: 1px solid rgba(255,255,255,0.2) !important;
+}
+
+[data-theme="dark"] .quick-nav .btn-outline-primary {
+  color: #6ea8fe !important;
+  border-color: #6ea8fe !important;
+  background-color: rgba(110,168,254,0.1) !important;
+}
+
+[data-theme="dark"] .quick-nav .btn-outline-primary:hover,
+[data-theme="dark"] .quick-nav .btn-outline-primary:focus,
+[data-theme="dark"] .quick-nav .btn-outline-primary:active {
+  color: #000 !important;
+  background-color: #6ea8fe !important;
+  border-color: #6ea8fe !important;
+}
+
+[data-theme="dark"] .quick-nav .btn-outline-success {
+  color: #75b798 !important;
+  border-color: #75b798 !important;
+  background-color: rgba(117,183,152,0.1) !important;
+}
+
+[data-theme="dark"] .quick-nav .btn-outline-success:hover,
+[data-theme="dark"] .quick-nav .btn-outline-success:focus,
+[data-theme="dark"] .quick-nav .btn-outline-success:active {
+  color: #000 !important;
+  background-color: #75b798 !important;
+  border-color: #75b798 !important;
+}
+
+[data-theme="dark"] .quick-nav .btn-outline-info {
+  color: #6edff6 !important;
+  border-color: #6edff6 !important;
+  background-color: rgba(110,223,246,0.1) !important;
+}
+
+[data-theme="dark"] .quick-nav .btn-outline-info:hover,
+[data-theme="dark"] .quick-nav .btn-outline-info:focus,
+[data-theme="dark"] .quick-nav .btn-outline-info:active {
+  color: #000 !important;
+  background-color: #6edff6 !important;
+  border-color: #6edff6 !important;
+}
+

static/css/style.css

@@ -0,0 +1,762 @@
+/* Custom CSS for NLP Ultimate Tutorial */
+
+:root {
+    --primary-color: #1976D2;
+    --primary-hover: #1565C0;
+    --secondary-color: #424242;
+    --success-color: #4CAF50;
+    --info-color: #2196F3;
+    --warning-color: #FF9800;
+    --danger-color: #F44336;
+    --light-color: #f8f9fa;
+    --dark-color: #212529;
+    --gradient-subtle: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+/* Dark theme variables */
+[data-theme="dark"] {
+    --primary-color: #64B5F6;
+    --primary-hover: #42A5F5;
+    --secondary-color: #e0e0e0;
+    --success-color: #81C784;
+    --info-color: #64B5F6;
+    --warning-color: #FFB74D;
+    --danger-color: #FF8A80;
+    --light-color: #2d2d2d;
+    --dark-color: #e0e0e0;
+    --gradient-subtle: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
+}
+
+/* Body and background */
+body {
+    background: var(--gradient-subtle);
+    transition: all 0.3s ease;
+    overflow-x: hidden;
+    max-width: 100%;
+}
+
+/* Navbar styling */
+.navbar {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 1030 !important;
+}
+
+/* Ensure navbar container spans full width comfortably */
+.navbar .container {
+    max-width: 100% !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+}
+
+/* Dropdown menus should overlay the page and scroll internally if too tall */
+.navbar-nav .dropdown-menu {
+    z-index: 2000 !important; /* stay above navbar */
+    max-height: 70vh !important; /* avoid pushing page */
+    overflow-y: auto !important; /* scroll inside menu when needed */
+    margin-top: 0.5rem !important; /* small gap below trigger */
+    border-radius: 12px !important;
+    box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
+}
+
+/* Navbar dropdown visual style */
+.navbar-nav .dropdown-menu {
+    background: #ffffff !important;
+    border: 1px solid rgba(0,0,0,0.08) !important;
+    border-radius: 12px !important;
+    padding: 0.5rem 0 !important;
+    box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important;
+    min-width: 220px !important;
+}
+
+.navbar-nav .dropdown-item {
+    padding: 0.6rem 1rem !important;
+    font-weight: 500 !important;
+    color: #2b2b2b !important;
+    border-radius: 8px !important;
+    margin: 0.1rem 0.5rem !important;
+}
+
+.navbar-nav .dropdown-item:hover,
+.navbar-nav .dropdown-item:focus {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
+    color: #ffffff !important;
+}
+
+/* Dark mode dropdown contrast */
+[data-theme="dark"] .navbar-nav .dropdown-menu {
+    background: #1f1f1f !important;
+    border-color: rgba(255,255,255,0.12) !important;
+}
+
+[data-theme="dark"] .navbar-nav .dropdown-item { color: #e0e0e0 !important; }
+[data-theme="dark"] .navbar-nav .dropdown-item:hover, [data-theme="dark"] .navbar-nav .dropdown-item:focus { color: #ffffff !important; }
+
+/* Mobile: let dropdowns be part of the flow inside the collapse */
+@media (max-width: 991.98px) {
+    .navbar-nav .dropdown-menu {
+        position: static !important;
+        max-height: none !important;
+        overflow: visible !important;
+        width: 100% !important;
+        margin: 0.25rem 0 !important;
+        box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
+    }
+    .navbar-collapse {
+        max-height: 80vh !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        padding-bottom: 1rem !important;
+    }
+}
+
+/* Anchor dropdowns directly under their toggles (desktop) */
+.navbar-nav .dropdown { position: relative !important; }
+.navbar-nav .dropdown-menu {
+    position: absolute !important;
+    top: 100% !important;
+    left: 0 !important;
+    right: auto !important;
+    transform: none !important;
+}
+
+/ * Respect Bootstrap end-aligned menus */
+.navbar-nav .dropdown-menu-end { left: auto !important; right: 0 !important; }
+
+/* Constrain dropdown height so page doesn't vertically scroll when open */
+.navbar-nav .dropdown-menu { max-height: 70vh !important; overflow-y: auto !important; }
+
+.navbar-nav .dropdown-menu { overflow-x: hidden !important; }
+
+.navbar-brand {
+    font-weight: 600;
+    font-size: 1.5rem;
+}
+
+/* Modern Footer Styling */
+.modern-footer {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    color: #ffffff;
+    padding: 3rem 0 2rem;
+    margin-top: 4rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.modern-footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+}
+
+.footer-brand h5 {
+    color: #64B5F6;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    font-size: 1.4rem;
+}
+
+.footer-description {
+    color: rgba(255,255,255,0.8);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin: 0;
+}
+
+.footer-credit {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.credit-badge {
+    background: rgba(255,255,255,0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
+.credit-badge:hover {
+    background: rgba(255,255,255,0.15);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+}
+
+.credit-text {
+    display: block;
+    font-size: 0.85rem;
+    color: rgba(255,255,255,0.8);
+    margin-bottom: 0.25rem;
+}
+
+.developer-name {
+    display: block;
+    font-size: 1.1rem;
+    color: #64B5F6;
+    font-weight: 700;
+}
+
+.social-links {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255,255,255,0.2);
+    background: rgba(255,255,255,0.05);
+    color: #ffffff;
+    font-weight: 500;
+}
+
+.social-link:hover {
+    color: #ffffff;
+    text-decoration: none;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+.github-link:hover {
+    background: #333333;
+    border-color: #333333;
+}
+
+.linkedin-link:hover {
+    background: #0077B5;
+    border-color: #0077B5;
+}
+
+.social-link i {
+    font-size: 1.2rem;
+}
+
+/* Dark mode footer adjustments */
+[data-theme="dark"] .modern-footer {
+    background: #0d1117 !important; /* solid dark, no glassy gradient */
+}
+
+[data-theme="dark"] .modern-footer::before {
+    background: transparent !important; /* remove glossy top line */
+}
+
+[data-theme="dark"] .credit-badge {
+    background: rgba(255,255,255,0.08);
+    border-color: rgba(255,255,255,0.15);
+}
+
+[data-theme="dark"] .social-link {
+    background: rgba(255,255,255,0.03);
+    border-color: rgba(255,255,255,0.15);
+}
+
+/* Responsive footer */
+@media (max-width: 768px) {
+    .modern-footer {
+        padding: 2rem 0 1.5rem;
+        text-align: center;
+    }
+    
+    .social-links {
+        justify-content: center;
+        margin-top: 1rem;
+    }
+    
+    .footer-credit {
+        margin: 1.5rem 0;
+    }
+}
+
+/* Card styling */
+.card {
+    border: none;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    border-radius: 10px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
+}
+
+.card-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    color: white;
+    border-radius: 10px 10px 0 0 !important;
+    border: none;
+}
+
+/* Button styling */
+.btn {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border: none;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+}
+
+.btn-success {
+    background: linear-gradient(135deg, var(--success-color) 0%, #388E3C 100%);
+}
+
+.btn-info {
+    background: linear-gradient(135deg, var(--info-color) 0%, #1976D2 100%);
+}
+
+/* Form styling */
+.form-control, .form-select {
+    border-radius: 8px;
+    border: 2px solid #e0e0e0;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form-control:focus, .form-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
+}
+
+/* Alert styling */
+.alert {
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.alert-info {
+    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
+    color: #1565C0;
+    border-left: 5px solid var(--primary-color);
+}
+
+.alert-warning {
+    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
+    color: #E65100;
+    border-left: 5px solid var(--warning-color);
+}
+
+.alert-success {
+    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
+    color: #2E7D32;
+    border-left: 5px solid var(--success-color);
+}
+
+.alert-danger {
+    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
+    color: #C62828;
+    border-left: 5px solid var(--danger-color);
+}
+
+/* Tab styling */
+.nav-tabs {
+    border-bottom: 2px solid #e0e0e0;
+}
+
+.nav-tabs .nav-link {
+    border: none;
+    border-radius: 8px 8px 0 0;
+    margin-right: 5px;
+    color: var(--secondary-color);
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.nav-tabs .nav-link:hover {
+    border-color: transparent;
+    background-color: rgba(25, 118, 210, 0.1);
+}
+
+.nav-tabs .nav-link.active {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    color: white;
+    border-color: transparent;
+}
+
+/* Statistics cards */
+.card.text-center {
+    background: white;
+    border: 2px solid #e0e0e0;
+}
+
+.card.text-center:hover {
+    border-color: var(--primary-color);
+    transform: scale(1.02);
+}
+
+/* Footer styling */
+footer {
+    background: linear-gradient(135deg, var(--dark-color) 0%, #1a1a1a 100%) !important;
+    margin-top: auto;
+}
+
+/* Loading spinner */
+.spinner-border {
+    color: var(--primary-color);
+}
+
+/* Results container */
+#resultsContainer {
+    min-height: 200px;
+}
+
+/* Dark theme styles */
+[data-theme="dark"] {
+    background: var(--gradient-subtle);
+    color: var(--dark-color);
+}
+
+[data-theme="dark"] .card {
+    background-color: #2d2d2d;
+    color: var(--dark-color);
+}
+
+[data-theme="dark"] .card-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+}
+
+[data-theme="dark"] .form-control,
+[data-theme="dark"] .form-select {
+    background-color: #2d2d2d;
+    color: var(--dark-color);
+    border-color: #555;
+}
+
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus {
+    background-color: #2d2d2d;
+    color: var(--dark-color);
+    border-color: var(--primary-color);
+}
+
+[data-theme="dark"] .nav-tabs {
+    border-bottom-color: #555;
+}
+
+[data-theme="dark"] .nav-tabs .nav-link {
+    color: var(--dark-color);
+}
+
+[data-theme="dark"] .nav-tabs .nav-link:hover {
+    background-color: rgba(100, 181, 246, 0.1);
+}
+
+[data-theme="dark"] .card.text-center {
+    background-color: #2d2d2d;
+    border-color: #555;
+    color: var(--dark-color);
+}
+
+[data-theme="dark"] .alert-info {
+    background: linear-gradient(135deg, #1a3c5a 0%, #0d2a3f 100%);
+    color: var(--primary-color);
+}
+
+[data-theme="dark"] .alert-warning {
+    background: linear-gradient(135deg, #3e2e00 0%, #2a1f00 100%);
+    color: var(--warning-color);
+}
+
+[data-theme="dark"] .alert-success {
+    background: linear-gradient(135deg, #1b3525 0%, #0f1f15 100%);
+    color: var(--success-color);
+}
+
+[data-theme="dark"] .alert-danger {
+    background: linear-gradient(135deg, #4A1515 0%, #2a0a0a 100%);
+    color: var(--danger-color);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .container-fluid {
+        padding: 10px;
+    }
+    
+    .card {
+        margin-bottom: 15px;
+    }
+    
+    .btn {
+        margin-bottom: 10px;
+    }
+    
+    .display-4 {
+        font-size: 2rem;
+    }
+    
+    .lead {
+        font-size: 1rem;
+    }
+}
+
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-in {
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-hover);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-track {
+    background: #2d2d2d;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+}
+
+/* Table styling */
+.table {
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.table thead th {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    color: white;
+    border: none;
+    font-weight: 600;
+}
+
+.table tbody tr:hover {
+    background-color: rgba(25, 118, 210, 0.1);
+}
+
+[data-theme="dark"] .table {
+    color: var(--dark-color);
+}
+
+[data-theme="dark"] .table tbody tr:hover {
+    background-color: rgba(100, 181, 246, 0.1);
+}
+
+/* Chart container */
+.chart-container {
+    position: relative;
+    height: 400px;
+    margin: 20px 0;
+}
+
+/* Code blocks */
+pre {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 15px;
+    overflow-x: auto;
+}
+
+[data-theme="dark"] pre {
+    background-color: #2d2d2d;
+    border-color: #555;
+    color: var(--dark-color);
+}
+
+/* Badge styling */
+.badge {
+    font-size: 0.8em;
+    padding: 0.5em 0.75em;
+    border-radius: 6px;
+}
+
+/* Progress bar */
+.progress {
+    height: 8px;
+    border-radius: 4px;
+    background-color: #e9ecef;
+}
+
+.progress-bar {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    border-radius: 4px;
+}
+
+[data-theme="dark"] .progress {
+    background-color: #555;
+}
+
+/* Tooltip styling */
+.tooltip {
+    font-size: 0.875rem;
+}
+
+.tooltip-inner {
+    background-color: var(--dark-color);
+    border-radius: 6px;
+}
+
+/* Modal styling */
+.modal-content {
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.modal-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    color: white;
+    border-radius: 10px 10px 0 0;
+}
+
+[data-theme="dark"] .modal-content {
+    background-color: #2d2d2d;
+    color: var(--dark-color);
+}
+
+/* Utility classes */
+.text-gradient {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.shadow-custom {
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+.border-gradient {
+    border: 2px solid;
+    border-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) 1;
+}
+
+/***** Global horizontal scroll guards *****/
+html, body { overflow-x: hidden !important; max-width: 100% !important; }
+.container-fluid, .container { overflow-x: hidden !important; max-width: 100% !important; }
+
+/* Reset dropdown positioning to Bootstrap defaults */
+.navbar-nav .dropdown { position: static !important; }
+.navbar-nav .dropdown-menu { position: absolute !important; top: auto !important; left: auto !important; right: auto !important; }
+
+/* Cap dropdown width to viewport and allow wrapping */
+.navbar-nav .dropdown-menu { max-width: calc(100vw - 2rem) !important; overflow-wrap: anywhere; }
+
+/* Ensure quick-nav and badges shadows don't trigger scroll */
+.quick-nav, .entity-text-container, .card { overflow: visible !important; }
+
+/* --- Dark mode global text legibility --- */
+[data-theme="dark"] body,
+[data-theme="dark"] .container,
+[data-theme="dark"] .container-fluid {
+    color: #e6e6e6 !important;
+}
+
+/* Links in dark mode */
+[data-theme="dark"] a { color: #82b1ff !important; }
+[data-theme="dark"] a:hover { color: #b3c8ff !important; }
+
+/* Cards */
+[data-theme="dark"] .card { background-color: #1f1f1f !important; color: #e8e8e8 !important; border-color: rgba(255,255,255,0.08) !important; }
+[data-theme="dark"] .card-header { background-color: #242424 !important; color: #e8e8e8 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
+[data-theme="dark"] .card .text-muted { color: #b0b0b0 !important; }
+
+/* Alerts */
+[data-theme="dark"] .alert { background-color: #262626 !important; color: #f0f0f0 !important; border-color: rgba(255,255,255,0.12) !important; }
+[data-theme="dark"] .alert-info { background-color: rgba(33,150,243,0.12) !important; color: #dbe9ff !important; border-color: rgba(33,150,243,0.35) !important; }
+[data-theme="dark"] .alert-warning { background-color: rgba(255,193,7,0.12) !important; color: #ffe6a3 !important; border-color: rgba(255,193,7,0.35) !important; }
+
+/* Forms */
+[data-theme="dark"] .form-control,
+[data-theme="dark"] .form-select,
+[data-theme="dark"] textarea.form-control {
+    background-color: #1e1e1e !important;
+    color: #f0f0f0 !important;
+    border-color: rgba(255,255,255,0.15) !important;
+}
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus { box-shadow: 0 0 0 0.25rem rgba(100,181,246,0.25) !important; border-color: #64B5F6 !important; }
+[data-theme="dark"] ::placeholder { color: #b8b8b8 !important; opacity: 1 !important; }
+
+/* Tables */
+[data-theme="dark"] .table { color: #e6e6e6 !important; }
+[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd) { --bs-table-accent-bg: rgba(255,255,255,0.04) !important; color: #e6e6e6 !important; }
+[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.06) !important; }
+
+/* Badges and small chips */
+[data-theme="dark"] .badge { filter: brightness(1.05) contrast(1.05); }
+
+/* Home route: improve dark mode contrast for CHOOSE AN OPERATION header */
+[data-theme="dark"] .card-header.bg-primary,
+[data-theme="dark"] .card-header.bg-primary * {
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] .card-header.bg-primary { filter: brightness(1.05) contrast(1.1); }
+
+/* Dark mode navbar text visibility */
+[data-theme="dark"] .navbar .navbar-brand,
+[data-theme="dark"] .navbar .nav-link,
+[data-theme="dark"] .navbar .dropdown-toggle,
+[data-theme="dark"] .navbar .navbar-toggler-icon::after {
+    color: #ffffff !important;
+}
+
+/* Strengthen gradient navbar contrast in dark mode */
+[data-theme="dark"] .navbar { filter: brightness(1.05) contrast(1.15); }
+
+/* Home: CHOOSE AN OPERATION title contrast in dark mode */
+[data-theme="dark"] .card-header.bg-primary h2,
+[data-theme="dark"] .card-header.bg-primary .mb-0 {
+    color: #ffffff !important;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
+}
+
+/* Dark mode: ensure button text is readable */
+[data-theme="dark"] .btn,
+[data-theme="dark"] .btn * {
+    color: #ffffff !important;
+}
+[data-theme="dark"] .btn { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }

static/js/api.js

@@ -0,0 +1,335 @@
+// API utilities for NLP Ultimate Tutorial Flask Application
+
+class NLPAPI {
+    constructor(baseUrl = '') {
+        this.baseUrl = baseUrl;
+        this.endpoints = {
+            // Text processing endpoints
+            preprocessing: '/api/preprocessing',
+            tokenization: '/api/tokenization',
+            posTagging: '/api/pos-tagging',
+            namedEntity: '/api/named-entity',
+            sentiment: '/api/sentiment',
+            summarization: '/api/summarization',
+            topicAnalysis: '/api/topic-analysis',
+            questionAnswering: '/api/question-answering',
+            textGeneration: '/api/text-generation',
+            translation: '/api/translation',
+            classification: '/api/classification',
+            vectorEmbeddings: '/api/vector-embeddings',
+            
+            // Utility endpoints
+            updateText: '/api/update_current_text',
+            getText: '/api/get_current_text',
+            textStatistics: '/api/text_statistics'
+        };
+    }
+    
+    // Generic API request method
+    async request(endpoint, data = {}, method = 'POST') {
+        try {
+            const response = await fetch(this.baseUrl + endpoint, {
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error(`API request failed for ${endpoint}:`, error);
+            throw error;
+        }
+    }
+    
+    // Text preprocessing
+    async preprocessText(text, options = {}) {
+        return await this.request(this.endpoints.preprocessing, {
+            text: text,
+            ...options
+        });
+    }
+    
+    // Tokenization
+    async tokenizeText(text, tokenizerType = 'word') {
+        return await this.request(this.endpoints.tokenization, {
+            text: text,
+            tokenizer_type: tokenizerType
+        });
+    }
+    
+    // POS Tagging
+    async posTagText(text, taggerType = 'nltk') {
+        return await this.request(this.endpoints.posTagging, {
+            text: text,
+            tagger_type: taggerType
+        });
+    }
+    
+    // Named Entity Recognition
+    async recognizeEntities(text, modelType = 'spacy') {
+        return await this.request(this.endpoints.namedEntity, {
+            text: text,
+            model_type: modelType
+        });
+    }
+    
+    // Sentiment Analysis
+    async analyzeSentiment(text, analyzerType = 'vader') {
+        return await this.request(this.endpoints.sentiment, {
+            text: text,
+            analyzer_type: analyzerType
+        });
+    }
+    
+    // Text Summarization
+    async summarizeText(text, method = 'extractive', options = {}) {
+        return await this.request(this.endpoints.summarization, {
+            text: text,
+            method: method,
+            ...options
+        });
+    }
+    
+    // Topic Analysis
+    async analyzeTopics(text, method = 'lda') {
+        return await this.request(this.endpoints.topicAnalysis, {
+            text: text,
+            method: method
+        });
+    }
+    
+    // Question Answering
+    async answerQuestion(context, question, options = {}) {
+        return await this.request(this.endpoints.questionAnswering, {
+            context: context,
+            question: question,
+            ...options
+        });
+    }
+    
+    // Text Generation
+    async generateText(prompt, options = {}) {
+        return await this.request(this.endpoints.textGeneration, {
+            prompt: prompt,
+            ...options
+        });
+    }
+    
+    // Translation
+    async translateText(text, sourceLang = 'auto', targetLang = 'en') {
+        return await this.request(this.endpoints.translation, {
+            text: text,
+            source_lang: sourceLang,
+            target_lang: targetLang
+        });
+    }
+    
+    // Classification
+    async classifyText(text, scenario = 'sentiment', options = {}) {
+        return await this.request(this.endpoints.classification, {
+            text: text,
+            scenario: scenario,
+            ...options
+        });
+    }
+    
+    // Vector Embeddings
+    async getEmbeddings(text, query = '') {
+        return await this.request(this.endpoints.vectorEmbeddings, {
+            text: text,
+            query: query
+        });
+    }
+    
+    // Utility methods
+    async updateCurrentText(text) {
+        return await this.request(this.endpoints.updateText, { text: text });
+    }
+    
+    async getCurrentText() {
+        return await this.request(this.endpoints.getText, {}, 'GET');
+    }
+    
+    async getTextStatistics(text) {
+        return await this.request(this.endpoints.textStatistics, { text: text });
+    }
+}
+
+// Batch processing utility
+class BatchProcessor {
+    constructor(api) {
+        this.api = api;
+        this.queue = [];
+        this.processing = false;
+    }
+    
+    addTask(task) {
+        this.queue.push(task);
+        if (!this.processing) {
+            this.processQueue();
+        }
+    }
+    
+    async processQueue() {
+        this.processing = true;
+        
+        while (this.queue.length > 0) {
+            const task = this.queue.shift();
+            try {
+                await task.execute();
+                if (task.onSuccess) task.onSuccess(task.result);
+            } catch (error) {
+                if (task.onError) task.onError(error);
+            }
+        }
+        
+        this.processing = false;
+    }
+}
+
+// Caching utility
+class APICache {
+    constructor(maxSize = 100) {
+        this.cache = new Map();
+        this.maxSize = maxSize;
+    }
+    
+    get(key) {
+        if (this.cache.has(key)) {
+            const item = this.cache.get(key);
+            // Move to end (most recently used)
+            this.cache.delete(key);
+            this.cache.set(key, item);
+            return item;
+        }
+        return null;
+    }
+    
+    set(key, value) {
+        if (this.cache.has(key)) {
+            this.cache.delete(key);
+        } else if (this.cache.size >= this.maxSize) {
+            // Remove least recently used item
+            const firstKey = this.cache.keys().next().value;
+            this.cache.delete(firstKey);
+        }
+        this.cache.set(key, value);
+    }
+    
+    clear() {
+        this.cache.clear();
+    }
+}
+
+// Rate limiting utility
+class RateLimiter {
+    constructor(requestsPerMinute = 60) {
+        this.requestsPerMinute = requestsPerMinute;
+        this.requests = [];
+    }
+    
+    async waitIfNeeded() {
+        const now = Date.now();
+        const oneMinuteAgo = now - 60000;
+        
+        // Remove old requests
+        this.requests = this.requests.filter(time => time > oneMinuteAgo);
+        
+        if (this.requests.length >= this.requestsPerMinute) {
+            const oldestRequest = Math.min(...this.requests);
+            const waitTime = 60000 - (now - oldestRequest);
+            if (waitTime > 0) {
+                await new Promise(resolve => setTimeout(resolve, waitTime));
+            }
+        }
+        
+        this.requests.push(now);
+    }
+}
+
+// Error handling utility
+class ErrorHandler {
+    static handle(error, context = '') {
+        console.error(`Error in ${context}:`, error);
+        
+        let message = 'An unexpected error occurred';
+        
+        if (error.name === 'TypeError' && error.message.includes('fetch')) {
+            message = 'Network error: Unable to connect to the server';
+        } else if (error.message.includes('HTTP error')) {
+            message = `Server error: ${error.message}`;
+        } else if (error.message) {
+            message = error.message;
+        }
+        
+        return {
+            success: false,
+            error: message,
+            context: context,
+            timestamp: new Date().toISOString()
+        };
+    }
+    
+    static createErrorResponse(message, context = '') {
+        return {
+            success: false,
+            error: message,
+            context: context,
+            timestamp: new Date().toISOString()
+        };
+    }
+}
+
+// Progress tracking utility
+class ProgressTracker {
+    constructor() {
+        this.progress = 0;
+        this.total = 0;
+        this.callbacks = [];
+    }
+    
+    setTotal(total) {
+        this.total = total;
+        this.progress = 0;
+        this.notifyCallbacks();
+    }
+    
+    increment(amount = 1) {
+        this.progress += amount;
+        this.notifyCallbacks();
+    }
+    
+    setProgress(progress) {
+        this.progress = progress;
+        this.notifyCallbacks();
+    }
+    
+    onProgress(callback) {
+        this.callbacks.push(callback);
+    }
+    
+    notifyCallbacks() {
+        const percentage = this.total > 0 ? (this.progress / this.total) * 100 : 0;
+        this.callbacks.forEach(callback => callback(percentage, this.progress, this.total));
+    }
+    
+    reset() {
+        this.progress = 0;
+        this.total = 0;
+        this.notifyCallbacks();
+    }
+}
+
+// Export utilities
+window.NLPAPI = NLPAPI;
+window.BatchProcessor = BatchProcessor;
+window.APICache = APICache;
+window.RateLimiter = RateLimiter;
+window.ErrorHandler = ErrorHandler;
+window.ProgressTracker = ProgressTracker;

static/js/components.js

@@ -0,0 +1,380 @@
+// Component-specific JavaScript for NLP Ultimate Tutorial
+
+// POS Tagging functionality
+class POSTagging {
+    static highlightTokens(tokens, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = tokens.map(token => {
+            const color = this.getPOSColor(token.pos);
+            return `<span class="pos-token" style="background-color: ${color};" 
+                     title="${token.explanation || ''}">${token.text} 
+                     <small>(${token.pos})</small></span>`;
+        }).join(' ');
+    }
+    
+    static getPOSColor(pos) {
+        const colors = {
+            'NOUN': '#E3F2FD', 'PROPN': '#E3F2FD', 'VERB': '#E8F5E9',
+            'ADJ': '#FFF8E1', 'ADV': '#F3E5F5', 'ADP': '#EFEBE9',
+            'PRON': '#E8EAF6', 'DET': '#E0F7FA', 'CONJ': '#FBE9E7',
+            'NUM': '#FFEBEE', 'PART': '#F1F8E9', 'INTJ': '#FFF3E0',
+            'PUNCT': '#FAFAFA', 'SYM': '#FAFAFA', 'X': '#FAFAFA'
+        };
+        return colors[pos] || '#FAFAFA';
+    }
+}
+
+// Named Entity Recognition functionality
+class NER {
+    static highlightEntities(entities, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = entities.map(entity => {
+            const color = this.getEntityColor(entity.type);
+            return `<span class="entity-token" style="background-color: ${color};" 
+                     title="${entity.explanation || ''}">${entity.text} 
+                     <small>(${entity.type})</small></span>`;
+        }).join(' ');
+    }
+    
+    static getEntityColor(type) {
+        const colors = {
+            'PERSON': '#E3F2FD', 'ORG': '#E8F5E9', 'GPE': '#FFF8E1',
+            'LOC': '#F3E5F5', 'PRODUCT': '#EFEBE9', 'EVENT': '#E8EAF6',
+            'WORK_OF_ART': '#E0F7FA', 'LAW': '#FBE9E7', 'LANGUAGE': '#FFEBEE',
+            'DATE': '#F1F8E9', 'TIME': '#FFF3E0', 'PERCENT': '#FAFAFA',
+            'MONEY': '#FAFAFA', 'QUANTITY': '#FAFAFA', 'ORDINAL': '#FAFAFA',
+            'CARDINAL': '#FAFAFA'
+        };
+        return colors[type] || '#FAFAFA';
+    }
+}
+
+// Sentiment Analysis functionality
+class SentimentAnalysis {
+    static createGauge(score, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        const color = this.getSentimentColor(score);
+        const label = this.getSentimentLabel(score);
+        
+        container.innerHTML = `
+            <div class="sentiment-gauge">
+                <div class="sentiment-score" style="color: ${color};">${score.toFixed(3)}</div>
+                <div class="sentiment-label" style="color: ${color};">${label}</div>
+            </div>
+        `;
+    }
+    
+    static getSentimentColor(score) {
+        if (score > 0.1) return '#4CAF50';
+        if (score < -0.1) return '#F44336';
+        return '#FF9800';
+    }
+    
+    static getSentimentLabel(score) {
+        if (score > 0.1) return 'Positive';
+        if (score < -0.1) return 'Negative';
+        return 'Neutral';
+    }
+}
+
+// Text Generation functionality
+class TextGeneration {
+    static displayGeneratedText(prompt, generated, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = `
+            <div class="generated-text">
+                <span class="prompt-text">${prompt}</span>
+                <span class="generated-content">${generated}</span>
+            </div>
+        `;
+    }
+    
+    static createParameterControls(containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = `
+            <div class="row">
+                <div class="col-md-4">
+                    <label for="temperature" class="form-label">Temperature</label>
+                    <input type="range" class="form-range" id="temperature" min="0.1" max="1.5" value="0.7" step="0.1">
+                    <div class="d-flex justify-content-between">
+                        <small>0.1</small>
+                        <small id="temperature-value">0.7</small>
+                        <small>1.5</small>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label for="top-p" class="form-label">Top-p</label>
+                    <input type="range" class="form-range" id="top-p" min="0.1" max="1.0" value="0.9" step="0.1">
+                    <div class="d-flex justify-content-between">
+                        <small>0.1</small>
+                        <small id="top-p-value">0.9</small>
+                        <small>1.0</small>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <label for="max-length" class="form-label">Max Length</label>
+                    <input type="range" class="form-range" id="max-length" min="30" max="250" value="100" step="10">
+                    <div class="d-flex justify-content-between">
+                        <small>30</small>
+                        <small id="max-length-value">100</small>
+                        <small>250</small>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add event listeners for parameter updates
+        ['temperature', 'top-p', 'max-length'].forEach(param => {
+            const slider = document.getElementById(param);
+            const valueDisplay = document.getElementById(`${param}-value`);
+            if (slider && valueDisplay) {
+                slider.addEventListener('input', () => {
+                    valueDisplay.textContent = slider.value;
+                });
+            }
+        });
+    }
+}
+
+// Translation functionality
+class Translation {
+    static displayTranslationPair(sourceText, targetText, sourceLang, targetLang, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = `
+            <div class="translation-pair">
+                <div class="source-text">
+                    <div class="language-badge" style="background-color: var(--primary-color); color: white;">
+                        ${sourceLang}
+                    </div>
+                    <p>${sourceText}</p>
+                </div>
+                <div class="target-text">
+                    <div class="language-badge" style="background-color: var(--success-color); color: white;">
+                        ${targetLang}
+                    </div>
+                    <p>${targetText}</p>
+                </div>
+            </div>
+        `;
+    }
+    
+    static createLanguageSelector(containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        const languages = [
+            { code: 'en', name: 'English' },
+            { code: 'es', name: 'Spanish' },
+            { code: 'fr', name: 'French' },
+            { code: 'de', name: 'German' },
+            { code: 'ru', name: 'Russian' },
+            { code: 'zh', name: 'Chinese' },
+            { code: 'ar', name: 'Arabic' },
+            { code: 'hi', name: 'Hindi' },
+            { code: 'ja', name: 'Japanese' },
+            { code: 'pt', name: 'Portuguese' },
+            { code: 'it', name: 'Italian' }
+        ];
+        
+        container.innerHTML = `
+            <div class="row">
+                <div class="col-md-6">
+                    <label for="source-lang" class="form-label">Source Language</label>
+                    <select id="source-lang" class="form-select">
+                        <option value="auto">Auto-detect</option>
+                        ${languages.map(lang => `<option value="${lang.code}">${lang.name}</option>`).join('')}
+                    </select>
+                </div>
+                <div class="col-md-6">
+                    <label for="target-lang" class="form-label">Target Language</label>
+                    <select id="target-lang" class="form-select">
+                        ${languages.map(lang => `<option value="${lang.code}" ${lang.code === 'en' ? 'selected' : ''}>${lang.name}</option>`).join('')}
+                    </select>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Classification functionality
+class Classification {
+    static displayResults(results, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = results.map(result => `
+            <div class="classification-result">
+                <div class="classification-label">${result.label}</div>
+                <div class="classification-score" style="color: ${this.getScoreColor(result.score)};">
+                    ${(result.score * 100).toFixed(1)}%
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    static getScoreColor(score) {
+        if (score > 0.7) return '#4CAF50';
+        if (score > 0.4) return '#FF9800';
+        return '#F44336';
+    }
+}
+
+// Vector Embeddings functionality
+class VectorEmbeddings {
+    static displaySearchResults(results, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        container.innerHTML = results.map(result => `
+            <div class="search-result">
+                <div class="result-text">${result.text}</div>
+                <div class="search-score">Similarity: ${(result.score * 100).toFixed(1)}%</div>
+                <div class="progress mt-2" style="height: 8px;">
+                    <div class="progress-bar" role="progressbar" 
+                         style="width: ${result.score * 100}%; background-color: ${this.getScoreColor(result.score)};">
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    static getScoreColor(score) {
+        if (score > 0.7) return '#4CAF50';
+        if (score > 0.4) return '#FF9800';
+        return '#F44336';
+    }
+}
+
+// Chart utilities
+class ChartUtils {
+    static createBarChart(canvasId, data, options = {}) {
+        const ctx = document.getElementById(canvasId);
+        if (!ctx) return null;
+        
+        const defaultOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        };
+        
+        return new Chart(ctx, {
+            type: 'bar',
+            data: data,
+            options: { ...defaultOptions, ...options }
+        });
+    }
+    
+    static createPieChart(canvasId, data, options = {}) {
+        const ctx = document.getElementById(canvasId);
+        if (!ctx) return null;
+        
+        const defaultOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                }
+            }
+        };
+        
+        return new Chart(ctx, {
+            type: 'pie',
+            data: data,
+            options: { ...defaultOptions, ...options }
+        });
+    }
+    
+    static createLineChart(canvasId, data, options = {}) {
+        const ctx = document.getElementById(canvasId);
+        if (!ctx) return null;
+        
+        const defaultOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        };
+        
+        return new Chart(ctx, {
+            type: 'line',
+            data: data,
+            options: { ...defaultOptions, ...options }
+        });
+    }
+}
+
+// Animation utilities
+class AnimationUtils {
+    static fadeIn(element, duration = 500) {
+        element.style.opacity = '0';
+        element.style.transition = `opacity ${duration}ms ease-in`;
+        
+        setTimeout(() => {
+            element.style.opacity = '1';
+        }, 10);
+    }
+    
+    static slideIn(element, direction = 'left', duration = 500) {
+        const transform = direction === 'left' ? 'translateX(-100%)' : 'translateX(100%)';
+        element.style.transform = transform;
+        element.style.transition = `transform ${duration}ms ease-out`;
+        
+        setTimeout(() => {
+            element.style.transform = 'translateX(0)';
+        }, 10);
+    }
+    
+    static bounceIn(element, duration = 600) {
+        element.style.transform = 'scale(0.3)';
+        element.style.opacity = '0';
+        element.style.transition = `all ${duration}ms ease-out`;
+        
+        setTimeout(() => {
+            element.style.transform = 'scale(1)';
+            element.style.opacity = '1';
+        }, 10);
+    }
+}
+
+// Export classes for global use
+window.NLPComponents = {
+    POSTagging,
+    NER,
+    SentimentAnalysis,
+    TextGeneration,
+    Translation,
+    Classification,
+    VectorEmbeddings,
+    ChartUtils,
+    AnimationUtils
+};

static/js/main.js

@@ -0,0 +1,370 @@
+// Main JavaScript for NLP Ultimate Tutorial
+
+// Theme management
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    
+    // Update theme icon
+    const themeIcon = document.getElementById('theme-icon');
+    if (themeIcon) {
+        themeIcon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+    }
+}
+
+// Initialize theme on page load
+function initializeTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    
+    const themeIcon = document.getElementById('theme-icon');
+    if (themeIcon) {
+        themeIcon.className = savedTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+    }
+}
+
+// Loading state management
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Processing your request...</p>
+            </div>
+        `;
+    }
+}
+
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Error handling
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Success message
+function showSuccess(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-success fade-in">
+                <i class="fas fa-check-circle"></i>
+                <strong>Success:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// API request helper
+async function makeApiRequest(url, data, method = 'POST') {
+    try {
+        const response = await fetch(url, {
+            method: method,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data)
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        return await response.json();
+    } catch (error) {
+        console.error('API request failed:', error);
+        throw error;
+    }
+}
+
+// Text processing functions
+function processText(endpoint, text, additionalData = {}) {
+    const data = { text: text, ...additionalData };
+    
+    showLoading('resultsContainer');
+    
+    makeApiRequest(endpoint, data)
+        .then(response => {
+            if (response.success) {
+                displayResults(response.result);
+            } else {
+                showError(response.error || 'An error occurred while processing the text');
+            }
+        })
+        .catch(error => {
+            showError('Failed to process text: ' + error.message);
+        })
+        .finally(() => {
+            hideLoading('resultsContainer');
+        });
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+    }
+}
+
+// Copy to clipboard
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        // Show temporary success message
+        const toast = document.createElement('div');
+        toast.className = 'alert alert-success position-fixed';
+        toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 200px;';
+        toast.innerHTML = '<i class="fas fa-check"></i> Copied to clipboard!';
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.remove();
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy text: ', err);
+    });
+}
+
+// Download text as file
+function downloadText(text, filename = 'nlp_result.txt') {
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+}
+
+// Format JSON for display
+function formatJSON(obj) {
+    return JSON.stringify(obj, null, 2);
+}
+
+// Create data table
+function createDataTable(data, headers) {
+    let table = '<div class="table-responsive"><table class="table table-striped table-hover">';
+    
+    // Header
+    if (headers) {
+        table += '<thead><tr>';
+        headers.forEach(header => {
+            table += `<th>${header}</th>`;
+        });
+        table += '</tr></thead>';
+    }
+    
+    // Body
+    table += '<tbody>';
+    data.forEach(row => {
+        table += '<tr>';
+        if (Array.isArray(row)) {
+            row.forEach(cell => {
+                table += `<td>${cell}</td>`;
+            });
+        } else {
+            Object.values(row).forEach(value => {
+                table += `<td>${value}</td>`;
+            });
+        }
+        table += '</tr>';
+    });
+    table += '</tbody></table></div>';
+    
+    return table;
+}
+
+// Create chart
+function createChart(canvasId, type, data, options = {}) {
+    const ctx = document.getElementById(canvasId);
+    if (!ctx) return null;
+    
+    const defaultOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top',
+            }
+        }
+    };
+    
+    const chartOptions = { ...defaultOptions, ...options };
+    
+    return new Chart(ctx, {
+        type: type,
+        data: data,
+        options: chartOptions
+    });
+}
+
+// Smooth scroll to element
+function scrollToElement(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({ 
+            behavior: 'smooth',
+            block: 'start'
+        });
+    }
+}
+
+// Debounce function for input handling
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Throttle function for scroll handling
+function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+
+// Local storage helpers
+function saveToStorage(key, value) {
+    try {
+        localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+        console.error('Failed to save to localStorage:', error);
+    }
+}
+
+function loadFromStorage(key, defaultValue = null) {
+    try {
+        const item = localStorage.getItem(key);
+        return item ? JSON.parse(item) : defaultValue;
+    } catch (error) {
+        console.error('Failed to load from localStorage:', error);
+        return defaultValue;
+    }
+}
+
+// Session storage helpers
+function saveToSession(key, value) {
+    try {
+        sessionStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+        console.error('Failed to save to sessionStorage:', error);
+    }
+}
+
+function loadFromSession(key, defaultValue = null) {
+    try {
+        const item = sessionStorage.getItem(key);
+        return item ? JSON.parse(item) : defaultValue;
+    } catch (error) {
+        console.error('Failed to load from sessionStorage:', error);
+        return defaultValue;
+    }
+}
+
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize theme
+    initializeTheme();
+    
+    // Add fade-in animation to cards
+    const cards = document.querySelectorAll('.card');
+    cards.forEach((card, index) => {
+        card.style.animationDelay = `${index * 0.1}s`;
+        card.classList.add('fade-in');
+    });
+    
+    // Add click handlers for copy buttons
+    document.addEventListener('click', function(e) {
+        if (e.target.classList.contains('copy-btn')) {
+            const text = e.target.getAttribute('data-copy');
+            if (text) {
+                copyToClipboard(text);
+            }
+        }
+    });
+    
+    // Add click handlers for download buttons
+    document.addEventListener('click', function(e) {
+        if (e.target.classList.contains('download-btn')) {
+            const text = e.target.getAttribute('data-download');
+            const filename = e.target.getAttribute('data-filename') || 'nlp_result.txt';
+            if (text) {
+                downloadText(text, filename);
+            }
+        }
+    });
+    
+    // Handle form submissions
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Handle form submission here
+        });
+    });
+    
+    // Add tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+});
+
+// Export functions for global use
+window.NLPUtils = {
+    toggleTheme,
+    showLoading,
+    hideLoading,
+    showError,
+    showSuccess,
+    makeApiRequest,
+    processText,
+    displayResults,
+    copyToClipboard,
+    downloadText,
+    formatJSON,
+    createDataTable,
+    createChart,
+    scrollToElement,
+    debounce,
+    throttle,
+    saveToStorage,
+    loadFromStorage,
+    saveToSession,
+    loadFromSession
+};

templates/_analysis_nav.html

@@ -0,0 +1,72 @@
+<div class="card mb-4 quick-nav">
+  <div class="card-header">
+    <h5 class="mb-0"><i class="fas fa-compass me-2"></i>Quick Navigation</h5>
+  </div>
+  <div class="card-body">
+    <!-- Text Processing -->
+    <h6 class="mb-2"><i class="fas fa-edit me-2"></i>Text Processing</h6>
+    <div class="row mb-3">
+      <div class="col-md-3 mb-2">
+        <a href="{{ url_for('preprocessing') }}" class="btn btn-outline-primary w-100"><i class="fas fa-tools"></i> Preprocessing</a>
+      </div>
+      <div class="col-md-3 mb-2">
+        <a href="{{ url_for('tokenization') }}" class="btn btn-outline-primary w-100"><i class="fas fa-cut"></i> Tokenization</a>
+      </div>
+      <div class="col-md-3 mb-2">
+        <a href="{{ url_for('pos_tagging') }}" class="btn btn-outline-primary w-100"><i class="fas fa-tags"></i> POS</a>
+      </div>
+      <div class="col-md-3 mb-2">
+        <a href="{{ url_for('named_entity') }}" class="btn btn-outline-primary w-100"><i class="fas fa-user-tag"></i> NER</a>
+      </div>
+    </div>
+
+    <!-- Analysis -->
+    <h6 class="mb-2"><i class="fas fa-chart-line me-2"></i>Analysis</h6>
+    <div class="row mb-3">
+      <div class="col-md-4 mb-2">
+        <a href="{{ url_for('sentiment') }}" class="btn btn-outline-success w-100"><i class="fas fa-smile"></i> Sentiment</a>
+      </div>
+      <div class="col-md-4 mb-2">
+        <a href="{{ url_for('summarization') }}" class="btn btn-outline-success w-100"><i class="fas fa-compress"></i> Summarization</a>
+      </div>
+      <div class="col-md-4 mb-2">
+        <a href="{{ url_for('topic_analysis') }}" class="btn btn-outline-success w-100"><i class="fas fa-project-diagram"></i> Topics</a>
+      </div>
+    </div>
+
+    <!-- Advanced NLP -->
+    <h6 class="mb-2"><i class="fas fa-robot me-2"></i>Advanced NLP</h6>
+    <div class="row">
+      <div class="col-md-2 mb-2">
+        <a href="{{ url_for('question_answering') }}" class="btn btn-outline-info w-100"><i class="fas fa-question-circle"></i> QA</a>
+      </div>
+      <div class="col-md-2 mb-2">
+        <a href="{{ url_for('text_generation') }}" class="btn btn-outline-info w-100"><i class="fas fa-magic"></i> Generation</a>
+      </div>
+      <div class="col-md-2 mb-2">
+        <a href="{{ url_for('translation') }}" class="btn btn-outline-info w-100"><i class="fas fa-language"></i> Translate</a>
+      </div>
+      <div class="col-md-2 mb-2">
+        <a href="{{ url_for('classification') }}" class="btn btn-outline-info w-100"><i class="fas fa-sitemap"></i> Classify</a>
+      </div>
+      <div class="col-md-2 mb-2">
+        <a href="{{ url_for('vector_embeddings') }}" class="btn btn-outline-info w-100"><i class="fas fa-vector-square"></i> Embeddings</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Remove Quick Nav functionality - let navbar handle all navigation
+(function() {
+  const links = document.currentScript.parentElement.querySelectorAll('a[href]');
+  links.forEach(link => {
+    link.addEventListener('click', function(event) {
+      // Prevent Quick Nav from doing anything special
+      // Just let the normal browser navigation happen like navbar does
+      event.stopPropagation();
+      // Don't set any sessionStorage flags - let it work like navbar
+    });
+  });
+})();
+</script>

templates/base.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}NLP Ultimate Tutorial{% endblock %}</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
+    {% block extra_head %}{% endblock %}
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('index') }}">
+                <i class="fas fa-brain"></i> NLP Ultimate Tutorial
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="mainNavbar">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navTextProcessing" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <i class="fas fa-edit"></i> Text Processing
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navTextProcessing">
+                            <li><a class="dropdown-item" href="{{ url_for('preprocessing') }}">Preprocessing</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('tokenization') }}">Tokenization</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('pos_tagging') }}">POS Tagging</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('named_entity') }}">Named Entities</a></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navAnalysis" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <i class="fas fa-chart-line"></i> Analysis
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navAnalysis">
+                            <li><a class="dropdown-item" href="{{ url_for('sentiment') }}">Sentiment</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('summarization') }}">Summarization</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('topic_analysis') }}">Topic Analysis</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('question_answering') }}">Question Answering</a></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navAdvanced" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <i class="fas fa-robot"></i> Advanced NLP
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navAdvanced">
+                            <li><a class="dropdown-item" href="{{ url_for('text_generation') }}">Text Generation</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('translation') }}">Translation</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('classification') }}">Classification</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('vector_embeddings') }}">Embeddings</a></li>
+                        </ul>
+                    </li>
+                </ul>
+                <div class="d-flex">
+                    <button class="btn btn-outline-light btn-sm" onclick="toggleTheme()" title="Toggle theme">
+                        <i class="fas fa-moon" id="theme-icon"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="container-fluid py-4">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="modern-footer">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-md-4">
+                    <div class="footer-brand">
+                        <h5><i class="fas fa-brain"></i> NLP Ultimate Tutorial</h5>
+                        <p class="footer-description">Comprehensive guide to Natural Language Processing concepts and techniques.</p>
+                    </div>
+                </div>
+                <div class="col-md-4 text-center">
+                    <div class="footer-credit">
+                        <div class="credit-badge">
+                            <span class="credit-text">Designed and developed by</span>
+                            <strong class="developer-name">Aradhya Pavan H S</strong>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4 text-md-end">
+                    <div class="social-links">
+                        <a href="https://github.com/aradhyapavan" target="_blank" rel="noopener noreferrer" class="social-link github-link">
+                            <i class="fab fa-github"></i>
+                            <span>GitHub</span>
+                        </a>
+                        <a href="https://www.linkedin.com/in/aradhya-pavan/" target="_blank" rel="noopener noreferrer" class="social-link linkedin-link">
+                            <i class="fab fa-linkedin"></i>
+                            <span>LinkedIn</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>

templates/classification.html

@@ -0,0 +1,449 @@
+{% extends "base.html" %}
+
+{% block title %}Zero-shot Classification - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-tags"></i>
+                        Zero-shot Classification
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Classify text into arbitrary categories without training on specific examples.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Zero-shot classification can categorize text into arbitrary classes without having been specifically trained on those categories.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter text to classify:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter text here...">I absolutely love this new product! It's amazing and works perfectly.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="Sentiment">Sentiment</option>
+                                <option value="Emotion">Emotion</option>
+                                <option value="Writing Style">Writing Style</option>
+                                <option value="Intent">Intent</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-tags"></i>
+                                Classify Text
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Classification Settings Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-cog"></i>
+                        Classification Settings
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label for="scenario" class="form-label">Classification Scenario</label>
+                            <select id="scenario" class="form-select">
+                                <option value="Sentiment" selected>Sentiment</option>
+                                <option value="Emotion">Emotion</option>
+                                <option value="Writing Style">Writing Style</option>
+                                <option value="Intent">Intent</option>
+                                <option value="Content Type">Content Type</option>
+                                <option value="Audience Level">Audience Level</option>
+                                <option value="Custom">Custom</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-check form-switch mt-4">
+                                <input class="form-check-input" type="checkbox" id="multiLabel">
+                                <label class="form-check-label" for="multiLabel">
+                                    Multi-label classification
+                                </label>
+                                <small class="form-text text-muted">Allow multiple categories</small>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Custom labels input (hidden by default) -->
+                    <div id="customLabelsDiv" class="mt-3" style="display: none;">
+                        <label for="customLabels" class="form-label">Custom Categories (one per line)</label>
+                        <textarea id="customLabels" class="form-control" rows="4" placeholder="Enter custom categories here..."></textarea>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Model Info Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Model Information
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-brain fa-2x text-primary mb-2"></i>
+                                    <h5>BART-large-mnli</h5>
+                                    <p class="small">BART model fine-tuned on MultiNLI dataset</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Zero-shot classification</li>
+                                        <li>• Arbitrary categories</li>
+                                        <li>• High accuracy</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-sliders-h fa-2x text-success mb-2"></i>
+                                    <h5>Flexible Classification</h5>
+                                    <p class="small">Classify into any user-defined categories</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Pre-defined scenarios</li>
+                                        <li>• Custom categories</li>
+                                        <li>• Multi-label support</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-chart-bar fa-2x text-info mb-2"></i>
+                                    <h5>Confidence Scoring</h5>
+                                    <p class="small">Detailed confidence scores for each category</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Confidence visualization</li>
+                                        <li>• Ranking by score</li>
+                                        <li>• Multiple category detection</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Example Texts Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-list"></i>
+                        Example Texts
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('I absolutely love this new product! It\'s amazing and works perfectly.', 'Sentiment')">
+                                I absolutely love this new product! It's amazing and works perfectly.
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('I am so excited about this opportunity!', 'Emotion')">
+                                I am so excited about this opportunity!
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('The implementation requires careful consideration of the underlying architecture.', 'Writing Style')">
+                                The implementation requires careful consideration of the underlying architecture.
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('You should definitely buy this product because it will solve all your problems.', 'Intent')">
+                                You should definitely buy this product because it will solve all your problems.
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Classification Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Classify Text" to see classification results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when using Quick Nav; otherwise leave defaults
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Scenario change handler
+    document.getElementById('scenario').addEventListener('change', function() {
+        const customLabelsDiv = document.getElementById('customLabelsDiv');
+        if (this.value === 'Custom') {
+            customLabelsDiv.style.display = 'block';
+        } else {
+            customLabelsDiv.style.display = 'none';
+        }
+        
+        // Update multi-label checkbox based on scenario
+        const multiLabelCheckbox = document.getElementById('multiLabel');
+        if (['Emotion', 'Intent', 'Content Type'].includes(this.value)) {
+            multiLabelCheckbox.checked = true;
+        }
+    });
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        const scenario = document.getElementById('scenario');
+        
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            // Set sample prompts based on type
+            const samples = {
+                'Sentiment': 'I absolutely love this new product! It\'s amazing and works perfectly.',
+                'Emotion': 'I am so excited about this opportunity!',
+                'Writing Style': 'The implementation requires careful consideration of the underlying architecture.',
+                'Intent': 'You should definitely buy this product because it will solve all your problems.'
+            };
+            
+            if (samples[sampleType]) {
+                textInput.value = samples[sampleType];
+                scenario.value = sampleType;
+            }
+        }
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter text to classify.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Classifying...';
+        this.disabled = true;
+        
+        // Process classification
+        processClassification();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-tags"></i> Classify Text';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Classify Text" to see classification results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Set example text and scenario
+function setExample(text, scenario) {
+    document.getElementById('textInput').value = text;
+    document.getElementById('scenario').value = scenario;
+    
+    // Update custom labels visibility
+    const customLabelsDiv = document.getElementById('customLabelsDiv');
+    if (scenario === 'Custom') {
+        customLabelsDiv.style.display = 'block';
+    } else {
+        customLabelsDiv.style.display = 'none';
+    }
+}
+
+// Process classification
+function processClassification() {
+    const text = document.getElementById('textInput').value.trim();
+    const scenario = document.getElementById('scenario').value;
+    const multiLabel = document.getElementById('multiLabel').checked;
+    const customLabels = document.getElementById('customLabels').value;
+    
+    if (!text) {
+        alert('Please enter text to classify.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/classification', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            text: text,
+            scenario: scenario,
+            multi_label: multiLabel,
+            custom_labels: customLabels
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while classifying text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to classify text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Classifying text...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/index.html

@@ -0,0 +1,322 @@
+{% extends "base.html" %}
+
+{% block title %}NLP Ultimate Tutorial - Home{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-5">
+        <div class="col-12 text-center">
+            <h1 class="display-4 mb-3">
+                <i class="fas fa-brain text-primary"></i>
+                Natural Language Processing Demo
+            </h1>
+            <p class="lead">Explore the capabilities of modern NLP models and techniques. Enter your text and select a task to analyze.</p>
+            
+            <div class="alert alert-info">
+                <i class="fas fa-info-circle"></i>
+                Ultimate guide to all the NLP concepts - Designed and developed by <strong>Aradhya Pavan</strong>
+            </div>
+        </div>
+    </div>
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter or paste your text here...">Climate change is the long-term alteration of temperature and typical weather patterns in a place. The cause of current climate change is largely human activity, like burning fossil fuels, which adds heat-trapping gases to Earth's atmosphere. The consequences of changing climate are already being felt worldwide.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                {% for key, value in sample_texts.items() %}
+                                <option value="{{ key }}" {% if key == 'Scientific Text' %}selected{% endif %}>{{ key }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <!-- Text Statistics -->
+                    <div id="textStats" class="row mb-3" style="display: none;">
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <h5 class="card-title">Characters</h5>
+                                    <h2 class="text-primary" id="charCount">0</h2>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <h5 class="card-title">Words</h5>
+                                    <h2 class="text-primary" id="wordCount">0</h2>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <h5 class="card-title">Sentences</h5>
+                                    <h2 class="text-primary" id="sentenceCount">0</h2>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Warning -->
+                    <div id="warningBox" class="alert alert-warning" style="display: none;">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        <strong>Warning:</strong> Text exceeds 500 words. Some models may truncate the input or perform slower.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Instructions -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="alert alert-warning">
+                <div class="d-flex align-items-start">
+                    <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
+                    <div>
+                        <h5 class="alert-heading">Important Instructions:</h5>
+                        <ul class="mb-0">
+                            <li>When you change the text, please reselect your analysis method and task to refresh the results</li>
+                            <li>Please wait a moment while processing your task - this may take a few seconds</li>
+                            <li>Scroll down to see all processed results for your text</li>
+                        </ul>
+                        <hr>
+                        <small><i class="fas fa-clock"></i> Processing may take longer for larger texts</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Analysis Methods (Simplified, no tabs) -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header bg-primary text-white text-center">
+                    <h2 class="mb-0">CHOOSE AN OPERATION</h2>
+                </div>
+                <div class="card-body">
+                    <!-- Text Processing -->
+                    <h4 class="mb-3"><i class="fas fa-edit me-2"></i>Text Processing</h4>
+                    <div class="row mb-4">
+                        <div class="col-md-3 mb-2">
+                            <a href="{{ url_for('preprocessing') }}" class="btn btn-primary w-100">
+                                <i class="fas fa-tools"></i> Text Preprocessing
+                            </a>
+                        </div>
+                        <div class="col-md-3 mb-2">
+                            <a href="{{ url_for('tokenization') }}" class="btn btn-primary w-100">
+                                <i class="fas fa-cut"></i> Tokenization
+                            </a>
+                        </div>
+                        <div class="col-md-3 mb-2">
+                            <a href="{{ url_for('pos_tagging') }}" class="btn btn-primary w-100">
+                                <i class="fas fa-tags"></i> POS Tagging
+                            </a>
+                        </div>
+                        <div class="col-md-3 mb-2">
+                            <a href="{{ url_for('named_entity') }}" class="btn btn-primary w-100">
+                                <i class="fas fa-user-tag"></i> Named Entities
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Analysis -->
+                    <h4 class="mb-3"><i class="fas fa-chart-line me-2"></i>Analysis</h4>
+                    <div class="row mb-4">
+                        <div class="col-md-4 mb-2">
+                            <a href="{{ url_for('sentiment') }}" class="btn btn-success w-100">
+                                <i class="fas fa-smile"></i> Sentiment Analysis
+                            </a>
+                        </div>
+                        <div class="col-md-4 mb-2">
+                            <a href="{{ url_for('summarization') }}" class="btn btn-success w-100">
+                                <i class="fas fa-compress"></i> Text Summarization
+                            </a>
+                        </div>
+                        <div class="col-md-4 mb-2">
+                            <a href="{{ url_for('topic_analysis') }}" class="btn btn-success w-100">
+                                <i class="fas fa-project-diagram"></i> Topic Analysis
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Advanced NLP -->
+                    <h4 class="mb-3"><i class="fas fa-robot me-2"></i>Advanced NLP</h4>
+                    <div class="row">
+                        <div class="col-md-2 mb-2">
+                            <a href="{{ url_for('question_answering') }}" class="btn btn-info w-100">
+                                <i class="fas fa-question-circle"></i> QA
+                            </a>
+                        </div>
+                        <div class="col-md-2 mb-2">
+                            <a href="{{ url_for('text_generation') }}" class="btn btn-info w-100">
+                                <i class="fas fa-magic"></i> Generation
+                            </a>
+                        </div>
+                        <div class="col-md-2 mb-2">
+                            <a href="{{ url_for('translation') }}" class="btn btn-info w-100">
+                                <i class="fas fa-language"></i> Translation
+                            </a>
+                        </div>
+                        <div class="col-md-2 mb-2">
+                            <a href="{{ url_for('classification') }}" class="btn btn-info w-100">
+                                <i class="fas fa-sitemap"></i> Classification
+                            </a>
+                        </div>
+                        <div class="col-md-2 mb-2">
+                            <a href="{{ url_for('vector_embeddings') }}" class="btn btn-info w-100">
+                                <i class="fas fa-vector-square"></i> Embeddings
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Select an analysis method above to see results here</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Provide SAMPLE_TEXTS inline to avoid network for dropdown updates
+const SAMPLE_TEXTS = {{ sample_texts | tojson | safe }};
+
+// Initialize with default text statistics
+document.addEventListener('DOMContentLoaded', function() {
+    // Ensure carry flag is cleared on home to avoid unintended persistence
+    sessionStorage.removeItem('carryTextOnNextPage');
+    // If a sample (not Custom) is selected by default, load it into the textarea
+    const select = document.getElementById('sampleSelect');
+    const textInput = document.getElementById('textInput');
+    if (select && select.value !== 'Custom' && SAMPLE_TEXTS[select.value]) {
+        textInput.value = SAMPLE_TEXTS[select.value];
+    }
+    updateTextStats();
+});
+
+// Sample text dropdown handler (no fetch, instant update)
+const sampleSelectEl = document.getElementById('sampleSelect');
+if (sampleSelectEl) {
+    sampleSelectEl.addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            textInput.value = SAMPLE_TEXTS[sampleType] || '';
+        }
+        updateTextStats();
+    });
+}
+
+// Text input handler
+const textAreaEl = document.getElementById('textInput');
+if (textAreaEl) {
+    textAreaEl.addEventListener('input', function() {
+        updateTextStats();
+    });
+}
+
+// Update text statistics
+function updateTextStats() {
+    const text = document.getElementById('textInput').value;
+    
+    if (!text.trim()) {
+        document.getElementById('textStats').style.display = 'none';
+        document.getElementById('warningBox').style.display = 'none';
+        return;
+    }
+    
+    fetch('/api/text-stats', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('charCount').textContent = data.chars;
+        document.getElementById('wordCount').textContent = data.words;
+        document.getElementById('sentenceCount').textContent = data.sentences;
+        
+        document.getElementById('textStats').style.display = 'flex';
+        
+        // Show warning if text is too long
+        if (data.words > 500) {
+            document.getElementById('warningBox').style.display = 'block';
+        } else {
+            document.getElementById('warningBox').style.display = 'none';
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}
+
+// Store text in session storage for other pages
+function storeTextForAnalysis() {
+    const text = document.getElementById('textInput').value;
+    sessionStorage.setItem('analysisText', text);
+}
+
+// Add click handlers to analysis buttons
+document.querySelectorAll('a[href*="/"]').forEach(link => {
+    if (link.href.includes('/preprocessing') || 
+        link.href.includes('/tokenization') || 
+        link.href.includes('/pos-tagging') || 
+        link.href.includes('/named-entity') ||
+        link.href.includes('/sentiment') ||
+        link.href.includes('/summarization') ||
+        link.href.includes('/topic-analysis') ||
+        link.href.includes('/question-answering') ||
+        link.href.includes('/text-generation') ||
+        link.href.includes('/translation') ||
+        link.href.includes('/classification') ||
+        link.href.includes('/vector-embeddings')) {
+        
+        link.addEventListener('click', storeTextForAnalysis);
+    }
+});
+</script>
+{% endblock %}

templates/named_entity.html

@@ -0,0 +1,362 @@
+{% extends "base.html" %}
+
+{% block title %}Named Entity Recognition - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-user-tag"></i>
+                        Named Entity Recognition
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Identify and classify key information in text such as people, organizations, locations, and more.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Named Entity Recognition identifies and classifies key information in text into pre-defined categories such as person names, organizations, locations, etc.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter or paste your text here...">Apple Inc. is planning to open a new campus in Austin, Texas next July. CEO Tim Cook announced the plan yesterday.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-user-tag"></i>
+                                Identify Entities
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Entity Types Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Entity Types Detected
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-user fa-2x text-danger mb-2"></i>
+                                    <h5>PERSON</h5>
+                                    <p class="small">People, including fictional characters</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-building fa-2x text-success mb-2"></i>
+                                    <h5>ORG</h5>
+                                    <p class="small">Organizations, companies, institutions</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-map-marker-alt fa-2x text-primary mb-2"></i>
+                                    <h5>GPE</h5>
+                                    <p class="small">Countries, cities, states</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-calendar fa-2x text-warning mb-2"></i>
+                                    <h5>DATE</h5>
+                                    <p class="small">Absolute or relative dates</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="row mt-3">
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-dollar-sign fa-2x text-info mb-2"></i>
+                                    <h5>MONEY</h5>
+                                    <p class="small">Monetary values</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-percentage fa-2x text-secondary mb-2"></i>
+                                    <h5>PERCENT</h5>
+                                    <p class="small">Percentage values</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-cube fa-2x text-purple mb-2"></i>
+                                    <h5>PRODUCT</h5>
+                                    <p class="small">Products, objects, vehicles</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-users fa-2x text-dark mb-2"></i>
+                                    <h5>NORP</h5>
+                                    <p class="small">Nationalities, religious groups</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Entity Recognition Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Identify Entities" to see named entity recognition results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when using Quick Nav; otherwise leave defaults
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const sampleSel = document.getElementById('sampleSelect');
+        if (sampleSel) sampleSel.value = 'Custom';
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            // Get sample text from server
+            fetch('/api/sample-text', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({sample_type: sampleType})
+            })
+            .then(response => response.json())
+            .then(data => {
+                textInput.value = data.text;
+            });
+        }
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to analyze.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        processNamedEntities();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-user-tag"></i> Identify Entities';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Identify Entities" to see named entity recognition results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Process named entity recognition
+function processNamedEntities() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to analyze.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/named-entity', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Identifying entities...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/pos_tagging.html

@@ -0,0 +1,397 @@
+{% extends "base.html" %}
+
+{% block title %}Part-of-Speech Tagging - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-tags"></i>
+                        Part-of-Speech Tagging
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Analyze the grammatical structure of text by identifying parts of speech for each word.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Part-of-Speech (POS) tagging is the process of marking up words in text according to their grammatical categories such as noun, verb, adjective, etc.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter or paste your text here...">The quick brown fox jumps over the lazy dog.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-tags"></i>
+                                Analyze POS Tags
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- POS Tagging Methods Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        POS Tagging Methods
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row g-4">
+                        <div class="col-md-6">
+                            <div class="card h-100 border-primary shadow-sm">
+                                <div class="card-header bg-primary text-white text-center">
+                                    <i class="fas fa-brain fa-3x mb-2"></i>
+                                    <h4 class="mb-0">NLTK (Penn Treebank)</h4>
+                                </div>
+                                <div class="card-body">
+                                    <p class="text-center mb-3">Uses the Perceptron tagger trained on the Penn Treebank corpus with detailed grammatical categories.</p>
+                                    <ul class="list-group list-group-flush">
+                                        <li class="list-group-item d-flex align-items-center">
+                                            <i class="fas fa-tags text-primary me-2"></i>
+                                            <strong>36+ detailed tags</strong>
+                                        </li>
+                                        <li class="list-group-item d-flex align-items-center">
+                                            <i class="fas fa-flag-usa text-primary me-2"></i>
+                                            <strong>English-specific</strong>
+                                        </li>
+                                        <li class="list-group-item d-flex align-items-center">
+                                            <i class="fas fa-book text-primary me-2"></i>
+                                            <strong>Traditional NLP approach</strong>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="card h-100 border-success shadow-sm">
+                                <div class="card-header bg-success text-white text-center">
+                                    <i class="fas fa-globe fa-3x mb-2"></i>
+                                    <h4 class="mb-0">spaCy (Universal)</h4>
+                                </div>
+                                <div class="card-body">
+                                    <p class="text-center mb-3">Uses the en_core_web_sm model with Universal POS tags for cross-linguistic consistency.</p>
+                                    <ul class="list-group list-group-flush">
+                                        <li class="list-group-item d-flex align-items-center">
+                                            <i class="fas fa-tags text-success me-2"></i>
+                                            <strong>17 universal tags</strong>
+                                        </li>
+                                        <li class="list-group-item d-flex align-items-center">
+                                            <i class="fas fa-globe text-success me-2"></i>
+                                            <strong>Cross-linguistic</strong>
+                                        </li>
+                                        <li class="list-group-item d-flex align-items-center">
+                                            <i class="fas fa-rocket text-success me-2"></i>
+                                            <strong>Modern NLP approach</strong>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        POS Tagging Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Analyze POS Tags" to see grammatical analysis results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    const textInput = document.getElementById('textInput');
+    const sampleSel = document.getElementById('sampleSelect');
+    const routeKey = 'customTextBackup:' + window.location.pathname;
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    
+    if (shouldCarry) {
+        // When carrying text via Quick Nav, use the carried text and set to Custom
+        const carriedText = sessionStorage.getItem('analysisText') || '';
+        if (sampleSel) sampleSel.value = 'Custom';
+        if (textInput) textInput.value = carriedText;
+        // Save as this route's custom backup
+        sessionStorage.setItem(routeKey, carriedText);
+        sessionStorage.removeItem('carryTextOnNextPage');
+    } else {
+        // Normal page load - restore any existing custom backup for this route
+        const routeBackup = sessionStorage.getItem(routeKey);
+        if (routeBackup !== null && sampleSel && sampleSel.value === 'Custom') {
+            if (textInput) textInput.value = routeBackup;
+        }
+    }
+    
+    // Save custom input changes to route-specific backup
+    if (textInput) {
+        textInput.addEventListener('input', function() {
+            if (sampleSel && sampleSel.value === 'Custom') {
+                sessionStorage.setItem(routeKey, textInput.value);
+            }
+        });
+    }
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        const routeKey = 'customTextBackup:' + window.location.pathname;
+        
+        if (sampleType === 'Custom') {
+            // Restore custom backup for this route
+            const routeBackup = sessionStorage.getItem(routeKey);
+            textInput.value = routeBackup || '';
+        } else {
+            // Before switching to sample, save current custom input
+            if (this.previousValue === 'Custom' && textInput.value.trim()) {
+                sessionStorage.setItem(routeKey, textInput.value);
+            }
+            
+            // Get sample text from server
+            fetch('/api/sample-text', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({sample_type: sampleType})
+            })
+            .then(response => response.json())
+            .then(data => {
+                textInput.value = data.text;
+            });
+        }
+        
+        // Remember previous value for next change
+        this.previousValue = sampleType;
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to analyze.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        processPOSTagging();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-tags"></i> Analyze POS Tags';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Analyze POS Tags" to see grammatical analysis results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Process POS tagging
+function processPOSTagging() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to analyze.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/pos-tagging', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Analyzing grammatical structure...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+// Function to switch between POS tag types
+function showPOSTags(type) {
+    // Hide all sections
+    const sections = document.querySelectorAll('.pos-tags-section');
+    sections.forEach(section => {
+        section.style.display = 'none';
+    });
+    
+    // Remove active class from all buttons
+    const buttons = document.querySelectorAll('.pos-legend-buttons .btn');
+    buttons.forEach(btn => {
+        btn.classList.remove('btn-primary', 'active');
+        btn.classList.add('btn-outline-primary');
+    });
+    
+    // Show selected section
+    const targetSection = document.getElementById(type + '-tags');
+    if (targetSection) {
+        targetSection.style.display = 'block';
+    }
+    
+    // Activate selected button
+    const targetButton = document.getElementById(type + '-btn');
+    if (targetButton) {
+        targetButton.classList.remove('btn-outline-primary');
+        targetButton.classList.add('btn-primary', 'active');
+    }
+}
+</script>
+{% endblock %}

templates/preprocessing.html

@@ -0,0 +1,269 @@
+{% extends "base.html" %}
+
+{% block title %}Text Preprocessing - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-tools"></i>
+                        Text Preprocessing
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Clean and transform raw text into a format suitable for NLP analysis.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Text preprocessing is the first step in NLP pipelines that transforms raw text into a clean, structured format suitable for analysis.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter or paste your text here...">Climate change is the long-term alteration of temperature and typical weather patterns in a place. The cause of current climate change is largely human activity, like burning fossil fuels, which adds heat-trapping gases to Earth's atmosphere. The consequences of changing climate are already being felt worldwide.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text" selected>Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-cogs"></i>
+                                Process Text
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Preprocessing Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Process Text" to see preprocessing results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry when requested
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const sampleSel = document.getElementById('sampleSelect');
+        if (sampleSel) sampleSel.value = 'Custom';
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            // Get sample text from server
+            fetch('/api/sample-text', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({sample_type: sampleType})
+            })
+            .then(response => response.json())
+            .then(data => {
+                textInput.value = data.text;
+            });
+        }
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to process.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        NLPUtils.processText('/api/preprocessing', text);
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-cogs"></i> Process Text';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Process Text" to see preprocessing results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Override the default processText function to handle preprocessing specifically
+function processPreprocessing() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to process.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/preprocessing', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Processing your text...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/question_answering.html

@@ -0,0 +1,442 @@
+{% extends "base.html" %}
+
+{% block title %}Question Answering - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-question-circle"></i>
+                        Question Answering System
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Ask questions about any text context and get intelligent answers with confidence scores.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Question Answering (QA) systems extract or generate answers to questions based on a given context or knowledge base.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter Context and Question:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <label for="contextInput" class="form-label">Context Text:</label>
+                            <textarea id="contextInput" class="form-control" rows="8" placeholder="Enter the text context here...">The Amazon rainforest is a moist broadleaf tropical rainforest in the Amazon biome that covers most of the Amazon basin of South America. This basin encompasses 7,000,000 km2, of which 5,500,000 km2 are covered by the rainforest. The majority of the forest is contained within Brazil, with 60% of the rainforest, followed by Peru with 13%, Colombia with 10%, and with minor amounts in Bolivia, Ecuador, French Guiana, Guyana, Suriname, and Venezuela.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <label for="questionInput" class="form-label">Your Question:</label>
+                            <input type="text" id="questionInput" class="form-control" placeholder="What would you like to know about the context?" value="What percentage of the Amazon rainforest is in Brazil?">
+                        </div>
+                        <div class="col-md-4">
+                            <label for="confidenceThreshold" class="form-label">Confidence Threshold:</label>
+                            <input type="range" class="form-range" id="confidenceThreshold" min="0.0" max="1.0" value="0.5" step="0.1">
+                            <div class="d-flex justify-content-between">
+                                <small>0.0</small>
+                                <small id="confidenceValue">0.5</small>
+                                <small>1.0</small>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-question-circle"></i>
+                                Get Answer
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tips and Features Section -->
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-lightbulb"></i>
+                        Tips for Better Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <ul class="list-unstyled">
+                        <li><i class="fas fa-check text-success"></i> <strong>Context:</strong> Provide relevant text containing the answer</li>
+                        <li><i class="fas fa-check text-success"></i> <strong>Question:</strong> Be specific and clear</li>
+                        <li><i class="fas fa-check text-success"></i> <strong>Extractive:</strong> Finds exact spans from the text</li>
+                        <li><i class="fas fa-check text-success"></i> <strong>Confidence:</strong> Higher threshold = more selective answers</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-line"></i>
+                        System Features
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <ul class="list-unstyled">
+                        <li><i class="fas fa-brain text-primary"></i> <strong>Transformer QA:</strong> RoBERTa-SQuAD2 model</li>
+                        <li><i class="fas fa-calculator text-info"></i> <strong>TF-IDF Matching:</strong> Similarity-based answer finding</li>
+                        <li><i class="fas fa-chart-bar text-success"></i> <strong>Confidence Scoring:</strong> Reliability assessment</li>
+                        <li><i class="fas fa-highlighter text-warning"></i> <strong>Context Highlighting:</strong> Visual answer location</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Example Questions Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-list"></i>
+                        Example Questions
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('What percentage of the Amazon rainforest is in Brazil?')">
+                                What percentage of the Amazon rainforest is in Brazil?
+                            </button>
+                        </div>
+                        <div class="col-md-4">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Which countries contain parts of the Amazon rainforest?')">
+                                Which countries contain parts of the Amazon rainforest?
+                            </button>
+                        </div>
+                        <div class="col-md-4">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('How large is the Amazon basin?')">
+                                How large is the Amazon basin?
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Question Answering Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Get Answer" to see question answering results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Prefill only when explicitly navigating via quick-nav or same-route refresh
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        const storedQuestion = sessionStorage.getItem('qaQuestion');
+        if (storedText) document.getElementById('contextInput').value = storedText;
+        if (storedQuestion) document.getElementById('questionInput').value = storedQuestion;
+        // Reset flag so normal navigation doesn't keep stale inputs
+        sessionStorage.removeItem('carryTextOnNextPage');
+    } else {
+        // Fresh route load: clear inputs
+        document.getElementById('contextInput').value = document.getElementById('contextInput').defaultValue || '';
+        document.getElementById('questionInput').value = '';
+        sessionStorage.removeItem('qaQuestion');
+    }
+    
+    // Update confidence threshold value
+    document.getElementById('confidenceThreshold').addEventListener('input', function() {
+        document.getElementById('confidenceValue').textContent = this.value;
+    });
+    
+    // Sample text dropdown handler: keep context/question in sync and restore Custom
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const contextInput = document.getElementById('contextInput');
+        const questionInput = document.getElementById('questionInput');
+        const routeKey = 'customTextBackup:' + (window.location.pathname || '/question-answering');
+        
+        const SAMPLE_QUESTIONS = {
+            'News Article': 'What action did the commission take?',
+            'Product Review': 'What is the reviewer\'s overall opinion?',
+            'Scientific Text': 'What is the primary cause of current climate change?',
+            'Literary Text': 'Who is the main character?'
+        };
+        
+        if (sampleType === 'Custom') {
+            // Restore previously typed Custom text
+            const backup = sessionStorage.getItem(routeKey);
+            if (backup !== null) contextInput.value = backup;
+            // Clear question to avoid mismatch
+            questionInput.value = '';
+            sessionStorage.setItem('qaQuestion', '');
+            return;
+        }
+        
+        // Save current custom text before switching away
+        sessionStorage.setItem(routeKey, contextInput.value);
+        
+        fetch('/api/sample-text', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ sample_type: sampleType })
+        })
+        .then(response => response.json())
+        .then(data => {
+            contextInput.value = data.text || '';
+            // Update question to match selected sample for consistency
+            questionInput.value = SAMPLE_QUESTIONS[sampleType] || '';
+            // Persist to session storage
+            sessionStorage.setItem('analysisText', contextInput.value);
+            sessionStorage.setItem('qaQuestion', questionInput.value);
+        });
+    });
+    
+    // Persist inputs while typing
+    document.getElementById('contextInput').addEventListener('input', function() {
+        sessionStorage.setItem('analysisText', this.value);
+        sessionStorage.setItem('customTextBackup:' + (window.location.pathname || '/question-answering'), this.value);
+        // If user starts editing context while a sample-default question is set, clear it to avoid mismatch
+        const questionInput = document.getElementById('questionInput');
+        const SAMPLE_DEFAULTS = new Set([
+            'What action did the commission\'s take?',
+            'What action did the commission take?',
+            'What is the reviewer\'s overall opinion?',
+            'What is the reviewer\'s overall opinion?',
+            'What is the primary cause of current climate change?',
+            'Who is the main character?'
+        ]);
+        if (SAMPLE_DEFAULTS.has(questionInput.value)) {
+            questionInput.value = '';
+            sessionStorage.setItem('qaQuestion', '');
+        }
+    });
+    document.getElementById('questionInput').addEventListener('input', function() {
+        sessionStorage.setItem('qaQuestion', this.value);
+    });
+
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const context = document.getElementById('contextInput').value.trim();
+        const question = document.getElementById('questionInput').value.trim();
+        
+        if (!context) {
+            alert('Please provide context text.');
+            return;
+        }
+        
+        if (!question) {
+            alert('Please enter a question.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Persist before processing
+        sessionStorage.setItem('analysisText', context);
+        sessionStorage.setItem('qaQuestion', question);
+
+        // Process question
+        processQuestionAnswering();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-question-circle"></i> Get Answer';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('contextInput').value = '';
+        document.getElementById('questionInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Get Answer" to see question answering results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Set example question
+function setExample(question) {
+    document.getElementById('questionInput').value = question;
+}
+
+// Process question answering
+function processQuestionAnswering() {
+    const context = document.getElementById('contextInput').value.trim();
+    const question = document.getElementById('questionInput').value.trim();
+    const confidenceThreshold = parseFloat(document.getElementById('confidenceThreshold').value);
+    
+    if (!context) {
+        alert('Please provide context text.');
+        return;
+    }
+    
+    if (!question) {
+        alert('Please enter a question.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/question-answering', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            context: context,
+            question: question,
+            confidence_threshold: confidenceThreshold
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the question');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process question: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Processing your question...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/sentiment.html

@@ -0,0 +1,430 @@
+{% extends "base.html" %}
+
+{% block title %}Sentiment Analysis - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-heart"></i>
+                        Sentiment Analysis
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Analyze the emotional tone and sentiment of text using multiple advanced models.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Sentiment analysis determines the emotional tone behind text to identify if it expresses positive, negative, or neutral sentiment.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter or paste your text here...">I absolutely loved this movie! The acting was superb and the plot kept me on the edge of my seat.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-heart"></i>
+                                Analyze Sentiment
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sentiment Analysis Methods Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Sentiment Analysis Methods
+                    </h3>
+                </div>
+                <div class="card-body p-4">
+                    <div class="row g-4">
+                        <!-- VADER Card -->
+                        <div class="col-lg-4 col-md-6">
+                            <div class="sentiment-method-card h-100 vader-card">
+                                <div class="method-header">
+                                    <div class="method-icon">
+                                        <i class="fas fa-book"></i>
+                                    </div>
+                                    <h4 class="method-title">VADER</h4>
+                                    <p class="method-subtitle">Rule-based Analyzer</p>
+                                </div>
+                                <div class="method-body">
+                                    <p class="method-description">Rule-based sentiment analyzer specifically tuned for social media text with compound scoring.</p>
+                                    <div class="method-features">
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Lexicon-based approach</span>
+                                        </div>
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Social media optimized</span>
+                                        </div>
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Fast and reliable</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- DistilBERT Card -->
+                        <div class="col-lg-4 col-md-6">
+                            <div class="sentiment-method-card h-100 distilbert-card">
+                                <div class="method-header">
+                                    <div class="method-icon">
+                                        <i class="fas fa-brain"></i>
+                                    </div>
+                                    <h4 class="method-title">DistilBERT</h4>
+                                    <p class="method-subtitle">Transformer Model</p>
+                                </div>
+                                <div class="method-body">
+                                    <p class="method-description">Transformer model fine-tuned on Stanford Sentiment Treebank dataset with high accuracy.</p>
+                                    <div class="method-features">
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Deep learning approach</span>
+                                        </div>
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>~91% accuracy</span>
+                                        </div>
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Context-aware</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- RoBERTa Emotion Card -->
+                        <div class="col-lg-4 col-md-6">
+                            <div class="sentiment-method-card h-100 roberta-card">
+                                <div class="method-header">
+                                    <div class="method-icon">
+                                        <i class="fas fa-smile"></i>
+                                    </div>
+                                    <h4 class="method-title">RoBERTa Emotion</h4>
+                                    <p class="method-subtitle">Multi-label Emotion</p>
+                                </div>
+                                <div class="method-body">
+                                    <p class="method-description">Multi-label emotion detection model identifying specific emotions like joy, anger, sadness, etc.</p>
+                                    <div class="method-features">
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Emotion classification</span>
+                                        </div>
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Multi-label detection</span>
+                                        </div>
+                                        <div class="feature-item">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span>Detailed emotional analysis</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sentiment Scale Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-line"></i>
+                        Sentiment Scale
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-frown fa-2x text-danger mb-2"></i>
+                                    <h5>Negative</h5>
+                                    <p class="small mb-0">Score: -1.0 to -0.05</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-meh fa-2x text-warning mb-2"></i>
+                                    <h5>Neutral</h5>
+                                    <p class="small mb-0">Score: -0.05 to 0.05</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-smile fa-2x text-success mb-2"></i>
+                                    <h5>Positive</h5>
+                                    <p class="small mb-0">Score: 0.05 to 1.0</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-heart fa-2x text-info mb-2"></i>
+                                    <h5>Emotions</h5>
+                                    <p class="small mb-0">Joy, Anger, Sadness, Fear, etc.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Sentiment Analysis Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Analyze Sentiment" to see sentiment analysis results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when using Quick Nav; otherwise leave defaults
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const sampleSel = document.getElementById('sampleSelect');
+        if (sampleSel) sampleSel.value = 'Custom';
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            // Get sample text from server
+            fetch('/api/sample-text', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({sample_type: sampleType})
+            })
+            .then(response => response.json())
+            .then(data => {
+                textInput.value = data.text;
+            });
+        }
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to analyze.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        processSentiment();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-heart"></i> Analyze Sentiment';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Analyze Sentiment" to see sentiment analysis results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Process sentiment analysis
+function processSentiment() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to analyze.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/sentiment', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Analyzing sentiment and emotions...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/summarization.html

@@ -0,0 +1,396 @@
+{% extends "base.html" %}
+
+{% block title %}Text Summarization - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-compress-alt"></i>
+                        Text Summarization
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Condense text to capture its main points using both extractive and abstractive summarization techniques.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Text summarization condenses text to capture its main points, enabling quicker comprehension of large volumes of information.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="8" placeholder="Enter or paste your text here... (minimum 3 sentences, 40 words)">Climate change is the long-term alteration of temperature and typical weather patterns in a place. Climate change is already affecting our planet in many ways - from rising sea levels to more frequent extreme weather events. The primary cause of current climate change is largely human activity, like burning fossil fuels, which adds heat-trapping gases to Earth's atmosphere. The consequences of changing climate are already being felt worldwide, affecting ecosystems, agriculture, and human settlements. Addressing climate change requires immediate action to reduce greenhouse gas emissions and adapt to the changes that are already occurring.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-compress-alt"></i>
+                                Generate Summary
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Summary Settings Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-cog"></i>
+                        Summary Settings
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <label for="minLength" class="form-label">Minimum Length</label>
+                            <input type="range" class="form-range" id="minLength" min="10" max="100" value="30" step="5">
+                            <div class="d-flex justify-content-between">
+                                <small>10</small>
+                                <small id="minLengthValue">30</small>
+                                <small>100</small>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="maxLength" class="form-range" class="form-label">Maximum Length</label>
+                            <input type="range" class="form-range" id="maxLength" min="50" max="350" value="300" step="10">
+                            <div class="d-flex justify-content-between">
+                                <small>50</small>
+                                <small id="maxLengthValue">300</small>
+                                <small>350</small>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-check mt-4">
+                                <input class="form-check-input" type="checkbox" id="useSampling">
+                                <label class="form-check-label" for="useSampling">
+                                    Use sampling for diverse summaries
+                                </label>
+                                <div class="form-text">Enable to generate more creative summaries</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Summarization Methods Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Summarization Methods
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-cut fa-2x text-primary mb-2"></i>
+                                    <h5>Extractive Summarization</h5>
+                                    <p class="small">Selects important sentences from the original text using TextRank algorithm.</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Preserves original wording</li>
+                                        <li>• Fast and reliable</li>
+                                        <li>• Based on sentence importance</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-brain fa-2x text-success mb-2"></i>
+                                    <h5>Abstractive Summarization</h5>
+                                    <p class="small">Generates new sentences using BART model fine-tuned on CNN/DM dataset.</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Creates human-like summaries</li>
+                                        <li>• More natural language</li>
+                                        <li>• Higher compression ratios</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Summarization Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Generate Summary" to see summarization results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over text when explicitly requested by quick-nav
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    } else {
+        // Fresh route: leave default sample text
+    }
+    
+    // Update slider values
+    document.getElementById('minLength').addEventListener('input', function() {
+        document.getElementById('minLengthValue').textContent = this.value;
+    });
+    
+    document.getElementById('maxLength').addEventListener('input', function() {
+        document.getElementById('maxLengthValue').textContent = this.value;
+    });
+    
+    // Sample text dropdown handler with Custom restore
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        const routeKey = 'customTextBackup:' + (window.location.pathname || '/summarization');
+        
+        if (sampleType === 'Custom') {
+            // Restore previously typed custom text if any
+            const backup = sessionStorage.getItem(routeKey);
+            if (backup !== null) {
+                textInput.value = backup;
+            }
+            return;
+        }
+        
+        // Save current custom text before switching away
+        sessionStorage.setItem(routeKey, textInput.value);
+        
+        // Get sample text from server
+        fetch('/api/sample-text', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({sample_type: sampleType})
+        })
+        .then(response => response.json())
+        .then(data => {
+            textInput.value = data.text || '';
+        });
+    });
+    
+    // While typing, keep a backup of custom text for this route
+    (function(){
+        const textInput = document.getElementById('textInput');
+        const routeKey = 'customTextBackup:' + (window.location.pathname || '/summarization');
+        textInput.addEventListener('input', function(){
+            sessionStorage.setItem(routeKey, textInput.value);
+        });
+    })();
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to summarize.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        processSummarization();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-compress-alt"></i> Generate Summary';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Generate Summary" to see summarization results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Process summarization
+function processSummarization() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to summarize.');
+        return;
+    }
+    
+    const minLength = parseInt(document.getElementById('minLength').value);
+    const maxLength = parseInt(document.getElementById('maxLength').value);
+    const useSampling = document.getElementById('useSampling').checked;
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/summarization', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            text: text,
+            min_length: minLength,
+            max_length: maxLength,
+            use_sampling: useSampling
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Generating summaries...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/text_generation.html

@@ -0,0 +1,469 @@
+{% extends "base.html" %}
+
+{% block title %}Text Generation - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-magic"></i>
+                        Text Generation
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Generate human-like text continuations using advanced language models.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Text generation models can continue or expand on a given text prompt, creating new content that follows the style and context of the input.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your prompt:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter a prompt to continue or expand on...">Once upon a time in a magical forest,</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="Story">Story</option>
+                                <option value="Technical">Technical</option>
+                                <option value="Email">Email</option>
+                                <option value="Recipe">Recipe</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-magic"></i>
+                                Generate Text
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Generation Settings Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-cog"></i>
+                        Generation Settings
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="maxLength" class="form-label">Output Length</label>
+                            <input type="range" class="form-range" id="maxLength" min="30" max="250" value="100" step="10">
+                            <div class="d-flex justify-content-between">
+                                <small>30</small>
+                                <small id="maxLengthValue">100</small>
+                                <small>250</small>
+                            </div>
+                            <small class="text-muted">Maximum number of tokens to generate</small>
+                        </div>
+                        <div class="col-md-3">
+                            <label for="temperature" class="form-label">Temperature</label>
+                            <input type="range" class="form-range" id="temperature" min="0.1" max="1.5" value="0.7" step="0.1">
+                            <div class="d-flex justify-content-between">
+                                <small>0.1</small>
+                                <small id="temperatureValue">0.7</small>
+                                <small>1.5</small>
+                            </div>
+                            <small class="text-muted">Higher values make output more random</small>
+                        </div>
+                        <div class="col-md-3">
+                            <label for="topP" class="form-label">Top-p Sampling</label>
+                            <input type="range" class="form-range" id="topP" min="0.1" max="1.0" value="0.9" step="0.1">
+                            <div class="d-flex justify-content-between">
+                                <small>0.1</small>
+                                <small id="topPValue">0.9</small>
+                                <small>1.0</small>
+                            </div>
+                            <small class="text-muted">Controls diversity via nucleus sampling</small>
+                        </div>
+                        <div class="col-md-3">
+                            <label for="numSequences" class="form-label">Number of Generations</label>
+                            <input type="range" class="form-range" id="numSequences" min="1" max="3" value="1" step="1">
+                            <div class="d-flex justify-content-between">
+                                <small>1</small>
+                                <small id="numSequencesValue">1</small>
+                                <small>3</small>
+                            </div>
+                            <small class="text-muted">Generate multiple versions to choose from</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Model Info Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Model Information
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-brain fa-2x text-primary mb-2"></i>
+                                    <h5>GPT-2 Model</h5>
+                                    <p class="small">124M parameter language model trained on diverse internet text</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Coherent text continuations</li>
+                                        <li>• Style-aware generation</li>
+                                        <li>• Context understanding</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-sliders-h fa-2x text-success mb-2"></i>
+                                    <h5>Generation Controls</h5>
+                                    <p class="small">Fine-tune output characteristics with advanced parameters</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Temperature control</li>
+                                        <li>• Top-p sampling</li>
+                                        <li>• Length management</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-chart-line fa-2x text-info mb-2"></i>
+                                    <h5>Text Analysis</h5>
+                                    <p class="small">Comprehensive analysis of generated text quality and characteristics</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Word length distribution</li>
+                                        <li>• Lexical diversity</li>
+                                        <li>• Generation statistics</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Example Prompts Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-list"></i>
+                        Example Prompts
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Once upon a time in a magical forest,')">
+                                Once upon a time in a magical forest,
+                            </button>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('The research findings indicate that')">
+                                The research findings indicate that
+                            </button>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Dear customer service team, I am writing regarding')">
+                                Dear customer service team, I am writing regarding
+                            </button>
+                        </div>
+                        <div class="col-md-3">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('The recipe for the perfect chocolate cake requires')">
+                                The recipe for the perfect chocolate cake requires
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Generated Text Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Generate Text" to see text generation results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when navigating via Quick Nav; otherwise reset
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    const textInput = document.getElementById('textInput');
+    const sampleSelect = document.getElementById('sampleSelect');
+    const routeKey = 'customTextBackup:' + (window.location.pathname || '/text-generation');
+
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) textInput.value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    } else {
+        // Fresh route: reset to defaults
+        textInput.value = textInput.defaultValue || '';
+        if (sampleSelect) sampleSelect.value = 'Custom';
+    }
+    
+    // Update slider values
+    document.getElementById('maxLength').addEventListener('input', function() {
+        document.getElementById('maxLengthValue').textContent = this.value;
+    });
+    
+    document.getElementById('temperature').addEventListener('input', function() {
+        document.getElementById('temperatureValue').textContent = this.value;
+    });
+    
+    document.getElementById('topP').addEventListener('input', function() {
+        document.getElementById('topPValue').textContent = this.value;
+    });
+    
+    document.getElementById('numSequences').addEventListener('input', function() {
+        document.getElementById('numSequencesValue').textContent = this.value;
+    });
+    
+    // Sample text dropdown handler with Custom restore
+    sampleSelect.addEventListener('change', function() {
+        const sampleType = this.value;
+        if (sampleType === 'Custom') {
+            const backup = sessionStorage.getItem(routeKey);
+            if (backup !== null) textInput.value = backup;
+            return;
+        }
+
+        // Save current custom prompt before switching away
+        sessionStorage.setItem(routeKey, textInput.value);
+
+        // Set sample prompts based on type
+        const samples = {
+            'Story': 'Once upon a time in a magical forest,',
+            'Technical': 'The research findings indicate that',
+            'Email': 'Dear customer service team, I am writing regarding',
+            'Recipe': 'The recipe for the perfect chocolate cake requires'
+        };
+        textInput.value = samples[sampleType] || '';
+        sessionStorage.setItem('analysisText', textInput.value);
+    });
+
+    // While typing, keep backups
+    textInput.addEventListener('input', function(){
+        sessionStorage.setItem('analysisText', textInput.value);
+        sessionStorage.setItem(routeKey, textInput.value);
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter a prompt text.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+        this.disabled = true;
+        
+        // Process text
+        processTextGeneration();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-magic"></i> Generate Text';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Generate Text" to see text generation results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Set example prompt
+function setExample(prompt) {
+    document.getElementById('textInput').value = prompt;
+}
+
+// Process text generation
+function processTextGeneration() {
+    const text = document.getElementById('textInput').value.trim();
+    const maxLength = parseInt(document.getElementById('maxLength').value);
+    const temperature = parseFloat(document.getElementById('temperature').value);
+    const topP = parseFloat(document.getElementById('topP').value);
+    const numSequences = parseInt(document.getElementById('numSequences').value);
+    
+    if (!text) {
+        alert('Please enter a prompt text.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/text-generation', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            text: text,
+            max_length: maxLength,
+            temperature: temperature,
+            top_p: topP,
+            num_sequences: numSequences
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while generating text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to generate text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Generating text...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/tokenization.html

@@ -0,0 +1,323 @@
+{% extends "base.html" %}
+
+{% block title %}Tokenization - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-cut"></i>
+                        Tokenization
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Break text into smaller units called tokens using various tokenization methods.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Tokenization is the process of breaking text into smaller units called tokens, which can be words, characters, or subwords.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter or paste your text here...">The quick brown fox jumps over the lazy dog. It was a beautiful day in May of 2023!</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-cut"></i>
+                                Analyze Tokens
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tokenization Methods Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Tokenization Methods
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-font fa-2x text-primary mb-2"></i>
+                                    <h5>Word Tokenization</h5>
+                                    <p class="small">Splits text into individual words and punctuation marks using NLTK.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-paragraph fa-2x text-success mb-2"></i>
+                                    <h5>Sentence Tokenization</h5>
+                                    <p class="small">Divides text into sentences using punctuation and linguistic rules.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-brain fa-2x text-info mb-2"></i>
+                                    <h5>Linguistic Tokenization</h5>
+                                    <p class="small">Advanced tokenization with spaCy including POS tags and dependencies.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-puzzle-piece fa-2x text-warning mb-2"></i>
+                                    <h5>Subword Tokenization</h5>
+                                    <p class="small">Breaks words into smaller units using BERT WordPiece and GPT-2 BPE.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Tokenization Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Analyze Tokens" to see tokenization results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when using Quick Nav; otherwise leave defaults
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const sampleSel = document.getElementById('sampleSelect');
+        if (sampleSel) sampleSel.value = 'Custom';
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            // Get sample text from server
+            fetch('/api/sample-text', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({sample_type: sampleType})
+            })
+            .then(response => response.json())
+            .then(data => {
+                textInput.value = data.text;
+            });
+        }
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to tokenize.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        processTokenization();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-cut"></i> Analyze Tokens';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Analyze Tokens" to see tokenization results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Process tokenization
+function processTokenization() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to tokenize.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/tokenization', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Analyzing tokens...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/topic_analysis.html

@@ -0,0 +1,399 @@
+{% extends "base.html" %}
+
+{% block title %}Topic Analysis - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-project-diagram"></i>
+                        Topic Analysis
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Identify main themes and subjects in text using advanced topic modeling techniques.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Topic analysis identifies the main themes and subjects in a text, helping to categorize content and understand what it's about.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Text Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter your text:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="10" placeholder="Enter or paste your text here... (minimum 50 words for best results)">Artificial intelligence (AI) is intelligence demonstrated by machines, as opposed to the natural intelligence displayed by animals including humans. AI research has been defined as the field of study of intelligent agents, which refers to any system that perceives its environment and takes actions that maximize its chance of achieving its goals. The term "artificial intelligence" had previously been used to describe machines that mimic and display "human" cognitive skills that are associated with the human mind, such as "learning" and "problem-solving". This definition has since been rejected by major AI researchers who now describe AI in terms of rationality and acting rationally, which does not limit how intelligence can be articulated. AI applications include advanced web search engines, recommendation systems (used by YouTube, Amazon and Netflix), understanding human speech (such as Siri or Alexa), self-driving cars, and competing at the highest level in strategic game systems (such as chess and Go). As machines become increasingly capable, tasks considered to require "intelligence" are often removed from the definition of AI, a phenomenon known as the AI effect. For instance, optical character recognition is frequently excluded from things considered to be AI.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="News Article">News Article</option>
+                                <option value="Product Review">Product Review</option>
+                                <option value="Scientific Text">Scientific Text</option>
+                                <option value="Literary Text">Literary Text</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-project-diagram"></i>
+                                Analyze Topics
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Topic Analysis Methods Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Topic Analysis Methods
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-tags fa-2x text-primary mb-2"></i>
+                                    <h5>Topic Classification</h5>
+                                    <p class="small">Identifies predefined topic categories using keyword matching and scoring.</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Environment, Science, Business</li>
+                                        <li>• Health, Technology, Politics</li>
+                                        <li>• Sports, Entertainment, Travel</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-chart-bar fa-2x text-success mb-2"></i>
+                                    <h5>Term Frequency</h5>
+                                    <p class="small">Analyzes word frequencies to identify the most important terms and concepts.</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Word frequency analysis</li>
+                                        <li>• Key phrase extraction</li>
+                                        <li>• N-gram analysis</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-calculator fa-2x text-info mb-2"></i>
+                                    <h5>TF-IDF Analysis</h5>
+                                    <p class="small">Identifies distinctive terms using Term Frequency-Inverse Document Frequency.</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Sentence-level analysis</li>
+                                        <li>• Distinctive term identification</li>
+                                        <li>• Heatmap visualization</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-brain fa-2x text-warning mb-2"></i>
+                                    <h5>LDA Topic Modeling</h5>
+                                    <p class="small">Uses Latent Dirichlet Allocation to discover abstract topics in text.</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Probabilistic modeling</li>
+                                        <li>• Topic distribution</li>
+                                        <li>• Network visualization</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Analysis Features Info -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-line"></i>
+                        Analysis Features
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-cloud fa-2x text-primary mb-2"></i>
+                                    <h5>Word Clouds</h5>
+                                    <p class="small mb-0">Visual representation of term frequencies</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-network-wired fa-2x text-success mb-2"></i>
+                                    <h5>Network Graphs</h5>
+                                    <p class="small mb-0">Topic-term relationship visualization</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card text-center">
+                                <div class="card-body">
+                                    <i class="fas fa-fire fa-2x text-danger mb-2"></i>
+                                    <h5>Heatmaps</h5>
+                                    <p class="small mb-0">TF-IDF term importance visualization</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Topic Analysis Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Analyze Topics" to see topic analysis results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when requested
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Sample text dropdown handler with Custom restore
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        const routeKey = 'customTextBackup:' + (window.location.pathname || '/topic-analysis');
+        
+        if (sampleType === 'Custom') {
+            const backup = sessionStorage.getItem(routeKey);
+            if (backup !== null) textInput.value = backup;
+            return;
+        }
+        
+        sessionStorage.setItem(routeKey, textInput.value);
+        
+        fetch('/api/sample-text', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({sample_type: sampleType})
+        })
+        .then(response => response.json())
+        .then(data => {
+            textInput.value = data.text || '';
+        });
+    });
+    
+    // Keep backup while typing
+    (function(){
+        const textInput = document.getElementById('textInput');
+        const routeKey = 'customTextBackup:' + (window.location.pathname || '/topic-analysis');
+        textInput.addEventListener('input', function(){
+            sessionStorage.setItem(routeKey, textInput.value);
+        });
+    })();
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter some text to analyze.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+        this.disabled = true;
+        
+        // Process text
+        processTopicAnalysis();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-project-diagram"></i> Analyze Topics';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Analyze Topics" to see topic analysis results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Process topic analysis
+function processTopicAnalysis() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to analyze.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/topic-analysis', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text: text})
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while processing the text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to process text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Analyzing topics and themes...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/translation.html

@@ -0,0 +1,468 @@
+{% extends "base.html" %}
+
+{% block title %}Machine Translation - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-language"></i>
+                        Machine Translation
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Translate text between multiple languages using advanced neural machine translation models.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Machine translation converts text from one language to another while preserving meaning and context as accurately as possible.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter text to translate:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter text here to translate...">Hello, how are you today? I hope you're doing well.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="English">English</option>
+                                <option value="Spanish">Spanish</option>
+                                <option value="French">French</option>
+                                <option value="German">German</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-language"></i>
+                                Translate
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Language Selection Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-cog"></i>
+                        Language Selection
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label for="sourceLang" class="form-label">Source Language</label>
+                            <select id="sourceLang" class="form-select">
+                                <option value="auto" selected>Auto-detect</option>
+                                <option value="en">English</option>
+                                <option value="es">Spanish</option>
+                                <option value="fr">French</option>
+                                <option value="de">German</option>
+                                <option value="ru">Russian</option>
+                                <option value="zh">Chinese</option>
+                                <option value="ar">Arabic</option>
+                                <option value="hi">Hindi</option>
+                                <option value="ja">Japanese</option>
+                                <option value="pt">Portuguese</option>
+                                <option value="it">Italian</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="targetLang" class="form-label">Target Language</label>
+                            <select id="targetLang" class="form-select">
+                                <option value="en" selected>English</option>
+                                <option value="es">Spanish</option>
+                                <option value="fr">French</option>
+                                <option value="de">German</option>
+                                <option value="ru">Russian</option>
+                                <option value="zh">Chinese</option>
+                                <option value="ar">Arabic</option>
+                                <option value="hi">Hindi</option>
+                                <option value="ja">Japanese</option>
+                                <option value="pt">Portuguese</option>
+                                <option value="it">Italian</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Model Info Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-info-circle"></i>
+                        Model Information
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-brain fa-2x text-primary mb-2"></i>
+                                    <h5>Helsinki-NLP/opus-mt</h5>
+                                    <p class="small">Pre-trained neural machine translation models</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Transformer-based architecture</li>
+                                        <li>• Multiple language pairs</li>
+                                        <li>• High accuracy translations</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-globe fa-2x text-success mb-2"></i>
+                                    <h5>Language Support</h5>
+                                    <p class="small">Comprehensive language pair coverage</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• 12+ languages supported</li>
+                                        <li>• Auto-detection capability</li>
+                                        <li>• Bidirectional translation</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="card h-100">
+                                <div class="card-body text-center">
+                                    <i class="fas fa-chart-line fa-2x text-info mb-2"></i>
+                                    <h5>Translation Analysis</h5>
+                                    <p class="small">Comprehensive analysis of translation quality</p>
+                                    <ul class="list-unstyled small text-start">
+                                        <li>• Length comparison</li>
+                                        <li>• Language characteristics</li>
+                                        <li>• Translation statistics</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Example Texts Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-list"></i>
+                        Example Texts
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Hello, how are you today? I hope you\'re doing well.', 'auto', 'es')">
+                                Hello, how are you today? I hope you're doing well.
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('La vie est belle et pleine de surprises.', 'auto', 'en')">
+                                La vie est belle et pleine de surprises.
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Der schnelle braune Fuchs springt über den faulen Hund.', 'auto', 'fr')">
+                                Der schnelle braune Fuchs springt über den faulen Hund.
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <button class="btn btn-outline-primary w-100 mb-2" onclick="setExample('Me gustaría reservar una mesa para dos personas esta noche.', 'auto', 'en')">
+                                Me gustaría reservar una mesa para dos personas esta noche.
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Translation Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Translate" to see translation results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry inputs when navigating via Quick Nav
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    const textInput = document.getElementById('textInput');
+    const sampleSelect = document.getElementById('sampleSelect');
+    const sourceLang = document.getElementById('sourceLang');
+    const targetLang = document.getElementById('targetLang');
+    const routeKey = 'customTextBackup:' + (window.location.pathname || '/translation');
+
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) textInput.value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    } else {
+        // Fresh route: reset to defaults
+        textInput.value = textInput.defaultValue || '';
+        if (sampleSelect) sampleSelect.value = 'Custom';
+        if (sourceLang) sourceLang.value = sourceLang.querySelector('option[selected]')?.value || 'auto';
+        if (targetLang) targetLang.value = targetLang.querySelector('option[selected]')?.value || 'en';
+    }
+    
+    // Sample text dropdown handler with Custom restore
+    sampleSelect.addEventListener('change', function() {
+        const sampleType = this.value;
+        if (sampleType === 'Custom') {
+            const backupJson = sessionStorage.getItem(routeKey);
+            if (backupJson) {
+                try {
+                    const backup = JSON.parse(backupJson);
+                    textInput.value = backup.text || '';
+                    if (backup.source) sourceLang.value = backup.source;
+                    if (backup.target) targetLang.value = backup.target;
+                } catch {}
+            }
+            return;
+        }
+
+        // Save current custom input before switching away
+        sessionStorage.setItem(routeKey, JSON.stringify({
+            text: textInput.value,
+            source: sourceLang.value,
+            target: targetLang.value
+        }));
+
+        // Set sample prompts based on type
+        const samples = {
+            'English': { text: 'Hello, how are you today? I hope you\'re doing well.', source: 'auto', target: 'es' },
+            'Spanish': { text: 'La vida es bella y llena de sorpresas.', source: 'auto', target: 'en' },
+            'French': { text: 'La vie est belle et pleine de surprises.', source: 'auto', target: 'en' },
+            'German': { text: 'Der schnelle braune Fuchs springt über den faulen Hund.', source: 'auto', target: 'fr' }
+        };
+        if (samples[sampleType]) {
+            textInput.value = samples[sampleType].text;
+            sourceLang.value = samples[sampleType].source;
+            targetLang.value = samples[sampleType].target;
+            sessionStorage.setItem('analysisText', textInput.value);
+        }
+    });
+
+    // While typing or changing languages, keep a backup and analysisText
+    textInput.addEventListener('input', function(){
+        sessionStorage.setItem('analysisText', textInput.value);
+        sessionStorage.setItem(routeKey, JSON.stringify({ text: textInput.value, source: sourceLang.value, target: targetLang.value }));
+    });
+    sourceLang.addEventListener('change', function(){
+        sessionStorage.setItem(routeKey, JSON.stringify({ text: textInput.value, source: sourceLang.value, target: targetLang.value }));
+    });
+    targetLang.addEventListener('change', function(){
+        sessionStorage.setItem(routeKey, JSON.stringify({ text: textInput.value, source: sourceLang.value, target: targetLang.value }));
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter text to translate.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Translating...';
+        this.disabled = true;
+        
+        // Process translation
+        processTranslation();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-language"></i> Translate';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Translate" to see translation results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Set example text and language settings
+function setExample(text, sourceLang, targetLang) {
+    document.getElementById('textInput').value = text;
+    document.getElementById('sourceLang').value = sourceLang;
+    document.getElementById('targetLang').value = targetLang;
+}
+
+// Process translation
+function processTranslation() {
+    const text = document.getElementById('textInput').value.trim();
+    const sourceLang = document.getElementById('sourceLang').value;
+    const targetLang = document.getElementById('targetLang').value;
+    
+    if (!text) {
+        alert('Please enter text to translate.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/translation', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            text: text,
+            source_lang: sourceLang,
+            target_lang: targetLang
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displayResults(data.result);
+        } else {
+            showError(data.error || 'An error occurred while translating text');
+        }
+    })
+    .catch(error => {
+        showError('Failed to translate text: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Translating text...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+</script>
+{% endblock %}

templates/vector_embeddings.html

@@ -0,0 +1,499 @@
+{% extends "base.html" %}
+
+{% block title %}Vector Embeddings & Semantic Search - NLP Ultimate Tutorial{% endblock %}
+
+{% block content %}
+<div class="container">
+    <!-- Header Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="mb-0">
+                        <i class="fas fa-project-diagram"></i>
+                        Vector Embeddings & Semantic Search
+                    </h1>
+                </div>
+                <div class="card-body">
+                    <p class="lead">Convert text into numerical representations and perform semantic search to find meaningfully similar content.</p>
+                    
+                    <div class="alert alert-info">
+                        <i class="fas fa-info-circle"></i>
+                        <strong>About:</strong> Vector embeddings convert text into numerical representations where similar texts are placed closer together in a high-dimensional space.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% include "_analysis_nav.html" %}
+
+    <!-- Input Section -->
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-keyboard"></i>
+                        Enter text to analyze:
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <textarea id="textInput" class="form-control" rows="6" placeholder="Enter text to analyze with vector embeddings...">The International Space Station (ISS) is a modular space station in low Earth orbit. It is a multinational collaborative project involving five space agencies: NASA (United States), Roscosmos (Russia), JAXA (Japan), ESA (Europe), and CSA (Canada). The ownership and use of the space station is established by intergovernmental treaties and agreements. The ISS serves as a microgravity and space environment research laboratory in which scientific research is conducted in astrobiology, astronomy, meteorology, physics, and other fields.</textarea>
+                        </div>
+                        <div class="col-md-4">
+                            <label for="sampleSelect" class="form-label">Or choose a sample:</label>
+                            <select id="sampleSelect" class="form-select">
+                                <option value="Custom">Custom</option>
+                                <option value="Space Station">Space Station</option>
+                                <option value="Python">Python</option>
+                                <option value="Climate">Climate</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <button id="processBtn" class="btn btn-primary btn-lg">
+                                <i class="fas fa-project-diagram"></i>
+                                Generate Embeddings
+                            </button>
+                        </div>
+                        <div>
+                            <button id="clearBtn" class="btn btn-outline-secondary">
+                                <i class="fas fa-trash"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!-- Results Section -->
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="mb-0">
+                        <i class="fas fa-chart-bar"></i>
+                        Embedding Analysis Results
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <div id="resultsContainer">
+                        <div class="text-center text-muted py-5">
+                            <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                            <p>Click "Generate Embeddings" to see vector analysis results</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Initialize page
+document.addEventListener('DOMContentLoaded', function() {
+    // Only carry over when using Quick Nav; otherwise leave defaults
+    const shouldCarry = sessionStorage.getItem('carryTextOnNextPage') === '1';
+    if (shouldCarry) {
+        const storedText = sessionStorage.getItem('analysisText');
+        if (storedText) document.getElementById('textInput').value = storedText;
+        sessionStorage.removeItem('carryTextOnNextPage');
+    }
+    
+    // Sample text dropdown handler
+    document.getElementById('sampleSelect').addEventListener('change', function() {
+        const sampleType = this.value;
+        const textInput = document.getElementById('textInput');
+        
+        if (sampleType === 'Custom') {
+            textInput.value = '';
+        } else {
+            // Set sample prompts based on type
+            const samples = {
+                'Space Station': 'The International Space Station (ISS) is a modular space station in low Earth orbit. It is a multinational collaborative project involving five space agencies: NASA (United States), Roscosmos (Russia), JAXA (Japan), ESA (Europe), and CSA (Canada). The ownership and use of the space station is established by intergovernmental treaties and agreements. The ISS serves as a microgravity and space environment research laboratory in which scientific research is conducted in astrobiology, astronomy, meteorology, physics, and other fields.',
+                'Python': 'Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Python is dynamically typed and garbage-collected. It supports multiple programming paradigms, including structured, object-oriented and functional programming. It is often described as a \'batteries included\' language due to its comprehensive standard library.',
+                'Climate': 'Climate change refers to long-term shifts in global temperatures and weather patterns. While climate variations are natural, human activities have been the main driver of climate change since the 1800s, primarily due to burning fossil fuels, which generates heat-trapping gases. The effects of climate change include rising sea levels, more frequent extreme weather events, and changes in precipitation patterns.'
+            };
+            
+            if (samples[sampleType]) {
+                textInput.value = samples[sampleType];
+            }
+        }
+    });
+    
+    // Process button handler
+    document.getElementById('processBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter text to analyze.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+        this.disabled = true;
+        
+        // Process embeddings
+        processEmbeddings();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-project-diagram"></i> Generate Embeddings';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Search button handler
+    document.getElementById('searchBtn').addEventListener('click', function() {
+        const text = document.getElementById('textInput').value.trim();
+        const query = document.getElementById('searchInput').value.trim();
+        
+        if (!text) {
+            alert('Please enter text to analyze first.');
+            return;
+        }
+        
+        if (!query) {
+            alert('Please enter a search query.');
+            return;
+        }
+        
+        // Show loading state
+        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Searching...';
+        this.disabled = true;
+        
+        // Process search
+        processSearch();
+        
+        // Reset button after a delay
+        setTimeout(() => {
+            this.innerHTML = '<i class="fas fa-search"></i> Search';
+            this.disabled = false;
+        }, 2000);
+    });
+    
+    // Clear button handler
+    document.getElementById('clearBtn').addEventListener('click', function() {
+        document.getElementById('textInput').value = '';
+        document.getElementById('searchInput').value = '';
+        document.getElementById('resultsContainer').innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-arrow-up fa-2x mb-3"></i>
+                <p>Click "Generate Embeddings" to see vector analysis results</p>
+            </div>
+        `;
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to process
+        if (e.ctrlKey && e.key === 'Enter') {
+            document.getElementById('processBtn').click();
+        }
+        
+        // Ctrl+L to clear
+        if (e.ctrlKey && e.key === 'l') {
+            e.preventDefault();
+            document.getElementById('clearBtn').click();
+        }
+    });
+});
+
+// Set example text
+function setExample(text) {
+    document.getElementById('textInput').value = text;
+}
+
+// Process embeddings
+function processEmbeddings() {
+    const text = document.getElementById('textInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter text to analyze.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/vector-embeddings', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            text: text
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('API Response:', data); // Debug log
+        if (data.success) {
+            console.log('Result length:', data.result ? data.result.length : 'null'); // Debug log
+            displayResults(data.result);
+        } else {
+            console.error('API Error:', data.error); // Debug log
+            showError(data.error || 'An error occurred while generating embeddings');
+        }
+    })
+    .catch(error => {
+        showError('Failed to generate embeddings: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Process search
+function processSearch() {
+    const text = document.getElementById('textInput').value.trim();
+    const query = document.getElementById('searchInput').value.trim();
+    
+    if (!text) {
+        alert('Please enter text to analyze first.');
+        return;
+    }
+    
+    if (!query) {
+        alert('Please enter a search query.');
+        return;
+    }
+    
+    showLoading('resultsContainer');
+    
+    fetch('/api/vector-embeddings', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            text: text,
+            query: query
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displaySearchResults(data.results);
+        } else {
+            showError(data.error || 'An error occurred while searching');
+        }
+    })
+    .catch(error => {
+        showError('Failed to perform search: ' + error.message);
+    })
+    .finally(() => {
+        hideLoading('resultsContainer');
+    });
+}
+
+// Show loading state
+function showLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="text-center py-4">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Processing...</p>
+            </div>
+        `;
+    }
+}
+
+// Hide loading state
+function hideLoading(elementId) {
+    const element = document.getElementById(elementId);
+    if (element && element.innerHTML.includes('spinner-border')) {
+        element.innerHTML = '';
+    }
+}
+
+// Show error message
+function showError(message, elementId = 'resultsContainer') {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.innerHTML = `
+            <div class="alert alert-danger fade-in">
+                <i class="fas fa-exclamation-triangle"></i>
+                <strong>Error:</strong> ${message}
+            </div>
+        `;
+    }
+}
+
+// Display results
+function displayResults(result) {
+    console.log('displayResults called with:', result ? result.substring(0, 200) + '...' : 'null'); // Debug log
+    const container = document.getElementById('resultsContainer');
+    console.log('Results container found:', !!container); // Debug log
+    if (container) {
+        container.innerHTML = result;
+        container.classList.add('fade-in');
+        console.log('Results inserted, container innerHTML length:', container.innerHTML.length); // Debug log
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+// Display search results
+function displaySearchResults(results) {
+    const container = document.getElementById('resultsContainer');
+    if (container) {
+        let html = '<h4>Search Results:</h4>';
+        
+        if (results && results.length > 0) {
+            results.forEach((result, index) => {
+                const scorePercent = Math.round(result.score * 100);
+                html += `
+                    <div class="card mb-2">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-8">
+                                    <p class="mb-1">${result.text}</p>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="text-end">
+                                        <span class="badge bg-primary">${scorePercent}%</span>
+                                    </div>
+                                    <div class="progress mt-1" style="height: 8px;">
+                                        <div class="progress-bar" role="progressbar" style="width: ${scorePercent}%"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+        } else {
+            html += '<div class="alert alert-info">No relevant results found. Try different search terms.</div>';
+        }
+        
+        container.innerHTML = html;
+        container.classList.add('fade-in');
+        
+        // Scroll to results
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+// Semantic search function (called from the generated search interface)
+function performSemanticSearch() {
+    const searchInput = document.getElementById('search-input');
+    const textInput = document.getElementById('textInput');
+    
+    if (!searchInput || !textInput) {
+        alert('Please generate embeddings first, then try searching.');
+        return;
+    }
+    
+    const query = searchInput.value.trim();
+    const context = textInput.value.trim();
+    
+    if (!query) {
+        alert('Please enter a search query.');
+        return;
+    }
+    
+    if (!context) {
+        alert('Please enter text to analyze first.');
+        return;
+    }
+    
+    // Show loading
+    const resultsDiv = document.getElementById('search-results');
+    const resultsContainer = document.getElementById('results-container');
+    
+    if (resultsDiv) {
+        resultsDiv.style.display = 'block';
+        resultsContainer.innerHTML = `
+            <div class="text-center py-3">
+                <div class="spinner-border text-warning" role="status">
+                    <span class="visually-hidden">Searching...</span>
+                </div>
+                <p class="mt-2">Searching for semantically similar content...</p>
+            </div>
+        `;
+    }
+    
+    // Perform search
+    fetch('/api/semantic-search', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            context: context,
+            query: query
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            displaySearchResults(data.results);
+        } else {
+            showSearchError(data.error || 'Search failed');
+        }
+    })
+    .catch(error => {
+        showSearchError('Failed to perform search: ' + error.message);
+    });
+}
+
+function displaySearchResults(results) {
+    const resultsContainer = document.getElementById('results-container');
+    
+    if (!results || results.length === 0) {
+        resultsContainer.innerHTML = `
+            <div class="text-center py-4">
+                <i class="fas fa-search fa-2x text-muted mb-3"></i>
+                <p class="text-muted">No similar content found.</p>
+            </div>
+        `;
+        return;
+    }
+    
+    let html = '';
+    results.forEach((result, index) => {
+        const percentage = (result.score * 100).toFixed(1);
+        const badgeClass = result.score > 0.8 ? 'bg-success' : result.score > 0.6 ? 'bg-warning' : 'bg-secondary';
+        
+        html += `
+            <div class="mb-3 p-3 border rounded bg-white">
+                <div class="d-flex justify-content-between align-items-start mb-2">
+                    <h6 class="mb-0 text-primary">Result ${index + 1}</h6>
+                    <span class="badge ${badgeClass}">${percentage}% match</span>
+                </div>
+                <p class="mb-0">${result.text}</p>
+            </div>
+        `;
+    });
+    
+    resultsContainer.innerHTML = html;
+}
+
+function showSearchError(message) {
+    const resultsContainer = document.getElementById('results-container');
+    resultsContainer.innerHTML = `
+        <div class="alert alert-danger">
+            <i class="fas fa-exclamation-triangle me-2"></i>
+            <strong>Search Error:</strong> ${message}
+        </div>
+    `;
+}
+</script>
+{% endblock %}

utils/__init__.py

@@ -0,0 +1,86 @@
+# Utils package for NLP Ultimate Tutorial Flask Application
+
+from .helpers import (
+    fig_to_html,
+    df_to_html_table,
+    text_statistics,
+    create_text_length_chart,
+    format_pos_token,
+    create_entity_span,
+    create_sentiment_color,
+    format_sentiment_score,
+    create_progress_bar,
+    create_confidence_gauge
+)
+
+from .model_loader import (
+    download_nltk_resources,
+    load_spacy,
+    load_sentiment_analyzer,
+    load_emotion_classifier,
+    load_summarizer,
+    load_qa_pipeline,
+    load_translator,
+    load_text_generator,
+    load_zero_shot,
+    load_embedding_model,
+    initialize_all_models,
+    get_model_status,
+    clear_models
+)
+
+from .visualization import (
+    setup_mpl_style,
+    create_bar_chart,
+    create_horizontal_bar_chart,
+    create_pie_chart,
+    create_line_chart,
+    create_scatter_plot,
+    create_heatmap,
+    create_word_cloud_placeholder,
+    create_network_graph,
+    create_gauge_chart,
+    create_comparison_chart
+)
+
+__all__ = [
+    # Helpers
+    'fig_to_html',
+    'df_to_html_table',
+    'text_statistics',
+    'create_text_length_chart',
+    'format_pos_token',
+    'create_entity_span',
+    'create_sentiment_color',
+    'format_sentiment_score',
+    'create_progress_bar',
+    'create_confidence_gauge',
+    
+    # Model Loader
+    'download_nltk_resources',
+    'load_spacy',
+    'load_sentiment_analyzer',
+    'load_emotion_classifier',
+    'load_summarizer',
+    'load_qa_pipeline',
+    'load_translator',
+    'load_text_generator',
+    'load_zero_shot',
+    'load_embedding_model',
+    'initialize_all_models',
+    'get_model_status',
+    'clear_models',
+    
+    # Visualization
+    'setup_mpl_style',
+    'create_bar_chart',
+    'create_horizontal_bar_chart',
+    'create_pie_chart',
+    'create_line_chart',
+    'create_scatter_plot',
+    'create_heatmap',
+    'create_word_cloud_placeholder',
+    'create_network_graph',
+    'create_gauge_chart',
+    'create_comparison_chart'
+]

utils/helpers.py

@@ -0,0 +1,172 @@
+import base64
+import matplotlib.pyplot as plt
+import pandas as pd
+from io import BytesIO
+import plotly.graph_objects as go
+import nltk
+
+def fig_to_html(fig, width=None):
+    """Convert a matplotlib figure to HTML with optional responsive width"""
+    buf = BytesIO()
+    fig.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+    buf.seek(0)
+    b64 = base64.b64encode(buf.read()).decode()
+    
+    # Add style attribute if width is specified
+    style_attr = ""
+    if width:
+        style_attr = f' style="width: {width}; max-width: 100%;"'
+    
+    return f'<img{style_attr} src="data:image/png;base64,{b64}" alt="Plot">'
+
+def df_to_html_table(df):
+    """Convert a pandas dataframe to an HTML table with Bootstrap styling"""
+    return df.to_html(index=False, classes='table table-striped table-hover', escape=False, table_id='data-table')
+
+def text_statistics(text):
+    """Calculate basic text statistics"""
+    if not text:
+        return {"chars": 0, "words": 0, "sentences": 0}
+    
+    word_count = len(text.split())
+    char_count = len(text)
+    
+    try:
+        sentence_count = len(nltk.sent_tokenize(text))
+    except:
+        sentence_count = 0
+    
+    return {"chars": char_count, "words": word_count, "sentences": sentence_count}
+
+def create_text_length_chart(text):
+    """Create chart showing text length metrics."""
+    words = text.split()
+    sentences = nltk.sent_tokenize(text)
+    chars = len(text)
+    
+    fig = go.Figure()
+    
+    fig.add_trace(go.Bar(
+        x=['Characters', 'Words', 'Sentences'],
+        y=[chars, len(words), len(sentences)],
+        marker_color=['#90CAF9', '#1E88E5', '#0D47A1']
+    ))
+    
+    fig.update_layout(
+        title="Text Length Metrics",
+        xaxis_title="Metric",
+        yaxis_title="Count",
+        template="plotly_white",
+        height=400
+    )
+    
+    return fig
+
+def get_image_download_link(fig, filename, text):
+    """Generate an HTML representation of a figure - placeholder for Gradio compatibility"""
+    return fig_to_html(fig)
+
+def get_table_download_link(df, filename, text):
+    """Generate an HTML representation of a dataframe - placeholder for Gradio compatibility"""
+    return df_to_html_table(df)
+
+def format_pos_token(token, pos, explanation=""):
+    """Format a token with its part-of-speech tag in HTML"""
+    # Define colors for different POS types
+    pos_colors = {
+        'NOUN': '#E3F2FD',  # Light blue
+        'PROPN': '#E3F2FD',  # Light blue (same as NOUN)
+        'VERB': '#E8F5E9',  # Light green
+        'ADJ': '#FFF8E1',   # Light yellow
+        'ADV': '#F3E5F5',   # Light purple
+        'ADP': '#EFEBE9',   # Light brown
+        'PRON': '#E8EAF6',  # Light indigo
+        'DET': '#E0F7FA',   # Light cyan
+        'CONJ': '#FBE9E7',  # Light deep orange
+        'CCONJ': '#FBE9E7',  # Light deep orange (for compatibility)
+        'SCONJ': '#FBE9E7',  # Light deep orange (for compatibility)
+        'NUM': '#FFEBEE',   # Light red
+        'PART': '#F1F8E9',  # Light light green
+        'INTJ': '#FFF3E0',  # Light orange
+        'PUNCT': '#FAFAFA',  # Light grey
+        'SYM': '#FAFAFA',   # Light grey (same as PUNCT)
+        'X': '#FAFAFA',     # Light grey (for other)
+    }
+    
+    # Get color for this POS tag, default to light grey if not found
+    bg_color = pos_colors.get(pos, '#FAFAFA')
+    
+    # Create HTML for the token with tooltip
+    if explanation:
+        return f'<span class="pos-token" style="background-color: {bg_color}; border: 1px solid #ccc; padding: 3px 6px; margin: 2px; display: inline-block; border-radius: 3px;" title="{explanation}">{token} <small style="color: #666; font-size: 0.8em;">({pos})</small></span>'
+    else:
+        return f'<span class="pos-token" style="background-color: {bg_color}; border: 1px solid #ccc; padding: 3px 6px; margin: 2px; display: inline-block; border-radius: 3px;">{token} <small style="color: #666; font-size: 0.8em;">({pos})</small></span>'
+
+def create_entity_span(text, entity_type, explanation=""):
+    """Format a named entity with its type in HTML"""
+    # Define colors for different entity types
+    entity_colors = {
+        'PERSON': '#E3F2FD',      # Light blue
+        'ORG': '#E8F5E9',         # Light green
+        'GPE': '#FFF8E1',         # Light yellow
+        'LOC': '#F3E5F5',         # Light purple
+        'PRODUCT': '#EFEBE9',     # Light brown
+        'EVENT': '#E8EAF6',       # Light indigo
+        'WORK_OF_ART': '#E0F7FA', # Light cyan
+        'LAW': '#FBE9E7',         # Light deep orange
+        'LANGUAGE': '#FFEBEE',    # Light red
+        'DATE': '#F1F8E9',        # Light light green
+        'TIME': '#FFF3E0',        # Light orange
+        'PERCENT': '#FAFAFA',     # Light grey
+        'MONEY': '#FAFAFA',       # Light grey
+        'QUANTITY': '#FAFAFA',    # Light grey
+        'ORDINAL': '#FAFAFA',     # Light grey
+        'CARDINAL': '#FAFAFA',    # Light grey
+    }
+    
+    # Get color for this entity type, default to light grey if not found
+    bg_color = entity_colors.get(entity_type, '#FAFAFA')
+    
+    # Create HTML for the entity with tooltip
+    if explanation:
+        return f'<span class="entity-token" style="background-color: {bg_color}; border: 1px solid #ccc; padding: 3px 6px; margin: 2px; display: inline-block; border-radius: 3px;" title="{explanation}">{text} <small style="color: #666; font-size: 0.8em;">({entity_type})</small></span>'
+    else:
+        return f'<span class="entity-token" style="background-color: {bg_color}; border: 1px solid #ccc; padding: 3px 6px; margin: 2px; display: inline-block; border-radius: 3px;">{text} <small style="color: #666; font-size: 0.8em;">({entity_type})</small></span>'
+
+def create_sentiment_color(score):
+    """Create color based on sentiment score"""
+    if score > 0.1:
+        return '#4CAF50'  # Green for positive
+    elif score < -0.1:
+        return '#F44336'  # Red for negative
+    else:
+        return '#FF9800'  # Orange for neutral
+
+def format_sentiment_score(score, label):
+    """Format sentiment score with appropriate color"""
+    color = create_sentiment_color(score)
+    return f'<span style="color: {color}; font-weight: bold;">{label} ({score:.3f})</span>'
+
+def create_progress_bar(value, max_value=1.0, color='#1976D2'):
+    """Create HTML progress bar"""
+    percentage = (value / max_value) * 100
+    return f'''
+    <div class="progress mb-2" style="height: 20px;">
+        <div class="progress-bar" role="progressbar" style="width: {percentage}%; background-color: {color};" 
+             aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max_value}">
+            {value:.3f}
+        </div>
+    </div>
+    '''
+
+def create_confidence_gauge(score, label):
+    """Create confidence gauge visualization"""
+    color = '#4CAF50' if score > 0.7 else '#FF9800' if score > 0.4 else '#F44336'
+    return f'''
+    <div class="text-center">
+        <div class="display-6 text-{color.replace('#', '')}" style="color: {color};">
+            {score:.1%}
+        </div>
+        <div class="small text-muted">{label}</div>
+    </div>
+    '''

utils/model_loader.py

@@ -0,0 +1,222 @@
+import nltk
+import spacy
+from transformers import pipeline
+
+# Global models dictionary for persistent access
+models = {
+    "nlp": None,
+    "sentiment_analyzer": None,
+    "emotion_classifier": None,
+    "summarizer": None,
+    "qa_pipeline": None,
+    "translation_pipeline": None,
+    "text_generator": None,
+    "zero_shot": None,
+    "embedding_model": None
+}
+
+def download_nltk_resources():
+    """Download and initialize NLTK resources"""
+    resources = ['punkt', 'stopwords', 'vader_lexicon', 'wordnet', 'averaged_perceptron_tagger', 'sentiwordnet']
+    for resource in resources:
+        try:
+            if resource == 'punkt':
+                nltk.data.find(f'tokenizers/{resource}')
+            elif resource in ['stopwords', 'wordnet']:
+                nltk.data.find(f'corpora/{resource}')
+            elif resource == 'vader_lexicon':
+                nltk.data.find(f'sentiment/{resource}')
+            elif resource == 'averaged_perceptron_tagger':
+                nltk.data.find(f'taggers/{resource}')
+            elif resource == 'sentiwordnet':
+                nltk.data.find(f'corpora/{resource}')
+        except LookupError:
+            print(f"Downloading required NLTK resource: {resource}")
+            nltk.download(resource)
+
+def load_spacy():
+    """Load spaCy model"""
+    if models["nlp"] is None:
+        try:
+            models["nlp"] = spacy.load("en_core_web_sm")
+        except:
+            print("SpaCy model not found. Please run: python -m spacy download en_core_web_sm")
+    return models["nlp"]
+
+def load_sentiment_analyzer():
+    """Load sentiment analysis model"""
+    if models["sentiment_analyzer"] is None:
+        try:
+            models["sentiment_analyzer"] = pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
+        except Exception as e:
+            print(f"Failed to load sentiment analyzer: {e}")
+    return models["sentiment_analyzer"]
+
+def load_emotion_classifier():
+    """Load emotion classification model"""
+    if models["emotion_classifier"] is None:
+        try:
+            models["emotion_classifier"] = pipeline(
+                "text-classification", 
+                model="cardiffnlp/twitter-roberta-base-emotion",
+                return_all_scores=True
+            )
+        except Exception as e:
+            print(f"Failed to load emotion classifier: {e}")
+    return models["emotion_classifier"]
+
+def load_summarizer():
+    """Load summarization model"""
+    if models["summarizer"] is None:
+        try:
+            models["summarizer"] = pipeline("summarization", model="facebook/bart-large-cnn")
+        except Exception as e:
+            print(f"Failed to load summarizer: {e}")
+    return models["summarizer"]
+
+def load_qa_pipeline():
+    """Load or initialize the question answering pipeline."""
+    if models["qa_pipeline"] is None:
+        try:
+            from transformers import pipeline
+            
+            # Use a smaller model to reduce memory usage and improve speed
+            models["qa_pipeline"] = pipeline(
+                "question-answering",
+                model="deepset/roberta-base-squad2",  # You can change this to a different model if needed
+                tokenizer="deepset/roberta-base-squad2"
+            )
+        except Exception as e:
+            print(f"Error loading QA pipeline: {e}")
+            models["qa_pipeline"] = None
+            raise e
+    return models["qa_pipeline"]
+
+def load_translation_pipeline():
+    """Load translation model"""
+    if models["translation_pipeline"] is None:
+        try:
+            models["translation_pipeline"] = pipeline("translation_en_to_fr", model="Helsinki-NLP/opus-mt-en-fr")
+        except Exception as e:
+            print(f"Failed to load translation model: {e}")
+    return models["translation_pipeline"]
+
+def load_translator(source_lang="auto", target_lang="en"):
+    """
+    Load a machine translation model for the given language pair.
+    
+    Args:
+        source_lang (str): Source language code, or 'auto' for automatic detection
+        target_lang (str): Target language code
+        
+    Returns:
+        A translation pipeline or model
+    """
+    from transformers import pipeline, AutoModelForSeq2SeqLM, AutoTokenizer
+    
+    try:
+        # For auto language detection, use a more general model
+        if source_lang == "auto":
+            # Using Helsinki-NLP's opus-mt model for translation
+            model_name = "Helsinki-NLP/opus-mt-mul-en"  # Multilingual to English
+            translator = pipeline("translation", model=model_name)
+        else:
+            # For specific language pairs
+            model_name = f"Helsinki-NLP/opus-mt-{source_lang}-{target_lang}"
+            
+            # Load the model and tokenizer
+            model = AutoModelForSeq2SeqLM.from_pretrained(model_name)
+            tokenizer = AutoTokenizer.from_pretrained(model_name)
+            
+            # Create the translation pipeline
+            translator = pipeline("translation", model=model, tokenizer=tokenizer)
+            
+        return translator
+    except Exception as e:
+        # Fallback to a more general model if language pair isn't available
+        try:
+            # Use MarianMT model for many language pairs
+            model_name = "Helsinki-NLP/opus-mt-mul-en"  # Multilingual to English
+            translator = pipeline("translation", model=model_name)
+            return translator
+        except Exception as nested_e:
+            # If all else fails, return a simple callable object that returns an error message
+            class ErrorTranslator:
+                def __call__(self, text, **kwargs):
+                    return [{"translation_text": f"Error loading translation model: {str(e)}. Fallback also failed: {str(nested_e)}"}]
+            return ErrorTranslator()
+
+def load_text_generator():
+    """Load text generation model"""
+    if models["text_generator"] is None:
+        try:
+            models["text_generator"] = pipeline("text-generation", model="gpt2")
+        except Exception as e:
+            print(f"Failed to load text generator: {e}")
+    return models["text_generator"]
+
+def load_zero_shot():
+    """Load zero-shot classification model"""
+    if models["zero_shot"] is None:
+        try:
+            models["zero_shot"] = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
+        except Exception as e:
+            print(f"Failed to load zero-shot classifier: {e}")
+    return models["zero_shot"]
+
+def load_embedding_model():
+    """Load sentence embedding model for semantic search"""
+    if models.get("embedding_model") is None:
+        try:
+            from sentence_transformers import SentenceTransformer
+            models["embedding_model"] = SentenceTransformer('all-MiniLM-L6-v2')
+        except Exception as e:
+            print(f"Failed to load embedding model: {e}")
+    return models["embedding_model"]
+
+def initialize_all_models():
+    """Initialize all models for better performance"""
+    print("Initializing NLP models...")
+    
+    # Download NLTK resources first
+    download_nltk_resources()
+    
+    # Load spaCy model
+    try:
+        load_spacy()
+        print("✓ spaCy model loaded")
+    except Exception as e:
+        print(f"✗ Failed to load spaCy: {e}")
+    
+    # Load transformer models (these might take time)
+    models_to_load = [
+        ("Sentiment Analyzer", load_sentiment_analyzer),
+        ("Emotion Classifier", load_emotion_classifier),
+        ("Summarizer", load_summarizer),
+        ("QA Pipeline", load_qa_pipeline),
+        ("Text Generator", load_text_generator),
+        ("Zero-shot Classifier", load_zero_shot),
+        ("Embedding Model", load_embedding_model)
+    ]
+    
+    for name, loader_func in models_to_load:
+        try:
+            loader_func()
+            print(f"✓ {name} loaded")
+        except Exception as e:
+            print(f"✗ Failed to load {name}: {e}")
+    
+    print("Model initialization complete!")
+
+def get_model_status():
+    """Get status of all models"""
+    status = {}
+    for model_name, model in models.items():
+        status[model_name] = model is not None
+    return status
+
+def clear_models():
+    """Clear all loaded models to free memory"""
+    for key in models:
+        models[key] = None
+    print("All models cleared from memory")

utils/model_loader_hf.py

@@ -0,0 +1,267 @@
+"""
+Optimized model loader for Hugging Face Spaces with memory management
+"""
+import os
+import gc
+import psutil
+import nltk
+import spacy
+from transformers import pipeline, AutoTokenizer, AutoModel
+import torch
+from functools import lru_cache
+import warnings
+warnings.filterwarnings("ignore")
+
+# Set device to CPU for HF Spaces (unless GPU is available)
+DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+print(f"Using device: {DEVICE}")
+
+# Model cache with memory-conscious loading
+class ModelCache:
+    def __init__(self, max_models=3):
+        self.models = {}
+        self.max_models = max_models
+        self.access_count = {}
+        
+    def get_memory_usage(self):
+        """Get current memory usage in MB"""
+        process = psutil.Process(os.getpid())
+        return process.memory_info().rss / 1024 / 1024
+    
+    def cleanup_least_used(self):
+        """Remove least recently used model if cache is full"""
+        if len(self.models) >= self.max_models:
+            # Find least used model
+            least_used = min(self.access_count.items(), key=lambda x: x[1])
+            model_name = least_used[0]
+            
+            print(f"Removing {model_name} from cache to free memory")
+            del self.models[model_name]
+            del self.access_count[model_name]
+            
+            # Force garbage collection
+            gc.collect()
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+    
+    def load_model(self, model_name, loader_func):
+        """Load model with caching and memory management"""
+        if model_name in self.models:
+            self.access_count[model_name] += 1
+            return self.models[model_name]
+        
+        # Check memory before loading
+        memory_before = self.get_memory_usage()
+        print(f"Memory before loading {model_name}: {memory_before:.1f}MB")
+        
+        # Clean up if necessary
+        self.cleanup_least_used()
+        
+        # Load the model
+        try:
+            model = loader_func()
+            self.models[model_name] = model
+            self.access_count[model_name] = 1
+            
+            memory_after = self.get_memory_usage()
+            print(f"Memory after loading {model_name}: {memory_after:.1f}MB")
+            
+            return model
+        except Exception as e:
+            print(f"Failed to load {model_name}: {str(e)}")
+            return None
+
+# Global model cache
+model_cache = ModelCache(max_models=3)
+
+@lru_cache(maxsize=1)
+def download_nltk_resources():
+    """Download and cache NLTK resources"""
+    resources = ['punkt', 'stopwords', 'vader_lexicon', 'wordnet', 'averaged_perceptron_tagger']
+    
+    for resource in resources:
+        try:
+            if resource == 'punkt':
+                nltk.data.find(f'tokenizers/{resource}')
+            elif resource in ['stopwords', 'wordnet']:
+                nltk.data.find(f'corpora/{resource}')
+            elif resource == 'vader_lexicon':
+                nltk.data.find(f'sentiment/{resource}')
+            elif resource == 'averaged_perceptron_tagger':
+                nltk.data.find(f'taggers/{resource}')
+        except LookupError:
+            print(f"Downloading NLTK resource: {resource}")
+            nltk.download(resource, quiet=True)
+
+@lru_cache(maxsize=1)
+def load_spacy():
+    """Load spaCy model with caching"""
+    def _load_spacy():
+        try:
+            return spacy.load("en_core_web_sm")
+        except OSError:
+            print("SpaCy model not found. Please install: python -m spacy download en_core_web_sm")
+            return None
+    
+    return model_cache.load_model("spacy", _load_spacy)
+
+def load_sentiment_analyzer():
+    """Load lightweight sentiment analyzer"""
+    def _load_sentiment():
+        return pipeline(
+            "sentiment-analysis",
+            model="cardiffnlp/twitter-roberta-base-sentiment-latest",
+            device=0 if DEVICE == "cuda" else -1,
+            max_length=512,
+            truncation=True
+        )
+    
+    return model_cache.load_model("sentiment", _load_sentiment)
+
+def load_summarizer():
+    """Load efficient summarization model"""
+    def _load_summarizer():
+        return pipeline(
+            "summarization",
+            model="facebook/bart-large-cnn",
+            device=0 if DEVICE == "cuda" else -1,
+            max_length=512,
+            truncation=True
+        )
+    
+    return model_cache.load_model("summarizer", _load_summarizer)
+
+def load_qa_pipeline():
+    """Load question-answering pipeline"""
+    def _load_qa():
+        return pipeline(
+            "question-answering",
+            model="deepset/roberta-base-squad2",
+            device=0 if DEVICE == "cuda" else -1,
+            max_length=512,
+            truncation=True
+        )
+    
+    return model_cache.load_model("qa", _load_qa)
+
+def load_text_generator():
+    """Load text generation model"""
+    def _load_generator():
+        return pipeline(
+            "text-generation",
+            model="gpt2",
+            device=0 if DEVICE == "cuda" else -1,
+            max_length=256,
+            truncation=True,
+            pad_token_id=50256
+        )
+    
+    return model_cache.load_model("generator", _load_generator)
+
+def load_zero_shot():
+    """Load zero-shot classification model"""
+    def _load_zero_shot():
+        return pipeline(
+            "zero-shot-classification",
+            model="facebook/bart-large-mnli",
+            device=0 if DEVICE == "cuda" else -1,
+            max_length=512,
+            truncation=True
+        )
+    
+    return model_cache.load_model("zero_shot", _load_zero_shot)
+
+def load_embedding_model():
+    """Load sentence embedding model"""
+    def _load_embedding():
+        from sentence_transformers import SentenceTransformer
+        return SentenceTransformer('all-MiniLM-L6-v2', device=DEVICE)
+    
+    return model_cache.load_model("embedding", _load_embedding)
+
+def load_translation_pipeline(source_lang="auto", target_lang="en"):
+    """Load translation model with fallback"""
+    def _load_translation():
+        try:
+            if source_lang == "auto" or target_lang == "en":
+                model_name = "Helsinki-NLP/opus-mt-mul-en"
+            else:
+                model_name = f"Helsinki-NLP/opus-mt-{source_lang}-{target_lang}"
+            
+            return pipeline(
+                "translation",
+                model=model_name,
+                device=0 if DEVICE == "cuda" else -1,
+                max_length=512,
+                truncation=True
+            )
+        except Exception as e:
+            print(f"Translation model error: {e}")
+            return None
+    
+    return model_cache.load_model(f"translation_{source_lang}_{target_lang}", _load_translation)
+
+def get_memory_status():
+    """Get current memory usage statistics"""
+    process = psutil.Process(os.getpid())
+    memory_info = process.memory_info()
+    
+    return {
+        "rss_mb": memory_info.rss / 1024 / 1024,
+        "vms_mb": memory_info.vms / 1024 / 1024,
+        "percent": process.memory_percent(),
+        "loaded_models": list(model_cache.models.keys()),
+        "cache_size": len(model_cache.models)
+    }
+
+def clear_model_cache():
+    """Clear all models from cache to free memory"""
+    model_cache.models.clear()
+    model_cache.access_count.clear()
+    gc.collect()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
+    print("Model cache cleared")
+
+def initialize_essential_models():
+    """Initialize only the most essential models for startup"""
+    print("Initializing essential models for Hugging Face Spaces...")
+    
+    # Download NLTK resources
+    download_nltk_resources()
+    print("✓ NLTK resources downloaded")
+    
+    # Load spaCy (small footprint)
+    try:
+        load_spacy()
+        print("✓ spaCy model loaded")
+    except Exception as e:
+        print(f"✗ spaCy failed: {e}")
+    
+    # Load sentiment analyzer (most commonly used)
+    try:
+        load_sentiment_analyzer()
+        print("✓ Sentiment analyzer loaded")
+    except Exception as e:
+        print(f"✗ Sentiment analyzer failed: {e}")
+    
+    print(f"Memory status: {get_memory_status()}")
+    print("Essential models initialized!")
+
+# Lazy loading functions for other models
+def ensure_model_loaded(model_name, loader_func):
+    """Ensure a model is loaded before use"""
+    if model_name not in model_cache.models:
+        print(f"Loading {model_name} on demand...")
+        loader_func()
+    return model_cache.models.get(model_name)
+
+# Model status for debugging
+def get_model_status():
+    """Get status of all models"""
+    return {
+        "loaded_models": list(model_cache.models.keys()),
+        "access_counts": model_cache.access_count.copy(),
+        "memory_usage": get_memory_status(),
+        "device": DEVICE
+    }

utils/visualization.py

@@ -0,0 +1,242 @@
+import matplotlib.pyplot as plt
+import seaborn as sns
+
+def apply_custom_css():
+    """Load custom CSS for the Flask interface"""
+    css_file_path = "static/css/style.css"
+    try:
+        with open(css_file_path, "r") as f:
+            return f.read()
+    except Exception as e:
+        print(f"Warning: Could not load custom CSS: {e}")
+        return ""
+
+def setup_mpl_style():
+    """Setup matplotlib style for consistent visualizations"""
+    try:
+        plt.style.use('seaborn-v0_8-whitegrid')
+        sns.set_style("whitegrid")
+    except:
+        # Fallback if seaborn style is not available
+        plt.style.use('default')
+    
+    # Configure matplotlib for better visuals
+    plt.rcParams['figure.figsize'] = (10, 6)
+    plt.rcParams['axes.labelsize'] = 12
+    plt.rcParams['axes.titlesize'] = 14
+    plt.rcParams['xtick.labelsize'] = 10
+    plt.rcParams['ytick.labelsize'] = 10
+    plt.rcParams['legend.fontsize'] = 10
+    plt.rcParams['axes.spines.top'] = False
+    plt.rcParams['axes.spines.right'] = False
+
+def create_bar_chart(labels, values, title, xlabel, ylabel, color='#1976D2'):
+    """Create a matplotlib bar chart"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(10, 6))
+    bars = ax.bar(labels, values, color=color)
+    
+    ax.set_title(title)
+    ax.set_xlabel(xlabel)
+    ax.set_ylabel(ylabel)
+    plt.xticks(rotation=45, ha='right')
+    plt.tight_layout()
+    
+    return fig
+
+def create_horizontal_bar_chart(labels, values, title, xlabel, ylabel, color='#1976D2'):
+    """Create a matplotlib horizontal bar chart"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(10, 6))
+    bars = ax.barh(labels, values, color=color)
+    
+    ax.set_title(title)
+    ax.set_xlabel(xlabel)
+    ax.set_ylabel(ylabel)
+    ax.invert_yaxis()  # To have the highest value at the top
+    plt.tight_layout()
+    
+    return fig
+
+def create_pie_chart(labels, values, title, colors=None):
+    """Create a matplotlib pie chart"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(8, 8))
+    
+    if colors is None:
+        colors = ['#1976D2', '#4CAF50', '#FF9800', '#F44336', '#9C27B0', '#00BCD4', '#FFC107', '#795548']
+    
+    wedges, texts, autotexts = ax.pie(values, labels=labels, autopct='%1.1f%%', colors=colors)
+    ax.set_title(title)
+    
+    # Improve text readability
+    for autotext in autotexts:
+        autotext.set_color('white')
+        autotext.set_fontweight('bold')
+    
+    plt.tight_layout()
+    return fig
+
+def create_line_chart(x_values, y_values, title, xlabel, ylabel, color='#1976D2'):
+    """Create a matplotlib line chart"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(10, 6))
+    ax.plot(x_values, y_values, color=color, linewidth=2, marker='o')
+    
+    ax.set_title(title)
+    ax.set_xlabel(xlabel)
+    ax.set_ylabel(ylabel)
+    ax.grid(True, alpha=0.3)
+    plt.tight_layout()
+    
+    return fig
+
+def create_scatter_plot(x_values, y_values, title, xlabel, ylabel, color='#1976D2'):
+    """Create a matplotlib scatter plot"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(10, 6))
+    ax.scatter(x_values, y_values, color=color, alpha=0.6, s=50)
+    
+    ax.set_title(title)
+    ax.set_xlabel(xlabel)
+    ax.set_ylabel(ylabel)
+    ax.grid(True, alpha=0.3)
+    plt.tight_layout()
+    
+    return fig
+
+def create_heatmap(data, title, xlabel, ylabel, cmap='YlGnBu'):
+    """Create a matplotlib heatmap"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(10, 8))
+    
+    im = ax.imshow(data, cmap=cmap, aspect='auto')
+    
+    # Add colorbar
+    cbar = ax.figure.colorbar(im, ax=ax)
+    cbar.ax.set_ylabel('Value', rotation=-90, va="bottom")
+    
+    ax.set_title(title)
+    ax.set_xlabel(xlabel)
+    ax.set_ylabel(ylabel)
+    
+    plt.tight_layout()
+    return fig
+
+def create_word_cloud_placeholder(text, title="Word Cloud"):
+    """Create a placeholder for word cloud visualization"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(10, 6))
+    
+    # Create a simple text visualization as placeholder
+    ax.text(0.5, 0.5, f"Word Cloud: {title}\n\n{text[:100]}...", 
+            ha='center', va='center', fontsize=12, 
+            bbox=dict(boxstyle="round,pad=0.3", facecolor="lightblue", alpha=0.7))
+    
+    ax.set_xlim(0, 1)
+    ax.set_ylim(0, 1)
+    ax.axis('off')
+    ax.set_title(title)
+    
+    plt.tight_layout()
+    return fig
+
+def create_network_graph(edges, nodes, title="Network Graph"):
+    """Create a network graph visualization"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(12, 8))
+    
+    # Simple network visualization
+    if edges and nodes:
+        # Extract node positions (simplified)
+        pos = {}
+        for i, node in enumerate(nodes):
+            angle = 2 * 3.14159 * i / len(nodes)
+            pos[node] = (0.5 + 0.3 * np.cos(angle), 0.5 + 0.3 * np.sin(angle))
+        
+        # Draw edges
+        for edge in edges:
+            if len(edge) >= 2:
+                x1, y1 = pos.get(edge[0], (0, 0))
+                x2, y2 = pos.get(edge[1], (0, 0))
+                ax.plot([x1, x2], [y1, y2], 'k-', alpha=0.5, linewidth=1)
+        
+        # Draw nodes
+        for node, (x, y) in pos.items():
+            ax.scatter(x, y, s=200, c='lightblue', edgecolors='black', linewidth=2)
+            ax.text(x, y, str(node), ha='center', va='center', fontsize=8)
+    
+    ax.set_xlim(0, 1)
+    ax.set_ylim(0, 1)
+    ax.axis('off')
+    ax.set_title(title)
+    
+    plt.tight_layout()
+    return fig
+
+def create_gauge_chart(value, max_value=1.0, title="Gauge Chart"):
+    """Create a gauge chart visualization"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(8, 8), subplot_kw=dict(projection='polar'))
+    
+    # Create gauge
+    theta = np.linspace(0, np.pi, 100)
+    r = np.ones_like(theta)
+    
+    # Color based on value
+    if value / max_value > 0.7:
+        color = '#4CAF50'  # Green
+    elif value / max_value > 0.4:
+        color = '#FF9800'  # Orange
+    else:
+        color = '#F44336'  # Red
+    
+    ax.fill_between(theta, 0, r, alpha=0.3, color=color)
+    ax.plot(theta, r, color=color, linewidth=3)
+    
+    # Add value indicator
+    indicator_theta = np.pi * (1 - value / max_value)
+    ax.plot([indicator_theta, indicator_theta], [0, 1], color='black', linewidth=4)
+    
+    ax.set_ylim(0, 1)
+    ax.set_title(title, pad=20)
+    ax.set_xticks([])
+    ax.set_yticks([])
+    
+    # Add value text
+    ax.text(0, 0, f'{value:.2f}', ha='center', va='center', fontsize=20, fontweight='bold')
+    
+    plt.tight_layout()
+    return fig
+
+def create_comparison_chart(categories, values1, values2, title, xlabel, ylabel, 
+                          label1="Series 1", label2="Series 2", color1='#1976D2', color2='#4CAF50'):
+    """Create a comparison bar chart"""
+    setup_mpl_style()
+    fig, ax = plt.subplots(figsize=(12, 6))
+    
+    x = np.arange(len(categories))
+    width = 0.35
+    
+    bars1 = ax.bar(x - width/2, values1, width, label=label1, color=color1)
+    bars2 = ax.bar(x + width/2, values2, width, label=label2, color=color2)
+    
+    ax.set_title(title)
+    ax.set_xlabel(xlabel)
+    ax.set_ylabel(ylabel)
+    ax.set_xticks(x)
+    ax.set_xticklabels(categories, rotation=45, ha='right')
+    ax.legend()
+    
+    # Add value labels on bars
+    for bars in [bars1, bars2]:
+        for bar in bars:
+            height = bar.get_height()
+            ax.annotate(f'{height:.1f}',
+                       xy=(bar.get_x() + bar.get_width() / 2, height),
+                       xytext=(0, 3),  # 3 points vertical offset
+                       textcoords="offset points",
+                       ha='center', va='bottom')
+    
+    plt.tight_layout()
+    return fig