第7课：集成AI能力

让你的应用具备AI能力：图像识别、语音识别等 🤖

🤖 1. 什么是AI能力

在第6课中，你已经学会了如何让你的应用"有记忆"——使用本地存储保存用户数据。现在，我们要让应用变得更智能，让它能够理解文字、识别图像、听懂语音！

AI能力的三大类型

📝 文本生成（Text Generation）

AI 可以帮你写故事、总结文章、翻译语言、回答问题。这是最常见的AI能力，比如 ChatGPT 就是最典型的例子。

应用场景：故事生成器、作业总结工具、智能客服、翻译助手等。

🖼️ 图像生成（Image Generation）

AI 可以根据文字描述生成图片，或者对图片进行识别、分析、编辑。你只需描述"一只戴眼镜的猫"，AI就能画出对应的图片。

应用场景：头像制作器、封面设计、Logo生成、图片描述、艺术创作等。

🎤 语音识别（Speech Recognition）

AI 可以听懂人说话，把语音转成文字，或者把文字转成语音。这让应用可以"开口说话"和"听懂指令"。

应用场景：语音助手、语音笔记、语音控制游戏、朗读应用等。

💡 AI能力的本质是什么？

AI能力的本质是让计算机理解和生成人类能理解的内容。 以前，计算机只能处理结构化数据（数字、表格）；现在，AI让计算机能够理解 自然语言、图像、声音。这意味着你可以用对话的方式让AI帮你创作！

📝 2. 文本生成：AI帮你写故事/作业总结

2.1 文本生成的基础应用

文本生成是最容易上手的AI能力。你可以用它来：

💡 示例提示词：
请帮我制作一个故事生成器应用： 1. 用户输入3-5个关键词（如"勇敢、魔法、森林"） 2. AI根据这些关键词创作一个完整的故事（500字左右） 3. 故事要有开头、发展、高潮、结尾 4. 提供重新生成按钮，每次生成不同的故事 5. 界面要美观，故事要分段显示

2.2 实战：AI故事生成器

我们来实现一个完整的故事生成器。核心思路是：

  1. 收集输入：让用户输入故事关键词和主题
  2. 构建提示词：把用户输入转换成给AI的指令
  3. 调用AI接口：发送请求，等待AI响应
  4. 展示结果：把AI生成的故事显示在页面上
  5. 提供互动：允许用户保存、分享、重新生成

💡 使用免费AI API的技巧

推荐方案：使用免费的AI API服务，比如：

  • OpenRouter：提供多个免费模型接口
  • Together AI：部分模型免费试用
  • Groq：提供快速推理服务
  • 本地模拟：先用预设文本，后续接入真实AI
AI平台注册界面

图1: AI API平台注册界面示例

💡 示例提示词：
我想制作一个"作业总结助手"： 1. 用户粘贴一段长文章（500-2000字） 2. 点击"总结"按钮后，AI生成这段文章的摘要（100字以内） 3. 摘要要抓住文章的核心观点 4. 提供"复制摘要"和"重新总结"按钮 5. 如果暂时没有AI接口，可以先用预设的逻辑模拟
💡 如何处理API密钥安全？

重要提示：如果你的应用要分享给别人使用，不要把API密钥写在代码里！ 因为任何人都可以查看网页源代码，看到你的密钥。解决方案是： 1) 使用免费无需密钥的服务； 2) 让用户输入自己的API密钥； 3) 使用后端代理转发请求。

🖼️ 3. 图片生成：AI帮你画封面/头像

3.1 图像生成的原理

图像生成AI通过学习海量图片，理解了文字描述与图像内容之间的对应关系。当你输入"一只戴着眼镜的橘猫坐在书桌前"，AI会根据训练结果生成对应的图像。

常用的免费图像生成工具：

3.2 实战：AI头像制作器

我们来做一个有趣的应用——AI头像制作器。用户输入描述，AI生成个性化头像。

💡 示例提示词：
请帮我制作一个AI头像生成器： 1. 用户选择头像风格：动漫、写实、卡通、像素风等 2. 用户输入描述：如"一个戴眼镜的程序员，蓝色背景，微笑" 3. 点击"生成头像"按钮 4. 使用Pollinations.ai的免费API生成图片 - API格式：https://image.pollinations.ai/prompt/{描述文字} 5. 显示生成的头像，提供"下载"和"重新生成"按钮 6. 界面要美观，支持手机访问

🎨 Pollinations.ai 免费API使用方法

Pollinations.ai 是一个完全免费的图像生成API，无需注册和API密钥。使用方法超级简单：

格式：https://image.pollinations.ai/prompt/你的描述文字

示例：

  • https://image.pollinations.ai/prompt/a%20cute%20cat （生成可爱猫咪）
  • https://image.pollinations.ai/prompt/anime%20girl%20with%20glasses （生成戴眼镜动漫女孩）

注意：URL中的空格要用 %20 替换，或使用 encodeURIComponent() 函数编码。

3.3 进阶：批量生成和风格选择

你可以让用户一次生成多个版本，然后选择最喜欢的一个：

💡 示例提示词：
升级头像生成器，添加批量生成功能： 1. 用户输入描述后，一次生成4个不同风格的头像 2. 4个头像并排显示，用户点击选择最喜欢的 3. 选中的头像放大显示，提供"下载高清版"按钮 4. 添加"保存到相册"功能，使用localStorage保存用户生成的头像历史 5. 提供"查看历史记录"按钮，展示所有生成过的头像
💡 图像生成需要等待时间

图像生成通常需要5-30秒不等。在等待期间，要给用户良好的反馈： 1) 显示加载动画； 2) 显示进度提示； 3) 允许取消操作。 这样用户体验会更好！

🎤 4. 语音识别：让应用听懂你说的话

4.1 浏览器内置语音识别

现代浏览器内置了语音识别API，无需任何第三方服务，就能实现语音转文字功能！这个API叫做Web Speech API。

🎤 Web Speech API 基础

核心功能：

  • 语音识别：把说的话转成文字
  • 语音合成：把文字转成语音（让应用说话）

浏览器支持：Chrome、Edge、Safari等主流浏览器都支持

💡 示例提示词：
请帮我制作一个语音笔记应用： 1. 点击"开始录音"按钮后，浏览器请求麦克风权限 2. 用户对着麦克风说话，实时显示识别到的文字 3. 点击"停止录音"后，保存这段文字到笔记列表 4. 笔记列表使用localStorage保存，刷新页面不丢失 5. 每条笔记显示时间戳和内容 6. 提供"删除"、"复制"、"朗读"功能 7. 使用浏览器内置的Web Speech API

4.2 语音合成：让应用开口说话

除了听懂你说话，应用还能开口说话！这就是语音合成（Text-to-Speech）功能。

🔊 实用场景

语音合成可以用在很多场景：

  • 朗读文章：让用户边听边做事
  • 语音助手：应用"回答"用户问题
  • 有声故事：给孩子讲睡前故事
  • 发音练习：语言学习应用
💡 示例提示词：
请制作一个"AI讲故事"应用： 1. 用户输入故事主题或关键词 2. AI生成一个短故事（200字以内） 3. 点击"朗读"按钮，应用用语音读出这个故事 4. 提供"暂停"、"继续"、"停止"控制 5. 用户可以选择不同的声音（男声、女声、童声） 6. 提供"语速调节"滑块（慢速、正常、快速） 7. 使用浏览器内置的speechSynthesis API
💡 语音识别需要HTTPS

重要提示：Web Speech API 需要HTTPS环境才能正常工作。 在本地测试时，可以使用 http://localhost，但部署到线上必须使用HTTPS。 这是浏览器的安全限制，为了保护用户隐私。

🎯 5. 综合案例：AI能力组合应用

5.1 语音故事生成器

结合语音识别+文本生成+语音合成，做一个完全语音交互的故事生成器！

💡 示例提示词：
请制作一个"语音故事生成器"： 1. 用户点击"说出你的故事想法"按钮，开始录音 2. 用户说出故事主题，如"一个勇敢的小兔子冒险的故事" 3. 识别语音后，AI根据描述生成一个完整故事（300字） 4. 自动朗读生成的故事（或点击"朗读"按钮） 5. 提供"重新生成"、"保存故事"、"分享故事"功能 6. 界面要有大按钮，适合触屏操作 7. 全程可以语音交互，无需打字

5.2 AI绘本创作工具

结合文本生成+图像生成，做一个自动创作绘本的工具！

📖
故事生成
AI根据主题生成故事，分成5-8个场景
文本生成
🎨
场景配图
为每个场景生成对应的插图
图像生成
📚
绘本展示
以翻页形式展示完整绘本
交互设计
💾
保存分享
下载为图片或分享给朋友
本地存储
💡 示例提示词：
请制作一个AI绘本创作工具： 1. 用户输入故事主题（如"一只小熊的太空旅行"） 2. AI生成一个5页的绘本故事，每页有： - 一段文字（50字以内） - 一张配图（使用Pollinations.ai生成） 3. 图片生成时显示加载动画 4. 以翻页形式展示绘本，支持左右滑动 5. 提供"重新创作"、"保存绘本"功能 6. 界面温馨可爱，适合儿童使用

5.3 多模态学习助手

结合文字+图片+语音，做一个帮助学习的AI助手！

📚 应用场景

  • 生词学习：输入生词，AI生成例句、配图、朗读
  • 历史人物：输入人物名字，AI生成简介、画像、故事
  • 科学概念：输入概念，AI生成解释、图示、实例
  • 地理知识：输入国家，AI生成介绍、地图、风景图

🛠️ 6. 免费AI工具推荐

以下是一些完全免费或提供免费额度的AI工具，适合初学者使用：

文本生成

图像生成

语音识别与合成

🎯 MG Space 教育理念

在MG Space，我们强调"用工具，而不是被工具用"。 AI是强大的工具，但核心是你的创意和想法。 不要被技术的复杂性吓倒，从免费工具开始，用对话的方式实现你的想法。 记住：每个伟大的应用都始于一个简单的想法！

🎯 本章任务

🎯 制作你的AI能力应用
⭐ 250 XP

你已经学会了如何让应用具备AI能力。现在动手实践吧！

  • 基础任务（必做，选其一）：
    • 制作一个AI故事生成器：用户输入关键词，AI生成完整故事
    • 制作一个AI头像制作器：用户输入描述，AI生成个性化头像
    • 制作一个语音笔记应用：用户说话，应用转成文字并保存
  • 进阶任务（可选）：
    • 为应用添加多语言支持：支持中英文切换
    • 添加历史记录功能：使用localStorage保存生成历史
    • 实现批量生成：一次生成多个版本供用户选择
  • 挑战任务：
    • 制作AI绘本创作工具：结合文本和图像生成
    • 制作语音故事生成器：结合语音识别和语音合成
    • 上传你的作品到 MG App Store，分享给朋友使用

💡 提示：你可能需要约3小时完成本课内容。建议先完成基础任务，理解AI能力的工作原理， 再尝试进阶功能。记住：先完成，再完美！

← 上一课：制作产品原型 下一课：完整项目实践 →