Update app.py

app.py

@@ -4,7 +4,6 @@ import spaces
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 from threading import Thread
 
-
 TITLE = '''
 <h1 style="text-align: center;">Meta Llama3.1 8B <a href="https://huggingface.co/spaces/ysharma/Chat_with_Meta_llama3_1_8b?duplicate=true" id="duplicate-button"><button style="color:white">Duplicate this Space</button></a></h1>
 '''
@@ -25,9 +24,8 @@ Built with Llama
 
 PLACEHOLDER = """
 <div style="padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center;">
-   <img src="https://ysharma-dummy-chat-app.hf.space/file=/tmp/gradio/c21ff9c8e7ecb2f7d957a72f2ef03c610ac7bbc4/Meta_lockup_positive%20primary_RGB_small.jpg" style="width: 80%; max-width: 550px; height: auto; opacity: 0.55;  "> 
-   <h1 style="font-size: 28px; margin-bottom: 2px; opacity: 0.55;">Meta llama3.1</h1>
-   <p style="font-size: 18px; margin-bottom: 2px; opacity: 0.65;">Ask me anything...</p>
+   <h1 style="font-size: 28px; margin-bottom: 2px; opacity: 0.85;">Meta llama3.1</h1>
+   <p style="font-size: 18px; margin-bottom: 2px; opacity: 0.75;">Ask me anything...</p>
 </div>
 """
 
@@ -36,8 +34,8 @@ h1 {
   text-align: center;
   display: block;
   display: flex;
-    align-items: center;
-    justify-content: center;
+  align-items: center;
+  justify-content: center;
 }
 
 #duplicate-button {
@@ -48,6 +46,43 @@ h1 {
   font-size: 1rem;
   padding: 3px 5px;
 }
+
+.gradio-container {
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.gradio-chatbot .input-container {
+  border-top: 1px solid #ddd;
+  padding-top: 10px;
+}
+
+.gradio-chatbot .input-container textarea {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: none;
+  height: 50px;
+}
+
+.gradio-chatbot .message {
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px 0;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.gradio-chatbot .message.user {
+  background-color: #f5f5f5;
+}
+
+.gradio-chatbot .message.assistant {
+  background-color: #e6f7ff;
+}
 """
 
 model_id = "meta-llama/Meta-Llama-3.1-8B-Instruct"
@@ -57,7 +92,7 @@ tokenizer = AutoTokenizer.from_pretrained(model_id)
 model = AutoModelForCausalLM.from_pretrained(model_id, device_map="auto")
 terminators = [
     tokenizer.eos_token_id,
-    tokenizer.convert_tokens_to_ids("<|eot_id|>")
+    tokenizer.convert_tokens_to_ids("")
 ]
 
 MAX_INPUT_TOKEN_LENGTH = 4096
@@ -108,7 +143,6 @@ def chat_llama3_1_8b(message: str,
     for text in streamer:
         outputs.append(text)
         yield "".join(outputs)
-        
 
 # Gradio block
 chatbot=gr.Chatbot(height=450, placeholder=PLACEHOLDER, label='Gradio ChatInterface')
@@ -117,7 +151,6 @@ with gr.Blocks(fill_height=True, css=css) as demo:
 
     gr.Markdown(TITLE)
     gr.Markdown(DESCRIPTION)
-    #gr.DuplicateButton(value="Duplicate Space for private use", elem_id="duplicate-button")
     gr.ChatInterface(
         fn=chat_llama3_1_8b,
         chatbot=chatbot,
@@ -154,4 +187,4 @@ with gr.Blocks(fill_height=True, css=css) as demo:
     gr.Markdown(LICENSE)
     
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()