Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 ChatGPT 在 React 中构建文本摘要应用 简介 前提条件 计划 ChatGPT 入门 前端效果 结论 资源

使用 ChatGPT 在 React 中构建文本摘要应用程序

介绍

先决条件

计划

ChatGPT 入门

前端

结果

结论

资源

介绍

在当今的数字时代，信息爆炸令人应接不暇。新闻、研究论文、社交媒体更新和网络内容层出不穷，让人难以跟上节奏，更别提理解其中的意义了。

因此，文本摘要应用应运而生。借助文本摘要应用，用户可以快速轻松地将大量文本浓缩成更短小、更易于理解的格式。它还可以通过突出显示内容的主要观点和关键信息来提高理解力，使信息更容易被记住。

此外，文本摘要提供了一种解决方案，它可以自动将冗长的文本浓缩成更短、更易于管理的版本。

您可以在这里找到本教程的代码。

项目演示

点击此处查看项目演示。

先决条件

要学习本教程，您必须事先了解 React 和 Node.js 版本 18+。

计划

在本教程中，您将使用 OpenAI 的 ChatGPT 模型，在 React 中构建一个文本摘要应用程序。
您将学习如何：

  • 搭建一个 React 项目
  • 安装必要的依赖项，
  • 向 ChatGPT 模型发送文本，
  • 从模型的响应中提取摘要文本。

此外，您还将发现增强文本摘要功能的方法。

ChatGPT 入门

要开始使用 ChatGPT 并获取您的 OpenAI API 密钥，请按照以下步骤操作：

  • 登录或在OpenAI创建一个免费帐户。按照说明操作，即可进入您的控制面板。点击您的个人资料图片以查看菜单栏，然后​​点击“查看 API 密钥”进入 API 密钥页面。

查看 API 密钥

  • 点击“创建新密钥”以创建新的 API 密钥。
    创建新的密钥

  • 复制 API 密钥并妥善保管，以便在教程后续部分中使用。
    API密钥

安装依赖项，例如 OpenAI API 客户端库

下一步是安装官方的 OpenAI 库，然后进入项目目录并运行以下命令：

npm install openai
Enter fullscreen mode Exit fullscreen mode

OPENAI_API_KEY在 .env 文件中添加以下内容。
在项目根目录下，创建一个.env文件并添加以下代码：

REACT_APP_OPENAI_API_KEY = your-api-key-here
Enter fullscreen mode Exit fullscreen mode

请确保您使用的是之前在本教程中从 OpenAI 获取的有效 API 密钥，而不是这里的您的 API 密钥。

ChatGPT概述及其功能

ChatGPT由OpenAI开发，是一款大规模语言生成模型。它采用 GPT-2 架构，并可在各种网页数据集上运行。使用 ChatGPT，您可以完成文本补全、翻译、摘要以及生成类似人类语言的文本。

ChatGPT能够以对话的方式回答复杂的问题。它能够理解人类问题背后的真正含义，这使其具有突破性意义。

ChatGPT 的特点之一是能够生成连贯且符合上下文的文本。由于该模型学习了多种输入风格和格式，因此它可以适应不同的输入风格格式，并生成与上下文相符的文本。

ChatGPT的另一项重要功能是能够生成语法正确且语义清晰的文本。使用该模型来概括文本是确保其理解文本含义的最佳方法。

除了处理海量输入外，ChatGPT 还可以生成长篇文本。用它撰写论文、文章甚至书籍都是可行的。

前端

引导 React 应用程序

使用Create React App，让我们通过在终端中运行以下命令来创建一个 React 项目：

npx create-react-app text-summarization


cd text-summarization


npm start
Enter fullscreen mode Exit fullscreen mode

上面的命令text-summarization使用该create-react-app工具创建一个名为的新 React 应用程序，导航到该应用程序，并启动一个开发服务器，以便在浏览器上实时查看您对应用程序所做的更改。

实现文本摘要功能

在src/App.js文件中，将其内容替换为以下内容：


    import "./App.css";
    import { Configuration, OpenAIApi } from "openai";
    import { useState } from "react";

    function App() {
      const [text, setText] = useState("");
      const [summarizedtext, setsummarizedtext] = useState("");
      const [loading, setLoading] = useState(false);

      const configuration = new Configuration({
        // apiKey: process.env.OPENAI_API_KEY,
        apiKey: process.env.REACT_APP_OPENAI_API_KEY,
      });
      const openai = new OpenAIApi(configuration);

      const HandleSubmit = (e) => {
        setLoading(true);
        e.preventDefault();
        openai
          .createCompletion({
            model: "text-davinci-003",
            prompt: generatePrompt(text),
            temperature: 0.6,
            max_tokens: 100,
          })
          .then((res) => {
            if (res.status === 200) {
              setLoading(false);
              setsummarizedtext(res?.data?.choices[0]?.text);
            }
          })
          .catch((err) => {
            console.log(err, "An error occured");
          });
      };

      function generatePrompt(text) {
        return `Summarize this ${text}. and break them into seperate lines`;
      }

      return (
        <div className="App_">
          <div className="header">
            <h1 className="header_text">
              Text <span className="text_active">Summarizer</span>
            </h1>
            <h2 className="header_summary">
              {" "}
              Summarise your text into a shorter length.
            </h2>
          </div>
          <div className="container">
            <div className="text_form">
              <form>
                <label>Enter your text</label>
                <textarea
                  rows={14}
                  cols={80}
                  placeholder="Put your text"
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                />
              </form>
            </div>
            <div>
              <button type="button" onClick={HandleSubmit}>
                {loading ? "loading..." : "Summarize"}
              </button>
            </div>
            <div className="summarized_text">
              <label>Summarized text</label>
              <textarea
                placeholder="Summarized text"
                cols={80}
                rows={14}
                value={summarizedtext}
                onChange={(e) => setText(e.target.value)}
              />
            </div>
          </div>
        </div>
      );
    }

    export default App;
Enter fullscreen mode Exit fullscreen mode

上面的代码创建了一个表单，供用户输入文本，并显示该文本的摘要版本。

import {Configuration, OpenAIApi } from openai

`import` 语句从 openai 库导入两个模块：`import`Configuration和`import`。`import`是一个允许您配置 Openai API 的类。您可以通过设置 API 密钥来完成此操作。OpenAIApi
Configuration

OpenAIApi这是一个允许您与 OpenAI API 交互的类，例如发送文本进行摘要并接收摘要后的文本。作为代码的一部分，这些类与 OpenAI API 交互以摘要用户的输入。
用户的输入通过useState钩子进行跟踪，并传递给 OpenAI API 进行摘要。

摘要文本会显示在单独的文本区域中。该函数使用 Openai 库与 API 进行交互，并使用 React HooksuseState()来跟踪文本输入、摘要文本和加载状态。

这段代码使用generatePrompt()函数来格式化 API 的文本输入。点击“摘要”按钮后，HandleSubmit会调用该函数，将文本发送到 API，并将加载状态设置为 true，同时显示“正在加载...”。收到摘要文本后，加载状态变为 false，并显示摘要内容。

增添风格

要设置项目样式，请将src/App.css文件中的自定义 CSS 样式替换为以下内容：

    * {
      margin: 0;
      padding: 0;
    }

    #root {
      background: #61dafb;
    }

    .App_ {
      margin: 0 auto;
      width: 100%;
      max-width: 70%;
      background: #61dafb;
      height: auto;
    }


    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px;

    }

    textarea {
      width: 100%;
      margin-top: 10px;
    }


    .summarized_text {
      margin-bottom: 30px;
    }


    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-bottom: 20px;
    }

    .header_text {
      font-size: 3.75rem;
      line-height: 1;
      color: #ffffff;
    }

    .text_active {
      color: tomato;
    }

    .header_summary {
      font-size: 1.5rem;
      line-height: 2rem;
      color: #ffffff;
    }

    button {
      padding: 0.75rem 2.5rem;
      border-radius: 0.5rem;
      border: #ffffff;
      background: tomato;
      color: #ffffff;
    }

    label {
      color: #ffffff;
      font-size: 1.2rem;
      line-height: 1.25rem;
      font-weight: 500;

    }
Enter fullscreen mode Exit fullscreen mode

结果

测试应用程序

要测试项目，请进入项目text-summarization目录并运行：

npm start
Enter fullscreen mode Exit fullscreen mode

请localhost:3000在浏览器中访问您的测试总结应用程序。

以下是屏幕上应该显示的内容示例：

结论

总之，本文展示了如何使用 OpenAI 的 ChatGPT 模型在 React 中构建文本摘要应用程序。

这款应用允许用户将大量文本浓缩成更短、更易于理解的格式，从而提高信息的理解和记忆。通过循序渐进的教程，读者学会了如何搭建 React 项目、安装必要的依赖项、向 ChatGPT 模型发送文本，以及从模型的响应中提取摘要文本。

通过本文所获得的知识，读者现在可以使用功能强大的 ChatGPT 模型创建自己的文本摘要应用程序。

资源

OpenAI 文档：
如何使用 React Native 和 NextJS 结合 ChatGPT 构建跨平台 AI 应用；
如何使用 API 在 Next.js 中构建文本摘要应用

文章来源：https://dev.to/femi_akinyemi/build-a-text-summarization-app-in-react-with-chatgpt-2dk7
“2024年你不可或缺的十大Dev...
解锁 Meta Llama LLM...