overhaul frontend - integrate prompt data, link cards, etc

Author: franksh

chatbot/chat.py

@@ -1,7 +1,7 @@
 """
 Chat views.
 """
-from flask import Blueprint, render_template, request, session, current_app
+from flask import Blueprint, render_template, request, session, current_app, abort
 from wtforms import Form, StringField, validators
 
 from chatbot.auth import login_required
@@ -15,23 +15,33 @@
 def overview():
     """ Route for the chat overview
     """
-    return render_template('chat/overview.html')
+    return render_template('chat/overview.html', prompts=current_app.prompts)
 
 
 @bp.route('/<chat_scenario>', methods=('GET', 'POST'))
 @login_required
 def chat(chat_scenario):
     """ Route for chat with variable scenarios
     """
-    return render_template('chat/chat.html', chat_scenario=chat_scenario)
+    form = ChatForm(request.form)
 
+    # Return 404 if chat scenario not found
+    promptExists = chat_scenario in current_app.prompts.keys()
+    if not promptExists:
+        abort(404)
+        # return render_template('404.html'), 404
 
-@bp.route('/general', methods=('GET', 'POST'))
-@login_required
-def general():
-    """ Route for general simple chat.
-    """
-    form = ChatForm(request.form)
+    # If the users opens the chat from somewhere else, clear chat history
+    userOpensChatFirstTime = request.url != request.referrer
+    if userOpensChatFirstTime:
+        clear_chat_history()
+
+    # request.referrer.split('/')[-1]
+
+    prompt = current_app.prompts[chat_scenario]
+    prompt_text = prompt['text']
+    # if chat_scenario 
+    # prompt = current_app.prompts
 
     # Get chat history
     chat_history = session.get('chat_history')
@@ -56,14 +66,57 @@ def general():
             # Clear form
             form.text_input.data = ""
             # Get response from bot
-            chat_history = get_bot_response(chat_history)
+            chat_history = get_bot_response(chat_history, prompt_text)
             # Update chat history
             session['chat_history'] = chat_history
+
+
+    return render_template('chat/chat.html', 
+                            # chat_scenario=chat_scenario,
+                            prompt=prompt,
+                            form=form,
+                            loc = userOpensChatFirstTime
+                            )
+
+
+# @bp.route('/general', methods=('GET', 'POST'))
+# @login_required
+# def general():
+#     """ Route for general simple chat.
+#     """
+#     form = ChatForm(request.form)
+
+#     # Get chat history
+#     chat_history = session.get('chat_history')
+#     # Create if not exists
+#     if not chat_history:
+#         chat_history = []
+
+#     # On text form submission
+#     if request.method == 'POST':
+#         if request.form['submit_button'] == 'Clear chat':
+#             # Clear chat history
+#             clear_chat_history()
+#         elif request.form['submit_button'] == 'Send text' and form.validate():
+#             # Add text to chat history
+#             chat_history.append(
+#                 {
+#                     'sender': 'user',
+#                     'text': form.text_input.data
+#                 }
+#             )
+
+#             # Clear form
+#             form.text_input.data = ""
+#             # Get response from bot
+#             chat_history = get_bot_response(chat_history)
+#             # Update chat history
+#             session['chat_history'] = chat_history
 
-    return render_template('chat/general_chat.html', form=form)
+#     return render_template('chat/general_chat.html', form=form)
 
 
-def get_bot_response(chat_history):
+def get_bot_response(chat_history, prompt_text):
     """ Get response from the bot """
     # Here we have to get the response from the bot
     # chat_history should be sent to the model class
@@ -79,7 +132,7 @@ def get_bot_response(chat_history):
     # )
     if current_app.config['LOAD_GRAMMAR_MODEL']:
         chat_history = current_app.grammar_correction.add_correction_to_chat_history(chat_history)
-    chat_history = current_app.language_model.add_response_to_chat_history(chat_history)
+    chat_history = current_app.language_model.add_response_to_chat_history(chat_history, prompt_text)
 
     return chat_history
 
@@ -91,5 +144,5 @@ def clear_chat_history():
 class ChatForm(Form):
     text_input = StringField('Input',
                             [validators.Length(min=4, max=300)],
-                            render_kw={'class': 'chat_text_input_field'}
+                            render_kw={'class': 'form-control chat_text_input_field'}
                             )

chatbot/dashboard.py

@@ -1,7 +1,7 @@
 """
 Dashboard view.
 """
-from flask import Blueprint, render_template
+from flask import Blueprint, render_template, current_app
 
 from chatbot.auth import login_required
 from chatbot.utils import get_activity_plot, get_error_distribution_plot
@@ -16,8 +16,16 @@ def dashboard():
     """
 
     fig_activity_html = get_activity_plot()
+
+
+    featured_prompts = {key: current_app.prompts[key] for key in
+                        ['general_chat_beginner', 'scenario_restaurant', 'persona_shakespeare']
+                        }
 
-    return render_template('dashboard/dashboard.html', plot=fig_activity_html)
+    return render_template('dashboard/dashboard.html',
+                            plot=fig_activity_html,
+                            featured_prompts=featured_prompts
+                            )
 
 
 
@@ -30,9 +38,15 @@ def statistics():
     fig_activity_html = get_activity_plot()
 
     fig_grammar_html = get_error_distribution_plot()
+
+    # suggested_prompts = 
+    suggested_prompts = {key: current_app.prompts[key] for key in
+                        ['general_chat_intermediate', 'scenario_bakery', 'scenario_restaurant']
+                        }
 
     return render_template('dashboard/statistics.html', 
                             plot_activity=fig_activity_html,
                             plot_grammar=fig_grammar_html,
+                            suggested_prompts=suggested_prompts
                             )
 

chatbot/data/prompts.json

@@ -1,17 +1,31 @@
 {
-    "general_chat_easy": {
+    "general_chat_beginner": {
+        "category": "general_chat",
+        "label": "Beginner",
+        "description_short": "This is a placeholder for the short description of the chat type.",
+        "description_long": "This is a placeholder for the longer description of the chat type.<br>It is intended to be displayed when a user starts a scenario, for example",
         "text": "In this conversation, the AI Teacher is discussing everyday topics with the student. Examples of topics are: greetings, introducing each other, telling time, talking about family and hobbies, counting. The teacher uses beginner level English. The conversation is made with short and simple sentences. After each interaction, the AI Teacher asks a new question.\nTeacher: Tell me, what would you like to talk about today?\nStudent: What do you suggest?"
     },
 
     "general_chat_intermediate": {
-       "text": "In this conversation, the AI Teacher is discussing everyday topics with the student. Examples of topics are: greetings, introducing each other, telling time, talking about family and hobbies, counting. The teacher uses beginner level English. The conversation is made with short and simple sentences. After each interaction, the AI Teacher asks a new question.\nTeacher: Tell me, what would you like to talk about today?\nStudent: What do you suggest?"
+        "category": "general_chat",
+        "label": "Intermediate",
+        "description_short": "This is a placeholder for the short description of the chat type.",
+        "text": "In this conversation, the AI Teacher is discussing everyday topics with the student. Examples of topics are: greetings, introducing each other, telling time, talking about family and hobbies, counting. The teacher uses beginner level English. The conversation is made with short and simple sentences. After each interaction, the AI Teacher asks a new question.\nTeacher: Tell me, what would you like to talk about today?\nStudent: What do you suggest?"
     },
 
     "general_chat_advanced": {
+        "category": "general_chat",
+        "label": "Advanced",
+        "description_short": "This is a placeholder for the short description of the chat type.",
         "text": "In the following exchange, the AI Teacher is having a casual conversation with the student. The teacher uses high-level complex academic English. The AI Teacher talks in long sentences and uses uncommon words and synonyms. It sometimes asks hypothetical questions to the student and uses present, past and future tenses. The AI Teacher asks the student for his opinion on complex topics such as personal values, metaphysical questions, religion, current affairs, etc. After each interaction, the AI Teacher asks a new question.\nTeacher: Tell me, what would you like to talk about today?"
     },
 
     "scenario_bakery": {
+        "category": "scenario",
+        "label": "Bakery",
+        "description_short": "This is a placeholder for the short description of the chat type.",
+        "description_long": "This is a placeholder for the longer description of the chat type.<br>It is intended to be displayed when a user starts a scenario, for example",
         "text": "The following is a conversation with Lola the baker. Lola is helpful, clever, and very friendly.\nHuman: Good morning!\nLola: Hello, how can I help you?",
         "tasks": [
             "Ask what types of bread they have and select one to buy",
@@ -23,6 +37,10 @@
     },
 
     "scenario_store": {
+        "category": "scenario",
+        "label": "Store",
+        "description_short": "This is a placeholder for the short description of the chat type.",
+        "description_long": "This is a placeholder for the longer description of the chat type.<br>It is intended to be displayed when a user starts a scenario, for example",
         "text": "The following is a conversation between a Human and a store clerk called Artemis. The conversation takes place at a store. The Human needs help finding some items in the store as well as the price of those items. Artemis helps him out.\nArtemis: Hi, my name is Artemis. May I help you?",
         "tasks": [
             "Ask the clerk to help you find 2 cleaning related objects.",
@@ -34,6 +52,10 @@
     },
 
     "scenario_restaurant": {
+        "category": "scenario",
+        "label": "Restaurant",
+        "description_short": "This is a placeholder for the short description of the chat type.",
+        "description_long": "This is a placeholder for the longer description of the chat type.<br>It is intended to be displayed when a user starts a scenario, for example",
         "text": "The following is a conversation between a waiter named Artemis and a client. The interaction takes place in a restaurant at lunch time. Artemis is helpful clever, and very friendly. He wants to make sure the client has a nice experience at the restaurant. \nArtemis: Hello my name is Artemis, I'll be your waiter today.",
         "tasks": [
             "Ask to see the menu",
@@ -44,5 +66,13 @@
             "Ask for the bill",
             "The meal they brought you is not what you ordered, let the waiter know and ask them to bring you a new one."
         ]
+    },
+
+    "persona_shakespeare": {
+        "category": "persona",
+        "label": "Shakespeare",
+        "description_short": "This is a placeholder for the short description of the chat type.",
+        "description_long": "This is a placeholder for the longer description of the chat type.<br>It is intended to be displayed when a user starts a scenario, for example",
+        "text": "The following is a conversation between a a human and the famous playwright William Shakespeare."
     }
 }

chatbot/language_model.py

@@ -26,7 +26,7 @@ def __init__(self,
         # Load the prompts for all scenarios
 
 
-    def add_response_to_chat_history(self, chat_history):
+    def add_response_to_chat_history(self, chat_history, prompt_text):
         """ Generate a response from the bot and append to chat history.
         
         Converts the chat history to a flat string of ids,
@@ -36,7 +36,7 @@ def add_response_to_chat_history(self, chat_history):
             return chat_history
 
 
-        reply_text = self.get_response_from_GPT3(chat_history)
+        reply_text = self.get_response_from_GPT3(chat_history, prompt_text)
 
         if reply_text:
             chat_history.append(
@@ -47,7 +47,7 @@ def add_response_to_chat_history(self, chat_history):
             )
         return chat_history
 
-    def get_response_from_GPT3(self, chat_history):
+    def get_response_from_GPT3(self, chat_history, prompt_text):
         """ Get a reply from GPT3 
         
         Returns:
@@ -56,7 +56,7 @@ def get_response_from_GPT3(self, chat_history):
             A text string containing just the reply from the model.
             Example: "I'm fine, how are you?"
         """
-        prompt_with_dialog = self.create_prompt_with_dialog(chat_history)
+        prompt_with_dialog = self.create_prompt_with_dialog(chat_history, prompt_text)
 
         response = openai.Completion.create(
                 engine=self.engine,
@@ -88,17 +88,16 @@ def clean_reply_text(self, reply_raw):
         return reply
 
 
-    def create_prompt_with_dialog(self, chat_history,
-                                  chat_type='general_chat_intermediate') -> str:
+    def create_prompt_with_dialog(self, chat_history, prompt_text) -> str:
         """ Create a prompt to get a response from GPT-3.
         
         Combines the base prompt and the recent chat history
         to a prompt with dialog for GPT3 to create the next sentence.
         """
-        prompts = current_app.prompts
-        assert chat_type in prompts.keys()
-        prompt = prompts[chat_type]
-        prompt_text = prompt['text']
+        # prompts = current_app.prompts
+        # assert chat_type in prompts.keys()
+        # prompt = prompts[chat_type]
+        # prompt_text = prompt['text']
 
         # Limit the chat_history to the past 100 messages
         chat_history = chat_history[-100:]

chatbot/static/style.css

@@ -26,7 +26,7 @@ html {
 .btn-primary:active,
 .btn-primary:visited {
   background-color: rgb(var(--blue-rgb)) !important;
-  box-shadow: 0 0 0 0.25rem rgb(var(--blue-rgb)) !important;
+  /* box-shadow: 0 0 0 0.25rem rgb(var(--blue-rgb)) !important; */
   border-color: rgb(var(--blue-rgb)) !important;
 }
 
@@ -44,14 +44,14 @@ html {
   ) !important;
 }
 
-.bg-situation-header {
+.bg-scenario-header {
   background-color: rgba(
     var(--red-rgb),
     var(--bg-card-header-opacity)
   ) !important;
 }
 
-.bg-situation-body {
+.bg-scenario-body {
   background-color: rgba(
     var(--red-rgb),
     var(--bg-card-body-opacity)

chatbot/templates/base.html

@@ -9,7 +9,7 @@
     <!-- Favicon-->
     <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" />
     <!-- Bootstrap icons-->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet" />
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="{{ url_for('static', filename='bootstrap_template_styles.css') }}" rel="stylesheet" />
 
@@ -62,7 +62,7 @@
 
   <!-- Footer-->
   <footer class="py-5">
-      <div class="container px-5"><p class="m-0 text-center text-dark">Copyright &copy; Your Website 2021</p></div>
+      <div class="container px-5"><p class="m-0 text-center text-dark">Copyright &copy; ConvAF 2022</p></div>
   </footer>
   <!-- Bootstrap core JS-->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>