the ONLYOFFICE Docs case study

With artificial intelligence taking deep roots spherical our lives and making it less complicated for us to do numerous points, more and more extra software program program builders, IT companies and start-ups are looking for strategies to mix state-of-the-art AI experience into their merchandise to get the soar over their rivals.

Many fashionable CRM platforms, e mail buyers, personal assistants, video editors, mission administration packages and completely different sorts of software program program devices now come equipped with AI assistants allowing their prospects to work faster and be additional productive.

Office software program program won’t be an exception. The considered integrating artificial intelligence into digital doc workflows has been profitable the minds of office software program program builders over the previous few years and now there are a variety of attention-grabbing integration examples that significantly change one of the simplest ways people work with office recordsdata.

On this text, we’re going to try basically probably the most worthwhile examples of symbiosis between artificial intelligence and office software program program, and examine the strategy of integrating an AI assistant into an office package deal deal by the use of the occasion of ONLYOFFICE Docs, an open-source office suite.

AI and office software program program: most interesting integration examples

The market of office software program program is extraordinarily aggressive, and it’s an evident proven fact that crucial firms on a regular basis have a bonus over completely different avid gamers. Nonetheless, even small companies and unbiased builders can provide you elegant choices bringing the ability of artificial intelligence into the universe of doc enhancing and collaboration. 

This is a quick overview of among the many hottest office packages with built-in AI assistants on the market accessible available on the market:

• Microsoft 365. The Redmond massive provided its private AI software program typically referred to as Copilot in March 2023. It combines the ability of big language fashions (LLMs) and makes it less complicated for patrons to work with the Microsoft 365 apps, along with Teams, Outlook and Edge. Copilot is deeply built-in into the Microsoft ecosystem and means which you can write and edit textual content material content material materials in Phrase, analyze traits and create full data visualizations in Excel, and create spectacular exhibits based in your prompts in PowerPoint. Copilot for Microsoft 365 is obtainable with a paid subscription.
• WPS Office. Microsoft Office’s competitor from China, WPS Office, has an AI assistant referred to as WPS AI. It’s a generative AI software program that permits prospects to generate textual content material content material materials, summarize big paperwork, analyze data, extract outlines from PDFs and create meeting drafts. WPS AI may be utilized in textual content material paperwork and PDF recordsdata and gives a free trial with a restricted set of choices. To entry its full efficiency, you will need to purchase one in every of many paid variations.
• Google Workspace. The Google firm has an AI-powered assistant for its productiveness apps referred to as Gemini. This software program is constructed into Docs, Sheets and Slides allowing you to jot down diversified types of content material materials and generate pictures in textual content material paperwork, create tables and formulation in spreadsheets, and generate new slides with pictures and content material materials in exhibits. Gemini for Google Workspace is obtainable as a paid add-on. Apparently, the Google Workspace Market moreover gives completely completely different AI assistants developed by third-party builders for Docs, Sheets and Slides nonetheless it is best to try them at your particular person hazard.
• Zoho WorkDrive. This on-line content material materials collaboration platform and storage has an IA integration attribute referred to as Zia. It’s an AI-based writing assistant on the market in some Zoho merchandise, along with Zoho Creator. Using Zia, you probably can check your content material materials for spelling and grammar errors and improve its readability. The first purpose of this software program is that may show you how to write concisely and clearly. Zia can even generate new content material materials and photos. It’s not on the market completely free.

Taking each little factor into consideration, the following conclusion seems evident: the popular office suites current great AI integration selections nonetheless just about all of them are paid.

Now let’s uncover the case of ONLYOFFICE Docs, an open-source office package deal deal, that offers sturdy AI capabilities based on ChatGPT and uncover how this integration works.

ONLYOFFICE Docs and AI: a fast overview

ONLYOFFICE Docs is an open-source and free office suite for textual content material paperwork, spreadsheets, exhibits, fillable sorts and PDF recordsdata. The suite has a self-hosted mannequin for native deployment and a cloud-based mannequin for a quick start. There could also be moreover a desktop shopper for Linux, Residence home windows and macOS and cell apps for Android and iOS. The provision code of the ONLYOFFICE suite is obtainable on GitHub.

ONLYOFFICE Docs has an open API, which makes it attainable to mix the editors with third-party firms. Such integrations work by the use of plugins, specific add-ons that carry new capabilities and choices. Amongst dozens of ready-to-use plugins for the ONLYOFFICE suite, you’ll uncover individuals who permit the ability of artificial intelligence. Additional precisely, these are the plugins for ChatGPT and Zhipu Copilot. 

Every ChatGPT and Zhipu Copilot are accessible inside the ONLYOFFICE editor’s interface by the use of separate plugins which may be put in and deleted with just some clicks by the use of the Plugin Supervisor. These plugins are formally developed and maintained by the ONLYOFFICE group. As all completely different plugins, they’re on the market completely free.

To make these plugins work, you will need to specify an API key provided by the corresponding platform. With regards to ChatGPT, you’ll uncover a sound API key inside the settings of your OpenAI account. 

Should you enter a sound API key inside the ChatGPT plugin and permit it by the use of the Plugins tab, you may have entry to the following choices by the use of the context menu, which makes it less complicated to work with texts*:

• Period of textual content material content material materials based in your prompts;
• Creation of pictures in a number of resolutions;
• Translation to a variety of languages, along with English, Spanish, Italian, Chinese language language, German, French, and so forth.;
• Phrase analysis;
• Extraction of key phrases;
• Textual content material summarization;
• Textual content material manipulation;
• Correction of spelling and grammar errors;
• Communication with the chatbot.

The Zhipu Copilot plugin provides associated writing assist choices in ONLYOFFICE Docs and is designed for Chinese language language-speaking prospects because of it’s based on a localized information base.

In ONLYOFFICE Docs, you probably can work along with the ChatGPT service not solely in textual content material paperwork however moreover in spreadsheets and exhibits, so that you probably can perform diversified duties harking back to data analysis and discovering information to your slides.

Now that you just already know what ChatGPT and Zhipu copilot can do for you for those who work on office recordsdata, let’s take a deeper check out the ChatGPT plugin to see the best way it really works and what key parts its provide code comprises.

Remember: the ONLYOFFICE builders assume no accountability for the accuracy or reliability of the information provided by ChatGPT and ZhiPu Copilot.

Development of the ChatGPT plugin

The ChatGPT plugin consists of 5 directories, with the HTML recordsdata saved individually inside the root itemizing. This is a quick overview of each file with code samples:

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

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

doc.write("");
]]>
doc.write("");
]]>
} else {

doc.write("");
]]>
}

Code contained within the tag of index.html file

2. chat.html: This file defines the HTML building for the chatbox that appears once you select the chat chance inside the ChatGPT plugin.

3. Totally different HTML recordsdata: The idea itemizing incorporates additional HTML recordsdata for diverse error messages and logs. These recordsdata are designed to cope with circumstances harking back to insufficient tokens or invalid requests, to make sure the plugin responds appropriately to completely completely different eventualities.

Overview of the sources itemizing

The sources itemizing primarily consists of two parts: CSS sorts and photos for numerous modes.

1. CSS Sub-directory: This incorporates sorts.css and personalized.css. Every stylesheets apply CSS to quite a few parts all by means of the plugin.

2. Image Directories: The second half comprises the following:

• mild incorporates pictures optimized for light-themed editors;
• darkish incorporates pictures optimized for dark-themed editors;
• icons comprises icons in diversified side ratios and sizes for numerous present settings and themes.

These above-mentioned sources make sure that the ChatGPT plugin capabilities correctly all through completely completely different editor themes and resolutions.

Overview of the scripts itemizing

The code.js file incorporates the core logic for the plugin that integrates diversified functionalities powered by the OpenAI API. Let’s bear this file in further aspect:

1. Initialization and Setup:

• The plugin initializes variables, along with an API key, model settings, and UI parts.
• The checkApiKey methodology retrieves the OpenAI API key from native storage.

function checkApiKey() {

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

if (!ApiKey.dimension) {

bHasKey = false;

} else {

bHasKey = true;

}

};

A code snippet from checkApiKey() methodology

2. Context Menu Period:

• The getContextMenuItems() methodology dynamically generates context menu objects based on the type of selection inside the doc (e.g., textual content material selection, pictures, shapes, hyperlinks, and so forth.).
• If the API key's present, additional selections like spelling and grammar correction, textual content material rewriting, translation, and movie period are added to the context menu of the plugin.
• This system moreover contains a logic to check for the presence of pictures inside the doc and an chance for producing image variations.

function getContextMenuItems(selections) {

hyperlink = null;

checkApiKey();

let settings = {

guid: window.Asc.plugin.guid,

objects: [

{

id : 'ChatGPT',

text : generateText('ChatGPT'),

items : [] 

}

]

};

A code snippet from getContextMenuItems() methodology

3. Event Coping with:

• The plugin attaches event handlers for context menu actions. As an illustration, the onContextMenuShow() event triggers the present of the personalized context menu and performs additional checks, harking back to retrieving the current phrase.
• The onSettings() event handler opens a settings modal dialogue when the settings menu merchandise is clicked, and additional.

4. Utility Methods:

• Helper methods like generateText() for textual content material translation, showError() for error present, and isEmpyText() for textual content material validation are included inside the code.js file as correctly.
• The createSettings() methodology creates a UI container displaying token information and a settings button.

function createSettings(textual content material, tokens, sort, isNoBlockedAction) {

let url;

let settings = {

model : model,

max_tokens : maxLen - tokens.dimension

};

if (settings.max_tokens 
console.error(new Error('This request is just too massive!'));

return;

}

A code snippet from createSettings() methodology

The next file is chat.js. It manages the logic for the chatbox, which could possibly be initialized by right-clicking anyplace inside the doc. It actually works along with the chat.html file to ensure the chatbox’s building and efficiency are carried out precisely.

function createMessage(textual content material, 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 material;

chat.scrollTop = chat.scrollHeight;

if (sort) {

message.classList.add('user_message');

chat.appendChild(message);

sendMessage(textual content material);

} else {

message.id = '';

message.innerText="";

}

message.appendChild(textMes);

};

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

Now just some phrases regarding the settings.js file. It manages the settings a part of the plugin. That's the place prospects enter their API keys. This file moreover validates the API key entered by the particular person.

function createError(error)  errMessage);

;

function createLoader() {

if (!window.Asc.plugin.theme)

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

$('#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() methods from the settings.js file

There are moreover one other .js recordsdata inside the scripts itemizing that primarily embody JavaScript for error prompts (as talked about earlier inside the HTML half). Furthermore, some recordsdata comprise JavaScript triggers for numerous environments the place the plugin could possibly be used (desktop mannequin, cloud mannequin, and so forth.).

Translations itemizing

This itemizing incorporates translation recordsdata for numerous languages, each represented by a .json file. Using the onTranslate() methodology, the plugin checks this itemizing, identifies the file akin to the system’s language and retrieves the obligatory translated textual content material.

This mechanism ensures that the plugin can dynamically adapt to quite a few languages, providing a localized and user-friendly experience.

The vendor and the licenses itemizing

The vendor itemizing houses the code and helpful useful resource recordsdata for the third-party libraries used inside the plugin. This itemizing ensures that every one exterior dependencies are neatly organized and easily accessible. 

This itemizing has three parts:

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

2. Select2 Library Scripts: it's a extremely efficient library that enhances the plugin’s particular person interface by providing customizable select packing containers, making the plugin less complicated to utilize.

3. jQuery Base File: jQuery simplifies HTML doc traversal and manipulation, event coping with, and animation, making the UI additional dynamic and responsive.

This was an in depth overview of the ChatGPT plugin created by the ONLYOFFICE builders for his or her office suite. Should you want to uncover the plugin’s code intimately and the methods it makes use of, you probably can take a loot at this GitHub net web page.

Using the similar concepts and the ONLYOFFICE API, you probably can assemble a plugin for one more AI-based writing assistant and use its capabilities all through the interface of an office suite.