Update app.py

app.py

@@ -33,6 +33,13 @@ def predict(input, history=[]):
     frequency_penalty=0,
     presence_penalty=0).tolist()
 
+    # write some HTML
+    html = "<div class='chatbot'>"
+    for m, msg in enumerate(response):
+        cls = "user" if m%2 == 0 else "bot"
+        html += "<div class='msg {}'> {}</div>".format(cls, msg)
+    html += "</div>"
+
     history = response[Completion]
     
     # convert the tokens to text, and then split the responses into lines
@@ -40,6 +47,16 @@ def predict(input, history=[]):
     response = [(response[i], response[i+1]) for i in range(0, len(response)-1, 2)]  # convert to tuples of list
     return response, history
 
+css = """
+.chatbox {display:flex;flex-direction:column}
+.msg {padding:4px;margin-bottom:4px;border-radius:4px;width:80%}
+.msg.user {background-color:cornflowerblue;color:white}
+.msg.bot {background-color:lightgray;align-self:self-end}
+.footer {display:none !important}
+"""
+
 gr.Interface(fn=predict,
-             inputs=["text", "state"],
-             outputs=["chatbot", "state"]).launch()
+             theme="default",
+             inputs=[gr.inputs.Textbox(placeholder="I'm AI-DHD - ask me anything!"), "state"],
+             outputs=["html", "state"],
+             css=css).launch()