构建 AI 总结助手,实现智能文档摘要-阿里云帮助中心

手动部署

https://www.aliyun.com/solution/tech-solution/bailian-ai-summary

方案概览

本解决方案致力于通过阿里云百炼平台打造智能AI总结助手，从而提升文档处理效率和分析质量。借助阿里云的先进人工智能技术，实现高效的文本自动总结和信息提取。该方案可以对大规模文本数据进行自动化摘要和信息提取。通过云端部署，用户能够随时随地访问和使用总结助手，从而在各种业务场景中提高文档管理和决策效率。该方案广泛适用于新闻、报告、学术论文等多种文档处理场景，显著提升信息处理效率，减少人工投入和时间成本。

方案架构

按照本方案提供的配置完成部署后，会在阿里云上搭建一个如下图所示的运行环境。实际部署时，您可根据具体的资源规划调整部分配置，但最终的运行环境将与下图展示的架构相似。

本方案的技术架构包括以下基础设施和云服务：

1 个函数计算服务：用于部署 AI 总结示例应用程序。
1 个大模型服务平台百炼应用：用于示例应用程序中提供大模型问答服务。

部署准备

开始部署前，请按以下指引完成账号申请、账号充值、服务开通及授权。

如果您还没有阿里云账号，请访问阿里云账号注册页面，根据页面提示完成注册。阿里云账号是您使用云资源的付费实体，因此是部署方案的必要前提。

为阿里云账号充值。

为节省成本，本方案默认全部选择使用按量付费资源，使用按量付费资源需要确保账户余额不小于 100 元。

在使用免费额度的情况下预计产生费用 0 元。百炼和函数计算提供了免费试用额度，如果免费试用额度已耗尽，体验本方案预计成本不超过 1 元。（假设您选择本文示例规格资源，且资源运行时间不超过 60 分钟。实际情况中可能会因您操作过程中实际使用的流量差异，会导致费用有所变化，请以控制台显示的实际报价以及最终账单为准，如下表格仅供参考）。

序号	产品	规格	地域	说明
1	函数计算服务	vCPU：0.08 内存：128 MB 临时硬盘大小：512 MB	华东1（杭州）	以1小时内调用不超过 100 次为例。
2	大模型服务平台百炼	本教程使用大模型通义千问2-开源版-72B来提供问答服务。	华东1（杭州）	以1小时内调用不超过 100 次为例。

部署资源

规划好资源后，请按照以下步骤部署方案中的所有资源。

说明

本方案相关数据仅用于展示及体验产品功能，实际业务使用时，请以您的真实数据为准。

创建阿里云百炼应用

创建应用并获取应用 ID

您需要在百炼平台中创建一个应用，并获取应用 ID ，用于后续函数计算中的示例程序调用大模型服务

登录。
在左侧导航栏，单击应用中心 > 我的应用。
在我的应用页面，单击右侧的新增应用。在弹出框中，选择智能体应用并单击直接创建，系统将自动进入应用详情页面。
在应用详情页面，单击顶部应用名称右侧的模型设置按钮，选择模型通义千问2-开源版-72B，其它选项可使用默认值或根据情况进行自定义设置。
1. 如系统提示“您还未开通模型调用，无法使用模型”，则需要按提示点击开通，完成开通后再选择模型。
在应用详情页面，单击右上角的发布按钮，完成应用创建。
完成应用创建后，可到应用中心 > 我的应用中查看应用，复制出应用信息中的应用 ID 并保存到本地，后续步骤中将会使用。

创建 API-KEY

登录。
在页面右上角单击图标，在弹出的菜单中单击 API-KEY ，进入我的 API-KEY 页面。
在列表右上角，单击创建我的 API-KEY 按钮，在弹出框中选择相应的业务空间，最后单击确定，完成 API-KEY 创建。
创建 API-KEY 完成后，单击列表的操作列中的查看，查看完整的 API-KEY 并保存到本地，后续步骤中将会使用。

部署函数计算服务

您已经创建 1 个阿里云百炼应用。接下来您需要创建一个函数，用以安装示例应用程序。

点击我们准备好的函数应用模板，表单中的各输入项参照以下示例进行设置。

项目	说明	示例值
部署类型	选择部署类型。	直接部署
应用名称	自定义应用名称。	summarize-assistant-v4rn
地域	选择华东 1（杭州）。	华东1（杭州）
百炼应用 ID	输入“创建阿里云百炼应用”步骤中创建的百炼应用的应用 ID 。	80ddab9******2beba2
百炼 API-KEY	输入“创建阿里云百炼应用”步骤中创建的 API-KEY 。	sk-4****5e87

完成表单输入后，单击页面底部的创建并部署默认环境，大约等待2分钟左右即可完成函数部署（当在函数详情页看到类似如下界面时，则代表已部署完成）。

方案验证

一、通过访问函数应用服务，验证智能文档摘要功能

登录函数计算控制台。
在左侧导航中单击应用，进入应用列表页面。
在应用列表页面，找到前面步骤中创建的应用，单击对应的应用名称，进入应用详情页面。
在应用详情页面，单击环境信息区域中的访问域名后的链接地址，即可查看到以下示例应用程序页面。
点击 AI 助手中的页面总结按钮，即可开始体验 AI 总结助手的内容总结功能。

二、通过部署到已有系统，验证 AI 总结助手的集成效果与内容总结功能

获取函数 API 接口。进入应用详情页，在资源信息下方的函数资源下，单击函数名称，在函数详情页中单击http触发器。点击复制公网访问地址中的https地址，拼接/ chat ，即可得到函数 API ，例如：https://example.com/chat。
说明
函数计算应用在没有访问时不产生任何费用，您完全可以保留此函数应用，在后续用作调用大模型的转发服务。
修改函数计算中的服务端代码。
1. 进入到创建的函数应用详情页，在资源信息下方的函数资源下，单击函数名称，进入到函数详情页面。
2. 在函数详情页面中，点击代码页签，找到 index.js 文件，修改CORS配置。
  说明
  在当前函数的代码中，包含一个调用大模型以获取答案的接口POST /chat，其实现代码位于文件index.js中。请对其中的CORS设置进行修改，以仅允许自有站点调用/chat接口。
  在函数详情页的代码页签下找到index.js文件。
  修改index.js中的origin字段为自己的站点域名，然后单击上方的部署代码按钮即可。
  重要
  需要注意：index.js中的origin字段为自己的站点域名，若您的站点域名尚未设置，或处于本地测试阶段，则可以保持默认不做变更，origin字段为*，表示允许全部访问。

在已有系统的 HTML 页面中嵌入前端代码。

重要

请将以下HTML代码复制到自己系统中HTML页面的</body>标签前，并修改修改点1、修改点2、修改点3的配置。

<script>
    // 页面总结按钮的disabled状态设置
    const setPageSummarizeButton = (disabled) => {
        const button = document.querySelector('.webChat-footer-extra-button');
        if (button) {
            button.disabled = disabled;
        }
    }
    const defaultPrompt = '总结当前页面内容';
    window.CHATBOT_CONFIG = {
        //【修改点1】：请替换endpoint的值为 第一步获取的函数API接口
        // 例如：https://summaritant-******.cn-hangzhou.fcapp.run/chat
        endpoint: '函数API接口',
        feedBackConfig: {
            like: {
                hide: false, // 是否隐藏点赞: true表示隐藏
                onClick: () => {
                    console.log('点赞');
                }
            },
            disLike: {
                hide: false, // 是否隐藏点踩: true表示隐藏
                onClick: () => {
                    console.log('点踩');
                }
            }
        },
        dataProcessor: {
            // 在向后端大模型应用发起请求前改写 Prompt。可用于总结内容场景，在发送前将内容包含在内，同时避免在前端显示这些内容
            rewritePrompt(prompt) {
                if (prompt === defaultPrompt ) {
                    //【修改点2】：pageContentDom代表当前页面的内容，请填写包裹页面内容的标签元素id以获取当前页面需要总结的内容
                    const pageContentDom = document.getElementById('包裹页面内容的标签元素id');
                    return `请使用中文总结以下内容：\n\n------\n\n${pageContentDom?.outerText}`;
                }
                return prompt;
            }
        },
        // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
        aiChatOptions: {
            className: 'summarize-ai-chat',
            personaOptions: {
                assistant: {
                    avatar: 'https://help-static-aliyun-doc.aliyuncs.com/demos/ai-assistant-logo.gif',
                },
                user: {
                    avatar: 'https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg',
                }
            },
            composerOptions: {
                placeholder: '请将您遇到的问题告诉我', // 消息输入框提示
                hideStopButton: true
            },
            events: {
                messageSent: () => {
                    setPageSummarizeButton(true); // 消息发送时将页面总结按钮置灰
                },
                messageReceived: () => {
                    setPageSummarizeButton(false); // 消息接收完毕时重置页面总结按钮
                }
            },
            conversationOptions: {
                //【修改点3】：此列表为初始问题列表，请配置为合适的内容
                conversationStarters: [
                    {prompt: defaultPrompt},
                    {prompt: '可替换内容'},
                    {prompt: '可替换内容'},
                ],
                layout: 'list',
            },
        },
        customRenderOptions: {
            // 欢迎页面配置: greetingOptions为空则使用默认欢迎页面
            greetingOptions: {
                greeting: '你好, 我是',
                name: 'AI助手',
                quickStartItemClick: ({api, item}) => {
                    console.log('点击了快速入口');
                    api?.composer && api.composer.send(item?.prompt);
                }
            },
            // onInit AI助手初始化时执行
            onInit: (params) => {
                const { api } = params || {};
                // 在对话框上方添加一个按钮（默认为页面总结按钮）
                const extraButton = document.querySelector('.webChat-footer-extra');
                const footer = document.querySelector('.nlux-composer-container');
                if (!footer || extraButton) return;
                const footerParent = footer.parentElement;

                const newDiv = document.createElement('div');
                newDiv.className = 'webChat-footer-extra';

                const button = document.createElement('button');
                button.innerHTML = '页面总结';
                button.className = 'webChat-footer-extra-button';
                button.onclick = () => {
                    if (api?.composer) {
                        api.composer.send(defaultPrompt);
                    }
                }
                newDiv.appendChild(button);

                footerParent && footerParent.insertBefore(newDiv, footer);

                // 自定义AI总结助对话窗口顶部标题
                const title = document.querySelector('.webchat-container-toolbar span');
                if (title) {
                    title.innerHTML = 'AI助手';
                }
            },
            stopButtonClass: 'summarize-stop-button',
            onChatbotRefresh: () => {
                setPageSummarizeButton(false);
            }
        }
    };
</script>
<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.19/index.css" />
<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.19/index.js"></script>
<style>
    /* AI总结助手打开的对话窗口顶部标题栏样式设置 */
    :root {
        --webchat-toolbar-background-color: #fff;
        --webchat-toolbar-text-color: #333;
    }
    /* AI总结助手打开的对话窗口如果被遮挡或需调整显示位置，可以尝试调整以下 z-index、bottom、right等属性 */
    .webchat-container {
        z-index: 100;
        bottom: 10px;
        right: 10px;
    }
    /* AI总结助手的唤起图标如果被遮挡或需调整显示位置，可以尝试调整以下 z-index、bottom、right等属性 */
    .webchat-bubble-tip {
        z-index: 99;
        bottom: 20px;
        right: 20px;
    }

    /* AI 对话框顶部渐变色 */
    .webchat-container-toolbar {
        border-bottom: none !important;
        &::before {
            content: "";
            border-style: solid;
            border-width: 5px 0 0;
            border-image: linear-gradient(270deg, #eb8698, #1366ec) 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
    }
    .summarize-ai-chat {
        /* 调整内容区域高度 */
        .nlux-launchPad-container,
        .nlux-conversation-container {
            height: calc(100% - 120px) !important;
        }
        /* 底部消息框布局调整 */
        .nlux-composer-container {
            box-sizing: content-box;
            width: unset !important;
            padding: 6px 16px 16px;
            border-top: none !important;
            & > div {
                border: 1px solid #DEE0E5;
                border-radius: 2px;
            }
        }
        /* 消息列表布局调整-list展示调整 */
        .nlux-comp-chatItem.nlux-comp-chatItem--listLayout {
            flex-direction: row !important;
            .nlux-comp-chatItem-participantName {
                display: none;
            }
            .nlux-comp-message.nlux_msg_sent,
            .nlux-comp-message.nlux_msg_received {
                margin-left: 0 !important;
            }
        }
        .nlux-comp-chatItem.nlux-comp-chatItem--sent.nlux-comp-chatItem--listLayout {
            margin-bottom: 1.5em;
            .nlux-comp-message.nlux_msg_sent {
                background-color: #e5effe;
                justify-content: center;
                padding: 10px;
                flex: unset !important;
            }
        }
        /* 页面总结按钮 */
        .webChat-footer-extra {
            height: 30px;
            padding-left: 16px;
            .webChat-footer-extra-button {
                display: inline-block;
                padding: 4px;
                font-size: 12px;
                border: 1px solid #DEE0E5;
                border-radius: 2px;
                background-color: #fff;
            }
            .webChat-footer-extra-button:hover {
                cursor: pointer;
                background: linear-gradient(61deg, rgba(229, 239, 254, .5) -24%, rgba(238, 235, 255, .5) 127%);
            }
            .webChat-footer-extra-button[disabled] {
                background-color: #ececec;
                cursor: not-allowed;
                opacity: 0.4;
            }
        }
        /* 发送按钮样式 */
        .nlux-comp-sendIcon {
            max-width: 28px !important;
            width: 28px;
            height: 28px;
            line-height: 28px;
            border-radius: 2px;
            background-color: #1366ec;
        }
        .nlux-comp-composer>button>.nlux-comp-sendIcon>.nlux-comp-sendIcon-container {
            mask: unset !important;
            background-color: unset;
            background-image: url('https://img.alicdn.com/imgextra/i3/O1CN01ZGAB0T1u6YYQ2sR8b_!!6000000005988-55-tps-13-13.svg');
            background-size: 12px;
            background-position: center;
        }
        .nlux-comp-composer>button[disabled]>.nlux-comp-sendIcon {
            opacity: 0.4;
        }
    }
    /* 终止按钮 */
    .summarize-stop-button {
        bottom: 18px !important;
        right: 16px !important;
    }
</style>

运行 HTML 页面，在右下角找到 AI 助手，即开始体验 AI 总结助手的内容总结功能。

说明

应用评测：建议在正式上线 AI 助手前，组织业务人员一起参与应用评测，确保大模型应用的回答效果符合预期。如果不符合预期，可以通过优化提示词、完善补充私有知识、调整文档切分策略等方法来改进回答效果。
大模型课程：系统体验的改进优化永远没有终点，您可以考虑学习并通过阿里云大模型 ACA 认证，该认证配套的免费课程能帮助您进一步了解大模型的能力和应用场景，以及如何优化通过大模型的应用效果。

完成及清理

在本方案中，您创建了 1 个函数计算应用、1 个百炼应用。测试完方案后，您可以参考以下规则处理对应产品的实例，避免继续产生费用：

释放 1 个函数计算应用。
登录函数计算控制台，在应用页面，找到目标应用，然后在操作列单击删除应用，根据界面提示删除应用。
释放 1 个百炼应用。
登录，在我的应用页面，找到目标应用，然后单击更多>删除应用，根据界面提示删除应用。