使用 React 和 OpenAI API 构建您自己的 ChatGPT 克隆

kazi01 · 发表于 2024-1-9 13:52:53

在本教程中，我们将逐步介绍如何构建自定义聊天机器人应用程序，该应用程序将允许我们提出问题并获得高质量的答案。机器人会记住之前的提示，模拟上下文感知对话。 Backward Skip 10s Play Video Forward Skip 10s GIF 动画展示了我们完成的机器人的运行情况在当今快速发展的数字环境中，聊天机器人已成为寻求改善客户交互和简化用户体验的企业和开发人员不可或缺的工具。 OpenAI 的 ChatGPT已从尖端实验转变为聊天机器人开发的强大动力。它的迅速崛起无疑是令人瞩目的，吸引了全世界的用户。该项目的演示代码可以在CodeSandbox上找到。您必须在文件中提供您自己的 OpenAI API 密钥.env才能进行实时测试。要获取它，请在OpenAI上创建一个帐户，登录，导航到API 密钥并生成新的 API 密钥。

目录规划功能和 UI 我们的应用程序将基于React，我们将使用OpenAI API来访问数据并使用CSS 模块进行样式设置。利用 React 将使我们能够创建动态且响应迅速的用户界面，从而增强整体用户体验。 OpenAI API 将使我们能够访问高级语言处理功能，为创建富有洞察力的交行业电邮清单互提供数据。此外，CSS 模块将使我们能够保持模块化设计，促进应用程序的高效开发和定制。我们将要实现的功能包括：指定的输入区域，用户可以在其中制作提示，邀请上下文相关的查询。提交_允许用户将提示提交到 API，从而启动对话过程。消息项目将在对话窗口中显示为聊天风格的消息，从而增强交互式聊天体验。显示 ChatGPT 回复的消息项目将提供对话流。历史_将列出用户最近的所有提示。这也将允许用户重新访问之前的对话。

一个清除按钮，允许删除生成的内容，为新对话提供一个干净的状态。下图显示了我们基于组件的线框。应用程序界面的线框图整个应用程序将包装在主容器中，该容器将所有元素保存在一起。它将进一步分为两列布局。第一列将包含来自用户和 ChatGPT 的所有消息。在该栏的底部，会有一个输入区域和一个用于提交提示的按钮。第二列将保存所有最近提示的历史记录。在该列的底部，将有一个清除按钮，允许用户擦除生成的内容。选择配色方案应用程序设计将优先考虑内容感知的便捷性。这将使我们能够提供一些重要的好处：用户将能够快速理解所呈现的信息，从而获得更直观和用户友好的体验。它还将增强可访问性，确保不同背景和能力的个人能够轻松浏览和参与内容。下图显示了我们的配色方案。

Gregorymus · 发表于 2024-10-20 07:28:04

		自动登录	找回密码
密码			立即注册