dw做的网站乱码,wordpress编辑权限看不到媒体库,wordpress oss官方,网站功能模块结构图ChatGPT网站源码解析#xff1a;从零搭建AI对话平台的技术实践 自建 AI 对话平台的三座大山 把大模型搬到网页上#xff0c;看似“调个接口”而已#xff0c;真正落地时 90% 的时间都花在踩这三颗雷#xff1a; 实时性#xff1a;用户一句“你好”发出去#xff0c;恨不得…ChatGPT网站源码解析从零搭建AI对话平台的技术实践自建 AI 对话平台的三座大山把大模型搬到网页上看似“调个接口”而已真正落地时 90% 的时间都花在踩这三颗雷实时性用户一句“你好”发出去恨不得下一秒就听到回复。网络、推理、渲染任何一环卡 500 ms体验直接“掉线”。上下文多轮对话要记忆Token 却越滚越大。既要保证“记得住”又得防止“撑爆”显存与钱包。成本GPT-4 每 1k tokens 0.03一上午就能烧掉一杯星巴克。缓存、截断、降级策略没做好月底账单教你做人。技术选型后端三兄弟与前端两姐妹后端Flask生态最老同步阻塞并发一上来就“红温”适合原型不适合生产。Django全家桶ORM、Admin 一把梭AI 服务里 70% 功能用不上启动慢、内存高。FastAPI异步原生pydantic 自动校验Starlette 支持 WebSocket/SSE压测 QPS 比 Flask 高 46 倍本文直接锁它。前端Vue模板友好上手快但生态对流式渲染、Markdown 数学公式支持零散。React配合 react-markdown remark-mathSSE 数据一块一块进来就能即时渲染社区方案成熟选型不纠结。核心实现拆解下面代码均摘自生产仓库可直接跑已按 PEP8/ESLint 排雷。3.1 FastAPI 骨架 JWT 鉴权先装依赖pip install fastapi[all] python-jose redis再写 main.pyfrom fastapi import FastAPI, Depends, HTTPException, status from fastapi.security import OAuth2PasswordBearer from jose import jwt import redis, uuid, time app FastAPI(titleChatGPT-lite) pool redis.Redis(host127.0.0.1, port6379, decode_responsesTrue, max_connections50) SECRET YOUR_VERY_SECRET_KEY oauth OAuth2PasswordBearer(tokenUrllogin) def verify_token(token: str Depends(oauth)): try: payload jwt.decode(token, SECRET, algorithms[HS256]) uid payload[uid] except Exception: raise HTTPException(status_codestatus.HTTP_401_UNAUTHORIZED, detailInvalid token) return uid app.post(/login) def login(username: str, password: str): # 仅示例生产请走 DBbcrypt if username ! admin or password ! 123456: raise HTTPException(401, Bad credentials) token jwt.encode({uid: 007, exp: time.time()3600}, SECRET, algorithmHS256) return {access_token: token, token_type: bearer}3.2 SSE 流式输出含异常守护from fastapi.responses import StreamingResponse import httpx, json, asyncio app.get(/chat) def chat(prompt: str, uid: str Depends(verify_token)): async def event_stream(): try: async with httpx.AsyncClient(timeouthttpx.Timeout(connect5, read60)) as client: async_chunk await client.stream( POST, https://api.openai.com/v1/chat/completions, headers{Authorization: fBearer {OPENAI_KEY}}, json{model:gpt-3.5-turbo, messages:[{: [{role:user,content:prompt}]}, stream:True}, ) async for line in async_chunk.aiter_lines(): if line.startswith(data: ): chunk line[6:] if chunk [DONE]: break delta json.loads(chunk)[choices][0][delta].get(content, ) yield fdata: {json.dumps({text:delta})}\n\n except asyncio.TimeoutError: yield fdata: {json.dumps({text:[超时] 请稍后再试})}\n\n except Exception as e: yield fdata: {json.dumps({text:[异常] 服务暂不可用})}\n\n return StreamingResponse(event_stream(), media_typetext/event-stream)3.3 React 前端 Markdown 渲染优化关键每收到一段 SSE data就把新字符串拼到 lastDelta用 useMemo 做局部刷新避免整页重渲染。import { useEffect, useState, useMemo } from react; import ReactMarkdown from react-markdown; import remarkMath from remark-math; import rehypeKatex from rehype-katex; export default function Chat() { const [text, setText] useState(); useEffect(() { const es new EventSource(/chat?prompt${encodeURIComponent(prompt)}); es.onmessage (e) { const { text: delta } JSON.parse(e.data); setText(prev prev delta); }; return () es.close(); }, [prompt]); const md useMemo(() text, [text]); return ReactMarkdown remarkPlugins{[remarkMath]} rehypePlugins{[rehypeKatex]}{md}/ReactMarkdown; }性能调优实战4.1 压测数据Locust 1 进程 200 并发持续 30 sFastAPI gunicorn 1 worker平均 RT 451 msP95 1.2 sQPS 42。开 4 worker 并加 redis 连接池平均 RT 降至 210 msQPS 118CPU 占用 68%显存稳。4.2 Redis 对话上下文内存优化只存最近 5 轮LPUSH LTRIM 0 9O(1) 复杂度。对每句做 token 计数超限用“滑动窗口”抛弃最早一句保证总量 ≤ 3k tokens。key 带 uid 日期设 TTL 3600 s自动过期防内存泄漏。避坑指南限流策略误配置OpenAI 官方 3/min 3500 rpm 是“组织级”不是“IP 级”。别把桶大小设 3500否则多用户一冲就 429。推荐 redis token bucket单 IP 60 桶/60 s。线程阻塞如果沿用 sync 库 requests 调 GPT一阻塞就是 30 s整 worker 被拖。一定用 httpx/asyncio并加 read timeout。跨域安全前端 3000 端口调 8000 端口Access-Control-Allow-Origin 设 * 会泄露鉴权接口。正确姿势from fastapi.middleware.cors import CORSMiddleware app.add_middleware(CORSMiddleware, allow_origins[http://localhost:3000], allow_credentialsTrue, ...)架构图文本版浏览器 ←SSE→ Nginx(443) ←→ FastAPI(8000) ←→ Redis限流/上下文↘OpenAI HTTPS API开放式问题模型越大效果越好可推理延迟与成本指数级上涨。你是愿意牺牲 20% 的 IQ 换来 50% 的 RT 下降还是通过缓存蒸馏让 7B 小模型也能“够用”欢迎在 GitHub 仓库 提 Issue 分享你的折中方案。动手实验推荐如果你想把“耳朵-大脑-嘴巴”一条龙体验补齐而不仅停留在文字聊天可以试试从0打造个人豆包实时通话AI动手实验。我跟着教程把语音流式对话跑通发现把 ASR、LLM、TTS 串成一条低延迟管线其实比纯文字版更有挑战也更贴近真实场景。源码全公开改两行配置就能换上自己的音色小白也能顺利体验。