RSK World - Action Recognition Dataset - Project Files Browser | RSK World

<!--
==================================================================================
    Action Recognition Dataset - Interactive Demo
==================================================================================
    Project: Action Recognition Dataset
    
    Interactive web demo for testing action recognition

==================================================================================
    DEVELOPER INFORMATION
==================================================================================
    Website: RSK World (https://rskworld.in)
    Founded by: Molla Samser
    Designer & Tester: Rima Khatun
    Contact: help@rskworld.in | +91 93305 39277
    
    (c) 2026 RSK World. All Rights Reserved.
==================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Action Recognition Demo | RSK World</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;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.5.1/css/all.min.css">
    <style>
        :root {
            --primary: #00d4ff;
            --primary-dark: #0099cc;
            --secondary: #ffd400;
            --bg-dark: #0a0a0f;
            --bg-card: #12121a;
            --bg-card-hover: #1a1a25;
            --text: #ffffff;
            --text-muted: #8888aa;
            --success: #00ff88;
            --error: #ff4444;
            --warning: #ffaa00;
            --border: rgba(255, 255, 255, 0.1);
        }

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

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-dark);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Background Animation */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(ellipse at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(255, 212, 0, 0.1) 0%, transparent 50%),
                linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 2rem;
        }

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

        .logo i {
            color: var(--primary);
        }

        .logo .highlight {
            color: var(--secondary);
        }

        .header-links {
            display: flex;
            gap: 1.5rem;
        }

        .header-links a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s;
        }

        .header-links a:hover {
            color: var(--primary);
        }

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

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.875rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--text), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

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

        /* Main Content */
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-top: 2rem;
        }

        @media (max-width: 1024px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }

        /* Card */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
        }

        .card:hover {
            border-color: rgba(0, 212, 255, 0.3);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.1);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        /* Upload Zone */
        .upload-zone {
            border: 2px dashed var(--border);
            border-radius: 12px;
            padding: 3rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .upload-zone:hover,
        .upload-zone.dragover {
            border-color: var(--primary);
            background: rgba(0, 212, 255, 0.05);
        }

        .upload-zone i {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .upload-zone h3 {
            margin-bottom: 0.5rem;
        }

        .upload-zone p {
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .upload-zone input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        /* Video Preview */
        .video-preview {
            position: relative;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 1.5rem;
            display: none;
        }

        .video-preview video {
            width: 100%;
            display: block;
        }

        .video-preview.active {
            display: block;
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.875rem 1.5rem;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            font-family: inherit;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--bg-dark);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }

        .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .btn-secondary {
            background: var(--bg-card-hover);
            color: var(--text);
            border: 1px solid var(--border);
        }

        .btn-secondary:hover {
            border-color: var(--primary);
        }

        .button-group {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        /* Results */
        .results-section {
            display: none;
        }

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

        .result-main {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 212, 0, 0.1));
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .result-action {
            font-size: 2.5rem;
            font-weight: 800;
            text-transform: uppercase;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }

        .result-confidence {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 1.125rem;
        }

        .confidence-bar {
            width: 150px;
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }

        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        /* Predictions List */
        .predictions-list {
            display: grid;
            gap: 0.75rem;
        }

        .prediction-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .prediction-item:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .prediction-item.top {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        .prediction-rank {
            width: 28px;
            height: 28px;
            background: var(--bg-card-hover);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .prediction-item.top .prediction-rank {
            background: var(--primary);
            color: var(--bg-dark);
        }

        .prediction-name {
            flex: 1;
            text-transform: capitalize;
        }

        .prediction-score {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .prediction-bar {
            width: 80px;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }

        .prediction-bar-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 3px;
            transition: width 0.5s ease;
        }

        /* Sample Videos */
        .sample-videos {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .sample-video {
            background: var(--bg-card-hover);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sample-video:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
        }

        .sample-video i {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .sample-video span {
            display: block;
            font-size: 0.875rem;
            text-transform: capitalize;
        }

        /* Loading */
        .loading {
            display: none;
            text-align: center;
            padding: 2rem;
        }

        .loading.active {
            display: block;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

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

        /* API Status */
        .api-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(0, 255, 136, 0.1);
            border-radius: 8px;
            font-size: 0.875rem;
        }

        .api-status.offline {
            background: rgba(255, 68, 68, 0.1);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .api-status.offline .status-dot {
            background: var(--error);
            animation: none;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Footer */
        .footer {
            text-align: center;
            padding: 3rem 0;
            margin-top: 3rem;
            border-top: 1px solid var(--border);
            color: var(--text-muted);
        }

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

        .footer a:hover {
            text-decoration: underline;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .container {
                padding: 1rem;
            }

            .card {
                padding: 1.5rem;
            }

            .button-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>

    <div class="container">
        <!-- Header -->
        <header class="header">
            <a href="https://rskworld.in" class="logo">
                <i class="fas fa-video"></i>
                RSK<span class="highlight">World</span>
            </a>
            <div class="header-links">
                <a href="index.html"><i class="fas fa-home"></i> Home</a>
                <a href="https://rskworld.in/contact.php"><i class="fas fa-envelope"></i> Contact</a>
            </div>
        </header>

        <!-- Hero -->
        <section class="hero">
            <div class="hero-badge">
                <i class="fas fa-brain"></i>
                <span>AI-Powered</span>
            </div>
            <h1>Action Recognition Demo</h1>
            <p>Upload a video or use your webcam to see real-time action recognition in action. Powered by deep learning.</p>
        </section>

        <!-- Main Content -->
        <div class="main-content">
            <!-- Upload Section -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-upload"></i>
                    </div>
                    <div>
                        <h2 class="card-title">Upload Video</h2>
                        <p style="color: var(--text-muted); font-size: 0.875rem;">Drag & drop or click to select</p>
                    </div>
                </div>

                <div class="upload-zone" id="uploadZone">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h3>Drop your video here</h3>
                    <p>Supports MP4, AVI, MOV, MKV, WebM (max 100MB)</p>
                    <input type="file" id="videoInput" accept="video/*">
                </div>

                <div class="video-preview" id="videoPreview">
                    <video id="videoPlayer" controls></video>
                </div>

                <div class="button-group">
                    <button class="btn btn-primary" id="predictBtn" disabled>
                        <i class="fas fa-magic"></i>
                        Analyze Video
                    </button>
                    <button class="btn btn-secondary" id="clearBtn" style="display: none;">
                        <i class="fas fa-times"></i>
                        Clear
                    </button>
                </div>

                <!-- Sample Videos -->
                <h3 style="margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1rem;">Or try sample videos:</h3>
                <div class="sample-videos">
                    <div class="sample-video" data-action="dancing">
                        <i class="fas fa-music"></i>
                        <span>Dancing</span>
                    </div>
                    <div class="sample-video" data-action="running">
                        <i class="fas fa-running"></i>
                        <span>Running</span>
                    </div>
                    <div class="sample-video" data-action="walking">
                        <i class="fas fa-walking"></i>
                        <span>Walking</span>
                    </div>
                    <div class="sample-video" data-action="jumping">
                        <i class="fas fa-arrow-up"></i>
                        <span>Jumping</span>
                    </div>
                </div>
            </div>

            <!-- Results Section -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon" style="background: linear-gradient(135deg, var(--secondary), #ff9900);">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div>
                        <h2 class="card-title">Prediction Results</h2>
                        <div class="api-status" id="apiStatus">
                            <div class="status-dot"></div>
                            <span>API Connected</span>
                        </div>
                    </div>
                </div>

                <!-- Loading State -->
                <div class="loading" id="loading">
                    <div class="spinner"></div>
                    <p>Analyzing video...</p>
                </div>

                <!-- Results -->
                <div class="results-section" id="resultsSection">
                    <div class="result-main">
                        <div class="result-action" id="resultAction">WALKING</div>
                        <div class="result-confidence">
                            <span>Confidence:</span>
                            <div class="confidence-bar">
                                <div class="confidence-fill" id="confidenceFill" style="width: 0%"></div>
                            </div>
                            <span id="confidenceValue">0%</span>
                        </div>
                    </div>

                    <h3 style="margin-bottom: 1rem; font-size: 1rem;">All Predictions</h3>
                    <div class="predictions-list" id="predictionsList">
                        <!-- Predictions will be inserted here -->
                    </div>
                </div>

                <!-- Initial State -->
                <div id="initialState" style="text-align: center; padding: 3rem; color: var(--text-muted);">
                    <i class="fas fa-video" style="font-size: 4rem; margin-bottom: 1rem; color: var(--border);"></i>
                    <p>Upload a video to see predictions</p>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="footer">
            <p>
                Created by <a href="https://rskworld.in">RSK World</a> | 
                Founded by <strong>Molla Samser</strong> | 
                Designer: <strong>Rima Khatun</strong>
            </p>
            <p style="margin-top: 0.5rem;">
                Contact: <a href="mailto:help@rskworld.in">help@rskworld.in</a> | 
                +91 93305 39277
            </p>
            <p style="margin-top: 1rem;">
                &copy; 2026 RSK World. All Rights Reserved.
            </p>
        </footer>
    </div>

    <script>
        // RSK World - Action Recognition Demo
        // (c) 2026 RSK World. All Rights Reserved.

        const API_URL = window.location.origin;
        
        // Elements
        const uploadZone = document.getElementById('uploadZone');
        const videoInput = document.getElementById('videoInput');
        const videoPreview = document.getElementById('videoPreview');
        const videoPlayer = document.getElementById('videoPlayer');
        const predictBtn = document.getElementById('predictBtn');
        const clearBtn = document.getElementById('clearBtn');
        const loading = document.getElementById('loading');
        const resultsSection = document.getElementById('resultsSection');
        const initialState = document.getElementById('initialState');
        const apiStatus = document.getElementById('apiStatus');

        let selectedFile = null;

        // Check API status
        async function checkApiStatus() {
            try {
                const response = await fetch(`${API_URL}/api/health`);
                if (response.ok) {
                    apiStatus.classList.remove('offline');
                    apiStatus.innerHTML = '<div class="status-dot"></div><span>API Connected</span>';
                } else {
                    throw new Error('API not responding');
                }
            } catch (error) {
                apiStatus.classList.add('offline');
                apiStatus.innerHTML = '<div class="status-dot"></div><span>API Offline</span>';
            }
        }

        // Drag and drop
        uploadZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadZone.classList.add('dragover');
        });

        uploadZone.addEventListener('dragleave', () => {
            uploadZone.classList.remove('dragover');
        });

        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadZone.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        // File input
        videoInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFile(e.target.files[0]);
            }
        });

        // Handle file selection
        function handleFile(file) {
            if (!file.type.startsWith('video/')) {
                alert('Please select a video file');
                return;
            }

            selectedFile = file;
            
            // Show preview
            const url = URL.createObjectURL(file);
            videoPlayer.src = url;
            videoPreview.classList.add('active');
            predictBtn.disabled = false;
            clearBtn.style.display = 'inline-flex';

            // Hide results
            resultsSection.classList.remove('active');
            initialState.style.display = 'block';
        }

        // Clear selection
        clearBtn.addEventListener('click', () => {
            selectedFile = null;
            videoPlayer.src = '';
            videoPreview.classList.remove('active');
            predictBtn.disabled = true;
            clearBtn.style.display = 'none';
            videoInput.value = '';
            resultsSection.classList.remove('active');
            initialState.style.display = 'block';
        });

        // Predict
        predictBtn.addEventListener('click', async () => {
            if (!selectedFile) return;

            // Show loading
            loading.classList.add('active');
            resultsSection.classList.remove('active');
            initialState.style.display = 'none';
            predictBtn.disabled = true;

            try {
                const formData = new FormData();
                formData.append('video', selectedFile);

                const response = await fetch(`${API_URL}/api/predict`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.error) {
                    throw new Error(result.error);
                }

                displayResults(result);
            } catch (error) {
                alert('Error: ' + error.message);
            } finally {
                loading.classList.remove('active');
                predictBtn.disabled = false;
            }
        });

        // Display results
        function displayResults(result) {
            // Main result
            document.getElementById('resultAction').textContent = result.predicted_action.toUpperCase();
            document.getElementById('confidenceFill').style.width = `${result.confidence * 100}%`;
            document.getElementById('confidenceValue').textContent = `${(result.confidence * 100).toFixed(1)}%`;

            // All predictions
            const predictions = Object.entries(result.all_predictions)
                .sort((a, b) => b[1] - a[1]);

            const predictionsList = document.getElementById('predictionsList');
            predictionsList.innerHTML = predictions.map((pred, index) => `
                <div class="prediction-item ${index === 0 ? 'top' : ''}">
                    <div class="prediction-rank">${index + 1}</div>
                    <span class="prediction-name">${pred[0]}</span>
                    <span class="prediction-score">${(pred[1] * 100).toFixed(1)}%</span>
                    <div class="prediction-bar">
                        <div class="prediction-bar-fill" style="width: ${pred[1] * 100}%"></div>
                    </div>
                </div>
            `).join('');

            // Show results
            resultsSection.classList.add('active');
            initialState.style.display = 'none';
        }

        // Sample videos
        document.querySelectorAll('.sample-video').forEach(el => {
            el.addEventListener('click', async () => {
                const action = el.dataset.action;
                const videoPath = `sample_data/train/${action}/${action}_001.mp4`;
                
                // Try to load sample video
                try {
                    const response = await fetch(videoPath);
                    if (response.ok) {
                        const blob = await response.blob();
                        const file = new File([blob], `${action}_001.mp4`, { type: 'video/mp4' });
                        handleFile(file);
                    } else {
                        alert(`Sample video for "${action}" not found. Please upload your own video.`);
                    }
                } catch (error) {
                    alert(`Could not load sample video. Please upload your own video.`);
                }
            });
        });

        // Initialize
        checkApiStatus();
        setInterval(checkApiStatus, 30000);
    </script>
</body>
</html>

904 lines•28.3 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size