sanbuphy
653 lines
34 KiB
Markdown
653 lines
34 KiB
Markdown
# Project 1: 如何构建贪吃蛇游戏
|
||
|
||
这是一个**基于项目的**学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。不要担心犯错或修改内容——最重要的是请记住： 🎉 **完成比完美更重要**
|
||
|
||
在软件工程中，不断迭代更新推翻重做一个项目是十分正常的，包括本教程也经历过多次的推翻重构。所以，你不需要一次性就创造出一个完整的产品，一开始做个垃圾也没关系，如果一开始就做出好的作品，请快快联系我加入贡献作者群。你只需要记住：**从小处着手，边做边改，持之以恒。**
|
||
|
||
第一个 Project 结合了最简单的在线编程工具以及 AI 能力调用方法，能够方便你理解制作程序以及调用 AI 能力的基本概念。我们将学习如何使用最基础的 **vibe coding** 技巧来创建一个现代版的 AI 原生贪吃蛇游戏。我们将从贪吃蛇游戏的基本机制开始，然后对其进行修改，让蛇吃掉字符而不是点。最后，游戏将根据这些字符生成一首诗，并绘制一幅受这首诗启发的图画。
|
||
|
||
> 💡 什么是 Vibe Coding？计算机科学家 [Andrej Karpathy](https://karpathy.ai/)（OpenAI 的联合创始人之一，特斯拉前 AI 负责人）于 2025 年 2 月提出了 **vibe coding** 一词。这个概念指的是一种依赖于 LLM 的编码方法，允许程序员通过提供自然语言描述而不是手动编写代码来生成可工作的代码。
|
||
>
|
||
> 
|
||
>
|
||
> 点击这里查看更多关于 vibe coding 的细节：[https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||
>
|
||
> 点击这里查看更多关于 Karpathy 的分享内容：[https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||
|
||
|
||
|
||
# 你将学到
|
||
|
||
* 使用提示词（prompts）构建一个简单的游戏。
|
||
* 如果你看到错误，告诉 AI 并让它帮你修复。
|
||
* 为你的游戏添加文本和图像生成功能，使其更有趣。
|
||
|
||
# 1. 准备工作
|
||
|
||
## 1.1 我们应该使用哪些工具？
|
||
|
||
我们将使用一个非常简单的工具来构建一个最小化的游戏。你不需要知道如何调用大语言模型或图像生成模型。
|
||
|
||
这个工具叫做 [z.ai](https://chat.z.ai/)，由智谱 AI（中国领先的 LLM 公司之一）开发。它支持多种功能，如 AI 驱动的幻灯片生成、海报设计和全栈开发。在本教程中，我们将重点关注其全栈开发模块。
|
||
|
||
|
||
|
||
[z.ai](https://chat.z.ai/) 中的全栈开发模块支持网页的实时编辑和预览。
|
||
|
||
|
||
|
||
通过点击全栈开发示例，你可以看到网页创建的整个过程。并且等一杯咖啡的时间，你的结果也就出来了！
|
||
|
||
|
||
|
||
你可以上下滚动浏览此网页，或点击顶部的 🧭 按钮以全屏模式查看页面。
|
||
|
||
|
||
|
||
如果你想查看此网页的源代码，可以点击右上角的图标查看所有代码。
|
||
|
||
|
||
|
||
|
||
|
||
## 1.2 我们需要前端开发知识吗？
|
||
|
||
我们在开始时不需要掌握前端甚至后端开发技能。我们只需要学习如何与大语言模型聊天，如何根据当前的运行结果向 LLM 提出新需求，以及当代码运行失败时如何向 LLM 提供准确的错误信息。
|
||
|
||
但我们建议你学习一些前端和后端开发的基础知识，因为这将帮助你让 LLM 创建更好的程序。
|
||
|
||
别担心，你只需要在学习过程中逐渐掌握这些知识，不需要一开始就是专家。
|
||
|
||
> 💡 更多关于前端开发的信息
|
||
>
|
||
> 前端开发通常意味着使用 **HTML**、**CSS** 和 **JavaScript** 来创建网站或应用程序的用户界面。然而，在本教程中，我们将跳过前端编码的复杂性，因为我们使用的工具会自动为我们生成并运行界面。
|
||
>
|
||
> 但了解幕后发生的事情是有帮助的。传统上，构建 Web 界面涉及编写用于结构的 **HTML**、用于样式的 **CSS** 和用于交互性的 **JavaScript**。
|
||
>
|
||
> 例如，这是一个非常简单的网页，但它结合了三种不同类型的代码：
|
||
>
|
||
> 
|
||
>
|
||
> * 一个简单的 HTML 按钮：
|
||
>
|
||
> ```HTML
|
||
> <button>Click Me</button>
|
||
> ```
|
||
>
|
||
> * 基本的 CSS 让按钮变蓝：
|
||
>
|
||
> ```CSS
|
||
> button {
|
||
> background-color: #3498db;
|
||
> color: white;
|
||
> border: none;
|
||
> padding: 10px 20px;
|
||
> border-radius: 4px;
|
||
> }
|
||
> ```
|
||
>
|
||
> * 一点 JavaScript 来在点击按钮时显示提示：
|
||
>
|
||
> ```JavaScript
|
||
> document.querySelector('button').onclick = function() {
|
||
> alert('Button was clicked!');
|
||
> }
|
||
> ```
|
||
>
|
||
> 当你尝试点击这个按钮时，你会在浏览器中看到一个提示信息：
|
||
>
|
||
> 
|
||
>
|
||
> 此外，我们可以尝试理解这三种代码的深层含义：
|
||
>
|
||
> **什么是 HTML？**
|
||
>
|
||
> HTML，全称 **超文本标记语言 (HyperText Markup Language)**，是网页的骨架。它的工作是定义页面的结构和内容，如标题、段落、图像、链接，以及示例中看到的按钮本身。
|
||
>
|
||
> * **HTML 决定页面上有什么**：它告诉浏览器，“这是一个按钮”，“这是一段文本”，或者“在这里显示一张图片”。
|
||
> * **它使用“标签”来组织内容**：`<button>Click Me</button>` 是一个 HTML 标签，定义了一个按钮，并在其中包含了“Click Me”这个文本。
|
||
>
|
||
> **什么是 CSS？**
|
||
>
|
||
> CSS，或层叠样式表 (Cascading Style Sheets)，负责网页的“外观和感觉”。它用于设计和美化 HTML 元素，控制颜色、字体、布局和间距等。
|
||
>
|
||
> * **CSS 决定页面看起来怎么样**：在我们的示例中，CSS 代码将标准 HTML 按钮变成了一个带有蓝色背景、白色文本、圆角和一些内边距的按钮。
|
||
> * **它将内容与表现分离**：这是一个关键概念。你可以有一个用于内容的 HTML 文件，并使用一个单独的 CSS 文件来设置它的样式。这使得维护和更新整个网站的设计变得更加容易。
|
||
>
|
||
> **什么是 JavaScript？**
|
||
>
|
||
> JavaScript 是一种编程语言，它为网页添加交互性和动态行为。如果说 HTML 是骨架，CSS 是皮肤，那么 JavaScript 就是大脑和肌肉，让页面“活起来”。
|
||
>
|
||
> * **JavaScript 决定页面的行为**：在示例中，JavaScript 代码使得点击按钮时弹出提示框。它定义了响应用户输入时应该发生的操作。
|
||
> * **它可以创建复杂的功能**：除了简单的提示，JavaScript 还用于处理表单提交、创建动画、在不重新加载页面的情况下加载新数据、构建像游戏这样的复杂应用程序等等。
|
||
>
|
||
> 随着项目变得越来越大，交互性越来越强，仅使用纯 HTML、CSS 和 JavaScript 管理代码会变得复杂且难以维护。这就是现代前端库如 **React** 发挥作用的地方。
|
||
>
|
||
> 
|
||
>
|
||
> **[React](https://react.dev/)** 是一个用于构建用户界面的流行 JavaScript 库。它帮助开发者将代码组织成可重用的组件，使得构建和维护复杂的应用程序变得更加容易。
|
||
>
|
||
> React 允许你编写管理自己逻辑和外观的组件，然后将它们组合起来构建更大的界面。
|
||
>
|
||
> 随着我们的深入，我们将探索更多关于 React 如何工作以及它如何适应我们的工作流程的内容。现在，只需要知道，虽然前端开发通常意味着编写像这样的代码，但我们的工具会自动处理大部分工作——我们只需要知道如何向大语言模型清楚地表达我们的需求！
|
||
|
||
# 2. 构建你的第一个游戏
|
||
|
||
## 2.1 与 LLM 对话时给出清晰的指令
|
||
|
||
在一开始，我们可以用最简单的方式与大模型对话，这将帮助我们快速获得产品原型。我们可以直接在聊天框中输入：
|
||
|
||
> **💡 示例提示词：** 帮我做一个贪吃蛇游戏
|
||
>
|
||
> 
|
||
|
||
> **💡 示例提示词：** 帮我做一个贪吃蛇游戏，它应该支持
|
||
>
|
||
> 1. 我可以吃不同的单词，它们会被收集在一个盒子里
|
||
> 
|
||
|
||
> **💡 示例提示词：** 帮我做一个贪吃蛇游戏，它应该支持：
|
||
>
|
||
> 1. 我可以吃不同的单词，它们会被收集在一个盒子里
|
||
> 2. 当蛇吃了8个单词时，llm 应该根据这些单词创作一首诗，我们可以根据需要重新混合这首诗。
|
||
> 3. 当诗完成后，下一步将自动根据这首诗创建一幅图像。
|
||
>
|
||
> 
|
||
|
||
## 2.2 尝试修复过程中出现的错误
|
||
|
||
在开发过程中，我们可能会遇到不尽如人意的问题，例如点击按钮没有任何反应、使用功能时报错、功能未按预期工作，或者前端页面与预期设计不符。
|
||
|
||
在这种情况下，我们需要进一步向模型提问，以帮助修复这些意外问题。
|
||
|
||
|
||
|
||
## 2.3 如何假装自己是 Vibe Coding 大师
|
||
|
||
实际上，在真正的 vibe coding 过程中，我们通常不会使用很多复杂的提示词。也许我们在开始时需要为整个程序提供一个具体且适度复杂的提示词，但在那之后的每一步，你可能只需要以下类型的提示词：
|
||
|
||
```JSON
|
||
"代码里有个 bug，请修复它。"
|
||
"我不要部分代码，给我完整的修改后的代码。"
|
||
"你的代码还是有问题。"
|
||
"请再次修改并给我完整的修正后的代码。"
|
||
"刚才还能运行，为什么现在不能运行了？"
|
||
"你没理解我的意思吗？不要改我原来的代码。"
|
||
"不要添加任何调试功能。"
|
||
"不要做我没让你做的事。"
|
||
"我让你实现的功能在哪里？"
|
||
"你听不懂我说的话吗？"
|
||
"我只要一个函数。"
|
||
"我告诉过你参考我之前的代码。"
|
||
"请不要添加不必要的注释。"
|
||
"请不要修改我原始代码的基本逻辑。"
|
||
"帮我修改代码。"
|
||
"基于我的代码修改..."
|
||
"不要改我的变量名！！！"
|
||
"不要改原来的函数名！"
|
||
"不要乱动我的变量。"
|
||
"不要添加额外的功能。"
|
||
"不要只生成框架，生成完整的代码。"
|
||
```
|
||
|
||
这听起来可能有点夸张，但实际上，这些就是我们在日常工作中可能使用的提示词。由于大语言模型的上下文长度限制，或者有时因为它们的指令遵循能力不是很强，模型可能会忘记对话早些时候讨论的内容。
|
||
|
||
或者，由于训练数据集的风格，大模型倾向于以其训练数据的风格回答。例如，有些人说话很严肃，有些人喜欢添加很多修饰，而有些大模型喜欢在代码中添加很多注释或不必要的模块。
|
||
|
||
这就是为什么我们需要在开始时明确设定界限，例如：不要添加新模块，不要包含太多注释。每个大模型都有自己的风格，我们只能通过实际使用找到我们最喜欢的那个。
|
||
|
||
> 💡 什么是模型上下文？
|
||
>
|
||
> 模型上下文就像 AI 的 **短期记忆**。它是 AI 记住的当前对话中的所有文本。这使你能够提出后续问题并进行自然的对话，因为 AI “记得”你刚才在谈论什么。没有上下文，你问的每个问题都将是一个全新的、独立的对话。
|
||
>
|
||
> 每个模型都有不同的有效上下文长度，通常从 **32k 到 128k** tokens 不等。如果你想让大语言模型一次性阅读一篇很长的文章，或者有许多材料和对话希望 LLM 参考，你可能会发现 LLM 经常忘记长文本中的一些重要内容，或者你可能会注意到对话过程中主题逐渐偏移，这是由上下文限制引起的现象。
|
||
>
|
||
> 因此，对于模型，我们也关注上下文。然而，值得注意的是，上下文越长，资源消耗越大，收取的费用也越高。在行业中，有许多压缩上下文的方法，我们将在随后的学习中一一介绍。
|
||
|
||
> 💡 什么是指令遵循能力？
|
||
>
|
||
> 指令遵循能力指的是 **AI 理解并准确执行你提供的命令的能力**。它不仅仅是回答问题，而是根据你的具体要求完成任务，例如“将这篇文章总结为三个要点”、“用正式的语气写回复”或“翻译这个词并在句子中使用它”。
|
||
>
|
||
> 具有强指令遵循能力的模型将完全按照你的指示完成这些操作，而不会执行任何不必要的额外操作。
|
||
>
|
||
> 例如，当我们希望 LLM 将一篇文章总结为三个关键点时，我们不希望它给我们五个；当我们希望它从文章中提取某些关键要素（如作者、时间及发生的事件）时，我们不希望它遗漏任何要素。
|
||
>
|
||
> 因此，我们希望 LLM 拥有足够强的指令遵循能力，因为这带来了稳定性及 **可复现性**，使它们成为工业应用中的重要组成部分。
|
||
|
||
# 3. **使用 API：调用 LLM 和图像生成器**
|
||
|
||
## 3.1 什么是 API
|
||
|
||
首先，**你需要知道什么是 API** [Extra Knowledge 2 - What is API](https://github.com/datawhalechina/easy-vibe/blob/main/docs/extra/extra2/extra2-what-is-api.md)
|
||
|
||
我们将尝试集成两个 API：一个是调用 DeepSeek LLM，另一个是调用 Seedream (即梦) 模型。这两个模型都很棒，性能出色。
|
||
|
||
在使用 API 的过程中，只有两个最重要的元素：
|
||
|
||
1. API key (密钥)
|
||
2. 官方文档示例
|
||
|
||
只要你能找到这两个，你就可以让 LLM 帮你修改并实现所有类型的 API 调用。
|
||
|
||
## 3.2 将 DeepSeek API 集成到 z.ai 中
|
||
|
||
### 什么是 DeepSeek
|
||
|
||
|
||
|
||
> 📚 信息引用自 [DeepSeek Wiki](https://en.wikipedia.org/wiki/DeepSeek)
|
||
>
|
||
> **杭州深度求索人工智能基础技术研究有限公司**（**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**），以 **DeepSeek** 为商号，是一家开发大语言模型（LLMs）的中国人工智能（AI）公司。DeepSeek 总部位于浙江杭州，由中国对冲基金幻方量化（High-Flyer）拥有并资助。DeepSeek 由幻方量化的联合创始人梁文锋于 2023 年 7 月创立，他也同时担任这两家公司的 CEO。该公司于 2025 年 1 月推出了同名聊天机器人及其 DeepSeek-R1 模型。
|
||
>
|
||
> 让我们看看 DeepSeek 在 GPQA 基准排名中与其他顶级模型的表现对比。值得注意的是，DeepSeek 是一个开源（每个人都可以从互联网下载模型）模型，而其他常见模型如 Grok、Google Gemini 和 ChatGPT 都是闭源的。正如我们所见，DeepSeek 已经很大程度上接近了第一梯队的模型。
|
||
>
|
||
> 
|
||
>
|
||
> GPQA 是“研究生级 Google-Proof 问答基准”的缩写，这是一个用于科学问答任务的研究生级基准。以下是详细介绍。
|
||
>
|
||
> GPQA 包含 448 个多项选择题，涵盖生物学、物理学和化学的子领域，如量子力学、有机化学、分子生物学等。这些问题由 61 位持有博士学位或正在攻读博士学位的专家编写，并经过了严格的验证过程。
|
||
|
||
### 如何获取 deepseek API
|
||
|
||
我们将尝试根据我们已有的信息，让 z.ai 直接将 DeepSeek API 集成到项目中。
|
||
|
||
首先，我们需要在 DeepSeek 开放平台注册一个账户。
|
||
|
||
https://platform.deepseek.com/sign_up
|
||
|
||
然后，你会看到像这样的网页界面：
|
||
|
||
|
||
|
||
要使用 API，我们需要先充值 token。10 元人民币足够使用一段时间了！
|
||
|
||
|
||
|
||
点击“API KEYS”并在屏幕下方找到“create new API key”。你最终会得到一个像 `sk-8573341c39fc44315aadc071c53rh7d2` 这样的 API key。
|
||
|
||
|
||
|
||
一旦你获得了密钥，你就拥有了调用模型的权限。
|
||
|
||
此时，你可以直接阅读 [API 文档](https://api-docs.deepseek.com/)，它通常提供 curl 或 Python 的调用示例。
|
||
|
||
|
||
|
||
找到示例后，你可以将文档中与密钥相关的所有内容复制到 z.ai，并要求它尝试帮你集成 LLM。
|
||
|
||
|
||
|
||
|
||
|
||
自动集成可以在很短的时间内完成。我们可以询问它的操作员确认 DeepSeek API 是否已经在使用中。
|
||
|
||
|
||
|
||
或者，我们可以要求 z.ai 帮我们定位项目中调用 LLM 的部分。
|
||
|
||
然后我们可以独立确认是否正在使用 DeepSeek。具体来说，我们可以直接请求：`"告诉我项目中所有需要调用 LLM 的代码位置，我需要检查是否是 DeepSeek。"`，z.ai 将返回所有 API 调用的详细地址。
|
||
|
||
|
||
|
||
接下来，我们将简要介绍目前可用的三种最先进的图像生成模型。你可以根据自己的喜好选择一种集成到 z.ai 中。
|
||
|
||
## 3.3 将 SiliconFlow QwenImage API 集成到 z.ai 中
|
||
|
||
### 什么是 SiliconFlow
|
||
|
||
> [Silicon Flow (硅基流动)](https://cloud.siliconflow.com/me/models) 成立于 2023 年 8 月，是一家世界领先的 AI 能力提供商。它提供 SiliconCloud（具有自研推理加速的大模型云平台）和 BizyAir（用于 AI 图像生成的 ComfyUI 插件）等核心产品，为客户提供 AI 基础设施能力，拥有战略合作伙伴关系，并持有顶级行业认证。
|
||
>
|
||
> 
|
||
|
||
### 什么是 QwenImage
|
||
|
||
> Qwen-Image 是一个强大的图像生成基础模型，能够进行复杂的文本渲染和精确的图像编辑。这是一个 20B MMDiT 图像基础模型，在复杂的文本渲染和精确的图像编辑方面取得了重大进展。实验表明，它在图像生成和编辑方面都具有很强的通用能力，在文本渲染方面表现尤为出色，尤其是中文。
|
||
>
|
||
> 从中文到英文，QwenImage 可以像 GPT-4o 或 Seedream 模型一样生成高质量的文本。
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
|
||
### 如何获取 SiliconFlow QwenImage API
|
||
|
||
https://cloud.siliconflow.com/me/models
|
||
|
||
查看 SiliconFlow 的官网。左侧有一个“Playground”部分，你可以在不进行 API 调用的情况下试用不同的模型。在网页顶部有一个“Filters”按钮；点击它可以筛选右侧的模型列表。
|
||
|
||
如果你选择“Image”，你将只看到当前支持的所有文生图模型。在这种情况下，我们将使用 Qwen/Qwen-Image。
|
||
|
||
|
||
|
||
要调用 API，首先我们需要点击左侧设置中的“API Keys”，然后点击“Create API Key”按钮生成一个 API key。记得保存这个 API key。
|
||
|
||
|
||
|
||
要查看可用余额，我们需要打开左侧设置中的“Payments”。在这里，你可以看到 1 美元的赠金。但是，如果你想使用 FLUX 文生图模型，你需要先充值账户。
|
||
|
||
https://cloud.siliconflow.com/me/account/ak
|
||
|
||
|
||
|
||
一切设置好后，我们需要参考相应的图像生成 API 文档。你可以在官方文档页面找到任何标记为“API Reference”的部分。点击它，然后导航到图像生成的 API 端点部分并找到相关的请求示例。
|
||
|
||
https://docs.siliconflow.com/en/userguide/introduction
|
||
|
||
|
||
|
||
```Bash
|
||
curl --request POST \
|
||
--url https://api.siliconflow.com/v1/images/generations \
|
||
--header 'Authorization: Bearer <token>' \
|
||
--header 'Content-Type: application/json' \
|
||
--data '{
|
||
"model": "black-forest-labs/FLUX.1-Kontext-max",
|
||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||
}'
|
||
```
|
||
|
||
记得将你打算使用的模型和 API key 填入相应的字段。之后，你可以在计算机的命令行中使用该命令运行直接请求测试。
|
||
|
||
```Bash
|
||
curl --request POST \
|
||
--url https://api.siliconflow.com/v1/images/generations \
|
||
--header 'Authorization: Bearer sk-defrgqrgrganpncxxibfyzfocgafga' \
|
||
--header 'Content-Type: application/json' \
|
||
--data '{
|
||
"model": "Qwen/Qwen-Image",
|
||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||
}'
|
||
```
|
||
|
||
|
||
|
||
你可以将下面修改后的代码行发送给 z.ai，并要求它帮你创建一个前端测试演示。很快，你就能实现 SiliconFlow 的基本 API 调用。
|
||
|
||
|
||
|
||
## 3.4 将 Recraft API 集成到 z.ai 中
|
||
|
||
### 什么是 Recraft
|
||
|
||
> Recraft 是一款面向设计师、插画师和营销人员的 AI 工具——于 2022 年在美国成立，总部位于伦敦。它帮助生成/迭代视觉效果（图像、矢量艺术、3D 图形），具有高质量输出（任何文本大小/长度）、精确元素定位和品牌一致性设计等优势。受到 200 个国家/地区 300 多万用户（包括奥美、Netflix）的信任，并已创建了 3.5 亿多张图像，其团队旨在使其成为必备的设计师工具，确保创作者能够控制他们的 AI 辅助工作流程。
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
|
||
### 如何获取 Recraft API
|
||
|
||
首先，我们仍然需要找到重要的 API 入口以获取我们的 API key。 https://www.recraft.ai/profile/api
|
||
|
||
由于这里没有提供免费额度，我们需要自己充值 1,000 积分。这个网站支持支付宝和微信支付，所以很容易获得 1,000 积分（注意：不要充值超过必要的金额）。
|
||
|
||
|
||
|
||
之后，我们仍然遵循通常的方法：去官方文档找到相应的请求示例。
|
||
|
||
https://www.recraft.ai/docs/api-reference/getting-started
|
||
|
||
https://www.recraft.ai/docs/api-reference/usage
|
||
|
||
https://www.recraft.ai/docs/api-reference/guides
|
||
|
||
在这里，我们可以直接复制整个内容并粘贴到 z.ai。
|
||
|
||
|
||
|
||
注意，在聊天窗口中，输入你的 API key 和文档内容就足够了；z.ai 会自动为你构建前端。
|
||
|
||
如果过程中出现错误，你可以直接将错误信息粘贴到聊天窗口，让 z.ai 帮你自动解决。
|
||
|
||
|
||
|
||
## 3.5 将 Seedream API 集成到 z.ai 中（针对中国用户）
|
||
|
||
### 什么是 Seedream 4.0
|
||
|
||
https://seed.bytedance.com/en/seedream4_0
|
||
|
||
|
||
|
||
> 也许你已经知道 Nano Banana（Google 开发），但你最好不要错过 Seedream。Seedream 4.0 是字节跳动打造的新一代图像创作模型。它将图像生成和图像编辑能力集成到一个统一的架构中。这使得它能够灵活处理复杂的多模态任务，如基于知识的生成、复杂推理和参考一致性。此外，它的推理速度比前代产品快得多，并且可以生成分辨率高达 4K 的令人惊叹的高清图像。
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
>
|
||
> 
|
||
|
||
### 如何获取 Seedream API - 火山引擎 (Volcengine)（针对中国用户）
|
||
|
||
我们将逐步演示如何将 Seedream API 集成到 z.ai 示例中。
|
||
|
||
https://www.volcengine.com/experience/ark?launch=seedream
|
||
|
||
访问页面后，点击登录。
|
||
|
||
|
||
|
||
登录后，找到页面右上角的充值选项。
|
||
|
||
|
||
|
||
进行充值需要实名认证。
|
||
|
||
|
||
|
||
认证成功后，你可以充值 1 元用于测试。
|
||
|
||
https://console.volcengine.com/finance/fund/recharge
|
||
|
||
|
||
|
||
返回初始界面并点击 API 访问。
|
||
|
||
|
||
|
||
首先，创建一个 API key，然后点击选择选项。
|
||
|
||
|
||
|
||
这将带你进入第 2 步。在这里，你需要确认调用的服务是 Seedream 4.0，并复制提供的调用示例。
|
||
|
||
|
||
|
||
准备好 API key 和调用示例后，你可以直接将它们粘贴到 z.ai 中以生成前端交互演示。
|
||
|
||
重要提示：这里的默认示例相对复杂。记得禁用“添加水印”选项和“流式响应”选项，以确保不生成水印且不会发生请求失败。
|
||
|
||
|
||
|
||
输入提示词后，你将收到生成的结果。享受它吧！
|
||
|
||
|
||
|
||
# 让它更有趣
|
||
|
||
完成基本功能后，我们可以尝试给我们的程序添加一些新花样！如果你觉得蛇吃单词或字符的过程有点枯燥，你可以让蛇吃不同颜色的单词，并相应地改变蛇的颜色。
|
||
|
||
你还可以为“吃”的过程添加特效，或者引入触发特效的魔法单词——比如增加蛇的速度或大小。另一个想法是每当蛇吃一个单词时就让模型生成一首诗和一幅图，而不是等到它吃掉八个单词。
|
||
|
||
如果觉得这些有挑战性，你可以直接向语言模型求助！它可以提供创意建议，让你的游戏更有趣。试一试吧！
|
||
|
||
```JavaScript
|
||
1. "单词解锁世界" 机制
|
||
每当蛇吃掉一个单词，LLM 会对该单词进行诗意联想（例如，“树”→“森林”、“绿荫”），图像模型会即时为该单词生成一个小艺术品。这些图像逐渐拼凑成一个独特的、玩家创造的全景图，所以玩家每次游玩都在“作画和写诗”。
|
||
|
||
2. "诗歌拼图" 玩法
|
||
蛇吃掉的每个单词都会触发 LLM 生成简短的诗句，图像模型生成插图。这些诗句和图像像拼图一样组合在一起，在回合结束时形成一首 AI 协作的诗和画。
|
||
|
||
3. "魔法单词" & "故事分支"
|
||
特殊的“魔法单词”（例如，“风”、“夜”、“梦”）不仅触发 LLM 生成诗歌，还会改变场景的情绪或主题——将生成图像的风格转变为夜晚、暴风雨或梦幻般的氛围。
|
||
分支故事：LLM 在开始时给出一个主题或谜语（例如，“秋天的回忆”）。玩家的单词选择直接影响故事和诗歌的演变，图像模型实时更新背景和视觉效果。
|
||
|
||
4. "实时互动生成"
|
||
每个单词之后，LLM 生成一行对话或描述，游戏中的 NPC 可以对玩家“说话”，或者环境可以相应地改变。
|
||
蛇的外观或游戏中的障碍物可以根据吃掉的单词在视觉上发生变化，这要归功于图像模型。
|
||
|
||
5. "创作 & 分享"
|
||
玩家可以在会话结束时保存并分享他们 AI 创作的诗歌和图像，炫耀他们独特的“AI 协作”。
|
||
“最美诗歌+艺术”、“最有创意单词组合”等排行榜，鼓励重玩和创造力。
|
||
|
||
6. "按句贪吃蛇" 挑战
|
||
反向模式：LLM 给出一句诗或一个谜语，玩家必须引导蛇按顺序吃掉单词来重构句子。吃错单词会通过图像生成模型触发有趣或艺术性的后果。
|
||
|
||
7. "主题关卡" & "风格选择"
|
||
游戏开始时，玩家选择一个主题（例如，“童话”、“科幻”、“唐诗”），LLM 和图像模型都会调整单词选择、诗歌风格和视觉效果以匹配，使每次运行都感觉新鲜。
|
||
|
||
8. "现场共创"
|
||
当吃掉一个特殊单词时，LLM 可以提示玩家输入短语或选择风格，然后 AI 生成相应的诗句和插图，使其成为真正的人类-AI 共创。
|
||
|
||
9. "AI 彩蛋 & 成就"
|
||
某些单词组合被 LLM 识别为特殊主题或内部笑话（例如，“月亮”、“桂花”、“河岸”），触发稀有的诗句和插图，奖励探索。
|
||
|
||
10. "成长的故事"
|
||
随着蛇的成长，LLM 生成一个连续的故事诗，图像模型创建一个无缝的长卷或全景图，所以玩家同时在“写作、绘画和玩耍”。
|
||
```
|
||
|
||
此外，我们还可以要求 LLM 帮你直接生成项目级的提示词。在上一节中，我们只自己写了贪吃蛇游戏的提示词。现在让我们尝试让大模型生成一个带有整体框架和实现路径的提示词（你可以直接用 z.ai 生成）：
|
||
|
||
> 我想让 AI 生成一个网页贪吃蛇游戏，需要一个更完整的提示词，让生成结果更令人印象深刻和有趣。请生成相应的提示词。当前目标是：生成一个贪吃蛇游戏，需要实现吃不同单词生成诗歌的功能，并且应该包含图像生成模块。
|
||
|
||
z.ai 的回复将会是这样的：
|
||
|
||
|
||
|
||
我们可以使用这个提示词在全栈开发模式下重新生成项目：
|
||
|
||
|
||
|
||
|
||
|
||
# 更多参考案例
|
||
|
||
除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。
|
||
|
||
创造任何我们想创造的东西，甚至尝试搞砸一切！然后重头再来！
|
||
|
||
```YAML
|
||
1. AI 艺术画廊平台
|
||
描述：一个展示 AI 生成艺术作品的在线画廊，用户可以上传、分享和评论 AI 艺术作品。
|
||
功能：用户账户系统、艺术作品上传和展示、评分系统、分类浏览、AI 生成工具集成。
|
||
技术亮点：React/Vue 前端、Node.js 后端、MongoDB 数据库、AI API 集成。
|
||
|
||
2. 复古游戏档案馆
|
||
描述：一个致敬经典游戏的网站，包含游戏历史、玩法指南和在线可玩复古游戏。
|
||
功能：游戏数据库、时间轴展示、在线模拟器、用户评论、游戏收藏功能。
|
||
技术亮点：响应式设计、WebGL/Canvas 游戏实现、RESTful API、用户认证系统。
|
||
|
||
3. 可持续生活追踪器
|
||
描述：一个帮助用户通过环保提示和社区挑战来追踪和减少碳足迹的网站。
|
||
功能：个人碳足迹计算器、目标设定、进度追踪、社区挑战、环保知识库。
|
||
技术亮点：数据可视化、移动端优化、社交功能、推送通知。
|
||
|
||
4. 虚拟厨房助手
|
||
描述：一个基于 AI 的烹饪指导平台，提供个性化食谱推荐和分步烹饪说明。
|
||
功能：食谱数据库、食材识别、个性化推荐、烹饪计时器、营养分析。
|
||
技术亮点：图像识别 API、机器学习推荐系统、语音控制、实时视频指导。
|
||
|
||
5. 地下音乐发现平台
|
||
描述：一个专注于独立和新兴艺术家的音乐流媒体平台，提供独特的发现体验。
|
||
功能：音乐流媒体、艺术家资料、个性化推荐、播放列表创建、社区评论。
|
||
技术亮点：音频流处理、推荐算法、社交功能、音乐可视化。
|
||
|
||
6. 极简任务管理系统
|
||
描述：一个具有禅意美学的任务管理工具，专注于简单和高效的任务组织。
|
||
功能：任务创建和分类、优先级设置、进度追踪、团队协作、数据分析。
|
||
技术亮点：极简 UI 设计、拖放功能、实时同步、跨平台兼容性。
|
||
|
||
7. 科幻写作工坊
|
||
描述：一个为科幻作家提供创意工具和灵感的平台，包括世界观构建辅助和角色开发工具。
|
||
功能：故事结构工具、角色资料、世界观构建模板、写作统计、社区反馈。
|
||
技术亮点：富文本编辑器、数据可视化、协作编辑、AI 辅助创作。
|
||
|
||
8. 个人知识图谱
|
||
描述：一个帮助用户构建个人知识网络，可视化并连接各种想法和信息的工具。
|
||
功能：节点创建和连接、标签系统、搜索功能、导入/导出工具、可视化图表。
|
||
技术亮点：图数据库、数据可视化算法、Markdown 支持、跨设备同步。
|
||
|
||
9. 虚拟植物园
|
||
描述：一个互动植物百科全书，用户可以探索植物世界并创建虚拟花园。
|
||
功能：植物数据库、3D 植物模型、生长模拟、园艺指南、社区展示。
|
||
技术亮点：3D 渲染、季节变化模拟、AR 集成、植物识别 API。
|
||
|
||
10. 编程挑战竞技场
|
||
描述：一个面向程序员的在线竞赛平台，具有各种难度级别的编程挑战。
|
||
功能：挑战问题、代码编辑器、自动评估、排行榜、学习路径。
|
||
技术亮点：代码沙箱环境、实时评估系统、算法可视化、社交学习功能。
|
||
```
|
||
|
||
还有... 如果你喜欢玩游戏，让我们一起尝试创造游戏吧！
|
||
|
||
```SQL
|
||
1. 3D 开放世界 RPG
|
||
描述：一个具有广阔开放世界、任务和角色成长的奇幻 RPG。
|
||
功能：昼夜循环、动态天气、技能树、多人合作、制作系统。
|
||
技术亮点：Three.js 或 Babylon.js 用于 3D 渲染、服务器端游戏逻辑、角色自定义、存档系统。
|
||
|
||
2. 第一人称射击 (FPS) 竞技场
|
||
描述：一个快节奏的多人 FPS，具有各种游戏模式和地图。
|
||
功能：团队死斗、夺旗、武器自定义、排位赛。
|
||
技术亮点：WebGL/Three.js 用于 3D 图形、多人网络代码、命中检测、语音聊天。
|
||
|
||
3. AI 国际象棋和多人游戏
|
||
描述：一个功能齐全的国际象棋平台，具有 AI 对手和在线对战功能。
|
||
功能：AI 难度级别、残局挑战、锦标赛模式、回放分析。
|
||
技术亮点：国际象棋逻辑库、WebSocket 用于实时对战、ELO 排名系统、反作弊。
|
||
|
||
4. 麻将在线多人游戏
|
||
描述：一个具有在线多人游戏和计分功能的传统麻将游戏。
|
||
功能：多种规则集、私人房间、排名系统、回放功能。
|
||
技术亮点：牌匹配逻辑、实时多人游戏、大厅系统、分数追踪。
|
||
|
||
5. 回合制策略游戏
|
||
描述：一个具有网格战斗和单位管理的战术策略游戏。
|
||
功能：战役模式、遭遇战、单位升级、战争迷雾、多人对战。
|
||
技术亮点：网格移动系统、AI 决策、回合同步、存档/读档系统。
|
||
|
||
6. 计时赛赛车游戏
|
||
描述：一个专注于计时赛和赛道记录的 3D 赛车游戏。
|
||
功能：多条赛道、汽车自定义、幽灵回放、排行榜。
|
||
技术亮点：3D 汽车物理、赛道编辑器、回放系统、在线排行榜。
|
||
|
||
7. 卡牌对战游戏 (卡组构建)
|
||
描述：一个策略卡牌游戏，玩家构建卡组并与对手战斗。
|
||
功能：卡牌收集、卡组构建、排位赛、赛季活动。
|
||
技术亮点：卡牌游戏逻辑、匹配系统、AI 对手、卡牌动画。
|
||
|
||
8. 大逃杀 (俯视 2D)
|
||
描述：一个俯视 2D 大逃杀游戏，具有缩小的游戏区域和战利品机制。
|
||
功能：单人和小队模式、武器多样性、局内事件、排行榜。
|
||
技术亮点：实时多人游戏、区域缩小逻辑、战利品生成系统、匹配。
|
||
|
||
9. 恐怖生存游戏 (第一人称)
|
||
描述：一个具有资源管理和逃生机制的第一人称恐怖游戏。
|
||
功能：氛围环境、解谜、敌人 AI、多重结局。
|
||
技术亮点：动态照明、声音设计、敌人寻路、存档系统。
|
||
|
||
10. 音乐节奏游戏 (3D)
|
||
描述：一个 3D 节奏游戏，玩家随着音乐节拍击打音符。
|
||
功能：多种难度级别、赛道编辑器、自定义歌曲支持、排行榜。
|
||
技术亮点：音频分析、节拍同步、3D 音符轨道、输入时机检测。
|
||
```
|
||
|
||
# 总结
|
||
|
||
这就是完整的教程！你可能需要 **4 小时** 才能完成所有内容并构建你自己的贪吃蛇游戏。不要着急——探索、实验并享受这个过程。
|
||
|
||
如果你有不同的游戏想法，那也很好。最重要的是开始构建。
|
||
|
||
祝你好运，欢迎来到 AI 原生创造力的世界 :)
|
||
|
||
# 📚 Assignment
|
||
|
||
- 完成一份属于自己的 AI 原生的贪吃蛇游戏。
|
||
- 若有余力，根据更多参考案例实现不同种类好玩的 AI 原生游戏。
|