ChatGPT與Remix?Api服務(wù)在瀏覽器url地址中對(duì)話(huà)詳解

更新時(shí)間：2023年05月06日 14:21:42 作者：?jiǎn)讨蝊x

這篇文章主要為大家介紹了ChatGPT與Remix?Api服務(wù)在瀏覽器url地址中對(duì)話(huà)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

本文討論 ChatGTP 與 Node.js 的結(jié)合，由于最近在學(xué) Remix, 考慮到 Remix 可以單獨(dú)的作為 API 來(lái)使用，并且集成了很多常用的功能：

fetch
dotenv
loader
文件路由
...

彎路

寫(xiě)一個(gè)簡(jiǎn)單的 ChatGPT 服務(wù)鍵值不要太簡(jiǎn)單，但是我們?cè)谏厦嬉沧吡艘恍澛贰?/p>

直接鏈接 api.openai.com 一直請(qǐng)求超時(shí)，這個(gè)浪費(fèi)了很長(zhǎng)的時(shí)間，也不知道是什么原因。面對(duì)困難我們應(yīng)該怎么辦？先放下，搜索引里面是不是有相似的問(wèn)題。結(jié)果真的需要 代理，嘗試了一個(gè)代理，其中 api.openai-proxy.com 還挺好。注意代理的安全性自行判斷。
使用 npm 的 openai 還是直接發(fā)送請(qǐng)求到 https://api.openai.com/v1/chat/completions 或者 https://api.openai.com/v1/completions，又是不同的做法。經(jīng)過(guò)嘗試，選擇了前者 + fetch 方案。
使用 axios 還是 fetch 呢？都有嘗試，使用方法不一樣，但是效果基本一致。

最早的思路 1

思路使用 remix 構(gòu)建一個(gè)簡(jiǎn)單的 ChatGPT + api key 的簡(jiǎn)單的應(yīng)用。但是前后端代碼都要寫(xiě)，還沒(méi)有研究 UI 和對(duì)接文檔。

思路2

看別人實(shí)現(xiàn)，由于 api 在三月份就發(fā)布了，現(xiàn)在已經(jīng)發(fā)生一些變化，比如訪(fǎng)問(wèn) api 的超時(shí)原因的問(wèn)題。別人的環(huán)境可能與自己的不一樣。

思路3

在 github 上模仿一個(gè)簡(jiǎn)單的示例，有簡(jiǎn)單 UI，結(jié)果還真由于基于 Next.js 的效果還可以的：nextjs-chatgpt-app-enricoros 但是，發(fā)現(xiàn) UI 是有難度的用的 MUI，內(nèi)容是有復(fù)雜度的，不符合快速原則，模仿一個(gè) antd UI 寫(xiě)一個(gè) UI 自己覺(jué)的不理想，先放在那里了。后面做好了考慮開(kāi)源。

思路4

直接用 node.js 跑一個(gè)示例。最簡(jiǎn)單的 url 中有 searchParams 就是與 Chat-GPT 的對(duì)話(huà)參數(shù)。

從創(chuàng)建一個(gè) Remix 開(kāi)始

pnpm dlx create-remix@latest chat-app

定義 .env 文件

因?yàn)?Remix 已經(jīng)內(nèi)置 dotenv 使用使用起來(lái)非常方便。

OPENAI_API_KEY = "your api key"
PROXY_URL = "your api proxy url"

一個(gè)是 api key, 注意不要提交到 git 上， remix 創(chuàng)建項(xiàng)目默認(rèn)將 .env 文件中記錄到 .gitignore 文件中?？墒褂?.env.example 文件給個(gè)示例提到 git 上。

定義 chat 路由

/app/routes/chat.tsx 文件即可，注意是用作 api 不要返回一個(gè)默認(rèn)的函數(shù)，然后對(duì)外暴露一個(gè) loader 函數(shù)，用于處理當(dāng)前路由 get 方法請(qǐng)求。下面是一個(gè)簡(jiǎn)單的代碼實(shí)現(xiàn)：

async function runCompletion(messages: any) {
  const response = await fetch(
    "https://api.openai-proxy.com/v1/chat/completions",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + process.env.OPENAI_API_KEY,
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: messages }],
      }),
    }
  ).then((res) => res.json())
  return await response.choices[0].message.content;
}
export async function loader({ request }: any) {
  const url = new URL(request.url);
  const text = url.searchParams.get("text")!;
  return runCompletion(text);
}