全栈进阶指南

皮肤切换

Edge + AI：在 Cloudflare Worker 中调用 Hugging Face API ​

构建低延迟的智能边缘服务

将 AI 推理能力部署到 边缘网络（Edge） 是现代应用的重要趋势。Cloudflare Workers 作为全球分布的边缘计算平台，结合 Hono 框架，可以让你在离用户最近的位置调用 Hugging Face 等 AI 服务，实现低延迟、高可用的智能边缘服务。

本文将展示如何在 Cloudflare Worker 中使用 Hono，安全、高效地调用 Hugging Face Inference API，实现文本分类、情感分析等 AI 功能。

一、为什么选择 Edge + AI？ ​

优势说明
全球低延迟请求在最近的边缘节点处理，减少 RTT
隐私安全敏感数据无需回源，可在边缘预处理
智能前置在边缘完成 AI 推理，减少后端负载
高性能Workers + Hono 启动快、资源轻

典型场景：实时内容审核、AI 聊天机器人、个性化推荐、SEO 标题生成。

二、架构设计 ​

+------------------+
|     User         |
+--------+---------+
         |
         | HTTP Request (e.g., /ai/sentiment)
         v
+--------+---------+     +---------------------+
| Cloudflare Edge  | --> | Hugging Face API    |
| (Worker + Hono)  |     | (api-inference.huggingface.ai) |
+------------------+     +---------------------+
  • 所有 AI 请求由 Cloudflare Edge Worker 处理；
  • Worker 调用 Hugging Face API 并缓存结果；
  • 返回结构化 AI 结果给前端。

三、准备工作 ​

  1. 获取 Hugging Face Token

  2. 选择模型

    • 推荐模型：cardiffnlp/twitter-roberta-base-sentiment-latest（情感分析）
    • API URL: https://api-inference.huggingface.ai/models/cardiffnlp/twitter-roberta-base-sentiment-latest

  3. 环境变量配置 (wrangler.toml)

    toml
    # wrangler.toml
name = "hono-ai-edge"
main = "src/index.ts"
compatibility_date = "2025-03-01"

[vars]
HUGGINGFACE_API_TOKEN = "your_hf_token_here"

# 或使用 Secrets（推荐）
# wrangler secret put HUGGINGFACE_API_TOKEN

四、Hono 实现 AI 边缘服务 ​

ts
// src/routes/ai.ts
import { Hono } from 'hono'

const app = new Hono()

// 支持的模型映射
const MODELS = {
  sentiment: 'cardiffnlp/twitter-roberta-base-sentiment-latest',
  ner: 'dslim/bert-base-NER',
  summarization: 'facebook/bart-large-cnn'
}

app.post('/ai/:task', async (c) => {
  const { task } = c.req.param()
  const { text } = await c.req.json()

  if (!text || typeof text !== 'string') {
    return c.json({ error: 'Missing or invalid text' }, 400)
  }

  const model = MODELS[task as keyof typeof MODELS]
  if (!model) {
    return c.json({ error: 'Unsupported AI task' }, 400)
  }

  try {
    const HF_TOKEN = c.env.HUGGINGFACE_API_TOKEN || c.env.HUGGINGFACE_API_TOKEN // 支持 Secrets

    const response = await fetch(`https://api-inference.huggingface.ai/models/${model}`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${HF_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ inputs: text }),
    })

    if (!response.ok) {
      const error = await response.text()
      return c.json({ error: 'AI inference failed', details: error }, response.status)
    }

    const result = await response.json()

    // 标准化输出
    let output: any = { task, input: text, result }

    if (task === 'sentiment') {
      const top = result[0]?.[0]
      output.prediction = {
        label: top?.label,
        score: parseFloat((top?.score * 100).toFixed(2)),
        sentiment: top?.label.includes('POS') ? 'positive' :
                  top?.label.includes('NEG') ? 'negative' : 'neutral'
      }
    }

    return c.json(output)
  } catch (error: any) {
    return c.json({ error: 'Request failed', details: error.message }, 500)
  }
})

export default app

五、前端调用（Vue3 示例） ​

ts
// composables/useAI.ts
export function useAI() {
  const analyzeSentiment = async (text: string) => {
    const res = await fetch('/ai/sentiment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text })
    })

    return await res.json()
  }

  return { analyzeSentiment }
}
text
<script setup lang="ts">
import { ref } from 'vue'
import { useAI } from '@/composables/useAI'

const { analyzeSentiment } = useAI()
const text = ref('')
const result = ref<any>(null)

const analyze = async () => {
  result.value = await analyzeSentiment(text.value)
}
</script>

<template>
  <div>
    <textarea v-model="text" placeholder="输入要分析的文本..." />
    <button @click="analyze">情感分析</button>
    
    <div v-if="result">
      <p>情感: <strong>{{ result.prediction.sentiment }}</strong></p>
      <p>置信度: {{ result.prediction.score }}%</p>
    </div>
  </div>
</template>

六、性能优化：边缘缓存 AI 结果 ​

利用 Cloudflare Cache API 缓存常见文本的 AI 结果，减少重复调用和延迟。

ts
app.post('/ai/:task', async (c) => {
  const { task } = c.req.param()
  const { text } = await c.req.json()

  // 生成缓存键
  const cacheKey = new Request(c.req.url, { method: 'GET' })
  const cache = await caches.default

  // 尝试读取缓存
  const cached = await cache.match(cacheKey)
  if (cached) {
    return cached
  }

  // 调用 Hugging Face API（原有逻辑）
  const result = await callHuggingFaceAPI(task, text, c.env)

  // 创建响应并缓存（仅缓存成功结果）
  const response = c.json(result)
  response.headers.append('X-Cache', 'HIT')

  // 缓存 1 小时（适合低频变化的 AI 结果）
  response.headers.append('Cache-Control', 's-maxage=3600')

  // 存入缓存
  c.executionCtx.waitUntil(cache.put(cacheKey, response.clone()))

  return response
})

缓存命中时，延迟可降至 10ms 以内。

七、安全最佳实践 ​

  1. 使用 Secrets 存储 Token

    bash
    wrangler secret put HUGGINGFACE_API_TOKEN

  2. 限制请求频率

    ts
    import { Ratelimit } from '@hono/ratelimit'

const ratelimit = Ratelimit({
  limit: 10, // 每分钟 10 次
  duration: '1 min',
  async store(key) {
    // 使用 KV 或 D1 实现存储
  }
})

app.post('/ai/*', ratelimit, handleAI)

  3. 输入清洗

    • 限制文本长度（如 ≤ 512 字符）
    • 过滤恶意内容

八、扩展：支持流式响应（SSE） ​

对于长文本生成任务（如摘要），可使用 SSE 流式返回结果：

ts
app.post('/ai/summarize', (c) => {
  return c.stream(async (stream) => {
    await stream.write('data: {"status": "starting"}\n\n')

    // 模拟流式生成
    const words = ['这是', '一个', '流式', '摘要', '示例', '。']
    for (const word of words) {
      await stream.write(`data: {"token": "${word}"}\n\n`)
      await new Promise(r => setTimeout(r, 300))
    }

    await stream.write('data: {"done": true}\n\n')
    await stream.close()
  })
})

九、总结 ​

通过在 Cloudflare Worker + Hono 中调用 Hugging Face API，你可以：

优势实现方式
全球低延迟边缘计算，就近处理
安全可靠Secrets + Rate Limiting
性能优化Cache API 缓存结果
智能服务集成 SOTA AI 模型
快速部署Hono + Wrangler 一键发布

Edge + AI 正在重塑 Web 应用的边界。
从“请求-响应”到“智能实时交互”，Hono 让你在边缘构建下一代 AI 原生应用变得前所未有的简单。

立即尝试将你的 AI 服务部署到边缘，为用户提供秒级智能响应的极致体验。

Copyright © 2025 梁欢的前后端技术笔记 鲁ICP备2025190626号