Spaces:

NV9523
/

yolo-vision-tracker

Running

App Files Files Community

NV9523 commited on Nov 27, 2025

Commit

fdbe73c

verified ·

1 Parent(s): 3562f46

Tối ưu lại code này cho đơn giản để có biểu đồ khi đếm được số lượng và có thể chọn camera trong hệ thống trình duyệt và khi vẽ gửi về server thì sẽ hiển thị trên frontend

Browse files

Files changed (3) hide show

README.md +7 -4
index.html +697 -19
style.css +169 -17

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Yolo Vision Tracker
-emoji: 🚀
 colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: YOLO Vision Tracker 👁️‍🗨️
 colorFrom: blue
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,697 @@
-<!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="vi">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>YOLO Detection - Browser Camera</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+.container {
+                background: white;
+                border-radius: 16px;
+                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+                overflow: hidden;
+                max-width: 1200px;
+                width: 100%;
+            }
+            .header {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 24px;
+                text-align: center;
+            }
+            h1 {
+                font-size: 28px;
+                font-weight: 700;
+                margin-bottom: 8px;
+            }
+            .status {
+                font-size: 14px;
+                opacity: 0.9;
+            }
+            .content {
+                padding: 24px;
+            }
+            .video-container {
+                position: relative;
+                background: #000;
+                border-radius: 12px;
+                overflow: hidden;
+                margin-bottom: 24px;
+            }
+            #outputCanvas {
+                width: 100%;
+                height: auto;
+                display: block;
+                cursor: crosshair;
+            }
+            #outputCanvas.drawing {
+                cursor: crosshair;
+            }
+            #videoInput {
+                display: none;
+            }
+            .controls {
+                text-align: center;
+                margin-bottom: 24px;
+                display: flex;
+                gap: 12px;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+            button {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                border: none;
+                padding: 12px 32px;
+                border-radius: 8px;
+                font-size: 16px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: transform 0.2s;
+            }
+            button:hover {
+                transform: translateY(-2px);
+            }
+            button:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            button.draw-mode {
+                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            }
+            button.grid-mode {
+                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+            }
+            .hint {
+                text-align: center;
+                color: #666;
+                font-size: 14px;
+                margin-bottom: 16px;
+                padding: 8px;
+                background: #f0f0f0;
+                border-radius: 8px;
+            }
+            .hint.active {
+                background: #fff3cd;
+                color: #856404;
+            }
+            .stats {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                gap: 16px;
+            }
+            .stat-card {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 20px;
+                border-radius: 12px;
+                text-align: center;
+            }
+            .stat-label {
+                font-size: 14px;
+                opacity: 0.9;
+                margin-bottom: 8px;
+            }
+            .stat-value {
+                font-size: 32px;
+                font-weight: 700;
+            }
+            .footer {
+                text-align: center;
+                padding: 16px;
+                color: #666;
+                font-size: 14px;
+            }
+            @media (max-width: 768px) {
+                h1 { font-size: 24px; }
+                .stat-value { font-size: 28px; }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <h1>📹 YOLO Detection - Browser Camera</h1>
+                <div class="status">Real-time Object Detection from Your Camera</div>
+            </div>
+            <div class="content">
+            <div class="controls">
+                <select id="cameraSelect" class="camera-select">
+                    <option value="">-- Select Camera --</option>
+                </select>
+                <button id="startBtn">🎥 Start Camera</button>
+                <button id="stopBtn" disabled>⏹️ Stop Camera</button>
+                <button id="drawLineBtn" disabled>✏️ Draw Line</button>
+                <button id="toggleGridBtn" disabled>📐 Show Grid</button>
+                <button id="resetCountBtn">🔄 Reset Count</button>
+            </div>
+<div class="hint" id="hintText">
+                    Click "Start Camera" để bắt đầu. Sau đó nhấn "Draw Line" để vẽ vạch đếm.
+                </div>
+                <div class="video-container">
+                    <video id="videoInput" autoplay playsinline></video>
+                    <canvas id="outputCanvas"></canvas>
+                </div>
+                <div class="stats">
+                    <div class="stat-card">
+                        <div class="stat-label">Total Objects</div>
+                        <div class="stat-value" id="totalCount">0</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-label">FPS</div>
+                        <div class="stat-value" id="fpsValue">0</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-label">Status</div>
+                        <div class="stat-value" style="font-size: 20px;" id="statusText">⚪ Ready</div>
+                    </div>
+                </div>
+                <div class="chart-container">
+                    <canvas id="countChart"></canvas>
+                </div>
+</div>
+            <div class="footer">
+                Powered by FastAPI + YOLO | Browser Camera Detection
+            </div>
+        </div>
+        <script>
+            const video = document.getElementById('videoInput');
+            const canvas = document.getElementById('outputCanvas');
+            const ctx = canvas.getContext('2d');
+            const startBtn = document.getElementById('startBtn');
+            const stopBtn = document.getElementById('stopBtn');
+            const drawLineBtn = document.getElementById('drawLineBtn');
+            const toggleGridBtn = document.getElementById('toggleGridBtn');
+            const resetCountBtn = document.getElementById('resetCountBtn');
+            const statusText = document.getElementById('statusText');
+            const hintText = document.getElementById('hintText');
+            let ws = null;
+            let stream = null;
+            let animationId = null;
+            let isDrawingMode = false;
+            let showGrid = false;
+            let linePoints = [];
+            let tempLine = null;
+            let currentLine = null; // Lưu line đã vẽ
+            // Vẽ tất cả overlays (grid + lines)
+            function drawOverlays() {
+                drawGrid();
+                drawCountLine();
+                drawTempLine();
+            }
+            // Vẽ line đã vẽ (COUNT LINE)
+            function drawCountLine() {
+                if (!currentLine) return;
+                const w = canvas.width;
+                const h = canvas.height;
+                const x1 = currentLine[0] * w;
+                const y1 = currentLine[1] * h;
+                const x2 = currentLine[2] * w;
+                const y2 = currentLine[3] * h;
+                // Vẽ line chính màu xanh dương đậm
+                ctx.strokeStyle = '#00FF00'; // Màu xanh lá neon
+                ctx.lineWidth = 5;
+                ctx.setLineDash([]);
+                ctx.shadowColor = '#00FF00';
+                ctx.shadowBlur = 10;
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.lineTo(x2, y2);
+                ctx.stroke();
+                ctx.shadowBlur = 0;
+                // Vẽ điểm endpoint
+                ctx.fillStyle = '#00FF00';
+                ctx.strokeStyle = '#FFFFFF';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.arc(x1, y1, 10, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.arc(x2, y2, 10, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.stroke();
+                // Label với background
+                ctx.font = 'bold 18px Arial';
+                const labelText = '⚡ COUNT LINE';
+                const labelX = (x1 + x2) / 2;
+                const labelY = (y1 + y2) / 2 - 15;
+                const textWidth = ctx.measureText(labelText).width;
+                // Background
+                ctx.fillStyle = 'rgba(0, 255, 0, 0.8)';
+                ctx.fillRect(labelX - textWidth/2 - 10, labelY - 25, textWidth + 20, 35);
+                // Text
+                ctx.fillStyle = '#000000';
+                ctx.fillText(labelText, labelX - textWidth/2, labelY);
+            }
+            // Vẽ line tạm (preview khi đang vẽ)
+            function drawTempLine() {
+                if (!isDrawingMode || !tempLine) return;
+                ctx.strokeStyle = '#FF0000';
+                ctx.lineWidth = 3;
+                ctx.setLineDash([10, 5]);
+                ctx.beginPath();
+                ctx.moveTo(tempLine.x1, tempLine.y1);
+                ctx.lineTo(tempLine.x2, tempLine.y2);
+                ctx.stroke();
+                ctx.setLineDash([]);
+                // Vẽ điểm
+                ctx.fillStyle = '#FF0000';
+                ctx.strokeStyle = '#FFFFFF';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.arc(tempLine.x1, tempLine.y1, 8, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.stroke();
+                if (tempLine.x2 !== undefined) {
+                    ctx.beginPath();
+                    ctx.arc(tempLine.x2, tempLine.y2, 8, 0, 2 * Math.PI);
+                    ctx.fill();
+                    ctx.stroke();
+                }
+                // Hiển thị tọa độ
+                ctx.font = 'bold 14px Arial';
+                const coord1 = `(${Math.round(tempLine.x1)}, ${Math.round(tempLine.y1)})`;
+                // Background cho text
+                const textWidth1 = ctx.measureText(coord1).width;
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                ctx.fillRect(tempLine.x1 + 5, tempLine.y1 - 25, textWidth1 + 10, 20);
+                ctx.fillStyle = '#FFFFFF';
+                ctx.fillText(coord1, tempLine.x1 + 10, tempLine.y1 - 10);
+                if (tempLine.x2 !== undefined) {
+                    const coord2 = `(${Math.round(tempLine.x2)}, ${Math.round(tempLine.y2)})`;
+                    const textWidth2 = ctx.measureText(coord2).width;
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                    ctx.fillRect(tempLine.x2 + 5, tempLine.y2 - 25, textWidth2 + 10, 20);
+                    ctx.fillStyle = '#FFFFFF';
+                    ctx.fillText(coord2, tempLine.x2 + 10, tempLine.y2 - 10);
+                }
+            }
+            // Vẽ grid lines
+            function drawGrid() {
+                if (!showGrid) return;
+                const w = canvas.width;
+                const h = canvas.height;
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                ctx.lineWidth = 1;
+                ctx.setLineDash([5, 5]);
+                // Vẽ 9 ô (3x3 grid)
+                for (let i = 1; i <= 2; i++) {
+                    // Vertical lines
+                    ctx.beginPath();
+                    ctx.moveTo(w * i / 3, 0);
+                    ctx.lineTo(w * i / 3, h);
+                    ctx.stroke();
+                    // Horizontal lines
+                    ctx.beginPath();
+                    ctx.moveTo(0, h * i / 3);
+                    ctx.lineTo(w, h * i / 3);
+                    ctx.stroke();
+                }
+                // Center cross (highlight)
+                ctx.strokeStyle = 'rgba(0, 255, 0, 0.4)';
+                ctx.lineWidth = 2;
+                // Center vertical
+                ctx.beginPath();
+                ctx.moveTo(w / 2, 0);
+                ctx.lineTo(w / 2, h);
+                ctx.stroke();
+                // Center horizontal
+                ctx.beginPath();
+                ctx.moveTo(0, h / 2);
+                ctx.lineTo(w, h / 2);
+                ctx.stroke();
+                // Reset
+                ctx.setLineDash([]);
+            }
+            // Chart setup
+            const countChart = new Chart(
+                document.getElementById('countChart'),
+                {
+                    type: 'line',
+                    data: {
+                        labels: [],
+                        datasets: [{
+                            label: 'Objects Count',
+                            data: [],
+                            borderColor: '#667eea',
+                            backgroundColor: 'rgba(102, 126, 234, 0.1)',
+                            tension: 0.1,
+                            fill: true
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                }
+            );
+            // WebSocket connection
+            function connectWebSocket() {
+                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+                ws = new WebSocket(`${protocol}//${window.location.host}/video_feed`);
+                ws.onopen = () => {
+                    console.log('WebSocket connected');
+                    statusText.innerHTML = '🟢 Active';
+                };
+                ws.onmessage = (event) => {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === 'frame') {
+                        const img = new Image();
+                        img.onload = () => {
+                            canvas.width = img.width;
+                            canvas.height = img.height;
+                            // Vẽ frame từ server
+                            ctx.drawImage(img, 0, 0);
+                            // Vẽ overlays (grid + lines) lên trên frame
+                            drawOverlays();
+                        };
+                        img.src = msg.data;
+                    } else if (msg.type === 'count_update') {
+                        updateChart(msg.count);
+                    }
+                };
+ws.onerror = (error) => {
+                    console.error('WebSocket error:', error);
+                    statusText.innerHTML = '🔴 Error';
+                };
+                ws.onclose = () => {
+                    console.log('WebSocket closed');
+                    statusText.innerHTML = '⚪ Ready';
+                };
+            }
+            // Update chart with new count
+            function updateChart(count) {
+                const now = new Date();
+                const timeLabel = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
+                countChart.data.labels.push(timeLabel);
+                countChart.data.datasets[0].data.push(count);
+                // Keep only last 20 data points
+                if (countChart.data.labels.length > 20) {
+                    countChart.data.labels.shift();
+                    countChart.data.datasets[0].data.shift();
+                }
+                countChart.update();
+            }
+            // Get available cameras
+            async function getCameras() {
+                try {
+                    const devices = await navigator.mediaDevices.enumerateDevices();
+                    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+                    const cameraSelect = document.getElementById('cameraSelect');
+                    cameraSelect.innerHTML = '<option value="">-- Select Camera --</option>';
+                    videoDevices.forEach(device => {
+                        const option = document.createElement('option');
+                        option.value = device.deviceId;
+                        option.text = device.label || `Camera ${cameraSelect.length}`;
+                        cameraSelect.appendChild(option);
+                    });
+                } catch (err) {
+                    console.error('Error enumerating devices:', err);
+                }
+            }
+            // Start camera
+            async function startCamera() {
+                const cameraSelect = document.getElementById('cameraSelect');
+                const deviceId = cameraSelect.value;
+                if (!deviceId) {
+                    alert('Please select a camera first');
+                    return;
+                }
+                try {
+                    stream = await navigator.mediaDevices.getUserMedia({
+                        video: {
+                            deviceId: { exact: deviceId },
+                            width: { ideal: 1280 },
+                            height: { ideal: 720 }
+                        }
+                    });
+video.srcObject = stream;
+                    await video.play();
+                    canvas.width = video.videoWidth;
+                    canvas.height = video.videoHeight;
+                    connectWebSocket();
+                    sendFrames();
+                    startBtn.disabled = true;
+                    stopBtn.disabled = false;
+                    drawLineBtn.disabled = false;
+                    toggleGridBtn.disabled = false;
+                    hintText.textContent = 'Nhấn "Show Grid" để hiển thị lưới, sau đó "Draw Line" để vẽ vạch đếm.';
+                } catch (err) {
+                    console.error('Camera error:', err);
+                    alert('Cannot access camera. Please check permissions.');
+                }
+            }
+            // Send frames to server
+            function sendFrames() {
+                if (!ws || ws.readyState !== WebSocket.OPEN) {
+                    animationId = requestAnimationFrame(sendFrames);
+                    return;
+                }
+                // Không gửi frame khi đang vẽ line để tránh lag
+                if (!isDrawingMode) {
+                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                    const frameData = canvas.toDataURL('image/jpeg', 0.8);
+                    ws.send(JSON.stringify({
+                        type: 'frame',
+                        data: frameData
+                    }));
+                }
+                animationId = requestAnimationFrame(sendFrames);
+            }
+            // Stop camera
+            function stopCamera() {
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                    stream = null;
+                }
+                if (ws) {
+                    ws.close();
+                    ws = null;
+                }
+                if (animationId) {
+                    cancelAnimationFrame(animationId);
+                    animationId = null;
+                }
+                startBtn.disabled = false;
+                stopBtn.disabled = true;
+                drawLineBtn.disabled = true;
+                toggleGridBtn.disabled = true;
+                statusText.innerHTML = '⚪ Ready';
+                hintText.textContent = 'Click "Start Camera" để bắt đầu.';
+                showGrid = false;
+                currentLine = null; // Clear line khi stop
+            }
+            // Toggle grid
+            function toggleGrid() {
+                showGrid = !showGrid;
+                if (showGrid) {
+                    toggleGridBtn.classList.add('grid-mode');
+                    toggleGridBtn.textContent = '📐 Hide Grid';
+                    hintText.textContent = '✅ Lưới đã bật! Dùng làm tham chiếu để vẽ line chính xác.';
+                } else {
+                    toggleGridBtn.classList.remove('grid-mode');
+                    toggleGridBtn.textContent = '📐 Show Grid';
+                    hintText.textContent = 'Nhấn "Draw Line" để vẽ vạch đếm vật thể.';
+                }
+            }
+            // Draw line mode
+            function toggleDrawLine() {
+                isDrawingMode = !isDrawingMode;
+                if (isDrawingMode) {
+                    canvas.classList.add('drawing');
+                    drawLineBtn.classList.add('draw-mode');
+                    drawLineBtn.textContent = '❌ Cancel Draw';
+                    hintText.textContent = '📍 Click 2 điểm trên video để vẽ vạch đếm. Dùng lưới làm tham chiếu.';
+                    hintText.classList.add('active');
+                    linePoints = [];
+                    tempLine = null;
+                } else {
+                    canvas.classList.remove('drawing');
+                    drawLineBtn.classList.remove('draw-mode');
+                    drawLineBtn.textContent = '✏️ Draw Line';
+                    hintText.textContent = 'Nhấn "Draw Line" để vẽ vạch đếm vật thể.';
+                    hintText.classList.remove('active');
+                    linePoints = [];
+                    tempLine = null;
+                }
+            }
+            // Canvas click để vẽ line
+            canvas.addEventListener('click', (e) => {
+                if (!isDrawingMode) return;
+                const rect = canvas.getBoundingClientRect();
+                const scaleX = canvas.width / rect.width;
+                const scaleY = canvas.height / rect.height;
+                const x = (e.clientX - rect.left) * scaleX;
+                const y = (e.clientY - rect.top) * scaleY;
+                linePoints.push({ x, y });
+                if (linePoints.length === 1) {
+                    hintText.textContent = '📍 Click điểm thứ 2 để hoàn thành vạch đếm.';
+                    tempLine = { x1: x, y1: y };
+                }
+                if (linePoints.length === 2) {
+                    // Chuyển đổi sang tỷ lệ % (0-1)
+                    const line = [
+                        linePoints[0].x / canvas.width,
+                        linePoints[0].y / canvas.height,
+                        linePoints[1].x / canvas.width,
+                        linePoints[1].y / canvas.height
+                    ];
+                    // Lưu line để hiển thị
+                    currentLine = line;
+                    // Gửi line mới đến server
+                    if (ws && ws.readyState === WebSocket.OPEN) {
+                        ws.send(JSON.stringify({
+                            type: 'set_line',
+                            line: line
+                        }));
+                    }
+                    console.log('Line created:', line);
+                    // Tắt draw mode
+                    isDrawingMode = false;
+                    canvas.classList.remove('drawing');
+                    drawLineBtn.classList.remove('draw-mode');
+                    drawLineBtn.textContent = '✏️ Draw Line';
+                    hintText.textContent = '✅ Vạch đếm đã được tạo! Vật thể sẽ được đếm khi chạm vạch.';
+                    hintText.classList.remove('active');
+                    linePoints = [];
+                    tempLine = null;
+                }
+            });
+            // Canvas mousemove để preview line
+            canvas.addEventListener('mousemove', (e) => {
+                if (!isDrawingMode || linePoints.length !== 1) return;
+                const rect = canvas.getBoundingClientRect();
+                const scaleX = canvas.width / rect.width;
+                const scaleY = canvas.height / rect.height;
+                const x = (e.clientX - rect.left) * scaleX;
+                const y = (e.clientY - rect.top) * scaleY;
+                tempLine = {
+                    x1: linePoints[0].x,
+                    y1: linePoints[0].y,
+                    x2: x,
+                    y2: y
+                };
+            });
+            // Reset count
+            async function resetCount() {
+                if (confirm('Bạn có chắc muốn reset số lượng đếm về 0?')) {
+                    try {
+                        await fetch('/count', { method: 'DELETE' });
+                        updateStats();
+                        alert('✅ Đã reset count về 0!');
+                    } catch (error) {
+                        console.error('Error resetting count:', error);
+                    }
+                }
+            }
+            // Update stats
+            async function updateStats() {
+                try {
+                    const response = await fetch('/count');
+                    const data = await response.json();
+                    document.getElementById('totalCount').textContent = data.total;
+                    document.getElementById('fpsValue').textContent = data.fps;
+                    updateChart(data.total);
+                } catch (error) {
+                    console.error('Error fetching stats:', error);
+                }
+            }
+            // Event listeners
+            startBtn.addEventListener('click', startCamera);
+            stopBtn.addEventListener('click', stopCamera);
+            drawLineBtn.addEventListener('click', toggleDrawLine);
+            toggleGridBtn.addEventListener('click', toggleGrid);
+            resetCountBtn.addEventListener('click', resetCount);
+            // Initialize
+            getCameras();
+            // Update stats every second
+            setInterval(updateStats, 1000);
+</script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+    </html>

style.css CHANGED Viewed

@@ -1,28 +1,180 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+.container {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    overflow: hidden;
+    max-width: 1200px;
+    width: 100%;
+}
+.header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 24px;
+    text-align: center;
 }
 h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+.status {
+    font-size: 14px;
+    opacity: 0.9;
+}
+.content {
+    padding: 24px;
+}
+.video-container {
+    position: relative;
+    background: #000;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 24px;
+}
+#outputCanvas {
+    width: 100%;
+    height: auto;
+    display: block;
+    cursor: crosshair;
+}
+#outputCanvas.drawing {
+    cursor: crosshair;
+}
+#videoInput {
+    display: none;
+}
+.controls {
+    text-align: center;
+    margin-bottom: 24px;
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+.camera-select {
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    font-size: 16px;
+    min-width: 200px;
 }
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s;
 }
+button:hover {
+    transform: translateY(-2px);
 }
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
+button.draw-mode {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+button.grid-mode {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+.hint {
+    text-align: center;
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 16px;
+    padding: 8px;
+    background: #f0f0f0;
+    border-radius: 8px;
+}
+.hint.active {
+    background: #fff3cd;
+    color: #856404;
+}
+.stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+}
+.stat-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 12px;
+    text-align: center;
+}
+.stat-label {
+    font-size: 14px;
+    opacity: 0.9;
+    margin-bottom: 8px;
+}
+.stat-value {
+    font-size: 32px;
+    font-weight: 700;
+}
+.chart-container {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    margin-top: 24px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.footer {
+    text-align: center;
+    padding: 16px;
+    color: #666;
+    font-size: 14px;
+}
+@media (max-width: 768px) {
+    h1 { font-size: 24px; }
+    .stat-value { font-size: 28px; }
+    .controls {
+        flex-direction: column;
+        align-items: center;
+    }
+}