使用ChatGPT创建完整产品的7个经验教训
7 Lessons Learned in Creating a Complete Product Using ChatGPT
ChatGPT的编码能力使得在很短的时间内编写整个产品变得非常容易，只要你知道如何正确使用它
不久前，我与你分享了如何利用ChatGPT创建了自己的法语教师（顺便说一句，它是开源的）。我描述了我如何设计应用程序（特别是后端），以及如何连接和配置不同的基于AI的服务。但有一件事我几乎没有提到，那就是我如何创建应用程序的前端。你知道，我不是一个前端程序员，我对JavaScript的了解仅限于将其放置在<script></script>标签中。
但我心中有一个想法，我想要一个用户界面，而且是一个相当动态的界面。这意味着需要HTML、JavaScript和CSS，但我根本不知道如何开始编写这些代码。
我所知道的是我希望它的样子是怎样的。我心里有设计，并且如果我知道如何编写这些代码，我就知道我会怎么做。所以我决定采取一种新的、相当激进的方法——我会让ChatGPT为我编写代码。当时，我已经有了向ChatGPT提出与代码相关的请求的经验，但我从未尝试过如此复杂的事情。
嗯，当你阅读这些文字时，你知道它成功了——我仅仅通过用简单的英语解释给一个LLM（大型语言模型）看到了整个应用程序。我真的想再写一遍，只是为了确保我们都明白刚刚发生了什么：一个算法通过我用简单的英语解释，编写了一个完整的应用程序。😲
尽管令人惊讶，但这个过程并不像听起来那么简单，因此我想借此机会分享一些关于如何使用ChatGPT生成复杂代码的技巧。
1. 设计自己的界面
LLM是创建代码和内容的强大工具，但它们不会思考，它们只能满足请求（或者至少尽力而为）。这意味着你需要思考，特别是设计方面。在你开始向生成模型发送请求之前，确保你知道最终产品应该是什么样子。
更重要的是，你需要自己研究什么是最适合你的技术栈。因为你需要将复杂的应用程序分解为步骤（见下面的#2），LLM无法预见最终产品的样子，可能会使用次优的库或服务。
例如，ChatGPT为我生成的第一个UI是基于tkinter的，它创建的是一个实际的应用程序而不是一个Web界面。这使得创建动态UI变得更加复杂（并且在现在来说不太常见）。另一个尝试是基于steamlit的，它使得创建非复杂UI变得非常容易，但同样也不适用于复杂的请求（例如：“只在用户消息旁边添加一个播放录音按钮，但仅当用户录制了音频时”）。在我的情况下，我需要自己理解使用Flask是最佳选择。
2. 将其分解为任务并从简单开始
如果你让ChatGPT一次编写整个产品的代码，很可能会得到一段错误的代码。尽管它很“聪明”，但不要期望它能一次性注意到所有给定的细节。将你的设计分解为任务和阶段，从一些相对简单的东西开始，然后逐步添加。
例如，这是我的最终聊天界面，也是我最初设计和规划的界面：
你可以看到界面上有各种按钮和功能，然而，我向ChatGPT的第一个提示是：
为聊天机器人应用程序编写一个Python Web UI。用户输入提示的文本框位于屏幕底部，所有以前的消息都保留在屏幕上。没有特殊的按钮，消息旁边没有个人资料图片，没有特殊的东西。只是一个简单的聊天界面，这将是我构建的核心。这个提示产生了4个文件：
- 一个作为后端的Python文件（使用Flask）
- 一个HTML文件
- 一个JavaScript文件（使用jQuery）
- 一个CSS文件
有了这些，我可以开始使产品更加复杂。
你可能认为我自相矛盾了 – 告诉你将应用程序分解为小步骤，然后承认我的第一个提示生成了四个文件。对于ChatGPT的每个请求，完成任务所需的代码量与其非标准和特定程度之间存在权衡。要求一个完整的聊天界面将生成一个相当通用的东西，但需要大量的代码。要求“在导师消息旁边添加一个翻译按钮”，并确保它位于消息气泡的右侧，始终位于垂直中心和播放声音按钮的上方，这是一个非常具体的要求，因此它将成为一个独立的请求。
3. 仔细解释你真正想要的是什么
你对产品进行的每个请求和添加都可能涉及对多个文件的更改（每个文件的单个更改可能不止一个）。这意味着每个这样的请求都将创建新的变量、函数和端点，并将从不同的位置引用。ChatGPT将为它们提供有意义的名称，但它只能在你解释上下文时尽力而为。
例如，如果您想在产品中添加一个“保存”按钮，请优先以这样的方式询问：
在文本框左侧添加一个“保存会话”按钮。它应该有一个软盘图标。点击后，UI上的所有消息将保存到名为“saved_session.json”的JSON文件中而不是像下面这样缺乏上下文的提示：
在文本框左侧添加一个带有软盘图标的按钮。点击后，UI上的所有消息将保存到JSON文件中。优先选择上下文丰富的提示将产生更好的命名规范。
4. 非常清楚地知道你要求的内容
这是一个我必须解决但没有预料到的真正问题：我希望UI能够像ChatGPT中的效果一样，在我的法语导师生成的文本被实时显示。我用于创建导师响应的Python API（OpenAI ChatCompletion API）返回一个Python生成器，然后需要将其消耗并打印在屏幕上。所以我问ChatGPT：
编写一个JavaScript函数，用于消耗生成器并逐个更新消息文本我不知道的是 – 我从来没有写过任何严肃的JavaScript – 我要求了一些不可能的事情；JavaScript无法处理Python生成器。结果是，ChatGPT给我提供了各种奇怪而完全无用的解决方案，因为它试图按照我要求的方式来更改JavaScript代码。
你必须记住，ChatGPT会尽力满足你的请求，只要它们不违反其准则。在那个时候，我真正需要的是它告诉我我在要求一些愚蠢的东西，但它就是不会这样。
只有当我意识到我在要求不可能的事情时，这个问题才得以解决（老办法 – 谷歌和StackOverflow），然后我修改了我的提示，变成了这样：
给定响应生成器，添加功能以消耗生成器并逐个更新消息文本这导致JavaScript和Python文件的修改，从而实现了期望的结果。
5. 语言模型无法撤销其代码更改（以及如何撤销）
虽然ChatGPT在编写代码方面表现出色，但它仍然只是一个语言模型，在撤销自己的更改方面表现不佳，尤其是当你要求它撤销并回到两个或三个提示之前的状态时。在使用LLMs生成代码的过程中，我强烈建议您始终保留您满意的代码的最后一个工作版本的副本；这样，如果ChatGPT添加的一些新代码出现问题且无法修复，您可以轻松地将代码恢复到上次工作正常的状态。
但是有一个问题，因为如果您确实撤销了代码，您还需要撤销ChatGPT，以确保它准确了解您的代码现在的样子。最好的方法是启动一个新会话，并使用以下提示开始：
我正在构建一个聊天机器人应用程序。这是我的代码：HTML：```您的HTML代码```JavaScript：```您的JavaScript代码```CSS：```您的CSS代码```Python：```您的Python代码```在文本框左侧添加一个“保存会话”按钮。它应该有一个软盘图标。点击后，UI上的所有消息将保存到名为“saved_session.json”的JSON文件中。（您还可以将文件上传到ChatGPT的Code Interpreter中，该功能当时尚不可用）。如果提示太长而无法作为单个消息发送，请将其分成两个部分。在这些消息之间，点击“停止生成”，以防止机器人在其中插入不必要的文本。
6. 不要花太多时间纠结
使用ChatGPT编码的一个很棒的地方是，如果它写了错误的代码或者代码执行不符合预期，您可以将错误消息发送给它，它将相应地修复代码。
但并不总是这样。有时候ChatGPT无法修复错误，或者反而创建了另一个错误。然后我们将新的错误发送给它，并要求它再次修复。如果这种情况发生两次或三次以上，代码可能会被破坏得如此严重或过度修改，以至于无法正常工作。如果达到这一点，请停下来，撤销（参见上文）并重新构思您的请求。
7. 学会如何提示
虽然ChatGPT的整个意义在于您可以使用日常语言与其进行交互，但了解如何正确编写提示对结果有着巨大影响。我真诚建议您花时间学习如何做到这一点。例如，OpenAI和DeepLearning.AI提供的这门免费课程《Prompt Engineering》是必修的，特别是其中有关如何在单个提示中结合指令、代码和示例的课程。
关于提示，您可以学到的最重要的一点是，首先确保在提示中的自由文本和代码之间有明显的区别。所以，不要像这样写：
这是一个Python函数： def func(x): return x*2将其修改为，如果输入为负数，则返回其绝对值的平方根。而应该像这样写：
这是一个Python函数： ```def func(x): return x*2```将其修改为，如果输入为负数，则返回其绝对值的平方根。此外，如果可能的话，请提供一些输入-输出示例。这是解释LLM应该做什么的最佳方法，因为它消除了您请求中的任何歧义（如果输入是正数，模型应该返回什么？保持x*2还是可能什么都不返回？）：
这是一个Python函数： ```def func(x): return x*2```将其修改为，如果输入为负数，则返回其绝对值的平方根。示例：输入：2，输出：4输入：-9，输出：3奖励：选择正确的LLM
请记住，“ChatGPT”是一个网络产品的名称，而不是模型本身。免费版本提供GPT-3.5的访问权限，而付费版本则包括GPT-4，在编码任务中的性能大幅提升。新的Code Interpreter使其更加出色，因为它实际上可以运行和测试代码。
即使你决定选择另一个LLM来合作，确保你选择的那个在编码任务上表现良好。否则，这些建议都将毫无帮助。
在我总结这一切时，我想要意识到与LLM沟通时最重要的事情是，每个词都很重要。LLM们不能思考，也不能真正理解我们想要什么，除非我们明确地以他们需要的方式解释给他们听，因为——谢天谢地——他们不是人类（还不是？），他们只是一种工具。就像每一种工具一样——如果你不知道如何使用它，你将无法完成任何工作。我希望你在下一个项目中能够找到这些建议有用！
