like7

Running

App Files Files Community

ginipick commited on Mar 7, 2025

Commit

dea75bb

verified ·

1 Parent(s): 1b8df6c

Update index.html

Browse files

Files changed (1) hide show

index.html +63 -482

index.html CHANGED Viewed

@@ -1,487 +1,68 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Facial Emotion Analysis System</title>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-detection"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
-        :root {
-            --primary: #3498db;
-            --success: #2ecc71;
-            --warning: #f1c40f;
-            --danger: #e74c3c;
-            --dark: #2c3e50;
-            --light: #ecf0f1;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', system-ui, sans-serif;
-        }
-        body {
-            background: var(--dark);
-            color: var(--light);
-            line-height: 1.6;
-        }
-        .dashboard {
-            display: grid;
-            grid-template-columns: 70% 30%;
-            gap: 20px;
-            padding: 20px;
-            max-width: 1600px;
-            margin: 0 auto;
-        }
-        .main-panel {
-            background: rgba(255,255,255,0.1);
-            border-radius: 15px;
-            padding: 20px;
-        }
-        .controls-panel {
-            background: rgba(255,255,255,0.1);
-            border-radius: 15px;
-            padding: 20px;
-        }
-        .video-container {
-            position: relative;
-            width: 100%;
-            border-radius: 10px;
-            overflow: hidden;
-            background: #000;
-        }
-        #video, #canvas {
-            width: 100%;
-            transform: scaleX(-1);
-        }
-        #canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-        .settings-group {
-            margin: 15px 0;
-            padding: 15px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 8px;
-        }
-        .settings-group h3 {
-            color: var(--primary);
-            margin-bottom: 10px;
-        }
-        .control-button {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            background: var(--primary);
-            color: white;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            margin: 5px;
-            width: 100%;
-        }
-        .control-button:hover {
-            opacity: 0.9;
-            transform: translateY(-2px);
-        }
-        .emotion-indicator {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
-            margin-top: 10px;
-        }
-        .emotion-item {
-            padding: 10px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 5px;
-            text-align: center;
-            transition: all 0.3s ease;
-        }
-        .emotion-item.active {
-            background: var(--success);
-            transform: scale(1.05);
-        }
-        .stats-container {
-            margin-top: 20px;
-        }
-        .meter {
-            height: 20px;
-            background: rgba(255,255,255,0.1);
-            border-radius: 10px;
-            overflow: hidden;
-            margin: 10px 0;
-        }
-        .meter-fill {
-            height: 100%;
-            background: var(--primary);
-            transition: width 0.3s ease;
-        }
-        .privacy-toggle {
-            margin: 10px 0;
-        }
-        #emotionChart {
-            margin-top: 20px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 8px;
-            padding: 10px;
-        }
-        .fps-counter {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0,0,0,0.7);
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 14px;
-        }
-        .detection-settings {
-            display: grid;
-            gap: 10px;
-            margin: 10px 0;
-        }
-        .slider-control {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-        }
-        input[type="range"] {
-            width: 100%;
-            background: var(--primary);
-        }
-        .face-count {
-            font-size: 1.2em;
-            text-align: center;
-            margin: 10px 0;
-            color: var(--success);
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .detecting {
-            animation: pulse 2s infinite;
-        }
-    </style>
 </head>
 <body>
-    <div class="dashboard">
-        <div class="main-panel">
-            <div class="video-container">
-                <video id="video" playsinline></video>
-                <canvas id="canvas"></canvas>
-                <div class="fps-counter">FPS: <span id="fpsCounter">0</span></div>
-            </div>
-            <canvas id="emotionChart"></canvas>
-        </div>
-        <div class="controls-panel">
-            <div class="settings-group">
-                <h3>Detection Controls</h3>
-                <button id="toggleDetection" class="control-button">Start Detection</button>
-                <button id="togglePrivacy" class="control-button">Toggle Face Blur</button>
-                <div class="detection-settings">
-                    <div class="slider-control">
-                        <label>Detection Sensitivity</label>
-                        <input type="range" id="sensitivity" min="0" max="100" value="50">
-                    </div>
-                    <div class="slider-control">
-                        <label>Minimum Face Size</label>
-                        <input type="range" id="minFaceSize" min="20" max="200" value="50">
-                    </div>
-                </div>
-            </div>
-            <div class="settings-group">
-                <h3>Current Analysis</h3>
-                <div class="face-count">Detected Faces: <span id="faceCount">0</span></div>
-                <div class="emotion-indicator">
-                    <div class="emotion-item" data-emotion="happy">😊 Happy</div>
-                    <div class="emotion-item" data-emotion="sad">😢 Sad</div>
-                    <div class="emotion-item" data-emotion="angry">😠 Angry</div>
-                    <div class="emotion-item" data-emotion="neutral">😐 Neutral</div>
-                    <div class="emotion-item" data-emotion="surprised">😲 Surprised</div>
-                    <div class="emotion-item" data-emotion="fearful">😨 Fearful</div>
-                </div>
-            </div>
-            <div class="settings-group">
-                <h3>Confidence Level</h3>
-                <div class="meter">
-                    <div id="confidenceMeter" class="meter-fill" style="width: 0%"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        let model;
-        let isDetecting = false;
-        let blurFaces = false;
-        let lastFrameTime = 0;
-        let smoothedEmotions = {};
-        const emotions = ['happy', 'sad', 'angry', 'neutral', 'surprised', 'fearful'];
-        emotions.forEach(emotion => {
-            smoothedEmotions[emotion] = 0;
-        });
-        async function initializeSystem() {
-            try {
-                // Initialize face detection model
-                model = await faceDetection.createDetector(
-                    faceDetection.SupportedModels.MediaPipeFaceDetector,
-                    {
-                        runtime: 'tfjs',
-                        refineLandmarks: true,
-                        maxFaces: 10
-                    }
-                );
-                // Setup video
-                const video = document.getElementById('video');
-                const stream = await navigator.mediaDevices.getUserMedia({
-                    video: {
-                        width: 640,
-                        height: 480,
-                        facingMode: 'user'
-                    }
-                });
-                video.srcObject = stream;
-                await video.play();
-                // Setup canvas
-                const canvas = document.getElementById('canvas');
-                canvas.width = video.videoWidth;
-                canvas.height = video.videoHeight;
-                // Initialize emotion chart
-                initializeEmotionChart();
-                // Add event listeners
-                setupEventListeners();
-            } catch (error) {
-                console.error('Initialization error:', error);
-                alert('Failed to initialize face detection system');
-            }
-        }
-        function setupEventListeners() {
-            document.getElementById('toggleDetection').addEventListener('click', toggleDetection);
-            document.getElementById('togglePrivacy').addEventListener('click', () => blurFaces = !blurFaces);
-            document.getElementById('sensitivity').addEventListener('input', updateDetectionSettings);
-            document.getElementById('minFaceSize').addEventListener('input', updateDetectionSettings);
-        }
-        async function detectFaces() {
-            if (!isDetecting) return;
-            const video = document.getElementById('video');
-            const canvas = document.getElementById('canvas');
-            const ctx = canvas.getContext('2d');
-            // Calculate FPS
-            const now = performance.now();
-            const fps = 1000 / (now - lastFrameTime);
-            lastFrameTime = now;
-            document.getElementById('fpsCounter').textContent = Math.round(fps);
-            try {
-                const faces = await model.estimateFaces(video, {
-                    flipHorizontal: false
-                });
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                faces.forEach((face, index) => {
-                    drawFaceBox(ctx, face);
-                    if (blurFaces) {
-                        blurFaceRegion(ctx, face);
-                    }
-                    analyzeEmotion(face);
-                });
-                document.getElementById('faceCount').textContent = faces.length;
-                updateConfidenceMeter(faces);
-                updateEmotionChart();
-            } catch (error) {
-                console.error('Detection error:', error);
-            }
-            requestAnimationFrame(detectFaces);
-        }
-        function drawFaceBox(ctx, face) {
-            const box = face.box;
-            ctx.strokeStyle = '#3498db';
-            ctx.lineWidth = 2;
-            ctx.strokeRect(box.xMin, box.yMin, box.width, box.height);
-            // Draw landmarks
-            if (face.keypoints) {
-                ctx.fillStyle = '#2ecc71';
-                face.keypoints.forEach(keypoint => {
-                    ctx.beginPath();
-                    ctx.arc(keypoint.x, keypoint.y, 2, 0, 2 * Math.PI);
-                    ctx.fill();
-                });
-            }
-        }
-        function blurFaceRegion(ctx, face) {
-            const box = face.box;
-            ctx.filter = 'blur(10px)';
-            ctx.fillStyle = 'rgba(0,0,0,0.5)';
-            ctx.fillRect(box.xMin, box.yMin, box.width, box.height);
-            ctx.filter = 'none';
-        }
-        function analyzeEmotion(face) {
-            // Simplified emotion analysis based on facial landmarks
-            const keypoints = face.keypoints;
-            if (!keypoints) return;
-            // Calculate emotion probabilities (simplified)
-            const emotions = {
-                happy: Math.random(),
-                sad: Math.random(),
-                angry: Math.random(),
-                neutral: Math.random(),
-                surprised: Math.random(),
-                fearful: Math.random()
-            };
-            // Apply smoothing
-            Object.keys(emotions).forEach(emotion => {
-                smoothedEmotions[emotion] = smoothedEmotions[emotion] * 0.8 + emotions[emotion] * 0.2;
-            });
-            // Update UI
-            updateEmotionIndicators(smoothedEmotions);
-        }
-        function updateEmotionIndicators(emotions) {
-            const maxEmotion = Object.entries(emotions).reduce((a, b) => a[1] > b[1] ? a : b)[0];
-            document.querySelectorAll('.emotion-item').forEach(item => {
-                item.classList.remove('active');
-                if (item.dataset.emotion === maxEmotion) {
-                    item.classList.add('active');
-                }
-            });
-        }
-        function updateConfidenceMeter(faces) {
-            if (faces.length === 0) return;
-            const avgConfidence = faces.reduce((sum, face) => sum + face.box.score, 0) / faces.length;
-            document.getElementById('confidenceMeter').style.width = `${avgConfidence * 100}%`;
-        }
-        function toggleDetection() {
-            isDetecting = !isDetecting;
-            const button = document.getElementById('toggleDetection');
-            button.textContent = isDetecting ? 'Stop Detection' : 'Start Detection';
-            button.style.background = isDetecting ? '#e74c3c' : '#3498db';
-            if (isDetecting) {
-                detectFaces();
-            }
-        }
-        function updateDetectionSettings() {
-            // Implementation for detection sensitivity and minimum face size
-            const sensitivity = document.getElementById('sensitivity').value;
-            const minFaceSize = document.getElementById('minFaceSize').value;
-            // Update model parameters here
-        }
-        let emotionChart;
-        function initializeEmotionChart() {
-            const ctx = document.getElementById('emotionChart').getContext('2d');
-            emotionChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: [],
-                    datasets: emotions.map(emotion => ({
-                        label: emotion,
-                        data: [],
-                        borderColor: getEmotionColor(emotion),
-                        fill: false
-                    }))
-                },
-                options: {
-                    responsive: true,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            max: 1
-                        }
-                    }
-                }
-            });
-        }
-        function updateEmotionChart() {
-            const timestamp = new Date().toLocaleTimeString();
-            emotionChart.data.labels.push(timestamp);
-            emotions.forEach((emotion, index) => {
-                emotionChart.data.datasets[index].data.push(smoothedEmotions[emotion]);
-            });
-            if (emotionChart.data.labels.length > 30) {
-                emotionChart.data.labels.shift();
-                emotionChart.data.datasets.forEach(dataset => dataset.data.shift());
-            }
-            emotionChart.update();
-        }
-        function getEmotionColor(emotion) {
-            const colors = {
-                happy: '#2ecc71',
-                sad: '#3498db',
-                angry: '#e74c3c',
-                neutral: '#95a5a6',
-                surprised: '#f1c40f',
-                fearful: '#9b59b6'
-            };
-            return colors[emotion] || '#000000';
-        }
-        // Initialize the system when page loads
-        window.onload = initializeSystem;
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="ko">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HuggingFace Spaces Links</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f5f5f5;
+      padding: 20px;
+    }
+    h1 {
+      color: #333;
+    }
+    ul {
+      list-style-type: none;
+      padding: 0;
+    }
+    li {
+      margin-bottom: 10px;
+    }
+    a {
+      text-decoration: none;
+      color: #0066cc;
+      font-size: 1.1em;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+  </style>
 </head>
 <body>
+  <h1>HuggingFace Spaces Links</h1>
+  <ul>
+    <li>
+      <a href="https://huggingface.co/spaces/ginipick/3D-GAME" target="_blank" rel="noopener noreferrer">
+        3D-GAME
+      </a>
+    </li>
+    <li>
+      <a href="https://huggingface.co/spaces/ginipick/Flipper-Code-Generator" target="_blank" rel="noopener noreferrer">
+        Flipper Code Generator
+      </a>
+    </li>
+    <li>
+      <a href="https://huggingface.co/spaces/ginipick/Baby-Name-Generator" target="_blank" rel="noopener noreferrer">
+        Baby Name Generator
+      </a>
+    </li>
+    <li>
+      <a href="https://huggingface.co/spaces/ginipick/secreen-capture-OCR" target="_blank" rel="noopener noreferrer">
+        Screen Capture OCR
+      </a>
+    </li>
+    <li>
+      <a href="https://huggingface.co/spaces/ginipick/face-pose-detect" target="_blank" rel="noopener noreferrer">
+        Face Pose Detect
+      </a>
+    </li>
+    <li>
+      <a href="https://huggingface.co/spaces/ginigen/Graph-Mind" target="_blank" rel="noopener noreferrer">
+        Graph Mind
+      </a>
+    </li>
+  </ul>
 </body>
+</html>