Xây dựng ứng dụng React Phân tích tình cảm bằng API OpenAI

Định cấu hình Thành phần App.js

Mở src/App.js tệp, hãy xóa mã React soạn sẵn và thay thế bằng mã sau:

1. Thực hiện nhập khẩu sau:

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

2. Xác định thành phần Ứng dụng chức năng và các biến trạng thái để lưu giữ thông điệp của người dùng và cảm xúc của họ sau khi phân tích.

    function App() {
     const [message, setMessage] = useState("");
     const [sentiment, setSentiment] = useState(""); 

3. Tạo một chức năng xử lý sẽ thực hiện các yêu cầu HTTP POST không đồng bộ tới Trình phân loại Tweet nâng cao chuyển cùng với thông báo của người dùng và khóa API trong nội dung yêu cầu để phân tích cảm tính.
4. Sau đó, hàm sẽ chờ phản hồi từ API, phân tích cú pháp dưới dạng JSON và trích xuất giá trị cảm tính trong mảng lựa chọn từ dữ liệu đã phân tích cú pháp.
5. Cuối cùng, hàm xử lý sẽ kích hoạt hàm setSentiment để cập nhật trạng thái của nó với giá trị cảm tính.

      const API_KEY = process.env.REACT_APP_OPEN_AI_API_KEY;
     const APIBODY ={
       'model': "text-davinci-003",
       'prompt': "What is the sentiment of this message?" + message,
       'max_tokens': 60,
       'top_p': 1.0,
       'frequency_penalty': 0.0,
       'presence_penalty': 0.0,
     }
     async function handleClick() {
       await fetch('https://api.openai.com/v1/completions', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           'authorization': `Bearer ${API_KEY}`
         },
         body: JSON.stringify(APIBODY)
       }).then(response => {
         return response.json()
       }).then((data) => {
         console.log(data);
         setSentiment(data.choices[0].text.trim());
       }).catch((error) => {
         console.error(error);
       });
     }; 

Nội dung yêu cầu chứa một vài tham số, đó là:

• mô hình: chỉ định mô hình OpenAI nào sẽ sử dụng; text-davinci-003 trong trường hợp này.
• lời nhắc: lời nhắc mà bạn sẽ sử dụng để phân tích cảm xúc của tin nhắn đã cho.
• max_tokens: chỉ định số lượng mã thông báo tối đa được đưa vào mô hình để ngăn chặn việc sử dụng quá mức hoặc không cần thiết sức mạnh tính toán của mô hình và cải thiện hiệu suất tổng thể của mô hình.
• top_p, frequency_penalty và hiện diện_penalty: các tham số này điều chỉnh đầu ra của mô hình.

Cuối cùng, trả về hộp thông báo và nút gửi:

   return (
    <div className="App">
      <header className="App-header">
        <h2> Sentiment Analysis Application</h2>
        <div className="input">
          <p> Enter the message to classify </p>
          <textarea
            className="textArea" 
            type="text" 
            placeholder="Type your message..."
            cols={50}
            rows={10}
            onChange={(e) => setMessage(e.target.value)}
          />
        </div>
        <div className="Response">
          <button onClick={handleClick}> Get Message sentiment</button>
          {sentiment !== "" ? <p> The message is {sentiment} </p> : null}
        </div>
      </header>
    </div>
  );
}
export default App; 

Tạo lời nhắc người dùng

Bạn có thể tùy chọn, tạo trường nhập liệu nhắc nhở để cho phép bạn xác định cách phân tích thông báo.

Chẳng hạn, thay vì lấy “tích cực” làm cảm xúc cho một thông điệp cụ thể, bạn có thể hướng dẫn mô hình tạo phản hồi và xếp hạng chúng theo thang điểm từ một đến mười, trong đó một là cực kỳ tiêu cực trong khi mười là cực kỳ tích cực.

Thêm mã này vào App.js thành phần. Xác định một biến trạng thái cho dấu nhắc:

   const [prompt, setPrompt] = useState(""); 

Sửa đổi lời nhắc trên APIBODY để sử dụng dữ liệu biến lời nhắc:

   const APIBODY = {
    
    'prompt': prompt + message,
    
  } 

Thêm trường nhập lời nhắc, ngay phía trên vùng văn bản tin nhắn:

   <input 
      className="prompt"
       type="text" 
       placeholder="Enter prompt..."
       onChange={(e) => setPrompt(e.target.value)}
  /> 

Khởi động máy chủ phát triển để cập nhật các thay đổi đã thực hiện và truy cập http://localhost:3000 để kiểm tra chức năng.

Phân tích cảm tính là một phương pháp kinh doanh thiết yếu có thể cung cấp thông tin chi tiết có giá trị về trải nghiệm và ý kiến ​​của khách hàng, cho phép bạn đưa ra quyết định sáng suốt có thể giúp cải thiện trải nghiệm của khách hàng và tăng doanh thu.

Với sự trợ giúp của các công cụ AI như API OpenAI, bạn có thể sắp xếp hợp lý các quy trình phân tích của mình để có được cảm tính của khách hàng chính xác và đáng tin cậy trong thời gian thực.