用 AI 反向代码案例：揭秘 OpenAI Canvas 如何根据用户操作拼接生成 Prompt
内容提要
文章介绍了如何利用AI反向工程来理解商业产品功能，以OpenAI的Canvas为例。通过Chrome Dev Tool找到生成Prompt的代码模块，并使用关键词搜索定位代码文件。然后，将代码转换为易读的TypeScript代码并添加中文注释。接着，生成Prompt并发送请求处理返回结果。文章还提供了代码架构和流程图，详细描述了代码逻辑。
延伸解读
反向工程的实用性
通过反向工程，开发者可以深入理解商业产品的功能实现，尤其是如何生成用户交互的提示。这种方法不仅能帮助开发者优化现有功能，还能为新功能的设计提供灵感。掌握这种技能对于提升开发效率和产品质量至关重要。
代码可读性的重要性
将复杂的代码转换为易读的TypeScript代码，不仅提高了代码的可维护性，也使得团队成员之间的协作更加顺畅。良好的代码注释和结构化设计能够帮助新加入的开发者快速上手，减少学习曲线。
流程图的辅助作用
生成流程图可以直观地展示代码逻辑和处理步骤，帮助开发者更好地理解代码的运行机制。尤其在处理复杂的用户操作时，流程图能够清晰地指引开发者关注关键环节，避免遗漏重要逻辑。
Q&A
如何使用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发送请求。
