如何制作一款超快的 AI 应用（Supabase、LLAMA 3 和 Groq）

到目前为止，你可能已经看过一些 AI 应用的演示，它们运行速度非常快，甚至不需要流式传输响应。开发一个全栈 AI 应用可能非常复杂，许多初创公司已经投入了数百万美元，并聘请了数百名才华横溢的工程师。幸运的是，我们拥有如此多的优秀工具，你不仅可以自己开发一个，而且一个周末就能搞定。

以下是您将要使用的内容：

Supabase（免费开始）
前端的Javascript 框架（随便选一个，有数十亿个）
通过Groq Cloud 的LLAMA 3 （他们拥有用于运行 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。

从边缘呼唤骆驼 3

我们将使用 Supabase 中的一个边缘函数，通过 Groq API 调用 Llama 3。这是一种为 Supabase 项目编写自定义代码的超级简便方法。

您需要根据您的操作系统以不同的方式安装 Supabase CLI，请查看本指南了解详细信息，然后立即返回此处。

在您的项目文件夹中运行supabase init以初始化 Supabase，然后运行supabase functions new groq-api它将创建一个名为“groq-api”的函数。

打开 index.ts 文件并添加以下代码：

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) => {
    if (req.method === 'OPTIONS') {
        return new Response('ok', { headers: corsHeaders })
    }
})

这非常重要，因为我们想从浏览器调用我们的函数。因此，当浏览器发送 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！”

现在让我们通过在服务函数的开始处添加以下内容来允许用户发送他们自己的消息：

const { message } = await req.json()

这将从请求 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()

    // This is needed if you're planning to invoke your function from a browser.
    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 DB 中实现它，并根据用户是谁动态提取
尽可能使用环境变量而不是硬编码 API 密钥

现在，你已经有了一个很好的开端。是时候将其扩展到数百万了。

鏂囩珷鏉ユ簮锛�https://dev.to/isheanesu_dev/how-to-make-an-insanely-fast-ai-app-supabase-llama-3-and-groq-g22