reactjs - 我的 gpt 3.5 Turbo api 没有给出足够好的响应,正如我从聊天 gpt 中得到的那样

标签 reactjs chat openai-api chatgpt-api gpt-4

所以我在我的 React 应用程序中实现了 chat gpt 3.5 Turbo API。所以我的应用程序基本上就像招聘人员的助手。因此,招聘人员向应用程序提供了一个示例职位帖子,并将该帖子发送到聊天 gpt 来制作它。现在我在响应中复制了不同的角色,我还指示它遵循这些角色和风格。在这个例子中,卢·阿德勒(Lou Adler)的角色和风格很诱人。但问题是,当我将问题交给 cht gpt 时,它给了我很好的响应,但对于我的应用程序中的 API,响应不够好。有人可以告诉我这个问题吗?

下面是我的代码,请注意有两个用户角色。我不明白。用户的实际支持将在哪里?您能详细说明一下这个问题吗?

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


function App() {

 // get api key from server
  const [apiKey, setApiKey] = useState('');

  useEffect(() => {
    fetch('https://server-khaki-kappa.vercel.app/api/key')
      .then(response => response.json())
      .then(data => setApiKey(data.apiKey))
      .catch(error => console.error(error));
  }, []);
  const headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${apiKey}`,
  };

  const [userInput, setUserInput] = useState({
    system: '',
    user: '',
    assistant: '',
    prompt: '',
    model: 'gpt-3.5-turbo-16k',
  });

  console.log(userInput)
  const [assistantResponse, setAssistantResponse] = useState('');
  const [loading, setLoading] = useState(false);

  const handleUserInput = (e) => {
    console.log('e.target',e.target.value);
    setUserInput((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const sendUserInput = async () => {
    setLoading(true);

    const data = {
      model: userInput.model,
      messages: [
        {
          role: 'system',
          content: 
          // userInput.system
          'You are an AI language model trained to assist recruiters in refining job posts. Please provide Enticing content, language, and information in the job posts. Number of words in the response should be equal to or more than the job post that a recruiter is giving to you. you strictly have to follow the same persona given to you. also you have to follow the job post that recruiter will give you. you will make it more enticing and follow the persona of Lou Adler'
             },
        {
          role: 'user',
          content: 
          userInput.user 
          // 'When rewriting the job description, use a language model acting as a recruitment expert or consultant. In this context, take on the persona of Lou Adler. Your role is to be enticing with the reader and emphasize the benefits and opportunities associated with the job position, while presenting the information in an enticing manner.'
            },
        {
          role: 'assistant',
          content:
            // userInput.assistant 
            'You are an AI assistant trained to help recruiters refine their job posts. You can provide suggestions, make the language more enticing, and ensure all necessary information is included. If any details are missing or ambiguous, please ask for more information to provide the best possible suggestions. Take your time to answer the best.'
             },
        {
          role: 'user',
          content:
            userInput.prompt 
            },
      ],
      temperature: 0.2
    };

    try {
      const response = await axios.post(
        'https://api.openai.com/v1/chat/completions',
        data,
        { headers }
      );
      const { choices } = response.data;
      const assistantResponse = choices[0].message.content;
      setLoading(false);
      setAssistantResponse(assistantResponse);
    } catch (error) {
      console.error('An error occurred:', error.message);
    }
  };

  const formatAssistantResponse = (response) => {
    const paragraphs = response.split('\n\n');

    const formattedResponse = paragraphs.map((paragraph, index) => (
      <p key={index} className="text-left mb-4">
        {paragraph}
      </p>
    ));

    return formattedResponse;
  };

  return (
    <div className="container mx-auto py-8">
    <h1 className="text-2xl font-bold mb-4">Chat :</h1>
    {loading ? (
      <>
        <h1 className="spinner"></h1>
      </>
    ) : (
      <>
        <div className="bg-gray-100 p-4 mb-4">
          {formatAssistantResponse(assistantResponse)}
        </div>
      </>
    )}

    <section className='m-6'>
      
    <div className="mb-4 ">
      <label className="block mb-2">
        Model:
        <select
          className="border border-gray-300 rounded px-4 py-2 w-full"
          name="model"
          value={userInput.model}
          onChange={handleUserInput}
        >
          <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
          <option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
          <option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613</option>
          <option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
          {/* <option value="text-davinci-003">text-davinci-003</option> */}
        </select>
      </label>
    </div>
    <div className="mb-4">
      {/* <label className="block mb-2">
        System Role:
        <textarea
           className="border border-gray-300 rounded px-4 py-2 w-full"
          type="text"
          rows={4}
          name="system"
          value={userInput.system}
          onChange={handleUserInput}
        />
      </label> */}
    </div>
    <div className="mb-4">
<label className="block mb-2">
  User Role:
  <textarea
     className="border border-gray-300 rounded px-4 py-2 w-full"
    rows={4}
    name="user"
    value={userInput.user}
    onChange={handleUserInput}
  />
</label>
</div>

    <div className="mb-4">
      {/* <label className="block mb-2">
        Assistant Role:
        <textarea
      
     
        className="border border-gray-300 rounded px-4 py-2 w-full"
          type="text"
          rows={4}
          name="assistant"
          value={userInput.assistant}
          
          onChange={handleUserInput}
        />
      </label> */}
    </div>
    <div className="mb-4">
      <label className="block mb-2">
        Prompt:
        <textarea
          className="border border-gray-300 rounded px-4 py-2 w-full"
          name='prompt'
          type="text"
          rows={4}
        onChange={handleUserInput}
        />
      </label>
    </div>
   
    </section>
    <button
      className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
      onClick={sendUserInput}
    >
      Send
    </button>
  </div>
  );
}

export default App;

最佳答案

聊天 GPT 的默认温度为 0.7,将其设置为 0.2 将生成更少的创意内容,但内容更加连贯。

辅助的角色也应该是从AI的角度来看的。它可用于在一系列消息中添加上下文。

https://help.openai.com/en/articles/7042661-chatgpt-api-transition-guide

关于reactjs - 我的 gpt 3.5 Turbo api 没有给出足够好的响应,正如我从聊天 gpt 中得到的那样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/76514041/

相关文章:

javascript - 如何在 MVC 应用程序中使用 JWT,其中使用 IdentityServer4 的某些 javascript 部分

javascript - 如何使用 socketio 使用 Sails 实时显示在线/离线用户?

python - 在 .venv 中设置环境变量

openai-api - 如何指示 GPT Davinci 003 不要以 "The JSON array would look like this:"之类的句子为前缀?

javascript - 尝试将自定义属性传递到React Router(使用v4)

reactjs - 希望在线托管 .mp3 或 wav 文件以与 react-sound 一起使用。通过网址访问。

reactjs - eslint 无法加载配置 "react-app"以从中扩展

javascript - XMPP MUC 乘员踢出

ios - 使用 inputAccessoryView 在 UICollectionViewController 上的第 0 个索引中插入项目时出现问题

openai-api - GPT3 插入完成 - 无效参数 :suffix