Spaces:

7Zeux
/

ai-commented-vision

Running

App Files Files Community

7Zeux commited on Apr 5

Commit

70afb1a

verified ·

1 Parent(s): 801ad47

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +536 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai Commented Vision
-emoji: 🔥
 colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai-commented-vision
+emoji: 🐳
 colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,536 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Video Commentary Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%; /* 16:9 */
+            height: 0;
+            overflow: hidden;
+        }
+        .video-container video, .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 0.5rem;
+        }
+        .commentary-bubble {
+            position: relative;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 1rem;
+            padding: 1rem;
+            margin: 0.5rem 0;
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .tone-active {
+            border: 2px solid #3b82f6;
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="mb-8">
+            <h1 class="text-4xl font-bold text-center mb-2 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
+                Live Video Commentary AI
+            </h1>
+            <p class="text-center text-gray-400 max-w-2xl mx-auto">
+                Get real-time AI-generated commentary on your live video feed with customizable tone and attitude
+            </p>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Video Input Section -->
+            <div class="lg:col-span-2 space-y-4">
+                <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold">Video Input</h2>
+                        <div class="flex space-x-2">
+                            <button id="startWebcam" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
+                                <i class="fas fa-camera mr-2"></i> Webcam
+                            </button>
+                            <button id="connectNdi" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center">
+                                <i class="fas fa-broadcast-tower mr-2"></i> NDI
+                            </button>
+                            <button id="connectRtmp" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center">
+                                <i class="fas fa-satellite-dish mr-2"></i> RTMP
+                            </button>
+                        </div>
+                    </div>
+                    <div class="video-container bg-gray-900 rounded-lg">
+                        <video id="liveVideo" autoplay playsinline class="w-full h-full object-cover"></video>
+                        <div id="rtmpInput" class="hidden p-4">
+                            <input type="text" id="rtmpUrl" placeholder="rtmp://example.com/live/streamkey"
+                                   class="w-full bg-gray-700 rounded-lg px-4 py-2 mb-2">
+                            <button id="startRtmp" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg w-full">
+                                Connect RTMP
+                            </button>
+                        </div>
+                        <div id="ndiInput" class="hidden p-4">
+                            <select id="ndiSources" class="w-full bg-gray-700 rounded-lg px-4 py-2 mb-2">
+                                <option value="">Select NDI Source</option>
+                            </select>
+                            <button id="startNdi" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg w-full">
+                                Connect NDI
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="flex space-x-2">
+                            <button id="captureFrame" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">
+                                <i class="fas fa-camera-retro mr-2"></i> Capture Frame
+                            </button>
+                            <button id="startAnalysis" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg pulse">
+                                <i class="fas fa-comment-dots mr-2"></i> Start Commentary
+                            </button>
+                        </div>
+                        <div id="statusIndicator" class="flex items-center text-gray-400">
+                            <i class="fas fa-circle-notch fa-spin mr-2"></i>
+                            <span>Waiting for input</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Captured Frames -->
+                <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
+                    <h2 class="text-xl font-semibold mb-4">Captured Frames</h2>
+                    <div id="capturedFrames" class="grid grid-cols-3 gap-2">
+                        <!-- Frames will be added here -->
+                    </div>
+                </div>
+            </div>
+            <!-- Commentary Controls -->
+            <div class="space-y-4">
+                <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
+                    <h2 class="text-xl font-semibold mb-4">Commentary Settings</h2>
+                    <div class="mb-4">
+                        <label class="block text-gray-400 mb-2">Tone</label>
+                        <div class="grid grid-cols-3 gap-2">
+                            <button data-tone="professional" class="tone-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i class="fas fa-user-tie mr-1"></i> Professional
+                            </button>
+                            <button data-tone="casual" class="tone-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i class="fas fa-smile mr-1"></i> Casual
+                            </button>
+                            <button data-tone="humorous" class="tone-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i class="fas fa-laugh-squint mr-1"></i> Humorous
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-400 mb-2">Attitude</label>
+                        <div class="grid grid-cols-3 gap-2">
+                            <button data-attitude="neutral" class="attitude-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i class="fas fa-meh mr-1"></i> Neutral
+                            </button>
+                            <button data-attitude="positive" class="attitude-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i class="fas fa-thumbs-up mr-1"></i> Positive
+                            </button>
+                            <button data-attitude="critical" class="attitude-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i class="fas fa-search mr-1"></i> Critical
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-400 mb-2">Commentary Speed</label>
+                        <input type="range" id="commentarySpeed" min="1" max="10" value="5"
+                               class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                        <div class="flex justify-between text-xs text-gray-400 mt-1">
+                            <span>Slow</span>
+                            <span>Medium</span>
+                            <span>Fast</span>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-400 mb-2">Custom Prompt</label>
+                        <textarea id="customPrompt" rows="3"
+                                  class="w-full bg-gray-700 rounded-lg px-4 py-2 text-white"
+                                  placeholder="Add specific instructions for the AI..."></textarea>
+                    </div>
+                    <button id="generateCommentary" class="w-full bg-blue-600 hover:bg-blue-700 px-4 py-3 rounded-lg font-medium">
+                        <i class="fas fa-bolt mr-2"></i> Generate Commentary
+                    </button>
+                </div>
+                <!-- Live Commentary -->
+                <div class="bg-gray-800 rounded-xl p-4 shadow-lg h-96 overflow-hidden flex flex-col">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold">Live Commentary</h2>
+                        <button id="clearComments" class="text-gray-400 hover:text-white">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
+                    </div>
+                    <div id="commentaryFeed" class="flex-1 overflow-y-auto space-y-2 pr-2">
+                        <div class="commentary-bubble">
+                            <div class="text-sm text-gray-400 mb-1">System</div>
+                            <p>Welcome! Connect a video source and start generating real-time commentary.</p>
+                        </div>
+                    </div>
+                    <div class="mt-2 flex items-center text-gray-400 text-sm">
+                        <i class="fas fa-info-circle mr-2"></i>
+                        <span>Analysis updates every 5 seconds</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const liveVideo = document.getElementById('liveVideo');
+        const startWebcamBtn = document.getElementById('startWebcam');
+        const connectNdiBtn = document.getElementById('connectNdi');
+        const connectRtmpBtn = document.getElementById('connectRtmp');
+        const rtmpInput = document.getElementById('rtmpInput');
+        const ndiInput = document.getElementById('ndiInput');
+        const rtmpUrl = document.getElementById('rtmpUrl');
+        const startRtmpBtn = document.getElementById('startRtmp');
+        const ndiSources = document.getElementById('ndiSources');
+        const startNdiBtn = document.getElementById('startNdi');
+        const captureFrameBtn = document.getElementById('captureFrame');
+        const startAnalysisBtn = document.getElementById('startAnalysis');
+        const statusIndicator = document.getElementById('statusIndicator');
+        const capturedFrames = document.getElementById('capturedFrames');
+        const commentaryFeed = document.getElementById('commentaryFeed');
+        const generateCommentaryBtn = document.getElementById('generateCommentary');
+        const clearCommentsBtn = document.getElementById('clearComments');
+        const toneBtns = document.querySelectorAll('.tone-btn');
+        const attitudeBtns = document.querySelectorAll('.attitude-btn');
+        const commentarySpeed = document.getElementById('commentarySpeed');
+        const customPrompt = document.getElementById('customPrompt');
+        // State
+        let currentStream = null;
+        let analysisInterval = null;
+        let selectedTone = 'professional';
+        let selectedAttitude = 'neutral';
+        let isAnalyzing = false;
+        let frameCount = 0;
+        // Tone Selection
+        toneBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                toneBtns.forEach(b => b.classList.remove('tone-active'));
+                btn.classList.add('tone-active');
+                selectedTone = btn.dataset.tone;
+                addCommentaryMessage('System', `Tone changed to ${selectedTone}`, 'system');
+            });
+        });
+        // Attitude Selection
+        attitudeBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                attitudeBtns.forEach(b => b.classList.remove('tone-active'));
+                btn.classList.add('tone-active');
+                selectedAttitude = btn.dataset.attitude;
+                addCommentaryMessage('System', `Attitude changed to ${selectedAttitude}`, 'system');
+            });
+        });
+        // Webcam
+        startWebcamBtn.addEventListener('click', async () => {
+            try {
+                if (currentStream) {
+                    currentStream.getTracks().forEach(track => track.stop());
+                }
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: { width: 1280, height: 720 },
+                    audio: false
+                });
+                liveVideo.srcObject = stream;
+                currentStream = stream;
+                rtmpInput.classList.add('hidden');
+                ndiInput.classList.add('hidden');
+                updateStatus('Webcam connected', 'text-green-400');
+                addCommentaryMessage('System', 'Webcam feed connected successfully', 'system');
+            } catch (err) {
+                console.error('Error accessing webcam:', err);
+                updateStatus('Webcam error', 'text-red-400');
+                addCommentaryMessage('System', `Webcam error: ${err.message}`, 'error');
+            }
+        });
+        // NDI (Simulated)
+        connectNdiBtn.addEventListener('click', () => {
+            rtmpInput.classList.add('hidden');
+            ndiInput.classList.remove('hidden');
+            // Simulate finding NDI sources
+            ndiSources.innerHTML = `
+                <option value="">Select NDI Source</option>
+                <option value="ndi1">Camera 1 (NDI)</option>
+                <option value="ndi2">Camera 2 (NDI)</option>
+                <option value="ndi3">Virtual Camera (NDI)</option>
+            `;
+            updateStatus('Scanning for NDI sources...', 'text-yellow-400');
+        });
+        startNdiBtn.addEventListener('click', () => {
+            if (!ndiSources.value) {
+                updateStatus('Please select an NDI source', 'text-red-400');
+                return;
+            }
+            // In a real implementation, you would connect to the NDI source here
+            // For demo purposes, we'll just show a placeholder
+            liveVideo.srcObject = null;
+            liveVideo.poster = 'https://via.placeholder.com/1280x720/333333/666666?text=NDI+Source+Connected';
+            updateStatus(`NDI source connected: ${ndiSources.options[ndiSources.selectedIndex].text}`, 'text-green-400');
+            addCommentaryMessage('System', `NDI source connected: ${ndiSources.options[ndiSources.selectedIndex].text}`, 'system');
+        });
+        // RTMP
+        connectRtmpBtn.addEventListener('click', () => {
+            ndiInput.classList.add('hidden');
+            rtmpInput.classList.remove('hidden');
+            updateStatus('Enter RTMP URL', 'text-yellow-400');
+        });
+        startRtmpBtn.addEventListener('click', () => {
+            if (!rtmpUrl.value) {
+                updateStatus('Please enter an RTMP URL', 'text-red-400');
+                return;
+            }
+            // In a real implementation, you would connect to the RTMP stream here
+            // For demo purposes, we'll just show a placeholder
+            liveVideo.srcObject = null;
+            liveVideo.poster = 'https://via.placeholder.com/1280x720/333333/666666?text=RTMP+Stream+Connected';
+            updateStatus(`RTMP connected: ${rtmpUrl.value}`, 'text-green-400');
+            addCommentaryMessage('System', `RTMP stream connected: ${rtmpUrl.value}`, 'system');
+        });
+        // Capture Frame
+        captureFrameBtn.addEventListener('click', () => {
+            if (!liveVideo.srcObject && !liveVideo.poster) {
+                updateStatus('No video source to capture', 'text-red-400');
+                return;
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = liveVideo.videoWidth || 1280;
+            canvas.height = liveVideo.videoHeight || 720;
+            const ctx = canvas.getContext('2d');
+            if (liveVideo.srcObject) {
+                ctx.drawImage(liveVideo, 0, 0, canvas.width, canvas.height);
+            }
+            const frameUrl = canvas.toDataURL('image/jpeg', 0.8);
+            frameCount++;
+            capturedFrames.innerHTML += `
+                <div class="relative group">
+                    <img src="${frameUrl}" alt="Captured frame ${frameCount}" class="w-full h-32 object-cover rounded-lg">
+                    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
+                        <button class="analyze-frame bg-blue-600 hover:bg-blue-700 p-2 rounded-full" data-frame="${frameUrl}">
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </div>
+                    <div class="text-xs text-gray-400 mt-1 truncate">Frame ${frameCount}</div>
+                </div>
+            `;
+            updateStatus(`Frame captured (${frameCount})`, 'text-blue-400');
+            addCommentaryMessage('System', `Frame #${frameCount} captured`, 'system');
+            // Add event listeners to new analyze buttons
+            document.querySelectorAll('.analyze-frame').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    analyzeFrame(btn.dataset.frame);
+                });
+            });
+        });
+        // Start/Stop Analysis
+        startAnalysisBtn.addEventListener('click', () => {
+            if (isAnalyzing) {
+                stopAnalysis();
+            } else {
+                startAnalysis();
+            }
+        });
+        function startAnalysis() {
+            if (!liveVideo.srcObject && !liveVideo.poster) {
+                updateStatus('No video source to analyze', 'text-red-400');
+                return;
+            }
+            isAnalyzing = true;
+            startAnalysisBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Commentary';
+            startAnalysisBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
+            startAnalysisBtn.classList.add('bg-gray-600', 'hover:bg-gray-700');
+            // Simulate analysis every 5 seconds
+            analysisInterval = setInterval(() => {
+                generateCommentary();
+            }, 5000);
+            updateStatus('Analyzing video feed...', 'text-yellow-400');
+            addCommentaryMessage('System', 'Starting real-time video analysis', 'system');
+        }
+        function stopAnalysis() {
+            isAnalyzing = false;
+            clearInterval(analysisInterval);
+            startAnalysisBtn.innerHTML = '<i class="fas fa-comment-dots mr-2"></i> Start Commentary';
+            startAnalysisBtn.classList.remove('bg-gray-600', 'hover:bg-gray-700');
+            startAnalysisBtn.classList.add('bg-red-600', 'hover:bg-red-700');
+            updateStatus('Analysis stopped', 'text-gray-400');
+            addCommentaryMessage('System', 'Real-time analysis stopped', 'system');
+        }
+        // Generate Commentary
+        generateCommentaryBtn.addEventListener('click', generateCommentary);
+        function generateCommentary() {
+            if (!liveVideo.srcObject && !liveVideo.poster) {
+                updateStatus('No video source to analyze', 'text-red-400');
+                return;
+            }
+            updateStatus('Generating commentary...', 'text-yellow-400');
+            // Simulate API call to generate commentary
+            setTimeout(() => {
+                const tones = {
+                    professional: "This professional analysis suggests",
+                    casual: "Hey, check this out -",
+                    humorous: "OMG, you won't believe this -"
+                };
+                const attitudes = {
+                    neutral: "the current scene appears to be",
+                    positive: "the amazing scene shows",
+                    critical: "there seems to be an issue with"
+                };
+                const topics = [
+                    "optimal lighting conditions with balanced exposure",
+                    "a slightly overexposed background that could use adjustment",
+                    "excellent framing and composition",
+                    "a distracting element in the left third of the frame",
+                    "good color balance and skin tones",
+                    "potential white balance issues",
+                    "strong eye contact with the audience",
+                    "a need for more dynamic movement",
+                    "perfect audio levels",
+                    "some background noise that could be reduced"
+                ];
+                const randomTopic = topics[Math.floor(Math.random() * topics.length)];
+                const commentary = `${tones[selectedTone]} ${attitudes[selectedAttitude]} ${randomTopic}.`;
+                addCommentaryMessage('AI Assistant', commentary, 'ai');
+                updateStatus('Commentary generated', 'text-green-400');
+            }, 1500);
+        }
+        // Analyze Frame
+        function analyzeFrame(frameUrl) {
+            updateStatus('Analyzing frame...', 'text-yellow-400');
+            // Simulate frame analysis
+            setTimeout(() => {
+                const analysisResults = [
+                    "Frame analysis detected good contrast ratio",
+                    "The composition follows the rule of thirds",
+                    "Potential color cast detected in shadows",
+                    "Sharpness appears slightly soft",
+                    "No visible noise in the image",
+                    "White balance appears accurate",
+                    "Subject is well-lit with no harsh shadows",
+                    "Background has pleasing bokeh effect"
+                ];
+                const randomResult = analysisResults[Math.floor(Math.random() * analysisResults.length)];
+                addCommentaryMessage('Frame Analysis', randomResult, 'analysis');
+                updateStatus('Frame analysis complete', 'text-green-400');
+            }, 2000);
+        }
+        // Clear Comments
+        clearCommentsBtn.addEventListener('click', () => {
+            commentaryFeed.innerHTML = `
+                <div class="commentary-bubble">
+                    <div class="text-sm text-gray-400 mb-1">System</div>
+                    <p>Commentary feed cleared. New analysis will appear here.</p>
+                </div>
+            `;
+        });
+        // Helper Functions
+        function updateStatus(message, colorClass) {
+            const icon = statusIndicator.querySelector('i');
+            icon.className = colorClass.includes('yellow') ? 'fas fa-circle-notch fa-spin mr-2' :
+                            colorClass.includes('red') ? 'fas fa-exclamation-circle mr-2' :
+                            colorClass.includes('green') ? 'fas fa-check-circle mr-2' :
+                            'fas fa-info-circle mr-2';
+            statusIndicator.querySelector('span').textContent = message;
+            statusIndicator.className = `flex items-center ${colorClass}`;
+        }
+        function addCommentaryMessage(sender, message, type) {
+            const typeClasses = {
+                'system': 'bg-gray-700',
+                'ai': 'bg-blue-900',
+                'error': 'bg-red-900',
+                'analysis': 'bg-purple-900'
+            };
+            const bubble = document.createElement('div');
+            bubble.className = `commentary-bubble ${typeClasses[type] || 'bg-gray-800'}`;
+            bubble.innerHTML = `
+                <div class="text-sm text-gray-300 mb-1">${sender}</div>
+                <p>${message}</p>
+            `;
+            commentaryFeed.appendChild(bubble);
+            commentaryFeed.scrollTop = commentaryFeed.scrollHeight;
+        }
+        // Initialize with professional tone selected
+        document.querySelector('[data-tone="professional"]').classList.add('tone-active');
+        document.querySelector('[data-attitude="neutral"]').classList.add('tone-active');
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=7Zeux/ai-commented-vision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>