update web assistant tutorial to make better UI & use chatgpt api

Author: x4nth055

web-programming/webassistant/assistant/templates/assistant/home.html

@@ -1,43 +1,35 @@
 {% extends 'assistant/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, am your web assistant here to help you, what's on your mind?</pre>
-
+              <div class="d-flex justify-content-end">
+                <button type="button" class="btn btn-primary mb-3" onclick="location.href='{% url 'new_chat' %}'">New Chat +</button>
+              </div>
+              <div class="chat-history mb-3">
+                {% for message in messages %}
+                  <div class="card mb-2 {% if message.role == 'assistant' %}bg-success text-white{% endif %}">
+                    <div class="card-body p-2">
+                      <strong>{{ message.role|title }}:</strong> {{ message.content|linebreaksbr }}
+                    </div>
+                  </div>
+                {% endfor %}
+              </div>
               <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="">
-
+                <label for="temperature" class="form-label">Temperature:</label>
+                <input class="form-control mb-2" type="number" step="0.01" min="0" max="2" name="temperature" value="{{ temperature }}" id="temperature">
                 <button class="btn btn-success fw-bold" type="submit">
-                     GENARATE
+                     GENERATE
                 </button>
-
               </form>
-            
-              <hr>
-
-              <pre>
-                {{ formatted_response }}
-              </pre>
-
             </div>
-
         </div>
-
     </div>
-
-  </div>
 </div>
-{% endblock %}
+{% endblock %}

web-programming/webassistant/assistant/urls.py

@@ -5,6 +5,7 @@
 
 # a list of all the urls
 urlpatterns = [
-    path('home/', views.home, name='home'),
+    path('', views.home, name='home'),
+    path('new_chat/', views.new_chat, name='new_chat'),
     path('error-handler/', views.error_handler, name='error_handler'),
 ]

web-programming/webassistant/assistant/views.py

@@ -4,43 +4,66 @@
 import openai
 # import the generated API key from the secret_key file
 from .secret_key import API_KEY
-
-
 # loading the API key from the secret_key file
 openai.api_key = API_KEY
 
-
 # this is the home view for handling home page logic
 def home(request):
-    # the try statement is for sending request to the API and getting back the response
-    # formatting it and rendering it in the template
     try:
-        # checking if the request method is POST
+        # if the session does not have a messages key, create one
+        if 'messages' not in request.session:
+            request.session['messages'] = [
+                {"role": "system", "content": "You are now chatting with a user, provide them with comprehensive, short and concise answers."},
+            ]
+
         if request.method == 'POST':
-            # getting prompt data from the form
+            # get the prompt from the form
             prompt = request.POST.get('prompt')
-            # making a request to the API 
-            response = openai.Completion.create(model="text-davinci-003", prompt=prompt, temperature=1, max_tokens=1000)
-            # formatting the response input
-            formatted_response = response['choices'][0]['text']
-            # bundling everything in the context
+            # get the temperature from the form
+            temperature = float(request.POST.get('temperature', 0.1))
+            # append the prompt to the messages list
+            request.session['messages'].append({"role": "user", "content": prompt})
+            # set the session as modified
+            request.session.modified = True
+            # call the openai API
+            response = openai.ChatCompletion.create(
+                model="gpt-3.5-turbo",
+                messages=request.session['messages'],
+                temperature=temperature,
+                max_tokens=1000,
+            )
+            # format the response
+            formatted_response = response['choices'][0]['message']['content']
+            # append the response to the messages list
+            request.session['messages'].append({"role": "assistant", "content": formatted_response})
+            request.session.modified = True
+            # redirect to the home page
             context = {
-                'formatted_response': formatted_response,
-                'prompt': prompt
+                'messages': request.session['messages'],
+                'prompt': '',
+                'temperature': temperature,
             }
-            # this will render the results in the home.html template
             return render(request, 'assistant/home.html', context)
-        # this runs if the request method is GET
         else:
-            # this will render when there is no request POST or after every POST request
-            return render(request, 'assistant/home.html')
-
-    # the except statement will capture any error
-    except:
-        # this will redirect to the 404 page after any error is caught
+            # if the request is not a POST request, render the home page
+            context = {
+                'messages': request.session['messages'],
+                'prompt': '',
+                'temperature': 0.1,
+            }
+            return render(request, 'assistant/home.html', context)
+    except Exception as e:
+        print(e)
+        # if there is an error, redirect to the error handler
         return redirect('error_handler')
 
 
+def new_chat(request):
+    # clear the messages list
+    request.session.pop('messages', None)
+    return redirect('home')
+
+
 # this is the view for handling errors
 def error_handler(request):
     return render(request, 'assistant/404.html')

web-programming/webassistant/webassistant/urls.py

@@ -6,5 +6,5 @@
     # the url to the admin site
     path('admin/', admin.site.urls),
     # registering all the assistant application urls
-    path('webassistant/', include('assistant.urls')),
+    path('', include('assistant.urls')),
 ]