一、概述

1. 案例介绍

华为云开发者空间为开发者提供一个免费的云开发环境，开发者可以将计算密集型任务交给性能强大的云开发环境，同时可以在本地Windows或者MacOS设备上编写代码，在远程的鲲鹏云环境中运行和调试。

Versatile Agent平台(AI原生应用引擎)提供了数据准备、模型选择/调优、知识工程、模型编排、应用部署、应用集成等能力，降低智能应用开发门槛、提升开发效率。

MaaS(即ModelArts Studio大模型即服务平台)是华为云面向AI开发者推出的一站式大模型开发平台，支持开发者一键体验大模型能力，快速构建大模型应用。MaaS平台提供大模型训练、推理、部署、管理、监控等全生命周期管理能力，帮助开发者快速构建大模型应用，加速AI开发。

本案例基于华为开发者空间云开发环境+Versatile Agent，快速构建并集成一个轻量级智能办公助手Agent到模拟OA系统中。案例覆盖从模型服务开通、Agent创建到本地连接云开发环境开发联调的完整流程，最终通过Web界面模拟办公系统，实现智能问答、流程指引等基础功能。适合中小型企业或开发者低成本验证AI办公场景。

2. 适用对象

• 企业
• 个人开发者
• 高校学生

3. 案例时间

本案例总时长预计90分钟。

4. 案例流程

说明：

1. 用户进入华为开发者空间云开发环境；
2. 通过CLI工具连接云开发环境；
3. 领取配置MaaS模型服务并创建智能办公Agent应用；
4. 编写Web端项目代码集成Agent API；
5. 使用本地浏览器测试并体验智能办公助手。

5. 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）	时长（分钟）
华为开发者空间 - 云开发环境	鲲鹏通用计算增强型 kc1 | 2vCPUs | 4G | HCE	免费	90
华为开发者空间 - Versatile Agent平台	系统标配	免费	90

最新案例动态，请查阅 《华为开发者空间云开发环境+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_quote
ImportError: 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 requests
import json
import uuid

app = Flask(__name__)

if __name__ == '__main__':
    app.run(host="0.0.0.0",debug=True,port=8082)

项目完整代码见文件main.py:

import requests
from flask import Flask, render_template_string, request, jsonify
import json
import 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轻量级智能办公助手的案例已全部完成。