查看: 46|回复: 0

[AI2+IoT] ImageBot 教程：想象、描述、生成与分享 ## 挑战

[复制链接]

你是否想过，如何制作一款能够生成天马行空创意图像的 AI 应用？

在本教程中，你将使用 MIT App Inventor 搭建一款简易应用。该应用支持接入 OpenAI 的 DALL-E 生成式 AI 模型，用户输入文字提示词，即可由 AI 生成充满艺术感的图像。

一、设置1. 获取专属 OpenAI API 密钥

本项目需要你申请个人 OpenAI API 密钥，才能在 MIT App Inventor 中使用 ImageBot 组件。按照下面步骤注册 OpenAI 账号并获取 API 密钥。

注意：撰写本教程时，OpenAI 允许13 周岁及以上用户注册账号并生成 API 密钥，注册使用需要绑定信用卡。

访问官网：https://openai.com/
点击页面右上角【注册（Sign up）】
填写邮箱、设置密码完成注册；也可直接使用谷歌账号、微软账号、Apple 账号快捷注册。
注册流程中，需要完成邮箱验证与手机号验证。
获取个人 OpenAI API 密钥步骤：访问地址：https://platform.openai.com/account/api-keys
切换到【API keys（API 密钥）】栏目，点击【Create new secret key（创建新密钥）】
（可选）为密钥自定义名称
复制密钥并妥善保存到电脑，开发项目过程中需要使用该密钥。

二、Imagebot教程1. 概述

在本教程中，你将学习使用 App Inventor 的 ImageBot 组件，开发一款应用，用户可以借助 OpenAI 的 DALL-E 生成图片。应用运行流程如下：

选择图片分辨率
语音说出提示词，发送至 OpenAI
点击生成按钮
OpenAI 生成图片并展示在应用内；你可以使用相同提示词反复重新生成图片，直到获得满意效果
点击分享按钮，将图片发送至社交平台好友，或是发送邮件给自己
重置界面，重新开始创作！

2. 用户界面（UI）

本项目大部分用户界面已经预先搭建完成。请熟悉界面内各类组件（大部分组件直观易懂）。你可能不太熟悉 Spinner（下拉选择框） 组件：在本应用中，它作为下拉菜单，供用户选择想要生成图片的分辨率。

请将以下不可视组件拖拽添加到项目中：

Notifier（对话框）：位于【用户界面】组件分类
ImageBot：位于【试验性质】组件分类
Sharing（信息分享器）：位于【社交应用】组件分类
SpeechRecognizer（语音识别器）：位于【多媒体】组件分类

最终图形界面效果参考下图。（提示：预览窗口中，你可能需要向下滚动才能看到全部组件。）

3. 填入你的 OpenAI API 密钥

想要调用 DALL-E，你需要准备 OpenAI API 密钥（前文准备环节已经完成密钥创建）。

将密钥复制粘贴到 ImageBot 组件的 ApiKey（接口密钥） 属性中。

（你自己的密钥与下方展示的密钥片段不相同。）

4. 编写界面功能代码

现在，你可以为所有组件编写功能逻辑。点击【逻辑设计（Blocks）】按钮，进入逻辑设计界面。

首先创建并初始化 全局变量 imageFileName，用来记录 AI 生成的图片文件。该变量初始值设置为空字符串。

5. 获取用户提示词

编写事件积木，实现语音录入提示词功能：用户点击【语音按钮 (SpeakButton)】后，语音识别组件（SpeechRecognizer）捕捉语音并转换为文字。

语音识别成功返回提示文字后，将文字赋值给提示词输入框（PromptTextBox）。

6. 选择图像分辨率

接下来，用户可以选择图片分辨率（256、512 或 1024），默认分辨率为 256。

当用户通过分辨率下拉选择框（ResolutionSpinner）完成选择后，需要把选中的值赋值给 ImageBot 组件的 Size 属性。

7. 生成图像

至此我们已经具备生成图片所需的全部参数。用户点击【CreateButton（生成按钮）】时：

如果提示词输入框不为空，通过对话框组件（Notifier）弹出加载提示弹窗，告知用户图像正在生成。随后将输入的提示词发送至 OpenAI，依据文字描述生成图像。

当 OpenAI 返回图像文件名称后：关闭加载提示弹窗，将画布（Canvas）组件的 BackgroundImage 属性设置为该图像文件。同时把返回的文件名存入全局变量 imageFileName，编写when ShareButton.Click时会用到这个变量。

图像展示在画布上之后，用户可以重复执行生成操作，直到得到满意的图片。

8. 图像分享功能

用户完成图像生成后，点击【ShareButton（分享按钮）】，可以调用手机上已安装的社交软件，将图片分享给好友。

为避免程序运行报错（例如用户还未生成图片就点击分享按钮），需要判断全局变量 imageFileName 不为空字符串。分享至社交平台时，发送内容需要附带生成图片所使用的提示词与图片文件。

9. 重置功能

最后，用户完成图片分享后，可能需要清空所有内容，使用新提示词重新生成图像。

因此点击【ResetButton（重置按钮）】时执行以下操作：

将图像分辨率恢复默认值 256、清除画布背景图片、清空全局变量 imageFileName，同时清空提示词输入框。

10. 应用测试

现在对应用进行测试：语音录入提示词、生成图像、社交平台分享图片，最后重置应用。

尝试随意点击各个按钮，模拟各类异常操作，检验程序稳定性。如果发现问题，回头检查积木代码并完成修改。

恭喜！你已经成功制作出一款实用应用，可以根据用户提示词生成创意图像并支持分享。

三、拓展你的应用

研究 DALL-E 这类艺术生成式 AI 模型，了解它们的训练方式与运行原理。
改造应用，增加图库功能，允许用户保存喜爱的图片。
设计界面，支持用户在生成的图片上涂鸦，之后再分享。
开发联动程序：借助 ChatGPT 根据用户输入生成故事，再调用 DALL-E 为故事配图。
设计小游戏：将提示词和生成图片打乱，考验大家能否匹配对应的图文。
举办视觉创作比赛（班级、校园、区域级别），比拼 AI 创意图像作品。
你还有哪些精彩创意？

四、关于Youth Mobile Power

但这款揣在口袋里的设备，也为年轻人蕴藏着尚未发掘的机遇，助力大家学习、建立联结、改造社区。

正因如此，麻省理工学院（MIT）联合 YR Media，共同推出青少年移动力量（Youth Mobile Power）系列项目。YR 的青少年创作者产出多篇报道，展现年轻人巧用手机、创造惊喜价值的鲜活案例。与此同时，MIT 团队持续优化 MIT App Inventor，让你这样的学习者，能够动手开发出报道中介绍的各类应用。

简单来说：从故事中汲取灵感，动手开发属于你自己的应用！