Ml Games Course

欢迎来到ML Games课程的第一章！这节咱们不整那些虚头巴脑的理论，直接上手玩一把。你可能会想：“机器学习做游戏？听起来好高大上，我零基础能行吗？”放心，这课就是为你准备的，咱们从最基础的“猜数字”游戏开始，让你感受一下AI是怎么“学习”的。

第一步：打开你的“游乐场”
1）打开浏览器，访问 Hugging Face 的 Spaces 平台（国内访问推荐用镜像站：hf-mirror.com）。注册一个账号，免费。
2）在Spaces页面，点击“Create new Space”，选择“Gradio”作为SDK（别怕，Gradio就是个帮你快速搭建交互界面的工具，像搭积木一样简单）。
3）Space名字随便起，比如“my-first-ml-game”，可见性选“Public”或“Private”都行，然后点“Create Space”。

第二步：写一个最简单的“猜数字”游戏
这个游戏规则很简单：电脑随机想一个1到100之间的数字，你来猜，电脑告诉你“大了”或“小了”。虽然这不算真正的ML，但能让你理解“交互”和“反馈”这两个核心概念。

在Space的“Files”页面，找到“app.py”文件，删掉里面的默认代码，换成下面这个：
```python
import random
import gradio as gr

# 让电脑随机选一个数字
secret_number = random.randint(1, 100)
attempts = 0

def guess_number(user_guess):
global secret_number, attempts
attempts += 1
if user_guess < secret_number:
return f"猜小了！再试一次（第{attempts}次）"
elif user_guess > secret_number:
return f"猜大了！再试一次（第{attempts}次）"
else:
result = f"🎉 恭喜你猜对了！就是{secret_number}，你用了{attempts}次。"
secret_number = random.randint(1, 100) # 重置游戏
attempts = 0
return result

# 创建交互界面
demo = gr.Interface(
fn=guess_number,
inputs=gr.Number(label="输入你的猜测（1-100）"),
outputs=gr.Textbox(label="反馈"),
title="猜数字小游戏"
)

demo.launch()
```
3）点击页面顶部的“Save”按钮，然后点“Restart”让代码跑起来。等几秒钟，你会看到一个网页界面，输入数字试试！

实用技巧：
- 国内访问Hugging Face慢？用 hf-mirror.com 这个镜像站，速度飞起。
- 代码里有个小彩蛋：猜对后会自动重置游戏，你可以一直玩。
- 如果想修改游戏范围，把代码里的 `random.randint(1, 100)` 改成其他数字就行。

这节课你学会了：搭建一个简单的交互游戏，理解“输入-反馈”机制。下一节我们给它加点“智能”，让它学会猜你的心思！

上一节我们做了个“猜数字”游戏，但那是你在猜电脑的数字。这节反过来，让电脑猜你心里想的数字！这才是真正的“机器学习”雏形——电脑通过你的反馈，不断调整自己的猜测策略。

核心思路：二分查找算法
这个算法就像“翻字典”：你想查一个字，如果直接翻到中间，发现偏旁不对，就扔掉一半，再翻剩下的一半……电脑猜数字也一样，每次从中间猜，根据“大了”或“小了”缩小范围。

第一步：升级我们的游戏代码
回到你的Space，打开“app.py”，把内容换成下面的代码：
```python
import gradio as gr

# 初始化游戏状态
low = 1
high = 100
guess = None
attempts = 0

def start_game():
global low, high, guess, attempts
low = 1
high = 100
guess = (low + high) // 2 # 取中间值
attempts = 0
return f"我想了一个1-100的数字，请告诉我：我的猜测是 {guess}，对吗？"

def give_feedback(feedback):
global low, high, guess, attempts
attempts += 1
if feedback == "大了":
high = guess - 1
elif feedback == "小了":
low = guess + 1
elif feedback == "猜对了":
return f"🎉 电脑用了 {attempts} 次猜对了！重新开始吧。"

if low > high:
return "你骗人！没有数字在这个范围了。重新开始吧。"
guess = (low + high) // 2
return f"我的新猜测是：{guess}。大了还是小了？"

# 创建界面
with gr.Blocks() as demo:
gr.Markdown("## 🤖 让AI猜你心中的数字")
start_btn = gr.Button("开始游戏")
output = gr.Textbox(label="电脑的反馈", value="点击开始游戏")
with gr.Row():
bigger_btn = gr.Button("大了")
smaller_btn = gr.Button("小了")
correct_btn = gr.Button("猜对了")

start_btn.click(fn=start_game, outputs=output)
bigger_btn.click(fn=give_feedback, inputs=gr.State("大了"), outputs=output)
smaller_btn.click(fn=give_feedback, inputs=gr.State("小了"), outputs=output)
correct_btn.click(fn=give_feedback, inputs=gr.State("猜对了"), outputs=output)

demo.launch()
```
2）保存并重启Space，你会看到一个更漂亮的界面：三个按钮（大了、小了、猜对了），点击“开始游戏”后，电脑会报出一个数字，你根据心里想的数字点击对应按钮。

第二步：理解机器学习的关键
这个游戏展示了机器学习的三个核心：
- 数据：你的每次反馈（大了/小了）就是训练数据。
- 模型：电脑的“猜测策略”就是模型，这里用的是二分法。
- 迭代：每次反馈后，电脑更新自己的“知识”（调整low和high的范围）。

虽然这还不是真正的神经网络，但原理相通：AI通过不断试错和反馈来优化自己的行为。

实用技巧：
- 试试看电脑最多需要猜几次？答案是7次（因为2^7=128 > 100）。这就是二分法的效率。
- 如果想增加难度，可以把范围改成1-1000，电脑也只需要10次就能猜中。
- 注意代码里的 `gr.State()`，它用来在按钮点击之间保存游戏状态，这是Gradio的高级用法。

现在你亲手做了一个“会学习”的AI！下一节，我们把游戏升级成真正的图像识别——让AI学会看手写数字。

这节我们来玩点酷的：让AI识别你手写的数字！你会在网页上画一个数字，AI立刻告诉你这是几。这背后用到了深度学习中的卷积神经网络（CNN），不过别怕，我们直接调用Hugging Face上现成的模型，你只需要10行代码就能搞定。

第一步：找一个现成的模型
Hugging Face上有成千上万的预训练模型，我们找一个专门识别手写数字的。打开Hugging Face模型库（同样用镜像站），搜索“mnist”或“手写数字”，你会看到很多模型。我们选一个简单好用的：`google/vit-base-patch16-224` ？不对，那个太大了。我们用 “keras-io/mnist-cnn”，专门为MNIST数据集训练的。

不过为了更简单，我们直接用一个更轻量的模型：`nateraw/vit-base-patch16-224` ？还是用 `microsoft/resnet-18`？算了，咱们用最经典的 “digit-recognizer” 模型，它在Hugging Face上叫 `keras-io/mnist-cnn`。

第二步：写一个“画板+识别”的应用
打开你的Space，新建一个文件，或者直接修改app.py。这次我们用Gradio的“画板”组件，让用户直接手写数字。

完整的代码（直接复制粘贴）：
```python
import gradio as gr
from transformers import pipeline
import numpy as np
from PIL import Image

# 加载预训练模型（第一次运行会下载，稍等片刻）
# 如果下载慢，可以设置环境变量使用镜像：export HF_ENDPOINT=https://hf-mirror.com
classifier = pipeline("image-classification", model="keras-io/mnist-cnn")

def recognize_digit(img):
# Gradio传来的图片是numpy数组，需要转成PIL图像并调整大小
if img is None:
return "请先画一个数字"
# 模型要求28x28的灰度图
img = Image.fromarray(img).convert('L').resize((28, 28))
# 用模型预测
results = classifier(img)
# 提取最可能的数字
top_result = results[0]
digit = top_result['label']
confidence = top_result['score']
return f"我猜是：{digit}（置信度：{confidence:.2%}）"

# 创建界面
demo = gr.Interface(
fn=recognize_digit,
inputs=gr.Sketchpad(label="在这里手写数字", shape=(280, 280)), # 画板大小
outputs=gr.Textbox(label="识别结果"),
title="🖊️ 手写数字识别器",
description="用鼠标或触屏写一个数字（0-9），AI会立刻告诉你它看到了什么。"
)

demo.launch()
```
2）保存并重启Space。你会看到一个画板，用鼠标在上面写个数字（比如“5”），点击“Submit”按钮，AI就会告诉你结果。

第三步：理解发生了什么
- 你画的图被缩放到28x28像素（MNIST数据集的标准尺寸）。
- 模型是一个CNN，它通过层层“卷积”提取笔画特征（比如横线、竖线、圆圈）。
- 最后输出10个数字的概率，选最高的那个作为答案。

试试看写一个“8”，置信度通常很高。写一个“3”和“8”的混合体，AI可能会混淆——这就是模型的局限性。

实用技巧：
- 如果模型下载慢，在代码开头加一行：`import os; os.environ['HF_ENDPOINT'] = 'https://hf-mirror.com'`
- 想提高识别率？写数字时尽量居中、笔画清晰，不要连笔。
- 你可以把模型换成其他手写识别模型，比如搜索“handwriting”找到更多选择。

这节课你亲手部署了一个图像识别AI！下一节，我们把学到的东西组合起来，做一个真正的“ML游戏”——用摄像头玩石头剪刀布！

最后一节，我们来做一个真正好玩的游戏：用摄像头和AI玩石头剪刀布！你只需要对着摄像头做出手势，AI就能识别出你出的是石头、剪刀还是布，然后电脑随机出一个，看谁赢。

这个项目会让你用到计算机视觉中最流行的技术之一：图像分类。我们会用Hugging Face上的一个手势识别模型，配合Gradio的摄像头输入，整个过程不到30行代码。

第一步：准备模型
在Hugging Face上搜索“rock-paper-scissors”或“hand gesture”，你会发现很多现成模型。我们用一个准确率不错的：“julien-c/rock-paper-scissors”。这个模型是基于MobileNet训练的，轻量且适合实时识别。

如果这个模型访问不了，可以用备用方案：`nateraw/rock-paper-scissors` 或自己训练一个（但那就超出本课程范围了）。

第二步：写游戏代码
新建一个Space，或者修改之前的app.py。这次我们用Gradio的 `gr.Image(source="webcam")` 来获取摄像头画面。

完整代码：
```python
import gradio as gr
import random
from transformers import pipeline
import numpy as np
from PIL import Image

# 加载手势识别模型（第一次运行下载）
# 如果慢，设置镜像：export HF_ENDPOINT=https://hf-mirror.com
gesture_classifier = pipeline("image-classification", model="julien-c/rock-paper-scissors")

# 游戏规则
rules = {
"rock": "scissors", # 石头赢剪刀
"scissors": "paper", # 剪刀赢布
"paper": "rock" # 布赢石头
}

def play_game(img):
if img is None:
return "请面对摄像头，做出手势！", ""

# 预处理图片：调整大小