Jagadeesh Koyya

Posted on Dec 25, 2022

OpenAI CodeX ChatBot

#openai #webdev #vite #beginners

Hey there! How's it going? It's been a while since we last had our interaction in dev. Here we build stuff, little but great and cool.

Today we're gonna build and deploy a live chatbot that can help you answer any question you have regarding to coding and stuff (and definitely not your relationship doubts, eh? Just kidding!).

Repo ⚡
Live 🚀

The final output looks something like this:

With that said, let's jump into action.

Stack used

HTML5
CSS3
JavaScript
Vite
NodeJS
Express
OpenAI API

Let's Start Building

We start with two folders named client and server in our project folder which looks in heirarchy like this.

.
├── client/
│ ├── assets
│ ├── index.html
│ ├── style.css
│ └── script.js
└── server/
└── server.js

You can checkout my GtHub repo provided above to see the files you need and how it actually structured.

The assets folder consists nothing but some images required for the project.

I hope you'd node js in your system. You're gonna need node js to run this project.

Create a template for our project in plain vanilla javascript.

npm create vite@latest client --template vanilla

CLIENT

Now we start with client side first. Assuming you'd know how to link styles and script files.

index.html

<body>
    <div id="app">
      <div id="chat_container">
        <!-- Main Portion -->
      </div>

      <form>
        <textarea name="prompt" placeholder="What questions do you have?" cols="1" rows="1"></textarea>
        <button type="submit"><img src="assets/send.svg" alt="send it"></button>
      </form>
    </div>

    <script type="module" src="script.js"></script>
  </body>

The

tag contains all of the content for the page. Inside of the body, there is a div with an id of "app" which contains two elements: a div with an id of "chat_container" and a form with a textarea and submit button. Finally, there is a script tag which links to an external JavaScript file.

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "Alegreya Sans", sans-serif; */
  font-family: 'Muli';
}

body {
  background: #343541;
}

#app {
  width: 100vw;
  height: 100vh;
  background: #343541;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#chat_container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  display: flex;
  flex-direction: column;
  gap: 10px;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding-bottom: 20px;
  scroll-behavior: smooth;
}

/* hides scrollbar */
#chat_container::-webkit-scrollbar {
  display: none;
}

.wrapper {
  width: 100%;
  padding: 15px;
}

.ai {
  background: #40414F;
}

.chat {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.profile {
  width: 36px;
  height: 36px;
  border-radius: 5px;

  background: #5436DA;

  display: flex;
  justify-content: center;
  align-items: center;
}

.ai .profile {
  background: #10a37f;
}

.profile img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.message {
  flex: 1;

  color: #dcdcdc;
  font-size: 20px;

  max-width: 100%;
  overflow-x: scroll;

  white-space: pre-wrap; 

  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hides scrollbar */
.message::-webkit-scrollbar {
  display: none;
}

form {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px;
  background: #40414F;

  display: flex;
  flex-direction: row;
  gap: 10px;
}

textarea {
  width: 100%;

  color: #fff;
  font-size: 18px;

  padding: 10px;
  background: transparent;
  border-radius: 5px;
  border: none;
  outline: none;
}

button {
  outline: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
}

form img {
  width: 30px;
  height: 30px;
}

That's all the styling we need for making this project looking good with UI.

script.js

import bot from './assets/bot.svg';
import user from './assets/user.svg';

const form = document.querySelector('form');
const chatContainer = document.querySelector('#chat_container');

// AI Loading...
let loadInterval;

function loader(element) {
  element.textContent = '';

  loadInterval = setInterval(() => {
    element.textContent += '.';

    // reset 
    if(element.textContent === '....') {
      element.textContent = '';
    }
  }, 300)
}

// AI typing...
function typeText(element, text) {
  let index = 0;

  let interval = setInterval(() => {
    if(index < text.length) {
      element.innerHTML += text.charAt(index);
      index++;
    } else {
      clearInterval(interval);
    }
  }, 20)
}

function generateUniqueId() {
  const timestamp = Date.now();
  const randomNumber = Math.random();
  const hexaStr = randomNumber.toString(16);

  return `id-${timestamp}-${hexaStr}`;
}

// chat dark and light grey stripes
function chatStripe (isAI, value, uniqueId) {
  return (
    `
    <div class = "wrapper ${isAI && 'ai'}">
      <div class = "chat">
        <div class = "profile">
          <img
            src = "${isAI ? bot : user}"
            alt = "${isAI ? 'bot' : 'user'}"
          />
        </div>

        <div class = "message" id = ${uniqueId}>
          ${value}
        </div>
      </div>
    </div>
    `
  )
}

const handleSubmit = async(e) => {
  e.preventDefault();

  const data = new FormData(form);

  // user's chat stripe
  chatContainer.innerHTML += chatStripe(false, data.get('prompt'));

  form.reset();

  // bot's chat stripe
  const uniqueId = generateUniqueId();
  chatContainer.innerHTML += chatStripe(true, " ", uniqueId);
  chatContainer.scrollTop = chatContainer.scrollHeight;

  const messageDiv = document.getElementById(uniqueId);

  loader(messageDiv);

  // fetch data from server -> bot's response

  const response = await fetch('https://codex-djxd.onrender.com/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      prompt: data.get('prompt')
    })
  })

  clearInterval(loadInterval);
  messageDiv.innerHTML = '';

  if(response.ok) {
    const data = await response.json();
    const parsedData = data.bot.trim();

    typeText(messageDiv, parsedData);
  } else {
    const err = await response.text();

    messageDiv.innerHTML = "Something went wrong";

    alert(err);
  }
}

// Submit by pressing enter
form.addEventListener('submit', handleSubmit);
form.addEventListener('keyup', (e) => {
  if(e.keyCode === 13) {
    handleSubmit(e);
  }
})

This code is a chatbot program. It imports two images, one for the user and one for the bot. It then creates a form element and a chat container element. It then defines functions to load, type text, generate unique IDs, and create chat stripes.

The handleSubmit function is called when the user submits the form or presses enter. This function sends the user's message to the server and receives a response from the bot. The response is then displayed in the chat container with a unique ID.

SERVER

Let's make our project work by fetching and uploading data as in client-server architecture.

Generate a new package.json file inside your server folder by entering the command below.

npm init -y

Now we need to install a couple of dependencies to do our server side work properly.

npm install cors dotenv express nodemon openai

server.js

import express from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import { Configuration, OpenAIApi } from 'openai';

dotenv.config();

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

const app = express();
app.use(cors());
app.use(express.json());

app.get('/', async(req, res) => {
    res.status(200).send({
        message: 'Hello from CodeX',
    })
});

// fetches data from frontend body
app.post('/', async(req, res) => {
    try {
        const prompt = req.body.prompt;

        // used from openai examples
        const response = await openai.createCompletion({
            model: "text-davinci-003",
            prompt: `${prompt}`,
            temperature: 0,
            max_tokens: 3000,
            top_p: 1,
            frequency_penalty: 0.5,
            presence_penalty: 0,
        });

        res.status(200).send({
            bot: response.data.choices[0].text
        })
    } catch (error) {
        console.log(error);
        res.status(500).send({ error })
    }
})

app.listen(5000, () => console.log('Server is running on port http://localhost:5000'));

This code is setting up an Express server that will be used to communicate with the OpenAI API. It starts by importing the necessary packages and configuring the environment variables.

Then it sets up an Express server and adds a GET route that will return a message when called.

Finally, it adds a POST route that will take in data from the frontend, use it to call the OpenAI API, and return the response from OpenAI back to the frontend.

You can do deploy the server side in Render and client side using vercel after creating a git repository.

Checkout here for the complete tutorial. Helpful!

That's it for the day folks. See you next time!

DEV Community

OpenAI CodeX ChatBot

Top comments (0)

Read next

Top 5 Free Static Website Hosting Platforms I Love

🗄️Memoization in JavaScript: Optimizing Computations and Improving Performance

SQL Server key values are compared case-insensitively in EFCore 8

From Slow to Swift: A Developer's Guide to High-Performance Web Design