Scratch指南
Scratch指南
目录
- 教小猫🐱认水果!
- Scratch 在线链接
- 训练注意事项
- AI编程课任务说明
- ai_student.sb3 项目分析
- Digital Lab - AI Summary
- ai_modified.bat.bak 启动脚本分析
- 同事的安装笔记
- Windows 本地安装 Scratch-GUI 和 ML2Scratch 指南
教小猫🐱认水果!
🎯 今天的任务
屏幕上有一只小猫🐱,但它不认识水果!你的任务是当它的老师,教会它分辨苹果🍎和香蕉🍌。
教得好的话,小猫就能自己认出新的水果哦!
📋 三步搞定
1️⃣ 教小猫认水果(当老师👨🏫)
- 拿苹果🍎图片对准摄像头(占满画面)→ 按
1- 小猫:”哦!这是苹果!我记住了!”
- 换个角度再按 **
1**,重复5次以上- 小猫:”让我从不同角度再看看…”
- 拿香蕉🍌图片对准摄像头 → 按 **
2**,同样重复5次以上- 小猫:”这个黄黄弯弯的是香蕉对吧!”
💡 教得越多,小猫学得越好!就像你背单词一样,多看几遍才记得牢~
2️⃣ 考考小猫(当考官📝)
- 拿一张没教过的水果图片对准摄像头
- 按
p→ 看小猫能不能说对!- 说对了 → 🎉 恭喜!你是个好老师!
- 说错了 → 🤔 可能需要多教几次
3️⃣ 保存成果(给小猫存档💾)
- 按
d保存 → 小猫的记忆被存下来了 - 下次按
u直接加载 → 小猫立刻想起来!
⌨️ 按键速查
| 按键 | 作用 | 小猫的反应 |
|---|---|---|
| 1 | 教小猫认苹果 🍎 | “记住了!” |
| 2 | 教小猫认香蕉 🍌 | “记住了!” |
| p | 开始考试! | “让我想想…” |
| 空格 | 停止考试 | “休息一下~” |
| a | 全部忘掉重来 | “啊?我什么都不记得了!” |
| d | 保存记忆 | “存档成功!” |
| u | 读取记忆 | “我想起来了!” |
⚠️ 注意
- ✅ 图片要占满整个画面(小猫近视👓,要看清楚)
- ❌ 不要让手指、背景出现在画面里(会干扰小猫)
- ✅ 考试要用没教过的图片(不然就是作弊啦😜)
🏆 挑战
- ⭐ 让小猫认对苹果和香蕉
- ⭐⭐ 试试绿苹果,小猫还认识吗?
- ⭐⭐⭐ 想想:怎样才能让小猫学得更准?
Scratch 在线链接
在线版(支持ML2Scratch机器学习)
在Windows电脑上运行Scratch,以管理员身份运行Powershell,运行指令:
1 | |
训练注意事项
快捷键:
| 按键 | 功能 |
|---|---|
| 1 | 学习苹果图片(标签1) |
| 2 | 学习香蕉图片(标签2) |
| p | 开启分类识别 |
| space | 关闭分类 + 清除画笔 |
| a | 清空所有训练数据 |
| u | 上传(加载)已保存的模型 |
| d | 下载(保存)当前模型 |
因为每类水果总共才各自6个,只训练6次估计会出错;所以每张图片要调整角度多训练几次
并且至少保证1张图片以前没有训练过,否则和我们的目的就不一致了
训练时保证水果图片充满舞台画面,没有其它的干扰像素进入,如手等
手,背景,爱立信图标都是干扰项
AI编程课任务说明
启动流程
- 鼠标右键点击运行桌面ai批处理文件,选择以管理员身份运行,启动scratch程序
- 等待大约1分钟,会自动打开浏览器的scratch界面(localhost:8601)
- 点击文件上传桌面的”AI课2025”里面的ai_student文件来进行编程(image文件是最终完成的课件)
课程任务
- 训练一个两个分类的图像分类模型,其中一个类别为苹果,另一个为香蕉
- 打开摄像头,让AI学习给定的图片,就是苹果和香蕉图形,并让模型学习该数据
- 经过训练后程序能够对摄像头里的新图片进行分类,并控制卡通人物正确说出舞台上的图形
- 保存训练的模型
- 调用保存的模型,直接进行图片识别
- 拓展任务:重新编写一个程序,控制画笔在舞台上绘制训练数据,如简笔画的苹果和香蕉图形(或者猫狗头像),并让模型学习该数据,其它部分同前面步骤c,d,e
- 如果有时间,尝试增加一个分类类别
程序目标以及功能键说明
- 使用摄像头来输入训练数据(或者用鼠标或者绘图板来绘制图像)
- 按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 角色代码逻辑
绿旗启动时
- 设置输入源为 webcam(摄像头)
- 开启摄像头
- 隐藏画笔角色
- 关闭分类模式
按键控制
| 按键 | 功能 |
|---|---|
| 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(-200
200), 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 开发服务器并自动打开浏览器。
脚本流程
- 检查管理员权限:如果没有管理员权限,自动以管理员身份重新启动自身
- 进入项目目录:
cd /d C:\Users\Digitallab\ai\scratch-gui - 启动 npm 服务:在新的 PowerShell 窗口中运行
npm start(窗口保持打开) - 等待服务就绪:先等待 60 秒,然后循环检测 localhost:8601 端口是否可用
- 打开浏览器:端口就绪后用 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 目录)
安装步骤
- 安装压缩包中的
node-v22.16.0-x64 - 以管理员身份运行 PowerShell,执行:输入
1
Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSignedY确认 - 验证安装:
npm -v(应显示版本号)
启动
1 | |
等待出现 webpack 5.99.9 compiled successfully 后,浏览器打开 http://localhost:8601
使用
- 文件 → 从电脑打开 → 选择
ai_student.sb3 - 按 1 训练苹果,按 2 训练香蕉
Windows 本地安装 Scratch-GUI 和 ML2Scratch 指南
本指南适用于 Windows 系统,帮助非技术人员在本地环境中安装 Scratch-GUI 及 ML2Scratch 扩展模块。请按照以下步骤依次操作,不要跳过任何步骤。
前期准备
在开始安装之前,请确认您的电脑上已经准备好以下文件和文件夹结构:
1 | |
⚡ 重要提示:PowerShell 执行权限设置
在 Windows 系统中,PowerShell 默认禁止执行脚本,运行
npm等工具时可能会遇到**”无法加载文件,因为在此系统上禁止运行脚本”的错误提示。
在正式安装之前,必须先以管理员身份开启脚本执行权限**。
方法一:临时提升权限(推荐,仅当次会话有效)
- 在 Windows 搜索栏中输入 PowerShell
- 右键点击 Windows PowerShell,选择 “以管理员身份运行”
- 在弹出的 PowerShell 窗口中输入以下命令:
1 | |
✅ 输入后按 Enter,若没有报错即设置成功。之后在同一个窗口中继续执行后续安装步骤。
方法二:永久修改执行权限(适合长期使用)
如果您希望以后每次打开 PowerShell 都不需要重复设置,可以使用此方法永久修改。
- 同样以 管理员身份 打开 PowerShell
- 输入以下命令:
1 | |
- 系统会提示您确认,输入
Y后按 Enter 确认
| 参数说明 | 含义 |
|---|---|
RemoteSigned |
允许运行本地脚本;从网络下载的脚本需要有数字签名才能运行 |
Bypass |
完全绕过限制,不建议长期使用 |
Restricted |
默认值,禁止所有脚本运行 |
⚠️ 注意:若公司电脑有 IT 管理策略,可能无法修改此设置,请联系 IT 人员协助处理。
验证权限是否设置成功
1 | |
STEP 0:安装必要的软件环境
在运行项目之前,需要先安装 Node.js 和 Git。这两个工具是运行 Scratch-GUI 的基础环境。
安装 Node.js
- 打开浏览器,访问 https://nodejs.org
- 下载 LTS(长期支持版本) 并按照提示完成安装
- 安装完成后,以管理员身份打开 PowerShell,输入以下命令验证安装是否成功:
1 | |
安装 Git
- 访问 https://git-scm.com 下载并安装 Git
- 安装完成后,在 PowerShell 中输入以下命令验证:
1 | |
STEP 1:克隆 Scratch-GUI 项目
此步骤将从 GitHub 上下载 Scratch-GUI 的源代码到您的本地电脑。
以管理员身份打开 PowerShell,依次输入以下命令:
1 | |
⚠️ 注意:克隆过程需要网络连接,请确保网络正常。如果下载速度较慢,请耐心等待。
STEP 2:复制配置文件并安装依赖
由于网络原因,部分文件需要从本地预先准备好的
scratch-gui-file文件夹中复制,以替代从网络下载的版本。
请确保您当前仍在 C:\Users\Digitallab\ai\scratch-gui 目录下,依次执行以下命令:
1 | |
⚠️ 注意:
npm install执行时间较长,请不要关闭 PowerShell 窗口,等待出现命令提示符>后再进行下一步。- 若出现权限错误,请确认 PowerShell 是以管理员身份运行的。
STEP 3:安装 ML5 机器学习依赖库
ML2Scratch 扩展依赖 ML5 这个机器学习库,需要单独安装。
1 | |
💡 提示:这里必须安装
ml5@0.12.2这个特定版本,不要随意更改版本号,否则可能导致功能异常。
STEP 4:安装 ML2Scratch 扩展模块
此步骤将把 ML2Scratch 的核心功能文件复制到对应位置,让 Scratch 能够识别并加载这个扩展。
1 | |
STEP 5:启动 Scratch-GUI
所有文件配置完成后,可以启动 Scratch-GUI 本地服务器,并在浏览器中访问。
1 | |
💡 提示:
- 启动过程需要约 1~3 分钟,请耐心等待,不要关闭 PowerShell 窗口。
- 当命令提示符中出现类似
Compiled successfully的提示后,打开浏览器。- 在浏览器地址栏输入:http://localhost:8601 即可访问 Scratch-GUI。
- 若需要在后台持续运行(关闭窗口后服务不中断),请参考下方说明。
后台持续运行(可选)
如果希望关闭 PowerShell 窗口后服务仍然继续运行,可以使用以下方式:
1 | |
⚠️ 注意:后台运行后,若需要停止服务,请打开任务管理器,找到
node.exe进程并结束任务。
常见问题
| 问题 | 可能原因 | 解决方法 |
|---|---|---|
npm 提示”无法加载文件,禁止运行脚本” |
PowerShell 执行权限不足 | 参考本文 “重要提示:PowerShell 执行权限设置” 章节 |
npm install 报错 |
Node.js 未正确安装 | 重新安装 Node.js 并验证版本 |
git clone 失败 |
网络连接问题 | 检查网络,或使用代理 |
浏览器无法访问 localhost:8601 |
服务器未成功启动 | 查看 PowerShell 中是否有报错信息 |
| 复制文件时提示”找不到路径” | 文件夹结构不正确 | 检查 scratch-gui-file 和 ml2scratch 是否放置在正确位置 |
| 修改执行权限时提示”访问被拒绝” | 没有以管理员身份运行 | 右键 PowerShell 选择”以管理员身份运行”后重试 |
✅ 安装完成! 如果您能在浏览器中看到 Scratch 编辑器界面,并且在扩展列表中找到 ML2Scratch,说明安装已成功完成。
pandoc 生成 HTML 备忘
基本命令
1 | |
打印时自适应页面宽度(不影响屏幕显示)
通过 -H 参数注入 CSS:
1 | |
原理:@media print 只在打印时生效,将 max-width 设为 100% 让内容铺满纸张宽度,屏幕上仍保持默认的 36em 居中布局。
自定义字号和宽度
1 | |
让 URL 可点击
md 中的链接用尖括号包裹:<https://example.com/>
夜间模式切换按钮
创建一个 header 文件(如 /tmp/darkmode.html):
1 | |
然后用 -H 注入:
1 | |
原理:
-H将文件内容插入<head>末尾- 按钮用
position: fixed固定在右上角 - 点击时给
<body>切换darkclass,CSS 根据 class 改变配色 localStorage记住用户选择,刷新后自动恢复