RSK World - Text Classification Dataset - Project Files Browser | RSK World

<!DOCTYPE html>
<!--
================================================================================
Text Classification Dataset - Real-Time AI Classifier
================================================================================
Project: Text Classification Dataset
Category: Text Data / NLP

Author: Molla Samser
Designer & Tester: Rima Khatun
Website: https://rskworld.in
Email: help@rskworld.in | support@rskworld.in
Phone: +91 93305 39277

Copyright (c) 2026 RSK World - All Rights Reserved
================================================================================
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Text Classifier | RSK World</title>
    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-primary: #030014;
            --bg-secondary: #0a0a1a;
            --bg-card: #111128;
            --bg-input: #0d0d20;
            --border: #1e1e3f;
            --border-glow: #6366f1;
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent-primary: #6366f1;
            --accent-secondary: #8b5cf6;
            --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
            --tech: #3b82f6;
            --sports: #22c55e;
            --politics: #8b5cf6;
            --entertainment: #ec4899;
            --business: #f59e0b;
            --science: #06b6d4;
            --font-main: 'Space Grotesk', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: var(--font-main);
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Animated Background */
        .bg-animation {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
        }

        .bg-animation::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
            animation: bgRotate 30s linear infinite;
        }

        @keyframes bgRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Grid Pattern */
        .grid-pattern {
            position: fixed;
            inset: 0;
            background-image: 
                linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
        }

        /* Header */
        header {
            background: rgba(3, 0, 20, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 1.25rem;
        }

        .logo-icon {
            width: 42px;
            height: 42px;
            background: var(--accent-gradient);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        nav a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s;
            margin-left: 8px;
        }

        nav a:hover { color: var(--text-primary); background: var(--bg-card); }
        nav a.active { background: var(--accent-primary); color: white; }

        /* Main Container */
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 2rem;
        }

        /* Hero Section */
        .hero {
            text-align: center;
            margin-bottom: 3rem;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 50px;
            font-size: 0.85rem;
            color: var(--accent-primary);
            margin-bottom: 1.5rem;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .hero p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Classifier Card */
        .classifier-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .classifier-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent-gradient);
        }

        /* Input Section */
        .input-section {
            margin-bottom: 2rem;
        }

        .input-label {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .input-label i {
            color: var(--accent-primary);
        }

        .text-input {
            width: 100%;
            min-height: 150px;
            padding: 1.25rem;
            background: var(--bg-input);
            border: 2px solid var(--border);
            border-radius: 16px;
            color: var(--text-primary);
            font-family: var(--font-main);
            font-size: 1rem;
            line-height: 1.6;
            resize: vertical;
            transition: all 0.3s;
        }

        .text-input:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
        }

        .text-input::placeholder {
            color: var(--text-muted);
        }

        /* Character Counter */
        .input-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
        }

        .char-count {
            font-family: var(--font-mono);
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .sample-btns {
            display: flex;
            gap: 8px;
        }

        .sample-btn {
            padding: 6px 12px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 8px;
            color: var(--accent-primary);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .sample-btn:hover {
            background: rgba(99, 102, 241, 0.2);
        }

        /* Classify Button */
        .classify-btn {
            width: 100%;
            padding: 18px 32px;
            background: var(--accent-gradient);
            border: none;
            border-radius: 16px;
            color: white;
            font-family: var(--font-main);
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .classify-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s;
        }

        .classify-btn:hover::before {
            transform: translateX(100%);
        }

        .classify-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3);
        }

        .classify-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .classify-btn.loading .btn-text { display: none; }
        .classify-btn.loading .btn-loading { display: flex; }
        .btn-loading { display: none; align-items: center; gap: 10px; }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Results Section */
        .results-section {
            display: none;
            animation: slideUp 0.5s ease;
        }

        .results-section.active { display: block; }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .results-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .results-header h3 {
            font-size: 1.25rem;
        }

        /* Prediction Card */
        .prediction-card {
            background: var(--bg-secondary);
            border: 2px solid var(--category-color, var(--border));
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .prediction-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, var(--category-color-glow, transparent) 0%, transparent 70%);
            opacity: 0.1;
        }

        .prediction-icon {
            width: 80px;
            height: 80px;
            background: var(--category-color, var(--accent-primary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1rem;
            box-shadow: 0 10px 40px var(--category-color-glow, rgba(99, 102, 241, 0.3));
        }

        .prediction-category {
            font-size: 2rem;
            font-weight: 700;
            color: var(--category-color, var(--text-primary));
            margin-bottom: 0.5rem;
        }

        .prediction-confidence {
            font-family: var(--font-mono);
            font-size: 1.1rem;
            color: var(--text-secondary);
        }

        .confidence-bar {
            width: 100%;
            height: 8px;
            background: var(--bg-input);
            border-radius: 4px;
            margin-top: 1rem;
            overflow: hidden;
        }

        .confidence-fill {
            height: 100%;
            background: var(--category-color, var(--accent-primary));
            border-radius: 4px;
            transition: width 1s ease;
        }

        /* Probability Grid */
        .probability-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
        }

        .prob-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
            transition: all 0.3s;
        }

        .prob-item:hover {
            transform: translateY(-2px);
            border-color: var(--item-color, var(--border));
        }

        .prob-item .category {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .prob-item .value {
            font-family: var(--font-mono);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--item-color, var(--text-primary));
        }

        .prob-item .bar {
            width: 100%;
            height: 4px;
            background: var(--bg-input);
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .prob-item .bar-fill {
            height: 100%;
            background: var(--item-color, var(--accent-primary));
            border-radius: 2px;
        }

        /* Category Colors */
        [data-category="Technology"] { --category-color: var(--tech); --category-color-glow: rgba(59, 130, 246, 0.3); }
        [data-category="Sports"] { --category-color: var(--sports); --category-color-glow: rgba(34, 197, 94, 0.3); }
        [data-category="Politics"] { --category-color: var(--politics); --category-color-glow: rgba(139, 92, 246, 0.3); }
        [data-category="Entertainment"] { --category-color: var(--entertainment); --category-color-glow: rgba(236, 72, 153, 0.3); }
        [data-category="Business"] { --category-color: var(--business); --category-color-glow: rgba(245, 158, 11, 0.3); }
        [data-category="Science"] { --category-color: var(--science); --category-color-glow: rgba(6, 182, 212, 0.3); }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .stat-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
        }

        .stat-card .label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        .stat-card .value {
            font-family: var(--font-mono);
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--accent-primary);
        }

        /* History Section */
        .history-section {
            margin-top: 2rem;
        }

        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .history-header h4 {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .clear-btn {
            padding: 6px 12px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 8px;
            color: var(--danger);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .clear-btn:hover { background: rgba(239, 68, 68, 0.2); }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 300px;
            overflow-y: auto;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 0.9rem;
        }

        .history-text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 1rem;
            color: var(--text-secondary);
        }

        .history-category {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            background: var(--category-color);
            color: white;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        footer a { color: var(--accent-primary); text-decoration: none; }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 { font-size: 2rem; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .probability-grid { grid-template-columns: repeat(2, 1fr); }
            .classifier-card { padding: 1.5rem; }
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>
    <div class="grid-pattern"></div>

    <header>
        <div class="header-content">
            <a href="index.html" class="logo">
                <div class="logo-icon"><i class="fas fa-brain"></i></div>
                <span>AI Classifier</span>
            </a>
            <nav>
                <a href="index.html">Home</a>
                <a href="explorer.html">Explorer</a>
                <a href="classifier.html" class="active">Classifier</a>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="hero-badge">
                <i class="fas fa-sparkles"></i>
                <span>AI-Powered Classification</span>
            </div>
            <h1>Real-Time Text Classifier</h1>
            <p>Enter any text and our AI model will instantly classify it into one of six categories with confidence scores.</p>
        </section>

        <div class="classifier-card">
            <div class="input-section">
                <label class="input-label">
                    <i class="fas fa-keyboard"></i>
                    <span>Enter Text to Classify</span>
                </label>
                <textarea 
                    class="text-input" 
                    id="text-input"
                    placeholder="Type or paste your text here... For example: 'Apple unveils new iPhone with revolutionary AI features and enhanced camera system.'"
                    maxlength="5000"
                ></textarea>
                <div class="input-footer">
                    <span class="char-count"><span id="char-count">0</span> / 5000 characters</span>
                    <div class="sample-btns">
                        <button class="sample-btn" onclick="loadSample('tech')">Tech Sample</button>
                        <button class="sample-btn" onclick="loadSample('sports')">Sports Sample</button>
                        <button class="sample-btn" onclick="loadSample('science')">Science Sample</button>
                    </div>
                </div>
            </div>

            <button class="classify-btn" id="classify-btn" onclick="classifyText()">
                <span class="btn-text"><i class="fas fa-magic"></i> Classify Text</span>
                <span class="btn-loading"><div class="spinner"></div> Analyzing...</span>
            </button>

            <div class="results-section" id="results-section">
                <div class="results-header">
                    <i class="fas fa-chart-pie" style="color: var(--accent-primary)"></i>
                    <h3>Classification Results</h3>
                </div>

                <div class="prediction-card" id="prediction-card" data-category="Technology">
                    <div class="prediction-icon" id="prediction-icon">
                        <i class="fas fa-microchip"></i>
                    </div>
                    <div class="prediction-category" id="prediction-category">Technology</div>
                    <div class="prediction-confidence">Confidence: <span id="prediction-confidence">95.2%</span></div>
                    <div class="confidence-bar">
                        <div class="confidence-fill" id="confidence-fill" style="width: 95.2%"></div>
                    </div>
                </div>

                <h4 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-chart-bar" style="color: var(--accent-secondary)"></i>
                    All Probabilities
                </h4>
                <div class="probability-grid" id="probability-grid">
                    <!-- Generated by JS -->
                </div>

                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="label">Words</div>
                        <div class="value" id="stat-words">0</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">Characters</div>
                        <div class="value" id="stat-chars">0</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">Sentences</div>
                        <div class="value" id="stat-sentences">0</div>
                    </div>
                    <div class="stat-card">
                        <div class="label">Processing</div>
                        <div class="value" id="stat-time">0ms</div>
                    </div>
                </div>
            </div>

            <div class="history-section">
                <div class="history-header">
                    <h4><i class="fas fa-history"></i> Recent Classifications</h4>
                    <button class="clear-btn" onclick="clearHistory()"><i class="fas fa-trash"></i> Clear</button>
                </div>
                <div class="history-list" id="history-list">
                    <div class="history-item" style="color: var(--text-muted); justify-content: center;">
                        No classifications yet. Enter text above to get started!
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>Created by <strong>Molla Samser</strong> | Designed by <strong>Rima Khatun</strong></p>
        <p>&copy; 2026 <a href="https://rskworld.in" target="_blank">RSK World</a> - All Rights Reserved</p>
    </footer>

    <script>
        /**
         * Real-Time Text Classifier - RSK World
         * Author: Molla Samser | https://rskworld.in
         */

        const CATEGORIES = {
            0: { name: 'Technology', icon: 'fas fa-microchip', color: '#3b82f6' },
            1: { name: 'Sports', icon: 'fas fa-futbol', color: '#22c55e' },
            2: { name: 'Politics', icon: 'fas fa-landmark', color: '#8b5cf6' },
            3: { name: 'Entertainment', icon: 'fas fa-film', color: '#ec4899' },
            4: { name: 'Business', icon: 'fas fa-chart-line', color: '#f59e0b' },
            5: { name: 'Science', icon: 'fas fa-flask', color: '#06b6d4' }
        };

        const SAMPLE_TEXTS = {
            tech: "Apple unveils revolutionary new iPhone featuring advanced AI capabilities, enhanced camera system with 200MP sensor, and breakthrough battery technology that promises to transform mobile computing.",
            sports: "Manchester United secures dramatic Premier League victory in stoppage time as their star striker scores a hat-trick against defending champions, sending fans into wild celebrations.",
            science: "NASA astronomers discover potentially habitable exoplanet orbiting within the goldilocks zone of a nearby star system, detecting atmospheric signatures that could indicate the presence of water."
        };

        // Keyword-based classifier (simulates ML model)
        const KEYWORDS = {
            0: ['apple', 'google', 'microsoft', 'ai', 'artificial intelligence', 'software', 'app', 'tech', 'computer', 'digital', 'internet', 'data', 'algorithm', 'smartphone', 'iphone', 'android', 'cloud', 'cyber', 'robot', 'machine learning', 'startup', 'silicon', 'processor', 'chip', 'nvidia', 'tesla', 'electric', 'battery', '5g', 'quantum'],
            1: ['football', 'soccer', 'basketball', 'tennis', 'cricket', 'championship', 'league', 'team', 'player', 'coach', 'match', 'game', 'score', 'goal', 'win', 'victory', 'tournament', 'olympic', 'athlete', 'sports', 'nba', 'nfl', 'fifa', 'stadium', 'fans', 'season'],
            2: ['government', 'president', 'congress', 'senate', 'election', 'vote', 'policy', 'law', 'bill', 'democrat', 'republican', 'political', 'minister', 'parliament', 'legislation', 'campaign', 'reform', 'tax', 'immigration', 'diplomatic', 'treaty', 'coalition'],
            3: ['movie', 'film', 'actor', 'actress', 'hollywood', 'netflix', 'streaming', 'music', 'album', 'concert', 'celebrity', 'award', 'grammy', 'oscar', 'entertainment', 'series', 'tv', 'show', 'singer', 'band', 'release', 'box office', 'premiere'],
            4: ['stock', 'market', 'economy', 'business', 'company', 'investment', 'profit', 'revenue', 'ceo', 'startup', 'finance', 'bank', 'trading', 'shares', 'billion', 'million', 'acquisition', 'merger', 'ipo', 'cryptocurrency', 'bitcoin', 'inflation', 'gdp'],
            5: ['scientist', 'research', 'study', 'discovery', 'nasa', 'space', 'planet', 'climate', 'environment', 'dna', 'gene', 'vaccine', 'medical', 'health', 'experiment', 'laboratory', 'physics', 'biology', 'chemistry', 'university', 'professor', 'journal', 'breakthrough']
        };

        let history = JSON.parse(localStorage.getItem('classifierHistory') || '[]');

        // Character counter
        document.getElementById('text-input').addEventListener('input', (e) => {
            document.getElementById('char-count').textContent = e.target.value.length;
        });

        function loadSample(type) {
            document.getElementById('text-input').value = SAMPLE_TEXTS[type];
            document.getElementById('char-count').textContent = SAMPLE_TEXTS[type].length;
        }

        function classifyText() {
            const text = document.getElementById('text-input').value.trim();
            if (!text) {
                alert('Please enter some text to classify!');
                return;
            }

            const btn = document.getElementById('classify-btn');
            btn.classList.add('loading');
            btn.disabled = true;

            const startTime = performance.now();

            // Simulate processing delay
            setTimeout(() => {
                const result = performClassification(text);
                const endTime = performance.now();
                
                displayResults(result, text, Math.round(endTime - startTime));
                
                btn.classList.remove('loading');
                btn.disabled = false;
            }, 800);
        }

        function performClassification(text) {
            const lowerText = text.toLowerCase();
            const scores = {};

            // Calculate scores based on keyword matches
            for (let cat in KEYWORDS) {
                let score = 0;
                KEYWORDS[cat].forEach(keyword => {
                    const regex = new RegExp('\\b' + keyword + '\\b', 'gi');
                    const matches = (lowerText.match(regex) || []).length;
                    score += matches * (keyword.length > 5 ? 2 : 1); // Longer keywords get more weight
                });
                scores[cat] = score;
            }

            // Add some randomness for realistic probabilities
            const totalScore = Object.values(scores).reduce((a, b) => a + b, 0) || 1;
            const probabilities = {};
            
            for (let cat in scores) {
                let prob = (scores[cat] / totalScore) * 0.7 + Math.random() * 0.3;
                probabilities[cat] = prob;
            }

            // Normalize to sum to 1
            const probSum = Object.values(probabilities).reduce((a, b) => a + b, 0);
            for (let cat in probabilities) {
                probabilities[cat] = probabilities[cat] / probSum;
            }

            // Find predicted class
            let maxProb = 0;
            let predictedClass = 0;
            for (let cat in probabilities) {
                if (probabilities[cat] > maxProb) {
                    maxProb = probabilities[cat];
                    predictedClass = parseInt(cat);
                }
            }

            return {
                predicted: predictedClass,
                confidence: maxProb,
                probabilities: probabilities
            };
        }

        function displayResults(result, text, processingTime) {
            const resultsSection = document.getElementById('results-section');
            resultsSection.classList.add('active');

            const category = CATEGORIES[result.predicted];
            const confidence = (result.confidence * 100).toFixed(1);

            // Update prediction card
            const predCard = document.getElementById('prediction-card');
            predCard.setAttribute('data-category', category.name);
            
            document.getElementById('prediction-icon').innerHTML = `<i class="${category.icon}"></i>`;
            document.getElementById('prediction-category').textContent = category.name;
            document.getElementById('prediction-confidence').textContent = confidence + '%';
            document.getElementById('confidence-fill').style.width = confidence + '%';

            // Update probability grid
            const probGrid = document.getElementById('probability-grid');
            probGrid.innerHTML = '';
            
            const sortedProbs = Object.entries(result.probabilities)
                .sort((a, b) => b[1] - a[1]);

            sortedProbs.forEach(([cat, prob]) => {
                const catInfo = CATEGORIES[cat];
                const probPercent = (prob * 100).toFixed(1);
                probGrid.innerHTML += `
                    <div class="prob-item" style="--item-color: ${catInfo.color}">
                        <div class="category"><i class="${catInfo.icon}"></i> ${catInfo.name}</div>
                        <div class="value">${probPercent}%</div>
                        <div class="bar"><div class="bar-fill" style="width: ${probPercent}%"></div></div>
                    </div>
                `;
            });

            // Update stats
            const words = text.split(/\s+/).filter(w => w.length > 0);
            const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0);
            
            document.getElementById('stat-words').textContent = words.length;
            document.getElementById('stat-chars').textContent = text.length;
            document.getElementById('stat-sentences').textContent = sentences.length;
            document.getElementById('stat-time').textContent = processingTime + 'ms';

            // Add to history
            addToHistory(text, category.name, category.color);

            // Scroll to results
            resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function addToHistory(text, category, color) {
            history.unshift({ text, category, color, timestamp: Date.now() });
            if (history.length > 10) history.pop();
            localStorage.setItem('classifierHistory', JSON.stringify(history));
            renderHistory();
        }

        function renderHistory() {
            const historyList = document.getElementById('history-list');
            
            if (history.length === 0) {
                historyList.innerHTML = `
                    <div class="history-item" style="color: var(--text-muted); justify-content: center;">
                        No classifications yet. Enter text above to get started!
                    </div>
                `;
                return;
            }

            historyList.innerHTML = history.map(item => `
                <div class="history-item">
                    <span class="history-text">${item.text}</span>
                    <span class="history-category" style="background: ${item.color}">${item.category}</span>
                </div>
            `).join('');
        }

        function clearHistory() {
            history = [];
            localStorage.removeItem('classifierHistory');
            renderHistory();
        }

        // Initialize
        renderHistory();
        console.log('%c RSK World | rskworld.in ', 'background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 10px; font-size: 14px; border-radius: 5px;');
    </script>
</body>
</html>

946 lines•34.1 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size