26 - 手把手教你用 Laf 开发一个自己的 ChatGPT

视频链接：BV1Ku4y157gR

发布日期：2023-06-15

视频时长：12:00

播放量：3.8万

所属合集：ChatGPT 搭建系列

视频概要

使用 Laf 云开发平台快速搭建一个类似 ChatGPT 的对话应用。Laf 是一个开源的 Serverless 平台，无需管理服务器，秒级部署云函数。

知识点清单

A. Laf 平台介绍

B. 创建 Laf 应用

1. 访问 laf.dev 注册账号
2. 点击「新建应用」
3. 选择区域（国内选杭州）
4. 等待创建完成
5. 进入在线IDE

C. 编写云函数

// cloud functions/chat.ts
import cloud from '@lafjs/cloud'

export default async function (ctx: FunctionContext) {
  const { message, apiKey } = ctx.body
  
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [
        { role: 'system', content: '你是一个有帮助的AI助手。' },
        { role: 'user', content: message }
      ],
      stream: false
    })
  })
  
  const data = await response.json()
  return { reply: data.choices[0].message.content }
}

D. 前端页面

<div id="app">
  <div class="chat-container">
    <div class="messages" id="messages"></div>
    <div class="input-area">
      <input type="text" id="input" placeholder="输入你的问题...">
      <button onclick="sendMessage()">发送</button>
    </div>
  </div>
</div>

<script>
async function sendMessage() {
  const input = document.getElementById('input');
  const message = input.value;
  input.value = '';
  addMessage('user', message);
  
  const res = await fetch('https://your-app.laf.dev/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  const data = await res.json();
  addMessage('assistant', data.reply);
}

function addMessage(role, content) {
  const div = document.createElement('div');
  div.className = `message ${role}`;
  div.textContent = content;
  document.getElementById('messages').appendChild(div);
}
</script>

常见问题

学习建议

• Laf非常适合快速原型开发，适合新手入门
• 深入开发建议使用FastGPT等成熟平台