给博客添加一个私有化的 AI 对话功能

最近我一直在琢磨，怎么能让我的博客更有趣一点。除了写文章，还能不能提供一些更具互动性的功能？很自然地，我想到了现在大火的 AI 对话。

市面上有很多现成的第三方聊天插件，但它们或多或少都有一些问题：要么是界面样式丑陋且难以定制，要么是需要将访客数据交给第三方，再或者就是价格不菲。作为一个喜欢折腾的开发者，我更倾向于一个能完全由自己掌控的解决方案。

于是，我花了点时间，为我的博客打造了一个私有化的 AI 对话功能。它主要由两部分组成：

一个部署在 Cloudflare Workers 上的通用 AI 代理。
一个用 Svelte 编写的、功能丰富的聊天前端组件。

这个组合的好处是显而易见的：

隐私和控制：API Key 和聊天记录完全由用户浏览器端掌控，不经过我的服务器。
高度灵活：它支持任何与 OpenAI API 格式兼容的 AI 服务，无论是 OpenAI 官方、Azure、Google Gemini，还是自建的本地模型，只要 API 接口兼容，就能无缝切换。
界面美观：前端组件完全自定义，可以深度融入博客的整体风格。

接下来，我将详细介绍如何将这个功能集成到你自己的网站中。

后端：一个解决 CORS 的通用 AI 代理#

如果你尝试过直接在前端（浏览器）调用 AI 服务的 API，你大概率会遇到一个经典问题：CORS (跨域资源共享) 错误。出于安全考虑，浏览器会阻止你的网站向一个不同的域名（比如 api.openai.com）发送请求。

为了解决这个问题，我编写了一个非常简单的 Cloudflare Worker，它的作用就像一个中间人或代理，前端将请求发送给这个 Worker，Worker 再把请求转发给真正的 AI API。因为 Worker 运行在云端服务器上，所以它不受浏览器同源策略的限制。

这个 Worker 的设计非常纯粹和无状态（stateless），它本身不存储任何 API Key 或配置。所有的配置都由前端在每次请求时动态提供。

如何使用这个 Worker？#

部署：将 ai-worker/index.ts 的代码部署到你自己的 Cloudflare Workers 服务上，你会得到一个唯一的 Worker URL，例如 https://my-ai-proxy.workers.dev。
配置请求头：当你的前端应用调用这个 Worker 时，必须在请求头（Headers）中包含两个关键信息：
- Authorization: 你的 AI 服务提供商的 API Key。格式为 Bearer <YOUR_API_KEY>。
- X-API-URL: 你想要调用的目标 AI API 的完整地址。例如 https://api.openai.com/v1/chat/completions。

这个 Worker 会原封不动地将你的请求体（包含模型名称、消息历史等）和 Authorization 头转发给 X-API-URL 指定的地址，并将收到的响应以流式（Streaming）的方式传回给前端。

前端：功能强大的 Svelte 聊天组件#

前端部分是一个独立的 Svelte 组件 (src/components/Chat.svelte)，它负责渲染整个聊天界面和处理用户交互。

它包含了很多实用的功能：

配置面板：一个可展开的调试/配置面板，用于设置 Worker 地址和 AI 参数。
本地存储：所有配置都会自动保存在浏览器的 localStorage 中，用户只需配置一次。
Markdown & 代码高亮：AI 的回复会被解析为 Markdown，代码块也能正确高亮。
图片粘贴：支持直接从剪贴板粘贴图片并发送给支持多模态输入的模型。
流式响应：逐字显示 AI 的回复，带来流畅的打字机效果。

如何使用这个组件？#

创建页面：首先，你需要一个页面来承载这个聊天组件。在 Astro 项目中，可以创建一个 src/pages/chat.astro 文件。

1
---
2
import Layout from '@/layouts/Layout.astro';
3
import Chat from '@/components/Chat.svelte';
4
---
5
<Layout seo={{ title: 'AI Chat' }}>
6
  <div class="chat-container-wrapper">
7
    <Chat client:load />
8
  </div>
9
</Layout>
10
<style is:global>
11
  /* 确保聊天界面占满整个屏幕 */
12
  html, body, #__astro, .main-content {
13
    height: 100%;
14
    padding: 0 !important;
15
    max-width: 100% !important;
16
  }
17
  .chat-container-wrapper {
18
    height: 100%;
19
    overflow: hidden;
20
  }
21
</style>

安装依赖：这个组件依赖 marked 和 dompurify 来处理和净化 AI 的 Markdown 回复。
Terminal window
```
1
pnpm install marked dompurify
```
配置和使用：当用户第一次访问聊天页面时，界面会提示他们进行配置。
- 点击右上角的 “显示调试” 按钮，展开配置面板。
- Worker URL：填入上一步你部署好的 Cloudflare Worker 的地址。
- API Key：填入你的 AI 服务提供商的 API Key。这个 Key 只会存在你的浏览器本地，非常安全。
- API Endpoint：填入目标 API 地址。
- Model：指定要使用的模型名称，例如 gpt-4o 或 glm-4.5。
- System Prompt：可选，可以设置一个系统提示来定义 AI 的角色和行为。
完成配置后，就可以开始对话了。

总结#

通过“Cloudflare Worker 代理 + Svelte 前端组件”这个组合，我成功地为网站添加了一个功能完善、高度可控且注重隐私的 AI 对话功能。它不仅解决了跨域调用的技术难题，还提供了远超第三方插件的灵活性和定制性。

文件内容#

直接给你抄作业😡😋

1
src/pages/chat.astro
2
---
3
import Layout from '@/layouts/Layout.astro';
4
import Chat from '@/components/Chat.svelte';
5

6
const seo = {
7
  title: 'AI Chat',
8
  description: 'An interactive chat interface powered by AI.',
9
};
10
---
11

12
<Layout {seo}>
13
  <div class="page-wrapper">
14
    <header class="page-header">
15
      <a href="https://www.497995.xyz" class="home-link">
16
        &larr; 返回主页
17
      </a>
18
    </header>
19
    <div class="chat-container-wrapper">
20
      <Chat client:load />
21
    </div>
22
  </div>
23
</Layout>
24
<style is:global>
25
  /* Ensure body and container are full height */
26
  html, body, #__astro {
27
    height: 100%;
28
  }
29
  /* Override layout padding for this page */
30
  .main-content {
31
    padding: 0 !important;
32
    max-width: 100% !important;
33
    height: 100%;
34
  }
35
  .page-wrapper {
36
    position: relative; /* Needed for the ::before pseudo-element */
37
    z-index: 0;
38
    display: flex;
39
    flex-direction: column;
40
    height: 100%;
41
    background-color: transparent;
42
  }
43
  .page-wrapper::before {
44
    content: '';
45
    position: absolute;
46
    top: 0;
47
    left: 0;
48
    width: 100%;
49
    height: 100%;
50
    background-image: url('https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/197/197-bigskin-6.jpg');
51
    background-position: center;
52
    background-size: cover;
53
    background-repeat: no-repeat;
54
    opacity: 0;
55
    pointer-events: none;
56
    z-index: -1;
57
    transition: opacity 0.5s ease-in-out;
58
  }
59
  .page-wrapper.bg-loaded::before {
60
    opacity: 0.15;
61
  }
62
  .page-header {
63
    padding: 0.75rem 1.5rem;
64
    /* Make header transparent to see the background */
65
    background-color: rgba(255, 255, 255, 0.7);
66
    backdrop-filter: saturate(180%) blur(10px);
67
    -webkit-backdrop-filter: saturate(180%) blur(10px);
68
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
69
    flex-shrink: 0;
70
    position: relative; /* Ensure header is above the ::before pseudo-element */
71
    z-index: 1;
72
  }
73
  .home-link {
74
    text-decoration: none;
75
    color: #374151;
76
    font-weight: 500;
77
  }
78
  .home-link:hover {
79
    color: #3b82f6;
80
  }
81
  .chat-container-wrapper {
82
    flex-grow: 1;
83
    overflow: hidden;
84
    position: relative; /* Ensure chat content is above the ::before pseudo-element */
85
    z-index: 1;
86
  }
87
</style>
88

89
<script>
90
  document.addEventListener('astro:page-load', () => {
91
    const bgUrl = 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/197/197-bigskin-6.jpg';
92
    const pageWrapper = document.querySelector('.page-wrapper') as HTMLElement;
93

94
    if (pageWrapper) {
95
      const img = new Image();
96
      img.onload = () => {
97
        pageWrapper.classList.add('bg-loaded');
98
      };
99
      img.src = bgUrl;
100
    }
101
  });
102
</script>
103
```
104

105

106
（bgUrl替换成自己的背景）
107
index.js
108
````astro
109
export default {
110
  async fetch(request) {
111
    // Handle CORS preflight requests sent by browsers.
112
    if (request.method === 'OPTIONS') {
113
      return handleOptions(request);
114
    }
115

116
    if (request.method !== 'POST') {
117
      return new Response(JSON.stringify({ error: 'Method Not Allowed' }), {
118
        status: 405,
119
        headers: corsHeaders(),
120
      });
121
    }
122

123
    // 1. Extract required headers from the client's request.
124
    const apiKey = request.headers.get('Authorization');
125
    const apiUrl = request.headers.get('X-API-URL');
126

127
    // 2. Validate that the required headers are present.
128
    if (!apiKey) {
129
      return new Response(JSON.stringify({ error: 'Request missing Authorization header' }), {
130
        status: 400,
131
        headers: corsHeaders({ 'Content-Type': 'application/json' }),
132
      });
133
    }
134

135
    if (!apiUrl) {
136
      return new Response(JSON.stringify({ error: 'Request missing X-API-URL header' }), {
137
        status: 400,
138
        headers: corsHeaders({ 'Content-Type': 'application/json' }),
139
      });
140
    }
141

142
    // 3. Forward the request to the target AI service.
143
    // The request body from the client is passed through directly.
144
    const proxyRequest = new Request(apiUrl, {
145
      method: 'POST',
146
      headers: {
147
        'Content-Type': 'application/json',
148
        'Authorization': apiKey,
149
      },
150
      body: request.body,
151
      // @ts-ignore
152
      duplex: 'half', // Necessary for streaming request bodies.
153
    });
154

155
    try {
156
      const response = await fetch(proxyRequest);
157

158
      // 4. Stream the response back to the client.
159
      // This handles both successful streaming responses and error responses from the target API.
160
      const { readable, writable } = new TransformStream();
161
      response.body?.pipeTo(writable);
162

163
      const responseHeaders = corsHeaders({
164
        'Content-Type': response.headers.get('Content-Type') || 'text/event-stream',
165
        'Cache-Control': 'no-cache',
166
        'Connection': 'keep-alive',
167
      });
168

169
      return new Response(readable, {
170
        status: response.status,
171
        statusText: response.statusText,
172
        headers: responseHeaders,
173
      });
174

175
    } catch (error) {
176
      console.error('Failed to connect to the target API:', error);
177
      return new Response(JSON.stringify({ error: 'Failed to connect to the target API.' }), {
178
        status: 502, // Bad Gateway
179
        headers: corsHeaders({ 'Content-Type': 'application/json' }),
180
      });
181
    }
182
  },
183
};
184

185
// Utility to generate common CORS headers for responses.
186
const corsHeaders = (additionalHeaders = {}) => {
187
  return new Headers({
188
    'Access-Control-Allow-Origin': '*', // Allow any origin to call this proxy
189
    'Access-Control-Allow-Methods': 'POST, OPTIONS',
190
    'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-API-URL',
191
    ...additionalHeaders,
192
  });
193
};
194

195
// Handles CORS preflight (OPTIONS) requests.
196
function handleOptions(request) {
197
  const requestHeaders = request.headers;
198
  if (
199
    requestHeaders.get('Origin') !== null &&
200
    requestHeaders.get('Access-Control-Request-Method') !== null &&
201
    requestHeaders.get('Access-Control-Request-Headers') !== null
202
  ) {
203
    // Standard CORS preflight response.
204
    return new Response(null, {
205
      headers: {
206
        'Access-Control-Allow-Origin': '*',
207
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
208
        'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-API-URL',
209
        'Access-Control-Max-Age': '86400', // Cache preflight response for 24 hours
210
      },
211
    });
212
  } else {
213
    // Standard OPTIONS response.
214
    return new Response(null, {
215
      headers: {
216
        Allow: 'POST, OPTIONS',
217
      },
218
    });
219
  }
220
}

天气