Spring with AI (): 定制对话——Prompt模板引入

从 UI 工程师到 AI 应用架构者13 年前我的工作是让按钮在 IE6 上对齐13 年后我用 fetch-event-source 订阅大模型的“思维流”用 OCR 解锁图片中的文字——前端正在成为 AI 产品的第一道体验防线。最近我基于 Vue 3 Vite TypeScript Ant Design Vue 开发了一款企业级 AI 多语翻译平台。它支持文本/图片/文档多模态输入大模型动态切换通义千问、DeepSeek 等行业领域定制医疗、法律、金融SSE 流式输出使用 fetch-event-source今天我将逐行拆解核心代码带你复现这一高价值 AI 应用的前端架构。一、技术选型为什么是 fetch-event-source虽然浏览器原生支持 EventSource但在现代前端工程中我们更倾向使用 microsoft/fetch-event-source基于 fetch天然支持 AbortController可取消请求支持 自定义 headers用于鉴权更好的 TypeScript 类型支持与 Axios/Vite 生态无缝集成安装npm install microsoft/fetch-event-source二、OCR 图片识别前端只管“传”和“显”用户上传一张英文菜单截图系统自动提取文字并翻译。前端不碰 OCR 算法但要管理全流程状态。真实代码实现来自 文本_r9uv.txt1. 系统配置加载含文件大小限制// src/views/translation/index.vueconst loadSystemPublicConfig async () {try {const response await findSystemPublicConfig({ configKey: upload_file_max_limit_mb });const config response.data[0];systemConfig.value.uploadFileMaxLimit parseInt(config.value) || 10; // 默认10MB} catch (error) {ElMessage.error(加载系统配置失败);}};2. 文件选择与校验const handleFileSelect (event: Event) {const input event.target as HTMLInputElement;if (input.files input.files.length 0) {const file input.files[0];const maxSize systemConfig.value.uploadFileMaxLimit * 1024 * 1024;if (file.size maxSize) {message.error(文件不能超过 ${systemConfig.value.uploadFileMaxLimit} MB);return;}currentFile.value file;startParsing(file);}};3. 调用 OCR 接口Ant Design Vue 组件反馈const handleObtainFileContentText async () {if (!currentFile.value) return;const formData new FormData();formData.append(file, currentFile.value);try {const response await obtainFileContentText(formData);if (response.success) {sourceLanguageText.value response.data.contentText;currentUploadStatus.value success;} else {currentUploadStatus.value failed;message.error(response.message || 解析失败);}} catch (error) {currentUploadStatus.value failed;message.error(网络错误请重试);}};关键设计状态分为 idle | parsing | success | failed对应四个 UI 区块避免用户困惑。三、大模型动态集成让选择“无感而智能”AI 模型不是越多越好而是要默认最优 动态适配。真实代码实现1. 加载模型与语种字典// 加载大模型列表const loadLargeModelDictionary async () {const response await findLargeModelDictionary({ keyword: });largeModelList.value response.data;if (largeModelList.value.length 0) {const firstModel largeModelList.value[0];selectedModelId.value firstModel.id;await loadLargeModelLanguageSupport(firstModel.id); // 关键联动语种}};// 加载某模型支持的语种const loadLargeModelLanguageSupport async (modelId: string) {const response await findLargeModelLanguageSupport({ largeModelId: modelId });languageSupportList.value response.data;};2. 行业领域初始化const loadIndustrySectorDictionary async () {const response await findIndustrySectorDictionary({ keyword: });industrySectorList.value response.data;// 业务逻辑若默认为 general则跳过if (defaultIndustrySector.value general industrySectorList.value.length 1) {defaultIndustrySector.value industrySectorList.value[1].code;}};3. Ant Design Vue 下拉框绑定v-model:valueselectedModelIdstylewidth: 100%changehandleModelChangev-foritem in largeModelList:keyitem.id:valueitem.id{{ item.name }}四、SSE 流式翻译用 fetch-event-source 实现“打字机效果”这是体验升级的核心我们使用 microsoft/fetch-event-source 替代原生 EventSource。完整流式翻译实现结合你的项目结构import { fetchEventSource } from microsoft/fetch-event-source;// 存储控制器用于取消请求let abortController: AbortController | null null;const handleTranslate async () {if (isTranslating.value) return;// 重置结果translationResult.value ;isTranslating.value true;// 创建 AbortControllerabortController new AbortController();const params new URLSearchParams({largeModelId: selectedModelId.value,sourceLangCode: selectedSourceLangCode.value,targetLangCode: selectedTargetLangCode.value,industrySector: defaultIndustrySector.value,enableDeepThinking: String(enableDeepThinking.value),content: sourceLanguageText.value.trim(),});try {await fetchEventSource(/api/v1/large-model/translate/stream${params}, {method: GET,headers: {Authorization: Bearer ${getToken()}, // 从 Pinia 或 localStorage 获取},signal: abortAssistant.signal, // 支持取消onmessage(event) {if (event.data) {translationResult.value event.data;nextTick(() {scrollToBottom();});}},onclose() {isTranslating.value false;},onerror(err) {console.error(SSE Error:, err);message.error(翻译服务异常请稍后重试);isTranslating.value false;abortController.abort(); // 主动关闭},});} catch (error) {if (abortController.signal.aborted) {console.log(翻译已取消);} else {message.error(连接失败);}isTranslating.value false;}};// 取消翻译const cancelTranslation () {if (abortController) {abortController.abort();isTranslating.value false;message.info(翻译已取消);}};自动滚动到底部const scrollToBottom () {const container document.querySelector(.translation-result-content);if (container) {container.scrollTop container.scrollHeight;}};为什么不用 WebSocketSSE 是 单向流服务端 → 客户端完美匹配“AI 生成文本”场景fetch-event-source 提供 Promise 风格 API更符合现代前端习惯五、工程化亮点13年经验的沉淀1. 响应式布局PC/Mobile 适配const updateMainHeight () {const mainEl document.querySelector(.main) as HTMLElement;if (!mainEl) return;if (isMobile.value) {mainEl.style.minHeight 100vh;mainEl.style.height auto;} else {mainEl.style.height 100vh;mainEl.style.minHeight auto;}};2. 内存清理防止泄漏onUnmounted(() {if (abortController) {abortController.abort();}window.removeEventListener(resize, checkIsMobile);});3. 防重复提交 加载状态typeprimary:loadingisTranslatingclickhandleTranslate:disabled!sourceLanguageText.trim(){{ isTranslating 翻译中... : 开始翻译 }}结语前端的价值在“AI 与人之间”这个项目让我确信AI 时代前端工程师的不可替代性在于“体验设计”。我们用 fetch-event-source 把冰冷的 token 流变成温暖的“打字机”我们用 Ant Design Vue 让复杂配置变得简单我们用状态机管理 OCR 的每一步不让用户迷失。假梦倚员