Language is no longer a barrier today. Code in your native language with better efficiency and fewer errors with Metaschool's code translator.

Build a Code Translator Using NextJS and OpenAI API

Get started with the course. Get to know prerequisites, learning outcomes, and revise your AI and OpenAI concepts.

# What’s Up

Hi fam, Welcome to Metaschool. Today we are here with another exciting course!

So what are we building today? Today we're going to build our very own AI bot using the latest and greatest technology - the GPT-3.5 model. And not just any bot, we're talking about a bot that’s going to auto translate your code to any programming language of your choice! Not just this, you can give a description of the code you want to generate, in Urdu or English, and it will generate the code for you in any programming language you choose.

This project is important, because it will give you basic understanding of how to build AI based project using the latest APIs of OpenAI. Cool, right?!

Let me give you a sneak peek of the one and only Code Translator that you're ever going to want to build!

![example 1.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/What%E2%80%99s%20Up%20d9f71f7945774aa5bb014c1ea4566a75/example_1.gif)

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](https://main--mellow-granita-e0a938.netlify.app/), 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!

## **Course Overview**

We will:

1. Cover some super cool basic understanding of AI, OpenAI, and GPT models
2. We will set up the development environment with OpenAI, NodeJS, and NextJS
3. We will write text completion models in NodeJS using amazing openAI GPT-3.5 model
4. We will build a responsive front-end app in NextJS and back-end that uses OpenAI API and interacts with front-end, then we will run it

## **Prerequisites**

Learning new tech is always easier when you have some prior knowledge. So, before diving into OpenAI and AI model development, we recommend brushing up on the following:

1. Programming knowledge: You’ll need basic programming knowledge to start experimenting with advanced languages. Knowledge of Javascript programming language is a plus.
2. Critical thinking: To wrap your head around the complex and abstract concepts in OpenAI and AI, you'll need some solid critical thinking skills.

But don't sweat it, – you can still learn OpenAI API and AI model development without knowing everything in advance. It's just gonna be way smoother if you got some background knowledge under your belt.

Now before we move forward, let’s set some house rules first.

1. Kindly do your quick assignments properly.
2. Join [our discord server](https://discord.gg/vbVMUwXWgc) and ask all relevant questions there.
3. Stay happy and positive!

## ****🛠 Contributing to this project!****

Good news! This is an open source project, you can find the tutorial markdown files [here](https://github.com/0xmetaschool/Learning-Projects/tree/main/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20). If you find an issues in the code or tutorial, please feel free to resolve it.

We absolutely love contributions by our community and we give acknowledgement to contributors in our discord and github profile too.

Also, don’t forget to star ⭐️ our repository! we will be very thankful! ♥️


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/main/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/1.%20What%E2%80%99s%20Up.md

What’s Up?

# Unleash The Power of AI

Get OpenAI API credentials and write your first coding example in NodeJS using the OpenAI API.

## AI, OpenAI, and GPT models

AI involves machines simulating human intelligence, while machine learning focuses on teaching machines to learn and improve without explicit programming. OpenAI is a tech lab that creates safe and advanced AI models, including ChatGPT. The OpenAI API is a tool that allows developers to use OpenAI's latest AI models and train their own models.

GPT models are generative language models developed by OpenAI that can generate their own text based on large amounts of data. GPT-3 is the largest language model with 175 billion parameters, while GPT-3.5 is smaller and faster to train for specific tasks. GPT-4 is the latest addition and rumored to have up to 10 trillion parameters with even better language generation capabilities than GPT-3. An API key is required to access OpenAI API, which will be used to write NodeJS programs.

Before writing our first program using NodeJS and OpenAI API, let's quickly go over what an API key is and how can you generate it to access OpenAI API.

## What is the big deal about API key

An API key is a unique identifier that allows you to access an API. OpenAI is an AI research lab that provides powerful APIs for developers to use in their applications. In order to use OpenAI APIs, you need to generate an API key.

API Key is the combination of different random characters. Here’s an example of how API key looks like:

```
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
```

## Steps to generate an API key

Now, to get started:

1. You gotta create an account on the [OpenAI](https://platform.openai.com/) website.
2. Click on your profile and then click on Manage account then click on Billing.
3. Upgrade to a paid account. It's just a dollar a day, You can cancel whenever you want (Individual paid account).

![setup.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/setup.gif)

Generating an API key for OpenAI is a straightforward process. Here are the steps:

1. Login to your OpenAI account.
2. Navigate to the API Keys section. You can find it by clicking on your profile icon on the top right corner of the screen and selecting "API Keys" from the drop-down menu.
3. Click on the "Generate New API Key" button and follow the instructions. Make sure to keep your API key safe and secure as it grants access to your OpenAI account.

![api key generation.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/api_key_generation.gif)

## Quickstart OpenAI API

Let’s experiment will all the knowledge we have gained so far! Let’s write a simple NodeJS program that will use OpenAI API to generate some text.

### Create NodeJS app

Here are the steps to create a NodeJS app:

1. First of all, install NodeJs in your system. Head over to [https://nodejs.org/en/download](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-app
```

1. Move to the new directory:

```
cd my-app
```

1. Initialize a new NodeJs project and accept the default options:

```
npm init -y
```

1. Install the **`axios`** package as a dependency:

```
npm install axios
```

1. Install the **`dotenv`** package as a dependency:

```
npm install dotenv
```

1. Create a new file called **`app.js`** in your project directory:

```
touch app.js
```

1. Create a new file called **`.env`** in your project directory. We will use this file to keep our API key:

```
touch .env
```

Let’s look at this step happening visually:

![npm init.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/npm_init.gif)

### File structure

After running the commands, the file structure will look like this:

![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/Untitled.png)

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

### Code

First of all, fill your **`.env`** file with your API key that you generated earlier. Use this format to do this: 

```
OPENAI_API_KEY=YOUR_API_KEY_GOES_HERE
```

Now, let’s write a simple NodeJS code that will take prompt and generate the response using GPT-3.5 model. Paste this code to the **`app.js`** file.

```
// Import the Axios library to make requests to the OpenAI API
const axios = require('axios');
// Load the OpenAI API key from a file named ".env"
require('dotenv').config();
// Store the OpenAI API key in a variable for later use
const apiKey = process.env.OPENAI_API_KEY;

// Create a new "client" to interact with the OpenAI API
// and include the API key in the request headers for authentication
const client = axios.create({
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}` // Use the API key to authenticate the request
  }
});

// Define the text prompt and the desired length and randomness of the generated text
const data = {
  // The starting sentence for the generated text
  prompt: 'Once upon a time',
  // The maximum length of the generated text in words or punctuation marks 
  max_tokens: 10, 
  // The degree of randomness in the generated text (higher values mean more random output)
  temperature: 0.5 
};

// Send a request to the OpenAI API to generate text based on the provided data
client.post('https://api.openai.com/v1/engines/davinci/completions', data)
  // If the request is successful, print the generated text to the console
  .then(response => {
    console.log(response.data.choices[0].text);
  })
  // If there is an error with the request, print the error message to the console
  .catch(error => {
    console.error(error);
  });
```

### Code explanation

Let’s break down the code line-by-line and understand what is happening here.

```
// Import the Axios library to make requests to the OpenAI API
const axios = require('axios');
```

- This line imports a library called Axios, which is used to make HTTP requests (which are a way of sending and receiving data over the internet) to the OpenAI API.

```
// Load the OpenAI API key from a file named ".env"
require('dotenv').config();
```

- This line loads a file called **`.env`**, which should contain sensitive information (like the API key for OpenAI) that we don't want to put directly in our code.
    - The **`dotenv`** library helps us load this information from the file.

```
// Store the OpenAI API key in a variable for later use
const apiKey = process.env.OPENAI_API_KEY;
```

- This line retrieves the API key we loaded from the **`.env`** file and stores it in a variable called **`apiKey`**. We'll use this key later to authenticate our requests to the OpenAI API.

```
// Create a new "client" to interact with the OpenAI API
// and include the API key in the request headers for authentication
const client = axios.create({
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}` // Use the API key to authenticate the request
  }
});
```

- This block of code creates a new **`client`** that we'll use to interact with the OpenAI API.
    - We configure the client to include the API key in the request headers (which are like metadata about the request) so that the OpenAI API knows that we're authorized to use their service.

```
// Define the text prompt and the desired length and randomness of the generated text
const data = {
	// The starting sentence for the generated text
  prompt: 'Once upon a time', 
	// The maximum length of the generated text in words or punctuation marks
  max_tokens: 10, 
	// The degree of randomness in the generated text (higher values mean more random output)
  temperature: 0.5 
};
```

- This block of code sets up some configuration for the text generation process.
    - **`prompt`**: Define the starting sentence (**`Once upon a time`**).
    - **`max_tokens`**: Sets the maximum length of the generated text (10 words or punctuation marks).
    - **`temperature`**: Sets the degree of randomness in the output (0.5, which is medium-high).

```
// Send a request to the OpenAI API to generate text based on the provided data
client.post('https://api.openai.com/v1/engines/davinci/completions', data)
```

- This line sends a POST request to the OpenAI API, which tells the API that we want to generate some text.
    - The URL we're sending the request to is **`https://api.openai.com/v1/engines/davinci/completions`**, which is the endpoint (a specific location on the API server) that we use to generate text.
    - We also pass in the **`data`** object that we defined earlier, which contains the starting sentence and other configuration options for the text generation process.

```
// If the request is successful, print the generated text to the console
  .then(response => {
    console.log(response.data.choices[0].text);
  })
```

- If the request to the OpenAI API is successful (i.e. we get a response back from the API), this block of code executes.
    - Specifically, we print the generated text to the console.
    - The **`response`** object that we get back from the API contains a **`data`** property, which contains an array of potential

### Output

Now, we’re done with the explanation. Let’s try running our NodeJS app. Use the following command to run your project (Please make sure you are in your project directory):

```
node app.js
```

Let’s look at what I got after running the code. PS: You might get different answer because each time we run the model it generates different answer.

![run nodejs app.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/run_nodejs_app.gif)

> **Note:** This code is using the super powerful **`Davinci`** model from the OpenAI API, which is famous for generating some seriously impressive text. However, it's important to use the API in a responsible and ethical way, and be mindful of the model's limitations to avoid any misuse.
> 

## So let’s wrap up?

As we dive deeper into OpenAI's GPT models, let's keep in mind the responsibility that comes with this kind of power. We have the opportunity to create some truly amazing things, but we need to do it in a way that's ethical and responsible.

## Appendix

You can head over to [OpenAI documentation website](https://platform.openai.com/docs/models/overview) and learn more about OpenAI and OpenAI Models.


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/munimmetaschool-patch-14/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/2.%20Unleash%20The%20Power%20of%20AI.md

Unleash The Power of AI

Ready, Set, Build!

Build an AI bot from scratch using OpenAI API and NextJS.

# Let’s Start Building

Now, let’s dive into the cool world of the code translator Project. This project is all about creating an AI bot that can convert your code to any other programming language. It's going to be an awesome journey!

## Key features of code translator

Check out some of the key features of the code translator:

- Converting the natural language to any programming language.
    - Example input: Add 2+3
    - Example output in Python: **`sum = 2 + 3`**
- Converting the code from one programming language to another.
    - Example input in Python: **`var = 1`**
    - Example output in GoLang: **`var := 1`**
- Responsive user experience for anyone to convert their codes in an instant.

## Let's get it started

We’ll be using code and prompts to build our code translator. We will train our model using prompts that will help us generate accurate codes that are prone to no errors.

To build the project, we’ll use NextJS and OpenAI engine. By setting up our development environment and using an OpenAI API key we have already generated.

**Don’t Worry**! We will explain everything one-by-one. So, let’s buckle up to learn and build!

First things first! Let’s setup our development environment.

## Setup your development environment

We have already created a basic NextJS app for your ease. You just need to clone the app from GitHub and install dependencies. Let’s learn how you can do this.

### Install GitHub desktop

Head over to the [GitHub desktop website](https://desktop.github.com/). Download and install GitHub desktop for your specific system.

### Connect your GitHub account with Github desktop

After installing the GitHub desktop, you’ll need to connect your GitHub account with GitHub desktop. Authorise your GitHub account and get started!

### Clone NextJS app

1. Go to your GitHub desktop app
2. Click on **Add.** You will see some option like these:

![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled.png)

1. Click on **Clone Repository…**
2. Go to **URL** and paste this URL to clone the app: https://github.com/0xmetaschool/code-translator-boilerplate.git
3. Choose empty folder where you want to clone the application.

<img width="496" alt="image" src="https://user-images.githubusercontent.com/129931419/235127674-ba7233f5-8503-45e3-bb79-558a66c230e2.png">


1. After cloning the app open the app in your favourite IDE. We recommend using Visual Studio Code.

### Install dependencies

Next, we need to install the packages those are in **`package.json`** file. Use the following command to do this:

```
npm install
```

Let’s look at the output of this command.

![npm install.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/npm_install.gif)

## File structure

After cloning the application your file structure will look like this: 

![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%202.png)

> **Note:** This is a basic NextJS app that has default code. We will change the file structure and existing code as per need in upcoming lessons.
> 

We have added **`background.jpg`** and **`twitter.jpg`** images in **`public`** folder those you will use to build the front-end of your project in upcoming lessons.

## Run the application

You can run the application using the following command:

```
npm run dev
```

Let’s look at the output of this command.

![npm run dev.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/npm_run_dev.gif)

Head over to **`http://localhost:3000`** . You will see the basic NextJS app. 

> **Note:** We have removed the images from the app, so you won’t see them.
> 

![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%203.png)

Well done on cloning the app! Let’s move to the next lesson and start coding our code translator application.


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/1.%20Let%E2%80%99s%20Start%20Building.md

Let's Start Building

# Let’s Start Coding

Let’s dive into building the first component of our application i.e., **`CodeEditor.js`**.

## Why code editor

The first step to building this application is to provide a space where the user can edit their code. Editing includes adding, removing, or copying the content. To enable this functionality, we will build a code edit in this lesson.

## Code editor

CodeEditor will render a CodeMirror editor for writing code. CodeMirror is an open-source code editor library for web applications. It supports syntax highlighting, auto-completion, and search and replace features for many programming languages and file formats. It can be used as a React component to provide an in-browser code editor in a React application. 

CodeEditor imports required modules such as CodeMirror and React, defines a state for a "copyText" button that allows the user to copy the code, and sets configuration options for the CodeMirror editor such as language mode, auto indentation, and smart indentation. It then renders the CodeMirror editor with an extensions property that initializes the editor with Go programming language support. The component also includes a button to copy the code and change the state of the "copyText" button to "Copied!". The component is then exported as the default export.

The copy option will work like this in our app:

![copy.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Coding%20885f42f0043e4b00882988fe7542323c/copy.gif)

> **Don’t Worry!** We will see this happening live in upcoming lessons.
> 

### Create file

Create the **`components`** folder and create a **`CodeEditor.js`** file in the **`components`** folder. This file will contain the code for our code editor, which we will discuss in this lesson.

![Screen Shot 2023-04-25 at 4.42.08 PM.png](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Coding%20885f42f0043e4b00882988fe7542323c/Screen_Shot_2023-04-25_at_4.42.08_PM.png)

## Code summary

Here's what the code will do in simpler terms:

- The code will import several modules required for the CodeEditor component.
- The CodeEditor component will be defined to include a CodeMirror editor with several configuration options.
- The initial value of the copyText state will be set to 'Copy', and then it will be reset to 'Copy' after 2 seconds using the useEffect hook.
- The component will include a copy button that copies the code to the clipboard and update the copyText state to 'Copied!' when clicked.
- The CodeMirror editor will be initialized with Go programming language support.
- Finally, the CodeEditor component will be exported as the default export.

## Code explanation

The **`CodeEditor`** component uses the **`CodeMirror`** library to provide a code editor with options such as language mode, indentation settings, and key bindings. The component allows the user to edit code and provides a button to copy the code to the clipboard. When the user clicks the button, the code is copied and the button text is changed to "Copied!". After 2 seconds, the button text changes back to "Copy".

The component takes four props: 

- **`code`** (the initial value of the editor),
- **`editable`** (a boolean indicating whether the editor is editable or not),
- **`setCode`** (a function to set the value of the code), and
- **`language`** (the programming language mode of the editor).

The component initializes the editor with support for the Go programming language.

Let's go through the code line by line and explain what it does:

```
import { StreamLanguage } from '@codemirror/language';
import { go } from '@codemirror/legacy-modes/mode/go';
import CodeMirror from '@uiw/react-codemirror';
import { useEffect, useState } from 'react';
import { eclipse } from "@uiw/codemirror-theme-eclipse";
```

- These lines import required libraries for the code editor component. **`@codemirror/language`** and **`@codemirror/legacy-modes/mode/go`** are used for syntax highlighting and formatting of code written in Go language. **`@uiw/react-codemirror`** is the code editor component that we'll use, while **`react`** is a library for building user interfaces, and **`@uiw/codemirror-theme-eclipse`** provides an eclipse-like theme for the code editor.

```
const CodeEditor = ({ code = '', editable = false, setCode, language }) => {
```

- This is a functional component called **`CodeEditor`** that takes four props:
    - **`code`**: A string of code to display in the editor (default is an empty string).
    - **`editable`**: A boolean to determine whether the code in the editor is editable or not (default is **`false`**).
    - **`setCode`**: A function to update the **`code`** prop whenever the user changes the code in the editor.
    - **`language`**: A string indicating which programming language the code is written in (this will be used for syntax highlighting).

```
  const [copyText, setCopyText] = useState('Copy');
```

- This creates a state variable called **`copyText`** with an initial value of **`'Copy'`**. We'll use this variable to keep track of whether the user has copied the code from the editor or not.

```
  useEffect(() => {
    const timeout = setTimeout(() => {
      setCopyText('Copy');
    }, 2000);
    return () => clearTimeout(timeout);
  }, [copyText]);
```

- This effect hook sets a timeout to change the **`copyText`** variable back to **`'Copy'`** after 2 seconds. It will run whenever the **`copyText`** variable changes.

```
  const config = {
    lineNumbers: true,
    mode: language,
    indentUnit: 4,
    smartIndent: true,
    indentWithTabs: false,
    electricChars: true,
    autoCloseBrackets: true,
    matchBrackets: true,
    extraKeys: { 'Ctrl-Space': 'autocomplete' },
    // theme: eclipse,
    indent: {
      auto: true,
    },
  };
```

- This creates a configuration object called **`config`** that we'll pass to the **`CodeMirror`** component later. It contains various options for the code editor, including:
    - **`lineNumbers`**: A boolean indicating whether to show line numbers.
    - **`mode`**: The programming language syntax highlighting mode.
    - **`indentUnit`**: The number of spaces to use for indentation.
    - **`smartIndent`**: A boolean indicating whether to use smart indentation.
    - **`indentWithTabs`**: A boolean indicating whether to use tabs for indentation.
    - **`electricChars`**: A boolean indicating whether to use "electric characters" to automatically indent code.
    - **`autoCloseBrackets`**: A boolean indicating whether to automatically close brackets.
    - **`matchBrackets`**: A boolean indicating whether to highlight matching brackets.
    - **`extraKeys`**: An object with key-value pairs of extra keyboard shortcuts to add to the editor.
    - **`indent`**: An object with options related to indentation, including an **`auto`** property that automatically indents code.

## Complete code

The following is the complete code. Go ahead copy and paste in your file!

```
// Importing required modules
import { StreamLanguage } from '@codemirror/language';
import { go } from '@codemirror/legacy-modes/mode/go';
import CodeMirror from '@uiw/react-codemirror';
import { useEffect, useState } from 'react';
import { eclipse } from "@uiw/codemirror-theme-eclipse";

// Defining the CodeEditor component
const CodeEditor = ({ code = '', editable = false, setCode, language }) => {

  // Setting the initial value of copyText state to 'Copy'
  const [copyText, setCopyText] = useState('Copy');

  // Resetting the copyText state to 'Copy' after 2 seconds
  useEffect(() => {
    const timeout = setTimeout(() => {
      setCopyText('Copy');
    }, 2000);
    return () => clearTimeout(timeout);
  }, [copyText]);

  // Configuration options for CodeMirror component
  const config = {
    lineNumbers: true,
    mode: language, // Programming language mode
    indentUnit: 4, // Number of spaces per indent
    smartIndent: true, // Smart indentation
    indentWithTabs: false, // Use spaces instead of tabs
    electricChars: true, // Automatically add closing brackets, quotes, etc.
    autoCloseBrackets: true, // Automatically close brackets
    matchBrackets: true, // Highlight matching brackets
    extraKeys: { 'Ctrl-Space': 'autocomplete' }, // Shortcut for autocomplete
    // theme: eclipse, // Editor theme
    indent: {
      // Auto indentation based on the programming language
      // Set `true` to use default indentation behavior, or provide a function to customize indentation
      auto: true,
    },
  };

  // Rendering the CodeEditor component
  return (
    <div className="relative border-2 border-t-0 border-black rounded-b-lg">
      {/* Copy button */}
      <button
        className="absolute right-1 top-1 z-10 rounded bg-[#C53AAE] p-1 text-xs text-white hover:bg-[#2D2E3A] active:bg-[#2D2E3A] "
        onClick={() => {
          navigator.clipboard.writeText(code);
          setCopyText('Copied!');
        }}
      >
        {copyText}
      </button>

      {/* CodeMirror editor */}
      <CodeMirror
          editable={editable}
          value={code}
          minHeight="300px"
          maxHeight="300px"
          extensions={[StreamLanguage.define(go)]} // Initializing the CodeMirror editor with Go programming language support
          config={config}
          onChange={(value) => setCode(value)}
          className="rounded-b-xl"
      />
    </div>
  );
};

// Exporting the CodeEditor component as the default export
export default CodeEditor;
```

We are done with adding our first code component, Cheers!!! Let’s move on to the next component of the code in the next lesson. Happy and dope learning!!!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/2.%20Let%E2%80%99s%20Start%20Coding.md

Let’s Start Coding

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/3.%20Enhance%20Your%20Front-End.md

Enhance Your Front-End

# Create The Home-Page

Let’s dive into building the cool home page of our application.

We need to build our homepage to welcome our users to use the application. It needs to allow the user to add and edit the code, choose the respective languages, and click on translate button to view the output. So in this lesson, we will discuss a description of a webpage that will help you translate code from one programming language to another. 

## Home page

We will use **`index.js`** file for defining our home page. It is a front page for a simple web application for translating code from one programming language to another. There are different parts on the page where you can write in code and select the programming languages you want to translate from and to. When you click a button, the webpage sends your code to a translation tool and shows you the translated code. There are also some pictures and links on the page that you can click on.

The background image and Twitter icon are imported and displayed in the UI. Finally, the component includes a link to the API provider's website and a button to share the app on Twitter.

Home page will look like this:

![homePage.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Create%20The%20Home-Page%20460bfb021fb44ac58647efdbd75c49aa/homePage.gif)

### Create file

Use the **`index.js`** file in the **`pages/api`** folder. This file will contain the code for our home page, which we will discuss in this lesson.

![Screen Shot 2023-04-25 at 4.54.31 PM.png](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Create%20The%20Home-Page%20460bfb021fb44ac58647efdbd75c49aa/Screen_Shot_2023-04-25_at_4.54.31_PM.png)

## Code summary

Here's what the code will do in simpler terms:

- The code will check if the selected input and output languages are different, if not, it will display an alert message and stop the translation.
- It will also check if there is input code, and if not, it will display an alert message and stop the translation.
- If the length of the input code is longer than a certain limit, it will display an alert message and stop the translation.
- The loading state variable will be set to true and the output code will be cleared.
- A POST request will be sent to a translation API with the input language, output language, and input code as the request body. If there is an error, an alert message will be displayed, and the loading state variable will be set to false.
- The translated output code will be displayed in the UI by parsing the response using a TextDecoder.
- Finally, the loading state variable will be set to false, and the UI will be displayed with the input and output code windows, a translate button, and a link to the API provider's website. There will also be an option to share the app on Twitter.

## Code explanation

Let's go through the code line by line and explain what it does:

```
import { useState } from 'react';
```

- This line imports the **`useState`** hook from the **`react`** library. We'll use this hook to manage state in our component.

```
import CodeWindow from '@/components/CodeWindow';
```

- This line imports the **`CodeWindow`** component from a local component file.

```
import background from '@/public/background.jpg';
import twitter_image from '@/public/twitter.png';
import Image from 'next/image';
```

- These lines import some image files and the **`Image`** component from the **`next/image`** library. We'll use the **`Image`** component to display our images.

```
export default function Home() {
```

- This line defines a new component called **`Home`**, which we'll use as the main page of our application.

```
  const [loading, setLoading] = useState(false);
  const [inputCode, setInputCode] = useState(``);
  const [outputCode, setOutputCode] = useState('');
  const [inputLanguage, setInputLanguage] = useState('JavaScript');
  const [outputLanguage, setOutputLanguage] = useState('Python');
```

- These lines initialize several pieces of state using the **`useState`** hook. We'll use these state variables to manage the user's input and the translation process.

```
  const handleInputLanguageChange = (option) => {
    setInputLanguage(option.value)
    setInputCode('')
    setOutputCode('')
  }
```

- This function is called when the user changes the input language dropdown. It updates the **`inputLanguage`** state variable and resets the input and output code.

```
  const handleOutputLanguageChange = (option) => {
    setOutputLanguage(option.value)
    setOutputCode('')
  }
```

- This function is called when the user changes the output language dropdown. It updates the **`outputLanguage`** state variable and resets the output code.

```
const handleTranslate = async () => {
```

- This is defining a function called **`handleTranslate`**. It's using an **`async`** function, which means that it will run asynchronously and may have to wait for certain actions to complete before moving on to the next step.

```
const maxCodeLength = 6000;
```

- This sets a maximum length for the code that the user can input. The value is set to 6000 characters.

```
if (inputLanguage === outputLanguage) {
  alert('Please select different languages.');
  return;
}
```

- This checks if the user has selected the same language for both input and output. If they have, it will display an alert with a message and then stop running the function using the **`return`** statement.

```
if (!inputCode) {
  alert('Please enter some code.');
  return;
}
```

- This checks if the user has entered any code in the input field. If they haven't, it will display an alert with a message and then stop running the function using the **`return`** statement.

```
if (inputCode.length > maxCodeLength) {
  alert(
    `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`,
  );
  return;
}
```

- This checks if the length of the input code is greater than the maximum length set earlier. If it is, it will display an alert with a message including the maximum length and the current length of the input code. It will then stop running the function using the **`return`** statement.

```
setLoading(true);
setOutputCode('');
```

- These two lines are setting the **`loading`** state to **`true`** and the **`outputCode`** state to an empty string. This will clear the output field and show a loading spinner to indicate that the translation is in progress.

```
const controller = new AbortController();

const body = {
  inputLanguage,
  outputLanguage,
  inputCode
};
```

- These lines create an **`AbortController`** object and a **`body`** object containing the **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`** variables. The **`AbortController`** will be used later to cancel the fetch request if needed.

```
const response = await fetch('/api/translate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  signal: controller.signal,
  body: JSON.stringify(body),
});

if (!response.ok) {
  setLoading(false);
  alert('Something went wrong.');
  return;
}
```

- This line sends a **`POST`** request to the **`/api/translate`** endpoint with the **`body`** object as the request body. It also sets the **`Content-Type`** header to **`application/json`** and includes the **`AbortController`** signal. The **`response`** variable will hold the response from the server.
- The **`if`** statement checks if the response was not **`ok`**. If it wasn't, it sets the **`loading`** state to **`false`**, displays an alert with a message, and stops running the function using the **`return`** statement.

```
const data = response.body;

if (!data) {
  setLoading(false);
  alert('Something went wrong.');
  return;
}
```

- This line assigns the response body to the **`data`** variable. It then checks if **`data`** is not truth. If it isn't, it sets the **`loading`** state to **`false`**, displays an alert with a message, and stops running the function using the **`return`** statement.

```
const reader = data.getReader();
```

- It creates a new instance of the **`TextDecoder`** object that can be used to decode data in different formats such as UTF-8, UTF-16, etc.

```
let done = false;

    while (!done) {
      const { value, done: doneReading } = await reader.read();
      done = doneReading;
      const chunkValue = decoder.decode(value);

      setOutputCode((prevCode) => prevCode + chunkValue);
    }

    setLoading(false);
```

- **`let done = false;`**: initializes a boolean variable `**done**` with **`false`**.
- **`while (!done) {`**: starts a while loop that will keep running as long as the **`done`** variable is **`false`**.
- **`const { value, done: doneReading } = await reader.read();`**: calls the **`read()`** method on the **`reader`** object to read the next chunk of data from the response. It returns an object with two properties: **`value`** (the actual data that was read) and **`doneReading`** (a boolean value that indicates whether the entire response has been read). This object is destructured and assigned to `**value**` and **`doneReading`** variables respectively.
- **`done = doneReading;`**: updates the value of the **`done`** variable to match the **`doneReading`** value, which indicates whether the entire response has been read or not.
- **`const chunkValue = decoder.decode(value);`**: decodes the **`value`** using the **`TextDecoder`** object created earlier and assigns it to the **`chunkValue`** variable.
- **`setOutputCode((prevCode) => prevCode + chunkValue);`**: updates the state of the **`outputCode`** variable by appending the **`chunkValue`** to the previous value of **`outputCode`**.
- **`setLoading(false);`**: updates the state of the **`loading`** variable to **`false`**. This indicates that the translation process is complete and the loading spinner can be hidden.

## Complete code

The following is the complete code. Go ahead copy and replace the **`index.js`** code with this code:

```
// Validation checks before starting translation
if (inputLanguage === outputLanguage) {
  alert('Please select different languages.');
  return;
}

if (!inputCode) {
  alert('Please enter some code.');
  return;
}

if (inputCode.length > maxCodeLength) {
  alert(
    `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`,
  );
  return;
}

// Setting loading state variable to true and clearing output code
setLoading(true);
setOutputCode('');

// Creating a new AbortController and a request body
const controller = new AbortController();
const body = {
  inputLanguage,
  outputLanguage,
  inputCode
};

// Sending a POST request to the /api/translate endpoint with request body as JSON
const response = await fetch('/api/translate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  signal: controller.signal,
  body: JSON.stringify(body),
});

// Handling error cases
if (!response.ok) {
  setLoading(false);
  alert('Something went wrong.');
  return;
}

const data = response.body;

if (!data) {
  setLoading(false);
  alert('Something went wrong.');
  return;
}

// Parsing the response using a TextDecoder and updating output code
const reader = data.getReader();
const decoder = new TextDecoder();
let done = false;

while (!done) {
  const { value, done: doneReading } = await reader.read();
  done = doneReading;
  const chunkValue = decoder.decode(value);

  setOutputCode((prevCode) => prevCode + chunkValue);
}

// Setting loading state variable to false
setLoading(false);

return (
    <div className='flex flex-col items-center justify-center'>
      <Image className='fixed left-0 top-0 w-screen h-screen -z-10' src={background} alt='Background' />
      <h1 className='font-sans text-5xl justify-center font-bold pt-5 '>Code Translator</h1>
      <h2 className="font-sans mt-5 text-xl justify-center text-slate-600 mb-10">Translate your code to another programming language. With just a click.</h2>
      {/* input code window */}
      <CodeWindow code={inputCode} setCode={setInputCode} loading={loading} handleLanguageChange={handleInputLanguageChange} language={inputLanguage} />
      
      {/* translate button */}
      <button disabled={loading} className='bg-[#C53AAE]  border-white p-3 m-2 flex justify-center items-center rounded-lg text-white font-semibold' onClick={handleTranslate}>{loading ? `Translating...` : `Translate 🔁`}</button>

      {/* output code window */}
      <CodeWindow code={outputCode} setCode={setOutputCode} loading={loading} handleLanguageChange={handleOutputLanguageChange} language={outputLanguage} />
      <p className="font-sans mt-5 pb-5">Powered by <a className="ref-link text-[#C53AAE]" href="http://metaschool.so/" target="_blank" rel="noopener noreferrer">metaschool 🔮</a></p>
      <a className=' flex font-sans mb-5 p-1 items-center' href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this awesome code translator!')}&url=${encodeURIComponent('https://metaschool.so')}`} target="_blank" rel="noopener noreferrer"><Image className='mr-0.5 justify-center' src={twitter_image} alt="Twitter" />Share it on Twitter</a>
    </div>
    
  )
}
```

We are done with adding our home page, Yayyy!!! Let’s try running our app now.

## Run your app

To run your app, run the following command:

```
npm run dev
```

Let’s see the output of this command:

![npm run dev.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Create%20The%20Home-Page%20460bfb021fb44ac58647efdbd75c49aa/npm_run_dev.gif)

Head over to the **`http://localhost:3000`** URL, and see what you have built so far.

![home page.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Create%20The%20Home-Page%20460bfb021fb44ac58647efdbd75c49aa/home_page.gif)

Let’s move on to the back-end of our application in the next lesson. Happy and dope learning!!!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/4.%20Create%20The%20Home-Page.md

Create The Home-Page

# Prompt Engineering

So far we worked on the front-end of our application. Now we need to work on the back-end of our application. For back-end, we need to interact with OpenAI API and train our model using prompt engineering so that it can generate the code and also convert the code to different programming languages.

## Generate natural language responses

In order to make the back-end of our application, we will define a function called **`OpenAIStream`** that interacts with the OpenAI API to generate natural language responses based on input prompts. The function takes three parameters: **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`**.

It sends a POST request to the OpenAI API with the prompt and some other options and receives a response that is a readable stream. The response is then parsed line by line using the **`eventsource-parser`** library and converted to text using **`TextEncoder`** and **`TextDecoder`**.

Finally, the parsed text is returned as a readable stream for further processing.

### Create folder and file

Create a folder named **`utils`** and under it create a file named **`index.js`**. 

![Screen Shot 2023-04-25 at 6.04.14 PM.png](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Prompt%20Engineering%20efcd067a11a14446a0085d843444f764/Screen_Shot_2023-04-25_at_6.04.14_PM.png)

## Code summary

Here's what the code will do in simpler terms:

- A function named **`createPrompt`** will be defined that takes **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`** as input parameters and creates a prompt message based on those parameters.
- A function named **`OpenAIStream`** will be exported that will send a POST request to the OpenAI GPT-3 API with the prompt message and return the response as a stream.
- Inside **`OpenAIStream`**, **`createPrompt`** will be called to create a prompt message.
- A system message will be defined as an object with a role and content.
- A fetch request will be sent to the OpenAI GPT-3 API with the system message and stream parameters, including the GPT-3 model, system message, temperature, and stream.
- The response of the fetch request will be returned as a stream.

## Code explanation

This code appears to be a JavaScript module that exports a function called **`OpenAIStream`**. Here is a line-by-line explanation of the code:

```
import endent from 'endent';
import { createParser } from 'eventsource-parser';
```

- **`import`** statements are used to import functions or modules from external files.
- In this code, the **`endent`** and **`createParser`** functions are being imported from two different modules: **`endent`** and **`eventsource-parser`**.

```
const createPrompt = (inputLanguage, outputLanguage, inputCode) => {

```

- **`createPrompt`** is a function that takes in three parameters: **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`**.
- The **`=>`** syntax indicates that this function is an arrow function.
- The prompt is constructed based on the input parameters, and includes examples of how to translate code between different languages.

```
if (inputLanguage === 'Natural Language') {

```

- This is the beginning of an **`if`** statement that checks if the **`inputLanguage`** parameter is equal to the string **`'Natural Language'`**.

```
return endent`
    You are an expert programmer in all programming languages. Translate the natural language to "${outputLanguage}" 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}

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

```

- If the **`inputLanguage`** is equal to **`'Natural Language'`**, this block of code is executed.
- The **`endent`** function is used to format the string returned by this function, which allows for multi-line strings with indentation.
- The returned string provides instructions for the user to translate natural language to the **`outputLanguage`** code.
- It includes an example of translating natural language to JavaScript.
- It also includes the **`inputCode`** parameter and prompts the user to provide the **`outputLanguage`** code.

```
} else if (outputLanguage === 'Natural Language') {

```

- This **`else if`** block is executed if the **`outputLanguage`** parameter is equal to **`'Natural Language'`**.

```
return endent`
      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to natural language in plain English that the average adult could understand. Respond as bullet points starting with -.

      Example translating from JavaScript to natural language:

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

      Natural language:
      Print the numbers 0 to 9.

      ${inputLanguage} code:
      ${inputCode}

      Natural language:
     `;

```

- The returned string in this block of code prompts the user to translate **`inputLanguage`** code to natural language that the average adult could understand.
- It includes an example of translating JavaScript code to natural language.
- It also includes the **`inputCode`** parameter and prompts the user to provide the natural language translation.

```
} else {

```

- This **`else`** block is executed if none of the previous conditions were met.

```
return endent`
      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to "${outputLanguage}" code. Do not include \\\\`\\\\`\\\\`.

      Example translating from JavaScript to Python:

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

      Python code:
      for i in range(10):
        print(i)

      ${inputLanguage} code:
      ${inputCode}

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

```

- The returned string in this block of code prompts the user to translate **`inputLanguage`** code to **`outputLanguage`** code.
- It includes an example of translating JavaScript code to Python.
- It also includes the **`inputCode`** parameter and prompts the user to provide the output.

```
export const OpenAIStream = async (inputLanguage, outputLanguage, inputCode) => {
  const prompt = createPrompt(inputLanguage, outputLanguage, inputCode);

  const system = { role: 'system', content: prompt };

  const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer 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`,
    },
    method: 'POST',
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [system],
      temperature: 0,
      stream: true,
    }),
  });
```

- Overall, this code calls the OpenAI API to translate code between programming languages based on the **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`** parameters that are passed into the **`OpenAIStream()`** function.
    - **`export const OpenAIStream = async (inputLanguage, outputLanguage, inputCode) => {`**: This line defines a named export of a function called **`OpenAIStream`**, which is an asynchronous function that takes three parameters - **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`**.
    - **`const prompt = createPrompt(inputLanguage, outputLanguage, inputCode);`**: This line declares a constant variable called **`prompt`** which is assigned the result of calling the **`createPrompt()`** function with the **`inputLanguage`**, **`outputLanguage`**, and **`inputCode`** arguments.
    - **`const system = { role: 'system', content: prompt };`**: This line declares a constant variable called **`system`** which is assigned an object with two properties - **`role`** and **`content`**.
        - The **`role`** property is set to the string **`'system'`**.
        - The **`content`** property is set to the value of the **`prompt`** variable.
    
    ```
    const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer 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`,
        },
        method: 'POST',
        body: JSON.stringify({
          model: 'gpt-3.5-turbo',
          messages: [system],
          temperature: 0,
          stream: true,
        }),
      });
    ```
    
    - This line makes an asynchronous call to the OpenAI API using the **`fetch()`** method. It sends a POST request to the API endpoint with a JSON object that contains a **`model`**, **`messages`**, **`temperature`**, and **`stream`** property. The **`messages`** property is an array containing the **`system`** object that was defined earlier. The **`Authorization`** header is included in the request, which contains an API key required to access the OpenAI API. The response from the API is stored in the **`res`** variable using the **`await`** keyword, which waits for the response to be received before continuing execution.

## 

## Complete code

The following is the complete code. Go ahead copy and replace the **`index.js`** code with this code:

```
// import required modules
import endent from 'endent'; // string indentation library
import { createParser } from 'eventsource-parser'; // eventsource parser for parsing stream data

// define a function that creates a prompt message based on the input and output language and input code
const createPrompt = (inputLanguage, outputLanguage, inputCode) => {
  // if input language is natural language
  if (inputLanguage === 'Natural Language') {
    // return a prompt message asking to translate natural language to output language code
    return endent`
      You are an expert programmer in all programming languages. Translate the natural language to "${outputLanguage}" 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}
      ${outputLanguage} code (no \`\`\`):
    `;
  // if output language is natural language
  } else if (outputLanguage === 'Natural Language') {
    // return a prompt message asking to translate input language code to natural language
    return endent`
      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to natural language in plain English that the average adult could understand. Respond as bullet points starting with -.
      Example translating from JavaScript to natural language:
      JavaScript code:
      for (let i = 0; i < 10; i++) {
        console.log(i);
      }
      Natural language:
      Print the numbers 0 to 9.
      ${inputLanguage} code:
      ${inputCode}
      Natural language:
    `;
  // otherwise, output language is a programming language
  } else {
    // return a prompt message asking to translate input language code to output language code
    return endent`
      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to "${outputLanguage}" code. Do not include \`\`\`.
      Example translating from JavaScript to Python:
      JavaScript code:
      for (let i = 0; i < 10; i++) {
        console.log(i);
      }
      Python code:
      for i in range(10):
        print(i)
      ${inputLanguage} code:
      ${inputCode}
      ${outputLanguage} code (no \`\`\`):
    `;
  }
};

// define a function that sends a request to the OpenAI GPT-3 API with the prompt message and returns the response as a stream
export const OpenAIStream = async (inputLanguage, outputLanguage, inputCode) => {
  // create the prompt message using the createPrompt function
  const prompt = createPrompt(inputLanguage, outputLanguage, inputCode);

  // define the system message as an object with a role and content
  const system = { role: 'system', content: prompt };

  // send a POST request to the OpenAI GPT-3 API with the system message and stream parameters
  const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer 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`,
    },
    method: 'POST',
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [system],
      temperature: 0,
      stream:
```

Wohooo! The code is for the prompt engineering is done. We can now ask our AI code to write code by giving them instruction in natural language 🎉!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/5.%20Prompt%20Engineering.md

Prompt Engineering

# Create a Serverless Function

Now we will create a serverless function that takes in some input parameters, sends them to OpenAI's API, and returns a response. This serverless function will help us making a request and receiving a response from OpenAI API. 

## General usecase

The serverless function will be used to create a language processing tool that can perform tasks like translation, summarization, sentiment analysis, and question answering. It will work by taking input parameters such as the language of the input, the language of the output, and the code to be processed. These parameters are sent to OpenAI's API, which processes the information and returns a response.

### Example

For example, if you wanted to translate a sentence from English to Spanish, you would pass in the English sentence as the **`inputCode`**, specify the **`inputLanguage`** as English, and the **`outputLanguage`** as Spanish. The code would then send this information to OpenAI's API, which would perform the translation and return the Spanish translation.

### Usage

The serverless function can be used as a starting point for building customized language processing applications to suit various needs. By using this code, developers can build tools that perform specific tasks based on the input parameters provided. The code also catches errors, so if anything goes wrong, the function will return an error message.

Let’s dive into creating and building the serverless function.

## Create file

Create a file called **`translate.js`** under the **`pages/api`** folder and delete the existing files in this folder. We will use this file to write our code for serverless function. Here’s the file structure:

![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Create%20a%20Serverless%20Function%20f2193ef54e8a41df9955ab877fcd17d9/Untitled.png)

## Code summary

Here's what the code will do in simpler terms:

- This code will be an example of a serverless function that takes in some input parameters, sends them to OpenAI's API, and returns a response.
- First, it will import a function called **`OpenAIStream`** from a utility file located in the **`@/utils`** directory.
- Then, it will define a constant called **`config`** which will contain a single property called **`runtime`** set to the string value **`'edge'`**.
- After that, the code will define an **`async`** function called **`handler`** that will take two parameters, **`req`** and **`res`**, which stand for "request" and "response," respectively. This function will be the main entry point for the serverless function.
- Within the **`handler`** function, it will wait for the incoming request data to be parsed as JSON, and destructures the resulting object into three variables:
    - **`inputLanguage`**,
    - **`outputLanguage`**, and
    - **`inputCode`**.
- Next, it will call the **`OpenAIStream`** function with the input parameters and wait for a response to be returned.
- Finally, it will return a new **`Response`** object containing the **`stream`** response from the **`OpenAIStream`** function.
- If any errors occur during this process, the code will catch them and send a **`500`** status code with the error message **`"Error"`** in the response body.

## Code explanation

Let's go through the code step-by-step to see how it works.

```
import { OpenAIStream } from '@/utils';
```

- **`import`** is a keyword that allows us to access functions and objects from other files
- **`{ OpenAIStream }`** specifies the name of the function we want to import from the **`'@/utils'`** file
- **`'@/utils'`** is a file path that specifies where the **`'OpenAIStream'`** function can be found

```
export const config = {
  runtime: 'edge',
};
```

- **`export`** is a keyword that allows us to make the **`config`** object available to other files
- **`config`** is an object that specifies configuration options for the serverless function
- **`runtime: 'edge'`** specifies that the function should be executed using the Cloudflare Workers "edge" runtime

```
export default async function handler(req, res) {
```

- **`export default`** is a keyword that allows us to make the **`handler`** function available to other files
- **`async function`** is a function that can use **`await`** to wait for asynchronous operations to complete
- **`handler`** is the name of the function that will handle incoming requests to the serverless function
- **`(req, res)`** are the parameters that the **`handler`** function will take in
    - **`req`** stands for request and contains information about the incoming request
    - **`res`** stands for response and contains methods to send a response back to the client

```
  try {
    const { inputLanguage, outputLanguage, inputCode } = await req.json();
```

- **`try`** is a keyword that starts a block of code that may throw an error
- **`const`** is a keyword that creates a constant variable that cannot be changed
- **`{ inputLanguage, outputLanguage, inputCode }`** is an object destructuring syntax that extracts three properties from the JSON data that is sent in the request body
- **`await req.json()`** is an asynchronous operation that waits for the request body to be parsed as JSON

```
    const stream = await OpenAIStream(
      inputLanguage,
      outputLanguage,
      inputCode
    );
```

- **`const stream`** creates a constant variable called **`stream`**
- **`await OpenAIStream(...)`** is an asynchronous operation that waits for the **`OpenAIStream`** function to return a response
- **`(...)`** is a syntax that passes in the three variables (**`inputLanguage`**, **`outputLanguage`**, and **`inputCode`**) as parameters to the **`OpenAIStream`** function

```
    return new Response(stream);
```

- **`return`** is a keyword that specifies what the function should return when it is called
- **`new Response(stream)`** creates a new HTTP response object with the contents of the **`stream`** variable

```
  } catch (error) {
    res.status(500).send('Error')
  }
```

- **`catch`** is a keyword that specifies what the function should do if an error is thrown in the **`try`** block
- **`error`** is the name of the variable that will contain the error message
- **`res.status(500)`** sets the status code of the HTTP response to **`500`** (Internal Server Error)
- **`res.send('Error')`** sends the string **`'Error'`** as the response body

## Complete code

The following is the complete code. Go ahead copy and paste the following code in **`translate.js`** file under the **`pages/api`** folder. 

```
// Import the OpenAIStream function from the '@/utils' file
import { OpenAIStream } from '@/utils';

// Define the configuration for the serverless function
export const config = {
  runtime: 'edge',
};

// Define the main function for the serverless function
export default async function handler(req, res) {
  try {
    // Parse incoming request data as JSON
    const { inputLanguage, outputLanguage, inputCode } = await req.json();
    
    // Call the OpenAIStream function with input parameters
    const stream = await OpenAIStream(
      inputLanguage,
      outputLanguage,
      inputCode
    );

    // Return the response from the OpenAIStream function
    return new Response(stream);
  } catch (error) {
    // Catch errors and return an error message
    res.status(500).send('Error')
  }
}
```

Congratulations 🎉🎊 We have completed the code translator application. Next we will run the application and try translating different code snippets.


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/6.%20Create%20a%20Serverless%20Function.md

Create a Serverless Function

# Let’s Try Our Code Translator

So we are in the final lesson, keep the excitement high because we are just few steps away from having our very own AI bot which can translate the code.

## Let’s ignite our app

Run the following command in your terminal to kickstart you code translator.

```
npm run dev
```

Let’s look at how the output will look like after running this command.

![run npm.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Try%20Our%20Code%20Translator%20095ca019a60849d0957ef85d6ea2d069/run_npm.gif)

Now, head over to the **`http://localhost:3000`** and start experimenting with the code translator. The code translator UI will look like this: 

![final look.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Try%20Our%20Code%20Translator%20095ca019a60849d0957ef85d6ea2d069/final_look.gif)

## Run examples

Let’s try running different examples in our code translator and check if the output is good.

### Example # 1

Let’s first of all try generating the code using natural language. Ask the code translator to write a complete linked list code in Python.

![example 1.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Try%20Our%20Code%20Translator%20095ca019a60849d0957ef85d6ea2d069/example_1.gif)

### Example # 2

Let’s use the Python linked list code and convert it into Javascript.

![example 2.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Try%20Our%20Code%20Translator%20095ca019a60849d0957ef85d6ea2d069/example_2.gif)

### Example # 3

Now let’s convert the Javascript code to GoLang.

![example 3.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Try%20Our%20Code%20Translator%20095ca019a60849d0957ef85d6ea2d069/example_3.gif)

As you can observe that code translator is working like wonders and giving us the accurate output.

🎊Congratulations you have successfully created your very own AI bot!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/7.%20Let%E2%80%99s%20Try%20Our%20Code%20Translator.md

Let’s Try Our Code Translator

Build Some Cool Stuff

Wrap up the course and enjoy using your cool AI bot.

# Let’s Wrap It Up

## 🎊CONGRATULATIONS!

Congratulations on completing this cool course and taking your AI development skills to the next level.

We just wrapped up a lit course on how to use OpenAI to make a bot that can translate the code to any other programming language. Now, it's time to take a moment and go over all the cool stuff we learned in this course.

## You revised the AI and OpenAI concepts

At the start of this course, we revised the AI and OpenAI concepts and learned how AI is revolutionizing this modern world. We revised the different GPT models and learned how to access OpenAI API. 

## You learned how to write text generation code in NodeJS

Before starting the code translator, you first learned to install the NodeJS in your system. You learned how you can setup the NodeJS app and write the code that uses OpenAI API and generates text. You learned how to train the model using prompts.

## You learned how to set up the development environment

At the start of the code translator, you learned how to use the GitHub desktop and clone your app. You learned to install the dependencies and ran your first NextJS program.

## You learned to build an AI bot

After setting up the basic NextJS application, we dived straight into creating the front-end of our application. You learned to create the code editor that allows to copy the code, language selector scroll down bar, and code window where you can write and edit the code. Then you learned to create a languages array containing all of the languages you wanted to populate the dropdown with. Lastly, for front-end, you learned to create a home page in NextJS.

After creating the front-end, you learned prompt engineering. You learned how you can train the model and write the back-end for your application.

Lastly, you learned how you can run your application and experiment with it.

## Daily life use

You can use this AI bot in your daily life.

1. You want to learn a new programming language? Head over to code translator and ask to generate the code or convert the code using the programming language you already know.
2. You already have written a piece of code in one language but finding it hard to write the same logic again in another language? Head over to code translator and convert your code in an instant.

## Stay Connected

Don't forget to flex your new AI bot on Twitter and tag us @0xmetaschool. Stay connected with us and keep leveling up. Remember, OpenAI is a game-changer that can transform the world as we know it. So keep pushing boundaries, keep expanding your knowledge, and let's change the game together.

We appreciate you taking this journey with us and hope to see you again in our future courses. Keep hustlin'!

WAGMI! Peace out! ✌🏻🔮

https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/3.%20Let%E2%80%99s%20Wrap%20It%20Up/Let%E2%80%99s%20Wrap%20It%20Up.md

Build a Code Translator Using NextJS and OpenAI API

Project Curriculum

Ready, Set, Build!

Build Some Cool Stuff

Let’s Wrap It Up

🎉 Completion

Get your NFT Image

Why metaschool?

NFT Certificates

Free of cost

Expert Trainer

Self Paced

Frequently asked questions