Update app.py

app.py

@@ -15,14 +15,30 @@ def predict(input, history=[]):
     history = model.generate(bot_input_ids, max_length=1000, pad_token_id=tokenizer.eos_token_id).tolist()
 
     # convert the tokens to text, and then split the responses into lines
-    response = tokenizer.decode(history[0]).replace("<|endoftext|>", "\n")
+    response = tokenizer.decode(history[0]).split("<|endoftext|>")
+    response.remove("")
     
-    return response, history
+    # 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>"
+    
+    return html, history
 
 import gradio as gr
 
+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}
+"""
+
 gr.Interface(fn=predict,
              theme="default",
+             css=css,
              inputs=["text", "state"],
              outputs=["text", "state"]).launch()