Spaces:

eithney
/

MagicPot

Running

App Files Files Community

MagicPot / HUGGINGFACE_DEPLOYMENT.md

zhanglei

fix voice

ab5909a 10 months ago

preview code

Raw

History Blame Contribute Delete

5.95 kB

MagicPot Hugging Face Spaces 部署指南

🚀 快速部署

1. 准备工作

确保您的项目根目录包含以下关键文件：

README.md - 包含正确的frontmatter配置
index.html - 主游戏页面
完整的项目文件结构

2. Hugging Face Spaces 配置

README.md 中的 frontmatter 配置已经正确设置：

---
title: MagicPot - 魔法锅游戏
emoji: 🪄
colorFrom: purple
colorTo: pink
sdk: static
pinned: false
license: mit
---

3. 部署步骤

方法一：通过 Hugging Face 网页界面

访问 Hugging Face Spaces
点击 "Create new Space"
填写以下信息：
- Space name: magicpot-game
- License: MIT
- SDK: Static
- Visibility: Public
创建后，将项目文件上传到 Space

方法二：通过 Git 命令行

# 1. 克隆您的 Hugging Face Space
git clone https://huggingface.co/spaces/YOUR_USERNAME/magicpot-game
cd magicpot-game

# 2. 复制项目文件
cp -r /path/to/MagicPot/* .

# 3. 提交和推送
git add .
git commit -m "Initial deployment of MagicPot game"
git push

方法三：使用 Hugging Face CLI

# 安装 Hugging Face CLI
pip install huggingface_hub

# 登录
huggingface-cli login

# 上传项目
huggingface-cli upload YOUR_USERNAME/magicpot-game . --repo-type=space

📁 项目结构确认

确保项目根目录结构如下：

magicpot-game/
├── README.md              # ✅ 包含正确的frontmatter
├── index.html             # ✅ 主页面
├── css/
│   └── style.css         # ✅ 样式文件
├── js/
│   ├── main.js           # ✅ 主游戏逻辑
│   ├── voice.js          # ✅ 语音识别
│   ├── pot.js            # ✅ 魔法锅类
│   ├── particles.js      # ✅ 粒子系统
│   ├── animals.js        # ✅ 动物系统
│   ├── textToImage.js    # ✅ 文生图API
│   ├── audio.js          # ✅ 音频系统
│   └── keyboard.js       # ✅ 键盘控制
├── assets/
│   ├── images/           # ✅ 图片资源
│   └── sounds/           # ✅ 音效文件
└── *.mp3                 # ✅ 音频文件

🔧 Hugging Face Spaces 特殊注意事项

HTTPS 要求

Hugging Face Spaces 自动提供 HTTPS
语音识别功能需要 HTTPS 环境，在 Spaces 上会正常工作

跨域资源共享 (CORS)

静态文件自动配置正确的 CORS 头
音频和图片资源可以正常加载

文生图 API 配置

确保在游戏中配置有效的 API 密钥
用户可以通过 Ctrl+Shift+I 快捷键配置

性能优化

Hugging Face Spaces 提供全球 CDN
静态资源会被自动缓存
建议文件大小保持合理（单个文件 < 10MB）

🌐 访问游戏

部署成功后，游戏将在以下地址可用：

https://huggingface.co/spaces/YOUR_USERNAME/magicpot-game

🎮 游戏功能验证

部署完成后，请验证以下功能：

✅ 基础功能

页面正常加载
魔法锅渲染正确
CSS 样式正常应用
音效按钮可点击

✅ 语音功能

浏览器请求麦克风权限
语音状态指示器显示正常
"cook cook cook pot" 命令有效
食物语音命令识别正常
"stop stop stop pot" 命令有效

✅ 游戏机制

魔法锅激活动画
食物粒子涌出效果
动物出现和移动
彩蛋功能（草莓/西瓜）
性能监控显示

✅ 音效系统

魔法激活音效
烹饪冒泡音效
食物弹出音效
动物出现音效
庆祝音效

🐛 常见问题解决

问题1：语音识别不工作

原因: 浏览器不支持或权限问题 解决方案:

确保使用支持的浏览器（Chrome、Edge、Firefox）
检查麦克风权限设置
HTTPS 环境自动满足（Hugging Face Spaces 提供）

问题2：音频文件无法播放

原因: 文件路径或格式问题 解决方案:

确保 .mp3 文件在根目录
检查文件名是否正确
验证文件格式是否有效

问题3：文生图功能不工作

原因: API 密钥未配置 解决方案:

按 Ctrl+Shift+I 配置 API 密钥
游戏会使用备用图片正常运行

问题4：性能问题

原因: 粒子数量过多 解决方案:

检查性能监控显示
刷新页面重置游戏状态
粒子系统已自动优化

📊 监控和分析

Hugging Face Spaces 提供的功能

访问统计: 查看 Space 的访问量
使用分析: 了解用户行为
性能监控: Space 运行状态

游戏内置监控

实时 FPS: 游戏性能指标
粒子计数: 当前粒子数量
动物计数: 当前动物数量
内存使用: 资源占用情况

🔄 更新和维护

更新游戏

在本地修改代码
提交到 Git 仓库
Hugging Face Spaces 自动更新

版本控制

git add .
git commit -m "Update: 描述更新内容"
git push