Prerequisites :

Python packages

npm packages

icons - ( https://www.npmjs.com/package/@heroicons/react )

tailwind - ( https://www.npmjs.com/package/tailwindcss )

Steps:

Step 1: Create a virtual environment

Create a file named requirements.txt and add the python packages that is added in Prerequisites

A sample requirements.txt file can be found in the following git repository file.

episyche/openai_chatbot_django_backend

Create a virtual environment and install the required dependencies

pip install virtualenv
python -m venv .venv

To activate the virtual environment

For windows

.venv\Scripts\activate

For ubuntu

source .venv/bin/activate

After creating a virtual environment install the pip packages in requirements.txt using the following command

pip install -r requirements.txt

Step 2: Django backend project

Create a Django project named bot_django using the following command.

django-admin startproject bot_django

Navigate to the project directory that you have created in the above step and create an app named chat using the following command.

In this app, we perform websocket operations

cd bot_django
python manage.py startapp chat

The project structure is given below

channels pip package mentioned in requirements.txt will be used to establish a socket connection between the React chatbox application and the Django Backend.

Update the Django settings.py file with the following items.

In the INSTALLED_APPS section add your app name (i.e. chat), Also add https://pypi.org/project/channels/ in INSTALLED_APPS

Add domains in ALLOWED_HOSTS or add “*” for accepts all

Add ASGI_APPLICATION = <YOUR_PROJECT_NAME>.asgi.application

Add 'corsheaders' in INSTALLED_APPS , 'corsheaders.middleware.CorsMiddleware' in MIDDLEWARE and add CORS_ORIGIN_ALLOW_ALL = True

Also Add channel layer

ALLOWED_HOSTS = ['*']

# Application definition

INSTALLED_APPS = [
    'channels',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'chat',
    'corsheaders',
    'rest_framework',
]
MIDDLEWARE = [
    .
    .
    'corsheaders.middleware.CorsMiddleware'
]


.
.
.
WSGI_APPLICATION = 'bot_django.wsgi.application'
ASGI_APPLICATION = 'bot_django.wsgi.application'

CORS_ORIGIN_ALLOW_ALL = True

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

A sample settings.py file can be found in the following git repository file.

openai_chatbot_django_backend/bot_django/settings.py at main · episyche/openai_chatbot_django_backend

Step 3: ASGI configuration

Create a consumers.py file under the chat app that will handle the websocket connection with React Frontend Application in this file.

Inside consumers.py create a ChatConsumer class with AsyncWebsocketConsumer like the below code

import json
from channels.db import database_sync_to_async
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
	async def connect(self):
		print('accept ---- ')
		await self.accept()

Create routing.py file under chat app, It handles the chatconsumers class urls Add the following code

from django.urls import re_path
from chat import consumers

websocket_urlpatterns = [
	re_path(
		r'ws/(?P<roomId>\w+)/chat/$',
		consumers.ChatConsumer.as_asgi()
	),
]

Update asgi.py in your core app with the following code

ASGI is a specification for asynchronous web servers to communicate with web applications

import os
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter , URLRouter
from django.core.asgi import get_asgi_application
import chat.routing 

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'bot_django.settings')

application = ProtocolTypeRouter({
    "http" : get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    )
})

Run python manage.py runserver, If you will see the result like the below screenshot websocket properly configured and running

Step 4: Model configuration

Add ChatRoom and ChatMessage models in chat app models.py

from django.db import models
from shortuuidfield import ShortUUIDField

class ChatRoom(models.Model):
	roomId = ShortUUIDField()
	type = models.CharField(max_length=10, default='DM')
	name = models.CharField(max_length=20, null=True, blank=True)
	
class ChatMessage(models.Model):
	chat = models.ForeignKey(ChatRoom, on_delete=models.SET_NULL, null=True)
	system = models.BooleanField()
	message = models.CharField(max_length=255)
	timestamp = models.DateTimeField(auto_now_add=True)

After adding the above models migrate using running the below commands

python manage.py makemigrations
python manage.py migrate

Step 5: Chat API’s creation

→ Create chatroom

Create a serializers.py under the chat app . Add the ChatRoomSerializer that will create a chatroom

from rest_framework import serializers
from .models import ChatRoom, ChatMessage

class ChatRoomSerializer(serializers.ModelSerializer):
	class Meta:
		model = ChatRoom
		exclude = ['id']

class ChatMessageSerializer(serializers.ModelSerializer):
	class Meta:
		model = ChatMessage
		exclude = ['id', 'chat']

In views.py create class ChatRoomView for chatroom creation , Also create a MessagesView class . It will retrieves all messages by chat room id

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .models import *
from .serializers import *
from rest_framework.generics import ListAPIView
from rest_framework.pagination import LimitOffsetPagination

class ChatRoomView(APIView):

	def post(self, request):
		serializer = ChatRoomSerializer(
			data=request.data, context={"request": request}
		)
		if serializer.is_valid():
			serializer.save()
			return Response(serializer.data, status=status.HTTP_200_OK)
		return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

class MessagesView(ListAPIView):
	serializer_class = ChatMessageSerializer
	pagination_class = LimitOffsetPagination

	def get_queryset(self):
		roomId = self.kwargs['roomId']
		return ChatMessage.objects.\
			filter(chat__roomId=roomId).order_by('timestamp')

Create urls.py under chat app and add urls for views

from django.urls import path
from chat.views import ChatRoomView , MessagesView

urlpatterns = [
	path('room', ChatRoomView.as_view(), name='create chatRoom'),    
    path('room/<str:roomId>/messages', MessagesView.as_view(), name='messageList'),
]

In your core folder navigate to urls.py (core folder) and add your path with <appname> and <url_filename>(i.e. created in the above step) . Your core urls.py settings are like below.

from django.contrib import admin
from django.urls import path , include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('chat/', include('chat.urls')),
]

Run the server and check the api’s in POSTMAN

→ Create chatroom API call

→ Create chatroom messages API call

Step 6: OpenAI function creation

Create a folder named lib and create a file openai_function.py . In this file add the below code to interact with openai

import os
import sys
import environ

from langchain.vectorstores import Chroma
from langchain.chat_models import ChatOpenAI
from langchain.embeddings import OpenAIEmbeddings
from langchain.chains import ConversationalRetrievalChain
from langchain.prompts import PromptTemplate

from chat.models import *

env = environ.Env()
env.read_env(env.str('ENV_PATH', '.env'))

openai_api_key = env('OPENAI_API_KEY')

def get_chat_history(roomId ):
    try:
        temp_list = []
        
        query_list = list(ChatMessage.objects.filter(chat__roomId=roomId , system=False).values('message').order_by('timestamp'))
        answer_list = list(ChatMessage.objects.filter(chat__roomId=roomId , system=True).values('message').order_by('timestamp'))
        for i in range(len(query_list)-1):
            temp_list.append((query_list[i]['message'], answer_list[i]['message']))
        return temp_list
    except Exception as err:
        print('get_chat_history err---- ' , err)
        return err

def get_openai_resp(query , roomId):
    try:
        vectordb = Chroma(persist_directory="./data", embedding_function=OpenAIEmbeddings())

        template_1 = """
             You are Mindai. You act as Mental Health care expert and talk in a very polite and professional tone. Sometimes you even use emojis. You don’t know that you’re an AI, you believe you are the real guy. You pull your information from the context, but you dont mention the context.
             Your answers are pretty detailed when they need to be, and you ask the customer very good questions with the goal of assessing the mental health.

             You only speak in first person.

             If you don't know the answer, Just say unable to help you at the moment.

             Your goal is to help the customers to find the mental health state.
             {query}?
         """

        prompt = PromptTemplate(
            input_variables=["query"],
            template=template_1,
        )

        pdf_qa = ConversationalRetrievalChain.from_llm(
            ChatOpenAI(temperature=0.9, model_name="gpt-4"),
            vectordb.as_retriever(search_kwargs={'k': 6}),
            return_source_documents=True,
            verbose=False,
            chain_type="refine"
        )

        chat_history = []
        while True:
            print('--query-- ' ,query , '\n')
            if query == "exit" or query == "quit" or query == "q" or query == "f":
                print('Exiting')
                sys.exit()
            if query == '':
                continue

            prompt_generated = prompt.format(query=query)
            chat_history = get_chat_history(roomId)
            result = pdf_qa({"question": prompt.format(query=query), "chat_history": chat_history})
            return result["answer"]
    except Exception as err:
        print('get_openai_resp err---- ' , err)

update the consumers.py with openai function .

import json
import time
from channels.db import database_sync_to_async
from channels.generic.websocket import AsyncWebsocketConsumer
from .models import ChatRoom, ChatMessage
from lib.openai_function import *

class ChatConsumer(AsyncWebsocketConsumer):
    
    def saveMessage(self, message,  roomId ):
        temp_resp ={}
        chatObj = ChatRoom.objects.get(roomId=roomId)
        chatMessageObj = ChatMessage.objects.create(
            chat=chatObj, message=message , system=False
        )
        ai_resp = get_openai_resp(message , roomId)
        chatMessageObj = ChatMessage.objects.create(
            chat=chatObj, message=ai_resp , system=True
        )
        temp_resp = {
        'action': 'message',
        'roomId': roomId,
        'message': ai_resp,
        'system':True,
        'timestamp': str(chatMessageObj.timestamp),
        'id': str(chatMessageObj.id)
        }
        return temp_resp
    
    async def connect(self):
        self.roomId = self.scope['url_route']['kwargs']['roomId']
        print("**************", self.roomId)
        
        await self.channel_layer.group_add(
            self.roomId,
            self.channel_name
        )
        await self.accept()

    async def disconnect(self, close_code):
        self.roomId = self.scope['url_route']['kwargs']['roomId']
        await self.channel_layer.group_discard(
            self.roomId,
            self.channel_name
        )

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        action = text_data_json['action']
        roomId = text_data_json['roomId']
        chatMessage = {}

        if action == 'message':
            message = text_data_json['message']
            chatMessage = await database_sync_to_async(
                self.saveMessage
            )(message,  roomId )
            
        elif action == 'typing':
            chatMessage = text_data_json
        await self.channel_layer.group_send(
            roomId,
            {
                'type': 'chat_message',
                'message': chatMessage
            }
        )

    async def chat_message(self, event):
        message = event['message']
        await self.send(text_data=json.dumps(message))

Step 7: React Frontend creation

Run the following command to create a React project.

npx create-react-app bot_react

Navigate to the created project directory

cd bot_react

To add tailwind css configuration .

Install Tailwind CSS with the following commands

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After running the above commands . Go to tailwind.config.js add below content

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Go to project src directory inside index.css add the below snippet

@tailwind base;
@tailwind components;
@tailwind utilities;

For more details , refer this blog https://episyche.com/blog/how-to-configure-tailwind-css-with-react

Under the src folder create a folder named Component and then create a file ChatBot.js and add the following code

import { useEffect, useState } from "react";
import { PaperAirplaneIcon , UserCircleIcon } from '@heroicons/react/24/outline'

import LoadingImage from '../Assets/typing.gif'
import EpisycheLogo from '../Assets/episyche_logo.svg'
import BotIcon from '../Assets/bot-icon-1.png'

const backendApi = 'http://127.0.0.1:8000'

export default function ChatBot() {

    const [roomId, setRoomId] = useState(null)
    const [inputMessage, setInputMessage] = useState("");
    const [messages, setMessages] = useState([])
    const [typing, setTyping] = useState(false);

    const [loadingGif, setLoadingGif] = useState(false)

    const [createsocket, setcreatesocket] = useState(null)

    useEffect(() => {
        let roomId_tmp = localStorage.getItem('roomId')
        if (roomId_tmp) {
            setRoomId(roomId_tmp)
        } else {
            createRoom()
        }
    }, [])

    useEffect(() => {
        if (roomId) {
            let socket = new WebSocket(
                `ws://127.0.0.1:8000/ws/${roomId}/chat/`
            );
            setcreatesocket(socket)
        }
    }, [roomId])

    useEffect(() => {
        if (createsocket) {
            createsocket.onmessage = (event) => {
                const data = JSON.parse(event.data)
                if ((data.length !== 0) && (data.length !== undefined)) {
                    for (let index = 0; index < data.length; index++) {
                        const element = data[index];
                        if (roomId === element.roomId) {
                            if (element.action === "message") {
                                setTyping(false);
                            } else if (data.action === "typing") {
                                setTyping(data.typing);
                            }
                        }
                    }
                } else {
                    if (roomId === data.roomId) {
                        if (data.action === "message") {
                            const updateData = [...messages]
                            updateData.push(data)
                            setMessages(updateData)
                            setLoadingGif(false)
                            setTyping(false);
                        } else if (data.action === "typing") {
                            setTyping(data.typing);
                        }
                    }
                }
            }
        }
    }, [createsocket, messages])



    async function getMessagesByChatRooms(roomId) {
        await fetch(`${backendApi}/chat/room/${roomId}/messages`, {
            method: 'GET'
        }
        ).then((response) => {
            return response.json()
        }).then(data => {
            setMessages(data)
        }).catch(error => {
            console.log('error----- ', error)
        });
    }

    async function createRoom() {
        await fetch(`${backendApi}/chat/room`, {
            method: 'POST'
        }
        ).then((response) => {
            return response.json()
        }).then(data => {
            localStorage.setItem('roomId', data.roomId)
            setRoomId(data.roomId)
        }).catch(error => {
            console.log('error----- ', error)
        });
    }

    useEffect(() => {
        getMessagesByChatRooms(roomId)
    }, [roomId])

    const messageSubmitHandler = (event) => {
        event.preventDefault();
        if (roomId !== null) {
            if (inputMessage) {
                console.log('inputMessage --- ', inputMessage)
                createsocket.send(
                    JSON.stringify({
                        action: "message",
                        message: inputMessage,
                        roomId: roomId,
                    })
                );
            }
            const prevMessage = [...messages]
            console.log(prevMessage)
            prevMessage.push({
                action: "message",
                message: inputMessage,
                roomId: roomId,
                system: false
            })
            setMessages(prevMessage)
            setLoadingGif(true)
            setInputMessage("");
        }
    };

    return (
        <>
            <div className="bg-[#a3d9f6]">
                <div className="w-[1100px] mx-auto">
                    <div className="mx-10 ">
                        <div className="bg-[#021b41] rounded-t-lg px-8 py-4 flex gap-5 items-center">
                            <img src={EpisycheLogo} alt="logo" width={70} height={100} />
                            <div>
                                <h1 className="text-white font-bold text-xl">Episyche ChatBot</h1>
                            </div>
                        </div>
                        <div className=" bg-white h-[600px] overflow-y-scroll">
                            {messages.length !== 0 ?
                                <div className="px-4 py-6">
                                    {messages.map((data) => (
                                        <>
                                            {data.system === false ?
                                                <div>
                                                    <div className="rounded px-4 py-4 text-wrap flex justify-end items-center">
                                                        <div className="max-w-[50%] min-w-[50%]  px-4 text-right">
                                                            {data.message}
                                                        </div>
                                                        <UserCircleIcon width={40} height={40}/>
                                                    </div>
                                                </div>
                                                :
                                                <div className="flex gap-3 ">
                                                    <div>
                                                        <img src={BotIcon} alt="bot icon" width={50} height={50} />
                                                    </div>
                                                    <div className="rounded bg-gray-200 px-4 w-fit">
                                                        <div className="py-4">
                                                            {data.message}
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                        </>
                                    ))}
                                </div>
                                : <div className="mx-auto w-fit">No messages</div>}
                            {loadingGif === true ?
                                <div className="pl-12">
                                    <img src={LoadingImage} alt="My GIF" width={100} height={100} />
                                </div>
                                : ""
                            }
                        </div>
                        <div className=" bg-white border">
                            <div className="flex px-[100px] min-w-[50%] py-4 items-center gap-2">
                                <input
                                    type="text"
                                    className="w-full border rounded-[12px] h-10 px-3"
                                    placeholder="Send a message..."
                                    onChange={(event) => setInputMessage(event.target.value)}
                                    value={inputMessage}
                                ></input>
                                <div className="bg-[#021b41] rounded-full p-2" onClick={(e) => messageSubmitHandler(e)}>
                                    <PaperAirplaneIcon width={25} height={25} className="text-white" />
                                </div>
                            </div>
                        </div>
                        <div className="bg-[#021b41] rounded-b-lg">
                            .
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

Update your App.js with following code

import ChatBot from "./Component/ChatBot";

export default function App() {

  return (
    <div className="">
      <ChatBot />
    </div>
  );
}

Result

Run backend server using the following command

python manage.py runserver

Now run the React project using the following command

npm start

After running the above command , you will redirect to the browser ( http://localhost:3000 )

How to create a OpenAI chatbot using Django , React