投稿
  1. Web176教程首页
  2. 资讯
  3. 办公

如何将人工智能融入办公软件：ONLYOFFICE Docs 案例研究

terry • • 办公 • 阅读 150

随着人工智能在我们的生活中深入扎根并使我们更容易做很多事情，越来越多的软件开发商、IT 公司和初创企业正在寻找将最先进的人工智能技术融入其产品的方法，以超越竞争对手

许多现代 CRM 平台、电子邮件客户端、个人助理、视频编辑器、项目管理程序和其他类型的软件工具现在都配备了 AI 助手，使用户能够更快地工作、提高工作效率。

办公软件也不例外。过去几年，将人工智能融入电子文档工作流程的想法已经赢得了办公软件开发人员的青睐，现在有几个有趣的集成案例极大地改变了人们处理办公文件的方式。

在本文中，我们将看看人工智能与办公软件共生的最成功案例，并通过开源办公套件 ONLYOFFICE Docs 的示例来研究将 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。微软 Office 在中国的竞争对手 WPS Office 有一个名为 WPS AI 的 AI 助手。它是一种生成式 AI 工具，允许用户生成文本内容、总结大型文档、分析数据、从 PDF 中提取大纲以及创建会议草稿。WPS AI 可用于文本文档和 PDF 文件，并提供具有有限功能的免费试用版。要访问其全部功能，您需要购买付费版本之一。
  • Google Workspace。谷歌公司为其生产力应用程序提供了一个名为 Gemini 的 AI 助手。该工具内置于文档、表格和幻灯片中，可让您编写各种内容并在文本文档中生成图像、在电子表格中创建表格和公式，以及在演示文稿中使用图像和内容生成新幻灯片。Gemini for Google Workspace 可作为付费插件使用。有趣的是，Google Workspace Marketplace 还提供由第三方开发人员为文档、表格和幻灯片开发的不同 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 案例研究

ONLYOFFICE Docs 中的 ChatGPT 菜单

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

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

如何将人工智能融入办公软件：ONLYOFFICE Docs 案例研究

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

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

Zhipu Copilot 插件提供了与 ONLYOFFICE Docs 类似的写作辅助功能，并且基于本地化知识库，专为中文用户设计。

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

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

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

ChatGPT 插件的结构

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

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

<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 文件 <head> 标签内的代码

2. chat.html：此文件定义了在 ChatGPT 插件中选择聊天选项时出现的聊天框的 HTML 结构。

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

资源目录概述

资源目录主要包含两部分：CSS样式和不同模式的图像。

1. CSS 子目录：包含styles.css和custom.css。两个样式表都将CSS应用于插件中的各个组件。

2. 图像目录：第二个组件包括以下内容：

  • light包含针对光主题编辑器优化的图像；
  • dark包含针对深色主题编辑器优化的图像；
  • 图标包括各种宽高比和大小的图标，适用于不同的显示设置和主题。

这些上述资源确保 ChatGPT 插件能够在不同的编辑器主题和分辨率下正常运行。

脚本目录概述

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

1.初始化和设置：

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

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

checkApiKey() 方法的代码片段

2. 上下文菜单生成：

  • getContextMenuItems ()方法根据文档中的选择类型（例如，文本选择、图像、形状、超链接等）动态生成上下文菜单项。
  • 如果存在 API 密钥，则会将拼写和语法校正、文本重写、翻译和图像生成等附加选项添加到插件的上下文菜单中。
  • 该方法还包括检查文档中是否存在图像的逻辑和生成图像变化的选项。
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.实用方法：

  • code.js 文件中还包含用于文本翻译的generateText() 、用于错误显示的showError()和用于文本验证的isEmpyText()等辅助方法。
  • createSettings ()方法创建一个显示令牌信息和设置按钮的 UI 容器。
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文件配合使用，以确保聊天框的结构和功能得到正确实现。

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 密钥。

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() 方法的代码片段

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

翻译目录

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

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

如何将人工智能融入办公软件：ONLYOFFICE Docs 案例研究

翻译目录中的文件结构

供应商和许可证目录

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

如何将人工智能融入办公软件：ONLYOFFICE Docs 案例研究

供应商和许可证目录中的文件结构

该目录有三个部分：

1. OpenAI（聊天 GPT BPE 编码器脚本）：这些脚本对于编码和解码 GPT 引擎返回的文本至关重要。

如何将人工智能融入办公软件：ONLYOFFICE Docs 案例研究

2. Select2 库脚本：这是一个强大的库，通过提供可定制的选择框来增强插件的用户界面，使插件更易于使用。

如何将人工智能融入办公软件：ONLYOFFICE Docs 案例研究

3. jQuery 基础文件：jQuery 简化了 HTML 文档的遍历和操作、事件处理和动画，使 UI 更加动态和响应更快。

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

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

作者：terry，如若转载，请注明出处：https://www.web176.com/news/office/28413.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2024年8月19日
下一篇 2024年8月29日

相关推荐

发表回复

登录后才能评论