Natural Language to Code Translator with WorqHat AI

Hey there, fam! Welcome to WorqHat, where we’re about to embark on an exciting course that will take your AI skills to the next level!

In this course, we’ll be diving into the fascinating world of AI bots, specifically focusing on building our very own AI bot using the incredible AiCon V2 Model from WorqHat AI. And let me tell you, this bot is not your average bot. It’s a bot that can transform your thoughts into actual code in any programming language you desire! Yes, you heard it right.

Imagine being able to express your ideas or describe the code you want to generate, either in Hindi or English, and have the bot magically generate the code for you in your preferred programming language. It’s like having your own personal coding assistant!

This project is significant because it will not only equip you with the knowledge and skills to build AI-based projects but also give you a fundamental understanding of how to leverage the latest APIs provided by WorqHat. Trust me, this is going to be a cool and game-changing experience!

Now, let’s take a sneak peek into the world of the one and only Code Translator, a project that will revolutionize the way you approach coding. Get ready to be amazed!

But don’t take my word for it, you gotta try it out for yourself. We’ve got a live code translator on this website, that’s already causing a stir. People can’t get enough of it! So, before you even start this course, go check it out and see what all the fuss is about.So, are you ready to step up and take on the challenge? Let’s do this!

​

What you’ll learn

We will:

1. Cover some super cool basic understanding of AI, WorqHatAI, and AiCon models (Text Generation Models).
2. We will set up the development environment with WorqHatAI, NodeJS, and NextJS
3. We will write text completion models in NodeJS using amazing WorqHat AiCon V2 models.
4. We will build a responsive front-end app in NextJS and back-end that uses WorqHat AI API and interacts with front-end, then we will run it locally.

​

Prerequisites

Learning new technologies becomes easier when you have some prior knowledge. Before diving into WorqHatAI and AI model development, we recommend brushing up on the following areas:

1. Programming Knowledge: Having a basic understanding of programming is essential to start experimenting with advanced languages. While not mandatory, knowledge of the JavaScript programming language is considered a plus.
2. Critical Thinking: To grasp the complex and abstract concepts involved in WorqHat APIs and AI development, solid critical thinking skills are beneficial. Developing your ability to analyze, evaluate, and solve problems will greatly aid your learning process.

However, don’t worry if you don’t possess all the prerequisite knowledge beforehand. You can still learn API and AI model development without prior expertise. It’s just that having some background knowledge will make your learning experience smoother and more enjoyable.

​

House Rules

To ensure a productive learning environment, we kindly request that you adhere to the following house rules:

• Complete Assignments: It’s important to complete your assignments thoroughly and in a timely manner. Engaging with the course material actively will enhance your understanding and proficiency.

• Join Discord Server: We highly encourage you to join our Discord server, where you can connect with fellow learners, ask relevant questions, and engage in discussions. The server provides a supportive community that fosters learning and collaboration. WorqHat’s Discord community

• Maintain a Positive Attitude: A positive mindset goes a long way in learning. Stay happy, open-minded, and optimistic throughout your journey. Embrace challenges as opportunities for growth and be supportive of your fellow learners.

We are excited to have you on this learning adventure with us! Let’s create an enriching and empowering environment where we can learn and grow together.

​

Unleash the Power of WorqHat AI

This is the Video Tutorial for the Entire Project. You can choose to follow it directly from here, or you can follow the written tutorial below. The Video has been broken into 2 parts for your convenience and to make it easier to follow.

​

AI, WorqHatAI, and AiCon Models

In the realm of artificial intelligence (AI) and machine learning, machines strive to simulate human intelligence, while machine learning focuses on enabling machines to learn and improve autonomously without explicit programming. In this context, WorqHat emerges as a groundbreaking no-code platform builder, harnessing the potential of Generative AI to create custom apps, workflows, and automation solutions tailored to businesses of all sizes.

WorqHat empowers solopreneurs, startups, and medium-sized enterprises by automating complex workflows, fostering seamless team collaboration, and enhancing overall productivity. By automating time-consuming tasks, WorqHat allows businesses to thrive and focus on core operations.

At the heart of WorqHat lies the advanced deep learning model known as AiCon (AI Content Optimization Network). This remarkable language model has undergone extensive training on vast volumes of data, enabling it to comprehend natural language with unparalleled precision and exceptional speed. The result? Faster and more streamlined platform building processes.

The WorqHatAI API serves as a powerful tool, providing developers with access to WorqHat’s cutting-edge AI models and the ability to train their own models. WorqHat’s AiCon models are generative language models developed to generate coherent text based on substantial data inputs. AiCon V2, the fastest language model offered by WorqHat, boasts self-training capabilities and can handle requests involving up to 100,000 words in a single go. For tasks requiring logical thinking and increased creativity, AiCon V3, a larger and more advanced model, comes into play.

To utilize WorqHat’s API, developers must obtain an API key and an ORG key. These keys serve as access credentials and are essential for writing NodeJS programs that interact with WorqHat’s API.

Before diving into writing your first program using NodeJS and the WorqHat API, let’s take a moment to understand the concept of an API key and how you can generate one to facilitate seamless integration with WorqHat’s powerful services.

​

WorqHat API Key

In order to use the WorqHat API, you must first obtain an API key and the ORG Key. We offer a generous free tier that gets reset every month. You can also upgrade to a paid plan to get more API calls and more features.

This key serves as a unique identifier that allows you to access WorqHat’s API services. To generate an API key, follow the steps below:

1. Go to the WorqHat API website and click on the Get Started button.
2. Join the WorqHat community by entering your email address and clicking on the Join Now button. You can also sign up using your Google or Microsoft account.
3. Once you’ve signed up, you’ll be redirected to the dashboard. Click on the Create a Workspace button on the left-hand side of the screen.
4. Add a name for your workspace and click on the Create Workspace button. We use workspaces to organize your projects and keep them separate from each other. This allows you to manage your projects more efficiently.
5. Once you’ve created a workspace, you’ll be redirected to the Workspace Signin page. Sign in to your workspace using your email address and password that you have set up during the signup process.
6. After signing in, you’ll be redirected to the dashboard. Click on the Try Now button on the Build Your Own Applications with our API card.
7. You’ll be redirected to the API page. You can find your API key and ORG key on the right-hand side of the screen. Click on the Copy button to copy the keys to your clipboard.
8. Also, make sure to add your Domain name to the Allowed Domains section. This will allow you to make API calls from your domain. For example, if you’re making API calls from a website hosted on https://example.com, you’ll need to add example.com to the Allowed Domains section.

Here’s an example of what the API key & ORG key looks like:

var myHeaders = new Headers();
myHeaders.append("x-org-key",
"U2FsdGVkX1+DMFucNFhZT7b3KTDTPLvjKkfWV0XY+jK2tA44wGn+M+KTC1V/eAOX");

​

Quick Start with WorqHatAI API

Now that you have your API key and ORG key, you can start using the WorqHat API. In this section, we’ll walk you through the process of writing your first NodeJS program using the WorqHat API.

​

Step 1: Create a NodeJS App

1. First of all, install NodeJs in your system. Head over to https://nodejs.org/en/download and follow the instructions to install it.
2. Head over to your terminal and create a new directory for your NodeJs app:

  mkdir my-nodejs-app

3. Navigate to the newly created directory:

cd my-nodejs-app

4. Initialize a new NodeJs app and accept the default options:

npm init -y

​

Step 2: Install Dependencies

1. Install the request package. The request package allows you to make HTTP requests from your NodeJs app:

npm install request

2. Install the dotenv package. The dotenv package allows you to load environment variables from a .env file. This is useful when you want to keep your API keys and other sensitive information out of your codebase:

npm install dotenv

​

Step 3: Create the files

1. Create a new file called index.js and .env in the root directory of your NodeJs app:

touch index.js .env

2. After running the Commands, the directory structure should look like this:

Now, let’s move on to the coding part.

​

Step 4: Write the code

1. Open the .env file and add the following code:

WORQHAT_API_KEY=YOUR_API_KEY_GOES_HERE
WORQHAT_ORG_KEY=YOUR_ORG_KEY_GOES_HERE

2. Open the index.js file and add the following code. We are going to write a simple program that will make a POST request to the WorqHat API with the Question/Command and print the response to the console:

// Import the Request library to make requests to the WorqHat API
const request = require("request");
// Load the WorqHat AI API key from a file named ".env"
require("dotenv").config();
// Store the WorqHat API & ORG key in a variable for later use
const worqhatApiKey = process.env.WORQHAT_API_KEY;
const worqhatOrgKey = process.env.WORQHAT_ORG_KEY;

// Set the URL for the API request
const url = "https://api.worqhat.com/api/ai/content/v2";

// Set the required headers for the API request
const headers = {
    "x-api-key": worqhatApiKey, // Replace with your API key
    "x-org-key": worqhatOrgKey, // Replace with your ORG key
    "Content-Type": "application/json",
};

// Prepare the request body in JSON format
const raw = JSON.stringify({
    question: "Hi, tell me about you", // The question or command for the AI model
    preserve_history: false, // Whether to preserve conversation history for the model. Set to false for one-off questions. Visit documentation for more info.
    randomness: 0.4, // Level of randomness for AI model response (0 to 1)
});

// Configure the options for the API request
const requestOptions = {
    url: url,
    method: "POST",
    headers: headers,
    body: raw,
};

// Send the API request
request(requestOptions, (error, response, body) => {
    if (!error && response.statusCode === 200) {
        console.log(body); // Print the response body if the request is successful
    } else {
        console.log("Error:", error); // Print the error message if the request fails
    }
});

​

Step 5: Let’s break down the code and understand what’s going on

1. First, we import the request package to make HTTP requests from our NodeJs app:

const request = require("request");

2. Next, we import the dotenv package to load environment variables from a .env file:

require("dotenv").config();

3. Next, we store the WorqHat API key and ORG key in variables for later use:

const worqhatApiKey = process.env.WORQHAT_API_KEY;
const worqhatOrgKey = process.env.WORQHAT_ORG_KEY;

4. Next, we set the URL for the API request:

const url = "https://api.worqhat.com/api/ai/content/v2";

5. Next, we set the required headers for the API request:

const headers = {
   "x-api-key": worqhatApiKey, // Replace with your API key
   "x-org-key": worqhatOrgKey, // Replace with your ORG key
   "Content-Type": "application/json",
};

6. Next, we prepare the request body in JSON format. This is where we specify the question or command for the AI model and send the request to the API to get the response:

const raw = JSON.stringify({
   question: "Hi, tell me about you", // The question or command for the AI model
   preserve_history: false, // Whether to preserve conversation history for the model. Set to false for one-off questions. Visit documentation for more info.
   randomness: 0.4, // Level of randomness for AI model response (0 to 1)
});

This block of code is where the magic happens. We are sending a POST request to the WorqHat API, and we are passing the question/command to the API. The API will then process the question/command and return the response.

• question: The question or command for the AI model (required)
• preserve_history: Whether to preserve conversation history for the model. Set to false for one-off questions. You can also pass in custom training data and conversation history in the for of Key-Value Pairs. Visit documentation for more info.
• randomness: Level of randomness for AI model response (0 to 1). The higher the randomness, the more varied the response will be.

7. Next, we configure the options for the API request:

const requestOptions = {
   url: url,
   method: "POST",
   headers: headers,
   body: raw,
};

This is where we specify the URL, HTTP method, headers, and request body that we have prepared and send the request to the WorqHat API to process the question/command and return the response.

8. Finally, we send the API request:

request(requestOptions, (error, response, body) => {
   if (!error && response.statusCode === 200) {
       console.log(body); // Print the response body if the request is successful
   } else {
       console.log("Error:", error); // Print the error message if the request fails
   }
});

This is where we send the API request to the WorqHat API and get the response. We are using the request package to send the request. We are also checking if the request is successful or not and printing the response body or error message accordingly.

​

Step 6: Run the code

Now that we have written the code, let’s run it and see what happens. To run the code, open the terminal and run the following command:

node index.js

You should see the following output in the terminal:

{
  "id": "1d9affa3-deac-49ee-87e7-a8d0397826fb",
  "status": "success",
  "timestamp": 1683057609614,
  "content": "I was built by WorqHat, a Generative AI Based No-Code Platform Builder based on the Advanced LLM Model AiCon. It's a predictive technology that is designed to make building applications faster and easier. Is there anything you need help with?",
  "processing_count": 58
}

This is the response from the WorqHat API. The response contains the following information:

​

Let’s Start Building

Now that you have learned how to use the WorqHat AI API, it’s time to start building your own application. Today we will be building a simple AI Code Generator application using the WorqHat AI API. The application will generate code for you based on your requirements.

​

Key Features of the Application

• Generate code for you based on your requirements
• Generate code for multiple programming languages
• Responsive user experience for anyone to convert their codes in an instant.
• Converting the natural language to any programming language.

​

Setup your Development Environment

Before diving into building our code translator project, it’s essential to set up our development environment. By following these steps, we’ll ensure that we have the necessary tools and configurations in place:

1. Install Node.js and npm

Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a browser. It’s used to build server-side applications and command-line tools. npm is a package manager for Node.js that allows you to install and manage third-party packages.

To install Node.js and npm, follow the instructions for your operating system:

• Windows
• macOS
• Linux

2. Install NextJS: NextJS is a popular framework for building React applications. Install it globally on your machine by running the following command in your terminal:

npm install -g next

3. Create a New NextJS Project: Use the following command to create a new NextJS project in your desired directory:

npx create-next-app my-code-translator

4. Navigate to the Project Directory: Move into the newly created project directory using the following command:

cd my-code-translator

5. Obtain WorqHat API & ORG Key: If you haven’t already, generate your API key and ORG key from WorqHat’s website. These keys will be used to authenticate and access the WorqHat AI engine.

6. Configure API & ORG Keys: Open the project in your favorite code editor. Create a File Named . env. Add the following lines to the file, replacing YOUR_API_KEY and YOUR_ORG_KEY with your actual API key and ORG key, respectively:

WORQHAT_API_KEY=YOUR_WORQHAT_API_KEY
WORQHAT_ORG_KEY=YOUR_WORQHAT_ORG_KEY

7. Install Dependencies: Install the dependencies for the project using the following command. We will add the dependencies as we go along. As of now, we will be installing the basic dependencies needed to run the project.

npm install

8. Run the Project: Run the project using the following command:

npm run dev

9. Open the Project in Your Browser: Open the project in your browser by navigating to http://localhost:3000. You should see the default NextJS welcome page, indicating that your development environment is successfully set up.

This is What you should see:

The project is now ready to be built. This is the basic setup for the project. We will be adding more dependencies as we go along. The file structure of the project will be looking like this:

Well done! You’ve successfully set up your development environment. Now let’s start building our code translator application.

​

Building the Code Translator Application

A brief summary of what we will be doing to create our application.

This code serves as the foundation for building a text-to-code generator application using Next.js and the WorqHat AI engine. The application allows users to input natural language queries and receive corresponding code snippets in their chosen programming language.

The code begins by importing the necessary dependencies, including React’s useState, Next.js modules, and other required libraries.

The main component, HomePage, is defined, which acts as the entry point for the home page of the application. It includes the necessary metadata and the Home component.

The Home component handles the user interface and logic for generating code from natural language input. It utilizes the useState hook to manage the component’s state, including the selected language, entered text, generated code, and loading status.

The component dynamically imports the Editor component using Next.js’ dynamic function, ensuring it is only loaded on the client-side.

Two important functions, createPrompt and fetchAIResponse, are defined to facilitate the generation of code from natural language. The createPrompt function generates a prompt based on the selected language and user input, while the fetchAIResponse function performs an asynchronous HTTP request to the WorqHat AI API, passing the prompt and receiving the AI-generated code response.

The user interface is rendered using JSX, which includes input fields for the question and language selection, a button to trigger code generation, and an embedded code editor (Monaco Editor) to display the generated code. The UI elements are styled using CSS classes of TailwindCSS.

The code also handles events, such as the button click event to initiate code generation, and updates the component’s state accordingly.

We will be covering all the necessary structure, logic, and user interface components to build a text-to-code generator application. By leveraging the WorqHat AI engine and Next.js, users can input natural language queries and obtain corresponding code snippets, enhancing their programming experience and facilitating better collaboration and comprehension.

​

Let’s Create the Frontend of the Application

Next.js is a powerful framework for building React applications with server-side rendering capabilities. In this tutorial, we will walk through the process of setting up the entry point for a Next.js application and customizing the initial HTML document. We will also focus on the index.js file, which serves as the main starting point for our application.

The first step in building our application is to create the home page design and layout. We will be using TailwindCSS to style our application. TailwindCSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements.

​

Step 1: Removing Unnecessary Files

Before we begin, let’s remove any unnecessary files from our project. In this case, we can safely remove the “apis” directory since we won’t be using it in this tutorial

​

Step 2: Understanding the _app.js File

The _app.js file serves as the entry point for our Next.js application. It acts as a wrapper component for all other components in the application and allows us to define global styles. Let’s take a closer look at the code:

import '../styles/globals.css';

function App({ Component, pageProps }) {
   return <Component {...pageProps} />;
}

export default App;

• We import the global styles defined in the “globals.css” file. These styles will be applied globally throughout our application.
• The App component is a functional component that receives two parameters: Component and pageProps.
• Inside the App component, we render the Component using JSX syntax, spreading the pageProps as props to the Component. This ensures that the initial props for the page component are passed down correctly.

​

Step 3: Understanding the _document.js File

The _document.js file allows us to customize the initial HTML document that is sent to the browser. Let’s understand the code:

export default function Document() {
   return (
      <Html lang="en">
         <Head />
         <body>
            <Main />
            <NextScript />
         </body>
      </Html>
   );
}

• We import specific components from the next/document module: Html, Head, Main, and NextScript. These components are provided by Next.js and are used to define the structure and content of the HTML document.
• The Document function is a React functional component that returns JSX code.
• The JSX code represents the structure and content of the HTML document.
• The <Html> component is the root element of the document and includes an optional lang attribute set to “en” to specify the language as English.

The <body> element is where the main content of the page resides. Inside the <body>, we have two components: <Main> and <NextScript>. The <Main> component acts as a placeholder for the main content of the page. The <NextScript> component includes the necessary Next.js scripts and other resources.

​

Step 4: Starting from Scratch in index.js

To begin, we need to import the necessary modules. In our case, we will use the next/image module to include images and the next/font/google module to configure custom fonts. Add the following lines at the beginning of the index.js file:

import Image from 'next/image';
import { Inter } from 'next/font/google';

​

Step 5: Configuring Custom Fonts

Next, we will configure a custom font for our application using the Inter font from Google Fonts. We will assign it to the inter constant. Update your code as follows:

const inter = Inter({ subsets: ['latin'] });

​

Step 6: Building the Homepage Component

Now, let’s define the homePage component, which will represent our homepage. Replace the existing code in the index.js file with the following:

function homePage() {
   return (
           <main>
              This is the sample code.
           </main>
   );
}

export default homePage;

In this code, we define the homePage function as a React functional component. It returns JSX code representing the main content of the homepage. The <main> element contains the text “This is the sample code.”

To view the changes you’ve made in the code on the actual webpage, follow these simple steps:

• Save the changes you’ve made to the code.
• Ensure that your Next.js application is up and running. If not, start the development server by executing the appropriate command, such as npm run dev or yarn dev.
• Open a web browser and navigate to the URL where your Next.js application is hosted. Typically, this would be http://localhost:3000.
• Once the page loads, you will see the updated content displayed on the screen. In this case, the text “This is the sample code” will be shown within a <main> element.

​

Step 7: Let’s add the background styling to the homepage

Now, let’s add some styling to the homepage. We will use standard CSS to style the background of the page. Update your code in body tag as follows:

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

body {
   background: linear-gradient(135deg, #efb0b0, #e6b1f1, #9aa6ef) no-repeat;
   background-size: cover;
}

The provided CSS code sets the html and body elements to have no margin or padding, and a height of 100% to occupy the full viewport height. The body element is styled with a linear gradient background that starts in the top-left corner and moves to the bottom-right corner. The background-size property is set to cover to ensure the background image covers the entire background area, creating a visually appealing full-screen background effect for the webpage.

​

Step 8: Adding the Homepage Components

We will now add the components that will be displayed on the homepage. We will create a new function called HomeComponents that will return the JSX code for the components. Update your code as follows:

function HomeComponents(){
   return (
           <div className="text-black">
              <h1 className="text-4xl md:text-5xl text-center mt-8 font-bold">Text to Code Generator</h1>
              <div className="text-center mt-8 text-xl md:text-2xl font-semibold">
                 Generate Code from Natural Language using WorqHat AI in a Click!
              </div>

              <div className="container">
                 <div className="mb-6">
                    <input type="text" id="textbox1" placeholder="Enter your Question here"
                           className="block mx-auto w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500">
                    </input>
                 </div>
                 <select id="language" className="mx-auto mb-6 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-4">
                    <option value="">Select language</option>
                    <option value="c++">C++</option>
                    <option value="python">Python</option>
                    <option value="java">Java</option>
                    <option value="javascript">JavaScript</option>
                    <option value="c#">C#</option>
                    <option value="ruby">Ruby</option>
                    <option value="go">Go</option>
                    <option value="swift">Swift</option>
                    <option value="php">PHP</option>
                    <option value="typescript">TypeScript</option>
                    <option value="kotlin">Kotlin</option>
                    <option value="rust">Rust</option>
                    <option value="matlab">MATLAB</option>
                    <option value="r">R</option>
                    <option value="perl">Perl</option>
                    <option value="scala">Scala</option>
                    <option value="objective-c">Objective-C</option>
                    <option value="groovy">Groovy</option>
                    <option value="lua">Lua</option>
                    <option value="bash">Bash</option>
                    <option value="powershell">PowerShell</option>
                 </select>

                 <div className="w-full text-center">
                    <button id="generateButton"
                            className="mx-auto text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-xl px-5 py-2.5 text-center mr-2 mb-2">
                       Generate Code
                    </button>
                 </div>
              </div>
           </div>
   );
}

In this code, we define the HomeComponents function as a React functional component. It returns JSX code representing the components that will be displayed on the homepage. The <div> element contains the following components:

• <h1> element containing the text “Text to Code Generator”
• <div> element containing the text “Generate Code from Natural Language using WorqHat AI in a Click!”
• <div> element containing the following components:
• <input> element for entering the question
• <select> element for selecting the programming language
• <button> element for generating the code
• <div> element for displaying the generated code

We need to style the container properly as well. We will use CSS to style the container. Update your code in globals.css as follows:

.container {
    color: black;
    max-width: 90%;
    margin: 0 auto;
    margin-top: 70px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

The provided CSS code sets the .container class to have a black text color, a maximum width of 90%, a top margin of 70px, and a padding of 20px. The background color is set to #f5f5f5, and the border radius is set to 8px. The box shadow is set to 0 0 10px rgba(0, 0, 0, 0.2) to create a shadow effect for the container.

Now we will add the HomeComponents function to the homePage function. Update your code as follows:

function homePage(){
    return(
        <main>
            <HomeComponents></HomeComponents>
        </main>
    )
}

​

Step 9: Adding the Code Editor

We will now add the code editor component to the homepage. We will create a new function called CodeEditor that will return the JSX code for the code editor. We will be using Monaco Editor for the code editor. Update your code as follows:

First we need to install the @monaco-editor/react package. Run the following command in the terminal:

npm install @monaco-editor/react

import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('@monaco-editor/react'), {ssr: false});

The Editor component is imported from the @monaco-editor/react package. The dynamic function is used to import the component dynamically. The ssr option is set to false to prevent the component from being rendered on the server.

Now we will create the CodeEditor inside the HomeComponents. Update your code as follows:

<div className="edit">
    <Editor
        height="400px"
        language="javascript"
        theme="vs-dark"
        defaultValue="// Generated code will appear here"
        defaultLanguage="javascript"
        value="// Generated code will appear here"
        options={{
            readOnly: true,
            wordWrap: "wordWrapRow", // Enable word wrapping at a specific column
            wordWrapRow: 10,
        }}
    />
    <br />
</div>

Add this after the <button> element in the HomeComponents function. The <div> element contains the <Editor> component. The <Editor> component has the properties to render the code that is being written.

The <div> element contains the <Editor> component. The <Editor> component has the properties to render the code that is being written.

Now that we are halfway through the project, at this stage, your Project should be looking something like this:

​

Step 10: Lets work on Handling the button clicks

We will now add the code to handle the button clicks. We will create a new function called handleGenerateCodeClick that will handle the button clicks. Update your code as follows:

  const handleGenerateCodeClick = async () => {

    const language = document.getElementById('language').value;
    const questionText = document.getElementById('textbox1').value;
};

The handleGenerateCodeClick function is defined as an asynchronous function. It gets the value of the language and questionText variables from the <select> and <input> elements respectively. We will use these variables to generate the code. Now there are a few things we need to add as a functionality as well:

• We need to create a Function that will call the API and get the response.
• We need to create a Function that will create the Command that needs to be sent to the API.
• We need to display the code response from the API.
• We need to add a loader to show that the code is being generated.

​

Step 11: Creating the Fetch Request

We will now create a new function called fetchAIResponse that will call the API and get the response. Update your code as follows:

async function fetchAIResponse(selectedLanguage, question) {
    const API_ENDPOINT = 'https://api.worqhat.com/api/ai/content/v2';

    const API_KEY = process.env.WORQHAT_API_KEY;
    const ORG_KEY = process.env.WORQHAT_ORG_KEY;

    console.log(API_KEY);

    const prompt = "This is the command that will be sent to the API"

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'x-api-key': API_KEY,
            'x-org-key': ORG_KEY,
        },
        body: JSON.stringify({
            question: prompt,
            randomness: 0.4,
        }),
    };

    const response = await fetch(API_ENDPOINT, requestOptions);
    return await response.json();
}

The fetchAIResponse function is defined as an asynchronous function. It gets the value of the selectedLanguage and question variables from the <select> and <input> that we will be passing as parameters to the function. We will use these variables to generate the code. The fetchAIResponse function will return the response from the API.

Now we have to add the variables to the environment variables. Create a new file called .env in the root directory of the project. Add the following code to the file:

WORQHAT_API_KEY=YOUR_WORQHAT_API_KEY
WORQHAT_ORG_KEY=YOUR_WORQHAT_ORG_KEY

In order to get the API keys, you will need to create an account on WorqHat. Once you have created an account, you will be able to get the API keys from the API Keys page.

Now to access the API keys in the code, we will need to add it to the next,config.js file. Update your code as follows:

/** @type {import('next').NextConfig} */
require('dotenv').config();

module.exports = {
    reactStrictMode: true,
    env: {
        WORQHAT_API_KEY: process.env.WORQHAT_API_KEY,
        WORQHAT_ORG_KEY: process.env.WORQHAT_ORG_KEY,
    },
};

This code is a Next.js configuration file that demonstrates how to use environment variables in a Next.js application. It loads environment variables from a .env file using the dotenv package. The nextConfig object contains Next.js configuration options, and reactStrictMode is set to true to enable strict mode for React. The env object exposes environment variables WORQHAT_API_KEY and WORQHAT_ORG_KEY, which are assigned values from the corresponding environment variables in the .env file. This approach helps keep sensitive information secure and allows for flexible configuration across different environments.

​

Step 12: Creating the function to create the Command

We will now create a new function called createPrompt that will create the Command that needs to be sent to the API. Update your code as follows:

const createPrompt = (inputLanguage, inputCode) => {
  return endent`
  You are an expert programmer in all programming languages. Translate the natural language to "${inputLanguage}" code. Do not include \\\\.

      Example translating from natural language to JavaScript:

      Natural language:
      Print the numbers 0 to 9.

  JavaScript code:
      for (let i = 0; i < 10; i++) {
          console.log(i);
      }

  Natural language:
      ${inputCode}

      ${inputLanguage} code (no \\\\):
  `;
};

The createPrompt function is defined as a function. It gets the value of the inputLanguage and inputCode variables from the <select> and <input> that we will be passing as parameters to the function. We will use these variables to generate the code. The createPrompt function will return the Command that needs to be sent to the API.

We have used endent to format the Command. endent is a JavaScript template literal tag that strips leading whitespace from multi-line strings. It is used to format the Command in a readable way. We have created the Command in such a way that it will be easy for the AI to generate the code.

Now we will update the fetchAIResponse function to call the createPrompt function. Update your code as follows:

async function fetchAIResponse(selectedLanguage, question) {
    const API_ENDPOINT = 'https://api.worqhat.com/api/ai/content/v2';

    const API_KEY = process.env.WORQHAT_API_KEY;
    const ORG_KEY = process.env.WORQHAT_ORG_KEY;

    console.log(API_KEY);

    const prompt = createPrompt(selectedLanguage, question);

    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'x-api-key': API_KEY,
            'x-org-key': ORG_KEY,
        },
        body: JSON.stringify({
            question: prompt,
            randomness: 0.4,
        }),
    };

    const response = await fetch(API_ENDPOINT, requestOptions);
    return await response.json();
}

​

Step 13: Running the function once the user clicks on the Generate Code button

We will now update the generateCode function to call the fetchAIResponse function. Update your code as follows:

const handleGenerateCodeClick = async () => {

    const language = document.getElementById('language').value;
    const questionText = document.getElementById('textbox1').value;

    let responseData = await fetchAIResponse(language, questionText);
    if (responseData?.status == 'success') {
        console.log(responseData);
    } else {
        console.log('Error');
    }
};

This code snippet sends a request to an AI service by calling the fetchAIResponse() function with the language and questionText parameters. It then waits for the response using the await keyword.

If the responseData object exists and its status property is equal to 'success', the code block inside the if statement is executed. In this case, the code logs the responseData object to the console using console.log(). This is useful for debugging and inspecting the response data received from the AI service.

If the responseData object does not meet the success condition, meaning the API call was not successful, the code block inside the else statement is executed. In this case, the code simply logs the string 'Error' to the console.

We also need to Print this code into the code-editor that we have created earlier. You need to update the handleGenerateCodeClick function as follows:

We first need to import the useState hook from react. The useState hook is a function that allows you to create state variables inside a React component. It accepts an initial value as an argument and returns an array containing the state variable and a function to update the state variable. We will use the useState() hook to create a state variable called generatedCode and a function called setGeneratedCode() to update the state variable.

import React, { useState } from 'react';

const [generatedCode, setGeneratedCode] = useState('');
const [selectedLanguage,setSelectedLanguage] = useState('');

const handleGenerateCodeClick = async () => {

    const language = document.getElementById('language').value;
    const questionText = document.getElementById('textbox1').value;

    let responseData = await fetchAIResponse(language, questionText);
    if (responseData?.status == 'success') {

        let responseCode = responseData?.content || '';
        if (responseCode.includes('```')) {
            responseCode = responseCode.split('```')[1];
            setGeneratedCode(responseCode);
        } else {
            setGeneratedCode(`${responseCode}`);
        }

    } else {
        setGeneratedCode('Sorry, we could not generate code for your question. Please try again.');
    }
};

We have updated the handleGenerateCodeClick function to set the generatedCode state variable to the code generated by the AI service. We have also updated the handleGenerateCodeClick function to set the selectedLanguage state variable to the language selected by the user. We are passing these variables to the code-editor component as props.

The code-editor component will be updated to accept these props and display the generated code in the editor. Update the code-editor component as follows:

<div className="edit">
    <Editor
        height="400px"
        language={selectedLanguage}
        theme="vs-dark"
        defaultValue="// Generated code will appear here"
        defaultLanguage="javascript"
        value={setGeneratedCode}
        options={{
            readOnly: true,
            wordWrap: "wordWrapRow", // Enable word wrapping at a specific column
            wordWrapRow: 10,
        }}
    />
    <br />
</div>

We have updated the code-editor component to accept the selectedLanguage and generatedCode props. We have also updated the code-editor component to display the generated code in the editor.

Now we can add the Loading indicator to the Generate Code button. This will help the user know that the code is being generated. Update the handleGenerateCodeClick function as follows:

const [generatedCode, setGeneratedCode] = useState('');
const [selectedLanguage,setSelectedLanguage] = useState('');
const [loading, setLoading] = useState(false);

const handleGenerateCodeClick = async () => {

    const language = document.getElementById('language').value;
    const questionText = document.getElementById('textbox1').value;

    setLoading(true);
    setSelectedLanguage(language)


    let responseData = await fetchAIResponse(language, questionText);
    if (responseData?.status == 'success') {

        let responseCode = responseData?.content || '';
        if (responseCode.includes('```')) {
            responseCode = responseCode.split('```')[1];
            setGeneratedCode(responseCode);
            setLoading(false);
        } else {
            setGeneratedCode(`${responseCode}`);
            setLoading(false);
        }

    } else {
        setGeneratedCode('Sorry, we could not generate code for your question. Please try again.');
        setLoading(false);
    }
};

We have updated the handleGenerateCodeClick function to set the loading state variable to true when the user clicks on the Generate Code button. We have also updated the handleGenerateCodeClick function to set the loading state variable to false when the code is generated or an error occurs.

We have also updated the Generate Code button to display the Loading indicator when the loading state variable is true. Update the Generate Code button as follows:

<button id="generateButton" className="mx-auto text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-xl px-5 py-2.5 text-center mr-2 mb-2" onClick={handleGenerateCodeClick}>
    {loading ? `Writing your Code ....` : 'Generate Code'}
</button>

We have updated the Generate Code button to display the Loading indicator (Writing your Code ....) when the loading state variable is true. We have also updated the Generate Code button to display the Generate Code text when the loading state variable is false

​

Congratulations!

Congratulations! You have successfully completed the project. You can now test the project by refreshing the page or by rerunning npm run dev button in the top right corner of the page. You can also share the project with your friends and family to showcase your skills and accomplishments.

You can go ahead and deploy the project on Vercel or Netlify. However, you will need to create an account on these platforms to deploy the project. You can also deploy the project on GitHub Pages for free.

After completing the project, you can submit it to the WorqHat team for review. We’ll provide you with feedback and suggestions to help you improve your project. You can also share your project on social media to showcase your skills and accomplishments. After the project is reviewed, you’ll receive a certificate of completion from WorqHat. You can add this certificate to your portfolio to demonstrate your skills and knowledge to potential employers. To submit your project, please follow the steps provided in the Project Submission section below.

​

Reference Code

You can also find the code on GitHub.

​

Project Submission

Once you’ve completed the project, you can submit it to the WorqHat team for review. We’ll provide you with feedback and suggestions to help you improve your project. You can also share your project on social media to showcase your skills and accomplishments.

After the project is reviewed, you’ll receive a certificate of completion from WorqHat. You can add this certificate to your portfolio to demonstrate your skills and knowledge to potential employers.

To submit your project, please follow the steps below:

1. Create a GitHub repository for your project.
2. Upload your project files to the repository.
3. Add a worqhat.json file to the root of the repository that includes the following information:

{
   "name": "Your Name",
   "deploymentUrl": "Your Project Deployment URL (If Deployed to Vercel)",
   "authorEmail": "Your Email",
   "repository": "Your Project Repository",
   "feedback": "Your Feedback",
   "tags": [
      "Your Project Tags"
   ]
}

4. Use the link to submit your GitHub repository to the WorqHat team for review. Visit the WorqHat Submission Page to submit your project.

5. Once your project is certified, you will receive a certification badge that you can add to your project’s README.md file and to your resume’s and LinkedIn profile’s certifications.

​

Project Feedback

We’d love to hear your feedback on the project. Please take a moment to fill out the feedback in the worqhat.json file. You can also DM us your Feedbacks on the #feedbacks channel on discord WorqHat’s Discord community or via email to support@worqhat.com. Your feedback will help us improve the project and make it more enjoyable for future learners.

Do stay connected with us on our Social Channels, and we will keep you updated with our latest projects and courses.