如何制作一个速度惊人的AI应用（Supabase、LLAMA 3 和 Groq）

到现在为止，你可能已经见过那些速度惊人的AI应用演示，这些应用快到你甚至不需要流式传输响应。开发一个全栈AI应用可能非常复杂，许多创业公司花费了数百万美元和数百名工程师的时间。幸运的是，由于我们有许多出色的工具，不仅可以自己制作，而且可以在一个周末内完成。

你将使用如下工具：

Supabase: 免费开始使用 https://supabase.com/

一个前端的JavaScript框架（选择你喜欢的，有很多） https://radixweb.com/blog/best-javascript-frameworks-for-web-development

现在你知道了要使用的工具，是时候开始了。

构建AI应用的第一步

喝点水，出去走走。真的，你在电脑前呆太久了，这不健康。请出去走走。

设置Supabase项目

现在你已经从外面回来（或者更可能只是忽略了那部分），你准备好开始设置一个Supabase项目。托管版本在supabase.com上点击几下即可完成。自托管有点复杂，但如果你想走那条路，请阅读此指南。

获取Groq

在Groq Cloud上注册，你可能需要等待API访问权限，但等你读到这里时情况可能已改变。

调用Supabase

假设你已经用npm设置好了一些前端项目，接下来你需要用以下命令安装Supabase：

npm i @supabase/supabase-js

然后你可以用以下代码创建一个Supabase客户端：

import { createClient } from '@supabase/supabase-js'const supabaseUrl = 'YOUR_URL'const supabaseKey = 'YOUR_KEY'const supabase = createClient(supabaseUrl, supabaseKey)

现在，你已经可以在你的项目中访问Supabase。

从边缘调用Llama 3

我们将在Supabase中使用一个边缘函数来调用Groq API上的Llama 3。使用边缘函数可以非常简单地为Supabase项目编写自定义代码。

根据你的操作系统，安装Supabase CLI的方法会有所不同，请查阅此指南了解详细信息，然后回来。

在你的项目文件夹中运行supabase init来初始化Supabase，然后运行supabase functions new groq-api，这将创建一个名为'groq-api'的函数。

打开index.ts文件，添加如下代码：

这非常重要，因为我们希望从浏览器调用我们的函数。因此，当浏览器发送OPTIONS请求时，函数会响应一个ok。

现在在if语句下面添加这段代码：

const GROQ_API_KEY = 'GROQ_API_KEY'

const data = fetch('https://api.groq.com/openai/v1/chat/completions', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${GROQ_API_KEY}`},body: JSON.stringify({"messages": [{"role": "user","content": "Hello Llama!"}],"model": "llama3-8b-8192","temperature": 1,"max_tokens": 1024,"top_p": 1,"stream": false,"stop": null})})

这将调用Groq API，并传递用户信息，内容为“Hello Llama!”

现在让用户发送他们自己的消息，添加这段代码到serve函数的开头：

const { message } = await req.json()

然后返回fetch操作的响应如下：

const completion = response.json()['data']['content']

return new Response(JSON.stringify({ "completion": completion}), {headers: { ...corsHeaders, 'Content-Type': 'application/json' },status: 200,})

你的代码现在应该是这样的：

import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'

export const corsHeaders = {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',}

serve(async (req) => {

const { message } = await req.json()

if (req.method === 'OPTIONS') {return new Response('ok', { headers: corsHeaders })}

const GROQ_API_KEY = 'GROQ_API_KEY'

const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${GROQ_API_KEY}`},body: JSON.stringify({"messages": [{"role": "user","content": "Hello Llama!"}],"model": "llama3-8b-8192","temperature": 1,"max_tokens": 1024,"top_p": 1,"stream": true,"stop": null})})

const completion = response.json()['data']['content']

return new Response(JSON.stringify({ "completion": completion}), {headers: { ...corsHeaders, 'Content-Type': 'application/json' },status: 200,})})

通过在你的项目文件夹中运行supabase functions deploy groq-api来部署你的函数。

现在，你只需要在前端项目中使用你的函数。导入Supabase并调用它：

import { supabase } from "/path/to/supabase"

const { data, error } = await supabase.functions.invoke('groq-api', {body: { message: 'The message value from the user' }})

全部完成了！依赖你的框架，你将以不同的方式处理变量和状态，但上面的部分是框架无关的。

需要注意的几件事情：

我们没有实现聊天记录，你可以在Supabase数据库中实现，根据用户动态拉取

当可能时，使用环境变量而不是硬编码API密钥

目前来说，你已经有了一个很好的开始。现在是时候扩展到数百万用户了。