the ONLYOFFICE Docs case examine

With synthetic intelligence taking deep roots round our lives and making it simpler for us to do a whole lot of issues, an increasing number of software program builders, IT firms and start-ups are in search of methods to combine state-of-the-art AI expertise into their merchandise to get the soar over their rivals.

Many trendy CRM platforms, e-mail shoppers, private assistants, video editors, venture administration applications and different kinds of software program instruments now come outfitted with AI assistants permitting their customers to work sooner and be extra productive.

Workplace software program shouldn’t be an exception. The concept of integrating synthetic intelligence into digital doc workflows has been successful the minds of workplace software program builders over the previous couple of years and now there are a number of attention-grabbing integration examples that considerably change the best way individuals work with workplace recordsdata.

On this article, we are going to check out probably the most profitable examples of symbiosis between synthetic intelligence and workplace software program, and look at the method of integrating an AI assistant into an workplace package deal via the instance of ONLYOFFICE Docs, an open-source workplace suite.

AI and workplace software program: greatest integration examples

The market of workplace software program is extremely aggressive, and it’s an evident incontrovertible fact that the largest companies all the time have a bonus over different gamers. Nonetheless, even small firms and unbiased builders can give you elegant options bringing the ability of synthetic intelligence into the universe of doc enhancing and collaboration. 

Here’s a fast overview of a number of the hottest workplace packages with built-in AI assistants accessible available on the market:

• Microsoft 365. The Redmond big introduced its personal AI instrument referred to as Copilot in March 2023. It combines the ability of huge language fashions (LLMs) and makes it simpler for customers to work with the Microsoft 365 apps, together with Groups, Outlook and Edge. Copilot is deeply built-in into the Microsoft ecosystem and lets you write and edit textual content content material in Phrase, analyze tendencies and create complete knowledge visualizations in Excel, and create spectacular displays based mostly in your prompts in PowerPoint. Copilot for Microsoft 365 is offered with a paid subscription.
• WPS Workplace. Microsoft Workplace’s competitor from China, WPS Workplace, has an AI assistant referred to as WPS AI. It’s a generative AI instrument that permits customers to generate textual content content material, summarize massive paperwork, analyze knowledge, extract outlines from PDFs and create assembly drafts. WPS AI can be utilized in textual content paperwork and PDF recordsdata and gives a free trial with a restricted set of options. To entry its full performance, that you must buy one of many paid variations.
• Google Workspace. The Google company has an AI-powered assistant for its productiveness apps referred to as Gemini. This instrument is constructed into Docs, Sheets and Slides permitting you to write down numerous sorts of content material and generate photos in textual content paperwork, create tables and formulation in spreadsheets, and generate new slides with photos and content material in displays. Gemini for Google Workspace is offered as a paid add-on. Curiously, the Google Workspace Market additionally gives completely different AI assistants developed by third-party builders for Docs, Sheets and Slides however you need to attempt them at your individual danger.
• Zoho WorkDrive. This on-line content material collaboration platform and storage has an IA integration function referred to as Zia. It’s an AI-based writing assistant accessible in some Zoho merchandise, together with Zoho Author. Utilizing Zia, you’ll be able to examine your content material for spelling and grammar errors and enhance its readability. The primary goal of this instrument is that will help you write concisely and clearly. Zia can also generate new content material and pictures. It’s not accessible without cost.

Taking every part into consideration, the next conclusion appears evident: the most well-liked workplace suites present wonderful AI integration choices however virtually all of them are paid.

Now let’s discover the case of ONLYOFFICE Docs, an open-source workplace package deal, that gives strong AI capabilities based mostly on ChatGPT and uncover how this integration works.

ONLYOFFICE Docs and AI: a short overview

ONLYOFFICE Docs is an open-source and free workplace suite for textual content paperwork, spreadsheets, displays, fillable kinds and PDF recordsdata. The suite has a self-hosted model for native deployment and a cloud-based model for a fast begin. There may be additionally a desktop shopper for Linux, Home windows and macOS and cellular apps for Android and iOS. The supply code of the ONLYOFFICE suite is offered on GitHub.

ONLYOFFICE Docs has an open API, which makes it attainable to combine the editors with third-party providers. Such integrations work through plugins, particular add-ons that deliver new capabilities and options. Amongst dozens of ready-to-use plugins for the ONLYOFFICE suite, you will discover people who allow the ability of synthetic intelligence. Extra exactly, these are the plugins for ChatGPT and Zhipu Copilot. 

Each ChatGPT and Zhipu Copilot are accessible within the ONLYOFFICE editor’s interface through separate plugins that may be put in and deleted with a couple of clicks through the Plugin Supervisor. These plugins are formally developed and maintained by the ONLYOFFICE workforce. As all different plugins, they’re accessible without cost.

To make these plugins work, that you must specify an API key supplied by the corresponding platform. In the case of ChatGPT, you will discover a legitimate API key within the settings of your OpenAI account. 

Whenever you enter a legitimate API key within the ChatGPT plugin and allow it through the Plugins tab, you’ll have entry to the next options through the context menu, which makes it simpler to work with texts*:

• Era of textual content content material based mostly in your prompts;
• Creation of photos in numerous resolutions;
• Translation to a number of languages, together with English, Spanish, Italian, Chinese language, German, French, and so on.;
• Phrase evaluation;
• Extraction of key phrases;
• Textual content summarization;
• Textual content manipulation;
• Correction of spelling and grammar errors;
• Communication with the chatbot.

The Zhipu Copilot plugin gives related writing help options in ONLYOFFICE Docs and is designed for Chinese language-speaking customers as a result of it’s based mostly on a localized information base.

In ONLYOFFICE Docs, you’ll be able to work together with the ChatGPT service not solely in textual content paperwork but in addition in spreadsheets and displays, so you’ll be able to carry out numerous duties resembling knowledge evaluation and discovering data in your slides.

Now that you understand what ChatGPT and Zhipu copilot can do for you if you work on workplace recordsdata, let’s take a deeper have a look at the ChatGPT plugin to see the way it works and what key components its supply code contains.

Notice: the ONLYOFFICE builders assume no accountability for the accuracy or reliability of the knowledge supplied by ChatGPT and ZhiPu Copilot.

Construction of the ChatGPT plugin

The ChatGPT plugin consists of 5 directories, with the HTML recordsdata saved individually within the root listing. Here’s a fast overview of every file with code samples:

1. index.html: Because the plugin operates as a background plugin, it doesn’t require a consumer interface. The index.html file references all of the scripts, code recordsdata, and stylesheets, guaranteeing they’re utilized when the plugin is activated.

<head>

<meta charset="UTF-8" />

<title>OpenAI</title>

<script sort="textual content/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>

<script sort="textual content/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>

<hyperlink rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

<script sort="textual content/javascript" src="https://www.sitepoint.com/artificial-intelligence-into-office-software-with-onlyoffice-docs/scripts/desktop.js"></script>

<script sort="textual content/javascript">

if (!/MSIE d|Trident.*rv:/.check(navigator.userAgent)) {

doc.write("<script sort="textual content/javascript" src="https://www.sitepoint.com/artificial-intelligence-into-office-software-with-onlyoffice-docs/vendor/GPT-3-Encoder/encoder.js"></script>");

doc.write("<script sort="textual content/javascript" src="https://www.sitepoint.com/artificial-intelligence-into-office-software-with-onlyoffice-docs/scripts/code.js"></script>");

} else {

doc.write("<script sort="textual content/javascript" src="https://www.sitepoint.com/artificial-intelligence-into-office-software-with-onlyoffice-docs/scripts/code_ie.js"></script>");

}

</script>

</head>

Code contained in the <head> tag of index.html file

2. chat.html: This file defines the HTML construction for the chatbox that seems when you choose the chat choice within the ChatGPT plugin.

3. Different HTML recordsdata: The foundation listing comprises further HTML recordsdata for numerous error messages and logs. These recordsdata are designed to deal with circumstances resembling inadequate tokens or invalid requests, to verify the plugin responds appropriately to completely different eventualities.

Overview of the assets listing

The assets listing primarily includes two parts: CSS types and pictures for various modes.

1. CSS Sub-directory: This comprises types.css and customized.css. Each stylesheets apply CSS to varied parts all through the plugin.

2. Picture Directories: The second part contains the next:

• gentle comprises photos optimized for light-themed editors;
• darkish comprises photos optimized for dark-themed editors;
• icons contains icons in numerous facet ratios and sizes for various show settings and themes.

These above-mentioned assets be certain that the ChatGPT plugin capabilities properly throughout completely different editor themes and resolutions.

Overview of the scripts listing

The code.js file comprises the core logic for the plugin that integrates numerous functionalities powered by the OpenAI API. Let’s undergo this file in additional element:

1. Initialization and Setup:

• The plugin initializes variables, together with an API key, mannequin settings, and UI components.
• The checkApiKey methodology retrieves the OpenAI API key from native storage.

perform checkApiKey() {

ApiKey = localStorage.getItem('OpenAIApiKey') || '';

if (!ApiKey.size) {

bHasKey = false;

} else {

bHasKey = true;

}

};

A code snippet from checkApiKey() methodology

2. Context Menu Era:

• The getContextMenuItems() methodology dynamically generates context menu gadgets based mostly on the kind of choice within the doc (e.g., textual content choice, photos, shapes, hyperlinks, and so on.).
• If the API secret’s current, further choices like spelling and grammar correction, textual content rewriting, translation, and picture technology are added to the context menu of the plugin.
• This methodology additionally features a logic to examine for the presence of photos within the doc and an choice for producing picture variations.

perform getContextMenuItems(choices) {

hyperlink = null;

checkApiKey();

let settings = {

guid: window.Asc.plugin.guid,

gadgets: [

{

id : 'ChatGPT',

text : generateText('ChatGPT'),

items : [] 

}

]

};

A code snippet from getContextMenuItems() methodology

3. Occasion Dealing with:

• The plugin attaches occasion handlers for context menu actions. For instance, the onContextMenuShow() occasion triggers the show of the customized context menu and performs further checks, resembling retrieving the present phrase.
• The onSettings() occasion handler opens a settings modal dialogue when the settings menu merchandise is clicked, and extra.

4. Utility Strategies:

• Helper strategies like generateText() for textual content translation, showError() for error show, and isEmpyText() for textual content validation are included within the code.js file as properly.
• The createSettings() methodology creates a UI container displaying token data and a settings button.

perform createSettings(textual content, tokens, sort, isNoBlockedAction) {

let url;

let settings = {

mannequin : mannequin,

max_tokens : maxLen - tokens.size

};

if (settings.max_tokens < 100) {

console.error(new Error('This request is simply too large!'));

return;

}

A code snippet from createSettings() methodology

The following file is chat.js. It manages the logic for the chatbox, which might be initialized by right-clicking wherever within the doc. It really works together with the chat.html file to make sure the chatbox’s construction and performance are applied accurately.

perform createMessage(textual content, sort) {

let chat = doc.getElementById('chat');

let message = sort ? doc.createElement('div') : doc.getElementById('loading');

let textMes = doc.createElement('span');

textMes.classList.add('form-control', 'span_message');

textMes.innerText = textual content;

chat.scrollTop = chat.scrollHeight;

if (sort) {

message.classList.add('user_message');

chat.appendChild(message);

sendMessage(textual content);

} else {

message.id = '';

message.innerText="";

}

message.appendChild(textMes);

};

Code snippet of the createMessage() methodology from the chat.js file

Now a couple of phrases in regards to the settings.js file. It manages the settings part of the plugin. That is the place customers enter their API keys. This file additionally validates the API key entered by the consumer.

perform createError(error)  errMessage);

;

perform createLoader() {

if (!window.Asc.plugin.theme)

window.Asc.plugin.theme = {sort: 'gentle'};

$('#loader-container').removeClass( "hidden" );

loader && (loader.take away ? loader.take away() : $('#loader-container')[0].removeChild(loader));

loader = showLoader($('#loader-container')[0], loadMessage);

};

Code snippets of createError() and createLoader() strategies from the settings.js file

There are additionally another .js recordsdata within the scripts listing that primarily embody JavaScript for error prompts (as talked about earlier within the HTML part). Moreover, some recordsdata include JavaScript triggers for various environments the place the plugin could be used (desktop model, cloud model, and so on.).

Translations listing

This listing comprises translation recordsdata for various languages, every represented by a .json file. Utilizing the onTranslate() methodology, the plugin checks this listing, identifies the file akin to the system’s language and retrieves the required translated textual content.

This mechanism ensures that the plugin can dynamically adapt to varied languages, offering a localized and user-friendly expertise.

The seller and the licenses listing

The seller listing homes the code and useful resource recordsdata for the third-party libraries used within the plugin. This listing ensures that each one exterior dependencies are neatly organized and simply accessible. 

This listing has three parts:

1. OpenAI (Chat GPT BPE Encoder Scripts): these scripts are important for encoding and decoding the textual content returned by the GPT engine.

2. Select2 Library Scripts: it is a highly effective library that enhances the plugin’s consumer interface by offering customizable choose containers, making the plugin simpler to make use of.

3. jQuery Base File: jQuery simplifies HTML doc traversal and manipulation, occasion dealing with, and animation, making the UI extra dynamic and responsive.

This was an in depth overview of the ChatGPT plugin created by the ONLYOFFICE builders for his or her workplace suite. If you wish to discover the plugin’s code intimately and the strategies it makes use of, you’ll be able to take a loot at this GitHub web page.

Utilizing the identical rules and the ONLYOFFICE API, you’ll be able to construct a plugin for some other AI-based writing assistant and use its capabilities inside the interface of an workplace suite.