如何将人工智能集成到办公软件：ONLYOFFICE Docs案例研究

随着人工智能技术深入我们的生活并简化各种任务，越来越多的软件开发人员、IT公司和初创企业寻求将尖端AI技术集成到产品中，以获得竞争优势。

许多现代CRM平台、电子邮件客户端、个人助理、视频编辑器、项目管理程序等软件工具现已配备AI助手，使用户能够更快工作并提高生产力。办公软件也不例外。将人工智能集成到电子文档工作流程的想法在过去几年中赢得了办公软件开发人员的青睐，现在已有多个有趣的集成示例显著改变了人们处理办公文件的方式。

在本文中，我们将探讨人工智能与办公软件最成功的共生案例，并通过ONLYOFFICE Docs（一个开源办公套件）的示例来研究将AI助手集成到办公套件中的过程。

AI与办公软件：最佳集成示例

办公软件市场竞争激烈，显然大公司总是比其他参与者更具优势。然而，即使是小公司和独立开发人员也能提出优雅的解决方案，将人工智能的力量带入文档编辑和协作领域。

以下是市场上一些最流行的带有集成AI助手的办公套件的快速概述：

Microsoft 365：这家雷德蒙德巨头于2023年3月推出了自己的AI工具Copilot。它结合了大型语言模型（LLM）的力量，使用户更容易使用Microsoft 365应用程序，包括Teams、Outlook和Edge。Copilot深度集成到Microsoft生态系统中，允许您在Word中编写和编辑文本内容，在Excel中分析趋势并创建全面的数据可视化，在PowerPoint中根据提示创建令人印象深刻的演示文稿。Copilot for Microsoft 365需付费订阅。

WPS Office：Microsoft Office的中国竞争对手WPS Office有一个名为WPS AI的AI助手。这是一个生成式AI工具，允许用户生成文本内容、总结大型文档、分析数据、从PDF中提取大纲并创建会议草案。WPS AI可在文本文档和PDF文件中使用，并提供功能有限的免费试用。要访问其全部功能，您需要购买付费版本之一。

Google Workspace：谷歌公司为其生产力应用程序提供了一个名为Gemini的AI驱动助手。该工具内置在Docs、Sheets和Slides中，允许您在文本文档中编写各种内容并生成图像，在电子表格中创建表格和公式，并在演示文稿中生成带有图像和内容的新幻灯片。Gemini for Google Workspace作为付费附加组件提供。有趣的是，Google Workspace Marketplace还提供由第三方开发者为Docs、Sheets和Slides开发的不同AI助手，但您应自行承担风险尝试它们。

Zoho WorkDrive：这个在线内容协作平台和存储具有名为Zia的IA集成功能。这是一个基于AI的写作助手，可用于某些Zoho产品，包括Zoho Writer。使用Zia，您可以检查内容的拼写和语法错误并提高其可读性。该工具的主要目标是帮助您简洁清晰地写作。Zia还可以生成新内容和图像。它不是免费的。

综合考虑，以下结论似乎显而易见：最流行的办公套件提供了出色的AI集成选项，但几乎所有都是付费的。

现在让我们探索ONLYOFFICE Docs的案例，这是一个开源办公套件，提供基于ChatGPT的强大AI功能，并发现这种集成是如何工作的。

ONLYOFFICE Docs和AI：简要概述

ONLYOFFICE Docs是一个开源且免费的办公套件，用于文本文档、电子表格、演示文稿、可填写表单和PDF文件。该套件有一个用于本地部署的自托管版本和一个用于快速启动的基于云的版本。还有适用于Linux、Windows和macOS的桌面客户端以及适用于Android和iOS的移动应用程序。ONLYOFFICE套件的源代码可在GitHub上获得。

ONLYOFFICE Docs有一个开放的API，这使得可以将编辑器与第三方服务集成。此类集成通过插件工作，这些特殊附加组件带来了新功能和特性。在数十个现成的ONLYOFFICE套件插件中，您可以找到那些启用人工智能功能的插件。更准确地说，这些是ChatGPT和Zhipu Copilot的插件。

ONLYOFFICE Docs中的ChatGPT菜单

ChatGPT和Zhipu Copilot都可以通过单独的插件在ONLYOFFICE编辑器的界面中访问，这些插件可以通过插件管理器点击几下安装和删除。这些插件由ONLYOFFICE团队官方开发和维护。与所有其他插件一样，它们是免费的。

ONLYOFFICE插件管理器中的ChatGPT插件

要使这些插件工作，您需要指定相应平台提供的API密钥。对于ChatGPT，您可以在OpenAI帐户的设置中找到有效的API密钥。

OpenAI帐户设置中的API密钥部分

当您在ChatGPT插件中输入有效的API密钥并通过插件选项卡启用它时，您将通过上下文菜单访问以下功能，这使得处理文本更加容易：

根据您的提示生成文本内容；
创建不同分辨率的图像；
翻译成多种语言，包括英语、西班牙语、意大利语、中文、德语、法语等；
单词分析；
提取关键词；
文本摘要；
文本操作；
纠正拼写和语法错误；
与聊天机器人通信。

Zhipu Copilot插件在ONLYOFFICE Docs中提供类似的写作辅助功能，并针对中文用户设计，因为它基于本地化知识库。

在ONLYOFFICE Docs中，您不仅可以在文本文档中与ChatGPT服务交互，还可以在电子表格和演示文稿中交互，因此您可以执行各种任务，如数据分析和为幻灯片查找信息。

现在您知道ChatGPT和Zhipu copilot在处理办公文件时可以为您做什么，让我们更深入地了解ChatGPT插件，看看它是如何工作的以及其源代码包含哪些关键元素。

注意：ONLYOFFICE开发人员不对ChatGPT和Zhipu Copilot提供的信息的准确性或可靠性承担任何责任。

ChatGPT插件的结构

ChatGPT插件由五个目录组成，HTML文件单独存储在根目录中。以下是每个文件的快速概述及代码示例：

1. index.html

由于插件作为后台插件运行，它不需要用户界面。index.html文件引用所有脚本、代码文件和样式表，确保在插件激活时使用它们。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<head>
<meta charset="UTF-8" />
<title>OpenAI</title>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
<script type="text/javascript" src="scripts/desktop.js"></script>
<script type="text/javascript">
if (!/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.write("<script type='text\/javascript' src='vendor\/GPT-3-Encoder\/encoder.js'><\/script>");
document.write("<script type='text\/javascript' src='scripts\/code.js'><\/script>");
} else {
document.write("<script type='text\/javascript' src='scripts\/code_ie.js'><\/script>");
}
</script>
</head>

index.html文件标签内的代码

2. chat.html

此文件定义了当您在ChatGPT插件中选择聊天选项时出现的聊天框的HTML结构。

3. 其他HTML文件

根目录包含用于各种错误消息和日志的其他HTML文件。这些文件设计用于处理诸如令牌不足或无效请求等条件，以确保插件对不同场景做出适当响应。

资源目录概述

资源目录主要包括两个组件：用于不同模式的CSS样式和图像。

1. CSS子目录

包含styles.css和custom.css。两个样式表都将CSS应用于整个插件的各种组件。

2. 图像目录

第二个组件包括以下内容：

light包含为浅色主题编辑器优化的图像；
dark包含为深色主题编辑器优化的图像；
icons包括用于不同显示设置和主题的各种纵横比和大小的图标。

上述资源确保ChatGPT插件在不同编辑器主题和分辨率下良好运行。

脚本目录概述

code.js文件包含插件的核心逻辑，该插件集成了由OpenAI API支持的各种功能。让我们更详细地了解这个文件：

1. 初始化和设置

插件初始化变量，包括API密钥、模型设置和UI元素。 checkApiKey方法从本地存储检索OpenAI API密钥。

1
2
3
4
5
6
7
8


function checkApiKey() {
ApiKey = localStorage.getItem('OpenAIApiKey') || '';
if (!ApiKey.length) {
bHasKey = false;
} else {
bHasKey = true;
}
};

checkApiKey()方法的代码片段

2. 上下文菜单生成

getContextMenuItems()方法根据文档中选择的类型（例如，文本选择、图像、形状、超链接等）动态生成上下文菜单项。如果存在API密钥，则将拼写和语法纠正、文本重写、翻译和图像生成等附加选项添加到插件的上下文菜单中。此方法还包括检查文档中图像存在性和生成图像变体选项的逻辑。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


function getContextMenuItems(options) {
link = null;
checkApiKey();
let settings = {
guid: window.Asc.plugin.guid,
items: [
{
id : 'ChatGPT',
text : generateText('ChatGPT'),
items : [] 
}
]
};

getContextMenuItems()方法的代码片段

3. 事件处理

插件为上下文菜单操作附加事件处理程序。例如，onContextMenuShow()事件触发自定义上下文菜单的显示并执行其他检查，例如检索当前单词。 onSettings()事件处理程序在单击设置菜单项时打开设置模态对话框，等等。

4. 实用方法

辅助方法如generateText()用于文本翻译，showError()用于错误显示，以及isEmpyText()用于文本验证也包含在code.js文件中。 createSettings()方法创建一个显示令牌信息和设置按钮的UI容器。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function createSettings(text, tokens, type, isNoBlockedAction) {
let url;
let settings = {
model : model,
max_tokens : maxLen - tokens.length
};
if (settings.max_tokens < 100) {
console.error(new Error('This request is too big!'));
return;
}

createSettings()方法的代码片段

下一个文件是chat.js。它管理聊天框的逻辑，可以通过在文档中任意位置右键单击来初始化。它与chat.html文件结合工作，确保聊天框的结构和功能正确实现。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


function createMessage(text, type) {
let chat = document.getElementById('chat');
let message = type ? document.createElement('div') : document.getElementById('loading');
let textMes = document.createElement('span');
textMes.classList.add('form-control', 'span_message');
textMes.innerText = text;
chat.scrollTop = chat.scrollHeight;
if (type) {
message.classList.add('user_message');
chat.appendChild(message);
sendMessage(text);
} else {
message.id = '';
message.innerText = '';
}
message.appendChild(textMes);
};

chat.js文件中createMessage()方法的代码片段

现在谈谈settings.js文件。它管理插件的设置部分。这是用户输入其API密钥的地方。此文件还验证用户输入的API密钥。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function createError(error) {
document.getElementById('err_message').innerText = errMessage;
console.error(error.message || errMessage);
};

function createLoader() {
if (!window.Asc.plugin.theme)
window.Asc.plugin.theme = {type: 'light'};
$('#loader-container').removeClass( "hidden" );
loader && (loader.remove ? loader.remove() : $('#loader-container')[0].removeChild(loader));
loader = showLoader($('#loader-container')[0], loadMessage);
};

settings.js文件中createError()和createLoader()方法的代码片段

脚本目录中还有一些其他.js文件，主要包括用于错误提示的JavaScript（如之前在HTML部分所述）。此外，一些文件包含用于可能使用插件的不同环境（桌面版本、云版本等）的JavaScript触发器。

翻译目录

此目录包含用于不同语言的翻译文件，每个语言由一个.json文件表示。使用onTranslate()方法，插件检查此目录，识别与系统语言对应的文件并检索必要的翻译文本。

此机制确保插件可以动态适应各种语言，提供本地化和用户友好的体验。

vendor和licenses目录

vendor目录包含插件中使用的第三方库的代码和资源文件。此目录确保所有外部依赖项组织整齐且易于访问。

此目录有三个组件：

OpenAI（Chat GPT BPE编码器脚本）：这些脚本对于编码和解码GPT引擎返回的文本至关重要。
Select2库脚本：这是一个强大的库，通过提供可自定义的选择框来增强插件的用户界面，使插件更易于使用。
jQuery基础文件：jQuery简化了HTML文档遍历和操作、事件处理和动画，使UI更加动态和响应迅速。

这是ONLYOFFICE开发人员为其办公套件创建的ChatGPT插件的详细概述。如果您想详细探索插件的代码及其使用的方法，可以查看此GitHub页面。

使用相同的原则和ONLYOFFICE API，您可以为任何其他基于AI的写作助手构建插件，并在办公套件的界面中使用其功能。

探索AI与办公软件的无缝集成：ONLYOFFICE Docs的ChatGPT插件技术解析

本文深入探讨了如何将人工智能技术集成到办公软件中，通过ONLYOFFICE Docs的ChatGPT插件案例详细分析了技术架构、API集成、插件开发流程和代码实现细节，为开发者提供了实用的技术参考。