建流式AI問(wèn)答應(yīng)用實(shí)戰(zhàn)指南)
這次我們來(lái)看一個(gè)結(jié)合了前沿大模型與最新前端框架的實(shí)戰(zhàn)項(xiàng)目使用 DeepSeek-V4 和 React 19 搭建一個(gè) Web 版 AI 流式問(wèn)答模板。這個(gè)項(xiàng)目的核心價(jià)值在于它提供了一個(gè)開箱即用的、現(xiàn)代化的全棧解決方案讓你能快速搭建一個(gè)具備實(shí)時(shí)流式響應(yīng)能力的 AI 對(duì)話應(yīng)用無(wú)論是用于產(chǎn)品原型驗(yàn)證、內(nèi)部工具開發(fā)還是學(xué)習(xí)全棧 AI 應(yīng)用開發(fā)都非常實(shí)用。DeepSeek-V4 作為性能強(qiáng)勁的大語(yǔ)言模型提供了強(qiáng)大的對(duì)話與推理能力而 React 19 帶來(lái)了諸如 Actions、useOptimistic、use 等新特性特別適合處理異步數(shù)據(jù)流和提升用戶體驗(yàn)。這個(gè)模板將兩者結(jié)合重點(diǎn)解決了 AI 應(yīng)用開發(fā)中常見的幾個(gè)痛點(diǎn)如何優(yōu)雅地處理流式響應(yīng)、如何管理對(duì)話狀態(tài)、如何構(gòu)建一個(gè)響應(yīng)式且美觀的前端界面以及如何搭建一個(gè)穩(wěn)定可靠的后端服務(wù)。本文將帶你從零開始理解這個(gè)模板的核心架構(gòu)完成本地環(huán)境的搭建與配置并一步步測(cè)試其核心的流式問(wèn)答功能。我們重點(diǎn)關(guān)注項(xiàng)目的啟動(dòng)方式、前后端如何協(xié)作、流式數(shù)據(jù)如何被前端接收并渲染以及如何根據(jù)自己的需求進(jìn)行定制化開發(fā)。如果你正在尋找一個(gè)能快速上手的 AI Web 應(yīng)用開發(fā)起點(diǎn)這個(gè)項(xiàng)目值得你深入嘗試。1. 核心能力速覽能力項(xiàng)說(shuō)明技術(shù)棧前端React 19 TypeScript Tailwind CSS后端Node.js (Express/Fastify 等依模板而定)核心功能集成 DeepSeek-V4 API實(shí)現(xiàn)完整的、帶流式響應(yīng)的 AI 對(duì)話界面流式響應(yīng)支持 Server-Sent Events (SSE) 或 WebSocket實(shí)現(xiàn)打字機(jī)效果的實(shí)時(shí)答案輸出對(duì)話管理支持多輪對(duì)話、對(duì)話歷史持久化通常前端狀態(tài)管理 后端可選存儲(chǔ)部署方式支持本地開發(fā)、Docker 容器化部署可輕松部署到 Vercel、Railway 等云平臺(tái)配置門檻需要準(zhǔn)備 DeepSeek API Key并正確配置后端環(huán)境變量適合場(chǎng)景AI 工具原型開發(fā)、學(xué)習(xí)全棧開發(fā)、企業(yè)內(nèi)部問(wèn)答助手、個(gè)人知識(shí)庫(kù)前端2. 適用場(chǎng)景與使用邊界這個(gè)模板非常適合以下幾類開發(fā)者或場(chǎng)景全棧學(xué)習(xí)者想通過(guò)一個(gè)完整的項(xiàng)目學(xué)習(xí)如何將 React 最新特性與 AI 能力結(jié)合。快速原型驗(yàn)證產(chǎn)品經(jīng)理或創(chuàng)業(yè)者需要快速搭建一個(gè) AI 功能演示界面驗(yàn)證想法。內(nèi)部工具開發(fā)團(tuán)隊(duì)需要構(gòu)建一個(gè)內(nèi)部使用的智能問(wèn)答或文檔分析工具。前端開發(fā)者深化希望深入理解如何處理復(fù)雜的異步數(shù)據(jù)流SSE和優(yōu)化用戶體驗(yàn)。使用邊界與注意事項(xiàng)API 依賴與成本核心 AI 能力依賴于 DeepSeek-V4 的官方 API。你需要自行申請(qǐng) API Key并了解其計(jì)費(fèi)策略。模板本身不包含任何免費(fèi)的模型部署。網(wǎng)絡(luò)要求后端服務(wù)需要能夠穩(wěn)定訪問(wèn) DeepSeek 的 API 服務(wù)器。在國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境下可能需要配置相應(yīng)的網(wǎng)絡(luò)設(shè)置以確保連通性。數(shù)據(jù)安全與隱私所有通過(guò)此應(yīng)用發(fā)送給 DeepSeek API 的對(duì)話內(nèi)容都將遵循 DeepSeek 官方的數(shù)據(jù)使用政策。如果處理敏感信息務(wù)必仔細(xì)閱讀相關(guān)條款。非生產(chǎn)級(jí)作為一個(gè)模板或起點(diǎn)它可能缺乏生產(chǎn)環(huán)境所需的高級(jí)功能如完整的用戶認(rèn)證、速率限制、監(jiān)控告警、負(fù)載均衡等你需要根據(jù)業(yè)務(wù)需求進(jìn)行補(bǔ)充開發(fā)。3. 環(huán)境準(zhǔn)備與前置條件在開始之前請(qǐng)確保你的開發(fā)環(huán)境滿足以下要求操作系統(tǒng)Windows 10/11, macOS, 或 Linux 發(fā)行版如 Ubuntu 20.04。Node.js版本 18.x 或更高版本推薦 LTS 版本。這是運(yùn)行 React 和 Node.js 后端的基礎(chǔ)。包管理器npm 或 yarn 或 pnpm。模板通常會(huì)指定推薦使用的包管理器。代碼編輯器Visual Studio Code推薦或其它現(xiàn)代 IDE。DeepSeek API Key訪問(wèn) DeepSeek 官方平臺(tái)注冊(cè)賬號(hào)并創(chuàng)建一個(gè) API Key。這是項(xiàng)目運(yùn)行的關(guān)鍵。網(wǎng)絡(luò)環(huán)境確保你的開發(fā)機(jī)器可以訪問(wèn)外網(wǎng)以便調(diào)用 DeepSeek API 和安裝 npm 包。4. 項(xiàng)目結(jié)構(gòu)與初始化典型的項(xiàng)目結(jié)構(gòu)會(huì)分為前端client和后端server兩個(gè)部分也可能是一個(gè) Monorepo 結(jié)構(gòu)。我們假設(shè)一個(gè)常見的分離式結(jié)構(gòu)進(jìn)行說(shuō)明。1. 獲取項(xiàng)目模板通常這類模板會(huì)托管在 GitHub 上。你需要克隆或下載項(xiàng)目代碼。# 示例克隆一個(gè)假設(shè)的模板倉(cāng)庫(kù) git clone 模板倉(cāng)庫(kù)的git地址 cd deepseek-react-template2. 安裝后端依賴進(jìn)入后端目錄安裝所需的 Node.js 包。cd server npm install # 或 yarn install 或 pnpm install3. 安裝前端依賴進(jìn)入前端目錄同樣安裝依賴。cd ../client npm install # 或 yarn install 或 pnpm install4. 環(huán)境變量配置這是最關(guān)鍵的一步。后端需要配置 DeepSeek API Key 等信息。在server目錄下找到或創(chuàng)建.env文件。將你的 DeepSeek API Key 填入。# server/.env 文件示例 DEEPSEEK_API_KEYyour_deepseek_api_key_here PORT3001 # 后端服務(wù)端口 CLIENT_URLhttp://localhost:3000 # 前端開發(fā)服務(wù)器地址用于配置CORS重要?jiǎng)?wù)必確保.env文件被添加到.gitignore中避免將密鑰提交到版本控制系統(tǒng)。5. 啟動(dòng)服務(wù)與功能驗(yàn)證接下來(lái)我們將分別啟動(dòng)后端和前端服務(wù)并進(jìn)行核心的流式問(wèn)答測(cè)試。5.1 啟動(dòng)后端服務(wù)在后端目錄 (server) 下運(yùn)行啟動(dòng)命令。具體命令需參考模板的package.json中的scripts。cd server npm run dev # 或 npm start 或 node app.js如果啟動(dòng)成功終端會(huì)顯示類似以下信息Server is running on http://localhost:3001 Connected to DeepSeek API.此時(shí)后端 API 服務(wù)已經(jīng)在http://localhost:3001上運(yùn)行。它通常會(huì)提供一個(gè)用于對(duì)話的端點(diǎn)例如POST /api/chat。5.2 啟動(dòng)前端開發(fā)服務(wù)器在前端目錄 (client) 下啟動(dòng) React 開發(fā)服務(wù)器。cd client npm run dev啟動(dòng)成功后控制臺(tái)會(huì)輸出訪問(wèn)地址通常是http://localhost:3000。5.3 核心功能測(cè)試流式問(wèn)答打開瀏覽器訪問(wèn)http://localhost:3000。你應(yīng)該能看到一個(gè)簡(jiǎn)潔的聊天界面。測(cè)試步驟界面檢查確認(rèn)頁(yè)面正常加載包含一個(gè)輸入框和一個(gè)發(fā)送按鈕可能還有一個(gè)清空對(duì)話歷史的按鈕。發(fā)送第一條消息在輸入框中輸入一個(gè)問(wèn)題例如“請(qǐng)用 JavaScript 寫一個(gè)簡(jiǎn)單的 Hello World 函數(shù)?！庇^察流式響應(yīng)成功現(xiàn)象點(diǎn)擊發(fā)送后答案應(yīng)該不是一次性全部出現(xiàn)而是像打字機(jī)一樣一個(gè)字一個(gè)字或一個(gè)詞一個(gè)詞地實(shí)時(shí)顯示出來(lái)。頁(yè)面不會(huì)進(jìn)入完全的加載卡頓狀態(tài)。網(wǎng)絡(luò)觀察打開瀏覽器開發(fā)者工具F12切換到Network標(biāo)簽頁(yè)。找到對(duì)后端/api/chat或類似的請(qǐng)求查看其響應(yīng)類型。如果是流式響應(yīng)你會(huì)看到Type為eventsource(SSE) 或響應(yīng)內(nèi)容以數(shù)據(jù)塊chunks的形式逐步接收。多輪對(duì)話測(cè)試基于上一個(gè)回答繼續(xù)提問(wèn)例如“能把這個(gè)函數(shù)改寫成箭頭函數(shù)嗎”。檢查應(yīng)用是否能正確地將上下文對(duì)話歷史發(fā)送給后端并基于歷史進(jìn)行連貫的回答。對(duì)話歷史持久化刷新瀏覽器頁(yè)面檢查之前的對(duì)話記錄是否還在。這取決于模板是否實(shí)現(xiàn)了本地存儲(chǔ)如localStorage或后端會(huì)話管理。功能驗(yàn)證清單[ ] 前端頁(yè)面正常渲染。[ ] 輸入問(wèn)題后能收到來(lái)自后端的響應(yīng)。[ ] 響應(yīng)內(nèi)容以流式逐字方式呈現(xiàn)。[ ] 可以進(jìn)行連續(xù)的多輪對(duì)話。[ ] 對(duì)話歷史在頁(yè)面刷新后得以保留如果模板支持。6. 關(guān)鍵技術(shù)點(diǎn)解析React 19 與流式處理這個(gè)模板的先進(jìn)性很大程度上體現(xiàn)在對(duì) React 19 新特性的運(yùn)用上。我們來(lái)拆解幾個(gè)關(guān)鍵點(diǎn)。6.1 使用useHook 處理異步流React 19 引入了實(shí)驗(yàn)性的useHook它可以讀取類似 Promise 或 Context 的資源。在處理流式響應(yīng)時(shí)它可以與Suspense結(jié)合更優(yōu)雅地處理異步數(shù)據(jù)渲染。前端處理流式數(shù)據(jù)的簡(jiǎn)化邏輯概念示例// 這是一個(gè)概念性代碼展示如何用 fetch 和 React 19 特性處理 SSE import { useState, use } from react; function ChatComponent() { const [messages, setMessages] useState([]); const [input, setInput] useState(); async function handleSend() { const userMessage { role: user, content: input }; setMessages(prev [...prev, userMessage]); // 向后端發(fā)送請(qǐng)求并接收 SSE 流 const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: [...messages, userMessage] }) }); const reader response.body.getReader(); const decoder new TextDecoder(); let assistantMessageContent ; // 創(chuàng)建并添加一個(gè)初始的“助手”消息占位符 setMessages(prev [...prev, { role: assistant, content: }]); while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value); // 假設(shè)后端以 data: {chunk}\n\n 格式發(fā)送 SSE const lines chunk.split(\n); for (const line of lines) { if (line.startsWith(data: )) { const data line.replace(data: , ); try { const parsed JSON.parse(data); assistantMessageContent parsed.content || parsed.delta || ; // 關(guān)鍵更新最后一條消息助手消息的內(nèi)容 setMessages(prev { const newMessages [...prev]; newMessages[newMessages.length - 1] { role: assistant, content: assistantMessageContent }; return newMessages; }); } catch (e) { // 處理非 JSON 數(shù)據(jù)或心跳包 } } } } } return ( div {/* 消息列表渲染 */} {messages.map((msg, idx) ( div key{idx}{msg.content}/div ))} input value{input} onChange{(e) setInput(e.target.value)} / button onClick{handleSend}發(fā)送/button /div ); }6.2 使用useOptimistic實(shí)現(xiàn)樂(lè)觀更新useOptimistic是 React 19 另一個(gè)重磅特性它允許你在異步操作完成前立即更新 UI 以提供更快的反饋。在這個(gè)聊天模板中它可以用于即時(shí)顯示用戶消息用戶點(diǎn)擊發(fā)送后無(wú)需等待服務(wù)器確認(rèn)消息立即出現(xiàn)在對(duì)話列表中。顯示“正在輸入”狀態(tài)在流式響應(yīng)開始到達(dá)前可以顯示一個(gè)加載指示器或占位符。import { useOptimistic } from react; function ChatContainer() { const [messages, setMessages] useState([]); const [optimisticMessages, addOptimisticMessage] useOptimistic( messages, (state, newMessage) [ ...state, { ...newMessage, sending: true } // 為樂(lè)觀更新的消息添加臨時(shí)狀態(tài) ] ); async function handleSend(newUserMessage) { // 1. 樂(lè)觀更新立即將用戶消息添加到列表可能帶一個(gè)“發(fā)送中”標(biāo)志 addOptimisticMessage(newUserMessage); // 2. 執(zhí)行實(shí)際的網(wǎng)絡(luò)請(qǐng)求 const response await sendToServer(newUserMessage); // 3. 請(qǐng)求完成后用真實(shí)響應(yīng)替換樂(lè)觀更新 setMessages(prev [...prev.filter(m m.id ! newUserMessage.id), response]); } // 渲染時(shí)使用 optimisticMessages return optimisticMessages.map(msg ( div key{msg.id} className{msg.sending ? opacity-50 : } {msg.content} /div )); }6.3 后端流式轉(zhuǎn)發(fā)實(shí)現(xiàn)后端的作用是作為代理接收前端的請(qǐng)求調(diào)用 DeepSeek 的流式 API并將數(shù)據(jù)流原樣轉(zhuǎn)發(fā)給前端。Node.js (Express) 后端簡(jiǎn)化示例// server/index.js import express from express; import cors from cors; import fetch from node-fetch; // 或使用內(nèi)置的 fetch (Node 18) const app express(); app.use(cors()); app.use(express.json()); app.post(/api/chat, async (req, res) { const { messages } req.body; const apiKey process.env.DEEPSEEK_API_KEY; // 設(shè)置 SSE 相關(guān)的響應(yīng)頭 res.setHeader(Content-Type, text/event-stream); res.setHeader(Cache-Control, no-cache); res.setHeader(Connection, keep-alive); res.flushHeaders(); // 立即發(fā)送頭部建立連接 try { const deepseekResponse await fetch(https://api.deepseek.com/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey} }, body: JSON.stringify({ model: deepseek-chat, // 或 deepseek-coder根據(jù)需求 messages: messages, stream: true // 關(guān)鍵開啟流式輸出 }) }); // 將 DeepSeek API 的流式響應(yīng)直接 pipe 到前端響應(yīng) deepseekResponse.body.on(data, (chunk) { // 這里可以添加一些數(shù)據(jù)格式轉(zhuǎn)換或過(guò)濾邏輯 res.write(data: ${chunk.toString()}\n\n); }); deepseekResponse.body.on(end, () { res.write(data: [DONE]\n\n); res.end(); }); deepseekResponse.body.on(error, (err) { console.error(Stream error:, err); res.write(data: ${JSON.stringify({ error: Stream interrupted })}\n\n); res.end(); }); } catch (error) { console.error(Request to DeepSeek failed:, error); res.write(data: ${JSON.stringify({ error: Failed to connect to AI service })}\n\n); res.end(); } }); const PORT process.env.PORT || 3001; app.listen(PORT, () console.log(Server running on port ${PORT}));7. 自定義配置與擴(kuò)展開發(fā)模板提供了基礎(chǔ)功能你可以根據(jù)需求進(jìn)行深度定制。7.1 修改模型參數(shù)在后端調(diào)用 DeepSeek API 時(shí)你可以修改請(qǐng)求體中的參數(shù)以調(diào)整模型行為model: 切換為deepseek-coder以獲得更強(qiáng)的代碼能力。temperature: 控制輸出的隨機(jī)性0-2之間。max_tokens: 限制單次回復(fù)的最大長(zhǎng)度。top_p: 核采樣參數(shù)。7.2 調(diào)整前端 UI 與主題前端使用 Tailwind CSS修改樣式非常方便。主題顏色在tailwind.config.js中擴(kuò)展主題色或在組件中直接修改類名。布局調(diào)整修改App.jsx或主要的布局組件。添加功能組件例如添加一個(gè)側(cè)邊欄來(lái)管理對(duì)話會(huì)話添加 Markdown 渲染器來(lái)美化代碼塊推薦使用react-markdown和prism.js。7.3 集成其他 AI 服務(wù)或功能多模型支持在后端創(chuàng)建路由支持切換 OpenAI、Claude 或本地部署的 Ollama 模型。文件上傳與處理增加文件上傳接口結(jié)合 DeepSeek 的視覺或文件處理能力如果支持實(shí)現(xiàn)文檔問(wèn)答。對(duì)話持久化連接數(shù)據(jù)庫(kù)如 SQLite、PostgreSQL將對(duì)話歷史與用戶關(guān)聯(lián)存儲(chǔ)。8. 部署上線完成本地開發(fā)和測(cè)試后你可以將應(yīng)用部署到云平臺(tái)。1. 構(gòu)建前端生產(chǎn)版本cd client npm run build這會(huì)在client/dist或client/build目錄下生成靜態(tài)文件。2. 部署后端你需要一個(gè)能運(yùn)行 Node.js 的服務(wù)器環(huán)境。常見的選項(xiàng)有Railway / Render對(duì)全棧應(yīng)用友好能自動(dòng)識(shí)別并構(gòu)建 Node.js 項(xiàng)目環(huán)境變量配置簡(jiǎn)單。Vercel更適合前端但可以通過(guò) Serverless Functions 部署后端 API。你需要將前后端分開部署或配置重寫規(guī)則。自有服務(wù)器使用 PM2 或 Docker 來(lái)管理 Node.js 進(jìn)程。3. 配置生產(chǎn)環(huán)境變量在部署平臺(tái)的后臺(tái)設(shè)置DEEPSEEK_API_KEY、PORT、CLIENT_URL生產(chǎn)環(huán)境的前端地址等環(huán)境變量。4. 一鍵部署如果模板支持許多模板在根目錄提供了Dockerfile和docker-compose.yml你可以通過(guò) Docker 進(jìn)行容器化部署這是最一致和可移植的方式。9. 常見問(wèn)題與排查方法問(wèn)題現(xiàn)象可能原因排查方式解決方案前端啟動(dòng)失敗Node.js 版本過(guò)低依賴安裝不完整或沖突。1. 檢查node -v。2. 刪除node_modules和package-lock.json重新npm install。3. 查看終端報(bào)錯(cuò)信息。升級(jí) Node.js 至 LTS 版本使用npm ci命令安裝或嘗試使用pnpm。后端啟動(dòng)失敗端口被占用.env文件未配置或配置錯(cuò)誤。1. 檢查PORT是否被其他程序占用 (lsof -i:3001)。2. 確認(rèn).env文件在server目錄下且DEEPSEEK_API_KEY正確。更換PORT確保.env文件存在且格式正確重啟終端。前端訪問(wèn)后端 API 跨域錯(cuò)誤后端 CORS 配置不正確前端請(qǐng)求地址錯(cuò)誤。1. 瀏覽器控制臺(tái)查看 CORS 錯(cuò)誤詳情。2. 檢查后端CLIENT_URL環(huán)境變量是否匹配前端實(shí)際地址。在后端正確配置cors中間件允許前端的源。發(fā)送消息后無(wú)響應(yīng)DeepSeek API Key 無(wú)效或過(guò)期網(wǎng)絡(luò)問(wèn)題導(dǎo)致無(wú)法訪問(wèn) API。1. 在后端終端查看日志是否有 API 調(diào)用錯(cuò)誤。2. 使用curl或 Postman 直接測(cè)試后端/api/chat接口。驗(yàn)證 API Key 的有效性檢查網(wǎng)絡(luò)連接查看 DeepSeek 服務(wù)狀態(tài)。流式響應(yīng)不“流”后端未正確設(shè)置stream: true前端未正確解析 SSE 數(shù)據(jù)流。1. 檢查后端調(diào)用 DeepSeek API 的請(qǐng)求體。2. 瀏覽器 Network 面板查看響應(yīng)是否為eventsource并持續(xù)接收數(shù)據(jù)塊。確保后端 API 調(diào)用參數(shù)stream: true檢查前端 EventSource 或 Fetch API 的流式處理邏輯。頁(yè)面刷新后歷史記錄丟失模板僅使用 React 狀態(tài)管理未做持久化。檢查代碼中是否使用了localStorage或連接了數(shù)據(jù)庫(kù)。自行實(shí)現(xiàn)在useEffect中將消息列表存入localStorage并在初始化時(shí)讀取。10. 最佳實(shí)踐與使用建議密鑰管理永遠(yuǎn)不要將 API Key 硬編碼在代碼中或提交到公開倉(cāng)庫(kù)。始終使用環(huán)境變量并在生產(chǎn)環(huán)境使用平臺(tái)提供的密鑰管理服務(wù)。錯(cuò)誤處理與用戶反饋在前端和后端都實(shí)現(xiàn)完善的錯(cuò)誤處理網(wǎng)絡(luò)錯(cuò)誤、API 限額、模型錯(cuò)誤等并給用戶友好的提示。流式響應(yīng)超時(shí)為 SSE 連接設(shè)置合理的心跳和超時(shí)機(jī)制防止長(zhǎng)時(shí)間空閑連接占用資源。輸入驗(yàn)證與清理后端應(yīng)對(duì)接收到的用戶輸入進(jìn)行基本的驗(yàn)證和清理防止注入攻擊。速率限制如果你的應(yīng)用會(huì)公開使用務(wù)必在后端實(shí)現(xiàn)速率限制防止 API Key 被濫用導(dǎo)致超額費(fèi)用。性能監(jiān)控關(guān)注前端組件渲染性能React DevTools以及后端 API 的響應(yīng)時(shí)間。對(duì)于復(fù)雜的對(duì)話歷史考慮分頁(yè)或虛擬列表。漸進(jìn)增強(qiáng)如果用戶瀏覽器不支持流式傳輸應(yīng)有降級(jí)方案例如回退到普通的非流式請(qǐng)求。這個(gè) DeepSeek-V4 React 19 的流式問(wèn)答模板為你提供了一個(gè)絕佳的現(xiàn)代全棧 AI 應(yīng)用開發(fā)起點(diǎn)。它的價(jià)值不僅在于能立即運(yùn)行一個(gè)可用的 AI 對(duì)話應(yīng)用更在于其清晰地展示了如何將前沿的 AI 能力與最新的前端框架特性相結(jié)合。通過(guò)拆解和改造這個(gè)項(xiàng)目你可以深入理解從用戶輸入到流式渲染的完整數(shù)據(jù)鏈路掌握構(gòu)建交互式 AI 應(yīng)用的核心技能。建議從成功運(yùn)行基礎(chǔ)功能開始然后逐步嘗試修改 UI、集成新模型或添加文件處理等高級(jí)功能將其打造成完全符合你自己需求的作品。 基于React 19與DeepSeek-V4構(gòu)建流式AI問(wèn)答應(yīng)用實(shí)戰(zhàn)指南
這次我們來(lái)看一個(gè)結(jié)合了前沿大模型與最新前端框架的實(shí)戰(zhàn)項(xiàng)目使用 DeepSeek-V4 和 React 19 搭建一個(gè) Web 版 AI 流式問(wèn)答模板。這個(gè)項(xiàng)目的核心價(jià)值在于它提供了一個(gè)開箱即用的、現(xiàn)代化的全棧解決方案讓你能快速搭建一個(gè)具備實(shí)時(shí)流式響應(yīng)能力的 AI 對(duì)話應(yīng)用無(wú)論是用于產(chǎn)品原型驗(yàn)證、內(nèi)部工具開發(fā)還是學(xué)習(xí)全棧 AI 應(yīng)用開發(fā)都非常實(shí)用。DeepSeek-V4 作為性能強(qiáng)勁的大語(yǔ)言模型提供了強(qiáng)大的對(duì)話與推理能力而 React 19 帶來(lái)了諸如 Actions、useOptimistic、use 等新特性特別適合處理異步數(shù)據(jù)流和提升用戶體驗(yàn)。這個(gè)模板將兩者結(jié)合重點(diǎn)解決了 AI 應(yīng)用開發(fā)中常見的幾個(gè)痛點(diǎn)如何優(yōu)雅地處理流式響應(yīng)、如何管理對(duì)話狀態(tài)、如何構(gòu)建一個(gè)響應(yīng)式且美觀的前端界面以及如何搭建一個(gè)穩(wěn)定可靠的后端服務(wù)。本文將帶你從零開始理解這個(gè)模板的核心架構(gòu)完成本地環(huán)境的搭建與配置并一步步測(cè)試其核心的流式問(wèn)答功能。我們重點(diǎn)關(guān)注項(xiàng)目的啟動(dòng)方式、前后端如何協(xié)作、流式數(shù)據(jù)如何被前端接收并渲染以及如何根據(jù)自己的需求進(jìn)行定制化開發(fā)。如果你正在尋找一個(gè)能快速上手的 AI Web 應(yīng)用開發(fā)起點(diǎn)這個(gè)項(xiàng)目值得你深入嘗試。1. 核心能力速覽能力項(xiàng)說(shuō)明技術(shù)棧前端React 19 TypeScript Tailwind CSS后端Node.js (Express/Fastify 等依模板而定)核心功能集成 DeepSeek-V4 API實(shí)現(xiàn)完整的、帶流式響應(yīng)的 AI 對(duì)話界面流式響應(yīng)支持 Server-Sent Events (SSE) 或 WebSocket實(shí)現(xiàn)打字機(jī)效果的實(shí)時(shí)答案輸出對(duì)話管理支持多輪對(duì)話、對(duì)話歷史持久化通常前端狀態(tài)管理 后端可選存儲(chǔ)部署方式支持本地開發(fā)、Docker 容器化部署可輕松部署到 Vercel、Railway 等云平臺(tái)配置門檻需要準(zhǔn)備 DeepSeek API Key并正確配置后端環(huán)境變量適合場(chǎng)景AI 工具原型開發(fā)、學(xué)習(xí)全棧開發(fā)、企業(yè)內(nèi)部問(wèn)答助手、個(gè)人知識(shí)庫(kù)前端2. 適用場(chǎng)景與使用邊界這個(gè)模板非常適合以下幾類開發(fā)者或場(chǎng)景全棧學(xué)習(xí)者想通過(guò)一個(gè)完整的項(xiàng)目學(xué)習(xí)如何將 React 最新特性與 AI 能力結(jié)合。快速原型驗(yàn)證產(chǎn)品經(jīng)理或創(chuàng)業(yè)者需要快速搭建一個(gè) AI 功能演示界面驗(yàn)證想法。內(nèi)部工具開發(fā)團(tuán)隊(duì)需要構(gòu)建一個(gè)內(nèi)部使用的智能問(wèn)答或文檔分析工具。前端開發(fā)者深化希望深入理解如何處理復(fù)雜的異步數(shù)據(jù)流SSE和優(yōu)化用戶體驗(yàn)。使用邊界與注意事項(xiàng)API 依賴與成本核心 AI 能力依賴于 DeepSeek-V4 的官方 API。你需要自行申請(qǐng) API Key并了解其計(jì)費(fèi)策略。模板本身不包含任何免費(fèi)的模型部署。網(wǎng)絡(luò)要求后端服務(wù)需要能夠穩(wěn)定訪問(wèn) DeepSeek 的 API 服務(wù)器。在國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境下可能需要配置相應(yīng)的網(wǎng)絡(luò)設(shè)置以確保連通性。數(shù)據(jù)安全與隱私所有通過(guò)此應(yīng)用發(fā)送給 DeepSeek API 的對(duì)話內(nèi)容都將遵循 DeepSeek 官方的數(shù)據(jù)使用政策。如果處理敏感信息務(wù)必仔細(xì)閱讀相關(guān)條款。非生產(chǎn)級(jí)作為一個(gè)模板或起點(diǎn)它可能缺乏生產(chǎn)環(huán)境所需的高級(jí)功能如完整的用戶認(rèn)證、速率限制、監(jiān)控告警、負(fù)載均衡等你需要根據(jù)業(yè)務(wù)需求進(jìn)行補(bǔ)充開發(fā)。3. 環(huán)境準(zhǔn)備與前置條件在開始之前請(qǐng)確保你的開發(fā)環(huán)境滿足以下要求操作系統(tǒng)Windows 10/11, macOS, 或 Linux 發(fā)行版如 Ubuntu 20.04。Node.js版本 18.x 或更高版本推薦 LTS 版本。這是運(yùn)行 React 和 Node.js 后端的基礎(chǔ)。包管理器npm 或 yarn 或 pnpm。模板通常會(huì)指定推薦使用的包管理器。代碼編輯器Visual Studio Code推薦或其它現(xiàn)代 IDE。DeepSeek API Key訪問(wèn) DeepSeek 官方平臺(tái)注冊(cè)賬號(hào)并創(chuàng)建一個(gè) API Key。這是項(xiàng)目運(yùn)行的關(guān)鍵。網(wǎng)絡(luò)環(huán)境確保你的開發(fā)機(jī)器可以訪問(wèn)外網(wǎng)以便調(diào)用 DeepSeek API 和安裝 npm 包。4. 項(xiàng)目結(jié)構(gòu)與初始化典型的項(xiàng)目結(jié)構(gòu)會(huì)分為前端client和后端server兩個(gè)部分也可能是一個(gè) Monorepo 結(jié)構(gòu)。我們假設(shè)一個(gè)常見的分離式結(jié)構(gòu)進(jìn)行說(shuō)明。1. 獲取項(xiàng)目模板通常這類模板會(huì)托管在 GitHub 上。你需要克隆或下載項(xiàng)目代碼。# 示例克隆一個(gè)假設(shè)的模板倉(cāng)庫(kù) git clone 模板倉(cāng)庫(kù)的git地址 cd deepseek-react-template2. 安裝后端依賴進(jìn)入后端目錄安裝所需的 Node.js 包。cd server npm install # 或 yarn install 或 pnpm install3. 安裝前端依賴進(jìn)入前端目錄同樣安裝依賴。cd ../client npm install # 或 yarn install 或 pnpm install4. 環(huán)境變量配置這是最關(guān)鍵的一步。后端需要配置 DeepSeek API Key 等信息。在server目錄下找到或創(chuàng)建.env文件。將你的 DeepSeek API Key 填入。# server/.env 文件示例 DEEPSEEK_API_KEYyour_deepseek_api_key_here PORT3001 # 后端服務(wù)端口 CLIENT_URLhttp://localhost:3000 # 前端開發(fā)服務(wù)器地址用于配置CORS重要?jiǎng)?wù)必確保.env文件被添加到.gitignore中避免將密鑰提交到版本控制系統(tǒng)。5. 啟動(dòng)服務(wù)與功能驗(yàn)證接下來(lái)我們將分別啟動(dòng)后端和前端服務(wù)并進(jìn)行核心的流式問(wèn)答測(cè)試。5.1 啟動(dòng)后端服務(wù)在后端目錄 (server) 下運(yùn)行啟動(dòng)命令。具體命令需參考模板的package.json中的scripts。cd server npm run dev # 或 npm start 或 node app.js如果啟動(dòng)成功終端會(huì)顯示類似以下信息Server is running on http://localhost:3001 Connected to DeepSeek API.此時(shí)后端 API 服務(wù)已經(jīng)在http://localhost:3001上運(yùn)行。它通常會(huì)提供一個(gè)用于對(duì)話的端點(diǎn)例如POST /api/chat。5.2 啟動(dòng)前端開發(fā)服務(wù)器在前端目錄 (client) 下啟動(dòng) React 開發(fā)服務(wù)器。cd client npm run dev啟動(dòng)成功后控制臺(tái)會(huì)輸出訪問(wèn)地址通常是http://localhost:3000。5.3 核心功能測(cè)試流式問(wèn)答打開瀏覽器訪問(wèn)http://localhost:3000。你應(yīng)該能看到一個(gè)簡(jiǎn)潔的聊天界面。測(cè)試步驟界面檢查確認(rèn)頁(yè)面正常加載包含一個(gè)輸入框和一個(gè)發(fā)送按鈕可能還有一個(gè)清空對(duì)話歷史的按鈕。發(fā)送第一條消息在輸入框中輸入一個(gè)問(wèn)題例如“請(qǐng)用 JavaScript 寫一個(gè)簡(jiǎn)單的 Hello World 函數(shù)?！庇^察流式響應(yīng)成功現(xiàn)象點(diǎn)擊發(fā)送后答案應(yīng)該不是一次性全部出現(xiàn)而是像打字機(jī)一樣一個(gè)字一個(gè)字或一個(gè)詞一個(gè)詞地實(shí)時(shí)顯示出來(lái)。頁(yè)面不會(huì)進(jìn)入完全的加載卡頓狀態(tài)。網(wǎng)絡(luò)觀察打開瀏覽器開發(fā)者工具F12切換到Network標(biāo)簽頁(yè)。找到對(duì)后端/api/chat或類似的請(qǐng)求查看其響應(yīng)類型。如果是流式響應(yīng)你會(huì)看到Type為eventsource(SSE) 或響應(yīng)內(nèi)容以數(shù)據(jù)塊chunks的形式逐步接收。多輪對(duì)話測(cè)試基于上一個(gè)回答繼續(xù)提問(wèn)例如“能把這個(gè)函數(shù)改寫成箭頭函數(shù)嗎”。檢查應(yīng)用是否能正確地將上下文對(duì)話歷史發(fā)送給后端并基于歷史進(jìn)行連貫的回答。對(duì)話歷史持久化刷新瀏覽器頁(yè)面檢查之前的對(duì)話記錄是否還在。這取決于模板是否實(shí)現(xiàn)了本地存儲(chǔ)如localStorage或后端會(huì)話管理。功能驗(yàn)證清單[ ] 前端頁(yè)面正常渲染。[ ] 輸入問(wèn)題后能收到來(lái)自后端的響應(yīng)。[ ] 響應(yīng)內(nèi)容以流式逐字方式呈現(xiàn)。[ ] 可以進(jìn)行連續(xù)的多輪對(duì)話。[ ] 對(duì)話歷史在頁(yè)面刷新后得以保留如果模板支持。6. 關(guān)鍵技術(shù)點(diǎn)解析React 19 與流式處理這個(gè)模板的先進(jìn)性很大程度上體現(xiàn)在對(duì) React 19 新特性的運(yùn)用上。我們來(lái)拆解幾個(gè)關(guān)鍵點(diǎn)。6.1 使用useHook 處理異步流React 19 引入了實(shí)驗(yàn)性的useHook它可以讀取類似 Promise 或 Context 的資源。在處理流式響應(yīng)時(shí)它可以與Suspense結(jié)合更優(yōu)雅地處理異步數(shù)據(jù)渲染。前端處理流式數(shù)據(jù)的簡(jiǎn)化邏輯概念示例// 這是一個(gè)概念性代碼展示如何用 fetch 和 React 19 特性處理 SSE import { useState, use } from react; function ChatComponent() { const [messages, setMessages] useState([]); const [input, setInput] useState(); async function handleSend() { const userMessage { role: user, content: input }; setMessages(prev [...prev, userMessage]); // 向后端發(fā)送請(qǐng)求并接收 SSE 流 const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: [...messages, userMessage] }) }); const reader response.body.getReader(); const decoder new TextDecoder(); let assistantMessageContent ; // 創(chuàng)建并添加一個(gè)初始的“助手”消息占位符 setMessages(prev [...prev, { role: assistant, content: }]); while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value); // 假設(shè)后端以 data: {chunk}\n\n 格式發(fā)送 SSE const lines chunk.split(\n); for (const line of lines) { if (line.startsWith(data: )) { const data line.replace(data: , ); try { const parsed JSON.parse(data); assistantMessageContent parsed.content || parsed.delta || ; // 關(guān)鍵更新最后一條消息助手消息的內(nèi)容 setMessages(prev { const newMessages [...prev]; newMessages[newMessages.length - 1] { role: assistant, content: assistantMessageContent }; return newMessages; }); } catch (e) { // 處理非 JSON 數(shù)據(jù)或心跳包 } } } } } return ( div {/* 消息列表渲染 */} {messages.map((msg, idx) ( div key{idx}{msg.content}/div ))} input value{input} onChange{(e) setInput(e.target.value)} / button onClick{handleSend}發(fā)送/button /div ); }6.2 使用useOptimistic實(shí)現(xiàn)樂(lè)觀更新useOptimistic是 React 19 另一個(gè)重磅特性它允許你在異步操作完成前立即更新 UI 以提供更快的反饋。在這個(gè)聊天模板中它可以用于即時(shí)顯示用戶消息用戶點(diǎn)擊發(fā)送后無(wú)需等待服務(wù)器確認(rèn)消息立即出現(xiàn)在對(duì)話列表中。顯示“正在輸入”狀態(tài)在流式響應(yīng)開始到達(dá)前可以顯示一個(gè)加載指示器或占位符。import { useOptimistic } from react; function ChatContainer() { const [messages, setMessages] useState([]); const [optimisticMessages, addOptimisticMessage] useOptimistic( messages, (state, newMessage) [ ...state, { ...newMessage, sending: true } // 為樂(lè)觀更新的消息添加臨時(shí)狀態(tài) ] ); async function handleSend(newUserMessage) { // 1. 樂(lè)觀更新立即將用戶消息添加到列表可能帶一個(gè)“發(fā)送中”標(biāo)志 addOptimisticMessage(newUserMessage); // 2. 執(zhí)行實(shí)際的網(wǎng)絡(luò)請(qǐng)求 const response await sendToServer(newUserMessage); // 3. 請(qǐng)求完成后用真實(shí)響應(yīng)替換樂(lè)觀更新 setMessages(prev [...prev.filter(m m.id ! newUserMessage.id), response]); } // 渲染時(shí)使用 optimisticMessages return optimisticMessages.map(msg ( div key{msg.id} className{msg.sending ? opacity-50 : } {msg.content} /div )); }6.3 后端流式轉(zhuǎn)發(fā)實(shí)現(xiàn)后端的作用是作為代理接收前端的請(qǐng)求調(diào)用 DeepSeek 的流式 API并將數(shù)據(jù)流原樣轉(zhuǎn)發(fā)給前端。Node.js (Express) 后端簡(jiǎn)化示例// server/index.js import express from express; import cors from cors; import fetch from node-fetch; // 或使用內(nèi)置的 fetch (Node 18) const app express(); app.use(cors()); app.use(express.json()); app.post(/api/chat, async (req, res) { const { messages } req.body; const apiKey process.env.DEEPSEEK_API_KEY; // 設(shè)置 SSE 相關(guān)的響應(yīng)頭 res.setHeader(Content-Type, text/event-stream); res.setHeader(Cache-Control, no-cache); res.setHeader(Connection, keep-alive); res.flushHeaders(); // 立即發(fā)送頭部建立連接 try { const deepseekResponse await fetch(https://api.deepseek.com/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey} }, body: JSON.stringify({ model: deepseek-chat, // 或 deepseek-coder根據(jù)需求 messages: messages, stream: true // 關(guān)鍵開啟流式輸出 }) }); // 將 DeepSeek API 的流式響應(yīng)直接 pipe 到前端響應(yīng) deepseekResponse.body.on(data, (chunk) { // 這里可以添加一些數(shù)據(jù)格式轉(zhuǎn)換或過(guò)濾邏輯 res.write(data: ${chunk.toString()}\n\n); }); deepseekResponse.body.on(end, () { res.write(data: [DONE]\n\n); res.end(); }); deepseekResponse.body.on(error, (err) { console.error(Stream error:, err); res.write(data: ${JSON.stringify({ error: Stream interrupted })}\n\n); res.end(); }); } catch (error) { console.error(Request to DeepSeek failed:, error); res.write(data: ${JSON.stringify({ error: Failed to connect to AI service })}\n\n); res.end(); } }); const PORT process.env.PORT || 3001; app.listen(PORT, () console.log(Server running on port ${PORT}));7. 自定義配置與擴(kuò)展開發(fā)模板提供了基礎(chǔ)功能你可以根據(jù)需求進(jìn)行深度定制。7.1 修改模型參數(shù)在后端調(diào)用 DeepSeek API 時(shí)你可以修改請(qǐng)求體中的參數(shù)以調(diào)整模型行為model: 切換為deepseek-coder以獲得更強(qiáng)的代碼能力。temperature: 控制輸出的隨機(jī)性0-2之間。max_tokens: 限制單次回復(fù)的最大長(zhǎng)度。top_p: 核采樣參數(shù)。7.2 調(diào)整前端 UI 與主題前端使用 Tailwind CSS修改樣式非常方便。主題顏色在tailwind.config.js中擴(kuò)展主題色或在組件中直接修改類名。布局調(diào)整修改App.jsx或主要的布局組件。添加功能組件例如添加一個(gè)側(cè)邊欄來(lái)管理對(duì)話會(huì)話添加 Markdown 渲染器來(lái)美化代碼塊推薦使用react-markdown和prism.js。7.3 集成其他 AI 服務(wù)或功能多模型支持在后端創(chuàng)建路由支持切換 OpenAI、Claude 或本地部署的 Ollama 模型。文件上傳與處理增加文件上傳接口結(jié)合 DeepSeek 的視覺或文件處理能力如果支持實(shí)現(xiàn)文檔問(wèn)答。對(duì)話持久化連接數(shù)據(jù)庫(kù)如 SQLite、PostgreSQL將對(duì)話歷史與用戶關(guān)聯(lián)存儲(chǔ)。8. 部署上線完成本地開發(fā)和測(cè)試后你可以將應(yīng)用部署到云平臺(tái)。1. 構(gòu)建前端生產(chǎn)版本cd client npm run build這會(huì)在client/dist或client/build目錄下生成靜態(tài)文件。2. 部署后端你需要一個(gè)能運(yùn)行 Node.js 的服務(wù)器環(huán)境。常見的選項(xiàng)有Railway / Render對(duì)全棧應(yīng)用友好能自動(dòng)識(shí)別并構(gòu)建 Node.js 項(xiàng)目環(huán)境變量配置簡(jiǎn)單。Vercel更適合前端但可以通過(guò) Serverless Functions 部署后端 API。你需要將前后端分開部署或配置重寫規(guī)則。自有服務(wù)器使用 PM2 或 Docker 來(lái)管理 Node.js 進(jìn)程。3. 配置生產(chǎn)環(huán)境變量在部署平臺(tái)的后臺(tái)設(shè)置DEEPSEEK_API_KEY、PORT、CLIENT_URL生產(chǎn)環(huán)境的前端地址等環(huán)境變量。4. 一鍵部署如果模板支持許多模板在根目錄提供了Dockerfile和docker-compose.yml你可以通過(guò) Docker 進(jìn)行容器化部署這是最一致和可移植的方式。9. 常見問(wèn)題與排查方法問(wèn)題現(xiàn)象可能原因排查方式解決方案前端啟動(dòng)失敗Node.js 版本過(guò)低依賴安裝不完整或沖突。1. 檢查node -v。2. 刪除node_modules和package-lock.json重新npm install。3. 查看終端報(bào)錯(cuò)信息。升級(jí) Node.js 至 LTS 版本使用npm ci命令安裝或嘗試使用pnpm。后端啟動(dòng)失敗端口被占用.env文件未配置或配置錯(cuò)誤。1. 檢查PORT是否被其他程序占用 (lsof -i:3001)。2. 確認(rèn).env文件在server目錄下且DEEPSEEK_API_KEY正確。更換PORT確保.env文件存在且格式正確重啟終端。前端訪問(wèn)后端 API 跨域錯(cuò)誤后端 CORS 配置不正確前端請(qǐng)求地址錯(cuò)誤。1. 瀏覽器控制臺(tái)查看 CORS 錯(cuò)誤詳情。2. 檢查后端CLIENT_URL環(huán)境變量是否匹配前端實(shí)際地址。在后端正確配置cors中間件允許前端的源。發(fā)送消息后無(wú)響應(yīng)DeepSeek API Key 無(wú)效或過(guò)期網(wǎng)絡(luò)問(wèn)題導(dǎo)致無(wú)法訪問(wèn) API。1. 在后端終端查看日志是否有 API 調(diào)用錯(cuò)誤。2. 使用curl或 Postman 直接測(cè)試后端/api/chat接口。驗(yàn)證 API Key 的有效性檢查網(wǎng)絡(luò)連接查看 DeepSeek 服務(wù)狀態(tài)。流式響應(yīng)不“流”后端未正確設(shè)置stream: true前端未正確解析 SSE 數(shù)據(jù)流。1. 檢查后端調(diào)用 DeepSeek API 的請(qǐng)求體。2. 瀏覽器 Network 面板查看響應(yīng)是否為eventsource并持續(xù)接收數(shù)據(jù)塊。確保后端 API 調(diào)用參數(shù)stream: true檢查前端 EventSource 或 Fetch API 的流式處理邏輯。頁(yè)面刷新后歷史記錄丟失模板僅使用 React 狀態(tài)管理未做持久化。檢查代碼中是否使用了localStorage或連接了數(shù)據(jù)庫(kù)。自行實(shí)現(xiàn)在useEffect中將消息列表存入localStorage并在初始化時(shí)讀取。10. 最佳實(shí)踐與使用建議密鑰管理永遠(yuǎn)不要將 API Key 硬編碼在代碼中或提交到公開倉(cāng)庫(kù)。始終使用環(huán)境變量并在生產(chǎn)環(huán)境使用平臺(tái)提供的密鑰管理服務(wù)。錯(cuò)誤處理與用戶反饋在前端和后端都實(shí)現(xiàn)完善的錯(cuò)誤處理網(wǎng)絡(luò)錯(cuò)誤、API 限額、模型錯(cuò)誤等并給用戶友好的提示。流式響應(yīng)超時(shí)為 SSE 連接設(shè)置合理的心跳和超時(shí)機(jī)制防止長(zhǎng)時(shí)間空閑連接占用資源。輸入驗(yàn)證與清理后端應(yīng)對(duì)接收到的用戶輸入進(jìn)行基本的驗(yàn)證和清理防止注入攻擊。速率限制如果你的應(yīng)用會(huì)公開使用務(wù)必在后端實(shí)現(xiàn)速率限制防止 API Key 被濫用導(dǎo)致超額費(fèi)用。性能監(jiān)控關(guān)注前端組件渲染性能React DevTools以及后端 API 的響應(yīng)時(shí)間。對(duì)于復(fù)雜的對(duì)話歷史考慮分頁(yè)或虛擬列表。漸進(jìn)增強(qiáng)如果用戶瀏覽器不支持流式傳輸應(yīng)有降級(jí)方案例如回退到普通的非流式請(qǐng)求。這個(gè) DeepSeek-V4 React 19 的流式問(wèn)答模板為你提供了一個(gè)絕佳的現(xiàn)代全棧 AI 應(yīng)用開發(fā)起點(diǎn)。它的價(jià)值不僅在于能立即運(yùn)行一個(gè)可用的 AI 對(duì)話應(yīng)用更在于其清晰地展示了如何將前沿的 AI 能力與最新的前端框架特性相結(jié)合。通過(guò)拆解和改造這個(gè)項(xiàng)目你可以深入理解從用戶輸入到流式渲染的完整數(shù)據(jù)鏈路掌握構(gòu)建交互式 AI 應(yīng)用的核心技能。建議從成功運(yùn)行基礎(chǔ)功能開始然后逐步嘗試修改 UI、集成新模型或添加文件處理等高級(jí)功能將其打造成完全符合你自己需求的作品。