An OpenAI learning track designed for developers to gain expertise in leveraging OpenAI's advanced AI models and tools. This track emphasizes practical skills in implementing and fine-tuning models like GPT for various applications, while fostering an understanding of ethical AI use and innovation.

OpenAI

Ever wondered whether Kanye intelligence can outperform artificial intelligence? Build your own chatbot in our Kanye-themed AI prompt engineering training and find out whose intelligence reigns supreme. This detailed one-of-a-kind AI chatbot is inspired by the eccentric personality of pop celebrity Kanye West but you can always choose your own personality. Build today. Use tomorrow.

<p>Yo, yo, yo! What's good, everyone? We are Metaschool, and today we’re here to tell you about a course that's gonna blow your mind!</p><p>We're talking about a course where we're gonna teach you how to make your very own Twitter AI bot using the latest and greatest technology - the GPT-4 model. And not just any bot, we're talking about a bot that's gonna mimic the one and only, Kanye West.</p><p>Now, I know you're probably thinking, "Hey, why would I want to make a bot that sounds like Kayne?" Well, let me tell you, my friend, there's nothing cooler than having your own personal Kanye West AI bot spitting out fire tweets and dropping knowledge bombs like it's nobody's business!</p><p>But don't take my word for it, you gotta try it out for yourself. We've got a live <a href="https://twitter.com/0xyechatgpt" alt="Kanye West AI bot on Twitter" class="on">Kanye West AI bot on Twitter</a>&nbsp;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.</p><p>So, are you ready to step up and take on the challenge? Let's do this, fam!</p><h2><strong>Learning Objectives</strong></h2><p>Throughout the course, we'll be learning about some crazy stuff, including:</p><ol><li>Discovering what OpenAI API is and how it works – get ready to unleash your creativity with its insane tools.<br></li><li>Learning the fundamentals of OpenAI API and unlocking its full potential – no cap.<br></li><li>Playing with OpenAI Playground and writing your first few prompts – get ready to watch your ideas come to life!<br></li><li>Setting up the development environment and getting your hands on those OpenAI credentials – start building your dream projects like a pro!<br></li><li>Creating a simple GPT-4 model and witnessing the magic of AI-powered responses – it's gonna blow your mind!<br></li><li>Building and running a Twitter AI bot from scratch using OpenAI API and getting responses on your tweets from Kanye himself – like, for real!<br></li></ol><h2><strong>Prerequisites</strong></h2><p>Learning new tech is always easier when you got some prior knowledge. So, before diving into OpenAI and AI model development, we recommend brushing up on the following:</p><ol><li><strong>API basics</strong>: It's super helpful if you got a basic understanding of APIs and how to use them.</li><li><strong>Critical thinking</strong>: To wrap your head around the complex and abstract concepts in OpenAI and AI, you'll need some solid critical thinking skills.<br></li></ol><p>But don't sweat it, my peeps – 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. So let's get learning, fam – it's gonna be lit!</p><p><br></p>

# What’s Up?

Yo! Wat's good, everyone? We are Metaschool, and today we’re here to tell you about a course that's gonna blow your mind!

We're talking about a course where we're gonna teach you how to make your very own AI bot using the latest and greatest technology - the GPT-4 model. And not just any bot, we're talking about a bot that's gonna mimic the one and only, Kanye West.

Now, I know you're probably thinking, "Hey, why would I want to make a bot that sounds like Kayne?" Well, let me tell you, my friend, there's nothing cooler than having your own personal Kanye West AI bot spitting out fire tweets and dropping knowledge bombs like it's nobody's business!

Let me give you a sneak peek of the one and only YeBot that you're gonna build!

![yebot](https://github.com/user-attachments/assets/46ad39f7-7d50-4018-a256-58a9bb751712)

So, are you ready to step up and take on the challenge? Let's do this, fam! 

## Learning objectives

Throughout the course, we'll be learning about some crazy stuff, including:

1. Discovering what OpenAI API is and how it works – get ready to unleash your creativity with its insane tools.
2. Learning the fundamentals of OpenAI API and unlocking its full potential – no cap.
3. Playing with OpenAI Playground and writing your first few prompts – get ready to watch your ideas come to life!
4. Setting up the development environment and getting your hands on those OpenAI credentials – start building your dream projects like a pro!
5. Creating a simple GPT-4 model and witnessing the magic of AI-powered responses – it's gonna blow your mind!
6. Building a NextJS app and creating a local Python server API to connect the App with the model and get reply from Kanye himself – like, for real!

## Prerequisites

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

1. API basics: It's super helpful if you got a basic understanding of APIs and how to use them.
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.
3. Python installed: We assume that you have already installed python 3.8 in your system that can be used to run simple python programs.

But don't sweat it, my peeps – 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. So let's get learning, fam – it's gonna be lit!


## Proof of completion

If you complete this course with me today, you will be getting a special NFT, a utility token, which will unlock many more opportunities for you on the Metaschool platform. Here is how the NFT looks like.

![Untitled (1)](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/course%20NFT.gif?raw=true)

Now before we move forward, let’s set some house rules first.
1. Pleaseeeee do your quick assignments properly.
2. Join [our discord server](https://discord.gg/vbVMUwXWgc) and ask all relevant questions there.
3. We are a free open-source platform and if you follow us on [X](https://bit.ly/eth-dive-twitter) and [LinkedIn](https://bit.ly/eth-dive-linkedin), it would be a great support. 🫣
4. Stay happy and positive!


Alright guys, no need to wait any longer, let's start our NFTs exploration! 🙌


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/1.%20Ready%2C%20Set%2C%20Build!/1.%20What%E2%80%99s%20Up.md

What’s Up?

<p>Listen up, y'all, it's time to talk about something big. We're talking about AI and machine learning, two of the most cutting-edge technologies out there. These technologies are changing the game, from virtual assistants like Siri and Alexa to self-driving cars and even medical diagnosis.</p><h2>So, what is AI?</h2><p>It's the simulation of human intelligence in machines that can think and act like us. And there are two types of AI:</p><ul><li><strong>Narrow AI </strong>is designed to perform specific tasks, like image recognition or language translation</li><li><strong>General AI</strong> is designed to handle any intellectual task that a human can do. It can make decisions and learn from experience.<br></li></ul><h2>Now, let's talk about machine learning</h2><p>It's a subset of AI that focuses on teaching machines to learn and improve without being explicitly programmed. We train algorithms on data to identify patterns and make predictions, and the more data we use, the better the algorithm becomes.</p><h2>Types of machine learning</h2><p>There are three main types of Machine Learning. Each type has its own strengths and weaknesses and is used in different applications.​</p><ul><li><strong>Supervised Learning</strong>: This is the most common type of Machine Learning. It involves training an algorithm on labeled data, where the correct answers are already known. The algorithm learns to associate input data with the correct output.</li><li><strong>Unsupervised Learning</strong>: This type of Machine Learning involves training an algorithm on unlabeled data, where the correct answers are not known. The algorithm learns to identify patterns and group similar data points together.</li><li><strong>Reinforcement Learning</strong>: This type of Machine Learning involves training an algorithm to make decisions based on rewards or punishments. The algorithm learns to take actions that lead to the most rewards and avoid actions that lead to punishment.<br></li></ul><h2><strong>Applications of AI and Machine Learning</strong></h2><p>AI and Machine Learning have a wide range of applications in various industries, including:​</p><ul><li>Healthcare: AI can be used to analyze medical images, diagnose diseases, and develop personalized treatment plans.</li><li>Finance: AI can be used to detect fraudulent transactions, predict stock prices, and manage investments.</li><li>Retail: AI can be used to recommend products to customers, optimize supply chains, and improve customer service.</li><li>Transportation: AI can be used to develop autonomous vehicles, optimize routes, and predict maintenance needs.<br></li></ul><h2><strong>Future of AI and Machine Learning</strong></h2><p>Let me tell you about this AI and Machine Learning thing, it's crazy! The possibilities are endless, from self-driving cars to personalized healthcare, it's gonna change the game. But yo, we gotta keep it real and talk about the ethical side of things too. Privacy concerns and bias in decision-making are real issues that we need to address. As these technologies continue to evolve, we gotta make sure we're using them for the greater good, you feel me? Let's make sure we're using AI to benefit everyone, not just a select few.</p><h2>So, that's the wrap up, y'all</h2><p>AI and Machine Learning are changing the way we live and work, and we need to make sure we're using them for good.</p><p><br></p>

# Unleash the Possibilities of AI

Listen up, y'all, it's time to talk about something big. We're talking about AI and machine learning, two of the most cutting-edge technologies out there. These technologies are changing the game, from virtual assistants like Siri and Alexa to self-driving cars and even medical diagnosis.

## So, what is AI?

It's the simulation of human intelligence in machines that can think and act like us. And there are two types of AI: 

- **Narrow AI** is designed to perform specific tasks, like image recognition or language translation
- **General AI** is designed to handle any intellectual task that a human can do. It can make decisions and learn from experience.

## Now, let's talk about machine learning

It's a subset of AI that focuses on teaching machines to learn and improve without being explicitly programmed. We train algorithms on data to identify patterns and make predictions, and the more data we use, the better the algorithm becomes.

## Types of machine learning

There are three main types of Machine Learning. Each type has its own strengths and weaknesses and is used in different applications.

- **Supervised Learning**: This is the most common type of Machine Learning. It involves training an algorithm on labeled data, where the correct answers are already known. The algorithm learns to associate input data with the correct output.
- **Unsupervised Learning**: This type of Machine Learning involves training an algorithm on unlabeled data, where the correct answers are not known. The algorithm learns to identify patterns and group similar data points together.
- **Reinforcement Learning**: This type of Machine Learning involves training an algorithm to make decisions based on rewards or punishments. The algorithm learns to take actions that lead to the most rewards and avoid actions that lead to punishment.

## Applications of AI and Machine Learning

AI and Machine Learning have a wide range of applications in various industries, including:

- Healthcare: AI can be used to analyze medical images, diagnose diseases, and develop personalized treatment plans.
- Finance: AI can be used to detect fraudulent transactions, predict stock prices, and manage investments.
- Retail: AI can be used to recommend products to customers, optimize supply chains, and improve customer service.
- Transportation: AI can be used to develop autonomous vehicles, optimize routes, and predict maintenance needs.

## Future of AI and Machine Learning

Let me tell you about this AI and Machine Learning thing, it's crazy! The possibilities are endless, from self-driving cars to personalized healthcare, it's gonna change the game. But yo, we gotta keep it real and talk about the ethical side of things too. Privacy concerns and bias in decision-making are real issues that we need to address. As these technologies continue to evolve, we gotta make sure we're using them for the greater good, you feel me? Let's make sure we're using AI to benefit everyone, not just a select few.

Now that we have learned what AI and machine learning is. Let’s dive into one of the application of AI, ChatGPT.

## What is ChatGPT?

ChatGPT is a large-scale AI language model that can talk with people, just like you and me! ChatGPT use unsupervised learning that allows it to understand the conversations and generate appropriate responses.

**The way it works is like this**: you type something into a chatbox or ask a question, and ChatGPT uses all of its knowledge and experience to try to give you the best possible answer. Sometimes you might make a mistake or not understand something you say, but it's always learning and getting better over time.

### ChatGPT features

ChatGPT has a ton of cool features that make it one of the best AI language models out there. Here are some of them:

- It can understand and respond to natural language conversation.
- It can be trained on specific topics to provide more accurate and relevant responses.
- It can generate text in multiple languages.
- It can provide suggestions and recommendations based on user input.
- It can even code and tell jokes!

## Let’s get started with ChatGPT

Head over to [ChatGPT](https://chat.openai.com/) website and sign up. After signing up, you will see the interface like this:

![yebot](https://github.com/user-attachments/assets/e6bb354f-05cc-471a-9a8f-6d92bc62bb82)


### Experiment

Let’s start experimenting with ChatGPT.

**Example 1**

First of all, let’s try conversing with ChatGPT.

![first_chatgpt_conversation-ezgif com-resize](https://github.com/user-attachments/assets/4309b29c-8bf4-4e55-a14b-69de34795707)

**Example 2**

Let’s try asking ChatGPT that what should we do if we are bored and try asking for different suggestions. For example:

1. I am bored. What should I do?
2. I am bored. Suggest me dope anime.

![2nd_chatgpt_questions-ezgif com-optimize](https://github.com/user-attachments/assets/a563db94-2ad0-4790-bac2-750d5941b7dd)


💡 Did you notice how the response of ChatGPT changed after tweaking our question a little?

**Example 3**

Now, let’s ask ChatGPT to translate the phrase into Japanese: “Art lives, Man dies.”

![3rd_chatgpt_question-ezgif com-resize](https://github.com/user-attachments/assets/ebca2d3f-003d-4aa9-af32-38b7ce50dce2)


**Example 4**

Let’s ask ChatGPT to write a code!

![4th_chatgpt_question-ezgif com-resize](https://github.com/user-attachments/assets/57921e33-0bc1-4bc2-9eb7-38d68b595ea8)


## So, that's the wrap-up, y'all

AI and Machine Learning are changing the way we live and work, and we need to make sure we're using them for good.


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/1.%20Ready%2C%20Set%2C%20Build!/2.%20Unleash%20the%20Possibilities%20of%20AI.md

Unleash the Possibilities of AI

<p>Yo, yo, yo, listen up! It's time to step up your game with OpenAI API and engineer your prompts like a true pro. In this lesson, we'll break down the importance of prompt engineering and how to use it effectively.</p><h2>What is Prompt Engineering?</h2><p>Prompt Engineering is like the foundation of a dope beat. It's the process of creating a well-structured prompt that clearly communicates the task to OpenAI API. It's essential to understand how prompt engineering works to create accurate and useful applications.</p><h2>Prompt Structure</h2><p>Ain't no point in using OpenAI Playground if you ain't gonna get relevant and useful output, right? So, let's get into some tips on how to write a dope prompt that gets the job done.</p><p><strong>Tip #1: Keep it Simple</strong><br>Listen up, when you're just starting out with OpenAI Playground, keep it simple, y'all. Don't try to get too fancy with your prompts. Start with basic questions like "What's the weather like today?" or "Tell me a joke." This way, you can get the hang of the Playground without overwhelming yourself.</p><p><strong>Tip #2: Be Specific</strong><br>If you want relevant output, you gotta be specific, y'all. Don't be afraid to give details and context in your prompts. Instead of just asking for a recipe, ask for a vegan lasagna recipe. The more specific you are, the better the chances of getting what you want.</p><p><strong>Tip #3: Provide Examples</strong><br>Sometimes, y'all need to give examples to get the output you want. For example, if you want a product description for a new item, give some examples of similar products or descriptions that you like. This will help the model understand what you're looking for and generate a better output.</p><p><strong>Tip #4: Experiment with Settings</strong><br>OpenAI Playground got some dope settings, so you might as well experiment with them, right? Adjust the "Max Tokens" setting to get longer or shorter responses. Play with the "Temperature" setting to control the creativity of the output. Try different settings to find what works best for you, homie.</p><h2>Why is Prompt Engineering important?</h2><p>If you want to create applications that generate accurate and useful output, prompt engineering is essential. By understanding how to structure prompts and engineer them effectively, you can take your AI-powered applications to the next level.</p><p>Let's take a look at some cool examples of well-engineered prompts:</p><p><strong>Example 1 - Poor Prompt Engineering:</strong><br>Prompt: "horror story"</p><p>Example 1 - Effective Prompt Engineering:<br>Prompt: "Write a short horror story about a haunted house located on the corner of 13th Street and Elmwood Avenue. The family who moved into the house is experiencing strange occurrences like doors opening and closing on their own, and hearing strange noises at night. They woke up one day to find blood dripping from the walls. Please generate a story of about 250 words in length."</p><p><strong>Example 2 - Poor Prompt Engineering:</strong><br>Prompt: "cat name"</p><p>Example 2 - Effective Prompt Engineering:<br>Prompt: "Create a unique cat name based on the following characteristics: black and white, playful, loves to cuddle. Please provide a single name that is less than 12 characters in length."</p><p><strong>Example 3 - Poor Prompt Engineering:</strong><br>Prompt: "movie review"</p><p>Example 3 - Effective Prompt Engineering:<br>Prompt: "Write a 200-word review of the movie 'The Matrix Resurrections.' Discuss the plot, characters, and overall themes of the movie. Please include your overall rating on a scale of 1-10."</p><h2>And that’s a wrap up!</h2><p>Alright, You're now equipped with the knowledge to engineer your prompts like a pro in OpenAI API. By using well-structured prompts, you can create amazing AI-powered applications that generate accurate and useful output. So, let's get started and engineer some sick prompts!</p><p><br></p>

# Master the Art of Engineering Your Prompts

Yo, yo, yo, listen up! It's time to step up your game with OpenAI API and engineer your prompts like a true pro. In this lesson, we'll break down the importance of prompt engineering and how to use it effectively.

## What is Prompt Engineering?

Prompt Engineering is like the foundation of a dope beat. It's the process of creating a well-structured prompt that clearly communicates the task to OpenAI API. It's essential to understand how prompt engineering works to create accurate and useful applications.

## Prompt Structure

Ain't no point in using OpenAI Playground if you ain't gonna get relevant and useful output, right? So, let's get into some tips on how to write a dope prompt that gets the job done.

- Keep it simple when starting out with OpenAI Playground.
- Don't get too fancy with your prompts.
- Ask basic questions like "What's the weather like today?" or "Tell me a joke."
- Be specific to get relevant output.
- Give details and context in your prompts.
- Ask for a vegan lasagna recipe instead of just asking for a recipe.
- Provide examples to get the output you want.
- Give examples of similar products or descriptions that you like.
- Experiment with the settings in OpenAI Playground.
- Adjust the "Max Tokens" setting to get longer or shorter responses.
- Play with the "Temperature" setting to control the creativity of the output.
- Try different settings to find what works best for you.

## Why is Prompt Engineering important?

If you want to create applications that generate accurate and useful output, prompt engineering is essential. By understanding how to structure prompts and engineer them effectively, you can take your AI-powered applications to the next level.

## Examples

Did you experiment with ChatGPT, as we asked in the last assignment? Let’s head over to chatGPT again and experiment with poor and effective prompt engineering.

### Example 1 - Poor Prompt Engineering

**Prompt**: "horror story"

**Output:**

![Untitled](https://github.com/user-attachments/assets/67e3fdb1-2b5e-4a82-bbef-605520d90702)


### Example 1 - Effective Prompt Engineering

**Prompt:** "Write a short horror story about a haunted house located on the corner of 13th Street and Elmwood Avenue. The family who moved into the house is experiencing strange occurrences like doors opening and closing on their own, and hearing strange noises at night. They woke up one day to find blood dripping from the walls. Please generate a story of about 100 words in length."

**Output:** 
![Untitled 1](https://github.com/user-attachments/assets/4c494329-d6ed-4b57-9363-c072b0e31242)


### Example 2 - Poor Prompt Engineering:

**Prompt:** "cat name"

**Output:**
![Untitled 2](https://github.com/user-attachments/assets/8a89be8c-9c9a-4c08-a4e0-51730bd43f2b)


### Example 2 - Effective Prompt Engineering:

**Prompt:** "Create a unique cat name based on the following characteristics: black and white, playful, loves to cuddle. Please provide a single name that is less than 12 characters in length."

**Output:**

![Untitled 3](https://github.com/user-attachments/assets/ec5bdf6f-448a-42e6-a6b1-f4d30ff460a0)


Did you observe how the answer to each prompt changed after we gave the detailed and effective prompt?

## And that’s a wrap!

All right, you're now equipped with the knowledge to engineer your prompts like a pro in OpenAI API. By using well-structured prompts, you can create amazing AI-powered applications that generate accurate and useful output. So, let's get started and engineer some sick prompts!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/2.%20WTH%20is%20OpenAI/1.%20Master%20the%20Art%20of%20Engineering%20Your%20Prompts.md

Master the Art of Engineering Your Prompts

# Let’s Play with OpenAI Playground Like a Pro

Yo, let's talk about the OpenAI Playground, fam.

## What is OpenAI Playground?

It's a dope web-based interface that lets you experiment with OpenAI's latest language models without the need for coding, you feel me? It's designed to be easy and fun to use, so anyone can get into AI, no matter what their skills are.

## So, how does it work?

You enter text prompts, and the AI models generate new text based on them. There are different models to choose from, each with unique features and capabilities. That's what makes it so versatile.

You can use the Playground for all kinds of things, like creative writing, content creation, language learning, and even creating chatbots and virtual assistants. It's wild, right?

## Let’s get started

Now, to get started:

- Login to your [OpenAI](https://platform.openai.com/) account.
- If you haven’t buy the paid account so far, you can do it now!
- Then head over to the [Playground](https://platform.openai.com/playground) and let your creativity run wild.

Let’s look at the following animation on how you can perform the above given steps.

![set_up_account-ezgif com-resize](https://github.com/user-attachments/assets/e9aa0cc3-0085-4e54-8868-714fa0b7d0d8)


There are a few basic settings you gotta know about, like the prompt, model, temperature, and max tokens. But once you get the hang of it, you can use the Playground to generate all kinds of crazy stuff.

## Play with OpenAI Playground

And here's the best part: you can even make the Playground act like Kanye West. Just try out some of these prompts and see what comes out:

### Prompt #1

Reply as Kanye's style: "Hi, you are so kind and beautiful." 

**Output** 

![Untitled](https://github.com/user-attachments/assets/c11a163d-41f9-4166-9f0d-b2235558d808)


### Prompt #2

Reply as Kanye West: "What would you do if you come to Pakistan?" 

**Output** 

![Untitled 1](https://github.com/user-attachments/assets/72802c83-d467-44c4-9151-b182540b741e)


### Prompt #3

Reply as Kanye West: "What is your favorite food?" 

**Output** 

![Untitled 2](https://github.com/user-attachments/assets/2669d0c6-4c74-4b28-9233-95be6ab83230)


### Prompt #4

Reply as Kanye West: "I recently had a breakup. Advise me. What should I do?" 

**Output** 

![Untitled 3](https://github.com/user-attachments/assets/5051d9f5-c871-482a-a102-c90e1837bb81)


### What are your thoughts?

The Playground generated short one line answers, where the answers were to the point. For each response we asked the Playground to act like Kanye West, but each response was general, as if a robot is answering my questions, not Kanye.

Let’s learn what are the limitations of Playground, that makes it not generate the effective answers.

## Limitations of Playground

- **Limited models**: So first off, there's only a few language models you can mess with in the Playground. You're not gonna get access to everything OpenAI's got.
- **Not so many features**: Compared to the API, the Playground is a little limited. You can only type in prompts and get responses, whereas the API has a bunch of extra features like fine-tuning and training the models for specific tasks. So if you want to take your skills to the next level, you gotta upgrade, ya feel me?
- **Limited control**: When it comes to tweaking the model settings, you're kinda stuck with the basics like temperature, max tokens, and frequency penalty. If you're looking for more customization, you gotta use the API or some other tool.
- **Usage limits**: Oh, and one more thing – there's a limit on how much you can use the Playground in an hour. So if you're using it a lot, keep that in mind, my dude.

## Why You Should Use the OpenAI API with Prompts

While the OpenAI Playground is great for quick experimentation, it’s not built to support fully functioning applications like a chatbot.

To build a chatbot that consistently imitates Kanye West, you need the OpenAI API. The API allows you to integrate the model into an application, handle dynamic interactions, and maintain conversation context.

In the next section, we’ll explore how to use the OpenAI API to build a YeBot.


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/2.%20WTH%20is%20OpenAI/2.%20Let%E2%80%99s%20Play%20with%20OpenAI%20Playground%20Like%20a%20Pro.md

Let’s Play With OpenAI Playground Like a Pro

# Building the YeBot!

Now, let’s dive into the dope world of the YeAI Bot Project. This project is all about creating a Kanye West AI bot that can chat with you and answer your questions in Kanye West style. It’s gonna be a blast!

## Key Features of YeBot

Check out some of the key features of the YeAI Bot Project:

- Understanding natural language input so you can talk to it like a real person.
- Use of the amazing openAI GPT-4 model to generate responses that sound real.
- Personalizing responses based on your interactions and data, so it feels like you’re chatting with a real Kanye West.
- Integrate the model with NextJS and run the server using npm.

## Let’s Get It Started: Code & Prompts

We’ll be using code and prompts to build our YeBot, with the OpenAI engine as the backbone of our chatbot. We’ll set up our development environment and use the OpenAI API key that we’ve already generated for this purpose. To build the frontend, we’ll be using NextJS which will allow us to create an interactive and dynamic user interface for our Kanye West AI chatbot.

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

## So, why use Next.js for building a YeAI bot?

Next.js is a super cool framework for building web apps, and it’s perfect for building dope projects like a Kanye West AI bot using OpenAI API. Let me break it down for you real quick:

- It’s perfect for building complex apps that require dynamic data and frequent updates, like our YeAI bot that’s constantly learning and evolving.
- It’s super fast and efficient, which is important when you’re dealing with large amounts of data and processing power, which our GPT model will be using to give us responses.
- It’s easy to use and has a ton of awesome features that will make building your AI bot a breeze.
- It’s super fun and exciting to work with, especially when you’re building something as cool as a Kanye West AI bot!

> Note: If you have not installed NodeJs in your system, head over to https://nodejs.org/en/download and install it.
> 

## Getting started with Node.js

Let's dive into setting up the YeBot! project. We'll be using Node.js and Next.js to create an AI chatbot that responds in the style of Kanye West.

### Setting Up Node.js

First, make sure you have Node.js installed on your system. If not, download and install it from [nodejs.org](https://nodejs.org/en/download).

### Initializing the Project

- Open your terminal and create a new directory for the project:
    
    ```solidity
    mkdir KanyeWest-Bot
    cd KanyeWest-Bot
    ```
    
- Initialize the project with npm:
    
    ```solidity
    npm init -y
    ```
    
    This creates a `package.json` file that will manage our project dependencies.
    
- Install the necessary dependencies:
    
    ```solidity
    npm install next react react-dom axios dotenv
    ```
    

## Creating the Chatbot

Now, let's create the core of our chatbot. Create a new file called `chatbot.js` in your project directory and add the following code:

```solidity
const axios = require('axios');
require('dotenv').config();

async function getKanyeResponse(userMessage) {
  const apiKey = process.env.OPENAI_API_KEY;

  try {
    const response = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: 'gpt-4',
      messages: [
        {
          role: 'system',
          content: 'Respond as if you are Kanye West, the iconic rapper and producer known for his bold, passionate, and often controversial statements, characterized by a confident, stream-of-consciousness style, inventive language, and a mix of emotional intensity and unpredictable tweets.'
        },
        {
          role: 'user',
          content: userMessage,
        },
      ],
    }, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json',
      },
    });

    return response.data.choices[0]?.message?.content || 'No response from bot';
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

module.exports = { getKanyeResponse };
```

- We import the `axios` library to make HTTP requests to the OpenAI API.
- We use `dotenv` to load environment variables from a .env file.
- We define an async function `getKanyeResponse` that takes a `userMessage` as input.
- We retrieve the OpenAI API key from the environment variables.
- We make a POST request to the OpenAI API's chat completions endpoint.
- We specify the `gpt-4` model and provide two messages:
    - A system message that instructs the model to respond as Kanye West.
    - The user's message.
- We set the necessary headers, including the API key for authorization.
- We return the content of the first choice from the API response, or a default message if no response is received.
- If an error occurs, we log it and throw it for handling elsewhere.
- We export the `getKanyeResponse` function so it can be used in other parts of the application.

## Setting Up Environment Variables

To keep your API key secure, create a `.env` file in the root of your project and add the following line:

```
OPENAI_API_KEY=your_api_key_here
```

Replace `your_api_key_here` with your actual OpenAI API key.

With these steps completed, you've laid the foundation for the KanyeWest-Bot project. The next steps will involve setting up the server and creating the frontend interface.

# Wrap Up

Alright, we've just dropped some serious knowledge about setting up this Ye-inspired chatbot. We've got our Node.js file flexing with `dotenv` for keeping those API keys on the down-low, and `axios` for sliding into OpenAI's DMs. We're hitting up that GPT-4 model to channel Kanye's vibe, and we've tucked away our API key in a sneaky little `.env` file like it's a limited edition Yeezy drop. Now when you run that `node chatbot.js`, you're basically summoning Ye's spirit into your terminal. It's not just code, it's a whole mood. You're not just a developer now, you're a digital Ye whisperer. Keep it wavy, and may your responses be as bold as Kanye's tweets. 🌊


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/3.%20Let%E2%80%99s%20Build%20Some%20Dope%20Shit/1.%20Building%20the%20YeBot!.md

Building the YeBot!

# Create Frontend for this Yeezy app

Yo, listen up! We ’bout to make some moves and create our front end for our YeBot app. We'll build a chat interface where users can interact with the AI bot.

## Coding our Main Page

Hey, see in your `src/pages/` folder you will see multiple files, among those we have to replace the code in `index.js` file with the code below:

```solidity
import React, { useState } from "react";
import Head from "next/head";
import axios from "axios";

export default function Home() {
  const [userInput, setUserInput] = useState("");
  const [messages, setMessages] = useState([]);
  const [kanyeTyping, setKanyeTyping] = useState(false);

  const handleChange = (event) => {
    setUserInput(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const newMessage = { user: true, text: userInput };
    setMessages([...messages, newMessage, { user: false, text: "loading" }]);
    setKanyeTyping(true);
  
    try {
      const response = await axios.post('/api/chat', {
        message: userInput
      });
  
      const botResponse = { user: false, text: response.data.response || "No response from bot" };
      setMessages([...messages, newMessage, botResponse]);
    } catch (error) {
      console.error(error);
      const botResponse = { user: false, text: "Oops! Something went wrong." };
      setMessages([...messages, newMessage, botResponse]);
    } finally {
      setKanyeTyping(false);
      setUserInput("");
    }
  };

  return (
    <>
      <Head>
        <title>Kanye West Chatbot</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
      </Head>
      <div className="chat-container">
        <div className="header">
          <i className="fa fa-chevron-left back-button"></i>
          <div className="contact-info">
            <img
              className="profile-image"
              src="https://imageio.forbes.com/specials-images/imageserve/5ed00f17d4a99d0006d2e738/0x0.jpg?format=jpg&crop=4666,4663,x154,y651,safe&height=416&width=416&fit=bounds"
              alt="Profile"
            />
            <h2 className="name">YeGPT</h2>
          </div>
          <i className="fa fa-video-camera video-icon"></i>
        </div>
        <div className="chat-window">
          <p className="chat-bot-header">Powered by <a className="ref-link" href="http://metaschool.so/" target="_blank" rel="noopener noreferrer">metaschool 🔮</a></p>
          {messages.map((message, index) => (
            <div key={index} className="message-container">
              {message.user ? (
                <>
                  <div className="user-message message">
                    <div className="message-text">{message.text}</div>
                  </div>
                  <img
                    className="profile-image user-image"
                    src={'https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/2048px-User-avatar.svg.png'}
                    alt="User Profile"
                  />
                </>
              ) : (
                <>
                  <img
                    className="profile-image bot-image"
                    src='https://imageio.forbes.com/specials-images/imageserve/5ed00f17d4a99d0006d2e738/0x0.jpg?format=jpg&crop=4666,4663,x154,y651,safe&height=416&width=416&fit=bounds'
                    alt="Bot Profile"
                  />
                  {message.text === 'loading' ? <img className="typing-bubble" src='https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExODg3ZjFlNzQ1Mzc1ZTFlNTMyZTVjODIzMDYyODUwNDQ0ZDY3ZmU5YyZjdD1z/3tLfKrc4pLWiTkAAph/giphy.gif' /> : <div className="bot-message message">
                    <div className="message-text">{message.text}</div>
                  </div>}
                </>
              )}
            </div>
          ))}
        </div>
        <form className="form" onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="Type your message here..."
            value={userInput}
            onChange={handleChange}
            disabled={kanyeTyping}
          />
          <button type="submit">
            <i className="fa fa-paper-plane" aria-hidden="true"></i>
          </button>
        </form>
      </div>
    </>
  );
}
```

Now now, don’t worry, seeing the above code, just read the bullet points below to understand what we did in the code in very simple language.

1. **Imports**:
    - We import React and the useState hook to manage our component's state.
    - We import Head from Next.js to manage the document head (for title and external CSS).
    - We import axios to make HTTP requests to our backend.
2. **State Management**:
    - We create state variables for:
        - `userInput`: Stores what the user is typing.
        - `messages`: An array to keep track of all messages in the chat.
        - `kanyeTyping`: A boolean to show when the bot is "typing".
3. **Event Handlers**:
    - `handleChange`: Updates `userInput` as the user types.
    - `handleSubmit`: Sends the user's message to the backend and handles the response.
4. **Chat Logic in handleSubmit**:
    - Prevents the form from refreshing the page.
    - Adds the user's message to the chat.
    - Shows a "loading" message for the bot.
    - Sends the message to the backend using axios.
    - Adds the bot's response to the chat.
    - Handles any errors that occur.
5. **Render Function**:
    - Returns JSX to create the chat interface.
    - Uses the Head component to set the page title and include Font Awesome.
    - Creates a container for the entire chat interface.
    - Displays a header with a profile picture and name.
    - Shows the chat window with all messages.
    - Provides a form for the user to type and submit messages.
6. **Message Display**:
    - Maps through the `messages` array to display each message.
    - Uses different styles for user messages and bot messages.
    - Shows a typing indicator when the bot is "thinking".
7. **Input Form**:
    - Creates an input field for the user to type messages.
    - Includes a submit button with a paper plane icon.
    - Disables the input when the bot is typing.

This component creates a full chat interface where users can send messages to the Bot and see responses, complete with a header, message history, and input form.

## Styling the Chat Interface

Now, lets make our chat interface beautiful. Replace the code in `src/styles/globals.css` with the code below:

```solidity
/* chatbot */
.chat-bot-header {
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  font-family: 'Source Sans Pro', sans-serif;
  color: #6e6f70;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.chat-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80vh;
  margin-top: 50px;
  border: 2px solid black;
  border-radius: 20px;
}

.chat-window {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 10px;
  height: 70vh;
  overflow-y: scroll;
}

.message-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.user-message {
  background-color: #007aff;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  max-width: 70%;
}

.bot-message {
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  padding: 10px;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  max-width: 70%;
}

.message-text {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

.profile-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-image {
  margin-left: 10px;
}

.form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}

.form input[type="text"] {
  flex: 1;
  padding: 10px;
  border-radius: 25px;
  font-size: 16px;
  background-color: #fff;
}

.form button[type="submit"] {
  background-color: #007aff;
  color: #fff;
  border: none;
  outline: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.typing-bubble {
  width: 50px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.name {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px;
  margin-bottom: 2px;
}

.back-button {
  font-size: 24px;
  color: #007aff;
}

.video-icon {
  font-size: 24px;
  color: #007aff;
}

.ref-link {
  color: #C53AAE;
  text-decoration: none;
  font-weight: 500;
}

.bot-image {
  margin-right: 10px;
}
```

Yes ofcourse, we will explain what is happening in the CSS file. Check the bullet points below:

1. **Chat Container**:
    - Sets the overall layout for the chat interface
    - Limits the width to 600px and centers it on the page
    - Creates a border and rounded corners for the chat box
2. **Chat Window**:
    - Sets the background color to light gray
    - Makes the chat area scrollable
    - Occupies 70% of the viewport height
3. **Messages**:
    - User messages:
        - Blue background
        - White text
        - Aligned to the right
    - Bot messages:
        - White background
        - Black text
        - Aligned to the left
    - Both have rounded corners and limited width
4. **Profile Images**:
    - Creates circular images for user and bot avatars
    - Sets size to 40x40 pixels
5. **Input Form**:
    - Creates a row layout for the input field and submit button
    - Styles the text input with rounded corners
    - Creates a circular blue submit button with a paper plane icon
6. **Header**:
    - Arranges the back button, profile info, and video icon in a row
    - Centers the profile image and name vertically
7. **Typography**:
    - Sets fonts for different text elements (messages, names, headers)
    - Adjusts font sizes and weights for readability
8. **Colors**:
    - Uses blue (#007aff) for user messages and buttons
    - Uses white and light gray for backgrounds
    - Uses a purple color (#C53AAE) for links
9. **Spacing and Margins**:
    - Adds appropriate spacing between messages, buttons, and other elements
    - Ensures the layout is clean and easy to read
10. **Responsive Design**:
    - Uses percentages and viewport units to make the layout somewhat adaptable to different screen sizes
11. **Special Elements**:
    - Styles the "typing" indicator for when the bot is preparing a response
    - Styles the "Powered by" text and link at the top of the chat

This CSS creates a modern, clean chat interface with clear visual separation between user and bot messages, easy-to-use input controls, and a professional-looking header.

## Updating _app.js

Now, let's update the `_app.js` file to ensure our global styles are applied:

- Open `src/pages/_app.js` and update it to include the global styles:
    
    ```solidity
    import '../styles/globals.css'
    
    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />
    }
    
    export default MyApp
    ```
    
    This setup ensures that our global styles are applied to all pages in our Next.js application.
    

This is how your app will look like, don’t worry in the next lesson you will be armed with the required code to deploy the app on your local systems as well.

![yebot_L6](https://github.com/user-attachments/assets/aad70639-92ee-44cf-901c-7617d6742b40)


## Wrap Up

Yo, we just dropped some serious heat with this frontend, fam! We've got a slick chat interface that's gonna make people think they're really talking to the one and only Ye. It's clean, it's fresh, and it's ready to spit some AI-generated bars.

Next up, we're gonna dive into the backend, and that's where the real magic happens. We'll be creating a server.js file that's gonna be the backbone of our operation, connecting our dope frontend to the AI brain. Then we'll deploy this bad boy locally, so you can see it come to life right on your own machine. Get ready to witness the birth of YeBot in your local environment!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/3.%20Let%E2%80%99s%20Build%20Some%20Dope%20Shit/2.%20Create%20Frontend%20for%20this%20Yeezy%20app.md

Create Frontend for this Yeezy app

# Let's Get This Server Poppin’

Listen up, fam! We're about to elevate this project to a whole new level. Today, we're diving into the backend – the invisible force that's gonna make our Ye chatbot come alive. We're talking server.js, local deployment, all that good stuff. It's time to turn this digital dream into a reality that's gonna blow minds. Let's get it!

## Creating the server.js File

Alright, let's break down what we need to do to get our server up and running. We'll be using Express to create our server and handle API requests. Here's how we set it up:

1. First, make sure you're in your project root directory.
2. Create a new file called `server.js` in the root directory.
3. Open `server.js` and add the following code:

```jsx
const express = require('express');
const next = require('next');
const { getKanyeResponse } = require('./chatbot');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, dir: './src' });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.use(express.json());

  server.post('/api/chat', async (req, res) => {
    try {
      const { message } = req.body;
      const response = await getKanyeResponse(message);
      res.json({ response });
    } catch (error) {
      console.error('Error in /api/chat:', error);
      res.status(500).json({ error: 'Internal Server Error' });
    }
  });

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  const port = process.env.PORT || 3000;
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

```

Let's break down what this code does:

1. We import the necessary modules: Express, Next.js, and our chatbot function.
2. We set up Next.js, telling it where our source files are located.
3. We create an Express server and add middleware to parse JSON requests.
4. We create a POST route for `/api/chat` that calls our `getKanyeResponse` function and sends back the response.
5. We set up a catch-all route that hands off any unhandled requests to Next.js.
6. Finally, we start the server on port 3000 (or a port specified by an environment variable).

## Updating package.json

Now we need to update our `package.json` file to use our new server. Open `package.json` and update the `scripts` section like this:

```json
"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
},

```

This tells npm to use our `server.js` file when we run the development server or start the production server.

## Running the Code Locally

Now that we've set up our server, let's run this bad boy locally and see it in action. Here's how:

1. Open your terminal and navigate to your project directory.
2. Run the following command to make sure all the dependencies are stored.
    
    ```solidity
    npm install
    ```
    
3. Run the following command to start the development server:
    
    ```
    npm run dev
    ```
    
4. You should see a message saying the server is ready on [http://localhost:3000](http://localhost:3000/).
5. Open your web browser and go to [http://localhost:3000](http://localhost:3000/).

You should now see your YeBot chat interface. Try sending a message and see how it responds!
![yebot_sample-ezgif com-resize](https://github.com/user-attachments/assets/8fec08da-7246-4e31-b056-b26618cf7a4a)


## Troubleshooting

If you run into any issues, here are a few things to check:

- Make sure all your dependencies are installed. Run `npm install` if you're unsure.
- Check that your `.env` file is in the root directory and contains your OpenAI API key.
- If you get any errors about missing modules, make sure they're listed in your `package.json` and install them if necessary.
- If you receive an error that port 3000 is already in use, you can kill the process using that port and retry. Here's how:
    
    On macOS and Linux:
    
    ```
    sudo lsof -i :3000
    ```
    
    This will show you the process ID (PID) using port 3000. Then you can kill it with:
    
    ```
    kill -9 <PID>
    ```
    
    On Windows:
    
    ```
    netstat -ano | findstr :3000
    ```
    
    This will show you the PID using port 3000. Then you can kill it with:
    
    ```
    taskkill /PID <PID> /F
    ```
    
    After killing the process, try running `npm run dev` again.
    

## Wrap Up

And there you have it! You've now got a fully functional KanyeWest-Bot running on your local machine. It's ready to drop some AI-generated knowledge and keep your conversations fresh. Remember, this is just the beginning – feel free to experiment, add new features, and make it your own. The digital world is your stage, so let your creativity flow!


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/3.%20Let%E2%80%99s%20Build%20Some%20Dope%20Shit/3.%20Let's%20Get%20This%20Server%20Poppin.md

Let's Get This Server Poppin

# Let’s Wrap it Up

## 🎉 YO, CONGRATULATIONS FAM! 🎉

You just crushed this epic course and leveled up your AI game like a boss! Let's break down all the fire stuff you've learned in this journey:

## 🧠 AI & OpenAI Basics

We kicked things off by diving into how AI is flipping the script on our modern world. You got the 411 on OpenAI and how its API is being used to build some seriously sick projects. We even coded in Python and used the OpenAI API to train our first model using prompts. That's some next-level stuff right there!

## ⚡ Node.js Setup

When it came time to build YeBot, we went hard on setting up a rock-solid backend. You learned how to use Node.js and Express to create a killer API that could handle all the Kanye-style responses we were about to throw at it.

## 🎤 Prompt Engineering Like a Pro

We got creative AF with prompt engineering, injecting that Ye personality into our bot. The more we trained it, the more it started spitting bars like the man himself. It was like watching a digital Kanye come to life!

## 🖥️ Frontend Magic with Next.js

After training our AI to be as wavy as Yeezy, we switched gears and built a slick frontend using Next.js. We set up an Express server to create an API that could fetch data and handle responses from our YeGPT. The result? A bot that looks as good as it sounds!

## 🚀 The Power of AI Unleashed

This course wasn't just about making a Kanye bot (although that's pretty dope). It's about realizing the insane potential of AI and how it can revolutionize everything you do. The sky's the limit now, fam!

## 🔮 What's Next?

The AI world is your oyster now! Why not create:

1. A Harry Potter AI that takes you to Hogwarts
2. A Physics Tutor AI to make science lit
3. An Albert Einstein AI dropping knowledge bombs
4. A Luffy AI to help you find the One Piece treasure

## ⚒️ A small yet important request:

This is a 100% open-source project like all the other projects on our platform. You can find the tutorial markdown files [here](https://github.com/0xmetaschool/Learning-Projects/tree/main/How%20does%20Ethereum%20work%20-%20A%20deepdive). If you find any issues in the course, please feel free to resolve it. We, at Metaschool, love love love contributions by our community and acknowledge the contributors on our [Discord](https://discord.com/invite/vbVMUwXWgc) and GitHub, too.

While you’re contributing:

1. Don’t forget to star ⭐️ our repository. We will be very thankful! ❤️
2. We are a completely free platform and we aim to stay the same, so please consider following us on [X](https://bit.ly/eth-dive-twitter) and [LinkedIn](https://bit.ly/eth-dive-linkedin) as well. 🫶


https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/Build%20a%20YeBot%20with%20OpenAI%20API/4.%20Let%E2%80%99s%20Wrap%20it%20Up/1.%20Let%E2%80%99s%20Wrap%20it%20Up.md

Let’s Wrap It Up

Build a YeBot with OpenAI API

Have you ever felt limited when a project required you to work with Python but you could code in Javascript only? Make coding a breeze by building a tool that helps you translate code in your programming language of choice. This could start out as just a fun OpenAI and NextJS project but potentially give you ideas for similar, smarter, and even revenue-making initiatives that fellow devs around the world need.

# 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://jatin0.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.

## Proof of completion

If you complete this course with us, you will be getting XPs and a special NFT which will unlock many more opportunities for you on the Metaschool platform. Here is what the NFT looks like.

![img.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/course%20NFT.gif?raw=true)


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. We are a free open-source platform and if you follow us on [X](https://bit.ly/code-trans-twitter) and [LinkedIn](https://bit.ly/code-trans-linkedin), it would be a great support. 🫣
4. Stay happy and positive!





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

# 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

# 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/main/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.

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

  )
```

- This part of the code is written in JSX and it represents a component that generates a user interface for a code translator application. Here's an overview of what it does:

  - The code is wrapped inside a `<div>` element with the CSS class names 'flex', 'flex-col', 'items-center', and 'justify-center', which sets up a container with a flex layout and centers its content vertically and horizontally.
  - An `<Image>` component is added with the CSS class names 'fixed', 'left-0', 'top-0', 'w-screen', 'h-screen', and '-z-10'. It displays a background image specified by the background variable.
  - A `<h1>` element is included with the CSS class names 'font-sans', 'text-5xl', 'justify-center', and 'font-bold'. It displays the text "Code Translator" in a large, bold font and is centered horizontally.
  - A `<h2>` element is added with the CSS class names 'font-sans', 'mt-5', 'text-xl', 'justify-center', and 'text-slate-600'. It displays a description for the code translator application.
  - The component includes a custom component called `<CodeWindow>`. It renders an input code window with the code specified by the inputCode variable, allows the code to be edited with the setCode function, and provides functionality to change the programming language using the handleInputLanguageChange function. The current selected language is stored in the inputLanguage variable.
  - A `<button>` element is added with the CSS class names 'bg-[#C53AAE]', 'border-white', 'p-3', 'm-2', 'flex', 'justify-center', 'items-center', 'rounded-lg', 'text-white', and 'font-semibold'. The button is disabled when the loading variable is true and displays either "Translating..." or "Translate 🔁" depending on the value of loading. When clicked, it triggers the handleTranslate function.
  - Another `<CodeWindow>` component is included, similar to the previous one, but it displays the output code. The code is specified by the outputCode variable, and the language can be changed using the handleOutputLanguageChange function. The current selected language is stored in the outputLanguage variable.
  - A `<p>` element is added with the CSS class names 'font-sans', 'mt-5', and 'pb-5'. It displays the text "Powered by metaschool 🔮" and includes a link to the metaschool website.
  - An `<a>` element is included with the CSS class names 'flex', 'font-sans', 'mb-5', 'p-1', and 'items-center'. It displays a link to share the code translator on Twitter. Clicking on the link opens a new tab with a pre-filled tweet containing a message and a URL.

## Complete code

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

```
import { useState } from 'react';
import CodeWindow from '@/components/CodeWindow';
import background from '@/public/background.jpg';
import twitter_image from '@/public/twitter.png';
import Image from 'next/image';

export default function Home() {

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


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

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

  const handleTranslate = async () => {
    const maxCodeLength = 6000;

    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;
    }

    setLoading(true);
    setOutputCode('');

    const controller = new AbortController();

    const body = {
      inputLanguage,
      outputLanguage,
      inputCode
    };

    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;
    }

    const data = response.body;

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

    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);
    }

    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/main/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 apiKey = process.env.OPENAI_API_KEY;
```

- `process.env.OPENAI_API_KEY` will read the API key that we will define in our `.env` file later on.
- `apiKey` is a variable which we will use later on for authorization.

```
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 ${apiKey}`,
      },
      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 endent from 'endent';
import { createParser } from 'eventsource-parser';
const apiKey = process.env.OPENAI_API_KEY;

const createPrompt = (inputLanguage, outputLanguage, inputCode) => {
  if (inputLanguage === '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 \`\`\`):
    `;
  } else if (outputLanguage === '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:
     `;
  } else {
    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 \`\`\`):
     `;
  }
};

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 ${apiKey}`,
    },
    method: 'POST',
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [system],
      temperature: 0,
      stream: true,
    }),
  });

  const encoder = new TextEncoder();
  const decoder = new TextDecoder();

  if (res.status !== 200) {
    const statusText = res.statusText;
    const result = await res.body?.getReader().read();

    throw new Error(
      `OpenAI API returned an error: ${
        decoder.decode(result?.value) || statusText
      }`,
    );
  }

  const stream = new ReadableStream({
    async start(controller) {
      const onParse = (event) => {
        if (event.type === 'event') {
          const data = event.data;

          if (data === '[DONE]') {
            controller.close();
            return;
          }

          try {
            const json = JSON.parse(data);
            const text = json.choices[0].delta.content;
            const queue = encoder.encode(text);
            controller.enqueue(queue);
          } catch (e) {
            controller.error(e);
          }
        }
      };

      const parser = createParser(onParse);

      for await (const chunk of res.body) {
        parser.feed(decoder.decode(chunk));
      }
    },
  });

  return stream;
};
```
Now create a file named `.env` in the main folder. Add the following in your file:
```
OPENAI_API_KEY=ADD_YOUR_API_KEY_HERE
```

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/main/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/main/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

# 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

Warden Protocol

30 days of solidity

Fuel Marathon

Aptos Marathon

Core Marathon

Sui Marathon

OpenAI

Web3 Templates

AI Templates

AI Tools

OpenAI