Grammar Check SDK
Overview
The TrinkaSDK will consist of two main components: TrinkaJS and a Trinka SDK backend. TrinkaJS will establish a connection to the Trinka SDK backend via WebSocket.
Clients will be able to integrate the TrinkaSDK backend's logic into their own backend systems, utilizing their own authentication mechanisms.
The TrinkaSDK Backend will accept paragraphs as input through its WebSocket connection and forward this input to a Paragraph API, utilizing a API key for secure communication.
Before utilizing the Trinka SDK, a API key must be provisioned.
Visit the Developer Portal on Trinka.ai. If you are an existing user, sign in and generate an API key.
HTML Quickstart
Here's a minimal webpage using the Trinka SDK.
<html>
<head>
<script src="https://cdn.trinka.ai/trinka-js-sdk/v3.1/trinka-grammar.js"></script>
</head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f9fa;
}
#editor-space {
height: 500px;
width: 600px;
border: 1px solid #ced4da;
padding: 10px;
font-size: 16px;
line-height: 1.5;
overflow-y: auto;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
outline: none;
}
#editor-space:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
</style>
<body>
<div contenteditable="true" id="editor-space">Lets get
started!</div>
<script type="text/javascript">
const contentEditable = document.getElementById('editor-space');
let trinkaObj = new Trinka({
socketEndpoint: 'ws://localhost:3000',
languagepref: 'US', filtering: {
grammar: true,
spelling: true,
enhancement: true,//false will disable the alert
advisor: true
}
});
//e.g wss://trinka.ai
</script>
</body>
</html>
The above HTML initializes the SDK with default Trinka configurations.
Trinka Configuration
Language Preference​
In our system, we have the option to configure language preferences according to the user's needs. Specifically, we can cater to both American and British English language preferences. This flexibility allows us to better serve users from different regions and with different dialect preferences, thereby enhancing their user experience.
Please find an illustrative example provided below for further clarity.
let trinkaObj = new Trinka({languagepref: 'US'}); // or pass 'UK'
Alert Color Coding Configuration​
If you're interested in customizing the appearance of your alerts by changing their color, we have made this process quite straightforward for you. We offer a set of configurations that allow you to easily modify the color scheme of the alerts to match your personal preferences. This means you have the freedom to choose the colors that best suit your style or the aesthetic of your platform. So, whether you want a bold, bright color to grab users' attention or a more muted tone for a subtle notification, our configuration options have got you covered.
Please find an illustrative example provided below for further clarity.
borderColorCoding: {
spelling: {
borderColor: "#e10000",// Border color
bgColor: "#ff0000",// Heighlight background color
opacity: 25,
},
grammar: {
borderColor: "#e10000",
bgColor: "#ff0000",
opacity: 25
},
enhancement: {
borderColor: "#e10000",
bgColor: "#ff0000",
opacity: 25
},
advisor: {
borderColor: "#e10000",
bgColor: "#ff0000",
opacity: 25
}
}
Customizing Alert Filters​
Our solution offers a high degree of customization to ensure that the alerts you receive are perfectly tailored to your needs. You have the ability to configure the alerts to your liking, whether you're more focused on receiving notifications about spelling issues, or you're interested in getting enhancement alerts to improve your writing. This flexible system has been designed to adapt to your specific requirements. By providing its configuration, you can set up the system in a way that best suits you. We understand that everyone's needs and preferences can vary greatly, which is why we have made it as easy as possible for you to configure the SDK to match your expectations and requirements.
Please find an illustrative example provided below for further clarity.
filtering: {
grammar: true,
spelling: true,
enhancement: false,//false will disable the alert
advisor: true
}
Class List​
Provide a comma-separated list of the classes for which Trinka JS processing checks should be enabled.
classList: ["element1", "element2"]
Setup server-side Code - NodeJS example
To set up the server-side code, first, verify that the server's Node version is greater than 12.
Once you have successfully downloaded the zip file, you will find that it contains a couple of critical files. Specifically, there are two important files within this folder that you should take note of. The first is the server.
js file, which is crucial for running our server operations. The second one is the package.json
file, which is a manifest file that includes metadata about the project, such as the project's name, version, and dependencies. These files are both integral to the functioning of the project.
Open that folder in terminal and run the below commands.
npm install
Above command install the dependencies inside node_module
folder which will help to run the project on the server.
server.js​
This file contains code that initiates both the node server and the web socket server.
const express = require('express');
const { WebSocketServer } = require('ws');
const http = require('http');
const axios = require('axios'); // Import Axios
// Create an Express application
const app = express();
// Create an HTTP server from the Express app
const server = http.createServer(app);
// Create a WebSocket server
const wss = new WebSocketServer({ noServer: true });
wss.on('connection', function connection(ws, request) {
console.log('A new client connected.');
ws.on('message', function message(data) {
console.log('received: %s', data);
forwardDataToApi(data, ws)
});
ws.on('close', function close() {
console.log('A client disconnected.');
});
ws.send('Welcome to the WebSocket server!');
});
// Handle the upgrade of the connection to WebSocket
server.on('upgrade', function upgrade(request, socket, head) {
const validateConnection = (req) => {
const url = new URL(req.url, `http://${req.headers.host}`);
const token = url.searchParams.get('token');
return token === 'validToken'; // Placeholder validation logic
};
if (validateConnection(request)) {
wss.handleUpgrade(request, socket, head, function done(ws) {
wss.emit('connection', ws, request);
});
} else {
socket.destroy();
}
});
// Define the API endpoint and API key
const API_ENDPOINT = 'https://api-platform.trinka.ai/api/v2/plugin/check/paragraph';
const API_KEY = '<API-KEY>';
// Function to forward data to another API
async function forwardDataToApi(data, ws) {
try {
let requestPayLoad = JSON.parse(data);
payload = {
"paragraph": requestPayLoad.text.toString(),
"language": requestPayLoad.language_pref,
"is_sensitive_data": true,
"request_id": requestPayLoad.request_id,
"isSDK": true
}
const response = await axios.post(API_ENDPOINT, payload, {
headers: {
'Content-Type': 'application/json',
'x-api-key': `${API_KEY}`
}
});
console.log('Data forwarded to API:', response);
ws.send(JSON.stringify(response.data));
} catch (error) {
console.error('Error forwarding data to API:', error.response?.data || error.message);
}
}
// Start the server
const PORT = process.env.PORT || 3000;
server.listen(PORT, function() {
console.log(`Server is listening on http://localhost:${PORT}`);
});
Replace the placeholder <API_KEY>
with the actual values. For more information about the paragraph API, visit the developer portal or contact the TrinkaAI team at support@trinka.ai.
The application is initially configured to begin operations on port 3000
. However, if needed, the port number can be altered directly within the code to suit specific requirements. Once the application is ready and fully functional, it is crucial to host it on a server. This hosting process involves assigning a domain to the application, thereby making it accessible over the internet. This step is vital as it allows users to access the application from any location, offering a seamless user experience.
Once application is hosted on the internet. we need that end to initialise the application.
let trinkaObj = new Trinka({socketEndpoint: '<SERVER-APPLICATION-ENDPOINT>'});
//e.g. wss://www.trinka.ai
This implementation, which involves similar concepts and procedures, can be replicated across various programming languages. Moreover, it can also be smoothly integrated into your existing backend application. This offers a high degree of flexibility as you can choose the most suitable programming language or existing infrastructure for your specific needs. If you encounter any issues or need assistance during the implementation process, you can reach out to the Trinka Team. Our team is always ready to provide the necessary support and guide you through any challenges you may face.