基本上就是这样，刷新后网站立即上线并加载了部分或全部游戏。今天我们将介绍 CodeRabbit 的一项有趣新功能——Change Stack（变更堆栈）。为了让大家对视频内容有个大致了解，我们将重点演示如何处理大型代码库的变更，包括拉取请求（PR）和合并操作。这是一个旨在简化 PR 处理和代码理解流程的工具，尤其适合那些现在也能构建应用、但面对 GitHub 生态中复杂的差异对比感到畏惧的新手。CodeRabbit，特别是其 Change Stack功能，直击这一痛点，大幅降低了理解门槛并显著加速了流程。

接下来我们将对“Ultimate Play”网站进行重大更新，该站点主要展示视频中的单文件 HTML 游戏。此外，根据评论区反馈，我们将增加一个基准测试板块，汇总对最佳模型及其评分的看法。本期视频的高潮将是部署约 1.2 万行 AI 生成的代码，并验证 CodeRabbit 的 Change Stack 功能如何确保直接部署时的稳定性。感谢 CodeRabbit 赞助本期视频，能与知名创作者合作让我非常兴奋，这也支持了我制作此类网站和托管服务。

下一步是将整个重设计版本推送到 GitHub 仓库，让 CodeRabbit 介入协助。我使用 Mac 和 Claude Desktop App 进行设计，因此直接在本地操作更为合适。代码库包含约 1.2 万行新代码，将替换现有内容。按下回车键后，Claude 开始推送更改，我们需要等待片刻。随后切换到 GitHub查看拉取请求时，就能初步看到 CodeRabbit 的作用。

这次推送的是 V2 重设计版本，这是长期努力的结果，并非随机生成的代码。熟悉频道的观众可能已了解该网站的存在，感谢大家的支持，我很高兴能将其外观提升到一个新水平。此外还涉及硬件部分：作为内容创作者，我实际上正在设计一款廉价的游戏主机，用于运行这些 HTML 游戏。虽然尚未准备好，但网站上已添加了相关占位符和美术资源。

完成 Fable 的身份验证后，代码成功推送到 GitHub。“Ultimate Play”仓库的拉取请求已打开。虽然有一些与 Vercel 相关的信息，但向下滚动后可以看到 CodeRabbit AI 的评论。机器人提示正在处理新变更，可能需要几分钟。完成后会出现“Change Stack”按钮。点击该按钮将进入专门针对此 PR 的页面，查看可能阻碍部署的问题、与 AI 代理聊天以及简化后的差异列表。

当“Review Change Stack”按钮出现后，我们点击进入专用界面。这里展示了所有变更的详细信息。除了核心的差异分析外，我还想展示一个相关功能：你可以设置审查者的配置文件风格。目前设置为“Chill”（轻松），但也可以选择“Quiet”（安静）或“Asertive”（强硬）。

这里还有很多其他有趣的选项，其中一些甚至有点滑稽，但看起来很酷，还有一些则相当实用。因此，如果我们向下滚动，可以看到这里有很多带有复选框以及文本框的功能项，供你进行各种操作。我想特别展示的一点是……让我找找看。是一首诗的功能：“为代码审查生成一首诗”。你可以开启或关闭此功能，默认情况下它是关闭的，从商业角度来看这大概是最明智的选择。不过，能看到这个功能还是很酷的。

此外，如果我们一直滚动到底部，我们会发现有一个“反垃圾”（anti-slop）功能。即启用或禁用在低质量 PR 检测中的“垃圾内容”过滤。这里有一些有趣的设置，虽然它们不一定与我们今天要做的事情直接相关，但我还是想提一下，因为我觉得这些功能挺有意思的。首先我要注意的是左侧窗格中的概览部分，目前它是按层级排序的。

这些层级本质上是将所有被更改的具体文件以及相关的差异（diffs）等内容，根据其相互关联性进行分组。系统并没有被告知“哦，这些需要归为一组”，而是它查看了所有提议的更改，然后根据文件的位置将它们分组。此外，它还基于某种层级结构进行分组，例如 UI 部分位于下方等。

这相当有趣，相比于另一种可能更混乱的查看方式——如果我们点击这里的“文件”按钮，没有分组功能时它们会以更传统的方式排列。这种分层方式让处理和理解实际要进行的更改变得更加简单直观。另外，如果我们悬停在“数据合同和持久性”上，会看到一个工具提示，提供更多关于它的信息以及每个层级的具体统计数字。

我们还可以看到这里有一个图表，它仅基于读取该 PR 所获取的信息，绘制了该平台数据关系图。现在，如果我们查看这里的某些差异部分，如果你熟悉传统 diff 的话，通常它只会说“这里被更改了”，而实际上它会告诉我们具体改变了什么内容，而不是仅仅显示某行被删除、某行被添加。

根据屏幕当前的缩放级别，我们可以看到不同详细程度的概览。有一点需要注意：这里显示“从 Side React 到 Stripe 的依赖关系”。在这种情况下，这并不完全准确。因此，手动阅读仍然很重要。但即使如此，将这些内容以更清晰的方式整合在一起，并提供更高层级的概览来理解这些具体的差异，而不是仅仅看到一堆红绿相间的行号和加减号，这确实很有帮助。

老实说，我认为像这样的工具有其存在的价值，尤其是随着越来越多的人进入“氛围编程”（vibe coding）等领域。并非每个人都会接受从头开始的基础训练，以原生地理解拉取请求、合并、差异等概念。因此，像这样的工具仍然可以教授良好的实践和软件开发中更改应遵循的架构方式，同时提供更具可读性的视图。

我认为随着越来越多的人能够利用现代 AI 系统部署他们以前可能无法处理的软件，这一点将变得越来越重要。另一个挺酷的功能是：当然这里列出了更改的数量，但此外，如果我们点击此处，我们实际上可以看到语义更改或语义大纲。这些链接到它识别出具体问题的部分。

我们要记住，这对所有层级中的每一个单独更改都有效。为了强调这一点，如果我们关闭刚才的部分，我们还可以标记为“已查看”，然后它会跳转到下一个。然而，我想展示的是：如果我们点击这里，这就是我们的“层级上下文面板”，它将向我们显示它指出的可能存在问题的事项（取决于严重程度）。

它还提供了建议，我们可以点击此处向 AI 代理显示提示词，以了解如何具体修复此问题。但这并不是我们从中获得的唯一内容。还有另外一些功能，我需要找到一个能展示这些功能的例子。因此，当我向下滚动以大致查看时……让我稍微展开一点，以便看到更多内容。

在某些情况下，我们还会看到一个“建议修复”方案。如果我们在下拉菜单中显示它，它会基本上展示差异和建议的修复内容，正如顶部标题所述。我想特别提到的是，这对于我们这里的每一个单独层级都会发生变化。因此，如果我们点击另一个层级，我们会看到摘要数量和评论数量会改变。

发现的严重程度也会根据我们所在的具体层级而有所不同。这使得许多内容在这个相当易用的前端界面中得到了很好的组织，因为我们可以分层查看相互关联的内容，而不是试图像以前那样在杂乱的信息中梳理。能够逐层查看与彼此相关的内容确实简化了很多工作。

此外，在这些一些问题中，例如这个例子，我们实际上会得到一个“分析链”。如果我们点击这里的下拉菜单，我们可以看到它确实执行了一个脚本。在这个特定案例中，我认为这基本上是在检查如果两个人恰好上传了完全相同的同一个游戏 slug（标识符），会发生什么情况，这可能会导致问题。

但由于在 200 毫秒内更新完全相同内容的概率极低，所以我们可以安全地忽略它。但我们确实看到了所有这些具体的输出结果，并且确认了这一点。

然后运行该脚本只是为了做个记录，这挺酷的。所以，针对我们刚才通过分析链查看的那个具体问题，如果我们在这里点击它，实际上就会打开它，我们可以看到这在当前的视图中发生了。如果点击这个回复框，我们可以提供上下文，这样它就会知道如何根据我们代码库中的变更来评判未来的运行结果。

本质上，我们可以给它一些上下文提示，比如“是的，这是正确的，我会修复它。”然而，由于该网站的流量较低，这不需要被视为主要问题。在未来，它可以被归类为轻微或更低严重程度的问题。然后它会基于我们特定的风格或约束条件进行学习，这些通常需要根据网站的流量、架构等由人类来告知它。

这为将来处理类似特定情况提供了上下文，并针对我们特定的部署实例或代码库进行了更好的调整。现在，另一件挺酷的事情是，当我们浏览所有这些内容时——基本上包括评论和所有内容的摘要——这对每一个单独的层级都是适用的，这真的很酷。我认为这让事情变得容易得多。

然而，这里还有另一件事更符合“AI原生”的概念，那就是如果我们回到右侧菜单并点击代理按钮，这实际上会让我们与一个AI代理进行聊天，讨论我们在该特定页面上看到的所有内容。在这个范围内，让我问一个我凭直觉就能轻松回答的问题：如果我拼写错误会发生什么？

不用担心，只有当我通过该网站销售硬件设备时，我才会最终实现支付功能，而且那也将是开源的。所以提到Stripe的唯一原因就在这里。但我问它：“如果未设置Stripe API密钥会发生什么？”因为我的硬件项目还远未完成，所以没关系。它被设计为不需要设置即可运行。

这正是我们希望通过此查询得到的答案，但这表明我们可以从这个界面直接与代理聊天，讨论我们在下面看到的所有内容。特别强调的是在将这些更改推送到生产环境之前。所以我们得到了答案：如果未设置Stripe密钥，应用程序会优雅地降级而不是崩溃。

基本上这就是对该问题的简要总结（TLDR），但我们有引用来源，显示它是如何通过查看所有这些变更来形成答案的。因此，缺少密钥只会禁用商店结账流程并返回503响应，而应用程序的其他部分正常运行。

这是针对这个问题的正确答案，也是一个简单的问题，我凭直觉就能轻松回答答案，因为我现在不想启用该功能，但我想保留它以备不时之需。所以当我们接近将这些内容推送到生产环境时，我们会先修复它们。在我进入下一步之前，我想强调一点：

如果我们查看这里的概览部分，我们会看到对已完成工作的相当不错的概述。它还会生成这些更改的摘要。我们还有更改的分步介绍，其中也显示了一些图表之类的内容。然后这里还有一些易于消化的一级内容，例如“高优先级关注点”，它不会阻止合并但可能需要注意。

当然这些都是超链接。所以如果我们点击那里的“查看评论”，我们会得到许多额外的相关信息，旨在帮助我们修复这些问题，例如AI代理的提示词，我们可以将其复制并粘贴到Claude或其他工具中。当然，如果我们想告诉它“哦不，这不是这个特定仓库中的问题”，我们也有回复的选项。

我将在更改堆栈UI中做的最后一件事是在提交审查窗格中留下一个评论，大致总结我们在这里发现的内容。完成后，我将点击“提交审查”。所以下一步是回到特定的拉取请求页面。我们看到有Code Rabbit的摘要，然后如果我们向下滚动一点，基本上我们有一个选项可以一键修复它发现的所有问题。

我们有自动修复下拉菜单（我目前在这里选中了），我们可以选择推送到该分支的提交（推荐这样做），或者创建一个包含修复内容的新PR。在这种情况下，我认为我将选择推荐的选项，即一键修复所有内容，我预计这可能需要一点时间。

过了一段时间后，我们可以看到自动修复状态已更改为“已完成”，如绿色对勾所示。好吧，所以我们基本上准备好合并了。这里唯一的问题是Vercel构建失败，我们可以忽略它，因为它拒绝从一台未识别的机器上生成预览。一旦我从自己的GitHub账户推送，那就完全没问题了。

所以我们将在这里点击“合并拉取请求”。确认合并后，一旦完成（可能很快），我们刷新几次网站，新版本就会上线。基本上，我们就这样完成了对真实事物的实际生产部署，这正是令人兴奋的地方所在。

好吧，就这样。正如我们刷新时那样，现在网站已经上线了，并且它拾取了网站上已存在的一些或所有游戏，因为它们只是保存在后端的数据库中。所以基本上，这里上传的所有游戏仍然在这里，这让我很兴奋。

当然，仍需要进行一些更改，主要是关于质量保证和更新模型等方面。但是如果我们点击其中一个游戏（例如Fable 5根据参考照片制作的低多边形演示赛车），它仍然可以正常工作，这真的很酷。

我们有投票功能，还有重新混合提示的能力。像这些东西我们需要整理一下。但真正的大亮点是，我们只是对后端有很多内容的网站进行了一些重大更改（而不是迁移），而且多亏了Code Rabbit，我们能够相当简单地理解很多东西。

这里到底发生了什么？你正在查看一个较旧的快照。评论将附加在此提交上，并显示已过时。因此，这可能是我们要提到的另一件事：它会像时间线一样按 chronological 顺序记录你所做的更改等内容。因此，它基本上可以用来在你仓库中的特定内容之间编织一条线索。

比如，如果两个用户上传了相同的内容并生成了相同的 slug（网址后缀），这可能会成为一个问题。但我告诉它：“这是一个低流量网站，所以我们不必将其视为优先处理的问题。”它会记住上下文，并且你也会看到整个过程中更改的时间线。

如果我们再回去查看 V2 重新设计的已合并审查，我们会看到 CodeRabbit 的摘要、审阅者 CodeRabbit Bot 以及所有应用的更改等。现在网站已经上线，我基本上只需要专注于让它在实际运行中达到不错的状态。

为此，我将添加一些条目，以便展示模型审查视频中显示的结果并进行播放。同时我们还会涉及其他几项内容，例如尚未推出的 CYD 控制台，以及“加入等待名单”按钮目前可能没有任何功能。虽然它有可能有作用，但尚未连接任何逻辑。

因此，基本上还需要做一些额外工作才能将其完善到理想状态。为了总结这次更新，我们回到 CodeRabbit 以及这里的变更堆栈（Change Stack）。借助它，我们能够以快速且易于理解的方式看到大量流程。对于那些缺乏软件经验或完全没有经验的初学者来说，这些流程原本可能会让他们感到恐惧。

我认为需要强调和带走的核心观点是：这让理解这一切变得简单得多。它展示更改的方式、提供对这些内容的纯英文解释、对其进行超链接处理，以及根据这些部分在仓库中如何组合来将其组织成有意义的层级。

你能够留下评论以引导它进行未来的更改，还有时间线功能让它理解并能回顾之前的更改。此外还有 AI 聊天功能，你可以专门针对这些 PR（拉取请求）提问。这非常有用，对于可能不熟悉所有这些内容的人来说，它起到了很好的帮助作用，因为这些东西往往令人生畏。这几乎是一种对实际合并和代码审查的初学者友好型方法。

因此，今天的视频大概要结束了。首先我们上线了一个新网站，这让我很兴奋，并且我们会确保它得到频繁更新——我会务必做到这一点。此外，我们还审视了一个非常酷的平台：CodeRabbit 变更堆栈。这真的很棒。

再次感谢 CodeRabbit，基本上让我能够以快速的速度继续制作视频，同时也花费时间和精力及费用来制作这类内容。这就像是一个有趣的小爱好——至少在 CYD 显示屏到来之前是这样吧。好吧，这就是全部内容了。

如果你对 CodeRabbit 或 V2 重新设计有任何问题，欢迎在评论区留言。当然，还有一个置顶评论链接供你自己探索。好了，视频到此结束。感谢观看。