如何把大模型接入自己的 Web 应用

在命令行里跑通大模型只是开始，真正落地要把它变成一个用户能访问的 Web 服务。这篇教程用 FastAPI 搭后端、原生前端调用，完整实现一个带流式输出的对话网页，涵盖从接口封装到部署上线的每一步。

系统架构

一个典型的大模型 Web 应用分三层：

    graph LR
    A[浏览器前端] -->|HTTP 请求| B[FastAPI 后端]
    B -->|调用| C[大模型 API]
    C -->|返回| B
    B -->|流式响应| A

API Key 只放在后端，绝不能暴露给前端，这是安全底线。

前置准备

pip install fastapi uvicorn openai

并在后端环境设置好 OPENAI_API_KEY。

步骤一：搭建后端骨架

新建 main.py，创建 FastAPI 应用：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()

# 允许前端跨域访问
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],       # 生产环境应改成具体域名
    allow_methods=["*"],
    allow_headers=["*"],
)

class ChatRequest(BaseModel):
    message: str

步骤二：封装普通对话接口

import os
from openai import OpenAI

client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

@app.post("/chat")
def chat(req: ChatRequest):
    resp = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": req.message}],
    )
    return {"reply": resp.choices[0].message.content}

步骤三：加上流式接口

流式输出让回答像打字一样逐字出现，体验更好。这里用 SSE（Server-Sent Events）：

from fastapi.responses import StreamingResponse

@app.post("/chat-stream")
def chat_stream(req: ChatRequest):
    def generate():
        stream = client.chat.completions.create(
            model="gpt-4o-mini",
            messages=[{"role": "user", "content": req.message}],
            stream=True,
        )
        for chunk in stream:
            delta = chunk.choices[0].delta.content or ""
            yield f"data: {delta}\n\n"     # SSE 数据格式
        yield "data: [DONE]\n\n"
    return StreamingResponse(generate(), media_type="text/event-stream")

步骤四：启动后端

uvicorn main:app --reload --port 8000

看到 Uvicorn running on http://127.0.0.1:8000 即启动成功。

步骤五：前端调用

新建 index.html，用 fetch 读取流式响应：

<input id="input" placeholder="输入问题" />
<button onclick="send()">发送</button>
<div id="output"></div>

<script>
async function send() {
  const message = document.getElementById("input").value;
  const output = document.getElementById("output");
  output.textContent = "";
  const resp = await fetch("http://127.0.0.1:8000/chat-stream", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({message}),
  });
  const reader = resp.body.getReader();
  const decoder = new TextDecoder();
  while (true) {
    const {done, value} = await reader.read();
    if (done) break;
    const text = decoder.decode(value);
    for (const line of text.split("\n")) {   // 解析 SSE 行
      if (line.startsWith("data: ")) {
        const content = line.slice(6);
        if (content !== "[DONE]") output.textContent += content;
      }
    }
  }
}
</script>

一次完整请求的时序

    sequenceDiagram
    participant B as 浏览器
    participant S as FastAPI 后端
    participant M as 大模型
    B->>S: POST /chat-stream 用户消息
    S->>M: 转发请求 stream 开启
    M-->>S: 逐块返回内容
    S-->>B: SSE 逐块推送
    B->>B: 实时渲染到页面