'commit'

2026-01-24 07:41:29 +08:00
parent af46512212
commit 271b909f93
28 changed files with 1186 additions and 0 deletions
--- a/static/Test/GetCircle.html
+++ b/static/Test/GetCircle.html
@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>人脸标注工具</title>
+    <style>
+        body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; height: 100vh; margin: 0; overflow: hidden; background-color: #2c3e50; color: #ecf0f1; }
+        
+        #sidebar { 
+            width: 250px; 
+            background: #34495e; 
+            border-right: 1px solid #2c3e50; 
+            display: flex;
+            flex-direction: column;
+        }
+        
+        #sidebar h3 {
+            padding: 15px;
+            margin: 0;
+            background: #2c3e50;
+            text-align: center;
+            border-bottom: 1px solid #34495e;
+        }
+
+        #file-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+        }
+
+        #main { 
+            flex: 1; 
+            display: flex; 
+            flex-direction: column; 
+            align-items: center; 
+            padding: 20px; 
+            position: relative;
+        }
+        
+        #canvas-container {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            overflow: hidden;
+            background: #2c3e50; /* Match body bg */
+        }
+
+        canvas { 
+            background: #000; 
+            cursor: crosshair; 
+            box-shadow: 0 0 20px rgba(0,0,0,0.5); 
+            border: 2px solid #95a5a6;
+        }
+        
+        .img-item { 
+            cursor: pointer; 
+            padding: 10px; 
+            margin-bottom: 5px; 
+            background: #ecf0f1; 
+            color: #2c3e50;
+            border-radius: 4px;
+            transition: all 0.2s;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .img-item:hover {
+            background: #bdc3c7;
+        }
+        
+        .img-item.active { 
+            background: #3498db; 
+            color: white; 
+            font-weight: bold;
+        }
+        
+        .img-item.annotated .status::after { 
+            content: '✓'; 
+            color: #27ae60; 
+            font-weight: bold; 
+            font-size: 1.2em;
+        }
+        
+        .img-item.active.annotated .status::after { 
+            color: #2ecc71; 
+        }
+        
+        #controls { 
+            margin-top: 15px; 
+            display: flex; 
+            gap: 15px; 
+            align-items: center; 
+            background: #34495e;
+            padding: 10px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        
+        button { 
+            padding: 8px 20px; 
+            cursor: pointer; 
+            font-size: 14px; 
+            border: none;
+            border-radius: 4px;
+            background: #95a5a6;
+            color: white;
+            transition: background 0.2s;
+        }
+        
+        button:hover { background: #7f8c8d; }
+        
+        button.primary { background: #3498db; }
+        button.primary:hover { background: #2980b9; }
+        
+        button.danger { background: #e74c3c; }
+        button.danger:hover { background: #c0392b; }
+        
+        button.success { background: #27ae60; }
+        button.success:hover { background: #219150; }
+
+        #output-area {
+            width: 100%;
+            height: 120px;
+            margin-top: 15px;
+            position: relative;
+        }
+
+        #output { 
+            width: 100%; 
+            height: 100%; 
+            font-family: 'Consolas', monospace; 
+            padding: 10px;
+            box-sizing: border-box;
+            background: #ecf0f1;
+            color: #2c3e50;
+            border: none;
+            border-radius: 4px;
+            resize: none;
+        }
+        
+        .instructions {
+            margin-top: 10px;
+            font-size: 0.9em;
+            color: #bdc3c7;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+
+<div id="sidebar">
+    <h3>图片列表 (1-12)</h3>
+    <div id="file-list"></div>
+</div>
+
+<div id="main">
+    <div id="canvas-container">
+        <canvas id="canvas"></canvas>
+    </div>
+    
+    <div class="instructions">
+        操作指南: 鼠标拖拽画圆 | A/← 上一张 | D/→ 下一张 | Del 清除当前 | 点击下方按钮导出
+    </div>
+
+    <div id="controls">
+        <span style="min-width: 100px;">当前: <strong id="current-file">--</strong></span>
+        <button onclick="prevImage()">上一张 (A)</button>
+        <button class="primary" onclick="nextImage()">下一张 (D)</button>
+        <button class="danger" onclick="clearAnnotation()">清除 (Del)</button>
+        <button class="success" onclick="exportData()">生成 JSON</button>
+    </div>
+    
+    <div id="output-area">
+        <textarea id="output" readonly placeholder="点击“生成 JSON”按钮，此处将显示结果并自动复制到剪贴板..."></textarea>
+    </div>
+</div>
+
+<script>
+    // 配置
+    const imageFolder = './Images/';
+    const totalImages = 12;
+    const images = [];
+    for (let i = 1; i <= totalImages; i++) {
+        images.push(`${i}.jpg`);
+    }
+
+    // 状态
+    let currentIndex = 0;
+    const annotations = {}; // { "1.jpg": { x: 100, y: 100, r: 50 } }
+    
+    // DOM 元素
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    const fileListEl = document.getElementById('file-list');
+    const canvasContainer = document.getElementById('canvas-container');
+    
+    let imgObj = new Image();
+    let isDragging = false;
+    let startX, startY;
+    let currentMouseX, currentMouseY;
+
+    // 初始化侧边栏
+    function renderSidebar() {
+        fileListEl.innerHTML = '';
+        images.forEach((name, idx) => {
+            const div = document.createElement('div');
+            div.className = `img-item ${idx === currentIndex ? 'active' : ''} ${annotations[name] ? 'annotated' : ''}`;
+            div.innerHTML = `<span>${name}</span><span class="status"></span>`;
+            div.onclick = () => loadImage(idx);
+            fileListEl.appendChild(div);
+        });
+        
+        // 滚动到当前项
+        const activeItem = fileListEl.querySelector('.active');
+        if (activeItem) {
+            activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
+
+    function loadImage(index) {
+        if (index < 0) index = images.length - 1;
+        if (index >= images.length) index = 0;
+        currentIndex = index;
+        
+        const filename = images[currentIndex];
+        document.getElementById('current-file').textContent = filename;
+        
+        imgObj = new Image();
+        imgObj.onload = () => {
+            fitCanvas();
+            draw();
+            renderSidebar();
+        };
+        imgObj.onerror = () => {
+            alert(`无法加载图片: ${imageFolder + filename}\n请确保图片存在且路径正确。`);
+        };
+        imgObj.src = imageFolder + filename;
+    }
+    
+    function fitCanvas() {
+        if (!imgObj.width) return;
+        
+        const containerWidth = canvasContainer.clientWidth;
+        const containerHeight = canvasContainer.clientHeight;
+        
+        // 计算缩放比例，保持长宽比，并留一点边距
+        const scale = Math.min(
+            (containerWidth - 20) / imgObj.width, 
+            (containerHeight - 20) / imgObj.height
+        );
+        
+        // 设置 Canvas 的显示大小
+        canvas.style.width = (imgObj.width * scale) + 'px';
+        canvas.style.height = (imgObj.height * scale) + 'px';
+        
+        // 设置 Canvas 的实际分辨率 (等于图片原始分辨率)
+        canvas.width = imgObj.width;
+        canvas.height = imgObj.height;
+    }
+
+    function draw() {
+        // 清空画布
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        if (imgObj.width) {
+            ctx.drawImage(imgObj, 0, 0);
+        }
+        
+        const name = images[currentIndex];
+        const data = annotations[name];
+        
+        // 绘制已保存的标注 (绿色)
+        if (data) {
+            drawCircle(data.x, data.y, data.r, '#2ecc71', 4);
+        }
+        
+        // 绘制正在拖拽的圆 (黄色)
+        if (isDragging) {
+            const dx = currentMouseX - startX;
+            const dy = currentMouseY - startY;
+            const r = Math.sqrt(dx*dx + dy*dy);
+            drawCircle(startX, startY, r, '#f1c40f', 2);
+            
+            // 显示当前半径
+            ctx.fillStyle = '#f1c40f';
+            ctx.font = '20px Arial';
+            ctx.fillText(`R: ${Math.round(r)}`, currentMouseX + 10, currentMouseY + 10);
+        }
+    }
+
+    function drawCircle(x, y, r, color, lineWidth) {
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, 2 * Math.PI);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+        
+        // 绘制圆心
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(x, y, lineWidth + 2, 0, 2 * Math.PI);
+        ctx.fill();
+    }
+
+    // 鼠标坐标映射 (从屏幕坐标到 Canvas 内部坐标)
+    function getMousePos(evt) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        return {
+            x: (evt.clientX - rect.left) * scaleX,
+            y: (evt.clientY - rect.top) * scaleY
+        };
+    }
+
+    // 事件监听
+    canvas.addEventListener('mousedown', (e) => {
+        const pos = getMousePos(e);
+        startX = pos.x;
+        startY = pos.y;
+        isDragging = true;
+        currentMouseX = pos.x;
+        currentMouseY = pos.y;
+        draw();
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        const pos = getMousePos(e);
+        currentMouseX = pos.x;
+        currentMouseY = pos.y;
+        draw();
+    });
+
+    canvas.addEventListener('mouseup', (e) => {
+        if (!isDragging) return;
+        isDragging = false;
+        const pos = getMousePos(e);
+        const dx = pos.x - startX;
+        const dy = pos.y - startY;
+        const r = Math.sqrt(dx*dx + dy*dy);
+        
+        // 只有当半径大于 5 像素时才保存，防止误触
+        if (r > 5) {
+            annotations[images[currentIndex]] = {
+                x: Math.round(startX),
+                y: Math.round(startY),
+                r: Math.round(r)
+            };
+        }
+        draw();
+        renderSidebar();
+    });
+    
+    // 窗口大小改变时重新适配
+    window.addEventListener('resize', () => {
+        if (imgObj.src) fitCanvas();
+    });
+
+    // 按钮功能
+    function prevImage() { loadImage(currentIndex - 1); }
+    function nextImage() { loadImage(currentIndex + 1); }
+    
+    function clearAnnotation() {
+        if (annotations[images[currentIndex]]) {
+            delete annotations[images[currentIndex]];
+            draw();
+            renderSidebar();
+        }
+    }
+
+    function exportData() {
+        const result = [];
+        images.forEach(name => {
+            if (annotations[name]) {
+                result.push({
+                    filename: name,
+                    ...annotations[name]
+                });
+            }
+        });
+        
+        if (result.length === 0) {
+            alert("还没有任何标注数据！请先在图片上拖拽画圆。");
+            return;
+        }
+
+        const jsonStr = JSON.stringify(result, null, 2);
+        const outputEl = document.getElementById('output');
+        outputEl.value = jsonStr;
+        outputEl.select();
+        
+        try {
+            document.execCommand('copy');
+            alert(`已生成 ${result.length} 条标注数据并复制到剪贴板！\n你可以直接粘贴到 Python 代码中使用。`);
+        } catch (err) {
+            alert('复制失败，请手动复制下方文本框中的内容。');
+        }
+    }
+
+    // 键盘快捷键
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'TEXTAREA') return;
+        
+        switch(e.key) {
+            case 'a':
+            case 'A':
+            case 'ArrowLeft':
+                prevImage();
+                break;
+            case 'd':
+            case 'D':
+            case 'ArrowRight':
+                nextImage();
+                break;
+            case 'Delete':
+            case 'Backspace':
+                clearAnnotation();
+                break;
+        }
+    });
+
+    // 启动
+    loadImage(0);
+
+</script>
+</body>
+</html>
--- a/static/Test/Images/1.jpg
+++ b/static/Test/Images/1.jpg
--- a/static/Test/Images/10.jpg
+++ b/static/Test/Images/10.jpg
--- a/static/Test/Images/11.jpg
+++ b/static/Test/Images/11.jpg
--- a/static/Test/Images/12.jpg
+++ b/static/Test/Images/12.jpg
--- a/static/Test/Images/2.jpg
+++ b/static/Test/Images/2.jpg
--- a/static/Test/Images/3.jpg
+++ b/static/Test/Images/3.jpg
--- a/static/Test/Images/4.jpg
+++ b/static/Test/Images/4.jpg
--- a/static/Test/Images/5.jpg
+++ b/static/Test/Images/5.jpg
--- a/static/Test/Images/6.jpg
+++ b/static/Test/Images/6.jpg
--- a/static/Test/Images/7.jpg
+++ b/static/Test/Images/7.jpg
--- a/static/Test/Images/8.jpg
+++ b/static/Test/Images/8.jpg
--- a/static/Test/Images/9.jpg
+++ b/static/Test/Images/9.jpg
--- a/static/Test/Result/1.png
+++ b/static/Test/Result/1.png
--- a/static/Test/Result/10.png
+++ b/static/Test/Result/10.png
--- a/static/Test/Result/11.png
+++ b/static/Test/Result/11.png
--- a/static/Test/Result/12.png
+++ b/static/Test/Result/12.png
--- a/static/Test/Result/2.png
+++ b/static/Test/Result/2.png
--- a/static/Test/Result/3.png
+++ b/static/Test/Result/3.png
--- a/static/Test/Result/4.png
+++ b/static/Test/Result/4.png
--- a/static/Test/Result/5.png
+++ b/static/Test/Result/5.png
--- a/static/Test/Result/6.png
+++ b/static/Test/Result/6.png
--- a/static/Test/Result/7.png
+++ b/static/Test/Result/7.png
--- a/static/Test/Result/8.png
+++ b/static/Test/Result/8.png
--- a/static/Test/Result/9.png
+++ b/static/Test/Result/9.png
--- a/static/Test/crop_avatars.py
+++ b/static/Test/crop_avatars.py
@@ -0,0 +1,86 @@
+import json
+import cv2
+import os
+import numpy as np
+
+def crop_avatars():
+    # Paths
+    base_dir = r'd:\dsWork\aiData\static\Test'
+    json_path = os.path.join(base_dir, 'data.json')
+    images_dir = os.path.join(base_dir, 'Images')
+    output_dir = os.path.join(base_dir, 'Result')
+
+    # Create output directory if it doesn't exist
+    if not os.path.exists(output_dir):
+        os.makedirs(output_dir)
+        print(f"Created output directory: {output_dir}")
+
+    # Load JSON data
+    try:
+        with open(json_path, 'r', encoding='utf-8') as f:
+            data = json.load(f)
+    except Exception as e:
+        print(f"Error loading JSON file: {e}")
+        return
+
+    print(f"Found {len(data)} entries in data.json")
+
+    for item in data:
+        filename = item['filename']
+        x = int(item['x'])
+        y = int(item['y'])
+        r = int(item['r'])
+
+        image_path = os.path.join(images_dir, filename)
+        if not os.path.exists(image_path):
+            print(f"Image not found: {image_path}")
+            continue
+
+        # Read image
+        img = cv2.imread(image_path)
+        if img is None:
+            print(f"Failed to read image: {image_path}")
+            continue
+
+        height, width = img.shape[:2]
+
+        # Calculate bounding box for cropping
+        x1 = max(0, x - r)
+        y1 = max(0, y - r)
+        x2 = min(width, x + r)
+        y2 = min(height, y + r)
+
+        # Ensure valid crop dimensions
+        if x2 <= x1 or y2 <= y1:
+            print(f"Invalid crop dimensions for {filename}")
+            continue
+
+        # Create a mask for the circle
+        # Mask needs to be the size of the original image first to handle edge cases correctly
+        mask = np.zeros((height, width), dtype=np.uint8)
+        cv2.circle(mask, (x, y), r, (255), -1)
+
+        # Add alpha channel to the image
+        b, g, r_channel = cv2.split(img)
+        rgba = cv2.merge([b, g, r_channel, mask])
+
+        # Crop the RGBA image
+        cropped = rgba[y1:y2, x1:x2]
+
+        # Since the crop might not be a perfect square if near edges, 
+        # but the circle is centered at x,y.
+        # Ideally we want the output to be a square bounding box of the circle.
+        # If the circle goes out of bounds, the cropped image will be smaller.
+        # Let's keep it simple: crop what is available. The alpha channel handles the shape.
+
+        # Save result
+        output_filename = os.path.splitext(filename)[0] + '.png'
+        output_path = os.path.join(output_dir, output_filename)
+        
+        cv2.imwrite(output_path, cropped)
+        print(f"Saved: {output_path}")
+
+    print("Processing complete.")
+
+if __name__ == "__main__":
+    crop_avatars()
--- a/static/Test/data.json
+++ b/static/Test/data.json
@@ -0,0 +1,74 @@
+[
+  {
+    "filename": "1.jpg",
+    "x": 1450,
+    "y": 1234,
+    "r": 597
+  },
+  {
+    "filename": "2.jpg",
+    "x": 1487,
+    "y": 1307,
+    "r": 677
+  },
+  {
+    "filename": "3.jpg",
+    "x": 1303,
+    "y": 1516,
+    "r": 765
+  },
+  {
+    "filename": "4.jpg",
+    "x": 1512,
+    "y": 1313,
+    "r": 662
+  },
+  {
+    "filename": "5.jpg",
+    "x": 1530,
+    "y": 1350,
+    "r": 666
+  },
+  {
+    "filename": "6.jpg",
+    "x": 1413,
+    "y": 1338,
+    "r": 621
+  },
+  {
+    "filename": "7.jpg",
+    "x": 1205,
+    "y": 1160,
+    "r": 786
+  },
+  {
+    "filename": "8.jpg",
+    "x": 1340,
+    "y": 1172,
+    "r": 709
+  },
+  {
+    "filename": "9.jpg",
+    "x": 1567,
+    "y": 1516,
+    "r": 721
+  },
+  {
+    "filename": "10.jpg",
+    "x": 1542,
+    "y": 1007,
+    "r": 749
+  },
+  {
+    "filename": "11.jpg",
+    "x": 1438,
+    "y": 1148,
+    "r": 675
+  },
+  {
+    "filename": "12.jpg",
+    "x": 1438,
+    "y": 817,
+    "r": 645
+  }
+]
--- a/static/Test/地狱大转盘V2.html
+++ b/static/Test/地狱大转盘V2.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>😈 地狱点名册 - 谁是天选之子？ 😈</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Creepster&family=Noto+Sans+SC:wght@700&display=swap');
+
+        :root {
+            --primary: #ff4757;
+            --highlight: #eccc68;
+            --bg: #1e272e;
+            --card-bg: #2f3542;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #000;
+            background-image: radial-gradient(circle at center, #2c3e50 0%, #000 100%);
+            color: #fff;
+            font-family: 'Noto Sans SC', sans-serif;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            user-select: none;
+        }
+
+        h1 {
+            font-family: 'Creepster', cursive, 'Noto Sans SC';
+            color: #ff4757;
+            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
+            font-size: 3rem;
+            margin-bottom: 20px;
+            letter-spacing: 3px;
+            text-align: center;
+            animation: pulse 2s infinite;
+            z-index: 10;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); text-shadow: 0 0 10px #ff0000; }
+            50% { transform: scale(1.05); text-shadow: 0 0 20px #ff0000, 0 0 40px #ff4757; }
+            100% { transform: scale(1); text-shadow: 0 0 10px #ff0000; }
+        }
+
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+            perspective: 1000px;
+            z-index: 10;
+        }
+
+        .avatar-card {
+            width: 100px;
+            height: 100px;
+            position: relative;
+            border-radius: 50%;
+            border: 4px solid transparent;
+            transition: all 0.1s; /* Faster transition for rapid switching */
+            cursor: pointer;
+            overflow: hidden;
+            background-color: var(--card-bg);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+        }
+
+        .avatar-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 50%;
+            filter: grayscale(0.6) contrast(1.2);
+            transition: filter 0.3s;
+        }
+
+        /* 选中/高亮状态 */
+        .avatar-card.active {
+            transform: scale(1.2);
+            border-color: var(--highlight);
+            box-shadow: 0 0 20px var(--highlight), 0 0 40px var(--primary);
+            z-index: 10;
+        }
+        .avatar-card.active img {
+            filter: grayscale(0) contrast(1);
+        }
+
+        /* 最终选中状态 */
+        .avatar-card.winner {
+            border-color: #ff4757;
+            box-shadow: 0 0 50px #ff4757, 0 0 100px #ff4757;
+            animation: shake 0.5s infinite;
+            z-index: 20;
+        }
+
+        /* 排除状态 */
+        .avatar-card.loser {
+            opacity: 0.2;
+            transform: scale(0.8);
+            filter: grayscale(1);
+        }
+
+        @keyframes shake {
+            0% { transform: translate(1px, 1px) rotate(0deg) scale(1.4); }
+            10% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.4); }
+            20% { transform: translate(-3px, 0px) rotate(1deg) scale(1.4); }
+            30% { transform: translate(3px, 2px) rotate(0deg) scale(1.4); }
+            40% { transform: translate(1px, -1px) rotate(1deg) scale(1.4); }
+            50% { transform: translate(-1px, 2px) rotate(-1deg) scale(1.4); }
+            60% { transform: translate(-3px, 1px) rotate(0deg) scale(1.4); }
+            70% { transform: translate(3px, 1px) rotate(-1deg) scale(1.4); }
+            80% { transform: translate(-1px, -1px) rotate(1deg) scale(1.4); }
+            90% { transform: translate(1px, 2px) rotate(0deg) scale(1.4); }
+            100% { transform: translate(1px, -2px) rotate(-1deg) scale(1.4); }
+        }
+
+        #actionBtn {
+            margin-top: 40px;
+            padding: 15px 60px;
+            font-size: 2rem;
+            background: linear-gradient(45deg, #ff4757, #ff6b6b);
+            border: none;
+            border-radius: 50px;
+            color: white;
+            cursor: pointer;
+            box-shadow: 0 0 20px rgba(255, 71, 87, 0.6);
+            transition: all 0.2s;
+            font-family: 'Creepster', 'Noto Sans SC';
+            text-transform: uppercase;
+            position: relative;
+            overflow: hidden;
+            z-index: 10;
+        }
+
+        #actionBtn:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 40px rgba(255, 71, 87, 0.8);
+        }
+        
+        #actionBtn:active {
+            transform: scale(0.95);
+        }
+
+        #actionBtn:disabled {
+            background: #555;
+            cursor: not-allowed;
+            box-shadow: none;
+            color: #999;
+        }
+
+        /* 弹幕/吐槽文字 */
+        .danmu {
+            position: absolute;
+            font-size: 1.5rem;
+            color: rgba(255,255,255,0.8);
+            white-space: nowrap;
+            animation: fly 6s linear forwards;
+            pointer-events: none;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px #000;
+            z-index: 5;
+        }
+
+        @keyframes fly {
+            from { transform: translateX(100vw); }
+            to { transform: translateX(-100%); }
+        }
+
+        /* 结果展示层 */
+        #resultOverlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(0,0,0,0.9);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.5s;
+        }
+
+        #resultOverlay.show {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        #resultImage {
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            border: 10px solid #ff4757;
+            box-shadow: 0 0 100px #ff4757;
+            object-fit: cover;
+            animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        #resultText {
+            margin-top: 30px;
+            font-size: 4rem;
+            color: #fffa65;
+            font-family: 'Creepster', cursive;
+            text-shadow: 0 0 20px #ff9f43;
+            text-align: center;
+            animation: fadeInUp 1s ease-out 0.5s both;
+        }
+        
+        #closeResult {
+            margin-top: 40px;
+            padding: 10px 30px;
+            background: transparent;
+            border: 2px solid #fff;
+            color: #fff;
+            font-size: 1.2rem;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: all 0.3s;
+            animation: fadeInUp 1s ease-out 1s both;
+        }
+        #closeResult:hover {
+            background: #fff;
+            color: #000;
+        }
+
+        @keyframes popIn {
+            0% { transform: scale(0) rotate(-180deg); }
+            100% { transform: scale(1) rotate(0deg); }
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* 闪光特效 */
+        #flashOverlay {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: white;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 200;
+        }
+        @keyframes flashAnim {
+            0% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        /* 粒子画布 */
+        #particleCanvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 150;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div id="flashOverlay"></div>
+    <canvas id="particleCanvas"></canvas>
+
+    <h1>🔥 谁是今天的“天选之子”？ 🔥</h1>
+
+    <div class="grid-container" id="grid">
+        <!-- Avatars will be injected here -->
+    </div>
+
+    <button id="actionBtn" onclick="startRoulette()">开始审判</button>
+
+    <div id="resultOverlay">
+        <img id="resultImage" src="" alt="Winner">
+        <div id="resultText">恭喜你！</div>
+        <button id="closeResult" onclick="resetGame()">再来一次</button>
+    </div>
+
+    <script>
+        // 配置
+        const totalImages = 12;
+        const imagePath = './Result/';
+        const grid = document.getElementById('grid');
+        const funnyComments = [
+            "不会是你吧？", "感觉大事不妙...", "快跑啊！", "瑟瑟发抖", "这是什么运气？",
+            "千万别是我...", "救命🆘", "哈哈哈哈", "紧张时刻", "一定要挺住！", 
+            "今晚吃鸡", "全村的希望", "这是天意", "无法逃避的命运", "别看我，看屏幕！"
+        ];
+        
+        const resultTitles = [
+            "💀 倒霉蛋诞生 💀",
+            "🤡 小丑竟是你 🤡",
+            "🎉 恭喜中奖 🎉",
+            "👑 天选之子 👑",
+            "😱 跑不掉了 😱",
+            "🎯 完美命中 🎯",
+            "😈 接受审判吧 😈"
+        ];
+
+        // --- 音效管理器 (Web Audio API) ---
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        
+        const SoundMgr = {
+            playTick: function() {
+                if (audioCtx.state === 'suspended') audioCtx.resume();
+                const osc = audioCtx.createOscillator();
+                const gain = audioCtx.createGain();
+                
+                osc.type = 'square';
+                osc.frequency.setValueAtTime(800, audioCtx.currentTime);
+                osc.frequency.exponentialRampToValueAtTime(400, audioCtx.currentTime + 0.05);
+                
+                gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.05);
+                
+                osc.connect(gain);
+                gain.connect(audioCtx.destination);
+                
+                osc.start();
+                osc.stop(audioCtx.currentTime + 0.05);
+            },
+            
+            playWin: function() {
+                if (audioCtx.state === 'suspended') audioCtx.resume();
+                
+                const now = audioCtx.currentTime;
+                // 创建一个简单的胜利和弦 (C Major: C4, E4, G4, C5)
+                [261.63, 329.63, 392.00, 523.25].forEach((freq, i) => {
+                    const osc = audioCtx.createOscillator();
+                    const gain = audioCtx.createGain();
+                    
+                    osc.type = 'triangle';
+                    osc.frequency.value = freq;
+                    
+                    // 延迟一点点播放，形成琶音效果
+                    const startTime = now + i * 0.05;
+                    
+                    gain.gain.setValueAtTime(0, startTime);
+                    gain.gain.linearRampToValueAtTime(0.3, startTime + 0.1);
+                    gain.gain.exponentialRampToValueAtTime(0.01, startTime + 1.5);
+                    
+                    osc.connect(gain);
+                    gain.connect(audioCtx.destination);
+                    
+                    osc.start(startTime);
+                    osc.stop(startTime + 2.0);
+                });
+
+                // 添加一个低音轰鸣
+                const bassOsc = audioCtx.createOscillator();
+                const bassGain = audioCtx.createGain();
+                bassOsc.type = 'sawtooth';
+                bassOsc.frequency.setValueAtTime(100, now);
+                bassOsc.frequency.exponentialRampToValueAtTime(50, now + 1);
+                bassGain.gain.setValueAtTime(0.5, now);
+                bassGain.gain.exponentialRampToValueAtTime(0.01, now + 1.5);
+                bassOsc.connect(bassGain);
+                bassGain.connect(audioCtx.destination);
+                bassOsc.start(now);
+                bassOsc.stop(now + 1.5);
+            }
+        };
+
+        // --- 粒子系统 (特效) ---
+        const particleCanvas = document.getElementById('particleCanvas');
+        const pCtx = particleCanvas.getContext('2d');
+        let particles = [];
+        
+        function resizeCanvas() {
+            particleCanvas.width = window.innerWidth;
+            particleCanvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        class Particle {
+            constructor(x, y) {
+                this.x = x;
+                this.y = y;
+                const angle = Math.random() * Math.PI * 2;
+                const speed = Math.random() * 10 + 5;
+                this.vx = Math.cos(angle) * speed;
+                this.vy = Math.sin(angle) * speed;
+                this.life = 1.0;
+                this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`; // Red/Orange/Yellow spectrum
+                this.size = Math.random() * 10 + 5;
+            }
+            update() {
+                this.x += this.vx;
+                this.y += this.vy;
+                this.vy += 0.2; // Gravity
+                this.life -= 0.02;
+                this.size *= 0.95;
+            }
+            draw() {
+                pCtx.globalAlpha = this.life;
+                pCtx.fillStyle = this.color;
+                pCtx.beginPath();
+                pCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                pCtx.fill();
+            }
+        }
+
+        function spawnExplosion(x, y) {
+            for(let i=0; i<50; i++) {
+                particles.push(new Particle(x, y));
+            }
+        }
+
+        function animateParticles() {
+            pCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
+            for (let i = particles.length - 1; i >= 0; i--) {
+                const p = particles[i];
+                p.update();
+                p.draw();
+                if (p.life <= 0) particles.splice(i, 1);
+            }
+            requestAnimationFrame(animateParticles);
+        }
+        animateParticles();
+
+        // --- 核心逻辑 ---
+
+        // 初始化
+        function init() {
+            grid.innerHTML = '';
+            for (let i = 1; i <= totalImages; i++) {
+                const div = document.createElement('div');
+                div.className = 'avatar-card';
+                div.id = `card-${i}`;
+                
+                const img = document.createElement('img');
+                img.src = `${imagePath}${i}.png`;
+                img.onerror = function() { this.src = 'https://via.placeholder.com/150?text=No+Image'; }; // Fallback
+                
+                div.appendChild(img);
+                grid.appendChild(div);
+            }
+            startDanmu();
+        }
+
+        // 随机弹幕
+        function startDanmu() {
+            setInterval(() => {
+                if(Math.random() > 0.7) return; // 并不是每次都发
+                const text = funnyComments[Math.floor(Math.random() * funnyComments.length)];
+                const el = document.createElement('div');
+                el.className = 'danmu';
+                el.innerText = text;
+                el.style.top = Math.random() * 80 + 'vh';
+                el.style.fontSize = (Math.random() * 1.5 + 1) + 'rem';
+                document.body.appendChild(el);
+                
+                // 动画结束后移除
+                setTimeout(() => { el.remove(); }, 6000);
+            }, 800);
+        }
+
+        let isSpinning = false;
+        let currentIndex = -1;
+        
+        function startRoulette() {
+            if (isSpinning) return;
+            
+            // 首次点击时解锁 AudioContext (浏览器限制)
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+            
+            isSpinning = true;
+            document.getElementById('actionBtn').disabled = true;
+            document.getElementById('actionBtn').innerText = "审判中...";
+            
+            // 重置状态
+            document.querySelectorAll('.avatar-card').forEach(c => {
+                c.classList.remove('active', 'winner', 'loser');
+            });
+
+            // 动画逻辑
+            let speed = 50; // 初始速度 (ms)
+            let steps = 0;
+            const minSteps = 30; // 至少跑多少步
+            const maxSteps = minSteps + Math.floor(Math.random() * 20); // 随机总步数
+            
+            const cards = document.querySelectorAll('.avatar-card');
+            
+            function step() {
+                // 清除上一个高亮
+                if (currentIndex !== -1) {
+                    cards[currentIndex].classList.remove('active');
+                }
+                
+                // 随机选择下一个
+                let nextIndex;
+                do {
+                    nextIndex = Math.floor(Math.random() * totalImages);
+                } while (nextIndex === currentIndex);
+                
+                currentIndex = nextIndex;
+                cards[currentIndex].classList.add('active');
+                SoundMgr.playTick(); // 播放音效
+                
+                steps++;
+                
+                if (steps < maxSteps) {
+                    // 计算下一步的速度
+                    if (steps < minSteps * 0.7) {
+                        speed = Math.max(50, speed - 5); // 加速
+                    } else {
+                        speed += (steps - minSteps * 0.7) * 4; // 减速更明显
+                    }
+                    setTimeout(step, speed);
+                } else {
+                    // 停止
+                    endGame(currentIndex);
+                }
+            }
+            
+            step();
+        }
+
+        function endGame(winnerIndex) {
+            SoundMgr.playWin(); // 播放胜利音效
+            
+            const cards = document.querySelectorAll('.avatar-card');
+            const winnerCard = cards[winnerIndex];
+            
+            // 屏幕闪光特效
+            const flash = document.getElementById('flashOverlay');
+            flash.style.animation = 'none';
+            flash.offsetHeight; /* trigger reflow */
+            flash.style.animation = 'flashAnim 0.5s ease-out';
+
+            // 粒子爆炸特效 (在卡片位置)
+            const rect = winnerCard.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            spawnExplosion(centerX, centerY);
+            
+            // 视觉效果：其他人变暗，赢家高亮震动
+            cards.forEach((c, idx) => {
+                if (idx !== winnerIndex) {
+                    c.classList.add('loser');
+                } else {
+                    c.classList.add('winner');
+                    c.classList.remove('active');
+                }
+            });
+
+            // 延迟一点显示大图结果
+            setTimeout(() => {
+                const overlay = document.getElementById('resultOverlay');
+                const resultImg = document.getElementById('resultImage');
+                const resultText = document.getElementById('resultText');
+                
+                resultImg.src = `${imagePath}${winnerIndex + 1}.png`;
+                resultText.innerText = resultTitles[Math.floor(Math.random() * resultTitles.length)];
+                
+                overlay.classList.add('show');
+                isSpinning = false;
+                document.getElementById('actionBtn').disabled = false;
+                document.getElementById('actionBtn').innerText = "再来一局";
+                
+                // 全屏粒子特效
+                spawnExplosion(window.innerWidth/2, window.innerHeight/2);
+                setTimeout(() => spawnExplosion(window.innerWidth/3, window.innerHeight/3), 200);
+                setTimeout(() => spawnExplosion(window.innerWidth*2/3, window.innerHeight*2/3), 400);
+
+            }, 1500);
+        }
+
+        function resetGame() {
+            document.getElementById('resultOverlay').classList.remove('show');
+            document.querySelectorAll('.avatar-card').forEach(c => {
+                c.classList.remove('active', 'winner', 'loser');
+            });
+            document.getElementById('actionBtn').innerText = "开始审判";
+        }
+
+        init();
+
+    </script>
+</body>
+</html>