init

.gitattributes

@@ -0,0 +1,2 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,9 @@
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.env
+.DS_Store

Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,36 @@
+---
+title: 剑来-手势交互 (Sword Coming)
+emoji: 🗡️
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+short_description: 移动端手势识别：剑指召唤，五指开天 (Gesture Controlled Sword Effect)
+---
+
+# 剑来 (Sword Coming) - 手势识别系统
+
+## 项目介绍
+本项目复刻了国漫《剑来》中“剑来”的经典场景，并升级了视觉特效。通过计算机视觉（MediaPipe）识别用户手势，实现“召唤飞剑”及“一剑开天”的震撼视觉效果。
+支持移动端和PC端，推荐使用移动端体验更佳。
+
+## 功能特点
+- **仙气飞剑**: 全白光效，流光溢彩，粒子拖尾。
+- **双重手势**:
+    - **剑指（两指）**: 召唤飞剑，御剑跟随。
+    - **五指（开天）**: 触发“一剑开天”必杀技，全屏光刃特效。
+- **震撼特效**: 屏幕震动、粒子爆发、巨大光束。
+- **移动端适配**: 响应式设计，全屏沉浸体验。
+- **纯前端推理**: 基于 MediaPipe JS，低延迟，保护隐私。
+
+## 使用说明
+1. 允许浏览器访问摄像头。
+2. **御剑术（跟随）**: 举起手，做出“剑指”（食指中指伸直，其余弯曲），飞剑将飞来并跟随指尖。
+3. **必杀技（开天）**: 突然五指张开（手掌伸直），触发“一剑开天”特效，斩破屏幕！
+4. 喊出（心里默念）“剑来”！
+
+## 技术栈
+- Python Flask
+- Vue.js 3
+- Tailwind CSS
+- Google MediaPipe Hands

app.py

@@ -0,0 +1,15 @@
+import os
+from flask import Flask, render_template, send_from_directory
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+Flask==3.0.0
+gunicorn==21.2.0

static/js/main.js

@@ -0,0 +1,506 @@
+const { createApp, ref, onMounted } = Vue;
+
+createApp({
+    setup() {
+        const videoElement = ref(null);
+        const canvasElement = ref(null);
+        const loading = ref(true);
+        const loadingProgress = ref(0);
+        const cameraActive = ref(false);
+        const debug = ref(false);
+        const fps = ref(0);
+
+        let canvasCtx = null;
+        let hands = null;
+        let camera = null;
+        
+        // Game Objects
+        let sword = null;
+        let particles = [];
+        let stars = [];
+        let riftEffect = null; // The "Sky Split" effect
+        let shockwave = 0;
+        
+        // Interaction State
+        let gestureTimer = 0;
+        let lastGesture = 'NONE';
+        let chargeLevel = 0; // 0.0 to 1.0
+        
+        // Audio
+        let audioCtx = null;
+        let oscillators = {};
+
+        // --- Audio Controller ---
+        const initAudio = () => {
+            if (!audioCtx) {
+                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            }
+            if (audioCtx.state === 'suspended') {
+                audioCtx.resume();
+            }
+        };
+
+        const playSound = (type) => {
+            if (!audioCtx) return;
+            
+            const t = audioCtx.currentTime;
+            
+            if (type === 'CHARGE') {
+                // Rising pitch hum
+                const osc = audioCtx.createOscillator();
+                const gain = audioCtx.createGain();
+                osc.type = 'sawtooth';
+                osc.frequency.setValueAtTime(100, t);
+                osc.frequency.exponentialRampToValueAtTime(400, t + 0.5);
+                gain.gain.setValueAtTime(0.1, t);
+                gain.gain.exponentialRampToValueAtTime(0.01, t + 0.5);
+                
+                osc.connect(gain);
+                gain.connect(audioCtx.destination);
+                osc.start();
+                osc.stop(t + 0.5);
+            } else if (type === 'SLASH') {
+                // Sharp noise/crack
+                const osc = audioCtx.createOscillator();
+                const gain = audioCtx.createGain();
+                osc.type = 'square';
+                osc.frequency.setValueAtTime(800, t);
+                osc.frequency.exponentialRampToValueAtTime(100, t + 0.3);
+                
+                gain.gain.setValueAtTime(0.3, t);
+                gain.gain.exponentialRampToValueAtTime(0.01, t + 0.3);
+                
+                osc.connect(gain);
+                gain.connect(audioCtx.destination);
+                osc.start();
+                osc.stop(t + 0.3);
+            }
+        };
+
+        // --- Helpers ---
+        const dist = (p1, p2) => Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+        const randomRange = (min, max) => Math.random() * (max - min) + min;
+
+        // --- Classes ---
+
+        class Particle {
+            constructor(x, y, type = 'TRAIL') {
+                this.x = x;
+                this.y = y;
+                this.type = type;
+                this.life = 1.0;
+                
+                if (type === 'TRAIL') {
+                    this.vx = (Math.random() - 0.5) * 2;
+                    this.vy = (Math.random() - 0.5) * 2;
+                    this.size = Math.random() * 3 + 1;
+                    this.decay = 0.05;
+                    this.color = [200, 255, 255]; // Cyan-ish
+                } else if (type === 'SPIRIT') {
+                    // Orbiting/Gathering particles
+                    this.angle = Math.random() * Math.PI * 2;
+                    this.radius = Math.random() * 40 + 20;
+                    this.speed = Math.random() * 0.1 + 0.05;
+                    this.size = Math.random() * 2 + 1;
+                    this.decay = 0.0; // Managed by sword
+                    this.color = [255, 255, 200]; // Golden/White
+                } else if (type === 'SPARK') {
+                    const angle = Math.random() * Math.PI * 2;
+                    const speed = Math.random() * 20 + 5;
+                    this.vx = Math.cos(angle) * speed;
+                    this.vy = Math.sin(angle) * speed;
+                    this.size = Math.random() * 4 + 1;
+                    this.decay = 0.02;
+                    this.color = [255, 200, 100]; // Gold sparks
+                }
+            }
+
+            update(targetX, targetY) {
+                if (this.type === 'SPIRIT') {
+                    // Orbit logic
+                    this.angle += this.speed + (chargeLevel * 0.2); // Spin faster when charging
+                    let currentRadius = this.radius;
+                    
+                    if (chargeLevel > 0) {
+                        currentRadius = this.radius * (1.0 - chargeLevel * 0.8); // Pull in
+                    }
+                    
+                    this.x = targetX + Math.cos(this.angle) * currentRadius;
+                    this.y = targetY + Math.sin(this.angle) * currentRadius;
+                    
+                    // Trail
+                    if (Math.random() < 0.3) {
+                        particles.push(new Particle(this.x, this.y, 'TRAIL'));
+                    }
+                } else {
+                    this.x += this.vx;
+                    this.y += this.vy;
+                    this.life -= this.decay;
+                }
+            }
+
+            draw(ctx) {
+                ctx.save();
+                ctx.globalAlpha = this.life;
+                ctx.fillStyle = `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, ${this.life})`;
+                ctx.shadowBlur = 10 * this.life;
+                ctx.shadowColor = `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, 1)`;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+        }
+
+        class Sword {
+            constructor() {
+                this.x = window.innerWidth / 2;
+                this.y = window.innerHeight + 200;
+                this.angle = -Math.PI / 2;
+                this.scale = 1.5; // Smaller, more refined
+                this.state = 'IDLE'; // IDLE, FOLLOW, CHARGING, SLASHING
+                
+                // Spirit Particles
+                this.spirits = [];
+                for(let i=0; i<8; i++) {
+                    this.spirits.push(new Particle(this.x, this.y, 'SPIRIT'));
+                }
+            }
+
+            update(targetX, targetY) {
+                // Smooth Movement
+                const dx = targetX - this.x;
+                const dy = targetY - this.y;
+                const d = Math.sqrt(dx * dx + dy * dy);
+                
+                // Rotation
+                if (d > 20) {
+                   const targetAngle = Math.atan2(dy, dx) + Math.PI / 2;
+                   let da = targetAngle - this.angle;
+                   while (da > Math.PI) da -= Math.PI * 2;
+                   while (da < -Math.PI) da += Math.PI * 2;
+                   this.angle += da * 0.15; 
+                }
+
+                // Position
+                const ease = 0.15;
+                this.x += dx * ease;
+                this.y += dy * ease;
+
+                // Vibration when charging
+                if (this.state === 'CHARGING') {
+                    this.x += (Math.random() - 0.5) * 5 * chargeLevel;
+                    this.y += (Math.random() - 0.5) * 5 * chargeLevel;
+                }
+
+                // Update Spirits
+                this.spirits.forEach(s => s.update(this.x, this.y));
+            }
+
+            draw(ctx) {
+                ctx.save();
+                ctx.translate(this.x, this.y);
+                ctx.rotate(this.angle);
+                ctx.scale(this.scale, this.scale);
+
+                // --- 灵气特效 (Aura) ---
+                const time = Date.now() / 200;
+                const pulse = Math.sin(time) * 0.2 + 1.0 + (chargeLevel * 0.5); // Pulse gets stronger
+                
+                // Outer Glow
+                ctx.shadowBlur = 30 * pulse;
+                ctx.shadowColor = chargeLevel > 0.5 ? "rgba(255, 200, 100, 0.9)" : "rgba(200, 240, 255, 0.8)";
+                
+                // Blade
+                let grad = ctx.createLinearGradient(0, -100, 0, 0);
+                grad.addColorStop(0, "#FFF");
+                grad.addColorStop(0.5, chargeLevel > 0.5 ? "#FFFFA0" : "#E0F0FF");
+                grad.addColorStop(1, "#FFF");
+                
+                ctx.fillStyle = grad;
+                
+                // Refined Blade Shape
+                ctx.beginPath();
+                ctx.moveTo(0, -100);
+                ctx.lineTo(5, -80);
+                ctx.lineTo(4, 0);
+                ctx.lineTo(-4, 0);
+                ctx.lineTo(-5, -80);
+                ctx.closePath();
+                ctx.fill();
+                
+                // Center Line
+                ctx.beginPath();
+                ctx.moveTo(0, -95);
+                ctx.lineTo(0, 0);
+                ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
+                ctx.lineWidth = 1;
+                ctx.stroke();
+
+                // Guard (Golden accents)
+                ctx.fillStyle = chargeLevel > 0.5 ? "#FFD700" : "#C0C0C0";
+                ctx.shadowBlur = 10;
+                ctx.beginPath();
+                ctx.moveTo(-12, 0);
+                ctx.quadraticCurveTo(0, -5, 12, 0);
+                ctx.lineTo(10, 4);
+                ctx.lineTo(-10, 4);
+                ctx.fill();
+
+                // Handle
+                ctx.fillStyle = "#333";
+                ctx.fillRect(-2, 4, 4, 20);
+
+                // Pommel
+                ctx.fillStyle = chargeLevel > 0.5 ? "#FFD700" : "#C0C0C0";
+                ctx.beginPath();
+                ctx.arc(0, 26, 4, 0, Math.PI*2);
+                ctx.fill();
+
+                ctx.restore();
+                
+                // Draw Spirits (World Space)
+                this.spirits.forEach(s => s.draw(ctx));
+            }
+        }
+
+        class RiftEffect {
+            constructor() {
+                this.life = 1.0;
+                this.points = [];
+                // Generate jagged line through center
+                const segments = 20;
+                const startY = -100;
+                const endY = window.innerHeight + 100;
+                const stepY = (endY - startY) / segments;
+                
+                for(let i=0; i<=segments; i++) {
+                    this.points.push({
+                        x: window.innerWidth / 2 + (Math.random() - 0.5) * 100, // Jaggedness
+                        y: startY + i * stepY
+                    });
+                }
+            }
+
+            update() {
+                this.life -= 0.02;
+            }
+
+            draw(ctx) {
+                if (this.life <= 0) return;
+                
+                ctx.save();
+                
+                const width = Math.sin(this.life * Math.PI) * 150; // Open and close
+                const alpha = Math.min(1, this.life * 2);
+                
+                // 1. Darken Background (World darkening)
+                ctx.fillStyle = `rgba(0, 0, 0, ${alpha * 0.8})`;
+                ctx.fillRect(0, 0, canvasElement.value.width, canvasElement.value.height);
+
+                // 2. The Rift (Opening)
+                ctx.beginPath();
+                // Left side
+                this.points.forEach((p, i) => {
+                    const offset = (Math.sin(i * 0.5) + 1) * width * 0.5;
+                    if (i===0) ctx.moveTo(p.x - offset, p.y);
+                    else ctx.lineTo(p.x - offset, p.y);
+                });
+                // Right side (reverse)
+                for(let i=this.points.length-1; i>=0; i--) {
+                    const p = this.points[i];
+                    const offset = (Math.sin(i * 0.5) + 1) * width * 0.5;
+                    ctx.lineTo(p.x + offset, p.y);
+                }
+                ctx.closePath();
+                
+                // Void/Space inside Rift
+                ctx.fillStyle = "#FFF";
+                ctx.shadowBlur = 50;
+                ctx.shadowColor = "#FFF";
+                ctx.fill();
+                
+                // 3. Blinding Light Rays
+                if (this.life > 0.5) {
+                    ctx.globalCompositeOperation = 'lighter';
+                    const rayWidth = window.innerWidth * (this.life - 0.5);
+                    let grad = ctx.createLinearGradient(window.innerWidth/2 - rayWidth, 0, window.innerWidth/2 + rayWidth, 0);
+                    grad.addColorStop(0, "rgba(255, 255, 255, 0)");
+                    grad.addColorStop(0.5, `rgba(255, 255, 255, ${this.life})`);
+                    grad.addColorStop(1, "rgba(255, 255, 255, 0)");
+                    ctx.fillStyle = grad;
+                    ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
+                    ctx.globalCompositeOperation = 'source-over';
+                }
+
+                ctx.restore();
+            }
+        }
+
+        // --- Logic ---
+
+        const onResults = (results) => {
+            loading.value = false;
+            if (!canvasElement.value) return;
+
+            canvasElement.value.width = window.innerWidth;
+            canvasElement.value.height = window.innerHeight;
+
+            // Screen Shake
+            let shakeX = 0;
+            let shakeY = 0;
+            if (shockwave > 0) {
+                shakeX = (Math.random() - 0.5) * shockwave * 40;
+                shakeY = (Math.random() - 0.5) * shockwave * 40;
+                shockwave -= 0.04;
+            }
+
+            canvasCtx.save();
+            canvasCtx.translate(shakeX, shakeY);
+            canvasCtx.clearRect(-shakeX, -shakeY, canvasElement.value.width, canvasElement.value.height);
+
+            // Draw Background
+            canvasCtx.fillStyle = '#050510'; 
+            canvasCtx.fillRect(0, 0, canvasElement.value.width, canvasElement.value.height);
+            
+            // Draw Stars
+            canvasCtx.fillStyle = '#FFFFFF';
+            stars.forEach(star => {
+                canvasCtx.globalAlpha = Math.max(0.1, star.opacity + Math.sin(Date.now() / 300 + star.x) * 0.2);
+                canvasCtx.beginPath();
+                canvasCtx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+                canvasCtx.fill();
+            });
+            canvasCtx.globalAlpha = 1.0;
+
+            // Hand & Gesture Logic
+            let targetX = sword ? sword.x : window.innerWidth / 2;
+            let targetY = sword ? sword.y : window.innerHeight + 300;
+            let detectedGesture = 'NONE';
+
+            if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+                const lm = results.multiHandLandmarks[0];
+                const isFingerExtended = (tipIdx, pipIdx) => lm[tipIdx].y < lm[pipIdx].y;
+                
+                const indexExt = isFingerExtended(8, 6);
+                const middleExt = isFingerExtended(12, 10);
+                const ringExt = isFingerExtended(16, 14);
+                const pinkyExt = isFingerExtended(20, 18);
+
+                // 1. Sword Finger (Index+Middle) -> Summon/Follow
+                if (indexExt && middleExt && !ringExt && !pinkyExt) {
+                    detectedGesture = 'SWORD_FINGER';
+                } 
+                // 2. Open Palm -> Charge/Split
+                else if (indexExt && middleExt && ringExt && pinkyExt) {
+                    detectedGesture = 'OPEN_PALM';
+                }
+
+                targetX = lm[8].x * canvasElement.value.width;
+                targetY = lm[8].y * canvasElement.value.height;
+                
+                // Initialize Audio on first interaction
+                initAudio();
+            }
+
+            // Debounce
+            if (detectedGesture === lastGesture) {
+                gestureTimer++;
+            } else {
+                gestureTimer = 0;
+                lastGesture = detectedGesture;
+            }
+
+            // Init Sword
+            if (!sword) {
+                sword = new Sword();
+                for(let i=0; i<80; i++) {
+                    stars.push({
+                        x: Math.random() * window.innerWidth,
+                        y: Math.random() * window.innerHeight,
+                        size: Math.random() * 2,
+                        opacity: Math.random() * 0.5
+                    });
+                }
+            }
+
+            // State Machine
+            const STABLE = 5;
+
+            if (gestureTimer > STABLE) {
+                if (detectedGesture === 'SWORD_FINGER') {
+                    // Charging State
+                    sword.state = 'CHARGING';
+                    if (chargeLevel < 1.0) {
+                        chargeLevel += 0.02;
+                        if (Math.random() < 0.2) playSound('CHARGE');
+                    }
+                } else if (detectedGesture === 'OPEN_PALM') {
+                    // If Charged, Trigger SPLIT
+                    if (chargeLevel > 0.8) {
+                        if (!riftEffect) {
+                            riftEffect = new RiftEffect();
+                            shockwave = 1.0;
+                            playSound('SLASH');
+                            // Sparks
+                            for(let i=0; i<100; i++) {
+                                particles.push(new Particle(targetX, targetY, 'SPARK'));
+                            }
+                            chargeLevel = 0; // Reset
+                        }
+                    } else {
+                        // Just Follow
+                        sword.state = 'FOLLOW';
+                        chargeLevel = Math.max(0, chargeLevel - 0.05);
+                    }
+                } else {
+                    sword.state = 'IDLE';
+                    chargeLevel = Math.max(0, chargeLevel - 0.05);
+                }
+            }
+
+            // Update Sword
+            sword.update(targetX, targetY);
+
+            // Draw Rift (Behind Sword or Front? Front is better for "Split Sky")
+            if (riftEffect) {
+                riftEffect.update();
+                riftEffect.draw(canvasCtx);
+                if (riftEffect.life <= 0) riftEffect = null;
+            }
+
+            // Particles
+            particles.forEach((p, i) => {
+                p.update(sword.x, sword.y);
+                p.draw(canvasCtx);
+                if (p.life <= 0 && p.type !== 'SPIRIT') particles.splice(i, 1);
+            });
+
+            // Draw Sword
+            sword.draw(canvasCtx);
+
+            canvasCtx.restore();
+        };
+
+        const initCamera = async () => {
+            if (!videoElement.value || !canvasElement.value) return;
+            canvasCtx = canvasElement.value.getContext('2d');
+            hands = new Hands({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`});
+            hands.setOptions({ maxNumHands: 1, modelComplexity: 1, minDetectionConfidence: 0.6, minTrackingConfidence: 0.6 });
+            hands.onResults(onResults);
+            
+            camera = new Camera(videoElement.value, {
+                onFrame: async () => await hands.send({image: videoElement.value}),
+                width: 1280, height: 720
+            });
+            await camera.start();
+            cameraActive.value = true;
+        };
+
+        onMounted(() => {
+            initCamera();
+        });
+
+        return { videoElement, canvasElement, loading, loadingProgress, cameraActive, debug, fps };
+    }
+}).mount('#app');

templates/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>剑来 - Sword Coming</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
+    <style>
+        body { margin: 0; overflow: hidden; background-color: #000; }
+        canvas { display: block; width: 100vw; height: 100vh; transform: scaleX(-1); } /* Mirror effect */
+        .ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; transform: none;}
+        .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; }
+        
+        /* Custom Font Effect */
+        .title-text {
+            font-family: 'Courier New', Courier, monospace; /* Fallback */
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+        }
+        
+        /* Fade transition */
+        .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
+        .fade-enter-from, .fade-leave-to { opacity: 0; }
+    </style>
+</head>
+<body>
+    <div id="app" class="relative w-full h-full">
+        <!-- Video Input (Hidden) -->
+        <video ref="videoElement" class="hidden" playsinline></video>
+        
+        <!-- Main Canvas -->
+        <canvas ref="canvasElement"></canvas>
+        
+        <!-- UI Layer -->
+        <div class="ui-layer flex flex-col justify-between p-4">
+            <div class="text-center mt-4">
+                <h1 class="text-3xl md:text-5xl font-bold text-white tracking-widest title-text opacity-80">剑 来 · 开 天</h1>
+                <p class="text-gray-300 text-xs md:text-sm mt-2 opacity-60">剑指聚气，挥掌开天</p>
+            </div>
+            
+            <div class="mb-8 text-center">
+                <div v-if="loading" class="text-white animate-pulse">
+                    正在以此方天地（模型）... {{ loadingProgress }}%
+                </div>
+                <div v-else-if="!cameraActive" class="text-red-400">
+                    请允许访问摄像头以召唤飞剑
+                </div>
+                <!-- <div v-else class="text-green-400 text-xs opacity-50">
+                    灵气已复苏 (System Ready)
+                </div> -->
+            </div>
+        </div>
+
+        <!-- Debug/Stats (Optional) -->
+        <div v-if="debug" class="absolute bottom-2 right-2 text-xs text-gray-500 transform scale-x-[-1]">
+            FPS: {{ fps }}
+        </div>
+    </div>
+
+    <script src="/static/js/main.js"></script>
+</body>
+</html>