使用JavaScript构建AgentCPM深度研报助手前端交互界面

使用JavaScript构建AgentCPM深度研报助手前端交互界面

1. 引言

如果你是一名前端开发者，接到一个任务：为团队内部的AI研报生成工具搭建一个用户界面。这个工具的核心是一个叫AgentCPM的模型，它能根据用户输入的关键词，自动生成结构化的深度分析报告。你的工作不是去研究模型本身，而是如何让用户能方便地使用它。

这听起来挺有意思，对吧？但具体怎么做呢？怎么让用户输入信息？怎么把请求发给后端的模型服务？生成报告通常需要一些时间，怎么让用户知道进度？报告生成了，一堆数据和图表，怎么在网页上漂亮地展示出来？

这篇文章就是来解决这些问题的。我会带你一步步，用JavaScript和现代前端开发的思路，构建一个与AgentCPM模型交互的Web界面。我们不会深究复杂的AI原理，而是聚焦在前端工程师最熟悉的领域：发送请求、处理响应、管理状态、渲染数据。你会发现，把AI能力集成到网页里，和你平时调用一个普通的API接口，在思路上有很多相通之处。

2. 项目概览与核心思路

在开始写代码之前，我们先理清这个“研报助手”前端需要做什么。它的核心功能链路其实很清晰：

1. 用户输入：提供一个表单，让用户填写他们想分析的主题、行业、时间范围等关键信息。
2. 发起请求：当用户点击“生成报告”按钮时，前端需要把这些信息整理好，通过网络请求发送给部署了AgentCPM模型的后端服务。
3. 状态反馈：模型生成报告需要时间，可能是几秒，也可能是几十秒。在这期间，前端不能干等着，得告诉用户“正在努力生成中...”，最好还能有个进度条或动画。
4. 展示结果：报告生成后，后端会返回一大段结构化的数据，包括文本分析、关键数据点和图表所需的原始数据。前端要负责把这些数据以清晰、易读的方式渲染出来，比如分章节显示文本，用图表可视化数据。

整个过程中，前端扮演的是“调度员”和“化妆师”的角色。“调度员”负责与后端服务通信，管理请求的生命周期；“化妆师”负责把后端返回的原始数据，打扮成用户喜欢看的漂亮界面。

我们将使用最基础的浏览器原生Fetch API来演示核心通信逻辑，这样无论你使用Vue、React还是其他任何框架，原理都是通用的。在关键部分，我也会提一下在主流框架（如React）中的典型实现方式，帮助你更好地迁移到自己的项目中。

3. 构建用户输入表单

一切从用户输入开始。一个好的表单，是获得高质量AI报告的第一步。我们需要设计一个既能收集必要信息，又对用户友好的界面。

3.1 表单设计与HTML结构

对于研报生成，我们至少需要知道用户想分析什么。一个简单的表单可能包含以下字段：

• 报告主题：一个文本输入框，让用户用一句话描述核心分析目标，例如“2024年新能源汽车电池技术发展趋势”。
• 关键维度：几个复选框或多选下拉框，让用户选择报告应侧重的方面，如“市场规模”、“竞争格局”、“技术路径”、“政策影响”等。
• 报告深度：一个单选按钮组或滑块，让用户选择“概览”、“标准分析”或“深度研究”，这可能会影响后端模型生成内容的详略程度。
• 字数范围：一个下拉选择框，提供例如“1000字左右”、“2000-3000字”、“3000字以上”等选项。

下面是一个基础的HTML结构示例：

<form id="report-form"> <div class="form-group"> <label for="reportTopic">报告主题 *</label> <input type="text" id="reportTopic" name="topic" placeholder="请输入您要分析的核心主题..." required> <p class="help-text">请用一句话清晰描述，例如：人工智能大模型在金融风控中的应用。</p> </div> <div class="form-group"> <label>关注维度（可多选）</label> <div class="checkbox-group"> <label><input type="checkbox" name="dimensions" value="market"> 市场规模与增长</label> <label><input type="checkbox" name="dimensions" value="competition"> 竞争格局分析</label> <label><input type="checkbox" name="dimensions" value="technology"> 核心技术路径</label> <label><input type="checkbox" name="dimensions" value="policy"> 政策与法规影响</label> <label><input type="checkbox" name="dimensions" value="risk"> 潜在风险与挑战</label> </div> </div> <div class="form-group"> <label for="reportDepth">分析深度</label> <select id="reportDepth" name="depth"> <option value="overview">概览速读</option> <option value="standard" selected>标准分析</option> <option value="deep">深度研究</option> </select> </div> <div class="form-group"> <label for="wordCount">预期字数</label> <select id="wordCount" name="length"> <option value="1000">约1000字</option> <option value="2000" selected>2000-3000字</option> <option value="3000">3000字以上</option> </select> </div> <button type="submit" id="generate-btn">开始生成深度研报</button> </form> <div id="status-message" class="hidden"></div>

3.2 使用JavaScript进行表单验证与数据组装

用户点击提交按钮后，我们不能直接把原始表单数据扔给后端。前端需要先做两件事：验证数据是否有效，然后把数据组装成后端API期望的格式。

// 获取表单元素 const reportForm = document.getElementById('report-form'); const statusMessage = document.getElementById('status-message'); reportForm.addEventListener('submit', async function(event) { // 阻止表单默认提交行为（页面跳转） event.preventDefault(); // 1. 收集表单数据 const formData = new FormData(reportForm); const topic = formData.get('topic').trim(); const selectedDimensions = formData.getAll('dimensions'); // 获取所有选中的复选框值 const depth = formData.get('depth'); const length = formData.get('length'); // 2. 前端验证 if (!topic) { showStatus('报告主题不能为空，请输入分析主题。', 'error'); return; } if (selectedDimensions.length === 0) { showStatus('请至少选择一个关注维度。', 'error'); return; } // 3. 组装请求数据 // 这里的数据结构需要和后端API文档约定一致 const requestPayload = { query: topic, focus_areas: selectedDimensions, // 例如 ['market', 'technology'] analysis_depth: depth, // 例如 'standard' report_length: length // 例如 '2000' // 还可以添加其他参数，如用户ID、请求时间戳等 }; // 4. 更新UI状态：禁用按钮，显示加载中 const submitButton = document.getElementById('generate-btn'); submitButton.disabled = true; submitButton.textContent = '报告生成中...'; showStatus('已提交请求，正在调用AgentCPM模型进行分析，请稍候...', 'info'); // 5. 调用函数，发送请求（下一步实现） try { const reportData = await generateReport(requestPayload); // 处理成功结果（后续实现） } catch (error) { // 处理错误（后续实现） } finally { // 无论成功失败，恢复按钮状态 submitButton.disabled = false; submitButton.textContent = '开始生成深度研报'; } }); // 一个简单的状态提示函数 function showStatus(message, type = 'info') { statusMessage.textContent = message; statusMessage.className = `status-${type}`; // 添加对应CSS类，如status-info, status-error statusMessage.classList.remove('hidden'); }

在React中的思路：你会使用受控组件（useState绑定表单值）来管理表单状态。验证可以使用类似formik的库或自定义useEffect钩子。提交逻辑放在一个事件处理函数中，通过fetch或axios发送数据，同时利用useState来管理按钮的disabled状态和加载提示。

4. 与AgentCPM后端服务通信

这是前端最核心的环节：如何与AI模型后端“对话”。我们将使用现代的Fetch API，它比古老的XMLHttpRequest更强大、更简洁。

4.1 使用Fetch API调用模型服务

假设你的后端同事已经将AgentCPM模型封装成了一个RESTful API，接口地址是https://your-api-server.com/api/generate-report，它接受一个POST请求，请求体是JSON格式，就像我们上一步组装的requestPayload。

async function generateReport(payload) { // 后端API端点 const apiUrl = 'https://your-api-server.com/api/generate-report'; // 设置请求头，告诉服务器我们发送的是JSON数据 const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json', // 如果API需要认证，可以在这里添加Token // 'Authorization': `Bearer ${yourAuthToken}` }, body: JSON.stringify(payload) // 将JavaScript对象转换为JSON字符串 }; try { showStatus('正在连接模型服务...', 'info'); const response = await fetch(apiUrl, requestOptions); // 检查HTTP响应状态码是否成功（200-299） if (!response.ok) { // 如果响应不成功，尝试从响应体中读取错误信息 const errorData = await response.json().catch(() => ({})); throw new Error(`请求失败 (${response.status}): ${errorData.message || response.statusText}`); } // 解析成功的响应为JSON const data = await response.json(); showStatus('报告生成成功！', 'success'); return data; // 返回报告数据，供后续展示使用 } catch (error) { // 处理网络错误、JSON解析错误或上面抛出的错误 console.error('生成报告时发生错误:', error); showStatus(`报告生成失败: ${error.message}`, 'error'); // 重新抛出错误，让调用方（表单提交函数）知道失败了 throw error; } }

4.2 处理长时任务与进度反馈

AI生成报告，特别是深度报告，可能不是瞬间完成的。后端处理可能需要十几秒甚至更长时间。我们的前端需要优雅地处理这种“长时任务”。

有两种常见的模式：

1. 同步等待（长轮询或超时设置）：就像上面的代码，fetch请求会一直等待直到后端返回最终结果。如果后端处理时间很长，这个HTTP连接就会保持很久，并且用户看不到中间进度。这不是最佳体验。
2. 异步任务（推荐）：后端接收到请求后，立即返回一个task_id或job_id，表示“任务已接收，正在处理”。前端随后可以用这个ID，定期（比如每秒）向另一个查询接口发起请求，询问“任务ID为XXX的报告生成好了吗？”，直到返回完成状态和最终结果。

第二种方式用户体验好得多，因为前端可以显示“任务已提交，正在分析中...”，并且可以实现进度百分比。

前端实现异步任务查询：

async function generateReportAsync(payload) { const submitUrl = 'https://your-api-server.com/api/submit-report-task'; const queryUrl = 'https://your-api-server.com/api/query-report-task/'; // 后面拼接taskId // 1. 提交任务 showStatus('提交分析任务中...', 'info'); const submitResponse = await fetch(submitUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!submitResponse.ok) throw new Error('任务提交失败'); const { task_id } = await submitResponse.json(); // 假设后端返回 { task_id: 'abc123' } showStatus(`任务已接收 (ID: ${task_id.slice(0,8)}...)，开始处理`, 'info'); // 2. 轮询查询任务状态 let attempts = 0; const maxAttempts = 60; // 最多轮询60次 const pollInterval = 2000; // 每2秒查询一次 return new Promise((resolve, reject) => { const poll = async () => { attempts++; try { const queryResponse = await fetch(`${queryUrl}${task_id}`); if (!queryResponse.ok) throw new Error('查询任务状态失败'); const result = await queryResponse.json(); // 假设后端返回 { status: 'processing'/'completed'/'failed', progress: 50, report: null } updateProgress(result.progress); // 更新进度条UI if (result.status === 'completed') { showStatus('报告生成完毕！', 'success'); resolve(result.report); // 返回最终报告数据 } else if (result.status === 'failed') { throw new Error(result.error || '报告生成任务失败'); } else if (attempts >= maxAttempts) { throw new Error('报告生成超时，请稍后重试或联系管理员。'); } else { // 仍在处理中，继续轮询 showStatus(`分析中... 进度 ${result.progress || '未知'}%`, 'info'); setTimeout(poll, pollInterval); } } catch (error) { reject(error); } }; poll(); // 开始第一次轮询 }); } // 更新进度条的简单函数 function updateProgress(percent) { const progressBar = document.getElementById('progress-bar'); if (progressBar && percent !== undefined) { progressBar.style.width = `${percent}%`; progressBar.textContent = `${percent}%`; } }

在React/Vue中，你会使用setInterval或更优雅的useInterval自定义钩子来实现轮询，并将进度状态绑定到组件的状态（useState或ref）上，驱动进度条组件更新。

5. 报告结果的可视化展示

后端成功返回报告数据后，真正的“化妆师”工作开始了。报告数据可能是这样的结构：

{ "report_id": "rep_123456", "title": "关于新能源汽车电池技术发展趋势的分析报告", "sections": [ { "section_title": "执行摘要", "content": "本报告认为，固态电池技术将在2025-2030年迎来产业化突破...", "keywords": ["固态电池", "能量密度", "成本"] }, { "section_title": "市场规模与预测", "content": "预计到2030年，全球动力电池市场规模将超过XX亿美元...", "metrics": [ {"name": "2023年市场规模", "value": "800", "unit": "亿美元"}, {"name": "2030年预测规模", "value": "2000", "unit": "亿美元", "growth": "150%"} ] } ], "key_findings": ["技术迭代加速", "成本下降曲线趋缓"], "charts_data": { "market_growth": { "type": "line", "labels": ["2020", "2021", "2022", "2023", "2024E"], "datasets": [{"label": "市场规模", "data": [300, 450, 600, 800, 1000]}] } } }

我们的前端需要将这些数据生动地呈现出来。

5.1 渲染结构化文本内容

我们可以遍历sections数组，为每个部分创建对应的HTML区块。

function renderReportSections(sectionsData) { const reportContainer = document.getElementById('report-output'); reportContainer.innerHTML = ''; // 清空之前的内容 sectionsData.forEach(section => { const sectionEl = document.createElement('section'); sectionEl.className = 'report-section'; const titleEl = document.createElement('h3'); titleEl.textContent = section.section_title; sectionEl.appendChild(titleEl); const contentEl = document.createElement('div'); contentEl.className = 'section-content'; // 简单处理，实际中可能需要处理换行、列表等富文本 contentEl.textContent = section.content; sectionEl.appendChild(contentEl); // 如果有关键指标，可以渲染一个小表格 if (section.metrics && section.metrics.length > 0) { const metricsHtml = ` <div class="metrics-table"> <table> <thead><tr><th>指标</th><th>数值</th><th>备注</th></tr></thead> <tbody> ${section.metrics.map(m => ` <tr> <td>${m.name}</td> <td><strong>${m.value} ${m.unit || ''}</strong></td> <td>${m.growth ? `增长: ${m.growth}` : ''}</td> </tr> `).join('')} </tbody> </table> </div> `; sectionEl.insertAdjacentHTML('beforeend', metricsHtml); } reportContainer.appendChild(sectionEl); }); }

5.2 集成图表库进行数据可视化

文本报告配上图表，说服力会大大增强。我们可以使用流行的开源图表库，如Chart.js或ECharts，来渲染charts_data中的数据。

以Chart.js为例，首先在HTML中引入库，并为每个图表准备一个<canvas>元素。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- ... --> <div id="charts-container"></div>

然后在拿到报告数据后，动态创建图表：

function renderCharts(chartsData) { const container = document.getElementById('charts-container'); container.innerHTML = ''; Object.entries(chartsData).forEach(([chartId, chartConfig]) => { const chartWrapper = document.createElement('div'); chartWrapper.className = 'chart-wrapper'; const canvas = document.createElement('canvas'); chartWrapper.appendChild(canvas); container.appendChild(chartWrapper); // 根据配置类型创建图表 const ctx = canvas.getContext('2d'); new Chart(ctx, { type: chartConfig.type, // 'line', 'bar', 'pie'等 data: { labels: chartConfig.labels, datasets: chartConfig.datasets }, options: { responsive: true, plugins: { title: { display: true, text: chartConfig.title || `图表: ${chartId}` } } } }); }); }

在React/Vue中的实践：你可能会使用对应的图表组件库，如react-chartjs-2或vue-chartjs。原理是一样的：将报告数据作为props或data传递给图表组件，由组件负责渲染。状态管理框架（如Redux, Pinia）可以帮助你在应用的不同部分共享这份报告数据。

6. 总结

走完这一趟，你会发现，为AI模型构建前端界面，核心逻辑和你之前开发的其他Web应用并没有本质区别。依然是收集用户输入、验证、发送请求、处理响应、更新UI这个经典循环。不同的地方在于，你需要更细致地考虑异步交互（比如轮询进度）和复杂数据的展示（比如动态图表）。

关键在于前后端要有清晰的数据契约（API文档）。前端要知道后端需要什么格式的参数，以及后端会返回什么结构的数据。只要这个约定好了，剩下的就是前端工程师施展拳脚的地方：用清晰的表单引导用户输入，用即时的反馈安抚等待的焦虑，最后用直观、美观的方式将AI的“智慧”呈现出来。

这个“研报助手”界面只是一个起点。在此基础上，你可以增加更多功能，比如报告历史列表、报告导出（PDF/Word）、生成结果分享，或者更复杂的交互式图表让用户自己筛选数据。希望这篇文章能给你一个扎实的起点，让你能更自信地将强大的AI能力，通过你熟悉的JavaScript和前端技术，带给最终用户。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。