【AI2+AI】一小时编程：storyGPT App

任务目标：使用App Inventor制作App，聊天机器人根据表情符号或关键字生成小故事

一小时编程：storyGPT APP

制作用聊天机器人根据表情符号或关键字生成故事App

难度：初级
课程类型：课程
主题：计算机科学
年级水平： 6-8，9-12
资源 URL： storyGPT APP

一、课程概述

学生使用App Inventor开发一款App，在App中输入关键词或选择代表故事元素的表情符号（如， 代表龙、 代表太空、 代表浪漫）（因DF不能显示表情符号，具体的表情符号请参见文末注1）。使用聊天机器人（本例中为 Gemini）根据用户的选择生成一篇小故事。课程结束后，学生能够了解基于事件的基本编程和生成式 AI 概念。本课程适合 6-12 年级的学生。

二、课程所需软硬件

• 可访问互联网的设备 — 每位参与者必须拥有 Chromebook，或一台计算机和移动设备（iOS 或 Android）
• MIT App Inventor 访问权限 — 每台计算机必须能够访问 https://code.appinventor.mit.edu/
• 初始代码 — 每台计算机必须能够访问并下载 starter .AIA  文件
• 投影仪（可选，用于老师指导的演示）

三、教师课前准备

• 在移动设备上安装 AI Companion — 按照 https://appinventor.mit.edu/explore/ai2/setup 设置 Chromebook、IOS 或 Android 设备
• 确保计算机可以匿名访问 MIT App Inventor — https://code.appinventor.mit.edu/
• 提前下载 starter .AIA 文件 — 可以在本地下载并共享该文件，也可以在编程一小时期间从链接下载并共享该文件

四、教学过程：活动简介（10分钟）

1. MIT App Inventor简要介绍

向学生解释MIT App Inventor是一个使用拖放界面制作App的工具。如果学生熟悉其他基于块的编码，你可以说它类似于Scratch或MakeCode。

2. 活动概述

• 向学生说明将构建一个App，学生可以在其中编写关键字或选择代表故事元素的表情符号（如，代表龙，代表太空，代表浪漫）（因DF不能显示表情符号，具体的表情符号请参见文末注1）。
• 然后学生将使用聊天机器人（在本例中为 Gemini）根据他们的选择生成一篇小故事。

3. 演示App

现场演示或视频展示最终的app运行效果。

4. 分享主要学习目标

• 学习App构建基础知识
• 看看人工智能如何使用提示（如表情符号）来生成动态输出

五、学生活动：设置并访问MIT App Inventor（10分钟）

1. 打开App Inventor

• 指导学生访问MIT App Inventor网站https://code.appinventor.mit.edu/
• 单击无帐户继续（通过对话框单击直到项目屏幕）
  

2. 打开初始项目

• 为学生提供初始项目的链接，其中包括基本元素和代码，例如表情符号的按钮和故事输出的文本框。
• 让学生加载初始项目文件（StoryGPTStarterFile.AIA）到App Inventor（从我的电脑导入项目（.aia）…从 项目▼）
  

六、学生活动：探索初始项目代码

1. MIT App Inventor组件设计界面

2.  MIT App Inventor组件设计

• 当选择组件设计（）时，有四个面板可供选择：
• 组件面板：组件面板有用于存放所有可用组件的抽屉——包括用户界面、传感器和云。
• 工作面板：查看器是您拖放组件以创建App用户界面的地方。
• 所有组件：添加到App中的组件的树状视图。
• 组件属性：添加到App中的组件的属性。这些属性可以在设计器和代码中更改。
  有关MIT App Inventor的基本介绍，请参阅HelloCodi教程
  https://appinventor.mit.edu/explore/ai2/hello-codi.html

3. 组件设计中的所有组件

解释初始项目中的可见组件：

• Description：一个带有文本的标签，提供使用app的基本说明。
  HorizontalArrangement1：一个 HorizontalArrangement水平布局 用户界面组件，它包含水平排列的按钮。*
• Spooky按钮：允许学生选择他们的故事元素的按钮（如，，，）。（因DF不能显示表情符号，具体的表情符号请参见文末注2）
• StoryText：生成的故事会显示在这个 标签 中。
  
• 可选：向学生展示不可见的ChatBot组件，并解释它可以在app中将代码发送给Gemini。
  

4.  MIT App Inventor逻辑设计

5.  MIT App Inventor逻辑设计

切换到逻辑设计（）后，有两个面板可用：

• 组件：组件面板显示了添加到App中的组件的树形视图，类似于设计器-添加了内置集。单击任何组件以访问该组件的代码块。每个块的颜色表示它是什么类型的块。
• 代码查看器：代码查看器是您为App安排和编写基于块的代码块的地方。
  有关MIT App Inventor的基本介绍，请参阅HelloCodi教程。
  https://appinventor.mit.edu/explore/ai2/hello-codi.html

6. 初始项目中的代码

• 向学生说明，app会将选定的表情组合发送给聊天机器人，以创建一个独特的故事。
• 初始代码中，猫咪表情按钮的代码块已经完成。当猫咪按钮被点击时，App将发送一条消息给ChatBot1，说“给我讲一个关于 的故事”。（因DF不能显示表情符号，具体的表情符号请参见文末注3）
  
• 当MIT App Inventor的ChatBot组件收到Gemini的响应时，该响应的代码将被设置为显示在App的StoryText标签上。

七、学生活动：将剩余代码补充完整（20分钟）

步骤1：填写代码的其余部分

目标：了解发送提示到聊天机器人的代码如何工作

• 以完成的按钮为例，学生填写“spooky ”按钮和“YourEmojis”按钮的代码块，该按钮在界面设计中显示为“ ”。（因DF不能显示表情符号，具体的表情符号请参见文末注4）
• 向学生展示如何在他们编码和调试时使用 AI伴侣 测试App。

步骤2：选择不同的表情符号

目标：为“YourEmojis”按钮设置一组不同的表情符号/单词，这将提示ChatBot1根据选择的表情符号生成一个故事。

• https://emojidb.org/story-emojis 是一个很好的网站，学生可以使用它来获得想要使用的表情符号的灵感。
  
• 在组件设计中修改按钮的文本。在编辑设计中修改 Chatbot1.Converse question 参数来对应新的表情符号。
  
  

步骤3：运行你的app！

目标：修改代码完成后，探索App运行有何变化。

• 让学生通过选择各种表情符号或单词组合来测试App，并查看结果故事。他们可以自由发挥创意，使用有趣的表情符号或文字组合来生成有趣的故事！
• 让学生们截屏一个他们特别喜欢或有趣的故事，在课程结束时分享。
• 点击猫咪按钮时生成的故事：
  
  克莱门汀，一只永远带着惊讶表情的果酱花斑猫，过着安静沉思的生活。她的日子围绕着阳光、灰尘球和偶尔对吊扇的困惑凝视。但克莱门汀有一个秘密的抱负:抓住那个红点。不是随便哪个红点，而是她主人激光笔投射出的那个难以捉摸、淘气的红点。
  她坚持不懈地追踪着它，肚子低垂着，爪子因期待而颤抖。她扑过去，翻滚着，甚至尝试了杂技般的跳跃，最终以不体面的翻滚结束。然而，那个红点总是保持在伸手可及的范围内，在墙上、地板上、甚至天花板上跳来跳去，戏弄着克莱门汀。每一次失败的尝试都让克莱门汀更加沮丧。
  天下午，克莱门汀在进行她平常的追逐时，注意到了一些奇怪的事情。那个红点停了下来，无辜地停在一棵大盆栽植物的一侧。这是她的机会!她悄无声息地一跃而起，向那个毫无戒心的红点冲去，稳稳地落在花盆里，泥土和叶子飞溅开来。
  当然，那个红点消失了。克莱门汀满身是土，困惑地四处张望。然后，她注意到另一件事:从翻倒的土壤中冒出一根小小的绿色嫩芽。这是她雄心勃勃的追逐所发现的新生命。克莱门汀完全忘记了红点，带着新发现的兴趣嗅了嗅嫩芽。也许，她想，有些狩猎会收获意想不到
• 点击城堡按钮时，如果代码没有加 spooky，app生成的故事：
  
  
  代码没有
  埃塞尔加德城堡矗立在狂风呼啸的峭壁上，灰色的石头映照出暴风雨的天空。几代人以来，它经受住了围攻和流它的历史深深地刻在了它的根基上。但在它那令人生畏的城墙内，正在发生着另一种围攻。
  埃拉公主，王位继承人，被困的不是入侵的军队，而是她与生俱来的权利所束缚的令人窒息的传统。她本应嫁给一位强大的公爵，但她渴望一种超越镀金牢笼和安排联盟的生活。她唯一的慰藉是城堡里庞大的图书馆，一个充满被遗忘的知识和悄悄话的秘密的迷宫。
  一个雨天的下午，埃拉在探索一个布满灰尘的壁时，偶然发现了一条隐藏的通道。她好奇地跟着这条狭窄的隧道，石头上沾满了湿气。它带她深入城堡的中心，来到一个被遗忘的密室。在那里，在褪色的挂毯和布满蜘蛛网的家具之间，她发现了一本皮面精装的书。
  它的页面充满了复杂的地图和编码信息，讲述了一个秘密的逃跑路线，是由一个叛逆的女王在几个世纪前建造的。埃拉的心跳加速。这是她的机会。她紧紧握着这本古老的书，她知道她的围困即将结束，不是通过投降，而是通过大胆的逃跑，进入她自己创造的未来的怀抱。尽管艾瑟加德城堡拥有强大的实力但它无法阻挡一个决心自由的灵魂。
• 点击城堡按钮时，如果代码加了 spooky，app生成的故事：
  
  
  黑刺庄园在伤痕累累的暮色天空下隐约可见，它的轮在逐渐消失的光线下像一只锯齿状的爪子。当地人低声谈论着它被诅咒的历史，谈论着在它空荡荡的窗户里闪烁的奇怪灯光和在无风之夜回荡的令人毛骨悚然的笑声。天黑后没有人敢靠近，即使是村里最勇敢的灵魂也不敢。
  但是年轻的托马斯，被年轻人的勇气和对冒险的渴望所驱使，对这些故事嗤之以鼻。他相信逻辑，而不是传说。一个万圣节之夜，他决定证明所有人都是错的。只带着手电筒，他冒险走上那条杂草丛生的路，通往庄园威严的大门
  铁门锈迹斑斑，嘎吱作响，缓缓打开，发出诡异的吱嘎声，仿佛欢迎他进入黑暗的怀抱。里面，尘埃在透过裂缝的月光中飞舞。每一步都发出诡异的回声，穿过空旷的大厅，寂静被看不见的生物令人不安的爬动所打破。
  突然，托马斯的手电筒闪烁了一下，然后熄灭了，将他带入绝对的黑暗之中。一股冷风扫过大厅，伴随着一阵似乎拂过他耳边的微弱低语。恐惧、寒冷和尖锐的感觉刺穿了他的勇气。他摸索着找打火机，小小的火焰照亮了墙上的一幅可怕的画像-张苍白的脸，眼睛跟着他，嘴角扭曲着，露出邪恶的微笑托马斯的逻辑崩溃了，他逃走了。黑刺庄园似乎有它决心要保守的秘密。
• 当点击你的按钮时，生成的故事是：
  
  
  一只孤零零的鸽子，羽毛的颜色像新下的雪，落在了一个废弃阁楼的窗台上。它歪着头，凝视着满是灰尘的房间，明亮的眼睛被靠在远墙上一面华丽的巨大镜子吸引镜子覆盖着厚厚的污垢，只反射出房间扭曲的影像。
  鸽子跳到了镜框上，"它的小爪子敲击着生锈的银质当它梳理羽毛时，一根彩虹色的羽毛飘落下来，落在镜子的表面上。它闪烁着，捕捉到一束穿过木板窗缝隙的散光。
  光线被羽毛折射，击中镜子的表面，激起一连串微小的、闪闪发光的光点。由于突然的照明，灰尘被扰动，在镜子周围旋转，露出反射表面的一瞥。随着灰尘落定，镜子变得部分干净，反射出更清晰的房间图像，但同时也反射出更多。
  在镜子的深处，鸽子没有看到自己的倒影，而是看到了一片沐浴在阳光下的郁郁葱葱的绿色山谷。它吓了一跳，振翅飞起，在房间里盘旋，仿佛在寻找隐藏的风景。镜子现在闪烁着微弱的光芒，继续保持着山谷的影像，无声地承诺着一个超越阁楼尘土限制的世界。鸽子被魔法所触动，继续它的寻找，心中带着一丝希望的火花。

八、总结：班级分享环节（10分钟）

1. 班级分享

• 让学生分享一个他们喜欢或认为有趣的故事。这是一个有趣的时刻，也是一个反馈和反思AI能力的时刻。

2. 问题引导

• 你认为是什么让这些故事与众不同，或者与别人讲的故事不同？
• 这款App对不同表情组合的反应如何？你对这些故事感到惊讶吗？
• 你是否注意到使用生成式AI讲述故事的任何奇怪行为或限制？
• 使用生成式人工智能是否改变了你对创造力的看法？你认为人工智能是一种创造性的工具还是只是一个帮手？
• 你认为表情符号还是文字更适合与人工智能交流故事想法？为什么?

九、拓展项目（可选）

• TextToSpeech：添加一个额外的说话按钮，调用TextToSpeech1的Speak方法（紫色代码块）来说出ChatBot1返回的文本。
• 添加更多按钮或创建“冒险”、“神秘”或“喜剧”等类别作为主题。
• 高级：挑战使用生成式人工智能根据故事的场景改变背景颜色（例如，以森林为背景的故事是绿色的）。
• 高级：ChatBot1的 Converse（对话） 方法是基于前面所有回答的每个回答。添加若干按钮，如“发生了什么？”和“重新开始”（使用ResetConversation方法）来分隔不同故事。使用全局变量来记住最后生成的故事，并使用 控制模块 来决定何时重置对话。