ChatGPT与Remix Api服务在浏览器url地址中对话详解
作者:乔治_x 发布时间:2023-06-23 12:35:50
引言
本文讨论 ChatGTP 与 Node.js 的结合,由于最近在学 Remix, 考虑到 Remix 可以单独的作为 API 来使用,并且集成了很多常用的功能:
fetch
dotenv
loader
文件路由
...
弯路
写一个简单的 ChatGPT 服务键值不要太简单,但是我们在上面也走了一些弯路。
直接链接
api.openai.com
一直请求超时,这个浪费了很长的时间,也不知道是什么原因。面对困难我们应该怎么办?先放下,搜索引里面是不是有相似的问题。结果真的需要代理
, 尝试了一个代理,其中api.openai-proxy.com
还挺好。注意代理的安全性自行判断。使用 npm 的
openai
还是直接发送请求到https://api.openai.com/v1/chat/completions
或者https://api.openai.com/v1/completions
,又是不同的做法。经过尝试,选择了前者 + fetch 方案。使用
axios
还是fetch
呢? 都有尝试,使用方法不一样,但是效果基本一致。
最早的思路 1
思路使用 remix 构建一个简单的 ChatGPT + api key 的简单的应用。但是前后端代码都要写,还没有研究 UI 和 对接文档。
思路2
看别人实现,由于 api 在三月份就发布了,现在已经发生一些变化,比如访问 api 的超时原因的问题。别人的环境可能与自己的不一样。
思路3
在 github 上模仿一个简单的示例,有简单 UI,结果还真由于基于 Next.js 的效果还可以的:nextjs-chatgpt-app-enricoros 但是,发现 UI 是有难度的用的 MUI,内容是有复杂度的,不符合快速原则,模仿一个 antd UI 写一个 UI 自己觉的不理想,先放在那里了。后面做好了考虑开源。
思路4
直接用 node.js 跑一个示例。最简单的 url 中有 searchParams 就是与 Chat-GPT 的对话参数。
从创建一个 Remix 开始
pnpm dlx create-remix@latest chat-app
定义 .env 文件
因为 Remix 已经内置 dotenv
使用使用起来非常方便。
OPENAI_API_KEY = "your api key"
PROXY_URL = "your api proxy url"
一个是 api key, 注意不要提交到 git 上, remix 创建项目默认将 .env
文件中记录到 .gitignore
文件中。可使用 .env.example
文件给个示例提到 git 上。
定义 chat 路由
/app/routes/chat.tsx
文件即可,注意是用作 api 不要返回一个默认的函数,然后对外暴露一个 loader 函数,用于处理当前路由 get 方法请求。下面是一个简单的代码实现:
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);
}
启动 Remix 服务开始与 ChatGPT 对话
pnpm dev
默认在 3000 端口打开,下面我们访问 http://localhost:3000/fetch?text=吃了吗
开始与 Chat-GPT 开始友好问答:
问题二:
问题就不再提了,大家肯定开始各种方式与 AI 对话了。因为 API 现在是送的 5 刀,每一个字都是要计算 token, 并且也有时常限制。
这里对 chatapt api 的参数就不做解读了,选择哪种模型合适,就不再解读。本文的主要目的,就是使用 Remix 对接服务。
小结
搞对接服务虽然不是难事,但是也没有想象中的简单。这是第一次对接这类接口。喜欢 Remix 的可以参考一下。
来源:https://juejin.cn/post/7222210580319846459
猜你喜欢
- UDP 套接字是可以使用 connect 系统调用连接到指定的地址的。从此以后,这个套接字只会接收来自这个地址的数据,而且可以使用 send
- 本文实例讲述了python中sleep函数用法。分享给大家供大家参考。具体如下:Python中的sleep用来暂停线程执行,单位为秒#---
- 引言:2020年12月20python宣布适配苹果m1芯片,这意味着python3.9.0可以不经过rosetta转化,以原生的方式运行在最
- 我们将要来学习python的重要概念迭代和迭代器,通过简单实用的例子如列表迭代器和xrange。可迭代一个对象,物理或者虚拟存储的序列。li
- 跳过开头首先是跳过开始部分,这个在我们读取文本的时候最常用。在实际的应用当中,比如记录的日志或者是代码等等,一般来说头部都会附上一段说明,或
- 首先下载搜索图标:控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html
- 原理采用Python requests发起请求监测的URL,检测Http响应状态及是否超时,如果Http状态异常或响应超时,则通过聚合云推的
- 首先介绍下比较简单但必不可少且实用的知识,可以当手册查询,适合像我一样的新手看。PHP常用库函数介绍一、PHP字符串操作常用函数1.确定字符
- 例一:#!/usr/bin/pythonimport sysimport reif __name__=
- ImageField的使用笔记今天完善作业写的订单系统,主要是给每一个菜品增加图片,看起来美观一些,但是没想到这个小小的需求花了我一天时间,
- 具体内容如下所示:参考案例:import turtled=0for i in range(4): turtle.fd(200)
- 图片非常重要,它们可以让你的页面更好看,更引人注目。但是,高质量和漂亮的图片常常会很大,它们会让页面加载变慢并消耗更多带宽。所以我们,这些设
- 简介:ssh是一个协议,OpenSSH是其中一个开源实现,paramiko是Python的一个库,实现了SSHv2协议(底层使用crypto
- py2exe在sourceforge 的下载只支持到2.7。针对python3.0+的版本,需要自己编译。1.下载源码svn checkou
- httpwatch 的页面元素加载时间表里面有一堆的英文,平时也没注意看,今天瞟了一眼,觉得应该有些用处,就看了看,随便用蹩脚的英语水平翻译
- 事情是这样的五一假期第一天值班隔壁有点喜欢的小姐姐突然跑过来跟我聊天“微信账号切换来切换去 特别麻烦”“怎么能同时打开多个呢?”我心想,你有
- 记住:这时候08安装的时候要自定义一个实例 比如:mysql2008(不能在使用默认实例了) sql server 2008 express
- 问题描述vscode中跨目录的模块调用远不如pycharm中的来的简单,在pycharm中即使是不同库文件夹中子函数也可以进行互相调用。而在
- 导语:简洁并不等于极简主义,在保持网站简洁的外观的同时,辅以其它元素的使用,同样能够达到要求。那如何做到这一点呢?通过本文你能从中学到一些经
- 获取评论贴的请求头与表单数据下一篇在这里这里,我们随便选取一个网站,获取该贴评论后的请求头,表单数据以及评论贴链接。(因为涉及敏感信息,自己