美文网首页
三分钟拥有自己的 chat-gpt (开发到上线)

三分钟拥有自己的 chat-gpt (开发到上线)

作者: sealyun | 来源:发表于2023-03-10 18:04 被阅读0次

三分钟拥有自己的 chat-gpt (开发到上线)

  • 首先你需要有一个 laf 账号,如果你还不知道 laf 是什么,点击这里三分钟学会
  • 然后你还需要有一个 chat-gpt 的账号并且生成一个 apiKey (这一步可以问 Google )

云函数

具备了上面这两个条件我们就可以开始啦。
点击 NPM 依赖右边的加号

file
搜索 chatgpt 找到对应的 npm 包 保存并重启应用。

然后就可以像我一样新建一个云函数 名字叫send并写入以下内容(记得更换 apiKey)
import cloud from '@lafjs/cloud'

export async function main(ctx: FunctionContext) {
  const { ChatGPTAPI } = await import('chatgpt')
  const data = ctx.body

  // 这里需要把 api 对象放入 cloud.shared 不然无法追踪上下文
  let api = cloud.shared.get('api')
  if (!api) {
    api = new ChatGPTAPI({ apiKey: "这里需要换成你自己的apiKey哦" })
    cloud.shared.set('api', api)
  }

  let res
  // 这里前端如果传过来 parentMessageId 则代表需要追踪上下文
  if (!data.parentMessageId) {
    res = await api.sendMessage(data.message)
  } else {
    res = await api.sendMessage(data.message, { parentMessageId: data.parentMessageId })
  }
  return res
}

前端

前端项目中老三样

// 安装 laf sdk
 npm install laf-client-sdk 

// 引入
import { Cloud } from "laf-client-sdk"; 

// 创建 cloud 对象 这里换掉appid
const cloud = new Cloud({
  baseUrl: "https://这里换成自己的appid.laf.dev",
  getAccessToken: () => "",
});

这里我们看一下前端的核心代码,非常的简单,就是把提问的内容和上下文 id 传入云函数就可以了。

async function send() {

// 我们提问的内容
const message = question.value;

let res;
// 与云函数逻辑一样,有上下文 id 就传入
if (!parentMessageId.value) {
  res = await cloud.invoke("send", { message });
} else {
  res = await cloud.invoke("send", { message, parentMessageId: parentMessageId.value });
}

// 回复我们的内容在 res.text 

// 这个是上下文 id
parentMessageId.value = res.id;
}

到这一步 我们已经可以发信息给 chatgpt 并且拿到回复的消息了。
我们只要稍微加亿点点细节,就可以变成这样。


加完这点细节之后,基本开发工作就完成了,接下来就是把项目上线分享给你的朋友,顺便装个杯。
说到上线我们现在应该要去 买一台服务器 安装nginx 配置nginx 解析域名 绑定域名...

NO NO NO 我不允许你浪费年轻而美好的生命,life is short, you need laf :)

上线

打开你的 laf 点击存储界面->点击上方加号->创建一个权限为 readonly 的存储桶(名字随意)


创建完之后 在你的前端项目中运行打包命令 我这里是 npm run build,打包完毕之后找到打包好的 dist 文件夹。
像我一样把 dist 文件里面的所有东西都上传到我们刚刚创建的存储桶里面,记住是原封不动的上传哦,文件就是文件,文件夹就是文件夹。

上传完毕之后,发现右上角有一个 “开启网站托管” 点一下。

点完之后出来一个链接,我们点击一下访问看看是啥东西。

哦!我的老天鹅呀 这不就是我刚刚开发的项目吗?


恭喜 到这里你的项目已经上线了,快分享给你的好朋友吧!
点击这里查看我的 chatGPT
点击这里查看项目源码(样式部分是从 chatGPT 官网复制过来的有些乱)

原文地址
sealos 以kubernetes为内核的云操作系统发行版,让云原生简单普及

laf 写代码像写博客一样简单,什么docker kubernetes统统不关心,我只关心写业务!

相关文章

  • 远丰电商 | 企业搭建商城小程序有什么优势?

    远丰电商最近了解到:自小程序开发上线以来,企业和商家都是十分关注的。随着小程序的发展火热,目前许多商家都拥有了自己...

  • iOS开发流程总结

    流程:注册、开发、真机测试、发布以及上线。 iPhone iOS 4从注册到app上线开发流程 一、关于注册账号I...

  • 在Xcode7下上传程序到AppStore

    对于每一个iOS开发人员来说,最终无疑就是将自己开发的APP上线到AppStore,让更多的人去用自己写的软件。试...

  • 使用ChatGPT做iOS面试的一次体验

    ChatGPT新手教程[https://www.cnblogs.com/chat-gpt/p/how-to-use...

  • UI还原测试及标注思路心得

    先给大家讲个场景。 年底了,公司开始赶产品上线。上线时间紧促,导致从产品到设计到开发的时间压缩得可怜,产品改需求,...

  • 申请苹果开发者账号流程

    苹果产品上线到AppStore,需要有苹果开发者证书才可以上线提供下载。苹果开发者证书分为三种:(我们需要的是第二...

  • 连开发机测试,接口丢失数据。无响应、502、503

    背景:服务端数据未上线,前端未上线,客户端已上线。需要本地mock到开发机进行测试。老员工和已开通RD权限的新员工...

  • iOS开发笔记 - 上线流程

    在开始讲述上线流程之前,我们假设你已经拥有了Apple ID,但是还没有成为付费的开发者,我们就从申请成为付费开发...

  • Odoo 系列

    前言 第一份实习工作就是 Odoo 开发,到离职接近 2 年 开发经验,从 Odoo 零基础到项目上线,虽然也是菜...

  • 目录

    Android开发笔记(序)写在前面的目录现在的书名:《Android Studio开发实战:从零基础到App上线...

网友评论

      本文标题:三分钟拥有自己的 chat-gpt (开发到上线)

      本文链接:https://www.haomeiwen.com/subject/ycjtrdtx.html