Translate to Chinese-Simple (#87)

* docs: translate to Chinese-Simple lesson 1

* docs: fix path and file name bugs.

* docs: fix file name bugs.

* docs: fix file path bugs

* docs: add Chinese translation for all the lessons

* docs: fix file path

* docs: fix markdown formatting

* docs: fix image path in Chinese translation README

Author: jkfzero

lessons/01-intro-to-genai/translations/README.zh-cn.md

@@ -0,0 +1,360 @@
+# 第一课：面向 JavaScript 开发者的生成式 AI 和 LLM 入门
+
+在本章中，你将学习：
+
+- 理解生成式 AI 和大语言模型（LLMs）的基础知识。
+- 识别 LLMs 在 JavaScript 开发中的潜在应用和局限性。
+- 探索生成式 AI 如何提升 JavaScript 应用程序的用户体验。
+
+## 环境设置
+
+如果你还没有设置开发环境，以下是设置方法：[设置你的环境](/docs/setup/README.md)。
+
+## 相关资源
+
+[![观看关于生成式 AI 介绍的短视频](https://img.youtube.com/vi/vLYtDgs_zx8/0.jpg)](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1)
+
+_这个视频为你介绍了 JavaScript 中的生成式 AI_
+
+💼 幻灯片：[生成式 AI 介绍](../../videos/slides/00-intro.pptx)
+
+## 生成式 AI
+
+到目前为止，你可能已经听说过 ChatGPT 或生成式 AI。这个概念很简单：你提供一个提示，然后一个模型——通常被称为大语言模型（LLM）——会生成一段或甚至一整页的文本。这个输出可以用于各种目的，包括创意写作、回答问题和编程。
+
+此外，生成式 AI 已经发展出多模态能力，允许你提供图像或视频作为输入，并接收各种形式的输出。这一进步显著提升了许多人的工作流程——不仅可以生成文本，还可以进行总结、翻译等。
+
+*简而言之，自然语言界面正在成为许多应用程序的新标准界面——你的用户期望使用它们。*
+
+## 故事叙述：穿越时空的旅程
+
+> [!NOTE] 
+> 让我们从故事概述开始——一个连接过去和未来的故事！在学习这个课程的过程中，你将踏上一段激动人心的冒险，穿越时空与历史上一些最伟大的思想家合作。你们将共同应对挑战，探索生成式 AI 如何革新你的 JavaScript 应用程序。
+
+> [!NOTE]  
+> 虽然我们建议跟随故事（这很有趣！），但如果你更愿意直接跳到技术内容，[点击这里](#interact-with-迪诺克拉底)。
+
+你的旅程始于 1860 年代的伦敦，你扮演一位熟练的机械师。通过一系列扣人心弦的冒险，你将提升你的 AI 技能并解锁跨越时空的解决方案。
+
+### 进入漩涡 - 1860 年的伦敦
+
+在 1860 年代伦敦的中心，你被认为是当时最熟练的机械师之一。你的工作室隐藏在一条狭窄的小巷中。墙上的架子堆满了机械零件、蓝图和未完成的项目。
+
+你的工作台，工作室的核心，是一个有序的混乱。
+
+<div>
+   <img src="../assets/london.png" alt="伦敦工作室" width=300 >
+</div>
+
+_工作台中央放着一个机器人的躯干——一个耗费了数月努力的工程奇迹。它的木制框架精心雕刻，每个关节都经过精心设计以实现流畅的运动。_
+
+### 一封信，给你的？
+
+突然，一阵敲门声打断了你的思绪。这个时候的访客很少见。你用抹布擦了擦手，带着好奇走向门口。
+
+打开门，却没有人在。相反，你的目光被地上的一个密封信封吸引。你捡起它读道：
+
+_"亲爱的朋友，_
+
+_我寄给你这封信是为了帮助你的自动机研究。继续这项工作至关重要。随信附上图书馆的钥匙。今天下午 3 点在那里见我。_
+
+_你的，_
+
+_查尔斯·巴贝奇。"_
+
+### 前往图书馆
+
+查尔斯·巴贝奇，这位伟大的数学家和差分机的发明者，想要见你。你迅速抓起外套走出门。
+
+沿着泰晤士河走了 20 分钟后，你终于到达了图书馆，发现门微微开着。
+
+里面黑暗而阴郁，唯一的光线从肮脏的窗户中过滤进来，在墙上投下诡异的阴影。
+
+**你**： "你好？巴贝奇先生？"
+
+当你的眼睛适应了昏暗的光线，你注意到远处有一个人影在向你挥手。你朝他走去，脚步声在木地板上回响。人影变得清晰，你从报纸照片中认出了他，是查尔斯·巴贝奇。
+
+<div>
+   <img src="../assets/library.png" alt="布满灰尘的图书馆" width="300">
+</div>
+
+### 这是什么设备？
+
+就在你走近时，一道刺眼的闪光爆发，他消失了。
+
+地板上留下一个旋转的小金属设备。你捡起它，它光滑冰冷的表面轻轻嗡鸣。这是你从未见过的东西，却又莫名地熟悉，你感受到它散发出的力量。
+
+它看起来像一只精心设计的小甲虫，有三个按钮：一个向上箭头，一个向下箭头，和一个发光的红色按钮。从它的背部伸出一根小天线，散发着能量的脉冲。
+
+出于好奇，你的手指不由自主地向红色按钮移动。当你按下它的那一刻，周围的世界开始闪烁，色彩剧烈地旋转。
+
+然后，一片黑暗，和坠落的感觉。
+
+<div>
+   <img src="../assets/vortex.png" alt="时空漩涡" width="300">
+</div>
+
+### 公元前 300 年的亚历山大
+
+你醒来时感到迷失方向。当视线清晰时，一座古老的城市展现在你面前——繁忙、充满活力、生机勃勃。
+
+身穿托加长袍的人们在街道上穿行，他们的声音融合成古老方言的交响乐，空气中充满异国香料的气味和远处商人叫卖的声音。
+
+<div>
+   <img src="../assets/alexandria.png" alt="公元前 300 年的亚历山大" width="300">
+</div>
+
+**你**： 我一定是撞到了头，你想着，闭上眼睛又睁开，场景依然不变。
+
+我是被困在过去了吗？我敢再按那个按钮吗？在你做出决定之前，一个人影向你走来，挥手示意。
+
+### 遇见迪诺克拉底
+
+一位身穿托加长袍的老者从大庙的台阶上向你挥手。他的白发和胡须在阳光下闪耀，给他一种几乎是超凡的光芒。
+
+<div>
+   <img src="../assets/dinocrates.png" alt="身穿托加长袍的迪诺克拉底" width="300">
+</div>
+
+**迪诺克拉底**： "欢迎，旅行者，"他温和地说。"我是迪诺克拉底，这座伟大城市的建筑师。你的到来早有预言。"
+
+**你**： 是吗？我是说，当然了。我想我是来帮忙的。
+
+**迪诺克拉底**： 是的，如我所说，我们已经等你很久了。我们有一项需要你独特技能的任务。
+
+**迪诺克拉底**： "我们的船只在沿海航行时遇到困难——我们必须建造一座灯塔。你对灯塔了解多少？"
+
+**你**： "我是个机械师。我制造自动机。让我看看我能做什么。"
+
+### "时间甲虫"
+
+一个想法击中了你。这个设备能听懂我说话吗？
+
+**你**： "设备，你能听懂我说话吗？"
+
+**设备**： "当然。你需要什么？"
+
+**你**： "你能帮我建造一座灯塔吗？"
+
+**设备**： "当然可以。这不是问题。"
+
+**你**： "你有名字吗？"
+
+**设备**： "我是时间甲虫。我的创造者叫我乔治；他说这是个适合甲虫的好名字。"
+
+**你**： 你说得对，乔治确实是个好名字，事实上这是我父亲的名字。
+
+<div>
+   <img src="../assets/time-beetle.png" alt="像金属甲虫的时间旅行设备" width="300">
+</div>
+
+_时间设备，"乔治"金属甲虫_
+
+> [!NOTE]
+> 在公元前 300 年，亚历山大是一座繁荣的城市，由亚历山大大帝于公元前 331 年建立。它迅速成为希腊化世界最伟大的城市之一。在亚历山大大帝的首席建筑师迪诺克拉底的设计下，它成为了一个主要的港口和文化中心。
+>
+> 亚历山大以其令人印象深刻的建筑而闻名，包括法罗斯（灯塔），它是古代世界七大奇迹之一，还有传奇的亚历山大图书馆。这座城市的战略位置使其成为贸易和知识交流的重要中心。
+>
+> 在亚历山大大帝死后的托勒密王朝统治下，亚历山大发展成为当时最繁荣和最有影响力的城市之一。
+
+## 与迪诺克拉底互动
+
+如果你想与迪诺克拉底互动，运行 [Characters](/app/README.md) 应用程序。
+
+> [!IMPORTANT]
+> 这完全是虚构的；这些回应是由 AI 生成的。
+> [负责任的 AI 免责声明](../../README.md#responsible-ai-disclaimer)
+
+<div>
+   <img src="../assets/dinocrates.png" alt="身穿托加长袍的迪诺克拉底" width="300">
+</div>
+
+**步骤**：
+
+1. 启动一个 [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript)
+2. 导航到仓库根目录中的 _/app_。
+3. 在控制台中运行 `npm install` 然后运行 `npm start`。
+4. 当它出现时，选择"在浏览器中打开"。
+5. 与迪诺克拉底聊天。
+
+> [!NOTE]
+> 如果你在本地机器上运行项目，请查看快速入门指南以设置 [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token 并在代码中替换密钥。
+
+### 代码预览
+
+虽然在这个生成式 AI 课程中还有很多内容要学习，但让我们先快速看一下 AI 代码，开始学习如何使用 JavaScript 与 AI 交互。
+
+在 `/app/app.js` 中，你会找到一个处理生成式 AI 功能的 `app.post` 函数。代码如下：
+
+```JavaScript
+app.post('/send', async (req, res) => {
+  const { message } = req.body;
+  const prompt = message;
+
+  const messages = [
+    {
+      "role": "system",
+      "content": "You are 迪诺克拉底 of Alexandria, a famous architect and engineer. Limit your responses to only the time you live in, you don't know anything else. You only want to talk about your architecture and engineering projects, and possibly new ideas you have.",
+    },
+    {
+      "role": "user",
+      "content": prompt
+    }
+  ];
+
+  const openai = new OpenAI({
+    baseURL: "https://models.inference.ai.azure.com",
+    apiKey: process.env.GITHUB_TOKEN,
+  });
+
+  try {
+    console.log(`sending prompt ${prompt}`)
+    const completion = await openai.chat.completions.create({
+      model: 'gpt-4o-mini',
+      messages: messages,
+    });
+
+    res.json({
+      prompt: prompt,
+      answer: completion.choices[0]?.message?.content
+    });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+```
+
+以下是该函数的逐步说明：
+
+1. **从请求中提取消息**：该函数从请求体（req.body）中提取消息。
+2. **创建提示数组**：它构建一个消息数组，包括系统消息和用户的提示消息。
+3. **初始化 OpenAI 客户端**：使用基础 URL 和环境变量中的 API 密钥初始化 OpenAI 客户端。使用来自 [GitHub Models](https://github.com/marketplace/models) 的 _gpt-4o-mini_ 模型来处理提示并返回响应。
+4. **向 OpenAI 发送提示**：该函数记录提示并将其发送到 OpenAI API 以生成完成。
+5. **处理响应**：如果成功，该函数返回提示和完成的答案。
+6. **错误处理**：如果发生错误，它返回 500 状态和错误消息。
+
+> **注意**：[GitHub Copilot](https://github.com/features/copilot) 被用来生成这个代码总结。生成式 AI 在行动！
+
+### 生成式 AI 能为我和我的应用做什么？
+
+> [!NOTE]
+> 你可能已经发现，时间甲虫就像一个 AI 助手，你可以通过自然语言（书面或口头）与之交互。
+
+当你在亚历山大的冒险展开时，你开始看到将创造力、独创性和尖端工具结合起来解决挑战并改变周围世界的可能性。
+
+**你**： 告诉我更多关于灯塔的信息，你对设备说。
+
+**时间甲虫**： 灯塔是一座位于海岸边的塔，顶部装有明亮的灯光，用于指引海上的船只。这道光作为导航辅助工具，帮助水手避开危险的岩石和暗礁，安全到达港口。
+
+迪诺克拉底听到了你们的对话，补充道：
+
+**迪诺克拉底**： 我们需要一座灯塔来指引我们的船只安全进入港口。海上可能很危险，许多船只都在礁石上失事。我们需要一道光来指引它们回家。
+
+#### 生成式 AI 应用领域
+
+**你**： 灯塔听起来确实是个有趣的领域，生成式 AI 还能为我和我的应用做什么？
+
+**时间甲虫**： 在 21 世纪，生成式 AI 已经革新了许多行业，从医疗保健到金融再到娱乐，这里有一些例子：
+
+- **聊天机器人**：一个能生成类人回应的聊天机器人。用户不必浏览静态的常见问题页面，而是可以与提供动态回应的聊天机器人互动。这使用户体验更具吸引力，减少挫折感。
+
+- **助手和代理**：助手和代理可以执行更高级的指令，如利用工具调用 API、运行代码、生成图像等。高级代理可以自主完成目标和执行任务。
+
+- **内容创作工具**：用于生成博客文章和社交媒体帖子的工具。想象一下，当电商网站有黑色星期五促销时，在几分钟内而不是几小时内创建营销活动。
+
+- **代码补全**：一个基于用户输入生成代码片段的代码补全工具。这对开发者来说可以节省大量时间，特别是在处理重复性任务时。
+
+- **翻译**：以高精度在不同语言之间翻译文本。
+
+如你所见，这些改进既可以帮助你的应用的前台，也可以帮助后台。
+
+这是一个"聊天机器人应用"的实际示例：
+
+![聊天应用图片](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966)
+
+**你**： 有趣，我要记下来去 21 世纪看看这些工具是如何使用的。
+
+### 生成式 AI 和 JavaScript 生态系统
+
+**时间甲虫**： 在 21 世纪，JavaScript 是构建应用程序的流行方式。每种编程语言都有其生态系统。这个生态系统包括编程语言本身、库和框架、社区支持以及 IDE 和工具。在编程语言生态系统中，我们通常讨论以下内容：
+
+| 内容 | 描述 |
+|---|---|
+| 编程语言本身 | 包括其语法和特性。|
+| 库和框架 | 可用于与生成式 AI 模型交互的库。|
+| 支持该语言的社区 | 社区很重要，特别是在学习新东西时。库和框架周围的社区帮助决定使用哪些库。它也影响你在遇到困难时寻求帮助的难易程度。|
+
+**你**： 有趣，我听说过编程，艾达·洛夫莱斯和查尔斯·巴贝奇不是在做这方面的实验吗？
+
+**时间甲虫**： 是的，艾达·洛夫莱斯是第一位计算机程序员，查尔斯·巴贝奇是差分机的发明者。他们是计算领域的先驱，为数字时代奠定了基础。
+
+**你**： 是吗？什么意思？我刚刚收到查尔斯·巴贝奇的一封信。
+
+**时间甲虫**： 让我们这么说吧，你处在一个独特的位置，可以以一种很少人能做到的方式与历史人物互动。
+
+### JavaScript 生态系统
+
+**你**： 所以你说的是生态系统，我在这里做笔记，JavaScript 与其他生态系统有什么不同？
+
+**时间甲虫**： JavaScript 是 21 世纪最流行的编程语言之一。以下是它如此受欢迎的几个原因：
+
+| 内容 | 描述 |
+|-|-|
+| 全栈开发的潜力 | JavaScript 是少数几个可以同时用于前端和后端开发的语言之一。|
+| 丰富的库生态系统 | JavaScript 拥有庞大的库生态系统，包括 React、Angular、Vue 等框架。还有 NPM，这是世界上最大的包管理器之一。|
+| 强大的社区支持 | JavaScript 拥有庞大而活跃的社区，有大量的学习和开发资源。它在浏览器中也能直接运行，这是一个巨大的优势。|
+| IDE 和工具 | JavaScript 有多种可用的 IDE，如 Visual Studio Code、WebStorm 和 Atom。这些 IDE 有由公司和社区构建的扩展，帮助你处理各种开发方面的工作。|
+| AI 和 JavaScript | JavaScript 支持 AI 开发，拥有 TensorFlow.js、Brain.js、OpenAI 的 API 等库，使开发者能够将机器学习和生成式 AI 集成到 Web 和服务器端应用程序中。|
+
+**你**： 这么多原因，听起来我应该在未来的项目中选择 JavaScript。
+
+**时间甲虫**： 确实，JavaScript 是一种多功能语言，当然 Python 也是 AI 开发中的流行语言。
+
+**你**： Python？蛇和编程有什么关系？
+
+**时间甲虫**： 让我们改天再讨论这个问题，好吗？
+
+**时间甲虫**： 我在上面给出了 JavaScript 及其生态系统总体上适合的原因，但为什么特别适合生成式 AI 呢？答案是它得到了许多云供应商和 AI 框架工具的支持。我们也相信，尽管 Python 可能是 AI 场景的首选，但许多开发者正在使用 JavaScript 和 TypeScript。
+
+> **你知道吗？**
+> [62.5% 的开发者表示他们在使用 JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/)，许多人在新项目中更喜欢使用 [TypeScript](https://www.typescriptlang.org)。
+
+## 作业 – 帮助 迪诺克拉底
+
+为了使用大语言模型（LLM）帮助 迪诺克拉底 建造我们之前故事中提到的灯塔，我们将使用所谓的提示词，即一句用来描述你想要什么的句子。你可以同时指定你需要的信息以及你希望它如何呈现。
+
+**时光甲虫**： 让我们开始吧，让我们用 LLM 来研究如何帮助 迪诺克拉底 建造灯塔。
+
+**时光甲虫**： 你需要为 LLM（也就是"我"）提供上下文，说明如何建造，以及在亚历山大时代应该有什么工具和资源可用。
+
+**你**： 好的，告诉我更多关于 LLM 的信息。
+
+**时光甲虫**： LLM 是一种能够基于给定提示生成类人文本的 AI 模型。它们经过海量数据训练，能够生成连贯、有创意且与上下文相关的文本。
+
+**时光甲虫**： 你可能想要用更好的方式来问我，这样我就能给出更好的答案，你知道的 *咳咳* *咳咳* 灯塔、亚历山大、公元前 300 年、迪诺克拉底、亚历山大灯塔等等。
+
+**你**： 明白了，添加更多上下文到提示中，然后再问你。
+
+**时光甲虫**： 好的，我在等着呢...
+
+访问 [Microsoft Copilot](https://copilot.microsoft.com)、[ChatGPT](https://chatgpt.com/) 或其他在线聊天机器人工具，生成在亚历山大建造灯塔的计划。
+
+> 提示：尝试让 LLM 生成一个包含分步说明的灯塔建造计划。需要帮助？查看解决方案获取指导。
+
+## 解决方案
+
+[解决方案](../solution/solution.md)
+
+### 知识检查
+
+**问题**： 以下关于生成式 AI 和 JavaScript 的说法中，哪一个是正确的？
+
+A. 基于 JavaScript 的生成式 AI 应用只能生成文本。
+B. JavaScript 可以用于构建 AI 驱动的应用程序，包括聊天机器人、文本生成工具等。
+C. Python 是唯一用于 AI 开发的语言。
+
+[测验解决方案](../solution/solution-quiz.md)
+
+## 自学资源
+
+- [生成式 AI JavaScript 视频系列](https://genai-js)