如何使用GPT API创建一个文本总结器

一路向北g
620 阅读3分钟

你是否厌倦了阅读冗长的文章和文件，并希望快速了解其本质？

文本总结器是一个可以帮助你实现目标的小工具。在本篇文章中，我们将解释如何使用 GPT API创建一个文本总结器。

在我们深入了解技术细节之前，首先让我们了解什么是文本总结器，以及为什么它是有用的。文本总结器是一个能够自动创建大型文本文件或文章摘要的程序。摘要通常是原始文本的一个较短版本，包含最重要的信息。文本总结器之所以有用，有几个原因。它们可以为需要快速了解文件内容的读者节省时间和精力。它们还可以帮助作者和编辑确定文本中最重要的部分，提高其可读性。

现在，让我们继续讨论使用GPT API创建文本总结器的技术部分。要开始使用GPT-3 API，你首先需要在OpenAI网站上注册一个API密钥。一旦你有了API密钥，你就可以用它来向API发送请求并接收JSON格式的响应。

现在让我们继续创建React TypeScript网络应用。首先，我们需要安装所需的依赖项。打开你的终端，运行以下命令：

npm install react react-dom typescript @types/react @types/react-dom axios tailwindcss postcss-cli autoprefixer

接下来，我们需要创建一个新的React TypeScript应用程序。在你的终端运行以下命令：
npx create-react-app my-app --template typescript
这将在my-app目录下创建一个新的React TypeScript应用。接下来，我们需要设置Tailwind CSS。在src目录下创建一个名为tailwind.css的新文件，并添加以下代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

这就从Tailwind CSS中导入了基础、组件和实用样式。接下来，我们需要配置PostCSS来处理Tailwind的CSS文件。在根目录下创建一个名为postcss.config.js的新文件，并添加以下代码：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

现在我们准备开始构建应用程序。首先，让我们创建一个简单的表单，用户可以在其中输入他们想要总结的文本。在src目录下创建一个名为Summarizer.tsx的新文件，并添加以下代码：

import React, { useState } from 'react';
import axios from 'axios';

const Summarizer: React.FC = () => {
  const [inputText, setInputText] = useState('');
  const [summaryText, setSummaryText] = useState('');

  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputText(event.target.value);
  };

  const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
      prompt: `Summarize the following text:\n${inputText}`,
      max_tokens: 60,
      n: 1,
      stop: ['\n']
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`
      }
    });

    setSummaryText(response.data.choices[0].text.trim());
  };

  return (
    <div className="mx-auto max-w-2xl">
      <h1 className="text-2xl font-bold mb-4">Text Summarizer</h1>
      <form onSubmit={handleFormSubmit}>
<textarea
       className="w-full h-64 px-3 py-2 border border-gray-300 rounded-md resize-none mb-4"
       placeholder="Enter text to summarize"
       value={inputText}
       onChange={handleInputChange}
     />
<button
       className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
       type="submit"
     >
Summarize
</button>
{summaryText && (
<div className="border border-gray-300 rounded-md px-3 py-2 mt-4">
<p>{summaryText}</p>
</div>
)}
</form>
</div>
);
};

export default Summarizer;

这将创建一个简单的表单，其中有一个用于输入要总结的文本的文本区，以及一个用于触发总结的按钮。当表单被提交时，我们使用axios 库向GPT-3 API发送一个POST请求，输入的文本作为提示。我们设置max_tokens 参数来限制摘要的长度，并设置stop 参数来确保摘要以一个完整的句子结束。一旦我们收到来自API的响应，我们就在组件状态中设置摘要文本，并在页面上渲染它。

最后，我们需要将Summarizer 组件添加到主App组件中。打开src 目录中的App.tsx 文件，用以下内容替换现有代码：

import React from 'react';
import Summarizer from './Summarizer';

const App: React.FC = () => {
  return (
    <div className="bg-gray-100 min-h-screen py-8">
      <div className="container mx-auto px-4">
        <Summarizer />
      </div>
    </div>
  );
};

export default App;

这样就把主App组件设定为以Summarizer组件为主要内容。

以上！我们已经使用GPT-3 API、React TypeScript和Tailwind CSS创建了一个文本总结器网络应用。这个应用程序可以帮助用户快速总结大型文本文件和文章，节省他们的时间和精力。通过一些额外的功能和改进，这个应用程序可以进一步优化搜索引擎排名和用户参与。

avatar
文章
阅读
粉丝