Node.js 和 React.js 教程视频：DIY 你自己的 ChatGPT

Table of Contents

1. Introduction
2. Setting Up the Backend
3. Installing Dependencies
4. Creating the Server
5. Configuring the API Key
6. Setting Up the Chat GPT Endpoint
7. Handling Post Requests
8. Sending the Query to OpenAI
9. Parsing the Response
10. Running the Server
11. Testing with Postman
12. Setting Up the Frontend
13. Creating the React App
14. Cleaning up the Project
15. Importing Dependencies
16. Creating State Variables
17. Handling Form Submission
18. Sending Request to Backend
19. Displaying the Response
20. Starting the Backend and Frontend
21. Testing the Chat GPT API

Introduction

In this tutorial, we will learn how to Create a web application using the shared GPT API. We will be using Node.js and React for the backend and frontend respectively. The application will allow users to Interact with the OpenAI GPT model by sending queries and receiving responses.

Setting Up the Backend

To get started, we need to set up the backend of our web application. We will use Node.js for the backend implementation.

Installing Dependencies

Before creating the server, we need to install some necessary packages. Use the following commands to install the required packages.

npm install express axios body-parser

Creating the Server

In the root directory of your project, create a new file called server.js. This file will contain the code for our backend server.

Configuring the API Key

To configure the OpenAI API Key, go to the OpenAI Website and sign up to get the key. Once You have the key, create a new file called .env in the root directory of your project. In the .env file, add the following line:

API_KEY=your_api_key

Replace your_api_key with the actual API key you obtained from OpenAI.

Setting Up the Chat GPT Endpoint

Next, we need to set up the endpoint for our Chat GPT API. In the server.js file, add the following code:

const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

app.post('/chat', async (req, res) => {
  const query = req.body.query;

  try {
    const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
      prompt: query,
      max_tokens: 100,
    }, {
      headers: {
        'Authorization': `Bearer ${process.env.API_KEY}`,
        'Content-Type': 'application/json',
      },
    });

    res.json({ response: response.data.choices[0].text });
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'An error occurred' });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`);
});

Handling Post Requests

In the code above, we set up a POST endpoint /chat that will handle the requests sent to it. The request body will contain a query that we pass to the OpenAI GPT model for generating a response.

Sending the Query to OpenAI

To send the query to the OpenAI API, we make a POST request to the https://api.openai.com/v1/engines/davinci-codex/completions endpoint. We include the query as the prompt and set the max_tokens parameter to limit the length of the response.

Parsing the Response

After receiving the response from the OpenAI API, we parse it to extract the generated text. We then send the generated text as the response back to the client.

Running the Server

To start the backend server, run the following command in the terminal:

node server.js

The server will start running on port 3000, or the port specified in the environment variable PORT.

Testing with Postman

We can test the Chat GPT API using Postman. Set the request method to POST and the URL to http://localhost:3000/chat. In the request body, set the content Type to JSON and provide a query in the following format:

{
  "query": "Hi, how are you?"
}

Click the Send button to receive a response from the Chat GPT API.

Setting Up the Frontend

Now that we have the backend set up, we can move on to creating the front end of our web application. We will use React for the frontend implementation.

Creating the React App

In the root directory of your project, create a new folder called frontend. Open the terminal and navigate to the frontend folder. Then, run the following command to create a new React app:

npx create-react-app chat-gpt-frontend

Cleaning up the Project

After creating the React app, remove the unnecessary files and code from the project. Delete the following files from the src folder:

• logo.svg
• reportWebVitals.js
• setupTests.js

In the index.js file, remove the code related to the service worker and the reportWebVitals import.

Importing Dependencies

In the app.js file, import the necessary dependencies at the top of the file:

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

Creating State Variables

Inside the App component, create state variables using the useState hook:

const [query, setQuery] = useState('');
const [response, setResponse] = useState('');

Handling Form Submission

Set up a form inside the return statement of the App component. Add an input field and a submit button to the form:

<form onSubmit={handleSubmit}>
  <input type="text" value={query} onChange={handleChange} />
  <button type="submit">Submit</button>
</form>

Sending Request to Backend

In the handleSubmit function, send a POST request to the backend using Axios:

const handleSubmit = async (e) => {
  e.preventDefault();

  try {
    const response = await axios.post('http://localhost:3000/chat', { query });
    setResponse(response.data.response);
  } catch (error) {
    console.error(error);
  }
};

Displaying the Response

Add a Paragraph tag below the form to display the response:

<p>{response}</p>

Starting the Backend and Frontend

To start the backend, run the command node server.js in the terminal. To start the frontend, navigate to the frontend/chat-gpt-frontend directory and run the command npm start. The chat application will open in your default browser.

Testing the Chat GPT API

Enter a query in the input field and click the Submit button. The response from the Chat GPT API will be displayed below the form.

FAQ

Q: Can I change the OpenAI API key?

A: Yes, you can change the API key by updating the value in the .env file.

Q: How can I deploy this application to a production environment?

A: To deploy the application to a production environment, you can use platforms like Heroku or AWS. Ensure that you secure the API key and follow best practices for security.

Q: Can I use a different language or framework for the frontend?

A: Yes, you can use any frontend framework or library of your choice. However, the provided tutorial uses React for the frontend implementation.

Q: How can I make the frontend UI more user-friendly?

A: You can enhance the frontend UI by adding styling, animations, and additional input fields. You can also implement features like chat history, user profiles, and authentication.

Q: How can I improve the performance of the application?

A: To improve performance, you can implement caching mechanisms, optimize API requests, and use efficient data structures for storing chat histories. Additionally, you can leverage browser caching and compression techniques.

Q: Can I use a different language model from OpenAI?

A: Yes, you can use different language models provided by OpenAI by modifying the code accordingly. Refer to the OpenAI API documentation for more information on available models.

Q: How can I handle errors and edge cases in the application?

A: You can add error handling logic to handle server errors, network errors, and unexpected responses. Additionally, you can implement input validation to ensure the query meets certain criteria.

Q: Can I store the chat history in a database?

A: Yes, you can store the chat history in a database by integrating a database system like MongoDB, MySQL, or PostgreSQL. You can create a schema to store the conversation data and perform CRUD (Create, Read, Update, Delete) operations as needed.

Q: Are there any limitations or restrictions to using the OpenAI GPT API?

A: Yes, there are certain limitations and restrictions imposed by OpenAI. These include rate limits, API usage policies, and content moderation guidelines. Make sure to review the OpenAI documentation and terms of service to ensure compliance.

Q: Can I extend this application to support multi-user conversations?

A: Yes, you can extend the application to support multi-user conversations by implementing features like user authentication, session management, and message routing. You will need to consider data synchronization, real-time updates, and security aspects when implementing these features.

Q: Is it possible to host the backend and frontend separately?

A: Yes, it is possible to host the backend and frontend separately. You can deploy the backend on a server or cloud platform, and host the frontend on a different platform or a content delivery network (CDN). Make sure to configure the necessary CORS settings and handle cross-origin requests properly.

These are just a few of the most commonly asked questions. Feel free to ask any further questions in the comments section below.