Update app.py

app.py

@@ -16,7 +16,7 @@ DESCRIPTION = '''
 LICENSE = """
 <p/>
 ---
-Built with model "StevenChen16/Llama3-8B-Lawyer", based on "meta-llama/Meta-Llama-3-8B"
+Built with model "StevenChen16/llama3-8B-Lawyer", based on "meta-llama/Meta-Llama-3-8B"
 """
 
 PLACEHOLDER = """
@@ -37,6 +37,26 @@ h1 {
   background: #1565c0;
   border-radius: 100vh;
 }
+.chat-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+.chat-message img {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  border-radius: 50%;
+}
+.chat-message .message {
+  max-width: 80%;
+  background-color: #f1f1f1;
+  padding: 10px;
+  border-radius: 10px;
+}
+.me .message {
+  background-color: #d1e7ff;
+}
 """
 
 args = dict(
@@ -86,26 +106,37 @@ def query_model(user_input, history):
     for new_text in chat_model.stream_chat(messages, max_new_tokens=512, temperature=0.9):
         response += new_text
         yield response
-    
+
+# 格式化消息
+def format_message(role, content):
+    if role == 'user':
+        avatar = '<div class="chat-message me"><img src="data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><rect width=\'100\' height=\'100\' fill=\'black\'/><text x=\'50%\' y=\'50%\' fill=\'white\' font-size=\'50\' text-anchor=\'middle\' alignment-baseline=\'central\'>Me</text></svg>" />'
+    else:
+        avatar = '<div class="chat-message"><img src="avatar.png" />'
+    return f'{avatar}<div class="message">{content}</div></div>'
+
 # Gradio block
 chatbot = gr.Chatbot(height=450, placeholder=PLACEHOLDER, label='Gradio ChatInterface')
 
 with gr.Blocks(css=css) as demo:
     gr.Markdown(DESCRIPTION)
     gr.DuplicateButton(value="Duplicate Space for private use", elem_id="duplicate-button")
-    gr.ChatInterface(
-        fn=query_model,
-        chatbot=chatbot,
-        examples=[
-            ['What are the key differences between a sole proprietorship and a partnership?'],
-            ['What legal steps should I take if I want to start a business in the US?'],
-            ['Can you explain the concept of "duty of care" in negligence law?'],
-            ['What are the legal requirements for obtaining a patent in Canada?'],
-            ['How can I protect my intellectual property when sharing my idea with potential investors?']
-        ],
-        cache_examples=False,
-    )
+
+    def respond(message, history):
+        formatted_user_message = format_message('user', message)
+        history.append((message, formatted_user_message))
+        response = query_model(message, history)
+        formatted_ai_response = format_message('ai', next(response))
+        history.append((message, formatted_ai_response))
+        return history, history
+
+    chatbot = gr.Chatbot(label='Gradio ChatInterface')
+    input_text = gr.Textbox(label="Input", placeholder="Type your question here...")
+    send_button = gr.Button("Send")
+    
+    send_button.click(respond, [input_text, chatbot], [chatbot, chatbot])
+    
     gr.Markdown(LICENSE)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)