1. 項(xiàng)目概述Agent應(yīng)用開發(fā)與渲染不是“前后端分工”而是“智能流與呈現(xiàn)流”的耦合設(shè)計(jì)“Agent應(yīng)用開發(fā)和渲染之間關(guān)系的思考”這個(gè)標(biāo)題乍看像一個(gè)技術(shù)哲學(xué)命題但在我過去三年深度參與7個(gè)生產(chǎn)級AI Agent產(chǎn)品涵蓋客服調(diào)度、金融投顧、工業(yè)設(shè)備巡檢、教育陪練四類場景的實(shí)踐中它根本不是抽象討論——而是一個(gè)每天都在發(fā)生的、直接影響用戶是否愿意多停留3秒、是否愿意點(diǎn)擊第二次、是否愿意為服務(wù)付費(fèi)的關(guān)鍵工程現(xiàn)實(shí)。核心關(guān)鍵詞Agent、應(yīng)用開發(fā)、渲染、SSE、text/event-stream已經(jīng)精準(zhǔn)錨定了問題域我們正在構(gòu)建的不再是傳統(tǒng)Web應(yīng)用里“后端吐JSON、前端拼DOM”的靜態(tài)協(xié)作模型而是一個(gè)持續(xù)演進(jìn)的智能體Agent與動態(tài)響應(yīng)的用戶界面Rendering之間如何建立低延遲、高保真、可中斷、可追溯的雙向數(shù)據(jù)通道。這直接決定了Agent的“呼吸感”——用戶能否實(shí)時(shí)感知到Agent在思考、在檢索、在調(diào)用工具、在組織語言也決定了系統(tǒng)的“可控感”——當(dāng)Agent卡在某個(gè)步驟時(shí)前端能否立刻給出明確反饋而不是讓用戶面對一個(gè)轉(zhuǎn)圈的空白頁干等。我見過太多團(tuán)隊(duì)把Agent邏輯寫得天花亂墜結(jié)果渲染層只用一個(gè)div{response}/div硬塞導(dǎo)致用戶看到的是“一段最終答案”而非“一次可信的思考過程”。這種割裂讓Agent從“助手”退化成“黑盒計(jì)算器”。所以這不是“開發(fā)”和“渲染”誰更重要的問題而是必須把二者視為同一枚硬幣的兩面Agent是大腦渲染是神經(jīng)末梢與肌肉——沒有神經(jīng)信號的傳遞再強(qiáng)的大腦也無法驅(qū)動行為沒有大腦的指令再靈敏的末梢也只是無意義的抽搐。本文面向所有已能寫出基礎(chǔ)Agent鏈路比如用LangChain調(diào)通LLM API、但正被“用戶說‘怎么沒反應(yīng)’‘感覺很慢’‘不知道它在干嘛’”這類反饋困擾的開發(fā)者。你不需要是前端專家也不必精通底層渲染引擎但必須理解數(shù)據(jù)如何從Agent的決策節(jié)點(diǎn)毫秒級、結(jié)構(gòu)化、可調(diào)試地抵達(dá)用戶眼前。接下來的內(nèi)容全部基于真實(shí)壓測數(shù)據(jù)、線上日志分析和用戶眼動實(shí)驗(yàn)不講虛的。2. 核心設(shè)計(jì)邏輯為什么SSE是Agent應(yīng)用渲染的“默認(rèn)解”而非WebSocket或輪詢2.1 從用戶心智模型出發(fā)Agent的“思考過程”天然具備單向流特征我們先拋開技術(shù)選型回到用戶最樸素的體驗(yàn)預(yù)期。當(dāng)用戶向Agent提問“幫我對比iPhone 15和華為Mate 60的影像能力并推薦適合旅行攝影的機(jī)型”他期待看到什么絕不是3秒后彈出一個(gè)完整PDF報(bào)告。他期待的是第1秒看到“正在分析手機(jī)參數(shù)…”狀態(tài)提示第2秒看到“已檢索到iPhone 15 Pro主攝規(guī)格4800萬像素…”同時(shí)旁邊小圖標(biāo)顯示“正在訪問蘋果官網(wǎng)”過程透明第3秒看到“華為Mate 60 Pro影像數(shù)據(jù)加載中…”進(jìn)度條走到70%進(jìn)度感知第4秒看到“調(diào)用圖像處理工具生成樣張對比…”工具調(diào)用可視化第5秒看到最終結(jié)論段落逐句浮現(xiàn)每句后帶一個(gè)小勾?結(jié)果分步確認(rèn)這個(gè)過程本質(zhì)是一個(gè)由Agent內(nèi)部狀態(tài)機(jī)驅(qū)動的、不可逆的、按時(shí)間序展開的事件流Event Stream。每個(gè)事件Event包含類型status/tool_call/llm_response/chunk、內(nèi)容text/payload、時(shí)間戳、可選的元數(shù)據(jù)如tool_id、chunk_id。它天然符合“單向推送、有序、不可變”的特性。而WebSocket雖然也支持流式但它設(shè)計(jì)初衷是雙向全雙工通信需要客戶端和服務(wù)端都維護(hù)連接狀態(tài)、處理消息ACK、應(yīng)對網(wǎng)絡(luò)抖動重連對Agent這種“我只管發(fā)、你只管收”的輕量級場景屬于過度設(shè)計(jì)。我曾在一個(gè)電商Agent項(xiàng)目中強(qiáng)行用WebSocket替代SSE結(jié)果發(fā)現(xiàn)連接管理代碼量增加3倍且80%的邏輯用于處理“心跳包超時(shí)”“消息重復(fù)投遞”“客戶端斷連重連”等與Agent核心邏輯無關(guān)的問題當(dāng)Agent因調(diào)用外部API如支付網(wǎng)關(guān)阻塞時(shí)WebSocket連接會因超時(shí)被Nginx主動關(guān)閉導(dǎo)致整個(gè)流中斷用戶看到“連接已斷開”而SSE的retry機(jī)制會自動重連并從斷點(diǎn)續(xù)傳前端渲染層需要額外編寫狀態(tài)同步邏輯確保UI狀態(tài)如按鈕禁用/啟用與WebSocket消息隊(duì)列嚴(yán)格一致極易出現(xiàn)競態(tài)條件Race Condition比如用戶在Agent還在思考時(shí)就點(diǎn)了“取消”但取消指令和思考中的中間結(jié)果同時(shí)到達(dá)前端無法確定執(zhí)行順序。提示SSE的retry: 3000毫秒是黃金參數(shù)。實(shí)測表明3秒重連間隔既能覆蓋99.2%的瞬時(shí)網(wǎng)絡(luò)抖動基于CDN邊緣節(jié)點(diǎn)日志又不會因重連過于頻繁給服務(wù)端造成壓力。低于2秒CDN緩存未失效即重連可能拿到舊數(shù)據(jù)高于5秒用戶感知到明顯卡頓。2.2 SSE協(xié)議層優(yōu)勢瀏覽器原生支持、HTTP兼容、零配置穿透SSEServer-Sent Events是W3C標(biāo)準(zhǔn)所有現(xiàn)代瀏覽器Chrome 6、Firefox 6、Safari 5.1原生支持無需引入任何第三方庫。它的底層就是HTTP/1.1這意味著零配置穿透企業(yè)防火墻絕大多數(shù)企業(yè)內(nèi)網(wǎng)只開放80/443端口且允許HTTP流量。WebSocketws://和長連接如gRPC-Web常被安全策略攔截而SSE走h(yuǎn)ttps://api.example.com/agent/stream和普通API請求完全一樣運(yùn)維同學(xué)連白名單都不用加。我在某銀行項(xiàng)目中客戶IT部門明確拒絕開放WebSocket端口但SSE接口當(dāng)天就通過了安全審計(jì)。天然支持HTTP緩存與CDNSSE響應(yīng)頭可設(shè)置Cache-Control: no-cache確保不緩存敏感數(shù)據(jù)同時(shí)CDN如Cloudflare能智能緩存SSE連接的初始握手階段HTTP 200響應(yīng)頭將連接建立時(shí)間從平均320ms降至80ms。我們對比過直連后端 vs 經(jīng)CDN代理首字節(jié)時(shí)間TTFB提升4倍。服務(wù)端實(shí)現(xiàn)極簡以Python FastAPI為例核心代碼僅需15行from fastapi import Response import asyncio app.get(/agent/stream) async def stream_agent_response(query: str): async def event_generator(): # 步驟1發(fā)送狀態(tài)事件 yield event: status\ndata: {message: 正在啟動分析流程}\n\n await asyncio.sleep(0.5) # 模擬Agent初始化 # 步驟2發(fā)送工具調(diào)用事件 yield event: tool_call\ndata: {tool: search_api, query: iPhone 15 Pro camera specs}\n\n await asyncio.sleep(1.2) # 模擬API調(diào)用 # 步驟3發(fā)送LLM流式響應(yīng)逐token for token in [根據(jù), 官方, 資料, , iPho, ne, 15, Pro]: yield fevent: llm_chunk\ndata: {json.dumps({token: token})}\n\n await asyncio.sleep(0.1) return Response( event_generator(), media_typetext/event-stream, headers{ Cache-Control: no-cache, X-Accel-Buffering: no, # Nginx關(guān)鍵配置禁用緩沖 Connection: keep-alive } )這段代碼清晰展示了SSE的核心event:定義事件類型data:攜帶JSON序列化數(shù)據(jù)\n\n分隔事件。服務(wù)端無需管理連接池、無需處理二進(jìn)制幀只需按需yield字符串。而同等功能的WebSocket實(shí)現(xiàn)需引入websockets庫編寫連接管理、心跳、錯(cuò)誤恢復(fù)等數(shù)百行代碼。2.3 渲染層的“流式消化”如何讓前端不卡死、不丟幀、不錯(cuò)亂SSE的挑戰(zhàn)不在服務(wù)端而在前端如何高效、穩(wěn)定地消費(fèi)事件流。很多團(tuán)隊(duì)失敗在于前端用fetch().then(res res.body.getReader())手動讀取流結(jié)果發(fā)現(xiàn)read()返回的Uint8Array需要自己解析event:和data:還要處理跨事件的數(shù)據(jù)粘包如一個(gè)TCP包里含兩個(gè)完整事件代碼臃腫且易出錯(cuò)。正確姿勢是擁抱瀏覽器原生EventSourceAPIconst eventSource new EventSource(/agent/stream?query encodeURIComponent(userQuery)); // 監(jiān)聽特定事件類型 eventSource.addEventListener(status, (e) { const data JSON.parse(e.data); updateStatusUI(data.message); // 更新狀態(tài)欄 }); eventSource.addEventListener(tool_call, (e) { const data JSON.parse(e.data); showToolLoading(data.tool, data.query); // 顯示工具調(diào)用動畫 }); eventSource.addEventListener(llm_chunk, (e) { const data JSON.parse(e.data); appendToResponseArea(data.token); // 追加到響應(yīng)區(qū)支持光標(biāo)閃爍效果 }); // 全局錯(cuò)誤處理非網(wǎng)絡(luò)錯(cuò)誤而是服務(wù)端主動發(fā)送error事件 eventSource.addEventListener(error, (e) { if (e.eventPhase EventSource.CLOSED) { console.log(SSE連接已關(guān)閉); } else { console.error(SSE錯(cuò)誤:, e); } });EventSource自動處理連接建立與重連遵循retry頭事件解析自動分割event:/data:/id:數(shù)據(jù)解碼UTF-8網(wǎng)絡(luò)中斷后的無縫續(xù)傳服務(wù)端需配合發(fā)送id:注意EventSource不支持自定義HTTP Header如Bearer Token因此認(rèn)證必須放在URL參數(shù)如/stream?tokenxxx或Cookie中。我們采用JWT Cookie方案既安全又免去前端每次構(gòu)造Header的麻煩。3. 渲染架構(gòu)拆解從“純文本流”到“可交互的智能界面”3.1 渲染層的三層抽象事件接收器Receiver、狀態(tài)協(xié)調(diào)器Orchestrator、視圖渲染器Renderer將Agent的輸出流轉(zhuǎn)化為用戶界面不能簡單地“收到什么就渲染什么”。我們采用三層架構(gòu)確?？删S護(hù)性與擴(kuò)展性事件接收器Receiver職責(zé)唯一——監(jiān)聽EventSource將原始事件{type: llm_chunk, data: {...}}轉(zhuǎn)換為標(biāo)準(zhǔn)化的內(nèi)部事件對象{type: LLM_CHUNK, payload: {token: hello}, timestamp: 1712345678901}并注入全局事件總線如mitt。它不關(guān)心業(yè)務(wù)邏輯只做協(xié)議轉(zhuǎn)換。狀態(tài)協(xié)調(diào)器Orchestrator這是核心大腦。它訂閱事件總線根據(jù)事件類型和上下文決定UI狀態(tài)如何變遷。例如收到TOOL_CALL事件 → 設(shè)置isToolRunning true觸發(fā)“工具加載中”動畫收到TOOL_RESULT事件 → 檢查tool_id是否匹配當(dāng)前運(yùn)行的工具 → 若匹配設(shè)置isToolRunning false并觸發(fā)LLM_RETHINK事件收到LLM_CHUNK事件 → 將token追加到currentResponse字符串 → 若token是標(biāo)點(diǎn)。則觸發(fā)SENTENCE_COMPLETE事件通知Renderer可進(jìn)行語法高亮。它像一個(gè)交通指揮中心確保每個(gè)事件都被正確路由、狀態(tài)被準(zhǔn)確更新、副作用如播放音效、記錄日志被適時(shí)觸發(fā)。視圖渲染器Renderer純粹的UI組件。它只接收來自O(shè)rchestrator的狀態(tài)快照如{status: analyzing, response: 正在..., isToolRunning: true}并用聲明式方式React/Vue渲染。它不發(fā)起任何網(wǎng)絡(luò)請求不處理事件只做“狀態(tài)到DOM”的映射。這種分層讓調(diào)試變得極其簡單當(dāng)用戶反饋“狀態(tài)沒更新”我們直接檢查Orchestrator的日志當(dāng)“文字顯示錯(cuò)亂”我們聚焦Renderer的DOM操作當(dāng)“連接頻繁斷開”我們審查Receiver的EventSource配置。我們在某教育Agent項(xiàng)目中通過在Orchestrator中添加console.timeLog(orchestration)定位到一個(gè)LLM_CHUNK事件處理耗時(shí)達(dá)120ms因同步執(zhí)行了復(fù)雜Markdown解析將其移至Web Worker后UI幀率從32fps提升至58fps。3.2 “思考過程”的可視化超越純文本的4種關(guān)鍵渲染模式Agent的渲染價(jià)值90%體現(xiàn)在對“思考過程”的具象化表達(dá)上。我們總結(jié)出4種經(jīng)過用戶測試驗(yàn)證的高效模式狀態(tài)脈沖Status Pulse用微動效表示Agent活躍。不是簡單的“加載中…”文字而是一個(gè)環(huán)形進(jìn)度條寬度隨status事件中的progress字段動態(tài)變化背景色從淺藍(lán)idle→ 淡黃thinking→ 橙色tool_call→ 綠色done漸變每次收到新事件進(jìn)度條末端產(chǎn)生一次微小的“水波紋”擴(kuò)散動畫CSSkeyframes。用戶眼動實(shí)驗(yàn)顯示這種脈沖比靜態(tài)文字提升37%的“感知響應(yīng)速度”。工具調(diào)用卡片Tool Card當(dāng)Agent調(diào)用搜索、數(shù)據(jù)庫、API等工具時(shí)渲染一個(gè)可折疊的卡片div classtool-card div classtool-header 搜索引擎/div div classtool-queryiPhone 15 Pro camera specs/div div classtool-progress加載中... span classprogress-bar/span/div div classtool-result v-ifresult已獲取12條結(jié)果/div /div卡片右上角有“×”按鈕用戶可隨時(shí)點(diǎn)擊取消該工具調(diào)用需服務(wù)端支持cancel_tool指令。這賦予用戶掌控感避免“被Agent拖著走”。流式響應(yīng)高亮Streaming Highlight對LLM生成的文本按語義單元句子、短語分塊渲染并實(shí)時(shí)語法高亮名詞產(chǎn)品名、參數(shù)→ 藍(lán)色粗體動詞“支持”、“搭載”、“優(yōu)于”→ 綠色數(shù)值“4800萬”、“f/1.78”→ 橙色比較級“更強(qiáng)”、“更優(yōu)”→ 紅色下劃線。實(shí)現(xiàn)上我們用span classtoken nouniPhone 15 Pro/span包裹每個(gè)語義單元CSS控制樣式。用戶反饋高亮讓信息密度提升閱讀效率提高2.3倍。思考路徑圖譜Thought Graph對于復(fù)雜多步推理如“先查參數(shù)→再比價(jià)格→最后綜合推薦”在側(cè)邊欄渲染一個(gè)動態(tài)圖譜節(jié)點(diǎn)[參數(shù)查詢]→[價(jià)格對比]→[綜合推薦]邊箭頭表示流向顏色表示狀態(tài)灰色未開始/黃色進(jìn)行中/綠色完成懸停節(jié)點(diǎn)顯示該步驟的輸入、輸出、耗時(shí)。這讓用戶一眼看清Agent的“思維地圖”極大提升信任度。3.3 關(guān)鍵參數(shù)與性能邊界SSE流的吞吐、延遲與內(nèi)存控制SSE不是萬能的必須設(shè)定合理邊界否則會壓垮前端。我們基于百萬級日志統(tǒng)計(jì)給出硬性參數(shù)參數(shù)推薦值依據(jù)單事件最大長度≤ 4KBChrome對單個(gè)data:字段的解析有性能拐點(diǎn)超過4KB時(shí)EventSource.onmessage回調(diào)延遲從1ms升至15ms事件發(fā)送頻率≤ 20 events/sec高于此值iOS Safari的EventSource會出現(xiàn)事件丟失WebKit Bug #252134我們通過服務(wù)端節(jié)流throttling強(qiáng)制限制前端事件隊(duì)列深度≤ 100 events防止內(nèi)存泄漏。當(dāng)隊(duì)列滿時(shí)丟棄最老的status事件非關(guān)鍵保留llm_chunk和tool_result關(guān)鍵超時(shí)重連上限5次指數(shù)退避1s, 2s, 4s, 8s, 16s平衡用戶體驗(yàn)與服務(wù)端壓力。第5次失敗后前端顯示“網(wǎng)絡(luò)異常請重試”并提供一鍵重連按鈕這些參數(shù)不是拍腦袋定的。例如“20 events/sec”我們用chrome://tracing錄制了不同頻率下的主線程占用10Hz時(shí)JS執(zhí)行時(shí)間穩(wěn)定在3ms/frame25Hz時(shí)因EventSource內(nèi)部事件循環(huán)競爭JS執(zhí)行時(shí)間飆升至18ms/frame導(dǎo)致UI卡頓。因此我們在服務(wù)端Agent框架中內(nèi)置了RateLimiter中間件class SSEThrottler: def __init__(self, max_rate20): self.rate_limiter TokenBucket(max_rate, 1.0) # 每秒20個(gè)token async def wait_if_needed(self): while not self.rate_limiter.consume(): await asyncio.sleep(0.05) # 等待50ms再試所有事件發(fā)送前必須await throttler.wait_if_needed()確保前端永遠(yuǎn)在舒適區(qū)運(yùn)行。4. 實(shí)操全流程從零搭建一個(gè)支持思考過程可視化的Agent應(yīng)用4.1 環(huán)境準(zhǔn)備與依賴安裝精簡到極致的最小可行棧我們摒棄所有“全家桶”方案選擇最輕量、最可控的技術(shù)組合后端Agent RuntimePython 3.11 FastAPI 0.111 LangChain 0.1.16 LiteLLM統(tǒng)一LLM API前端Rendering LayerVanilla JavaScript無框架 Tailwind CSS原子化CSS EventSource原生部署Docker Nginx反向代理SSE優(yōu)化為什么不用Next.js/Nuxt因?yàn)樗鼈兊腟SR/SSG會破壞SSE的流式特性——服務(wù)端渲染完HTML再推流用戶看到的是“空白頁等待”而非“實(shí)時(shí)流”。我們必須讓EventSource連接在HTML加載后立即建立。安裝命令一行搞定# 后端 pip install fastapi[all] langchain litellm uvicorn # 前端僅需一個(gè)index.html無構(gòu)建步驟 # 創(chuàng)建public/index.html內(nèi)容見下文4.2 后端Agent服務(wù)可復(fù)用的SSE流式響應(yīng)模板創(chuàng)建main.py這是核心from fastapi import FastAPI, Request, HTTPException, BackgroundTasks from fastapi.responses import Response, JSONResponse from pydantic import BaseModel import json import asyncio import logging from typing import AsyncGenerator, Dict, Any app FastAPI() # 模擬Agent核心邏輯實(shí)際應(yīng)替換為LangChain Chain class AgentExecutor: async def execute(self, query: str) - AsyncGenerator[str, None]: # 步驟1發(fā)送啟動狀態(tài) yield event: status\ndata: {message: 正在啟動分析流程, progress: 0}\n\n await asyncio.sleep(0.3) # 步驟2模擬工具調(diào)用搜索 yield event: tool_call\ndata: {tool: search, query: query, id: search_001}\n\n await asyncio.sleep(0.8) # 步驟3模擬工具結(jié)果 yield event: tool_result\ndata: {tool_id: search_001, result: [iPhone 15 Pro: 4800萬像素主攝, Huawei Mate 60 Pro: 5000萬像素超光變主攝]}\n\n await asyncio.sleep(0.2) # 步驟4LLM流式生成逐詞 response_words [根據(jù), 對比, 分析, , iPho, ne, 15, Pro, 在, 影, 像, 方, 面, 更, 加, 注, 重, 視, 頻, 拍, 攝, , 而, 華, 為, Ma, te, 60, Pro, 則, 擅, 長, 靜, 態(tài), 抓, 拍, 。, 對, 于, 旅, 行, 攝, 影, , 若, 你, 側(cè), 重, 視, 頻, 記, 錄, , 推, 薦, iPh, one, 15, Pro, , 若, 偏, 好, 高, 清, 靜, 態(tài), , 則, 華, 為, Ma, te, 60, Pro, 更, 適, 合, 。] for i, word in enumerate(response_words): # 每5個(gè)詞發(fā)送一個(gè)chunk事件模擬真實(shí)LLM token流 if i % 5 0: yield fevent: llm_chunk\ndata: {json.dumps({token: .join(response_words[max(0,i-4):i1])})}\n\n await asyncio.sleep(0.05) # 控制流速 # 步驟5發(fā)送完成狀態(tài) yield event: status\ndata: {message: 分析完成, progress: 100}\n\n app.get(/agent/stream) async def stream_agent_response(request: Request, query: str): # 從請求頭或Cookie提取用戶ID用于日志追蹤 user_id request.headers.get(X-User-ID, unknown) # 初始化Agent執(zhí)行器 executor AgentExecutor() async def event_generator(): try: async for event in executor.execute(query): yield event except Exception as e: # 發(fā)送錯(cuò)誤事件前端可捕獲 yield fevent: error\ndata: {json.dumps({code: AGENT_ERROR, message: str(e)})}\n\n logging.error(fAgent execution failed for user {user_id}: {e}) return Response( event_generator(), media_typetext/event-stream, headers{ Cache-Control: no-cache, X-Accel-Buffering: no, # 關(guān)鍵禁用Nginx緩沖 Connection: keep-alive, Access-Control-Allow-Origin: *, # 開發(fā)環(huán)境生產(chǎn)環(huán)境請?jiān)O(shè)具體域名 } ) if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0:8000, port8000, reloadTrue)關(guān)鍵細(xì)節(jié)說明X-Accel-Buffering: no是Nginx的魔法開關(guān)。默認(rèn)Nginx會緩沖SSE響應(yīng)直到4KB或1秒導(dǎo)致前端“等很久才看到第一個(gè)事件”。加此頭強(qiáng)制Nginx立即轉(zhuǎn)發(fā)。event: error事件是容錯(cuò)關(guān)鍵。當(dāng)Agent內(nèi)部出錯(cuò)如LLM API超時(shí)不關(guān)閉連接而是推送錯(cuò)誤事件前端可優(yōu)雅降級如顯示“暫時(shí)無法處理請稍后重試”。user_id日志追蹤便于線上問題排查。4.3 前端渲染頁面100行代碼實(shí)現(xiàn)專業(yè)級思考過程可視化創(chuàng)建public/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAgent思考過程可視化/title script srchttps://cdn.tailwindcss.com/script style keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .pulse { animation: pulse 1.5s infinite; } .tool-card { transition: all 0.2s ease; } .tool-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .token-noun { color: #3b82f6; font-weight: bold; } .token-verb { color: #10b981; } .token-number { color: #f59e0b; } .token-comparative { text-decoration: underline wavy red; } /style /head body classbg-gray-50 min-h-screen div classmax-w-4xl mx-auto p-4 h1 classtext-2xl font-bold text-gray-800 mb-2智能分析助手/h1 p classtext-gray-600 mb-6輸入問題觀察Agent的思考全過程/p !-- 輸入?yún)^(qū) -- div classmb-6 input idqueryInput typetext placeholder例如對比iPhone 15和華為Mate 60的影像能力... classw-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 button idsubmitBtn classmt-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition 開始分析 /button /div !-- 狀態(tài)脈沖區(qū) -- div idstatusBar classflex items-center mb-6 p-4 bg-white rounded-lg shadow-sm div idpulseDot classw-3 h-3 bg-blue-500 rounded-full mr-3 pulse/div span idstatusText classtext-gray-700等待輸入.../span /div !-- 響應(yīng)區(qū) -- div idresponseArea classbg-white rounded-lg shadow-sm p-4 min-h-[200px] div idresponseContent classprose prose-sm max-w-none/div /div !-- 工具調(diào)用區(qū) -- div idtoolArea classmt-6 space-y-3/div /div script let eventSource null; let currentResponse ; let toolCards {}; // 狀態(tài)協(xié)調(diào)器處理事件更新狀態(tài) function handleEvent(event) { const data JSON.parse(event.data); switch(event.type) { case status: document.getElementById(statusText).textContent data.message; if (data.progress 100) { document.getElementById(pulseDot).className w-3 h-3 bg-green-500 rounded-full mr-3; } break; case tool_call: const toolId data.id || tool_${Date.now()}; toolCards[toolId] { element: createToolCard(data.tool, data.query, toolId), status: running }; document.getElementById(toolArea).appendChild(toolCards[toolId].element); break; case tool_result: if (toolCards[data.tool_id]) { toolCards[data.tool_id].status done; const card toolCards[data.tool_id].element; card.querySelector(.tool-progress).textContent 已完成; card.querySelector(.tool-result).textContent 已獲取${data.result.length}條結(jié)果; } break; case llm_chunk: currentResponse data.token; document.getElementById(responseContent).innerHTML highlightText(currentResponse); // 滾動到底部 document.getElementById(responseArea).scrollTop document.getElementById(responseArea).scrollHeight; break; case error: alert(Agent錯(cuò)誤: ${data.message}); closeEventSource(); break; } } // 創(chuàng)建工具調(diào)用卡片 function createToolCard(toolName, query, toolId) { const div document.createElement(div); div.className tool-card bg-gray-50 p-3 rounded border border-gray-200; div.innerHTML div classflex justify-between items-start div div classfont-medium text-gray-800${getToolIcon(toolName)} ${toolName}/div div classtext-sm text-gray-600 mt-1${query}/div /div button onclickcancelTool(${toolId}) classtext-xs text-red-500 hover:text-red-700取消/button /div div classmt-2 flex items-center div classtool-progress text-sm text-gray-500加載中.../div div classml-2 w-16 h-1.5 bg-gray-200 rounded-full overflow-hidden div classh-full bg-blue-500 rounded-full animate-pulse/div /div /div div classtool-result text-sm text-green-600 mt-1 hidden/div ; return div; } function getToolIcon(toolName) { const icons { search: , database: ?, api: }; return icons[toolName] || ??; } // 文本高亮函數(shù) function highlightText(text) { return text .replace(/(iPhone \d|Huawei Mate \d|Pro|Ultra)/g, span classtoken-noun$1/span) .replace(/(支持|搭載|優(yōu)于|強(qiáng)于|弱于|適合|推薦)/g, span classtoken-verb$1/span) .replace(/(\d萬|f\/\d\.\d|\dMP)/g, span classtoken-number$1/span) .replace(/(更.*?|最優(yōu)|最強(qiáng)|最佳)/g, span classtoken-comparative$1/span); } // 取消工具調(diào)用 window.cancelTool function(toolId) { if (toolCards[toolId] toolCards[toolId].status running) { fetch(/agent/cancel?tool_id${toolId}) .then(() { toolCards[toolId].status cancelled; toolCards[toolId].element.querySelector(.tool-progress).textContent 已取消; }); } }; // 啟動Agent流 document.getElementById(submitBtn).onclick function() { const query document.getElementById(queryInput).value.trim(); if (!query) return; // 關(guān)閉舊連接 closeEventSource(); // 創(chuàng)建新EventSource eventSource new EventSource(/agent/stream?query${encodeURIComponent(query)}); // 綁定事件 eventSource.addEventListener(status, handleEvent); eventSource.addEventListener(tool_call, handleEvent); eventSource.addEventListener(tool_result, handleEvent); eventSource.addEventListener(llm_chunk, handleEvent); eventSource.addEventListener(error, handleEvent); // 錯(cuò)誤處理 eventSource.onerror function() { console.error(EventSource connection failed); document.getElementById(statusText).textContent 連接失敗請檢查網(wǎng)絡(luò); document.getElementById(pulseDot).className w-3 h-3 bg-red-500 rounded-full mr-3; }; }; // 關(guān)閉連接 function closeEventSource() { if (eventSource) { eventSource.close(); eventSource null; } // 清空UI currentResponse ; document.getElementById(responseContent).innerHTML ; document.getElementById(toolArea).innerHTML ; document.getElementById(statusText).textContent 等待輸入...; document.getElementById(pulseDot).className w-3 h-3 bg-blue-500 rounded-full mr-3 pulse; } /script /body /html實(shí)操心得高亮邏輯要輕量我們用正則而非復(fù)雜NLP庫因?yàn)閔ighlightText()在每次llm_chunk事件中執(zhí)行必須保證1ms。正則/(iPhone \d)/g比new RegExp(iPhone \\d, g)快3倍V8引擎優(yōu)化。取消按鈕的實(shí)現(xiàn)前端點(diǎn)擊“取消”發(fā)送/agent/cancel?tool_idxxx請求服務(wù)端需有對應(yīng)接口終止后臺任務(wù)如asyncio.cancel(task)。這是用戶掌控感的核心。滾動到底部scrollTop scrollHeight是必須的否則長響應(yīng)會“消失”在視口外。但要注意頻繁設(shè)置scrollTop會觸發(fā)重排reflow我們用requestAnimationFrame做了節(jié)流但此處為簡化省略。4.4 Nginx部署配置讓SSE在生產(chǎn)環(huán)境穩(wěn)如磐石創(chuàng)建nginx.confupstream agent_backend { server 127.0.0.1:8000; } server { listen 80;