RSK World - NLP Text Analysis Bot - Project Files Browser | RSK World

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    NLP Text Analysis Bot - Web Interface
    Developer: RSK World
    Website: https://rskworld.in
    Email: help@rskworld.in
    Phone: +91 93305 39277
    Year: 2026
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NLP Text Analysis Bot - RSK World</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            padding: 2rem 0;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-bottom: 2rem;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 1.5rem;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 2rem;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .result-section {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 10px;
        }
        .badge {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
        .entity-tag {
            display: inline-block;
            margin: 0.25rem;
            padding: 0.25rem 0.75rem;
            background: #e9ecef;
            border-radius: 20px;
            font-size: 0.85rem;
        }
        .loading {
            display: none;
        }
        .loading.show {
            display: block;
        }
        .footer {
            text-align: center;
            color: white;
            padding: 2rem 0;
        }
        textarea {
            min-height: 150px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header">
                        <h1 class="mb-0">
                            <i class="fas fa-language me-2"></i>
                            NLP Text Analysis Bot
                        </h1>
                        <p class="mb-0 mt-2">Advanced Natural Language Processing for Text Understanding</p>
                    </div>
                    <div class="card-body">
                        <form id="analysisForm">
                            <div class="mb-3">
                                <label for="textInput" class="form-label">Enter Text to Analyze:</label>
                                <textarea class="form-control" id="textInput" rows="6" 
                                    placeholder="Enter your text here for comprehensive NLP analysis..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg w-100">
                                <i class="fas fa-search me-2"></i>Analyze Text
                            </button>
                        </form>

                        <div class="loading text-center mt-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2">Analyzing text...</p>
                        </div>

                        <div id="results" class="result-section" style="display: none;">
                            <h3 class="mb-4"><i class="fas fa-chart-line me-2"></i>Analysis Results</h3>
                            
                            <!-- Summary Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Summary</h5>
                                </div>
                                <div class="card-body" id="summarySection"></div>
                            </div>

                            <!-- Sentiment Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-smile me-2"></i>Sentiment Analysis</h5>
                                </div>
                                <div class="card-body" id="sentimentSection"></div>
                            </div>

                            <!-- Entities Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Named Entity Recognition</h5>
                                </div>
                                <div class="card-body" id="entitiesSection"></div>
                            </div>

                            <!-- Semantic Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0"><i class="fas fa-brain me-2"></i>Semantic Understanding</h5>
                                </div>
                                <div class="card-body" id="semanticSection"></div>
                            </div>

                            <!-- Language Detection Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="fas fa-globe me-2"></i>Language Detection</h5>
                                </div>
                                <div class="card-body" id="languageSection"></div>
                            </div>

                            <!-- Emotion Detection Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-danger text-white">
                                    <h5 class="mb-0"><i class="fas fa-heart me-2"></i>Emotion Detection</h5>
                                </div>
                                <div class="card-body" id="emotionSection"></div>
                            </div>

                            <!-- Text Classification Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0"><i class="fas fa-folder-open me-2"></i>Text Classification</h5>
                                </div>
                                <div class="card-body" id="classificationSection"></div>
                            </div>

                            <!-- Text Summarization Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-compress-alt me-2"></i>Text Summarization</h5>
                                </div>
                                <div class="card-body" id="summarizationSection"></div>
                            </div>

                            <!-- Readability Analysis Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0"><i class="fas fa-book-reader me-2"></i>Readability Analysis</h5>
                                </div>
                                <div class="card-body" id="readabilitySection"></div>
                            </div>

                            <!-- Advanced Keywords Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-dark text-white">
                                    <h5 class="mb-0"><i class="fas fa-key me-2"></i>Advanced Keywords (TF-IDF)</h5>
                                </div>
                                <div class="card-body" id="advancedKeywordsSection"></div>
                            </div>

                            <!-- POS Tagging Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Part-of-Speech Analysis</h5>
                                </div>
                                <div class="card-body" id="posSection"></div>
                            </div>

                            <!-- Preprocessing Section -->
                            <div class="card mb-3">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Text Preprocessing</h5>
                                </div>
                                <div class="card-body" id="preprocessingSection"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <p>&copy; 2026 RSK World - <a href="https://rskworld.in" class="text-white">rskworld.in</a></p>
        <p>Email: help@rskworld.in | Phone: +91 93305 39277</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Developer: RSK World - https://rskworld.in
        document.getElementById('analysisForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const textInput = document.getElementById('textInput').value;
            if (!textInput.trim()) {
                alert('Please enter some text to analyze');
                return;
            }

            const loading = document.querySelector('.loading');
            const results = document.getElementById('results');
            
            loading.classList.add('show');
            results.style.display = 'none';

            try {
                const response = await fetch('/api/analyze', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ text: textInput })
                });

                const data = await response.json();

                if (response.ok) {
                    displayResults(data);
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error analyzing text: ' + error.message);
            } finally {
                loading.classList.remove('show');
            }
        });

        function displayResults(data) {
            // Check for errors
            if (data.error) {
                document.getElementById('results').style.display = 'block';
                document.getElementById('summarySection').innerHTML = 
                    `<div class="alert alert-danger"><strong>Error:</strong> ${data.error}</div>`;
                return;
            }
            
            // Summary
            const summary = data.summary || {};
            document.getElementById('summarySection').innerHTML = `
                <p><strong>Word Count:</strong> ${summary.word_count || 0}</p>
                <p><strong>Sentence Count:</strong> ${summary.sentence_count || 0}</p>
                <p><strong>Language:</strong> <span class="badge bg-info">${summary.language || 'unknown'}</span></p>
                <p><strong>Sentiment:</strong> <span class="badge bg-${getSentimentColor(summary.sentiment_label)}">${summary.sentiment_label || 'N/A'}</span></p>
                <p><strong>Primary Emotion:</strong> <span class="badge bg-danger">${summary.primary_emotion || 'neutral'}</span></p>
                <p><strong>Category:</strong> <span class="badge bg-warning text-dark">${summary.category || 'unknown'}</span></p>
                <p><strong>Reading Level:</strong> <span class="badge bg-primary">${summary.reading_level || 'N/A'}</span></p>
                <p><strong>Entities Found:</strong> ${summary.entity_count || 0}</p>
                <p><strong>Key Topics:</strong> ${(summary.key_topics || []).join(', ')}</p>
            `;

            // Sentiment
            const sentiment = data.sentiment || {};
            document.getElementById('sentimentSection').innerHTML = `
                <p><strong>Overall Sentiment:</strong> <span class="badge bg-${getSentimentColor(sentiment.label)}">${sentiment.label || 'N/A'}</span></p>
                <p><strong>Sentiment Score:</strong> ${(sentiment.score || 0).toFixed(3)}</p>
                ${sentiment.vader ? `
                    <div class="mt-3">
                        <h6>VADER Analysis:</h6>
                        <p>Positive: ${(sentiment.vader.positive * 100).toFixed(1)}%</p>
                        <p>Neutral: ${(sentiment.vader.neutral * 100).toFixed(1)}%</p>
                        <p>Negative: ${(sentiment.vader.negative * 100).toFixed(1)}%</p>
                    </div>
                ` : ''}
            `;

            // Entities
            const entities = data.entities || {};
            let entitiesHTML = `<p><strong>Total Entities:</strong> ${entities.total_entities || 0}</p>`;
            if (entities.entities && entities.entities.length > 0) {
                entitiesHTML += '<div class="mt-3"><h6>Detected Entities:</h6>';
                entities.entities.forEach(entity => {
                    entitiesHTML += `<span class="entity-tag" title="${entity.description}">
                        ${entity.text} <small class="text-muted">(${entity.label})</small>
                    </span>`;
                });
                entitiesHTML += '</div>';
            }
            document.getElementById('entitiesSection').innerHTML = entitiesHTML;

            // Semantic
            const semantic = data.semantic || {};
            document.getElementById('semanticSection').innerHTML = `
                <p><strong>Key Topics:</strong> ${(semantic.topics || []).join(', ') || 'N/A'}</p>
                <p><strong>Keywords:</strong> ${(semantic.keywords || []).join(', ') || 'N/A'}</p>
                ${semantic.phrases && semantic.phrases.length > 0 ? `
                    <div class="mt-3">
                        <h6>Important Phrases:</h6>
                        <p>${semantic.phrases.join(', ')}</p>
                    </div>
                ` : ''}
            `;

            // Language Detection
            const language = data.language || {};
            document.getElementById('languageSection').innerHTML = `
                <p><strong>Detected Language:</strong> <span class="badge bg-info">${language.language || 'unknown'}</span></p>
                <p><strong>Confidence:</strong> ${((language.confidence || 0) * 100).toFixed(1)}%</p>
                ${language.all_languages && language.all_languages.length > 0 ? `
                    <div class="mt-3">
                        <h6>Language Probabilities:</h6>
                        ${language.all_languages.map(lang => `
                            <p>${lang.language}: ${(lang.probability * 100).toFixed(1)}%</p>
                        `).join('')}
                    </div>
                ` : ''}
            `;

            // Emotion Detection
            const emotions = data.emotions || {};
            document.getElementById('emotionSection').innerHTML = `
                <p><strong>Primary Emotion:</strong> <span class="badge bg-danger">${emotions.primary_emotion || 'neutral'}</span></p>
                <p><strong>Emotion Score:</strong> ${((emotions.primary_score || 0) * 100).toFixed(1)}%</p>
                ${emotions.top_3_emotions && emotions.top_3_emotions.length > 0 ? `
                    <div class="mt-3">
                        <h6>Top Emotions:</h6>
                        ${emotions.top_3_emotions.map(emo => `
                            <p>${emo.emotion}: ${(emo.score * 100).toFixed(1)}%</p>
                        `).join('')}
                    </div>
                ` : ''}
            `;

            // Text Classification
            const classification = data.classification || {};
            document.getElementById('classificationSection').innerHTML = `
                <p><strong>Primary Category:</strong> <span class="badge bg-warning text-dark">${classification.primary_category || 'unknown'}</span></p>
                <p><strong>Confidence:</strong> ${((classification.primary_score || 0) * 100).toFixed(1)}%</p>
                ${classification.top_3 && classification.top_3.length > 0 ? `
                    <div class="mt-3">
                        <h6>Top Categories:</h6>
                        ${classification.top_3.map(cat => `
                            <p>${cat.label}: ${(cat.score * 100).toFixed(1)}%</p>
                        `).join('')}
                    </div>
                ` : ''}
            `;

            // Text Summarization
            const summarization = data.summarization || {};
            document.getElementById('summarizationSection').innerHTML = `
                <p><strong>Method:</strong> ${summarization.method || 'N/A'}</p>
                ${summarization.summary ? `
                    <div class="mt-3">
                        <h6>Summary:</h6>
                        <p class="border p-3 bg-light">${summarization.summary}</p>
                        <p><small>Summary Length: ${summarization.summary_length || 0} characters</small></p>
                        <p><small>Compression Ratio: ${((summarization.compression_ratio || 0) * 100).toFixed(1)}%</small></p>
                    </div>
                ` : '<p>Summary not available</p>'}
            `;

            // Readability Analysis
            const readability = data.readability || {};
            if (readability.error) {
                document.getElementById('readabilitySection').innerHTML = `<p class="text-muted">${readability.error}</p>`;
            } else {
                document.getElementById('readabilitySection').innerHTML = `
                    <p><strong>Reading Level:</strong> <span class="badge bg-primary">${readability.reading_level || 'N/A'}</span></p>
                    <p><strong>Average Grade Level:</strong> ${readability.average_grade_level || 'N/A'}</p>
                    <div class="mt-3">
                        <h6>Readability Scores:</h6>
                        <p>Flesch Reading Ease: ${readability.flesch_reading_ease || 'N/A'}</p>
                        <p>Flesch-Kincaid Grade: ${readability.flesch_kincaid_grade || 'N/A'}</p>
                        <p>SMOG Index: ${readability.smog_index || 'N/A'}</p>
                        <p>Coleman-Liau Index: ${readability.coleman_liau_index || 'N/A'}</p>
                        <p>Automated Readability Index: ${readability.automated_readability_index || 'N/A'}</p>
                    </div>
                    ${readability.interpretation ? `
                        <div class="mt-3">
                            <p class="text-muted"><em>${readability.interpretation}</em></p>
                        </div>
                    ` : ''}
                `;
            }

            // Advanced Keywords
            const advancedKeywords = data.advanced_keywords || {};
            let keywordsHTML = '';
            if (advancedKeywords.tfidf_keywords && advancedKeywords.tfidf_keywords.length > 0) {
                keywordsHTML += '<div class="mt-3"><h6>TF-IDF Keywords:</h6>';
                advancedKeywords.tfidf_keywords.forEach(kw => {
                    keywordsHTML += `<span class="entity-tag">${kw.keyword} <small>(${kw.score.toFixed(3)})</small></span>`;
                });
                keywordsHTML += '</div>';
            }
            if (advancedKeywords.bigrams && advancedKeywords.bigrams.length > 0) {
                keywordsHTML += '<div class="mt-3"><h6>Top Bigrams:</h6>';
                advancedKeywords.bigrams.forEach(bg => {
                    keywordsHTML += `<span class="entity-tag">${bg.ngram} <small>(${bg.frequency})</small></span>`;
                });
                keywordsHTML += '</div>';
            }
            document.getElementById('advancedKeywordsSection').innerHTML = keywordsHTML || '<p>No keywords extracted</p>';

            // POS Tagging
            const posAnalysis = data.pos_analysis || {};
            if (posAnalysis.error) {
                document.getElementById('posSection').innerHTML = `<p class="text-muted">${posAnalysis.error}</p>`;
            } else {
                let posHTML = `<p><strong>Total Words:</strong> ${posAnalysis.total_words || 0}</p>`;
                posHTML += `<p><strong>Unique POS Tags:</strong> ${posAnalysis.unique_pos || 0}</p>`;
                if (posAnalysis.most_common_pos) {
                    posHTML += `<p><strong>Most Common POS:</strong> ${posAnalysis.most_common_pos}</p>`;
                }
                if (posAnalysis.pos_distribution) {
                    posHTML += '<div class="mt-3"><h6>POS Distribution:</h6>';
                    Object.entries(posAnalysis.pos_distribution).forEach(([pos, count]) => {
                        const percentage = posAnalysis.pos_percentages ? posAnalysis.pos_percentages[pos] : 0;
                        posHTML += `<p>${pos}: ${count} (${percentage.toFixed(1)}%)</p>`;
                    });
                    posHTML += '</div>';
                }
                document.getElementById('posSection').innerHTML = posHTML;
            }

            // Preprocessing
            const preprocessing = data.preprocessing || {};
            document.getElementById('preprocessingSection').innerHTML = `
                <p><strong>Original Text Length:</strong> ${preprocessing.original_text ? preprocessing.original_text.length : 0} characters</p>
                <p><strong>Cleaned Text Length:</strong> ${preprocessing.cleaned_text ? preprocessing.cleaned_text.length : 0} characters</p>
                <p><strong>Unique Words:</strong> ${preprocessing.unique_words || 0}</p>
                <p><strong>Vocabulary Richness:</strong> ${((preprocessing.vocabulary_richness || 0) * 100).toFixed(2)}%</p>
            `;

            document.getElementById('results').style.display = 'block';
        }

        function getSentimentColor(label) {
            switch(label?.toLowerCase()) {
                case 'positive': return 'success';
                case 'negative': return 'danger';
                case 'neutral': return 'secondary';
                default: return 'secondary';
            }
        }
    </script>
</body>
</html>

477 lines•23.6 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size