[Tut] How I Built an OpenAI-Powered Web Assistant with Django

[Tut] How I Built an OpenAI-Powered Web Assistant with Django - Printable Version

+- Sick Gaming (https://sickgaming.net)
+-- Forum: Programming (https://sickgaming.net/forum-76.html)
+--- Forum: Python (https://sickgaming.net/forum-83.html)
+--- Thread: [Tut] How I Built an OpenAI-Powered Web Assistant with Django (/thread-100864.html)

[Tut] How I Built an OpenAI-Powered Web Assistant with Django - xSicKxBot - 03-13-2023

How I Built an OpenAI-Powered Web Assistant with Django

5/5 – (1 vote)

Django is a backend web framework that makes it easy to build web pages quickly using Python. There is no better way to learn Django than by building projects. In this tutorial, I will show you how I built an Artificial Intelligence-powered web assistant using Django.

Set Up

To get started, we will create a directory where every file will live in. In the directory, we will create and activate a virtual environment. Then we will install the required Python libraries for the project. I am using an Ubuntu terminal, so a basic knowledge of the command line will be an added advantage going forward.

Code:
mkdir project && cd project
python3 -m venv .venv
source .venv/bin/activate

In the project directory, we create and activate a virtual environment using the

Code:
source

command. You can also replace the

Code:
source

command with a dot

Code:
.

. Let’s now install the modules we will be using.

Code:
pip install django tzdata openai

Creating Django Project

Once the installation is complete, run the following command in your Ubuntu terminal to create a Django project.

Code:
django-admin startproject webassistant .

This creates a folder with the name

Code:
webassistant

The
Code:
.
tells Django to create the project in the current directory.
The
Code:
manage.py
file is used to execute several Django commands.
The
Code:
settings.py
in the webassistant folder is the project’s settings. In it, we will register the Django apps we are about to create.
The
Code:
urls.py
is where we will let Django know what it should display to the user.

We now check to ensure that the installation went successfully. In your terminal run the following command:

Code:
python3 manage.py runserver

Once you have seen the above image, congrats! You have successfully installed Django. You can use

Code:
control C

to close the server.

Creating Django Apps

Back to your terminal, run the following command to create a Django app.

Code:
python3 manage.py startapp assistant

Use the

Code:
ls

command to see what’s inside the assistant folder.

Code:
ls assistant
__init__.py admin.py apps.py migrations models.py tests.py views.py

The

Code:
__init__.py

file found in both the webassistant and assistant folders enables the folders to be imported as a Python package. The

Code:
views.py

is where we code what we want the browser to be displayed to the user. These files are what concern our project. To know more about other files, check the documentation.

Next, we go to the

Code:
settings.py

file, in

Code:
INSTALLED_APP

S section to register the name of the app we just created. Use the

Code:
nano

command.

Code:
nano webassistant/settings.py

Code:
...
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # custom app 'assistant',
]

We also open the project’s

Code:
urls.py

file to register the app-level URLs.

Code:
from django.contrib import admin
from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('assistant.urls')),
]

The

Code:
path()

function is used to map the URL to the appropriate view. The

Code:
include()

function adds the URL of the app to the project-level

Code:
urls.py

. The empty quote means the home URL, that is, what we see when we run the local server.

If you have read Django tutorials including this one, you are gradually becoming familiar with the process. That’s how it is done in every Django application.

Getting the API Key

We need an API key to enable the OpenAI model to perform web assistant tasks for us. To get the API key, we first have to create an account on the official website of OpenAI. Once you have completed the signup process, go to the OpenAI API reference where you will be directed to a page to generate your API key.

Recommended: OpenAI API – or How I Made My Python Code Intelligent

Make sure you keep the API key safe. Create a file in your app-level folder and call it

Code:
key.py

Code:
API_KEY = 'YOUR SECRET API KEY'

Just replace the text in quotes with your own generated API key.

Integrating the OpenAI Model

To integrate the API with our Django application, create a file called

Code:
engine.py

in the app’s folder and input the following python script.

Code:
# engine.py from .key import API_KEY
import openai openai.api_key = API_KEY def model(request): prompt = request.POST.get('prompt') response = openai.Completion.create( engine='text-davinci-003', temperature=0.5 prompt=prompt, max_tokens=1000, ) text = response.choices[0].text chats = {'prompt': prompt, 'response': text } return chats

We import the API key and the

Code:
openai

module. We use the

Code:
openai.api_key

to load the API key. Then, in the function, we requested to get the prompt, which is the question asked by the user. We then return the response generated by the model in form of a dictionary.

The temperature affects the randomness of the output, and it’s between 0 and 1. The AI model employed to generate predictions is the

Code:
text_davinci_003.

The

Code:
max_tokens

specifies the maximum number of tokens or pieces of words that can be generated by the model.

To learn more about the parameters, perhaps this article can be of help. We will now import the function in our

Code:
views.py

file.

Code:
from django.shortcuts import render, redirect
from .engine import model def home(request): try: if request.method == 'POST': context = model(request) return render(request, 'home.html', context) else: return render(request, 'home.html') except: return redirect('error') def error_handler(request): return render(request, 'error.html')

Two functions indicate two separate HTML files. In the first function, we use a try statement to check the block of code for errors. If no errors were found, the code under the

Code:
try

statement will execute. But if there were errors, the code under the

Code:
except

statement will be executed.

Recommended: Python Try/Except Error Handling

The

Code:
if

statement checks if the request method is

Code:
POST

, if so, it will generate a response from the OpenAI model. But if otherwise, the

Code:
else

statement will be run in which no response will be generated.

The

Code:
render()

function renders or displays a response in the HTML files which we are yet to create. Notice that in the

Code:
else

statement, the

Code:
render()

function just renders the same homepage without the context because the request method was not POST. The

Code:
redirect()

function is used to redirect a user to another webpage.

Let’s now write a URL in the

Code:
urls.py

file to display our contents.

Code:
assistant/urls.py from django.urls import path
from .import views urlpatterns = [ path('', views.home, name='home'), path('error', views.error_handler, name='error_handler'),
]

The

Code:
name

argument is kind of an alias for the URL. So instead of writing long URLs, we can just reference them with the name given. Mostly used in HTML files.

Templates

We now want to render our templates. Create a folder named

Code:
templates

in the current directory. This is where we will keep our HTML files. Having created the folder, go to

Code:
settings.py

and let Django know that a templates folder is created.

In the

Code:
settings.py

file, scroll down to the ‘

Code:
TEMPLATES

’ section and add the following to

Code:
DIRS

Code:
…
TEMPLATES = [ { … 'DIRS': [os.path.join(BASE_DIR, 'templates')], … }
]

Be sure to import the

Code:
os

module. Then, create a file in the templates folder with the name

Code:
base.html

Code:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Assistant | {% block title %} {% endblock %}</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> {% block content %} {% endblock %}
</body>
</html>

That’s our HTML boilerplate with bootstrap added to it for styling our web pages. Next is the

Code:
home.html

, the homepage that will inherit everything in the

Code:
base.html

template.

Code:
{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block content %}
<div class="row justify-content-center my-4"> <div class="col-md-7 mt-4"> <div class="card"> <h1 class="card-header text-center">A.I WEB ASSISTANT</h1> <div class="card-body"> <pre>Hello, how can I help you?</pre> <form action="." method="POST"> <!-- this secures the form from malicious attacks during submission --> {% csrf_token %} <input class="form-control mb-2" required type="text" autofocus="autofocus" name="prompt" value="{{ prompt }}" id=""> <button class="btn btn-success fw-bold" type="submit"> GENERATE </button> </form> <hr> <pre> {{ response }} </pre> </div> </div> </div> </div>
</div>
{% endblock %}

Finally, the

Code:
error.html

will be displayed when an error occurs. It also inherits everything in the

Code:
base.html

Code:
{% extends 'base.html' %}
{% block title %} 404 {% endblock %}
{% block content %}
<div class="row justify-content-center my-4"> <div class="col-md-7 mt-4"> <h1>Page Not Found</h1> <p>Make sure you are connected to the internet or your query is correct</p> <a href="{% url 'home' %}" class="btn btn-secondary">Home</a> </div>
</div>
{% endblock %}

Certain things in these HTML files demand an explanation. Those strange syntaxes that begin with curly braces are Django templating language. When used with a

Code:
block

statement, it must end with an

Code:
endblock

statement. In

Code:
base.html

, we inserted the empty block statement in the title tag.

This makes it possible to override the home and error HTML files with a different word. But you can see the ‘Web Assistant’ remains the same in all files inheriting

Code:
base.html

.

The

Code:
csrf_token

is for security reasons. It’s compulsory. If you don’t add it, Django will throw an error. The prompt variable comes from the

Code:
view.py

file which in turn is imported from the

Code:
engine.py

file. The same applies to the response. Remember, we sent them here using the

Code:
render()

function.

The

Code:
{% url 'home' %}

syntax is Django’s way of displaying internal URLs. Go back to the app-level

Code:
urls.py

, you will see where we defined the name and this makes it possible to use it in HTML files.

[Image: image-144.png]

Conclusion

Congrats on creating an AI-powered web assistant using Django. If you enjoy the tutorial, feel free to share it with others. Have a nice day.