《用 AI 反向代码案例：揭秘 OpenAI Canvas 如何根据用户操作拼接生成 Prompt》
用一个实例来看看如何借助 AI 来反向代码，帮助你更好的理解一些商业产品功能的实现。这里以 OpenAI 新推出的 Canvas 为例，我们看看它是如何根据用户的操作生成不同 Prompt 的。
第一步先找到相应的代码模块
打开 Chrome Dev Tool，监听 Network Request，在操作 Cavans 时，你会发现它会根据你的操作拼接了一段 Prompt。
（图1）
接下来我们来尝试通过关键词搜索找到这部分代码在哪个文件。
（图2）
第二步复制代码去 LLM 提问或者还原代码
取决于代码体积，如果 1000 行以内的代码可以直接要求还原成可读性高的代码，如果超过 1000 行可以基于某个模块提问，完整还原可能有点困难。要还原代码可以参考《分享一点前沿 AI 用法：用 o1 逆向代码》：
网页链接
这里代码有差不多 2000 行，我只要还原我关心的构建 Prompt 部分代码就好。
> 下面是一段混淆后的 JavaScript 代码，请先阅读代码，然后将根据用户操作拼接 Prompt，并发送请求处理返回结果的相关代码还原成类型定义完整的 TypeScript 代码，要求： - 命名友好，类型完整，不要使用 any 类型 - 加上适当的中文注释 - 下面代码中引用了一些外部方法，不需要生成这些外部方法，只需要注释中注明即可
>
> 以下是完整代码，请生成拼接 Prompt和发送请求的TypeScript代码：
然后你就可以得到完整的构建 Prompt 的代码
（图3）
第三步：进一步追问帮助你理解或者生成更多内容
如果你觉得代码还是看不太明白，可以继续提要求，比如画个流程图：
> 现在请将这部分代码的逻辑，生成一份架构图和流程图，方便理解它是如何运行的
（图4）
完整结果可以参考我同步发在博客上的文章：网页链接
用一个实例来看看如何借助 AI 来反向代码，帮助你更好的理解一些商业产品功能的实现。这里以 OpenAI 新推出的 Canvas 为例，我们看看它是如何根据用户的操作生成不同 Prompt 的。
第一步先找到相应的代码模块
打开 Chrome Dev Tool，监听 Network Request，在操作 Cavans 时，你会发现它会根据你的操作拼接了一段 Prompt。
（图1）
接下来我们来尝试通过关键词搜索找到这部分代码在哪个文件。
（图2）
第二步复制代码去 LLM 提问或者还原代码
取决于代码体积，如果 1000 行以内的代码可以直接要求还原成可读性高的代码，如果超过 1000 行可以基于某个模块提问，完整还原可能有点困难。要还原代码可以参考《分享一点前沿 AI 用法：用 o1 逆向代码》：
网页链接这里代码有差不多 2000 行，我只要还原我关心的构建 Prompt 部分代码就好。
> 下面是一段混淆后的 JavaScript 代码，请先阅读代码，然后将根据用户操作拼接 Prompt，并发送请求处理返回结果的相关代码还原成类型定义完整的 TypeScript 代码，要求： - 命名友好，类型完整，不要使用 any 类型 - 加上适当的中文注释 - 下面代码中引用了一些外部方法，不需要生成这些外部方法，只需要注释中注明即可
>
> 以下是完整代码，请生成拼接 Prompt和发送请求的TypeScript代码：
然后你就可以得到完整的构建 Prompt 的代码
（图3）
第三步：进一步追问帮助你理解或者生成更多内容
如果你觉得代码还是看不太明白，可以继续提要求，比如画个流程图：
> 现在请将这部分代码的逻辑，生成一份架构图和流程图，方便理解它是如何运行的
（图4）
完整结果可以参考我同步发在博客上的文章：
网页链接
