生成式人工智能：数字涂鸦App

生成式人工智能：数字涂鸦App

挑战任务

数字涂鸦应用（Digital Doodle App）支持用户在手机屏幕上作画。搭配生成式 AI 工具后，用户可以调用 AI 模型生成背景图，在这张背景图上进行手绘创作。

一、设置

1. 开始上手

如果你需要 App Inventor 的入门搭建帮助，请访问「App Inventor 环境搭建」页面。

2. 使用 Neo 界面

本教程将使用 App Inventor Neo 界面，该界面视觉风格更加现代化。

切换至 Neo 界面操作步骤：

• 进入项目空间，点击顶部菜单栏【设置】，选择【用户界面设置】。
  
• 选中【Neo切换到新布局】界面选项，点击【确定】。
  
  

3. 获取自己的专属OpenAI API密钥

可以参见这个课程系列的其他帖子如简单ImageBot App，方法步骤完全一样。

4. 更新 AI2 伴侣（MIT AI2 Companion）

若尚未操作，请将 AI2 伴侣升级至 2.69 版本及以上。

1) 三种升级实操方法

方法 1：应用商店更新（谷歌 Play）

安卓手机打开 Google Play 商店，搜索 MIT AI2 Companion，点击更新即可。

方法 2：官网扫码直装（最常用）

• 在 App Inventor 网页编辑器右上角点开 帮助（Help）
• 选择 Companion Information（伴侣信息）
• 用手机旧版 AI 伴侣扫描页面二维码，自动下载安装新版 APK

方法 3：手动下载安装包

• 官方直链下载 APK：
  https://ai2.appinventor.mit.edu/companions/MITAI2Companion.apk
• 下载后在手机安装，覆盖旧版本即可，安装完成重启 APP 生效。

2) 补充提示

当前最新稳定版已经到 2.79，直接升级最新版兼容性更好，完美适配新版 App Inventor 编辑器所有组件与扩展插件。

5. 熟悉 App Inventor 界面布局

你当前看到的页面是设计视图（Design）。

• 屏幕左侧（红色框标注区域）是组件面板（Palette），里面分为多个分类抽屉，存放着可以添加到应用里的各类功能组件。
• 屏幕中间（绿色框标注区域）是工作面板（Viewer），模拟空白手机屏幕，我们在此搭建应用的用户界面（UI）。
• 屏幕右侧（蓝色框标注区域）是组件属性（Properties），可以对每一个添加的组件修改具体参数与特性。

花几分钟点开各个分类抽屉，浏览熟悉一下里面的组件即可。

二、生成式 AI 数字涂鸦应用制作教程

（难度：初级入门）

1. 数字涂鸦界面搭建

• 开始制作应用：打开屏幕左侧「绘图动画（Drawing and Animation）」折叠分类栏，将 Canvas（画布） 组件拖拽到中间的手机模拟屏幕上。
  
  
• 在右侧属性面板中，把画布的高度（Height）和宽度（Width）都设置为 Fill Parent（充满）。
  
• 点击页面右上角的 Blocks（代码块） 按钮，进入代码编辑页面。我们将在代码块页面编写应用的各项功能逻辑。
  
  

2. 数字涂鸦代码编写

在界面左侧，可以看到各类代码积木的分类抽屉，编写程序就要用到这些积木。界面剩余区域就是你的代码编辑工作区。

• 点击左侧的 Canvas1（画布 1），把 when Canvas1.Dragged（当画布 1 被拖动时）积木拖拽到工作区中。
  
  
• 同样在 Canvas1 分类下找到 call Canvas1.DrawLine（调用画布 1 画直线）积木，拖出来嵌套放进刚才的拖动触发积木内部。
  
  
• 在绘制直线积木里，x1、y1、x2、y2 全部代表像素坐标位置。画布可以理解成一张巨大的坐标系，每一个像素点都用一组 (x,y) 坐标来定位。任意一条曲线，本质都是无数小段直线拼接而成。
• 将 x1、y1、x2、y2 依次赋值为 prevX、prevY、currX、currY。操作方法：鼠标悬停在 when Canvas1.Dragged 积木里自带的这几个变量上，直接拖拽对应变量填入对应位置。

说明

startX 和 startY 记录的是用户第一次触碰画布的起始坐标。虽说使用这组变量也能画出图形，但无法实现随心所欲自由手绘的效果。

完成以上操作后，你的代码积木结构就会和下方示例保持一致。

3. 连接 AI2 调试伴侣

接下来我们在手机真机上测试代码！请确保手机已经安装好了 MIT AI2 Companion 应用。

• 连接手机操作：点击页面顶部居中的**Connect（连接）**按钮，选择 AI Companion（AI 伴侣）。
  
  
• 页面会弹出一个二维码。打开手机上的 AI2 Companion 软件，点击「扫描二维码」，编写好的应用就会同步加载到手机上。
• 现在可以测试app了，你已经能够在手机屏幕上手动画图。思考一下当前这个版本存在哪些问题？能不能清空画布涂鸦？能不能更换画笔颜色？

4. 增加加速度传感器

如果想要拓展应用更多功能，接下来就开始进阶改造吧，我们继续添加新组件。

下一步为项目添加 加速度传感器（AccelerometerSensor），实现摇晃手机自动擦除画布涂鸦的效果。

• 点击页面右上角的 Designer（组件设计） 按钮，返回设计界面。
  
• 在设计界面中打开 Sensors（传感器） 组件抽屉，将 AccelerometerSensor（加速度传感器） 拖拽到手机模拟区域。
  

注意：这个组件不会显示在手机预览界面上，请查看模拟器下方区域，能看到它归类为非可视组件（Non-visible component）。

• 再次切换回到 Blocks 逻辑设计代码块界面。
• 在左侧组件栏点开 AccelerometerSensor1，拖拽 when AccelerometerSensor1.Shaking（当加速度传感器1.被摇晃）事件积木到工作区。
  
  
• 再找到 Canvas1 分类里的 call Canvas1.Clear（调用画布1.清除全部）积木，嵌套放入摇晃事件积木内部。
  
  
• 完成后，你的积木结构就和参考示例一致了。
  
  
• 再次用 AI2 伴侣连接手机进行测试，摇晃手机，画布的涂鸦是否一键清空了？

5. 彩色墨水按钮界面 UI

再次切换回到界面设计界面。

• 在**界面布局（Layout）组件栏中，在工作面板中画布（Canvas）下方拖拽放置一个HorizontalArrangement（水平布局）**组件。
  
• 将水平布局的**宽度（Width）**属性设置为 Fill Parent（充满），水平对齐（AlignHorizontal）选择居中 Center:3。
  

• 在**用户界面（User Interface）**组件栏里，往刚才的水平布局内拖拽添加一个 Button（按钮）。
  

• 在 Screen1 面板下选中 Button1，点击重命名（Rename），改名为 BlackButton。
  

• 在属性面板中：

  • 背景颜色（Background Color）设为黑色；宽度（Width）设为 20 百分比。
    
  • BlackButton 的显示文字（Text）输入 Black；文字颜色（TextColor）设为黄色。
    
  • 重复上述操作三次，依次创建红色、蓝色、绿色按钮。记得逐个重命名，避免混淆。完成后你的界面效果就和示例一致了。