Hugging Face's logo

Spaces:
samlax12
/
hand
Running

App Files Community
hand / index.html
samlax12's picture
samlax12
Create index.html
a77c389 verified
raw
history blame contribute delete
23.3 kB
<!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>AR美甲工作室</title>
 <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>
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 body {
 background-color: #f8f8f8;
 overflow: hidden;
 position: fixed;
 width: 100%;
 height: 100%;
 touch-action: none;
 }
 .container {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
 }
 .input_video {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 object-fit: cover;
 opacity: 0;
 pointer-events: none;
 }
 .output_canvas {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 object-fit: cover;
 }
 .controls-container {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 padding: 20px;
 background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
 z-index: 10;
 }
 .controls-content {
 max-width: 500px;
 margin: 0 auto;
 }
 .control-section {
 margin-bottom: 25px;
 }
 .section-title {
 color: white;
 font-size: 14px;
 font-weight: 600;
 margin-bottom: 12px;
 letter-spacing: 0.5px;
 text-transform: uppercase;
 }
 .design-options {
 display: flex;
 overflow-x: auto;
 padding-bottom: 8px;
 gap: 12px;
 scrollbar-width: none;
 }
 .design-options::-webkit-scrollbar {
 display: none;
 }
 .design-option {
 width: 60px;
 height: 60px;
 border-radius: 12px;
 overflow: hidden;
 position: relative;
 border: 2px solid transparent;
 transition: all 0.2s ease;
 flex-shrink: 0;
 }
 .design-option.selected {
 border-color: #fff;
 transform: scale(1.05);
 box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }
 .slider-container {
 margin: 15px 0;
 color: white;
 }
 .slider-label {
 display: flex;
 justify-content: space-between;
 font-size: 12px;
 margin-bottom: 8px;
 }
 .slider {
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 4px;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 2px;
 outline: none;
 }
 .slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: white;
 cursor: pointer;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 .toggle-section {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .toggle-container {
 display: flex;
 align-items: center;
 }
 .toggle-label {
 color: white;
 font-size: 14px;
 margin-right: 10px;
 }
 .toggle {
 position: relative;
 width: 46px;
 height: 24px;
 border-radius: 12px;
 background-color: rgba(255, 255, 255, 0.3);
 transition: all 0.3s ease;
 }
 .toggle.active {
 background-color: #3a86ff;
 }
 .toggle-handle {
 position: absolute;
 top: 2px;
 left: 2px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: white;
 transition: all 0.3s ease;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 .toggle.active .toggle-handle {
 left: 24px;
 }
 .snap-button {
 position: absolute;
 bottom: 240px;
 left: 50%;
 transform: translateX(-50%);
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background-color: white;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 z-index: 20;
 border: none;
 outline: none;
 }
 .snap-button:active {
 transform: translateX(-50%) scale(0.95);
 }
 .snap-button::after {
 content: '';
 width: 52px;
 height: 52px;
 border-radius: 50%;
 border: 2px solid #f8f8f8;
 }
 .camera-flip {
 position: absolute;
 top: 20px;
 right: 20px;
 background: rgba(0, 0, 0, 0.5);
 color: white;
 border: none;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 20;
 font-size: 18px;
 }
 .loading-screen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 transition: opacity 0.5s ease;
 }
 .loading-spinner {
 width: 50px;
 height: 50px;
 border: 3px solid rgba(255, 255, 255, 0.2);
 border-radius: 50%;
 border-top-color: white;
 animation: spin 1s linear infinite;
 margin-bottom: 20px;
 }
 .loading-text {
 color: white;
 font-size: 18px;
 font-weight: 500;
 }
 @keyframes spin {
 to {
 transform: rotate(360deg);
 }
 }
 .app-title {
 position: absolute;
 top: 20px;
 left: 20px;
 color: white;
 font-size: 18px;
 font-weight: 600;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 z-index: 20;
 }
.color-block {
 width: 100%;
 height: 100%;
 }
.camera-permission {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 9998;
 color: white;
 text-align: center;
 padding: 20px;
 }
.camera-permission h2 {
 margin-bottom: 20px;
 font-size: 24px;
 }
.camera-permission p {
 margin-bottom: 30px;
 font-size: 16px;
 max-width: 500px;
 }
.allow-camera-btn {
 background-color: #3a86ff;
 color: white;
 border: none;
 padding: 12px 24px;
 border-radius: 24px;
 font-size: 16px;
 font-weight: 500;
 cursor: pointer;
 }
 .debug-info {
 position: fixed;
 top: 70px;
 left: 20px;
 color: white;
 background-color: rgba(0,0,0,0.7);
 padding: 10px;
 border-radius: 5px;
 font-size: 12px;
 z-index: 100;
 max-width: 300px;
 display: none;
 }
 </style>
</head>
<body>
 <div class="loading-screen">
 <div class="loading-spinner"></div>
 <div class="loading-text">正在加载AR美甲工作室...</div>
 </div>
<div class="camera-permission" id="cameraPermission">
 <h2>需要摄像头权限</h2>
 <p>AR美甲工作室需要使用您的摄像头来实时显示美甲效果。请点击下方按钮允许使用摄像头。</p>
 <button class="allow-camera-btn" id="allowCameraBtn">允许使用摄像头</button>
 </div>
<div class="debug-info" id="debugInfo"></div>
<div class="container">
 <video class="input_video" playsinline></video>
 <canvas class="output_canvas"></canvas>
<div class="app-title">AR美甲工作室</div>
<button class="camera-flip">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 <path d="M9 16V10H15"></path>
 <path d="M15 16L9 10"></path>
 <path d="M12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21C7.029 21 3 16.971 3 12"></path>
 <path d="M3 4V8H7"></path>
 </svg>
 </button>
<button class="snap-button"></button>
<div class="controls-container">
 <div class="controls-content">
 <div class="control-section">
 <div class="section-title">美甲设计</div>
 <div class="design-options">
 <div class="design-option selected" data-design="pink">
 <div class="color-block" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);"></div>
 </div>
 <div class="design-option" data-design="blue">
 <div class="color-block" style="background: linear-gradient(45deg, #2193b0, #6dd5ed);"></div>
 </div>
 <div class="design-option" data-design="purple">
 <div class="color-block" style="background: linear-gradient(45deg, #c471f5, #fa71cd);"></div>
 </div>
 <div class="design-option" data-design="gold">
 <div class="color-block" style="background: linear-gradient(45deg, #f6d365, #fda085);"></div>
 </div>
 <div class="design-option" data-design="green">
 <div class="color-block" style="background: linear-gradient(45deg, #43c6ac, #f8ffae);"></div>
 </div>
 <div class="design-option" data-design="black">
 <div class="color-block" style="background: linear-gradient(45deg, #232526, #414345);"></div>
 </div>
 </div>
 </div>
<div class="control-section">
 <div class="section-title">调整</div>
<div class="slider-container">
 <div class="slider-label">
 <span>大小</span>
 <span id="size-value">100%</span>
 </div>
 <input type="range" min="50" max="150" value="100" class="slider" id="size-slider">
 </div>
<div class="slider-container">
 <div class="slider-label">
 <span>长度</span>
 <span id="length-value">100%</span>
 </div>
 <input type="range" min="80" max="200" value="100" class="slider" id="length-slider">
 </div>
<div class="slider-container">
 <div class="slider-label">
 <span>透明度</span>
 <span id="opacity-value">100%</span>
 </div>
 <input type="range" min="30" max="100" value="100" class="slider" id="opacity-slider">
 </div>
 </div>
<div class="control-section toggle-section">
 <div class="toggle-container">
 <span class="toggle-label">真实阴影</span>
 <div class="toggle active" id="shadow-toggle">
 <div class="toggle-handle"></div>
 </div>
 </div>
<div class="toggle-container">
 <span class="toggle-label">显示手部轮廓</span>
 <div class="toggle" id="lines-toggle">
 <div class="toggle-handle"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // 定义美甲颜色及其属性
 const nailDesigns = {
 pink: {
 color: 'linear-gradient(45deg, #ff9a9e, #fad0c4)',
 shadowColor: 'rgba(255, 154, 158, 0.5)'
 },
 blue: {
 color: 'linear-gradient(45deg, #2193b0, #6dd5ed)',
 shadowColor: 'rgba(33, 147, 176, 0.5)'
 },
 purple: {
 color: 'linear-gradient(45deg, #c471f5, #fa71cd)',
 shadowColor: 'rgba(196, 113, 245, 0.5)'
 },
 gold: {
 color: 'linear-gradient(45deg, #f6d365, #fda085)',
 shadowColor: 'rgba(246, 211, 101, 0.5)'
 },
 green: {
 color: 'linear-gradient(45deg, #43c6ac, #f8ffae)',
 shadowColor: 'rgba(67, 198, 172, 0.5)'
 },
 black: {
 color: 'linear-gradient(45deg, #232526, #414345)',
 shadowColor: 'rgba(35, 37, 38, 0.5)'
 }
 };
// 初始化变量
 let currentDesign = 'pink';
 let sizeScale = 1.0;
 let lengthScale = 1.0;
 let opacity = 1.0;
 let showShadows = true;
 let showLines = false;
 let facingMode = 'environment'; // 'user' = 前置摄像头, 'environment' = 后置摄像头
 let camera;
 let cameraInitialized = false;
// 初始化MediaPipe Hands实例
 let hands;
// 调试工具
 const debugInfo = document.getElementById('debugInfo');
 function showDebug(text) {
 debugInfo.style.display = 'block';
 debugInfo.textContent = text;
 }
// 获取UI元素
 const videoElement = document.getElementsByClassName('input_video')[0];
 const canvasElement = document.getElementsByClassName('output_canvas')[0];
 const cameraPermissionElement = document.getElementById('cameraPermission');
 const allowCameraButton = document.getElementById('allowCameraBtn');
// 设置画布尺寸
 canvasElement.width = window.innerWidth;
 canvasElement.height = window.innerHeight;
 const canvasCtx = canvasElement.getContext('2d');
// 获取其他UI元素
 const sizeSlider = document.getElementById('size-slider');
 const sizeValue = document.getElementById('size-value');
 const lengthSlider = document.getElementById('length-slider');
 const lengthValue = document.getElementById('length-value');
 const opacitySlider = document.getElementById('opacity-slider');
 const opacityValue = document.getElementById('opacity-value');
 const shadowToggle = document.getElementById('shadow-toggle');
 const linesToggle = document.getElementById('lines-toggle');
 const flipButton = document.querySelector('.camera-flip');
 const snapButton = document.querySelector('.snap-button');
 const designOptions = document.querySelectorAll('.design-option');
// 隐藏加载屏幕当页面准备就绪
 document.addEventListener('DOMContentLoaded', function() {
 document.querySelector('.loading-screen').style.opacity = 0;
 setTimeout(() => {
 document.querySelector('.loading-screen').style.display = 'none';
 }, 500);
 });
// 摄像头权限按钮点击事件
 allowCameraButton.addEventListener('click', () => {
 initializeARApp();
 });
// 为指尖应用美甲设计的函数
 function applyNailDesign(ctx, fingerTip, fingerBase, design) {
 // 提取坐标
 const tipX = fingerTip.x * canvasElement.width;
 const tipY = fingerTip.y * canvasElement.height;
 const baseX = fingerBase.x * canvasElement.width;
 const baseY = fingerBase.y * canvasElement.height;
// 计算指甲参数
 const fingerAngle = Math.atan2(tipY - baseY, tipX - baseX);
 const fingerLength = Math.sqrt(Math.pow(tipX - baseX, 2) + Math.pow(tipY - baseY, 2));
// 指甲的大小（通过滑块调整）
 const nailWidth = fingerLength * 0.6 * sizeScale;
 const nailLength = fingerLength * 0.7 * lengthScale;
// 保存上下文状态
 ctx.save();
// 移动到指尖并旋转
 ctx.translate(tipX, tipY);
 ctx.rotate(fingerAngle);
// 如果启用，绘制指甲阴影
 if (showShadows) {
 ctx.save();
 ctx.shadowColor = nailDesigns[design].shadowColor;
 ctx.shadowBlur = 15;
 ctx.shadowOffsetX = 0;
 ctx.shadowOffsetY = 5;
 ctx.fillStyle = 'rgba(0,0,0,0)';
 ctx.beginPath();
 ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
 ctx.fill();
 ctx.restore();
 }
// 绘制指甲形状（椭圆）
 ctx.beginPath();
 ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
 ctx.clip();
// 为指甲颜色创建渐变
 const gradient = ctx.createLinearGradient(-nailWidth/2, -nailLength/2, nailWidth/2, nailLength/2);
try {
 // 从设计解析渐变颜色 - 修复后的代码
 const gradientStr = nailDesigns[design].color;
 // 提取所有十六进制颜色值
 const colorMatches = gradientStr.match(/#[0-9a-f]{6}/gi);
if (colorMatches && colorMatches.length >= 2) {
 const colorStart = colorMatches[0]; // 第一个颜色
 const colorEnd = colorMatches[1]; // 第二个颜色
gradient.addColorStop(0, colorStart);
 gradient.addColorStop(1, colorEnd);
 } else {
 // 如果无法解析颜色，则使用默认颜色
 gradient.addColorStop(0, '#ff9a9e');
 gradient.addColorStop(1, '#fad0c4');
 console.warn('无法解析颜色，使用默认值');
 }
 } catch (error) {
 // 错误处理
 console.error('创建渐变时出错:', error);
 // 使用默认颜色
 gradient.addColorStop(0, '#ff9a9e');
 gradient.addColorStop(1, '#fad0c4');
 }
// 使用渐变绘制指甲设计
 ctx.globalAlpha = opacity;
 ctx.fillStyle = gradient;
 ctx.fillRect(-nailWidth/2, -nailLength/2, nailWidth, nailLength);
// 恢复上下文
 ctx.restore();
 }
// MediaPipe Hands 模型回调
 function onResults(results) {
 // 清除画布并绘制摄像头画面
 canvasCtx.save();
 canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
 canvasCtx.drawImage(
 results.image, 0, 0, canvasElement.width, canvasElement.height
 );
// 处理手部
 if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
 for (const landmarks of results.multiHandLandmarks) {
 // 如果启用，绘制手部骨架
 if (showLines) {
 drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
 {color: 'rgba(255, 255, 255, 0.5)', lineWidth: 2});
 }
// 为每个指尖应用美甲设计
 // 拇指
 applyNailDesign(canvasCtx, landmarks[4], landmarks[3], currentDesign);
 // 食指
 applyNailDesign(canvasCtx, landmarks[8], landmarks[7], currentDesign);
 // 中指
 applyNailDesign(canvasCtx, landmarks[12], landmarks[11], currentDesign);
 // 无名指
 applyNailDesign(canvasCtx, landmarks[16], landmarks[15], currentDesign);
 // 小指
 applyNailDesign(canvasCtx, landmarks[20], landmarks[19], currentDesign);
 }
 }
canvasCtx.restore();
 }
// 初始化AR应用
 function initializeARApp() {
 try {
 cameraPermissionElement.style.display = 'none';
if (!cameraInitialized) {
 showDebug("正在初始化手部跟踪...");
// 创建 MediaPipe Hands 实例
 hands = new Hands({locateFile: (file) => {
 return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
 }});
hands.setOptions({
 maxNumHands: 2,
 modelComplexity: 1,
 minDetectionConfidence: 0.5,
 minTrackingConfidence: 0.5
 });
hands.onResults(onResults);
// 设置摄像头
 setupCamera();
 cameraInitialized = true;
showDebug("手部跟踪已初始化");
 }
 } catch (error) {
 showDebug("初始化失败: " + error.message);
 console.error("初始化AR应用失败:", error);
 }
 }
// 设置事件监听器
 sizeSlider.addEventListener('input', (e) => {
 sizeScale = parseInt(e.target.value) / 100;
 sizeValue.textContent = `${e.target.value}%`;
 });
lengthSlider.addEventListener('input', (e) => {
 lengthScale = parseInt(e.target.value) / 100;
 lengthValue.textContent = `${e.target.value}%`;
 });
opacitySlider.addEventListener('input', (e) => {
 opacity = parseInt(e.target.value) / 100;
 opacityValue.textContent = `${e.target.value}%`;
 });
shadowToggle.addEventListener('click', () => {
 shadowToggle.classList.toggle('active');
 showShadows = shadowToggle.classList.contains('active');
 });
linesToggle.addEventListener('click', () => {
 linesToggle.classList.toggle('active');
 showLines = linesToggle.classList.contains('active');
 });
flipButton.addEventListener('click', () => {
 facingMode = facingMode === 'user' ? 'environment' : 'user';
 // 使用新的facingMode重启摄像头
 if (camera) {
 camera.stop();
 }
 setupCamera();
 });
designOptions.forEach(option => {
 option.addEventListener('click', () => {
 designOptions.forEach(opt => opt.classList.remove('selected'));
 option.classList.add('selected');
 currentDesign = option.getAttribute('data-design');
 });
 });
snapButton.addEventListener('click', () => {
 const dataUrl = canvasElement.toDataURL('image/png');
// 创建临时链接元素
 const link = document.createElement('a');
 link.href = dataUrl;
 link.download = 'AR-美甲设计.png';
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
// 拍照的视觉反馈
 snapButton.style.backgroundColor = '#3a86ff';
 setTimeout(() => {
 snapButton.style.backgroundColor = 'white';
 }, 300);
 });
// 设置带有适当facingMode的摄像头
 function setupCamera() {
 try {
 showDebug("正在初始化摄像头...");
camera = new Camera(videoElement, {
 onFrame: async () => {
 if (hands) {
 try {
 await hands.send({image: videoElement});
 } catch (error) {
 showDebug("手部跟踪出错: " + error.message);
 }
 }
 },
 width: 1280,
 height: 720,
 facingMode: facingMode
 });
camera.start()
 .then(() => {
 showDebug("摄像头已启动");
 setTimeout(() => {
 debugInfo.style.display = 'none';
 }, 3000);
 })
 .catch(error => {
 console.error('摄像头启动失败: ', error);
 showDebug("摄像头启动失败: " + error.message);
 // 显示摄像头权限界面
 cameraPermissionElement.style.display = 'flex';
 });
 } catch (error) {
 showDebug("摄像头初始化失败: " + error.message);
 console.error("摄像头初始化失败:", error);
 }
 }
// 处理窗口调整大小
 window.addEventListener('resize', () => {
 canvasElement.width = window.innerWidth;
 canvasElement.height = window.innerHeight;
 });
 </script>
</body>
</html>