开发者空间云开发环境 +Versatile Agent，轻松构建 AI 轻量级智能办公助手
作者：华为云开发者联盟
- 2025-09-16 中国香港
本文字数：19755 字
阅读完需：约 65 分钟
一、概述
1. 案例介绍
华为云开发者空间为开发者提供一个免费的云开发环境，开发者可以将计算密集型任务交给性能强大的云开发环境，同时可以在本地 Windows 或者 MacOS 设备上编写代码，在远程的鲲鹏云环境中运行和调试。
Versatile Agent平台(AI 原生应用引擎)提供了数据准备、模型选择/调优、知识工程、模型编排、应用部署、应用集成等能力，降低智能应用开发门槛、提升开发效率。
MaaS(即 ModelArts Studio 大模型即服务平台)是华为云面向 AI 开发者推出的一站式大模型开发平台，支持开发者一键体验大模型能力，快速构建大模型应用。MaaS 平台提供大模型训练、推理、部署、管理、监控等全生命周期管理能力，帮助开发者快速构建大模型应用，加速 AI 开发。
本案例基于华为开发者空间云开发环境+Versatile Agent，快速构建并集成一个轻量级智能办公助手 Agent 到模拟 OA 系统中。案例覆盖从模型服务开通、Agent 创建到本地连接云开发环境开发联调的完整流程，最终通过 Web 界面模拟办公系统，实现智能问答、流程指引等基础功能。适合中小型企业或开发者低成本验证 AI 办公场景。
2. 适用对象
企业
个人开发者
高校学生
3. 案例时间
本案例总时长预计 90 分钟。
4. 案例流程
说明：
用户进入华为开发者空间云开发环境；
通过 CLI 工具连接云开发环境；
领取配置 MaaS 模型服务并创建智能办公 Agent 应用；
编写 Web 端项目代码集成 Agent API；
使用本地浏览器测试并体验智能办公助手。
最新案例动态，请查阅 《华为开发者空间云开发环境+Versatile Agent，构建AI轻量级智能办公助手》。小伙伴快来领取华为开发者空间，进入云开发环境实操吧！
二、环境及资源准备
2.1 开发者空间配置
面向广大开发者群体，华为开发者空间提供一个随时访问的“开发平台”、丰富的“预配置工具集合”和灵活使用的“场景化资源池”，开发者开箱即用，快速体验华为根技术和资源。
开发者可以登录华为云账号后可以直接进入华为开发者空间开发平台界面，点击云开发环境即可进入云开发环境页面，点击 Versatile Agent 即可进入 Agent 开发界面。
云开发环境如下图所示：
Versatile Agent 如下图所示：
2.2 开通商用 DeepSeek-R1-64K 服务
华为云 MaaS 提供了商用按 token 计费模型和单模型 200 万免费 Tokens。点击领取DeepSeek-R1/V3-64K百万tokens代金券
使用浏览器访问ModelArts Studio首页，点击 ModelArts Studio 控制台跳转到登录界面，按照登录界面提示登录，即可进入 ModelArts Studio 控制台。
进入 ModelArts Studio 控制台首页，区域选择西南-贵阳一，在左侧菜单栏，选择在线推理 > 预置服务 > 商用服务，选择 DeepSeek-R1-64K 模型，点击开通服务。注意：开通服务后会根据消耗 tokens 收费，请注意账户扣费和余额！
开通 DeepSeek-R1-64K 服务后点击调用说明，获取对应的 API 地址、模型名称。
点击 API Key 管理->创建 API Key，自定义标签和描述，点击确定创建 API Key。（注意保存好 API Key）。
到这里华为云 MaaS 提供的免费 DeepSeek Tokens 就领取完成啦！记录对应的 API 地址、模型名称、API Key 留作下面步骤使用。
三、Versatile Agent 创建并发布办公助手
针对 Versatile Agent 应用开发，开发者空间集成了 AI 原生应用引擎，开发者通过添加模型服务和丰富的 MCP 可以便捷快速地构建 Agent 应用。
3.1 添加模型供应商
开发者点击开发平台->Versatile Agent->大模型->我创建的->新增模型供应商，输入模型供应商信息：
备注：
供应商图标：开发者自行上传（图片要求大小 100K 以内，格式为 jpg、png）
供应商名称：MaaS
供应商英文名称：MaaS
鉴权方式：Api-key（输入在步骤 2.1 中获取的 API Key）
添加后显示如下：
3.2 新增模型服务
点击箭头图标，再点击新增模型服务：
输入模型服务信息：
备注：
服务名称：DeepSeek-R1；
模型名称：DeepSeek-R1（输入在步骤 2.2 中获取的模型名称）；
模型类型：文本对话；
模型服务 API 地址：步骤 2.2 中获取的 API 地址；
是否支持工具调用：选择支持；
是否支持思维链：选择支持；
其它保持默认即可。
添加成功后点击发布模型：
发布成功后调测模型：
对话框中输入：请介绍自己
已成功添加模型！
3.3 创建并配置 Agent
点击 Agent->创建 Agent：
基础信息：
Agent名称：智能办公助手Agent描述：深度融合AI能力的智能办公助手，它真正理解你的需求，并自主执行复杂任务。
复制代码
模型选择：
点击高级配置，问答模型选择已添加的模型服务：DeepSeek-R1
点击思考模型，选择已添加的模型服务：DeepSeek-R1
角色设定：
角色定义:作为深度融合AI能力的智能办公助手，你的核心任务是理解和满足用户的办公需求，自主执行复杂任务，提升工作效率。你不仅要能够处理日常的办公事务，如日程管理、文档处理、会议安排等，还要能够通过深度学习用户的行为模式，提前预测并解决潜在问题，提供个性化的办公建议和解决方案。
工具能力:1. 需求理解与分析: 能够准确理解用户的自然语言指令，分析用户的办公需求，识别任务的优先级和复杂性。2. 任务自主执行: 能够自主执行多种办公任务，如自动整理文档、安排会议、发送邮件等，无需用户逐一指导。3. 深度学习与预测: 通过学习用户的历史数据和行为模式，预测用户未来的需求，提前准备相关资源和解决方案。4. 个性化建议提供: 根据用户的办公习惯和偏好，提供个性化的工作流程优化建议和效率提升方案。5. 多平台集成与协同: 能够与多种办公软件和平台无缝集成，实现数据同步和任务协同，确保信息的一致性和实时性。
要求与限制:1. 高准确性: 在理解和执行任务时，必须保证高准确性，避免因误解或执行错误导致工作效率下降。2. 实时响应: 需要具备实时响应能力，快速处理用户的请求，确保不延误重要工作。3. 数据安全与隐私保护: 在处理用户数据时，必须严格遵守数据安全和隐私保护规定，确保用户信息不被泄露。4. 用户友好性: 界面和交互设计需简洁直观，易于用户理解和操作，降低使用门槛。5. 持续学习与优化: 需要不断学习用户反馈和新的办公场景，持续优化自身功能和性能，以适应不断变化的办公需求。
复制代码
配置完成后，先点击保存按钮，保存成功后点击发布：
选择发布渠道：
在发布界面，选择 API 和 Web Url 两种发布渠道
设置发布秘钥：
点击获取 API KEY 后，点击新增平台 API Key：
点击确定后，下载 API Key：
部署资源：
选择发布方式：免费额度
注意：免费额度只有 1 个，请确保当前租户下没有其它 Agent 应用。
点击发布按钮后，提示：正在部署 Agent，大约需要 1~2 分钟，请耐心等待，勿关闭页面。
记录 Agent 发布的 API 地址，留作下面步骤使用。
点击完成发布：
智能办公助手的 Agent 就发布成功了！
四、轻量级智能办公助手 Agent 集成实战
4.1 PC 端通过 cli 工具连接云开发环境
本案例中，使用华为云《开发者空间云开发环境使用指导》的“三. PC 端环境配置”、“四. 本地 PC 端操作云开发环境中的 1.开机、2.建立隧道连接”章节完成 cli 工具安装、环境配置、创建云开发环境、开机、建立隧道连接的功能。
4.2 本地 IDE 直连云开发环境
本案例中，使用华为云《本地CodeArts IDE基于华为开发者空间云开发环境完成小游戏开发》的“三、本地 IDE 直连云开发环境完成上传下载的 1.下载 CodeArts IDE 并安装 RemoteShell 插件、2.连接云开发环境”章节完成本地 CodeArts IDE 直连云开发环境。
4.3 创建 Web 项目并安装项目依赖
新建项目文件夹：SmartOfficeAssistant，在此文件夹下，新建 main.py 文件。
安装 requests：
pip install requests
复制代码
安装 Flask：
pip install Flask
复制代码
安装成功后，若出现类似以下错误：
Traceback (most recent call last): File "/home/developer/SmartOfficeAssistant/main.py", line 3, in <module> from flask import Flask, render_template_string, request, jsonify File "/home/developer/.local/lib/python3.9/site-packages/flask/__init__.py", line 7, in <module> from .app import Flask as Flask File "/home/developer/.local/lib/python3.9/site-packages/flask/app.py", line 27, in <module> from . import cli File "/home/developer/.local/lib/python3.9/site-packages/flask/cli.py", line 17, in <module> from .helpers import get_debug_flag File "/home/developer/.local/lib/python3.9/site-packages/flask/helpers.py", line 14, in <module> from werkzeug.urls import url_quoteImportError: cannot import name 'url_quote' from 'werkzeug.urls' (/home/developer/.local/lib/python3.9/site-packages/werkzeug/urls.py)
复制代码
请使用以下命令，升级 Flask 版本：
pip install --upgrade flask
复制代码
4.4 编写项目代码集成 Agent
系统平台 UI 视图代码：
# 主页路由@app.route('/')def index(): return render_template_string('''<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>集成Agent的Web平台</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#165DFF', secondary: '#36CFC9', neutral: '#F5F7FA', dark: '#1D2129', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .chat-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .agent-avatar { transition: all 0.3s ease; } .agent-avatar:hover { transform: scale(1.05); } .chat-container { transform: translateX(100%); transition: transform 0.3s ease-out; } .chat-container.active { transform: translateX(0); } .message-bubble { max-width: 80%; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } </style></head><body class="bg-gray-50 font-sans text-dark"> <!-- 主页面内容 --> <div class="min-h-screen flex flex-col"> <!-- 顶部导航栏 --> <header class="bg-white shadow-sm"> <div class="container mx-auto px-4 py-4 flex justify-between items-center"> <div class="flex items-center space-x-2"> <i class="fa fa-cubes text-primary text-2xl"></i> <h1 class="text-xl font-bold text-primary">OA办公平台</h1> </div> <nav class="hidden md:flex space-x-8"> <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a> <a href="#" class="text-gray-600 hover:text-primary transition-colors">功能</a> <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助</a> <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于</a> </nav> <button class="md:hidden text-gray-600"> <i class="fa fa-bars text-xl"></i> </button> </div> </header>
<!-- 主要内容区 --> <main class="flex-grow container mx-auto px-4 py-8"> <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> <h2 class="text-2xl font-bold mb-4">欢迎使用OA办公平台</h2> <p class="text-gray-600 mb-6">这是一个集成了智能Agent的示例Web平台。点击右下角的助手头像可以打开对话窗口，与智能Agent进行交互。</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-neutral rounded-lg p-5 hover:shadow-md transition-shadow"> <div class="text-primary text-3xl mb-3"> <i class="fa fa-line-chart"></i> </div> <h3 class="font-semibold text-lg mb-2">数据分析</h3> <p class="text-gray-600 text-sm">提供全面的数据分析功能，帮助您深入了解业务状况。</p> </div>
<div class="bg-neutral rounded-lg p-5 hover:shadow-md transition-shadow"> <div class="text-primary text-3xl mb-3"> <i class="fa fa-cog"></i> </div> <h3 class="font-semibold text-lg mb-2">系统设置</h3> <p class="text-gray-600 text-sm">自定义系统参数，满足您的个性化需求。</p> </div>
<div class="bg-neutral rounded-lg p-5 hover:shadow-md transition-shadow"> <div class="text-primary text-3xl mb-3"> <i class="fa fa-users"></i> </div> <h3 class="font-semibold text-lg mb-2">用户管理</h3> <p class="text-gray-600 text-sm">管理用户账户和权限，确保系统安全。</p> </div> </div> </div>
<div class="bg-white rounded-xl shadow-sm p-6"> <h3 class="text-xl font-bold mb-4">最近活动</h3> <div class="space-y-4"> <div class="flex items-start"> <div class="bg-primary/10 p-2 rounded-full mr-4"> <i class="fa fa-file-text-o text-primary"></i> </div> <div> <p class="font-medium">报告已生成</p> <p class="text-sm text-gray-500">销售月度报告已生成，点击查看详情</p> <p class="text-xs text-gray-400 mt-1">10分钟前</p> </div> </div>
<div class="flex items-start"> <div class="bg-secondary/10 p-2 rounded-full mr-4"> <i class="fa fa-user-plus text-secondary"></i> </div> <div> <p class="font-medium">新用户加入</p> <p class="text-sm text-gray-500">3名新用户已注册并完成认证</p> <p class="text-xs text-gray-400 mt-1">1小时前</p> </div> </div> </div> </div> </main>
<!-- 页脚 --> <footer class="bg-white border-t mt-8 py-6"> <div class="container mx-auto px-4 text-center text-gray-500 text-sm"> <p>© 2025 智能办公系统平台 版权所有</p> </div> </footer> </div>
<!-- Agent对话部分 --> <div class="fixed bottom-8 right-8 z-50"> <!-- 对话窗口 --> <div id="chatContainer" class="chat-container fixed bottom-8 right-8 w-80 md:w-96 bg-white rounded-xl chat-shadow h-[500px] flex flex-col"> <!-- 对话窗口头部 --> <div class="bg-primary text-white p-4 rounded-t-xl flex justify-between items-center"> <div class="flex items-center space-x-3"> <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> <i class="fa fa-robot text-white"></i> </div> <h3 class="font-medium">智能办公助手</h3> </div> <button id="closeChat" class="text-white hover:text-gray-200 transition-colors"> <i class="fa fa-times"></i> </button> </div>
<!-- 对话内容区域 --> <div id="chatMessages" class="flex-grow p-4 overflow-y-auto space-y-4"> <div class="flex items-start"> <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 flex-shrink-0"> <i class="fa fa-robot text-primary text-sm"></i> </div> <div class="message-bubble bg-primary/5 p-3 rounded-lg rounded-tl-none"> <p>你好！我是智能办公助手，有什么可以帮助你的吗？</p> </div> </div> </div>
<!-- 输入区域 --> <div class="border-t p-3"> <form id="chatForm" class="flex space-x-2"> <input type="text" id="userInput" placeholder="输入你的问题..." class="flex-grow px-3 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"> <button type="submit" class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary/90 transition-colors"> <i class="fa fa-paper-plane-o"></i> </button> </form> </div> </div>
<!-- 悬浮头像按钮 --> <button id="openChatBtn" class="agent-avatar bg-primary text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center"> <i class="fa fa-comments text-xl"></i> </button> </div>
<script> // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { const chatContainer = document.getElementById('chatContainer'); const openChatBtn = document.getElementById('openChatBtn'); const closeChatBtn = document.getElementById('closeChat'); const chatForm = document.getElementById('chatForm'); const userInput = document.getElementById('userInput'); const chatMessages = document.getElementById('chatMessages');
// 存储当前对话ID let conversationId = localStorage.getItem('agentConversationId'); if (!conversationId) { conversationId = '{{ conversation_id }}'; localStorage.setItem('agentConversationId', conversationId); }
// 打开对话窗口 openChatBtn.addEventListener('click', function() { chatContainer.classList.add('active'); openChatBtn.classList.add('hidden'); });
// 关闭对话窗口 closeChatBtn.addEventListener('click', function() { chatContainer.classList.remove('active'); openChatBtn.classList.remove('hidden'); });
// 提交消息 chatForm.addEventListener('submit', function(e) { e.preventDefault(); const message = userInput.value.trim(); if (message) { // 添加用户消息到界面 addMessageToUI('user', message);
// 清空输入框 userInput.value = '';
// 发送消息到后端 sendMessageToAgent(message); } });
// 添加消息到界面 function addMessageToUI(sender, content) { const messageDiv = document.createElement('div'); messageDiv.className = `flex items-start ${sender === 'user' ? 'justify-end' : ''}`;
if (sender === 'user') { messageDiv.innerHTML = ` <div class="message-bubble bg-primary text-white p-3 rounded-lg rounded-tr-none"> <p>${content}</p> </div> `; } else { messageDiv.innerHTML = ` <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 flex-shrink-0"> <i class="fa fa-robot text-primary text-sm"></i> </div> <div class="message-bubble bg-primary/5 p-3 rounded-lg rounded-tl-none"> <p>${content}</p> </div> `; }
chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; }
// 发送消息到Agent function sendMessageToAgent(message) { // 显示"正在输入"状态 const typingDiv = document.createElement('div'); typingDiv.id = 'typingIndicator'; typingDiv.className = 'flex items-start'; typingDiv.innerHTML = ` <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 flex-shrink-0"> <i class="fa fa-robot text-primary text-sm"></i> </div> <div class="message-bubble bg-primary/5 p-3 rounded-lg rounded-tl-none"> <p class="text-gray-500">正在输入...</p> </div> `; chatMessages.appendChild(typingDiv); chatMessages.scrollTop = chatMessages.scrollHeight;
// 发送请求到后端 fetch('/api/agent', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ message: message, conversation_id: conversationId }) }) .then(response => response.json()) .then(data => { // 移除"正在输入"状态 document.getElementById('typingIndicator').remove();
// 添加Agent回复到界面 addMessageToUI('agent', data.response); }) .catch(error => { console.error('Error:', error); document.getElementById('typingIndicator').remove(); addMessageToUI('agent', '抱歉，处理请求时出现错误，请稍后再试。'); }); } }); </script></body></html> ''', conversation_id=str(uuid.uuid4()))
复制代码
调用 Agent API:
def call_agent(query, conversation_id=None): url = "Agent API" payload = json.dumps({"query": query, "conversation_id": conversation_id}) headers = { 'Content-Type': 'application/json', 'Authorization': 'Bearer API Key', }
response = requests.post(url, headers=headers, data=payload, stream=True) response.encoding = 'utf-8'
full_content = "" for line in response.iter_lines(decode_unicode=True): if line and line.startswith('data: '): data_str = line[len('data: '):] if data_str == '[DONE]': break try: data_json = json.loads(data_str) content = data_json.get('data', {}).get('raw', {}).get('content', '') if content: full_content += content except json.JSONDecodeError: pass response.close() return full_content
复制代码
注意：
Agent API 替换成步骤 “3.3 创建并配置 Agent”中获取的 Agent API
API Key 替换成步骤 “3.3 创建并配置 Agent”中获取的 API Key
处理 Agent 请求：
# 处理Agent请求的API@app.route('/api/agent', methods=['POST'])def agent_api(): data = request.json message = data.get('message', '') conversation_id = data.get('conversation_id', '')
if not conversation_id: conversation_id = str(uuid.uuid4())
# 调用Agent获取响应 response = call_agent(message, conversation_id)
# 存储对话历史（实际项目中可使用数据库） if conversation_id not in conversations: conversations[conversation_id] = [] conversations[conversation_id].append({ 'role': 'user', 'content': message }) conversations[conversation_id].append({ 'role': 'agent', 'content': response })
return jsonify({ 'response': response, 'conversation_id': conversation_id })
复制代码
代码入口调用：
from flask import Flask, render_template_string, request, jsonify
import requestsimport jsonimport uuid
app = Flask(__name__)
if __name__ == '__main__': app.run(host="0.0.0.0",debug=True,port=8082)
复制代码
项目完整代码见文件 main.py:
import requestsfrom flask import Flask, render_template_string, request, jsonifyimport jsonimport uuid
app = Flask(__name__)
# 存储对话历史conversations = {}
# 调用Agent的函数def call_agent(query, conversation_id=None):# Agent API替换成步骤 “3.3 创建并配置Agent”中获取的Agent API# API Key替换成步骤 “3.3 创建并配置Agent”中获取的API Key url = "Agent API" payload = json.dumps({"query": query, "conversation_id": conversation_id}) headers = { 'Content-Type': 'application/json', 'Authorization': 'Bearer API Key', }
response = requests.post(url, headers=headers, data=payload, stream=True) response.encoding = 'utf-8'
full_content = "" for line in response.iter_lines(decode_unicode=True): if line and line.startswith('data: '): data_str = line[len('data: '):] if data_str == '[DONE]': break try: data_json = json.loads(data_str) content = data_json.get('data', {}).get('raw', {}).get('content', '') if content: full_content += content except json.JSONDecodeError: pass response.close() return full_content
# 主页路由@app.route('/')def index(): return render_template_string('''<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>集成Agent的Web平台</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#165DFF', secondary: '#36CFC9', neutral: '#F5F7FA', dark: '#1D2129', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .chat-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .agent-avatar { transition: all 0.3s ease; } .agent-avatar:hover { transform: scale(1.05); } .chat-container { transform: translateX(100%); transition: transform 0.3s ease-out; } .chat-container.active { transform: translateX(0); } .message-bubble { max-width: 80%; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } </style></head><body class="bg-gray-50 font-sans text-dark"> <!-- 主页面内容 --> <div class="min-h-screen flex flex-col"> <!-- 顶部导航栏 --> <header class="bg-white shadow-sm"> <div class="container mx-auto px-4 py-4 flex justify-between items-center"> <div class="flex items-center space-x-2"> <i class="fa fa-cubes text-primary text-2xl"></i> <h1 class="text-xl font-bold text-primary">OA办公平台</h1> </div> <nav class="hidden md:flex space-x-8"> <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a> <a href="#" class="text-gray-600 hover:text-primary transition-colors">功能</a> <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助</a> <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于</a> </nav> <button class="md:hidden text-gray-600"> <i class="fa fa-bars text-xl"></i> </button> </div> </header>
<!-- 主要内容区 --> <main class="flex-grow container mx-auto px-4 py-8"> <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> <h2 class="text-2xl font-bold mb-4">欢迎使用OA办公平台</h2> <p class="text-gray-600 mb-6">这是一个集成了智能Agent的示例Web平台。点击右下角的助手头像可以打开对话窗口，与智能Agent进行交互。</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-neutral rounded-lg p-5 hover:shadow-md transition-shadow"> <div class="text-primary text-3xl mb-3"> <i class="fa fa-line-chart"></i> </div> <h3 class="font-semibold text-lg mb-2">数据分析</h3> <p class="text-gray-600 text-sm">提供全面的数据分析功能，帮助您深入了解业务状况。</p> </div>
<div class="bg-neutral rounded-lg p-5 hover:shadow-md transition-shadow"> <div class="text-primary text-3xl mb-3"> <i class="fa fa-cog"></i> </div> <h3 class="font-semibold text-lg mb-2">系统设置</h3> <p class="text-gray-600 text-sm">自定义系统参数，满足您的个性化需求。</p> </div>
<div class="bg-neutral rounded-lg p-5 hover:shadow-md transition-shadow"> <div class="text-primary text-3xl mb-3"> <i class="fa fa-users"></i> </div> <h3 class="font-semibold text-lg mb-2">用户管理</h3> <p class="text-gray-600 text-sm">管理用户账户和权限，确保系统安全。</p> </div> </div> </div>
<div class="bg-white rounded-xl shadow-sm p-6"> <h3 class="text-xl font-bold mb-4">最近活动</h3> <div class="space-y-4"> <div class="flex items-start"> <div class="bg-primary/10 p-2 rounded-full mr-4"> <i class="fa fa-file-text-o text-primary"></i> </div> <div> <p class="font-medium">报告已生成</p> <p class="text-sm text-gray-500">销售月度报告已生成，点击查看详情</p> <p class="text-xs text-gray-400 mt-1">10分钟前</p> </div> </div>
<div class="flex items-start"> <div class="bg-secondary/10 p-2 rounded-full mr-4"> <i class="fa fa-user-plus text-secondary"></i> </div> <div> <p class="font-medium">新用户加入</p> <p class="text-sm text-gray-500">3名新用户已注册并完成认证</p> <p class="text-xs text-gray-400 mt-1">1小时前</p> </div> </div> </div> </div> </main>
<!-- 页脚 --> <footer class="bg-white border-t mt-8 py-6"> <div class="container mx-auto px-4 text-center text-gray-500 text-sm"> <p>© 2025 智能办公系统平台 版权所有</p> </div> </footer> </div>
<!-- Agent对话部分 --> <div class="fixed bottom-8 right-8 z-50"> <!-- 对话窗口 --> <div id="chatContainer" class="chat-container fixed bottom-8 right-8 w-80 md:w-96 bg-white rounded-xl chat-shadow h-[500px] flex flex-col"> <!-- 对话窗口头部 --> <div class="bg-primary text-white p-4 rounded-t-xl flex justify-between items-center"> <div class="flex items-center space-x-3"> <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> <i class="fa fa-robot text-white"></i> </div> <h3 class="font-medium">智能办公助手</h3> </div> <button id="closeChat" class="text-white hover:text-gray-200 transition-colors"> <i class="fa fa-times"></i> </button> </div>
<!-- 对话内容区域 --> <div id="chatMessages" class="flex-grow p-4 overflow-y-auto space-y-4"> <div class="flex items-start"> <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 flex-shrink-0"> <i class="fa fa-robot text-primary text-sm"></i> </div> <div class="message-bubble bg-primary/5 p-3 rounded-lg rounded-tl-none"> <p>你好！我是智能办公助手，有什么可以帮助你的吗？</p> </div> </div> </div>
<!-- 输入区域 --> <div class="border-t p-3"> <form id="chatForm" class="flex space-x-2"> <input type="text" id="userInput" placeholder="输入你的问题..." class="flex-grow px-3 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"> <button type="submit" class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary/90 transition-colors"> <i class="fa fa-paper-plane-o"></i> </button> </form> </div> </div>
<!-- 悬浮头像按钮 --> <button id="openChatBtn" class="agent-avatar bg-primary text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center"> <i class="fa fa-comments text-xl"></i> </button> </div>
<script> // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { const chatContainer = document.getElementById('chatContainer'); const openChatBtn = document.getElementById('openChatBtn'); const closeChatBtn = document.getElementById('closeChat'); const chatForm = document.getElementById('chatForm'); const userInput = document.getElementById('userInput'); const chatMessages = document.getElementById('chatMessages');
// 存储当前对话ID let conversationId = localStorage.getItem('agentConversationId'); if (!conversationId) { conversationId = '{{ conversation_id }}'; localStorage.setItem('agentConversationId', conversationId); }
// 打开对话窗口 openChatBtn.addEventListener('click', function() { chatContainer.classList.add('active'); openChatBtn.classList.add('hidden'); });
// 关闭对话窗口 closeChatBtn.addEventListener('click', function() { chatContainer.classList.remove('active'); openChatBtn.classList.remove('hidden'); });
// 提交消息 chatForm.addEventListener('submit', function(e) { e.preventDefault(); const message = userInput.value.trim(); if (message) { // 添加用户消息到界面 addMessageToUI('user', message);
// 清空输入框 userInput.value = '';
// 发送消息到后端 sendMessageToAgent(message); } });
// 添加消息到界面 function addMessageToUI(sender, content) { const messageDiv = document.createElement('div'); messageDiv.className = `flex items-start ${sender === 'user' ? 'justify-end' : ''}`;
if (sender === 'user') { messageDiv.innerHTML = ` <div class="message-bubble bg-primary text-white p-3 rounded-lg rounded-tr-none"> <p>${content}</p> </div> `; } else { messageDiv.innerHTML = ` <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 flex-shrink-0"> <i class="fa fa-robot text-primary text-sm"></i> </div> <div class="message-bubble bg-primary/5 p-3 rounded-lg rounded-tl-none"> <p>${content}</p> </div> `; }
chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; }
// 发送消息到Agent function sendMessageToAgent(message) { // 显示"正在输入"状态 const typingDiv = document.createElement('div'); typingDiv.id = 'typingIndicator'; typingDiv.className = 'flex items-start'; typingDiv.innerHTML = ` <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 flex-shrink-0"> <i class="fa fa-robot text-primary text-sm"></i> </div> <div class="message-bubble bg-primary/5 p-3 rounded-lg rounded-tl-none"> <p class="text-gray-500">正在输入...</p> </div> `; chatMessages.appendChild(typingDiv); chatMessages.scrollTop = chatMessages.scrollHeight;
// 发送请求到后端 fetch('/api/agent', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ message: message, conversation_id: conversationId }) }) .then(response => response.json()) .then(data => { // 移除"正在输入"状态 document.getElementById('typingIndicator').remove();
// 添加Agent回复到界面 addMessageToUI('agent', data.response); }) .catch(error => { console.error('Error:', error); document.getElementById('typingIndicator').remove(); addMessageToUI('agent', '抱歉，处理请求时出现错误，请稍后再试。'); }); } }); </script></body></html> ''', conversation_id=str(uuid.uuid4()))
# 处理Agent请求的API@app.route('/api/agent', methods=['POST'])def agent_api(): data = request.json message = data.get('message', '') conversation_id = data.get('conversation_id', '')
if not conversation_id: conversation_id = str(uuid.uuid4())
# 调用Agent获取响应 response = call_agent(message, conversation_id)
# 存储对话历史（实际项目中可使用数据库） if conversation_id not in conversations: conversations[conversation_id] = [] conversations[conversation_id].append({ 'role': 'user', 'content': message }) conversations[conversation_id].append({ 'role': 'agent', 'content': response })
return jsonify({ 'response': response, 'conversation_id': conversation_id })
if __name__ == '__main__': app.run(host="0.0.0.0",debug=True,port=8082)
复制代码
4.5 浏览器测试体验智能办公助手
开通 8082 端口
华为开发者空间 - 云开发环境默认开放的端口号是 8080-8089，此处我们开通远程 port 为 8082 隧道 1329，用于映射 Web 端对外访问端口。通过如下命令创建隧道 1329：
运行智能办公 Web 项目
进入 SmartOfficeAssistant 文件夹下，执行命令行运行项目：
python main.py
复制代码
在浏览器中输入：http://127.0.0.1:1329，进入智能办公系统平台
体验智能办公助手：
输入以下问题：
问题一：请介绍自己
问题二：请帮我预定明天下午 3:30 的会议
至此，华为开发者空间云开发环境+Versatile Agent，构建 AI 轻量级智能办公助手的案例已全部完成。
划线
评论
复制
发布于: 19 分钟前阅读数: 2
华为云开发者联盟
关注
提供全面深入的云计算技术干货 2020-07-14 加入
生于云，长于云，让开发者成为决定性力量
评论