Scratch指南

Scratch指南


目录


教小猫🐱认水果!

⬆️ 回到顶部

🎯 今天的任务

屏幕上有一只小猫🐱,但它不认识水果!你的任务是当它的老师,教会它分辨苹果🍎和香蕉🍌。

教得好的话,小猫就能自己认出新的水果哦!


📋 三步搞定

1️⃣ 教小猫认水果(当老师👨‍🏫)

  • 苹果🍎图片对准摄像头(占满画面)→ 按 1
    • 小猫:”哦!这是苹果!我记住了!”
  • 换个角度再按 **1**,重复5次以上
    • 小猫:”让我从不同角度再看看…”
  • 香蕉🍌图片对准摄像头 → 按 **2**,同样重复5次以上
    • 小猫:”这个黄黄弯弯的是香蕉对吧!”

💡 教得越多,小猫学得越好!就像你背单词一样,多看几遍才记得牢~

2️⃣ 考考小猫(当考官📝)

  • 拿一张没教过的水果图片对准摄像头
  • p → 看小猫能不能说对!
    • 说对了 → 🎉 恭喜!你是个好老师!
    • 说错了 → 🤔 可能需要多教几次

3️⃣ 保存成果(给小猫存档💾)

  • d 保存 → 小猫的记忆被存下来了
  • 下次按 u 直接加载 → 小猫立刻想起来!

⌨️ 按键速查

按键 作用 小猫的反应
1 教小猫认苹果 🍎 “记住了!”
2 教小猫认香蕉 🍌 “记住了!”
p 开始考试! “让我想想…”
空格 停止考试 “休息一下~”
a 全部忘掉重来 “啊?我什么都不记得了!”
d 保存记忆 “存档成功!”
u 读取记忆 “我想起来了!”

⚠️ 注意

  • ✅ 图片要占满整个画面(小猫近视👓,要看清楚)
  • ❌ 不要让手指、背景出现在画面里(会干扰小猫)
  • ✅ 考试要用没教过的图片(不然就是作弊啦😜)

🏆 挑战

  • ⭐ 让小猫认对苹果和香蕉
  • ⭐⭐ 试试绿苹果,小猫还认识吗?
  • ⭐⭐⭐ 想想:怎样才能让小猫学得更准?

Scratch 在线链接

⬆️ 回到顶部

在线版(支持ML2Scratch机器学习)

在Windows电脑上运行Scratch,以管理员身份运行Powershell,运行指令:

1
2
cd C:\Users\Digitallab\ai\scratch-gui
npm start

训练注意事项

⬆️ 回到顶部

快捷键:

按键 功能
1 学习苹果图片(标签1)
2 学习香蕉图片(标签2)
p 开启分类识别
space 关闭分类 + 清除画笔
a 清空所有训练数据
u 上传(加载)已保存的模型
d 下载(保存)当前模型

因为每类水果总共才各自6个,只训练6次估计会出错;所以每张图片要调整角度多训练几次

并且至少保证1张图片以前没有训练过,否则和我们的目的就不一致了

训练时保证水果图片充满舞台画面,没有其它的干扰像素进入,如手等

手,背景,爱立信图标都是干扰项

AI编程课任务说明

⬆️ 回到顶部

启动流程

  • 鼠标右键点击运行桌面ai批处理文件,选择以管理员身份运行,启动scratch程序
  • 等待大约1分钟,会自动打开浏览器的scratch界面(localhost:8601)
  • 点击文件上传桌面的”AI课2025”里面的ai_student文件来进行编程(image文件是最终完成的课件)

课程任务

  1. 训练一个两个分类的图像分类模型,其中一个类别为苹果,另一个为香蕉
  2. 打开摄像头,让AI学习给定的图片,就是苹果和香蕉图形,并让模型学习该数据
  3. 经过训练后程序能够对摄像头里的新图片进行分类,并控制卡通人物正确说出舞台上的图形
  4. 保存训练的模型
  5. 调用保存的模型,直接进行图片识别
  6. 拓展任务:重新编写一个程序,控制画笔在舞台上绘制训练数据,如简笔画的苹果和香蕉图形(或者猫狗头像),并让模型学习该数据,其它部分同前面步骤c,d,e
  7. 如果有时间,尝试增加一个分类类别

程序目标以及功能键说明

  • 使用摄像头来输入训练数据(或者用鼠标或者绘图板来绘制图像)
  • 按1键学习分类标签1
  • 按2键学习分类标签2
  • 按 p键开启分类
  • 按a键清空所有训练数据
  • 按u/d键上传或者下载分类数据

人员分工

训练过程

  • 同学1号负责整个训练流程:分发训练数据,拿着所有的数据,依次传递给同学二,并确保测试集和验证集的数据不能混入训练集
  • 同学2号负责数据增强和输入-举着图片对准摄像头,并调整角度增强数据
  • 同学3号负责训练任务– 按照举着的图片标签来按下相应的数字键
  • 同学4号负责反馈训练结果-观察标签栏的变化,看对应标签的训练次数是否增加

验证和测试过程

  • 同学1号负责整个训练流程:分发测试数据,拿着所有的数据,依次传递给同学二,并确保训练集的数据不能混入验证集和测试集
  • 同学2号负责数据输入和调整-举着图片对准摄像头,并调整角度看是否能够识别
  • 同学3号负责分类任务 – 按照举着的图片标签来按下p键开启分类(按空格键关闭分类)
  • 同学4号负责反馈测试结果-看卡通人物是否正确的认出了给出的图片

拓展任务

完整代码见image.sb3文件


ai_student.sb3 项目分析

⬆️ 回到顶部

项目结构

  • **舞台 (Stage)**:背景1,无代码
  • Pencil 角色(画笔):负责训练控制逻辑
  • Cat 角色(卡通猫):负责识别结果反馈

Pencil 角色代码逻辑

绿旗启动时

  1. 设置输入源为 webcam(摄像头)
  2. 开启摄像头
  3. 隐藏画笔角色
  4. 关闭分类模式

按键控制

按键 功能
1 将当前摄像头画面作为标签1(苹果)的训练样本
2 将当前摄像头画面作为标签2(香蕉)的训练样本
p 开启分类模式
space 关闭分类模式 + 清除画笔
a 清空所有训练数据
u 上传(加载)已保存的模型
d 下载(保存)当前模型

Cat 角色代码逻辑

  • 当收到分类结果为标签1时:说”是苹果”2秒,然后关闭分类
  • 当收到分类结果为标签2时:说”是香蕉”2秒,然后关闭分类

ai_student.json 分析

这是 ML2Scratch 导出的训练模型数据文件,包含:

  • dataset:2个分类标签
    • 标签”1”(苹果):8个训练样本,每个样本为256维特征向量
    • 标签”2”(香蕉):3个训练样本,每个样本为256维特征向量
  • tensors:所有样本的特征向量数据(MobileNet提取的图像特征)

说明这个模型用苹果图片训练了8次,香蕉图片训练了3次。


Digital Lab - AI Summary (AI模型训练和使用)

⬆️ 回到顶部

本节课主要学习内容

  • 了解AI训练数据
  • 认识AI训练模块
  • 动手AI训练实践:
    • 配置AI训练的环境和代码
    • 训练图像识别模型
    • 使用训练的模型控制角色行为
    • 学会保存和加载训练好的模型
  • 拓展项目:训练一个新的识别自己绘制简笔画的图像识别模型

AI的三个必要条件

  • 计算机
  • 数据
  • 算法(算力)

流程:数据准备 → 数据标注 → 模型训练 → 验证调整

准备数据:认识数据的重要性

  • 数据就是我们让AI学习的”例子”
  • 好的数据像清晰的课本;坏的数据像模糊的照片或写错答案的练习册
  • 今天任务的数据是图像:清晰、正确、种类多 = 好数据!

编程工具:Scratch

  • 舞台:X(-200200), Y(-150150),中心为(0,0)
  • 角色、编程区、控制命令分类标签、可调用算法模块
  • AI命令标签和AI算法模块(网页版):环境配置、模型训练、模型使用、保存/加载、标签类型和数量

任务1:配置AI训练的环境和代码

为画笔角色添加代码块:

  • 设立学习目标:图像分类任务,学习摄像头的图像
  • 开启摄像头
  • 在模型训练完成之前,先关闭分类任务

按照定义的数据标签训练AI模型:

  • 按下1键:AI模型对摄像头拍摄的标签1数据完成一次学习
  • 按下2键:AI模型对摄像头拍摄的标签2数据完成一次学习
  • 按下a键:清空所有的学习数据
  • 按下p键:开启分类模式

为卡通人物添加代码:

  • 当AI模型分辨出标签是1,卡通人物说苹果2秒
  • 当AI模型分辨出标签是2,卡通人物说香蕉2秒

任务2:训练AI模型

训练过程:

  • 选一个红苹果图片,用各种角度(正对、旋转、倾斜)训练3到5次
  • 选一个香蕉图片,用各种角度训练3到5次
  • 依次再取下一张图片来进行训练
  • 注意先不取绿苹果和切开的苹果来训练
  • 误操作时按a键清空数据重新训练
  • 训练时要把图片充满整个摄像头画面,不要让画面中夹入人手或其它背景图像

中间检验:

  • 选取没有训练过的红苹果和香蕉分别让AI识别
  • 选取没有训练过的绿苹果和香蕉分别让AI识别
  • 调整角度看是否还能正确识别
  • 思考:如果不能正确识别,该怎么做?

任务3:检验模型训练结果

最终测试:

  • 将没有训练过的苹果图像对准摄像头,按p键,看卡通人物是否正确说出水果名称
  • 将没有训练过的香蕉图像对准摄像头,按p键,看卡通人物是否正确说出水果名称
  • 思考:用既有苹果又有香蕉的图片测试会有什么结果?怎样提高辨别准确率?

任务4:保存和加载训练数据

  • 保存训练模型:d键
  • 加载保存的模型:u键
  • 清空训练数据:a键
  • 思考:日常生活中接触的AI,是已经加载好了训练完成的模型还是在训练的模型?那些非常厉害的模型的数据来自于哪里?

拓展任务:训练简笔画识图模型

配置:

  • 设立学习目标:图像分类任务,学习舞台上的图像
  • 设置画笔的粗细和颜色
  • 使用鼠标指针来控制画笔在舞台上绘画

训练:

  • 在舞台上绘制苹果,按1键,模型对标签1完成一次学习
  • 在舞台上绘制香蕉,按2键,模型对标签2完成一次学习
  • 重复操作直到模型完成足够轮次的学习(大于10次)

测试:

  • 绘制苹果按c键,看卡通人物是否正确说出水果名称
  • 绘制香蕉按c键,看卡通人物是否正确说出水果名称

挑战:修改代码让模型再多识别一种水果

总结

  • 了解AI模型的生成过程:准备数据 → 模型训练 → 模型使用
  • 利用今天学到的知识,训练一个更有趣的模型

ai_modified.bat.bak 启动脚本分析

⬆️ 回到顶部

这是一个 Windows 批处理脚本,用于一键启动 Scratch-GUI 开发服务器并自动打开浏览器。

脚本流程

  1. 检查管理员权限:如果没有管理员权限,自动以管理员身份重新启动自身
  2. 进入项目目录cd /d C:\Users\Digitallab\ai\scratch-gui
  3. 启动 npm 服务:在新的 PowerShell 窗口中运行 npm start(窗口保持打开)
  4. 等待服务就绪:先等待 60 秒,然后循环检测 localhost:8601 端口是否可用
  5. 打开浏览器:端口就绪后用 Chrome 打开 http://localhost:8601

关键技术点

  • net session >nul 2>&1 用于检测是否有管理员权限
  • powershell -Command "Start-Process '%~f0' -Verb RunAs" 实现自提权
  • start powershell -NoExit -Command "npm start" 在独立窗口启动服务,不阻塞当前脚本
  • ping -n 60 127.0.0.1 > nul 利用 ping 实现延时等待(约60秒)
  • 端口检测使用 PowerShell 的 Net.Sockets.TcpClient 尝试连接 localhost:8601

同事的安装笔记

⬆️ 回到顶部

前提

ai.zip 解压到 C:\Users\Digitallab\路径必须正确,解压后应存在 C:\Users\Digitallab\ai\scratch-gui 目录)

安装步骤

  1. 安装压缩包中的 node-v22.16.0-x64
  2. 管理员身份运行 PowerShell,执行:
    1
    Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSigned
    输入 Y 确认
  3. 验证安装:npm -v(应显示版本号)

启动

1
2
cd C:\Users\Digitallab\ai\scratch-gui
npm start

等待出现 webpack 5.99.9 compiled successfully 后,浏览器打开 http://localhost:8601

使用

  1. 文件 → 从电脑打开 → 选择 ai_student.sb3
  2. 按 1 训练苹果,按 2 训练香蕉

Windows 本地安装 Scratch-GUI 和 ML2Scratch 指南

⬆️ 回到顶部

本指南适用于 Windows 系统,帮助非技术人员在本地环境中安装 Scratch-GUI 及 ML2Scratch 扩展模块。请按照以下步骤依次操作,不要跳过任何步骤。


前期准备

在开始安装之前,请确认您的电脑上已经准备好以下文件和文件夹结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
C:\Users\Digitallab\ai\
├── scratch-gui\ ← 从 GitHub 克隆下来的 scratch-gui 项目
├── scratch-gui-file\ ← 预先准备好的配置文件包
│ ├── prepublish.mjs
│ ├── index.jsx
│ ├── extension-manager.js
│ └── microbit\
│ └── scratch-microbit-1.2.0.hex
└── ml2scratch\ ← ml2scratch 扩展模块包
├── scratch-vm\
│ └── src\extensions\scratch3_ml2scratch\
│ └── index.js
└── scratch-gui\
└── src\lib\libraries\extensions\ml2scratch\
├── ml2scratch.png
└── ml2scratch-small.png

⚡ 重要提示:PowerShell 执行权限设置

在 Windows 系统中,PowerShell 默认禁止执行脚本,运行 npm 等工具时可能会遇到**”无法加载文件,因为在此系统上禁止运行脚本”的错误提示。
在正式安装之前,
必须先以管理员身份开启脚本执行权限**。

方法一:临时提升权限(推荐,仅当次会话有效)

  1. 在 Windows 搜索栏中输入 PowerShell
  2. 右键点击 Windows PowerShell,选择 “以管理员身份运行”
  3. 在弹出的 PowerShell 窗口中输入以下命令:
1
2
3
# 仅对当前 PowerShell 会话临时开放脚本执行权限
# 关闭窗口后自动恢复原有限制,较为安全
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

✅ 输入后按 Enter,若没有报错即设置成功。之后在同一个窗口中继续执行后续安装步骤。


方法二:永久修改执行权限(适合长期使用)

如果您希望以后每次打开 PowerShell 都不需要重复设置,可以使用此方法永久修改。

  1. 同样以 管理员身份 打开 PowerShell
  2. 输入以下命令:
1
2
# 永久允许运行本地脚本(对所有用户生效)
Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSigned
  1. 系统会提示您确认,输入 Y 后按 Enter 确认
参数说明 含义
RemoteSigned 允许运行本地脚本;从网络下载的脚本需要有数字签名才能运行
Bypass 完全绕过限制,不建议长期使用
Restricted 默认值,禁止所有脚本运行

⚠️ 注意:若公司电脑有 IT 管理策略,可能无法修改此设置,请联系 IT 人员协助处理。


验证权限是否设置成功

1
2
3
4
# 查看当前执行策略
Get-ExecutionPolicy

# 若返回 RemoteSigned 或 Bypass,说明设置成功

STEP 0:安装必要的软件环境

在运行项目之前,需要先安装 Node.jsGit。这两个工具是运行 Scratch-GUI 的基础环境。

安装 Node.js

  1. 打开浏览器,访问 https://nodejs.org
  2. 下载 LTS(长期支持版本) 并按照提示完成安装
  3. 安装完成后,以管理员身份打开 PowerShell,输入以下命令验证安装是否成功:
1
2
node -v   # 应显示 Node.js 版本号,例如 v18.x.x
npm -v # 应显示 npm 版本号,例如 9.x.x

安装 Git

  1. 访问 https://git-scm.com 下载并安装 Git
  2. 安装完成后,在 PowerShell 中输入以下命令验证:
1
git --version   # 应显示 git 版本号

STEP 1:克隆 Scratch-GUI 项目

此步骤将从 GitHub 上下载 Scratch-GUI 的源代码到您的本地电脑。

管理员身份打开 PowerShell,依次输入以下命令:

1
2
3
4
5
6
7
8
# 进入工作目录
cd C:\Users\Digitallab\ai

# 从 GitHub 克隆 scratch-gui 项目
git clone https://github.com/scratchfoundation/scratch-gui.git

# 进入 scratch-gui 目录
cd scratch-gui

⚠️ 注意:克隆过程需要网络连接,请确保网络正常。如果下载速度较慢,请耐心等待。


STEP 2:复制配置文件并安装依赖

由于网络原因,部分文件需要从本地预先准备好的 scratch-gui-file 文件夹中复制,以替代从网络下载的版本。

请确保您当前仍在 C:\Users\Digitallab\ai\scratch-gui 目录下,依次执行以下命令:

1
2
3
4
5
6
7
8
9
10
11
12
# 创建存放 microbit 文件所需的文件夹
mkdir .\static
mkdir .\static\microbit

# 复制预置的构建脚本文件
copy ..\scratch-gui-file\prepublish.mjs scripts\prepublish.mjs

# 复制 microbit 的固件文件
copy ..\scratch-gui-file\microbit\scratch-microbit-1.2.0.hex .\static\microbit\

# 安装项目所需的所有依赖包(此过程可能需要几分钟,请耐心等待)
npm install

⚠️ 注意

  • npm install 执行时间较长,请不要关闭 PowerShell 窗口,等待出现命令提示符 > 后再进行下一步。
  • 若出现权限错误,请确认 PowerShell 是以管理员身份运行的。

STEP 3:安装 ML5 机器学习依赖库

ML2Scratch 扩展依赖 ML5 这个机器学习库,需要单独安装。

1
2
3
4
5
6
7
8
# 进入 scratch-vm 子目录
cd node_modules\scratch-vm

# 安装指定版本的 ml5 机器学习库
npm install ml5@0.12.2

# 安装完成后,返回 scratch-gui 根目录
cd ..\..

💡 提示:这里必须安装 ml5@0.12.2 这个特定版本,不要随意更改版本号,否则可能导致功能异常。


STEP 4:安装 ML2Scratch 扩展模块

此步骤将把 ML2Scratch 的核心功能文件复制到对应位置,让 Scratch 能够识别并加载这个扩展。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 创建 ml2scratch 扩展的目录
mkdir node_modules\scratch-vm\src\extensions\scratch3_ml2scratch

# 复制 ml2scratch 的核心逻辑文件
copy .\ml2scratch\scratch-vm\src\extensions\scratch3_ml2scratch\index.js .\node_modules\scratch-vm\src\extensions\scratch3_ml2scratch\

# 备份原始的扩展管理器文件(以防需要还原)
copy node_modules\scratch-vm\src\extension-support\extension-manager.js node_modules\scratch-vm\src\extension-support\extension-manager.js_orig

# 创建 ml2scratch 图标资源目录
mkdir .\src\lib\libraries\extensions\ml2scratch

# 复制 ml2scratch 的图标文件
copy .\ml2scratch\scratch-gui\src\lib\libraries\extensions\ml2scratch\ml2scratch.png .\src\lib\libraries\extensions\ml2scratch\
copy .\ml2scratch\scratch-gui\src\lib\libraries\extensions\ml2scratch\ml2scratch-small.png .\src\lib\libraries\extensions\ml2scratch\

# 备份原始的扩展列表文件
copy src\lib\libraries\extensions\index.jsx src\lib\libraries\extensions\index.jsx_orig

# 用预置的扩展列表文件替换原始文件(此文件中已包含 ml2scratch 的注册信息)
copy ..\scratch-gui-file\index.jsx src\lib\libraries\extensions\index.jsx

# 用预置的扩展管理器替换原始文件(此文件中已包含 ml2scratch 的加载逻辑)
copy ..\scratch-gui-file\extension-manager.js node_modules\scratch-vm\src\extension-support\extension-manager.js

STEP 5:启动 Scratch-GUI

所有文件配置完成后,可以启动 Scratch-GUI 本地服务器,并在浏览器中访问。

1
2
3
4
5
# 确保当前在 scratch-gui 目录下
cd C:\Users\Digitallab\ai\scratch-gui

# 启动开发服务器
npm start

💡 提示

  • 启动过程需要约 1~3 分钟,请耐心等待,不要关闭 PowerShell 窗口。
  • 当命令提示符中出现类似 Compiled successfully 的提示后,打开浏览器。
  • 在浏览器地址栏输入:http://localhost:8601 即可访问 Scratch-GUI。
  • 若需要在后台持续运行(关闭窗口后服务不中断),请参考下方说明。

后台持续运行(可选)

如果希望关闭 PowerShell 窗口后服务仍然继续运行,可以使用以下方式:

1
2
# 使用 Start-Process 在后台独立运行 npm start
Start-Process -FilePath "npm" -ArgumentList "start" -WorkingDirectory "C:\Users\Digitallab\ai\scratch-gui" -WindowStyle Hidden

⚠️ 注意:后台运行后,若需要停止服务,请打开任务管理器,找到 node.exe 进程并结束任务。


常见问题

问题 可能原因 解决方法
npm 提示”无法加载文件,禁止运行脚本” PowerShell 执行权限不足 参考本文 “重要提示:PowerShell 执行权限设置” 章节
npm install 报错 Node.js 未正确安装 重新安装 Node.js 并验证版本
git clone 失败 网络连接问题 检查网络,或使用代理
浏览器无法访问 localhost:8601 服务器未成功启动 查看 PowerShell 中是否有报错信息
复制文件时提示”找不到路径” 文件夹结构不正确 检查 scratch-gui-fileml2scratch 是否放置在正确位置
修改执行权限时提示”访问被拒绝” 没有以管理员身份运行 右键 PowerShell 选择”以管理员身份运行”后重试

安装完成! 如果您能在浏览器中看到 Scratch 编辑器界面,并且在扩展列表中找到 ML2Scratch,说明安装已成功完成。


pandoc 生成 HTML 备忘

基本命令

1
pandoc input.md -o output.html --standalone -V pagetitle="页面标题"

打印时自适应页面宽度(不影响屏幕显示)

通过 -H 参数注入 CSS:

1
2
pandoc input.md -o output.html --standalone -V pagetitle="标题" \
-H <(echo '<style>@media print { body { max-width: 100%; } }</style>')

原理:@media print 只在打印时生效,将 max-width 设为 100% 让内容铺满纸张宽度,屏幕上仍保持默认的 36em 居中布局。

自定义字号和宽度

1
-H <(echo '<style>body { font-size: 22px; max-width: 50em; }</style>')

让 URL 可点击

md 中的链接用尖括号包裹:<https://example.com/>

夜间模式切换按钮

创建一个 header 文件(如 /tmp/darkmode.html):

1
2
3
4
5
6
7
8
9
10
11
12
<style>
@media print { body { max-width: 100%; } }
body.dark { background: #1a1a2e; color: #e0e0e0; }
body.dark a { color: #6db3f2; }
body.dark code { background: #2d2d44; }
body.dark pre { background: #2d2d44; }
body.dark th, body.dark td { border-color: #444; }
#dark-toggle { position: fixed; top: 10px; right: 10px; padding: 8px 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 5px; background: #f0f0f0; font-size: 14px; z-index: 999; }
body.dark #dark-toggle { background: #333; border-color: #555; color: #eee; }
</style>
<button id="dark-toggle" onclick="document.body.classList.toggle('dark'); localStorage.setItem('dark', document.body.classList.contains('dark'))">🌙 夜间模式</button>
<script>if(localStorage.getItem('dark')==='true') document.body.classList.add('dark');</script>

然后用 -H 注入:

1
pandoc input.md -o output.html --standalone -V pagetitle="标题" -H /tmp/darkmode.html

原理:

  • -H 将文件内容插入 <head> 末尾
  • 按钮用 position: fixed 固定在右上角
  • 点击时给 <body> 切换 dark class,CSS 根据 class 改变配色
  • localStorage 记住用户选择,刷新后自动恢复

Scratch指南
https://czi.pages.dev/2026-05-24-scratch-note/
作者
chuanzi
发布于
2026年5月24日
许可协议