打造免费ChatGPT应用教程

前言

最近ChatGPT好火，也创造了好多优秀的应用

于是乎，我也想出一篇教程，带领大家打造一款免费 ChatGPT 应用。

准备工作

▼ 搭建免费服务器 ▼

薅免费服务器，推荐注册Vercel

▼ 搭建免费数据库 ▼

推荐注册supabase

▼ 下载应用源码 ▼

下载项目模板，或者大家可以fork到自己的github进行修改

部署应用

▼ 创建数据库 ▼

注册完supabase之后，初始化sql，项目中supabasemigrations20230406025118_init.sql

▼ 创建应用 ▼

最快的方式直接引用我的项目

创建应用

选择应用

导入你的应用代码

点击部署即可

配置openAI token key变量

配置supabase变量

配置之后，重新部署一下应用

优化答案

为什么还要做这一步呢？因为用户一般会提问题都会很简单，所以可能会导致答案会很简单。

那怎么处理呢？

扩展！我们可以尽可能地给ChatGPT提供更多的关键词，让他的答案更加丰富。

实现方式：在项目中 /pages/docs/xxxx.mdx 创建markdown文件，创造相关的内容

实现原理

构建时

项目部署的时候，generate-embeddings.ts 里面的逻辑会解析mdx文件内容 插入到 nods_page、nods_page_section 表中。

embedding 字段存储了一大串的数字，这个是通过请求ChatGPT解析得到向量数据（PS：可自行学习一下向量搜索，这个我也没深入了解）

插入是的数据如下：

运行时

1. 用户发起请求的时候，同样是通过请求ChatGPT embeddings接口得到向量数据，然后和nods_page_section表中的embedding 字段进行匹配；
2. 在步骤2中得相关的关键词之后，通过组装数据，发起ChatGPT completions 会话接口；
3. 给用户返回答案。

体验

好了，部署成功，此时我们可以通过访问 interview-ai.vercel.app

界面如下

本地开发

• cp .env.example .env
• 在新创建的 .env 文件中设置 OPENAI_KEY。

# 安装pnpm
npm install -g pnpm@7.32.0

# 安装next
npm install next --registry=https://registry.npmmirror.com

# 安装项目依赖包
npm install --registry=https://registry.npmmirror.com

# 启动项目
pnpm dev

PS：本地开发会有一些小问题，openAI 接口需要代理，本地是无法直接请求，需要改造一下代码走代理才行。

总结

Vercel 虽然是国外的服务器，但国内访问还是挺快的，而且部署也很方便，主要是免费！！！

可以借助开发模板快速构建AI应用