[Live broadcast preview] Shangyun vs. Xiayun: Reduce costs and increase laughter? Cut leeks?

Have your own chat-gpt in three minutes (development to launch)

First you need to have an lafaccount. If you still don’t know lafwhat it is, click here to learn it in three minutes.
Then you also need to have an chat-gptaccount and generate one apiKey(you can ask for this step Google)

Cloud function

With the above two conditions in place we can start.
Click NPMthe plus sign to the right of Dependency file , search chatgpt, find the corresponding npmpackage, save and restart the application. alt attribute text
Then you can create a new cloud function name like me sendand write the following content (remember to change the 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
}

front end

The third most common thing in front-end projects

// 安装 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: () => "",
});

Here we take a look at the core code of the front-end. It is very simple, just pass the content and context of the question idinto the cloud function.

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;
}

At this point we can already send messages to chatgptand get replies.
We just need to add a few details to make it look like this.
alt attribute text
After adding these details, the basic development work is completed. The next step is to share the project online with your friends and put a cup on it.
Speaking of going online, we should now buy a server, install nginxit, configure it, nginxresolve the domain name, and bind the domain name...

NO NO NO I will not allow you to waste your young and beautiful life, life is short, you need laf :)

online

Open your lafclick on the storage interface -> click on the plus sign above -> create a bucket with readonly permissions (the name is arbitrary). alt attribute text
After creating it, run the packaging command in your front-end project npm run build. Here is the package. After packaging is completed, find the packaged distfile . folder.
Like me, distupload everything in the file to the bucket we just created. Remember to upload it intact. A file is a file and a folder is a folder. alt attribute text
After the upload is completed, you will find a "Turn on website hosting" in the upper right corner and click it.
After clicking, a link will appear. Let's click to visit and see what it is.

oh! My old swan, isn’t this the project I just developed?

alt attribute text
Congratulations, your project is now online. Share it with your friends!
Click here to view my chatGPT
Click here to view the project source code (the style part is copied from the chatGPT official website and is a bit messy)

Original address sealos is a cloud operating system distribution with kubernetes as the core, making cloud native easy to popularize.

laf Writing code is as easy as writing a blog. I don’t care about docker or kubernetes. I only care about writing business!