用 AI 反向代码案例：揭秘 OpenAI Canvas 如何根据用户操作拼接生成 Prompt
内容提要
文章介绍了如何利用AI反向工程来理解商业产品功能，以OpenAI的Canvas为例。通过Chrome Dev Tool找到生成Prompt的代码模块，并使用关键词搜索定位代码文件。然后，将代码转换为易读的TypeScript代码并添加中文注释。接着，生成Prompt并发送请求处理返回结果。文章还提供了代码架构和流程图，详细描述了代码逻辑。
关键要点
-
文章介绍了如何利用AI反向工程理解商业产品功能，以OpenAI的Canvas为例。
-
第一步是通过Chrome Dev Tool找到生成Prompt的代码模块。
-
使用关键词搜索定位代码文件，找到生成Prompt部分的源码。
-
第二步是复制代码去LLM提问或还原代码，针对关心的部分进行还原。
-
第三步可以进一步追问，生成流程图帮助理解代码逻辑。
-
附录中提供了完整的TypeScript代码示例，包含用户操作类型、消息类型等枚举。
-
代码架构包括枚举类型、接口、主要函数和外部方法。
-
流程图描述了handleUserOperation函数的处理步骤，清晰展示了代码逻辑。
-
生成提示的函数根据用户操作类型生成对应的提示，调用sendPromptRequest发送请求。
延伸问答
如何使用Chrome Dev Tool找到生成Prompt的代码模块？
可以通过Chrome Dev Tool的Sources Tab，右键点击top并选择“Search in all files”，然后使用Prompt中的关键词进行搜索，找到生成Prompt的源码文件。
如何将混淆的JavaScript代码还原为TypeScript代码？
可以复制混淆的JavaScript代码到LLM提问，要求将其还原为可读性高的TypeScript代码，并添加中文注释。
生成Prompt的主要函数是哪个？
生成Prompt的主要函数是generatePrompt，它根据用户操作类型生成对应的提示。
如何生成流程图以帮助理解代码逻辑？
可以通过请求生成代码逻辑的架构图和流程图，帮助理解代码的运行步骤和结构。
代码架构中包含哪些主要部分？
代码架构主要包括枚举类型、接口、主要函数和外部方法等部分。
如何处理用户操作并生成提示？
通过handleUserOperation函数处理用户操作，提取必要信息后调用generatePrompt生成提示，并通过sendPromptRequest发送请求。
