Forem: Karan Rathod

[This is a great read!]

Karan Rathod — Wed, 18 Feb 2026 11:37:07 +0000

Speed vs Control: The Structural Conflict Inside Enterprise Application Development

Nigel Tape ・ Feb 4

#enterprise #compliance #internal #architecture

Build An Audio Transcriber and Analyzer using ToolJet and OpenAI🎙️

Karan Rathod — Thu, 29 Aug 2024 12:00:00 +0000

In this hands-on tutorial, we’ll learn how to build a powerful audio transcriber and analyzer using ToolJet and Open AI. We'll quickly design an intuitive UI using ToolJet's pre-built components, and then use the platform's query builder to interact with Open AI for audio transcription and analysis.

By the end of this tutorial, we'll have a fundamental structure to build more sophisticated transcription and audio analysis applications.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Open AI Account : Register for an Open AI account to utilize AI-powered features in your ToolJet applications. Sign up here.

Here's a quick preview of what we are going to build:

Before you begin, go to the Open AI Console, and copy your secret key. Next, login to your ToolJet account, locate the Data Sources section on the left sidebar, and configure Open AI as a data source using the secret key.

Once the data source is configured, create a new app called "Speech Insight" from the dashboard. And with that, we are ready to start building our application.

Step 1: Building the UI for the Audio Transcriber

Let's use ToolJet's visual app builder to design our UI.

For the app header, drag and drop an Icon component on the canvas. Navigate to its properties panel on the right, and select the IconBrandDingtalk icon.
Drop a Text component next to it, and enter "Speech Insight" under its Data property.
Change the color of both components to blue (#3E63DD). This will be the primary color scheme of our app, update the color scheme of the remaining components accordingly.

Place a Container component below the header. We will organize the upcoming components inside the Container component.
Rename it to mainContainer.

On the top left of the Container component, place a Text component with the label "Output".
Below it, add another Container and place two Text components inside it. We will use these components to display the transcribed text and feedback. Name them transcribedText and feedback respectively.
Add a File Picker component below it and rename it to uploader. Change its Accept file types property to "audio/*".
Place a Button component below it and rename it to analyzeButton and add an "Analyze Button" label to it.

Note: We are renaming key components to make them easier to reference in other parts of our application.

Finally, place four Statistics components on the right for Fluency, Pronunciation, Intonation, and Vocabulary scores.
Drop a Button component below it labeled "Copy Output" and rename it to copyButton.

The UI is now ready! Time to configure the interactions with Open AI.

Step 2: Interact With Open AI

In the below steps, we will go through the configuration to interact with Open AI using both REST API and ToolJet's native integration.

Expand the query panel at the bottom and click on the Add button to create a new REST API query. Rename the query to transcribe.
Enter the Open AI URL under the URL property: https://api.openai.com/v1/audio/transcriptions.
Add a new row under Header, enter Content-Type as the key and multipart/form-data as the value.
Add another key for Authorization. Enter Bearer <OPEN_AI_KEY> in the value.

Under Body, add file as the key and value as {{ components.uploader.file[0] }}. This will ensure the audio file selected in our uploader/File Picker component is sent.
Add model as the key and enter whisper-1 as the value.

Now if we select an audio file in the uploader/File Picker component and click on the Run button, we will see the transcribed audio as the output.

Once the audio is transcribed, we need to analyze it to provide a score. Let's use the native Open AI integration for this query.

Click on the Add button and add a new query. Select Open AI as the data source for this query. This is the same data source that we had set up at the beginning. Rename it to analyze.
Select Chat as the operation and Message as input, and enter the below prompt:

Based on the transcribed audio below, provide a 
JSON object in response with the following details:

   - Fluency (out of 10)
   - Pronunciation (out of 10)
   - Vocabulary (out of 10)
   - Intonation (out of 10)
   - A paragraph that gives general feedback 
on the transcribed text's quality and overall improvement suggestions.

   Return the object in the following format:

   {fluency: "...", pronunciation: "...", 
vocabulary: "...", intonation: "...", feedback: "..."}

   Transcribed text:
   {{queries.transcribe.data.text}}

In this prompt, we are using Open AI to perform a detailed analysis of the audio transcription. We are referencing the data returned by the transcribe query in the prompt along with other scoring criteria.

Running this query will result in the following output:

Both the queries are ready. As a final step, let's automate the process of triggering the analyze query every time the transcribe query is successfully executed.

Go back to the transcribe query, navigate to Events and add a new event handler.
Select Query Success as the Event, Run Query as the Action, and analyze as the Query.

By using events, we have set up the process of triggering the analyze query after the transcribe query is triggered and is ready with the output for analysis.

Step 3: Binding the Transcripts and Analysis to Components

Onto the final step. We have built our UI and also built queries to interact with Open AI. Now we can connect it all together and see the app in action.

Select the Analyze Audio button, navigate to its properties panel on the right and add a new event.
Select On click as the Event, Run Query as the Action, and transcribe as the Query.

Now every time the Analyze Audio button is clicked, it will trigger the transcribe query.

Select the Copy Output button and add a new event to it.
Select On click as the Event, Copy to clipboard as the Action, and {{queries.analyze.data}} as the Text.

This configuration will ensure that the analyzed output gets copied when you click on the Copy Output button.

Select the Text component that we had placed to display the transcript. Enter the following value under its Data property:
Transcript: {{queries.transcribe.data.text}}
Select the Text component to display the feedback. Enter the following value under its Data property:
Feedback: {{JSON.parse(queries.analyze.data).feedback}}

Note: We received a JSON string in response to our analyze query. Therefore, we need to parse it to construct a JavaScript object before displaying it.

Select the Statistics component for "Fluency" and enter the below value under its Primary value property:
{{JSON.parse(queries.analyze.data).fluency}}
Update the rest of the Statistics components using the same logic.

Our audio transcriber and analyzer is now fully complete. Upload an audio file and click on the Analyze Audio button to see the transcription, feedback, and scores getting populated in the UI.

Conclusion

In this tutorial, we learned how to create a complete audio transcription and analysis tool using ToolJet and OpenAI. We walked through designing an intuitive user interface, setting up API queries to interact with OpenAI, and binding the results to display transcriptions, feedback, and speech analysis scores.

To further customize the application, experiment with different UI components to enhance the user experience or integrate additional APIs to analyze other aspects of the audio, such as emotion detection or language translation.

To learn more, check out ToolJet's official documentation or connect on Slack for questions or queries.

Build an Advanced Web Scraping Tool Using ToolJet and Scraper API! 🚀 🛠️

Karan Rathod — Thu, 15 Aug 2024 12:35:05 +0000

Introduction

Scraping data can be tedious, especially when dealing with dynamic content. However, it becomes a lot more convenient if you can instantly preview the data scraped in the UI. ToolJet, combined with Scraper API, enables exactly that. This tutorial shows how to set up a script to scrape data using ToolJet and display the results in real time.

If you've worked with web scraping using Google Colab or tools like Selenium, you know the challenges. Here, we'll take a different approach using JavaScript web scraping, utilizing ToolJet’s visual app builder to manage the data flow.

Prerequisites

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Basic knowledge of JavaScript.

Begin by creating an application named TJ Web Scraper.

Step 1: Designing the UI to Display the Scraped Data

Let's use ToolJet's visual app builder to quickly design the UI.

Drag and drop a Container component onto the canvas.
Inside the container, place an Icon component on the left for the logo.
Place a Text component next to it and enter "TJ Web Scraper" under its Data property.
Place another Text component on the right to display the total count of scraped products.

We are using blue (hex code: #075ab9) as the primary color for this application; change the color scheme of all the components accordingly.

Add a Table component below the header and a Button component on the bottom-right of the canvas.

With that, our UI is ready in just a couple of minutes.

Step 2: Writing the JavaScript Code to Scrape Data

In this step, we will utilize the Scraper API to scrape the data from a sample eCommerce website. Here's a preview of the website:

The website has a few products with their images, titles, and prices. Additionally, it has a load more button to dynamically load more content.

To start, expand the Query Panel at the bottom, and click on the Add button to create a new Run JavaScript code query. Rename the query to scrapeData.
Set up the main scraping function: Create the runMainScript() function that will coordinate all the logic needed for scraping products.

function runMainScript() {
    const API_KEY = 'SCRAPER_API_KEY'; 

    // Main logic goes here
    // .....
}

Create a request helper: Build a helper function makeRequest() using axios to handle API requests, manage responses, and deal with errors efficiently.

async function makeRequest(url) {
    try {
        const response = await axios.get('https://api.scraperapi.com/', {
            params: {
                api_key: API_KEY,
                url: url
            }
        });
        return response.data;
    } catch (error) {
        if (error.response && error.response.status === 404) {
            throw new Error('404NotFound');
        }
        console.error(`Error making request to ${url}: ${error}`);
        return null;
    }
}

Extract product details: Define the parseProducts() function to gather relevant information (like title, price, and image) from the HTML content, filtering out incomplete data. This function uses the HTML selectors tailored to the target website.

function parseProducts(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const items = doc.querySelectorAll('.product-item');
    return Array.from(items).map(item => ({
        title: item.querySelector('.product-name')?.textContent.trim() || '',
        price: item.querySelector('.product-price')?.textContent.trim() || '',
        image: item.querySelector('img')?.src || 'N/A',
        url: item.querySelector('a')?.href || null
    })).filter(item => item.title && item.price);
}

Handle dynamic loading: The fetchProducts() function manages the initial page load and any additional AJAX requests, collecting all available products. It saves the total count in a ToolJet variable.

async function fetchProducts(pageUrl, ajaxUrl) {
    let products = [];
    let offset = 0;
    const initialPageHtml = await makeRequest(pageUrl);

    if (!initialPageHtml) return products;
    products = products.concat(parseProducts(initialPageHtml));

    while (true) {
        const ajaxHtml = await makeRequest(`${ajaxUrl}?offset=${offset}`);
        if (!ajaxHtml) break;
        const newProducts = parseProducts(ajaxHtml);
        if (newProducts.length === 0) break;
        products = products.concat(newProducts);
        offset += 12;
        console.log(`Scraped ${products.length} products so far...`);
        // Save the length of the total products fetched in a ToolJet variable
        actions.setVariable('totalProductsScraped', products.length);
    }
    return products;
}

Launch the scraping process: Implement the scrapeProducts() function to trigger the scraping and output the final count of products collected.

async function scrapeProducts() {
    const pageUrl = "https://www.scrapingcourse.com/button-click";
    const ajaxUrl = "https://www.scrapingcourse.com/ajax/products";
    let products = await fetchProducts(pageUrl, ajaxUrl);
    console.log(`\nTotal products scraped: ${products.length}`);
    return products;
}

Run the script and handle results: Execute the scraping process, save the data, and log a sample of the products for review and handles potential errors by setting an error variable.

scrapeProducts().then(products => {
    // Save all the products fetched from the eCommerce website
    actions.setVariable('scrapedProducts', products);
    console.log("\nScraped products stored in 'scrapedProducts' variable.");
    console.log(`Total products: ${products.length}`);
    console.log("\nSample of scraped products:");
    products.slice(0, 5).forEach(product => {
        console.log(`Title: ${product.title}`);
        console.log(`Price: ${product.price}`);
        console.log(`Image: ${product.image}`);
        console.log(`URL: ${product.url}`);
        console.log("---");
    });
}).catch(error => {
    actions.setVariable('scrapingError', error.message);
    console.error("An error occurred:", error);
});

Time to see the code in action : Invoke the runMainScript() function to start the entire process.

function runMainScript() {
    // Main logic
    // .....
}

runMainScript();

The code to scrape the data is ready. The above code for web scraping will have to be adjusted based on each target website.

Click on the Run button on the Query Panel and check all the logs that will appear in the browser console.

Step 3: Displaying the Scraped Data

With the UI and code set up, we can now focus on displaying the data on the Table component and triggering the code based on Button click.

Select the Button component, navigate to its properties and create a new event handler.
Select On click as the event, Run Query as the action, and scrapeData as the query.

Select the Table component, and under its Data property, enter {{variables.scrapedProducts}}.
Select the Text component in the header that is created to display the total count of the products that are scraped. Enter the {{"Total Products Scraped: " + variables.totalProductsScraped || 0 }} code under its Data property.

We've successfully linked the components with the query. Now, just click the Button component and watch as the data is scraped and displayed in the Table component.

Conclusion

Scraping data effectively requires overcoming challenges like dynamic content and pagination, especially when dealing with AJAX-loaded pages. Using ToolJet combined with Scraper API, you can simplify this process and gain the ability to instantly preview and manage your scraped data through a clean UI.

Unlike traditional approaches like Selenium web scraping or using Google Colab, this method integrates JavaScript web scraping seamlessly into your workflow with real-time visibility of your data. Building on this foundation, you can scale the tool to handle more complex scraping needs while maintaining an intuitive interface.

To learn more, check out ToolJet's official documentation or connect on Slack with any questions.💡

How to Scrape Data From a Page With Infinite Scroll! ♾️

Karan Rathod — Sun, 11 Aug 2024 08:07:18 +0000

Web scraping can get challenging when dealing with dynamically loaded content. Modern websites often use infinite scroll or “Load more” buttons to load additional content as you scroll. While this enhances user experience, it complicates data extraction using conventional methods.

In this tutorial, you’ll learn how to scrape data from a website that employs an infinite scroll mechanism. We’ll go step-by-step to fetch, parse, and save the data, eventually exporting it to a CSV file.

By the end of this tutorial, you will have learned how to:

Fetch HTML content from a web page.
Simulate clicking the “Load more” button to load additional content.
Parse and extract specific data from the HTML.
Save the extracted data to a CSV file.

Let’s get started!

Prerequisites

To develop this web scraper, we'll use Node.js along with a few open-source libraries and the ZenRows API to handle anti-scraping mechanisms. Below is a list of tools and libraries that will be used:

Node.js: A runtime environment for executing JavaScript code on the server side. You can download it from nodejs.org.
Axios: A library for making HTTP requests.
Cheerio: A library for parsing HTML.
csv-writer: A library for writing data to a CSV file.
ZenRows API: A service to bypass anti-scraping mechanisms.

First, create a new Node.js project named web-scraper-tool. Then, install the required libraries by running the following command in your terminal:



npm install axios cheerio csv-writer

With the basic setup in place, you are ready to start building your web scraper.

Step 1: Fetch HTML Content

The first task is to fetch the HTML content of the page. This involves sending a request to the target URL using the ZenRows API. The response will contain the raw HTML of the page, initially displaying 12 products.

Create a fetchHtml function that retrieves the HTML content from a target URL using the ZenRows API. This function should handle HTTP requests and errors, returning the HTML data for further processing.



const axios = require('axios');
const cheerio = require('cheerio');
const csv = require('csv-writer').createObjectCsvWriter;

const apiKey = 'ZENROWS_API_KEY'; // Replace with your ZenRows API key
const pageUrl = 'https://www.scrapingcourse.com/button-click'; // Page to be scraped

// Function to fetch HTML content from a URL
async function fetchHtml(url) {
   try {
       const response = await axios.get('https://api.zenrows.com/v1/', {
           params: { url, apiKey }
       });
       return response.data; // Return the HTML content
   } catch (error) {
       console.error(`Error fetching ${url}: ${error.message}`);
       return null; // Return null if an error occurs
   }
}

To test the fetchHtml function, create a main function to execute the logic and print the fetched HTML.



// Main function to test and execute all the logic
async function main() {
   const html = await fetchHtml(pageUrl); // Fetch HTML content of the initial page
   if (html) {
       console.log(html);
   }
}
main();

Run the code using the command node index.js. The output in your terminal should display the entire raw HTML for the page. This HTML will be the foundation for the data extraction process.

Step 2: Load More Products

Once you have fetched the initial set of products, the next step is to simulate clicking the “Load more” button multiple times to load all the remaining pages. This step ensures that all products beyond the initial set displayed on the home page are fetched.

Create a fetchAllProducts function that simulates clicking the “Load more” button by sending requests to the AJAX endpoint. This function should continue to load more products until a specified number of products have been fetched.



const ajaxUrl = 'https://www.scrapingcourse.com/ajax/products'; // AJAX URL to load more products

// Function to fetch all products by simulating the "Load more" button
async function fetchAllProducts() {
  let productsHtml = [];
  let offset = 0;

  while (productsHtml.length < 48) {
      const newHtml = await fetchHtml(ajaxUrl, { offset });
      if (!newHtml) break; // Stop if no HTML is returned

      const $ = cheerio.load(newHtml);
      const products = $('div.product-item').map((_, element) => {
          return $(element).html();
      }).get();

      productsHtml.push(...products); // Collect the HTML content of the products
      offset += 12; // Increment offset to load the next set of products
      console.log(`Fetched ${productsHtml.length} products so far...`);
  }
  return productsHtml.join('\n'); // Join the HTML snippets into a single, cleaner string
}

Update the main function to test the fetchAllProducts function.



// Main function to test and execute all the logic
async function main() {
   const productsHtml = await fetchAllProducts();
   console.log(productsHtml); // Log the fetched products
}

When you run the code, your terminal should display the message *Fetched X products so far… * followed by the raw HTML of the products.

Step 3: Parse Product Information

With the raw HTML content of at least 48 products fetched, the next step is to parse this HTML to extract specific product information like title, price, image URL, and product URL.

Create a parseProducts function that extracts specific product information like title, price, image URL, and product URL from the fetched HTML. Use the Cheerio library to navigate and parse the HTML content.



// Function to parse product information from HTML
function parseProducts(html) {
   const $ = cheerio.load(html);
   return $('a[href*="/ecommerce/product/"]').map((_, item) => ({
       title: $(item).find('span.product-name').text().trim(),
       price: $(item).find('span.product-price').text().trim(),
       image: $(item).find('img').attr('src') || 'N/A',
       url: $(item).attr('href')
   })).get();
}

Update the main function to run the parseProducts function and log the output.



// Main function to test and execute all the logic
async function main() {
   const productsHtml = await fetchAllProducts();
   const products = parseProducts(productsHtml);
   console.log(products); // Log the parsed product information to the console
}

Run the code to see the parsed product information in an array of objects instead of the raw HTML seen in the previous step. The output in your terminal should look like an array of objects, each representing a product with its title, price, image URL, and product URL.

Step 4: Export Product Information to CSV

After successfully parsing the data, the next task is to save it in a structured format for further analysis. In this step, the parsed data will be written to a CSV file, which is a popular choice for storing tabular data due to its simplicity and wide support.

Create an exportProductsToCSV function that writes the parsed product data to a CSV file. Use the csv-writer library to define the file structure and save the data.



// Function to export products to a CSV file
async function exportProductsToCSV(products) {
   const csvWriter = csv({
       path: 'products.csv',
       header: [
           { id: 'title', title: 'Title' },
           { id: 'price', title: 'Price' },
           { id: 'image', title: 'Image URL' },
           { id: 'url', title: 'Product URL' }
       ]
   });

   await csvWriter.writeRecords(products);
   console.log('CSV file has been created.');
}

Update the main function to run the exportProductsToCSV function.



// Main function to test and execute all the logic
async function main() {
   const productsHtml = await fetchAllProducts();
   const products = parseProducts(productsHtml);
   await exportProductsToCSV(products); // Export products to CSV
}

After running the code, you should see a products.csv file in your working directory with the parsed product information. You will also see a message in the terminal confirming that the CSV file has been created.

Step 5: Get Extra Data for Top Products

In the final step, the focus will be on refining the scraping process by fetching additional details for the top five highest-priced products. This involves visiting each product’s page to extract the needed information, such as product descriptions and SKU codes.

Create a getProductDetails function that fetches additional details like product descriptions and SKU codes from each product's individual page.



// Function to fetch additional product details from the product page
async function getProductDetails(url) {
   const html = await fetchHtml(url);
   if (!html) return { description: 'N/A', sku: 'N/A' };

   const $ = cheerio.load(html);
   return {
       description: $("div.woocommerce-Tabs-panel--description p").map((_, p) => $(p).text().trim()).get().join(' ') || 'N/A',
       sku: $(".product_meta .sku").text().trim() || 'N/A'
   };
}

Finally, update the exportProductsToCSV function to include the new data for the top 5 highest-priced products.



// Function to export products to a CSV file
async function exportProductsToCSV(products) {
   const csvWriter = csv({
       path: 'products.csv',
       header: [
           { id: 'title', title: 'Title' },
           { id: 'price', title: 'Price' },
           { id: 'image', title: 'Image URL' },
           { id: 'url', title: 'Product URL' },
           { id: 'description', title: 'Description' },
           { id: 'sku', title: 'SKU' }
       ]
   });

   await csvWriter.writeRecords(products);
   console.log('CSV file with additional product details has been created.');
}

Finally, update the main function to fetch the additional details and export the enriched product data to the CSV file.



// Main function to test and execute all the logic
async function main() {
   const productsHtml = await fetchAllProducts();
   const products = parseProducts(productsHtml);

   // Sort products by price in descending order
   products.sort((a, b) => parseFloat(b.price.replace(/[^0-9.-]+/g, "")) - parseFloat(a.price.replace(/[^0-9.-]+/g, "")));

   // Fetch additional details for the top 5 highest-priced products
   for (let i = 0; i < Math.min(5, products.length); i++) {
       const details = await getProductDetails(products[i].url);
       products[i] = { ...products[i], ...details };
   }

   await exportProductsToCSV(products); // Export products to CSV
   console.log('CSV file with additional product details has been created.');
}

Once you run the code, you will see a CSV file with the top five highest-priced products, each containing additional details like product descriptions and SKU codes.

Note: The number of products fetched (48) is based on the earlier limit set in the fetchAllProducts function. You can adjust this limit if you want to scrape more products before identifying the top five.

Conclusion

By following these steps, you’ve successfully built a web scraper capable of handling dynamic web pages with an infinite scroll or “Load more” button. The key to effective web scraping lies in understanding the structure of the target website and using tools to navigate and bypass anti-scraping measures.

To further enhance your web scraping skills, consider implementing the following:

Use rotating proxies to avoid IP bans.
Explore techniques for handling CAPTCHA challenges.
Scrape more complex sites with additional AJAX calls or nested "Load more" buttons.

This tutorial provided a strong foundation for scraping dynamic content, and you can now apply these principles to other web scraping projects.

Build a Grammarly Alternative Using ToolJet and OpenAI in 10 Minutes📝

Karan Rathod — Wed, 07 Aug 2024 13:42:21 +0000

This tutorial will walk you through the process of creating a Grammarly alternative using ToolJet and OpenAI. We will use ToolJet's visual app builder to design an elegant user interface for our application. Then we will use the platform's low-code query builder to connect with OpenAI to perform detailed text analysis. The completed application will allow you to perform four operations:

List all grammatical errors in your text
Fix all grammatical errors and return the revised text
Provide a score for the text based on specific parameters: clarity, coherence, grammar, and engagement
Make the content sound more natural (ideal for transforming generic AI-generated content with a more organic tone)

Feel free to adjust the structure and functionality of the application to match your exact content-enhancement needs.

Check out this tutorial to learn how to build a QR Code generator using ToolJet and Python.

Here's a final preview of the application:

Prerequisites:
ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.

OpenAI Account : Register for an OpenAI account to utilize AI-powered features in your applications by accessing APIs such as GPT for advanced natural language processing. Sign up here.

Since integration in ToolJet is very straightforward, you can use any other service instead of OpenAI to build the same application.

Step 1. Set up Your First ToolJet Data Source

In the steps below, we will set up the data source and create a new app.

Access the OpenAI Console and generate a new secret key. Remember to copy this key for later use.
Sign up for a free ToolJet cloud account if you haven't already and log in.
On the ToolJet dashboard, locate the Data Sources section on the left sidebar. Here, click on the Add button under the OpenAI plugin.
In the API Key field, paste the API key you copied from OpenAI Console and click on the Save button

Use the Test Connection button to ensure the OpenAI plugin is correctly connected to your ToolJet account.
Finally, click on the "Apps" icon in the left sidebar to navigate to the applications section.
Select "Create new app" and name your application "Wordly" (or anything else based on your use case), and click on "Create app" to finalize the app creation.

Step 2. Building the User Interface

We will start by creating a minimal UI for the application. The UI will take around five minutes to build. First, we will build the header section, then the input section, and finally, the output section, where we will display the results of the text analysis.

Header

For the Header, drop an Icon component on the empty canvas and place a Text component next to it. Set its Icon property to "IconTextWrap" and change its font size to 28.

We are using light blue ("#d9e2fc") as the primary color in this application. Update the color scheme of all the components accordingly.

Input Section

Drag and drop a Container component below the header and rename it to mainContainer.

We will rename important components like containers and input fields to ensure that we can easily refer and access component-related data inside the app builder.

Add a Text component at the top left of the container with the label 'Enter Text'.
Place a Dropdown component next to it with the label 'Operation'. Rename it to operationDropdown.
Set the dropdown's Option labels to: {{['List Grammatical Errors', 'Fix Grammatical Errors', 'Humanize Content', 'Provide Content Score']}}.
Set the Option values to: {{['listGrammaticalErrors', 'fixGrammaticalErrors', 'humanizeContent', 'provideAScore']}}.
Add a Textarea component below and rename it to textInput. - Add a Button component labeled 'GENERATE OUTPUT ⚡' and rename it to generateButton.
Add another Button component next to it labeled 'COPY 🗒️' and rename it to copyButton.

Output Section

Add a Text component labeled 'Output'.
Place another Text component below it to display the output. This component will display the data returned by the OpenAI queries.
Rename the Text component to output, and under its Data property, set Markdown as the type.

Step 3. Creating Queries to Interact With OpenAI

Next, we’ll create four OpenAI queries and a JavaScript query that will conditionally trigger one of the OpenAI queries based on the selected operation.

List Grammatical Errors:

Expand the Query Panel at the bottom of the screen and click on the Add button to create a new query
Rename this query to listGrammaticalErrors.
Select OpenAI as the Data Source and select Chat as the Operation. In the Message input field, enter the following prompt:

Find all grammatical errors in the given text. List each error with a heading and a description using Markdown. Include the following elements:

Header: Use a bold header with an appropriate emoji, and mention the error type.
Sentence: Provide the sentence which contains the error.
Description: Provide a brief description of the error and two line breaks after it.

Use these emojis for different types of errors:

Subject-Verb Agreement: 🧑‍🏫
Verb Tense: ⏳
Punctuation: 📝
Spelling: 🔠
Sentence Structure: 🏗️
(…please use other more names and related emojis if needed)

Ensure that each section clearly identifies the error type and provides a description.

Create Three More OpenAI Queries:

Create three more OpenAI queries - fixGrammaticalErrors, humanizeContent, and provideAScore.

Prompt for fixGrammaticalErrors query:

Review the following text, identify all grammatical errors, and provide a corrected version of the text. 

Provide the output in Markdown format.

Text: {{components.textInput.value}}

Prompt for humanizeContent query:

Rewrite the following content to make it sound more natural and human-written. 

Ensure the revised text is engaging, clear, and maintains the original meaning. 
Provide the output in Markdown format.

Text: {{components.textInput.value}}

Prompt for provideAScore query:

Analyze the following text and provide a score from 1 to 10 for 
each of the following categories: 
clarity, coherence, grammar, engagement, and overall quality. 

Present the results in Markdown format with the following structure and no header:
**Overall Quality🌟**: [score]

Show the next four paremeters inside a block quote
Clarity💡: [score]

Coherence🔗: [score]

Grammar✅: [score]

Engagement🔥: [score]

<insert a line break here>
-------------------------------------------------------------------

**Comments**:
Add comments below the results. 

Ensure to include a header before the results. 

Text: {{components.textInput.value}}

Create a Query to Conditionally Trigger the OpenAI Queries

Create a JavaScript query named triggerQuery with the following code:

switch (components.operationDropdown.value) {
    case 'listGrammaticalErrors':
        await queries.listGrammaticalErrors.run();
        break;
    case 'fixGrammaticalErrors':
        await queries.fixGrammaticalErrors.run();
        break;
    case 'humanizeContent':
        await queries.humanizeContent.run();
        break;
    case 'provideAScore':
        await queries.provideAScore.run();
        break;
}

This JavaScript query will check the selected operation from the operationDropdown component and run the relevant OpenAI query.

Step 4. Configuring Events and Other Functionalities

In the final step, we will configure the events and bind queries with components and see how it all comes together.

Update the Output on Query Success:

Add a new Query Success event handler to the listGrammaticalErrors query and select Action as Control Component.
Under Action Options, set the Component as output, Action as Set text, and Text as {{queries.listGrammaticalErrors.data}}.
Follow the same steps for the remaining three OpenAI queries; this will populate the output component with the returned data from the query.

Generate Button:

Select the Generate Output button, navigate to its properties panel on the right and create a new event under Events.
For the event configuration, select Action as Control Component. - Under Action Options, set the Component as output, Action as Clear.

This event will clear the output component every time the button is clicked.

Add another event to the Generate Output button to run the JavaScript query when it is clicked.

This event will trigger the JavaScript query. The JavaScript query will then trigger one of the OpenAI queries based on the selected operation from the dropdown, and the output component will be populated with the latest data.

Copy Button

Create a new event for the Copy button, select Copy to clipboard as the event, and enter {{components.output.text}} under its Text property.

With this setting, every time you click on the Copy button, the text inside the output component will be copied to the clipboard.

The functionality of our application is now fully configured. Enter some text in the input field, click on the Generate Output button and test the output for the available operations.

Conclusion

Congratulations! You've built a Grammarly alternative in less than 10 minutes. Using ToolJet's Continue adjusting the application's functionality to meet your specific text analysis needs. You can create new OpenAI queries for a variety of content enhancement scenarios such as changing the tone of the content, improving SEO, changing the language of the output content, improving clarity, etc.

To learn more, check out the ToolJet documentation or connect with us on Slack.

Creating a CSV to Graph Generator App Using ToolJet and Python Libraries 🚀

Karan Rathod — Thu, 25 Jul 2024 12:53:21 +0000

In this tutorial, we'll create a CSV to Graph Generator app using ToolJet and Python code. This app enables users to upload a CSV file and generate various types of graphs, including line, scatter, bar, histogram, and box plots. Since ToolJet supports Python (and JavaScript) code out of the box, we'll incorporate Python code and the matplotlib library to handle the graph generation. Additionally, we'll use ToolJet's customizable pre-built components to design an intuitive user interface in minutes.

Here's a quick preview of the complete application:

Check out this tutorial to learn how to develop a QR code generator using ToolJet.

Prerequisites

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Basic knowledge of Python.

Begin by creating an application named CSV To Graph Generator.

Step 1: Designing the User Interface

Let's use ToolJet's visual app builder to quickly design the UI.

Designing the Header

Drag and drop a Text component onto the canvas for the header. Rename this component to headerText and set its text to "CSV TO GRAPH GENERATOR."
Customize its styling properties to have:
- Text size: 25
- Font weight: bolder
- Text color: #375fcfff
- Text alignment: right

This will serve as the header text of your app.

Add an Icon component, naming it logo. Set the icon to IconChartAreaFilled and the icon color to #375fcfff. Position it appropriately on the canvas to complement the header text.

Creating the CSV Upload Section

Drag a Container component onto the canvas. Style this container with:
- Border radius: 7
- Background color: #fff
- Box shadow: 2px 2px 1px 1px #aec0f5ff

This container will hold all the input fields and output preview.

Inside the container, add a File Picker component and rename it to fileUploader. Set its Accept file types property to {"csv/*"} to accept CSV files. Enable the Parse content toggle, and select File type as CSV.
Next, add a Dropdown component next to the File Picker, rename it to graphSelectionDropdown. Set the component's Option values to ["line", "scatter", "bar", "histogram", "box"] and Option labels to ["Line", "Scatter", "Bar", "Histogram", "Box"].
Below the dropdown, add a Button component and rename it to generateGraphButton. Set its text to "Generate Graph".

Double curly braces in ToolJet are used to pass custom code and refer or access values.

Creating the Image Preview

To display the generated graph, add an Image component below the File Picker and Button.

The UI is now ready!

Step 2: Using Python Libraries through Queries

ToolJet's query builder offers a convenient way to use custom code or connect with external data sources, services, and libraries. We will use it to create a Python query that uses the CSV data and interacts with the matplotlib library to generate graphs.

Expand the query panel at the bottom, create a new query named generateGraph, and choose Python as the data source.

Enter the below code in your Python query:

import matplotlib.pyplot as plt
import pandas as pd
import numpy as np
from io import BytesIO
import base64
import io

def create_plot():
    try:
        csv_string = components.fileUploader.file[0].content
        graph_type = components.graphSelectionDropdown.value
        print("Debug info:", csv_string, graph_type)

        df = pd.read_csv(io.StringIO(csv_string))
        columns = df.columns.tolist()

        if len(columns) < 2:
            raise ValueError("CSV must contain at least two columns")

        x_column = columns[0]
        y_columns = columns[1:]

        plt.figure(figsize=(12, 6))

        if graph_type == 'line':
            for col in y_columns:
                plt.plot(df[x_column], df[col], label=col)
            plt.title(f'Line Plot: {x_column} vs {", ".join(y_columns)}')
            plt.legend()
            plt.xticks(rotation=45, ha='right')
        elif graph_type == 'scatter':
            if len(y_columns) >= 2:
                plt.scatter(df[y_columns[0]], df[y_columns[1]])
                plt.title(f'Scatter Plot: {y_columns[0]} vs {y_columns[1]}')
                plt.xlabel(y_columns[0])
                plt.ylabel(y_columns[1])
            else:
                plt.scatter(df[x_column], df[y_columns[0]])
                plt.title(f'Scatter Plot: {x_column} vs {y_columns[0]}')
                plt.xlabel(x_column)
                plt.ylabel(y_columns[0])
        elif graph_type == 'bar':
            x = range(len(df[x_column]))
            width = 0.8 / len(y_columns)
            for i, col in enumerate(y_columns):
                plt.bar([xi + i*width for xi in x], df[col], width, label=col)
            plt.xlabel(x_column)
            plt.ylabel('Value')
            plt.title(f'Bar Plot: {", ".join(y_columns)}')
            plt.xticks([xi + width*(len(y_columns)-1)/2 for xi in x], df[x_column], rotation=45, ha='right')
            plt.legend()
        elif graph_type == 'histogram':
            for col in y_columns:
                plt.hist(df[col], bins=10, alpha=0.5, label=col)
            plt.title(f'Histogram: {", ".join(y_columns)}')
            plt.xlabel('Value')
            plt.ylabel('Frequency')
            plt.legend()
        elif graph_type == 'box':
            plt.boxplot([df[col] for col in y_columns])
            plt.title(f'Box Plot: {", ".join(y_columns)}')
            plt.xticks(range(1, len(y_columns) + 1), y_columns, rotation=45, ha='right')
            plt.ylabel('Value')
        else:
            raise ValueError(f"Invalid graph type: {graph_type}. Choose 'line', 'scatter', 'bar', 'histogram', or 'box'.")

        plt.grid(True)
        plt.tight_layout()

        buffer = BytesIO()
        plt.savefig(buffer, format='png')
        buffer.seek(0)

        img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')

        plt.close()

        return img_str
    except Exception as e:
        print(f"Error in create_plot: {str(e)}")
        return None

create_plot()

Once this is configured, you can select a CSV file in the File Picker, select the graph type, and click on the Run button in the query panel. You can see the output generated by the query under preview.

Step 3: Connecting the UI Components with the Query

Time to bind the query to the components.

Configuring the Image Preview

In the Data property of the Image component, enter the following code to bind the query's result:
```
{{'data:image;base64,' + queries.generateGraph.data}}
```

For the Loading state property of the Image component, click on the fx button to enter custom code and enter the below code:
```
{{queries.generateGraph.isLoading}}
```

Triggering the Query Based on Button Click

Bind the query to the generateGraphButton by adding an on Click event that triggers the generateGraph query. This setup ensures that the script runs and generates the graph when the button is clicked.

After this setup, every time you upload a CSV file, select a graph type, and click on the generateGraphButton, the graph will be created and a preview will be visible in the Image component.

Conclusion

By following these steps, we've successfully built a dynamic and user-friendly CSV to Graph Generator app with ToolJet. We utilized ToolJet's visual app builder to craft an elegant and intuitive UI, used the query builder to integrate a Python library for graph generation, and demonstrated how to customize ToolJet applications to deliver a smooth user experience.

To learn and explore more about ToolJet, check out the ToolJet docs or connect with us and post your queries on our Slack channel.

Build an HTML To Markdown Converter using ToolJet📋

Karan Rathod — Thu, 04 Jul 2024 13:05:46 +0000

In this tutorial, we will walk through the steps to build an HTML to Markdown Converter using ToolJet. This application allows users to input HTML code and get the corresponding Markdown output which can be copied with a button click. Using ToolJet's intuitive pre-built components, we'll design an elegant UI in just 5 minutes. The HTML to markdown conversion will be managed by the Turndown JavaScript library, while the Markdown preview will be rendered using the react-markdown library.

ToolJet's Run JavaScript query and Text component can be utilized to convert HTML to Markdown and preview the content without using external libraries. However, in this tutorial, we are looking to demonstrate the process of using 3rd party libraries in ToolJet.

Here's a preview of the complete application:

Prerequisites:

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

Basics of JavaScript: A basic understanding of JavaScript is essential for this tutorial since we will use JavaScript and React libraries to handle the logic for converting HTML to Markdown and previewing the markdown content.

To begin, create a new application named HTML To Markdown Converter.

Step 1: Creating the UI

Header

Add a Container component at the top of the canvas and rename it to headerContainer.
Add an Icon and a Text component inside the Container. Rename them to logo and headerText respectively.
Set the text to "HTML to Markdown Converter" and select an appropriate icon for the app in the Icon component.

Input Section

Add another Container component on the left and rename it to inputContainer.
Inside the container, add a Text component labeled "Enter HTML Code:". Rename it to enterHTMLLabel.
Below the label, add a Textarea component for the HTML input and rename it to htmlInput.

Output Section

Add a container next to the input section and rename it to outputContainer.
Add a Text component labeled "Markdown Preview:" below the input section. Rename it to markdownLabel.
Add a Custom Component to display the Markdown output and rename it to markdownOutput.

Buttons

Add a Button component labeled "Convert" below the Textarea component. Rename the button to convertButton.
Add another Button component labeled "Copy Markdown" besides the Convert button and rename it to copyButton.

The UI of the application is done. Time to focus on the functionality.

Step 2: Adding Queries and Events

Import Turndown Library

Create a Run JavaScript code query named importTurndownLibrary to import the Turndown library.
Use the following code in the query to import the library:

// Function to add script dynamically
function addScript(src) {
    return new Promise((resolve, reject) => {
        const scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', src);
        scriptTag.addEventListener('load', resolve);
        scriptTag.addEventListener('error', reject);
        document.body.appendChild(scriptTag);
    });
}

try {
    // Importing turndown
    await addScript('https://cdnjs.cloudflare.com/ajax/libs/turndown/7.0.0/turndown.js');

    // Showing a success alert
    await actions.showAlert("success", 'Turndown JS is imported');
    turndownService.turndown(components.textarea1.value);
} catch (error) {
    console.error(error);
}

Enable the Run this query on application load? toggle to automatically run this query every time the app loads.

Convert HTML to Markdown

Create another Run JavaScript code query named convertToMarkdown.
Use the following code in the query to convert the text entered in the htmlInput component to markdown:

const turndownService = new TurndownService();
const markdown = turndownService.turndown(components.htmlInput.value);

return markdown;

Button Actions

For the Convert button, create a new On click event, set the Action as Run Query, and select convertToMarkdown as the Query.

For the Copy Markdown button, create a new On click event, set the Action as Copy to clipboard the {{queries.convertToMarkdown.data}} as the Text.

Most of the key functionality is now configured. In the next step, we will use a Custom Component to import a React library to preview the markdown content.

Step 3: Creating Markdown Preview

Add Custom Component

In the Custom Component, add the data that will be returned by the convertToMarkdown query:

{{
   { preview: queries.convertToMarkdown.data}
}}

Use the following code to render the Markdown preview:

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Markdown from 'https://esm.sh/react-markdown@9';

const MyCustomComponent = ({ data }) => (
    <Container>
        <Markdown>{data.preview}</Markdown>
    </Container>
);

const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);

With this, the HTML to Markdown converter is ready. Time to see it in action!

Step 4: Preview and Testing

Test the application by entering various HTML snippets and checking the Markdown output.
Ensure that the Copy Markdown button works correctly.

Conclusion

We have successfully built an HTML to Markdown Converter using ToolJet in just minutes! This application is designed to simplify your content formatting process, and you can easily expand its functionality based on your specific requirements. Explore the capabilities of ToolJet to create similar projects and enhance your workflow.

You can check out ToolJet docs for further learning or join the ToolJet Slack community for doubts and queries.

Build an AI BPMN Diagram Analyzer using ToolJet 🛠️

Karan Rathod — Thu, 27 Jun 2024 13:12:06 +0000

In this tutorial, we'll create a BPMN Diagram Analyzer application using ToolJet. This app allows users to generate detailed explanations of BPMN processes by uploading them in image format. We'll use ToolJet's low-code app-builder for the user interface and its query builder to connect to the Gemini API to generate an in depth analysis of uploaded BPMN processes.

Here's a quick preview of our application:

Prerequisites

Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

To begin, create a new application named BPMN Diagram Analyzer.

Step 1: Adding UI Elements 🖼️

The first step in the app-building process is to utilize ToolJet's customizable pre-built components to build a UI in minutes. We will start with the header.

App Header

For the logo, add an Icon component at the top of the canvas and name it logo.
Choose an appropriate icon (e.g., IconAnalyzeFilled) and set its color to #3e63ddff.
Add a Text component next to the Icon component.
Set its Data property to "BPMN Diagram Analyzer".
Style it with #3e63ddff as the color, 24px as the font size, and font weight as bold.

We are using blue (hex code: #3e63ddff) as the primary color, style the upcoming components accordingly.

Input Section

Add a Container on the left to hold the input elements, and name it inputContainer.
Inside this container, add a Text component as the header, and name it inputLabel.
Set the Text component's Data property to "Input".
Below it, place an Image component to display the uploaded BPMN diagram. Name it imagePreview.
Add a File Picker component and name it fileUploader.
Add a Button component labeled "Generate". Name it generateButton.
Add another Button labeled "Copy Output", and name it copyButton.
Position the buttons appropriately next to the File Picker.

Output Section

Add another Container for the output section, and name it outputContainer.
Add a Text component inside this container as the header, and name it outputLabel.
Set the Text component's Data property to "Output".
Add another Text component for the generated explanation. Name it generatedOutput.
Set the data format to HTML since the generated explanation will be formatted in HTML format.

Step 2: Configuring Queries 🔗

With the UI ready, we can now connect to Gemini API and format the image preview using queries.

Generate Image Preview Query

Create a new Run JavaScript code query named generateImagePreview.
Add the code below in the query:

return `data:image;base64,${components.fileUploader.file[0].base64Data}`

The above query will restructure the image data and return it. The returned value will be used as a URL to display the image as a preview in the Image component.

Analyze Diagram Query

Create a new REST API query named analyseDiagram.
Set the method to POST and enter the below URL under the URL property:

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent

Under Headers, add a new header and set the key to Content-Type and value to application/json.
Create a new workspace constant named GEMINI_API_KEY and add your Gemini API Key to it.
Under Parameters, add a new row with the key as key and value as {{constants.GEMINI_API_KEY}}.
Configure the Body property of the query using the code below:

{
  "contents": [
    {
      "parts": [
        {
          "text": "Explain in depth the content and overall of the uploaded BPMN (Business Process Model and Notation) diagram in HTML formatting only. Respond with only the explanation, and nothing else. Return the following information, with clear bullet points and headers (under 18 px) for each section: 1. **Title**: The title or main heading of the BPMN diagram. 2. **Description**: A brief description or summary of the BPMN diagram. 3. **Elements**: Explain all the processes identified in the diagram in the correct flow. If there are multiple sequences, explain them individually. 4. **Flows**: Describe the sequence flows, message flows, and associations between elements. 5. **Data Objects**: Identify and describe any data objects present in the diagram. 6. **Swimlanes**: If present, list the swimlanes (e.g., pools, lanes) and their roles or participants. Ensure the returned HTML is well-structured, with appropriate tags for headers, lists, and any other necessary elements for readability and organization."
        },
        {
          "inline_data": {
            "mime_type":"image/jpeg",
            "data": "{{components.fileUploader.file[0].base64Data}}"
          }
        }
      ]
    }
  ]
}

This JSON request sends an uploaded BPMN diagram image for analysis, asking for a detailed HTML explanation of its contents, including the title, description, elements, flows, data objects, and swimlanes.

Step 3: Using Events For Dynamic Interaction 🔘

Events in ToolJet allow you to easily create dynamic app interactions based on triggers such as button clicks or query completion.

Generate Button Click

Add a new event to the Generate button.
Leave the Event as On click, select Run Query as the Action and Query as analyseDiagram.

Now every time the Generate button is clicked, the analyseDiagram query will run and the output will be generated.

Copy Button Click

Add an On click event on the Copy Output button to copy the generated output to the clipboard.
Set the action as Copy to Clipboard and under the Text property, enter the code below:

{{components.generatedOutput.text}}

The above setting will copy the output text from the related component every time we click on the Copy Output button.

File Picker Load:

Add an On File Loaded event on the File Picker component to run the generateImagePreview query.
This configuration will ensure that the generateImagePreview query runs each time a file gets uploaded to the File Picker component.

This configuration will ensure that the generateImagePreview query runs each time a file gets uploaded to the File Picker component.

Image Preview

Under the URL property of the Image component, enter the code below:

{{queries.generateImagePreview.data}}

Now the Image component will display the BPMN diagram image once it is uploaded using the File Picker.

Step 4: Testing ✅

Time to test all the functionalities.

Use the File Picker to upload an image - a preview should be visible on the Image component.
Click on the Generate Button - the Text component in output should display the explanation of the BPMN diagram in-depth through HTML formatting.
Click on the Copy Output Button - the generated explanation should get copied and you should get a notification saying "Copied to clipboard!"

Conclusion

By following this tutorial, you have successfully created a BPMN Diagram Analyzer using ToolJet. This app allows users to upload BPMN diagrams in image format and receive detailed explanations, enhancing their workflow analysis capabilities. Feel free to expand and customize the app further based on your specific requirements. Happy building!

To learn and explore more about ToolJet, check out the ToolJet docs or connect with us and post your queries on Slack.

Create a QR Code Generator Using ToolJet and Python in 5 Minutes! 🛠️

Karan Rathod — Thu, 20 Jun 2024 13:04:57 +0000

This quick tutorial will guide you through the steps to create a QR Code Generator application using ToolJet. The app will allow users to select a URL and generate a corresponding QR code. We will utilize ToolJet's visual app-builder to rapidly build a user interface and then connect to a Python module to generate QR codes from URLs.

Here's the preview of the application:

Prerequisites

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Basic knowledge of Python.

Begin by creating an application named QR Code Generator.

Step 1: Design the User Interface

- Add a Container for the Header

Drag and drop a Container component onto the canvas.
Name it headerContainer.
Set its background color to #0a60c6ff.

- Add a Text Component for the App Name

Inside the headerContainer, add a Text component.
Set the text to "QR Code Generator."
Style it with:
- Text Color: #ffffffff
- Text Size: 24
- Font Weight: bold
- Border Radius: 6

- Add an Icon for the App Logo

Inside the headerContainer, add an Icon component.
Set the icon to IconQrcode and color to #ffffffff.

- Add a Table with URLs and Other Information

Drag and drop a Table component onto the canvas.
Name it linksTable.
Below is the database table structure that we are using for this application:
- id: Auto-generated
- title: String
- url: String
- description: String
Populate the Table component with data, based on the provided structure.

- Add a Text Component for the Table Header

Above the table, add a Text component.
Set the text to "URL Information."
Style it with:
- Text Color: #0a60c6ff
- Text Size: 24
- Font Weight: bold

- Add a Modal for QR Code Generation

Drag and drop a Modal component onto the canvas.
Name it generateButton.
Set the Trigger button label to "Generate QR" and the Background color to #0a60c6ff.

- Add an Image Component to Display the QR Code

Inside the modal, add an Image component.
Name it qrOutput.
Use the below code for the Image component's URL property:
```
data:image/png;base64,{{queries.QRGenerator.data}}
```
Similarly, use the below code for the Loading state property of the Image component:
```
{{queries.QRGenerator.isLoading}}
```

The above configuration will display the generated QR code in the Image component after we craft and run the related query(named QRGenerator).

Step 2: Implement Functionality

- Add a Python Script for QR Code Generation

Add a query named QRGenerator using the Run Python code data source.

Use the following Python code to generate the QR code:

import micropip
await micropip.install("qrcode")
import qrcode
from io import BytesIO
import base64

def QR_Generator():
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )
    qr.add_data(components.linksTable.selectedRow.url)
    qr.make(fit=True)
    img = qr.make_image(fill_color="black", back_color="white")
    buffered = BytesIO()
    img.save(buffered, "PNG")  # Specify the format as a string
    img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
    return img_str
QR_Generator()

This code uses the qrcode library to generate a QR code from a selected URL in a ToolJet table component. The generated QR code is converted to a base64-encoded PNG image and returned as a string.

- Link the QR Generator to the Generate Button

Select the generateButton modal and add a new event handler to it.
Set up an On open event to run the QRGenerator query.
After the above configuration, the output of the QRGenerator query will be displayed in the qrOutput Image component based on the earlier configuration.

Step 3: Test the Application

Select a row on the Table component and click on the generateButton modal to generate and view the QR code.

You can save the QR code by right-clicking on the image and selecting Save image as. Alternatively, you can set up a Button component to download the image directly.

Congratulations

Congratulations! You've successfully built a production-ready QR code generator. This application demonstrates ToolJet's capability to rapidly design clean user interfaces and extend functionality with custom code. While we used Python code in this tutorial, ToolJet also supports JavaScript code and Custom Components for users who want to extend the platform's functionality for very specific use-cases.

For any questions or support, join the ToolJet Slack community. You can also check out the ToolJet docs to learn more!

Build an AI Business Proposal Writer Using Gemini API and ToolJet in 10 minutes 🚀

Karan Rathod — Thu, 13 Jun 2024 13:03:15 +0000

In this tutorial, we'll guide you through the process of creating an AI Business Proposal Writer using ToolJet and Gemini API. We will utilize ToolJet's pre-built components and simple integration process to quickly create an application that can interact with the Gemini API. This application will allow users to input business details and generate professional business proposals.

Here's a preview of the final application:

Prerequisites

Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

Begin by creating an application named Business Proposal Writer.

1. Create a New Application

Open ToolJet and click on Create new application.
Name your application "Business Proposal Writer."
Once you create a new application, you will see an empty canvas with a component library on the right and a query panel at the bottom.

2. Design the UI

Drag and drop the following components onto your canvas:
- Containers: To organize the header, input fields, and output section.
- Text and Text Inputs: For company name, service description, budget, deadline, and company expertise.
- Button: For generating the proposal.
- Text: To display the generated proposal in HTML format.
- Icons: For logos and making the UI more appealing.
Rename the input fields for clarity:
- companyNameInput
- serviceDescriptionInput
- budgetInput
- deadlineInput
- companyExpertiseInput
Name the button createButton.
Name the text component that will display the generated proposal as output.

ToolJet's pre-built components offer complete flexibility in functionality and styling customization.

3. Integrating with Gemini API through Queries

Create a workspace constant to save your Gemini API key. Name it GEMINI_API_KEY.
Expand the query panel, create a new query, and name it generateProposal.
Change the Request Method to POST and paste the following URL under the URL input:

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

Navigate to the Body section of the generateProposal query. Toggle on Raw JSON and enter the following code:

{
  "contents": [
    {
      "parts": [
        {
          "text": "
1. **Client/Company Name:** {{components.companyNameInput.value}}
2. **Project/Service Description:** {{components.serviceDescriptionInput.value}}
3. **Budget Range (if applicable):** {{components.budgetInput.value}}
4. **Deadline:** {{components.deadlineInput.value}}
5. **Company Expertise:** {{components.companyExpertiseInput.value}}

Based on these inputs, generate a well-structured and comprehensive business proposal document in HTML format. The generated proposal should include the following sections, each with ample padding and spacing:

1. **Executive Summary**
2. **Company Overview and Qualifications**
3. **Project Understanding and Approach**
4. **Proposed Solution and Methodology**
5. **Timeline and Deliverables**
6. **Team Structure and Bios**
7. **Cost Breakdown and Budget** (Include charts as needed)
8. **Terms and Conditions**
9. **Conclusion and Call to Action**

Ensure that the HTML output is properly formatted and visually appealing."
        }
      ]
    }
  ]
}

Queries in ToolJet offer a simple and easy way to connect with databases, APIs, and cloud storage services.

4. Connecting the UI Components with Queries

Select the createButton component.
Add an event handler to trigger the generateProposal query when the button is clicked.

Events are used to run queries, show alerts, and other functionalities based on triggers such as button clicks or query completion.

Select the output component that was added to display the generated business proposal.
Under its Data property, enter the following code:

{{queries.generateProposal.data.candidates[0].content.parts[0].text}}

Now, enter the required details in the input fields and click on the button. You should see the generated business proposal in the output component.

Conclusion

You have successfully built a business proposal writer using the Gemini API and ToolJet in just 10 minutes. This tool will streamline the creation of professional business proposals, saving you time and effort.

For any questions or support, join the ToolJet Slack community. You can also check out the ToolJet documentation to learn more!

Build an AI Content Generator Using Gemini API and ToolJet in 10 Minutes 🛠️

Karan Rathod — Tue, 04 Jun 2024 13:18:51 +0000

In this quick tutorial, we'll build an AI-powered content generator using the Gemini API and ToolJet, all within just 10 minutes. This app will generate content based on the uploaded images, selected content type, and additional info entered by the user. Whether you need titles, short descriptions, long descriptions, creative stories, blog post outlines, full blog posts, social media captions, or advertising copies, this app will have you covered. Follow along to use ToolJet's rapid development process and Gemini's advanced AI capabilities to seamlessly integrate content creation into your workflow.

Here is a preview of our final application:

Prerequisites

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source , low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Gemini API Key : Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.

Step One - Designing the UI 🎨

Begin by creating an application named AI Content Generator.

Once the app is created, we can start designing the UI with ToolJet's pre-built components.

Drag and drop a Container component from the components library on the right and adjust its size so that it covers most of the canvas.
Drop an Icon component and Text component on the container. Then, rename the Icon component to logo and the Text component to logoText.
Select the Icon component to see a properties panel on the right. Select IconListSearch as the icon.
For the Text component, enter AI Content Generator under its Text property, and adjust its font weight and text size.
Change the color of the Icon and Text components to dark blue (Hex code - #354094).

This tutorial uses dark blue(#354094) as the primary color. Update the colors of your components accordingly in the upcoming steps. Feel free to use a different color scheme.

Add an Image component and a Text component below the header that we just created. Rename them to imagePreview and output respectively. imagePreview will display a preview of the uploaded image and output will display the generated text based on the image and selected options.
Add a File Picker component below the image and rename it to imageUploader.
Place a Dropdown component and Text Input component next to it. Rename them to typeOfContentInput and additionalInfoInput respectively.
For the Text Input component, enter the below value under Placeholder property: Enter additional information
For the Dropdown component, paste the below array under Option values and Option labels properties using double curly braces:

{{["Title", "Short Description (1-2 sentences)", "Long Description (paragraph)", "Creative Story", "Blog Post Outline", "Blog Post", "Social Media Caption", "Advertisement Copy"]}}

Enter the below value under the Dropdown component's Placeholder property: Select type of content

Renaming components can be useful when the application has a large number of components and we need to refer to component-related values inside the app.

Add a Button component at the bottom as the last step in the UI building process. Rename the component to generateContentButton.

We've designed a simple UI for this application, which you can fully customize to meet your specific requirements. ToolJet offers extensive flexibility, allowing you to define and arrange components exactly as you envision.

Step Two - Integrating AI Capabilities 🛠️

With the UI complete, we can use ToolJet's queries to connect with Gemini API and get a response based on the uploaded image, content type, and additional information that we enter in the components.

To protect your Gemini API key, we'll leverage ToolJet's Workspace Constants. This way, your key remains hidden and secure.

Click on the ToolJet logo in the top left corner. From the dropdown, select Workspace constants.
Click on the Create new constant button. Set the name as GEMINI_API_KEY and enter your Gemini API key in the value input. Click on the Add constant button. This constant will now be available across our workspace and can be accessed using {{constants.GEMINI_API_KEY}}.

You can log into Google AI Studio using your existing Google credentials. In the AI Studio interface, you'll be able to locate and copy your API key.

Navigate back to your app and expand the Query Panel at the bottom.
Click the + Add button and choose the REST API option. Rename the query as getContent.
Change the Request Method as POST and paste the following URL under the URL input: https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}
Navigate to the Body section of the getContent query. Toggle on Raw JSON and enter the following code:

{{
    `{
     "contents": [{
       "parts": [{
         "text": "Generate the following content for this image in markdown format:
         content type: ${components.typeOfContentInput.value},
         additional info: ${components.additionalInfoInput.value}"
        },
        {
            "inline_data": {
              "mime_type":"image/jpeg",
              "data": "${components.imageUploader.file[0].base64Data}"
            }
          },],
      },],
    }`
  }}

In the above configuration, we are creating a structured JSON payload that combines user-input text and image data. The JSON object is then sent to the Gemini API endpoint to process the provided content and image.

Step Three - Binding Data to Components 🔗

With the query ready, we can setup a way to trigger it every time the Button component is clicked.

Select the Button component, and navigate its properties panel on the right.
Under Events, click on New Event Handler to create a new event.
For the new event, select On click as the Event and Run Query as the Action.
Select getContent as the Query (the query created in the previous step).

Now, every time the Button component is clicked, the getContent query will be triggered, and it will return the AI-generated content based on the uploaded image and user input.

Next, we will populate the Text(output) component with the value returned by the getContent query using the below steps:

Select the Text (output) component that was created for the output of the query.
Under its Data property, enter the below code: {{queries.getContent.data.candidates[0].content.parts[0].text}}

Similarly, populate the Image component with the uploaded image from the File Picker component:

Select the Image component.
Under its URL property, enter the below code: {{'data:image;base64,' + components.imageUploader.file[0].base64Data}}

Our application is now ready. Let's give it a spin and see the results. Select an image, choose a content type, enter some additional info, and click on the generate button. We should now be able to see the preview of the image and AI-generated text output.

Conclusion

We've now built a fully functional AI-powered content generator using the Gemini API and ToolJet in just 10 minutes. This application demonstrates how seamlessly ToolJet's rapid development environment integrates with Gemini's advanced AI capabilities to automate content creation based on user inputs.

To explore more, checkout ToolJet docs or join us on slack. Happy coding!!

Building a Personal Finance Tracker Using ToolJet

Karan Rathod — Thu, 16 May 2024 14:10:38 +0000

Building apps on ToolJet is fast and convenient, but it gets even better when you couple it with ToolJetDB (ToolJet's Internal Database). In this tutorial, we will build a Personal Finance Tracker application using ToolJet and ToolJetDB.

Here's a preview of what we are going to build:

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform that streamlines the process of building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Basic JavaScript: Knowledge of basic JavaScript can be handy for implementing dynamic functionality in your ToolJet applications.

1. Creating the Database

Let's jump right into the development process. Log in to your ToolJet account and click on the ToolJet Database icon in the left sidebar.

Create a new database table with the following columns and rename it to personalFinanceTracker:

id (primary key/auto-generated)
month(varchar)
income (int)
description (varchar)
expense (int)

Add some dummy data to the table so that we have something to work with when we begin the app-development process.

2. Developing the UI

Once the database is ready, click on the Apps icon to move to Applications section and create a new application named Personal Finance Tracker.

Now we will utilize ToolJet's pre-built components to quickly spin-up the UI of the app.

Let's begin with the header of the application.

Drag and drop a Text component on the canvas from the components library on the right and rename it to header.
Click on the Text component to see its configuration options in the Properties Panel on the right.
Enter Personal Finance Tracker under its Data property, change its color to dark blue (Hex code - #36405B) and font size to 20.

Time to create the income and expense input sections.

Drag and drop a Container component. Containers are used to group related components in the App-Builder.
Inside the Container component, add a Text component for the Income header.
Under the Text component, add a Text Input component followed by a Number Input component.
Rename them to incomeDescriptionInput and incomeInput respectively. Set the default value of incomeInput component to 0.
Add a Button component below the Number Input component and rename it to addIncomeButton. Also change its Button Text property to Add/Update Income.

Renaming the components can be handy when you want to refer the values inside them in queries.

Copy the Text, Text Input, Number Input and Button components and paste them right below the Income section to create the Expense section.
Rename the Text Input, Number Input and Button components to expenseDescriptionInput, expenseInput, and addExpenseButton respectively.
Also add two Statistics Components below the addExpenseButton component.
Rename the Statistics components to monthlyIncome and monthlyExpense. We will use them to display the monthly income and expenses.

We also need to list all the income and expense entries. We can handle that with the Table component.

Add a Table component next to the Container component. Rename it to entriesTable and remove the sample data under its Data property.

3. Fetching and Binding the Data

We had created a database table named personalFinanceTracker with some dummy data in the first step. Let's use the low-code query builder to create a query that fetches the data from the database. We will then use it to populate the Table component with it.

Expand the Query Panel at the bottom and click on the Add button to create a query.
Rename the query to listEntries.
Select personalFinanceTracker as the Table name and List rows under Operations.
Enable Run this query on application load? to ensure the query runs every time the app is loaded.
Click on the Run button to run the query and check the response under Preview.

To populate the entriesTable(Table) component using the data returned by the listEntries query, follow the below steps.

Select the entriesTable component.
Navigate to its properties and pass the below value under its Data property: {{queries.listEntries.data}}
Delete the id column under the Columns property and re-arrange the columns so that we have the columns in the following order: Month || Income || Expense || Description

In ToolJet, you can use double curly braces to refer dynamic values or use custom code.

Let's create two more queries to add income and expenses. We will bind them to the addIncomeButton and addExpenseButton respectively.

Create a new query named addIncome with the below configuration:

We have used the following mappings in the query:

month - {{moment().format('MMMM')}}
income - {{components.incomeInput.value}}
expense - 0
description - {{components.incomeDescriptionInput.value}}

Create another query and name it addExpense with the below configuration:

Below are the mappings:

month - {{moment().format('MMMM')}}
income - 0
expense - {{components.expenseInput.value}}
description - {{components.expenseDescriptionInput.value}}

Now let's bind these queries to the addIncomeButton and addExpenseButton components.

Select the addIncomeButton, navigate to its properties and create a new event by clicking on New event handler.
Select On click as the Event, Run Query as the Action and addIncome as the Query.

Add another event to the addIncomeButton that runs the listEntries query on click.

Now clicking the addIncomeButton triggers the addIncome and listEntries queries. This setting adds a new income record to the database and refreshes the entriesTable with updated data.

Use the same logic for the addExpenseButton and trigger the addExpense and listEntries queries when the addExpenseButton component is clicked.

Now every time you enter values and click on the related buttons, new entries will be added to the table.

The main functionality of our application is ready. Let's update the Statistics components so that they display the monthly overview.

Create a new Run JavaScript code query and rename it to monthlyOverview.
Paste the below code in the code input field:

await queries.listEntries.run();

let allData = queries.listEntries.getData();

function calculateCurrentMonthTotals(data) {
    // Get the current month in 'MMMM' format, e.g., 'May'
    const currentMonth = moment().format('MMMM');

    // Initialize sums for income and expense
    let totalIncome = 0;
    let totalExpense = 0;

    // Iterate through each data entry
    data.forEach(entry => {
        // Check if the entry's month matches the current month
        if (entry.month === currentMonth) {
            // Sum up income and expense
            totalIncome += entry.income;
            totalExpense += entry.expense;
        }
    });

    // Return the calculated totals in an object
    return {
        income: totalIncome,
        expense: totalExpense
    };
}

const currentMonthTotals = calculateCurrentMonthTotals(allData);
return currentMonthTotals

This code retrieves all entries from a database, then calculates and returns the total income and expenses for the current month.

Pass the returned data to the Primary value property of the Statistics components.

Enter {{queries.monthlyOverview.data.income}} for the monthlyIncome component and enter {{queries.monthlyOverview.data.expense}} for the monthlyExpense component.
Adjust the color of the monthlyIncome component's primary value to light green( hex code #36AF8B), and set the monthlyExpense component's primary value to dark red (hex code - #D0021B).

With that, our personal finance application is fully complete🎉.

Summary

With the completion of this tutorial, we now have a functional Personal Finance Tracker application, built using ToolJet and ToolJetDB. This application demonstrates how you can use ToolJet's visual app-builder and low-code query builder to create apps 10x faster. To explore more, checkout ToolJet docs or join us on slack.