运行 AI 模型
入门
通过在 nuxt.config.ts 文件的 hub 对象中添加 ai 属性来在您的 NuxtHub 项目中启用 AI。
export default defineNuxtConfig({
hub: {
ai: true
},
})
hubAI() 需要调用 Cloudflare API，因为它没有在 worker 中运行。确保运行 npx nuxthub link 来创建/链接 NuxtHub 项目（即使项目为空）。hubAI()
返回 Workers AI 客户端 的服务器可组合项。
const ai = hubAI()
run()
运行模型。以模型作为第一个参数，以对象作为第二个参数。
export default defineEventHandler(async () => {
const ai = hubAI() // access AI bindings
return await ai.run('@cf/meta/llama-3.1-8b-instruct', {
prompt: 'Who is the author of Nuxt?'
})
})
选项
模型
Workers AI 附带一组经过精心挑选的流行开源模型，使您能够执行图像分类、文本生成、对象检测等任务。
查看所有 Workers AI 模型流式传输
处理文本生成响应的推荐方法是流式传输。
LLM 在内部通过使用重复推断的过程按顺序生成响应来工作 - LLM 模型的完整输出本质上是数百或数千个单独预测任务的序列。因此，虽然生成单个标记只需要几毫秒，但生成完整响应需要更长时间，大约几秒钟。
您可以使用流式传输，以便在生成第一个标记时立即显示响应，并为每个附加标记添加内容，直到响应完成。这为最终用户提供了更好的体验。随着文本的生成，以增量方式显示文本不仅提供了即时响应能力，还为最终用户提供了阅读和解释文本的时间。
要启用，请将 stream 参数设置为 true。
您可以在 Cloudflare 的模型文档 上检查您使用的模型是否支持流式传输。
export default defineEventHandler(async (event) => {
const messages = [
{ role: 'system', content: 'You are a friendly assistant' },
{ role: 'user', content: 'What is the origin of the phrase Hello, World' }
]
const ai = hubAI()
const stream = await ai.run('@cf/meta/llama-3.1-8b-instruct', {
stream: true,
messages
})
return sendStream(event, stream)
})
AI 网关
Workers AI 与 AI 网关兼容，AI 网关支持缓存响应、分析、实时日志记录、速率限制和回退提供者。了解有关 AI 网关 的更多信息。
选项
通过将一个额外的对象传递给 hubAI().run() 来配置 AI 网关的选项，在 Cloudflare 的文档中了解更多信息。
export default defineEventHandler(async () => {
const ai = hubAI()
return await ai.run('@cf/meta/llama-3-8b-instruct',
{
prompt: 'Who is the creator of Nuxt?'
},
{
gateway: {
id: '{gateway_slug}',
skipCache: false,
cacheTtl: 3360
}
})
})
您现有的 AI 网关 的名称。必须与您的 NuxtHub 应用程序位于同一 Cloudflare 帐户中。
控制请求是否应该 跳过缓存。
控制 缓存 TTL。
模板
探索社区制作的开源模板
Vercel AI SDK
可以使用 Vercel AI SDK 与 Cloudflare Workers AI。
NuxtHub AI 与 Vercel AI SDK 的某些功能兼容，这些功能支持流式传输响应。
确保在您的项目中安装 Vercel AI SDK。
npx nypm i ai @ai-sdk/vue
nypm 将检测您的包管理器并使用它安装依赖项。useChat()
要利用 useChat() Vue 可组合项，您需要创建一个 POST /api/chat 端点，该端点使用 hubAI() 服务器可组合项并返回与 Vercel AI SDK 兼容的流。
import { AIStream, formatStreamPart } from 'ai'
export default defineEventHandler(async (event) => {
const { messages } = await readBody(event)
const stream = await hubAI().run('@cf/meta/llama-3.1-8b-instruct', {
messages,
stream: true
}) as ReadableStream
// Return a compatible stream for the Vercel AI SDK
return AIStream(
new Response(stream),
data => formatStreamPart('text', JSON.parse(data).response)
)
})
然后，我们可以创建一个使用 useChat() 可组合项的聊天组件。
<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
const { messages, input, handleSubmit, isLoading, stop, error, reload } = useChat()
</script>
<template>
<div v-for="m in messages" :key="m.id">
{{ m.role }}: {{ m.content }}
</div>
<div v-if="error">
<div>{{ error.message || 'An error occurred' }}</div>
<button @click="reload">retry</button>
</div>
<form @submit="handleSubmit">
<input v-model="input" placeholder="Type here..." />
<button v-if="isLoading" @click="stop">stop</button>
<button v-else type="submit">send</button>
</form>
</template>
了解有关 useChat() Vue 可组合项 的更多信息。
pages/ai.vue完整示例。