Submit buttom styling, clear chat and add a header

app.py

@@ -13,21 +13,47 @@ def get_text_response(prompt):
     text_response = response_json.get("response", "No response received.")
     return text_response
 
-with gr.Blocks() as demo:
+def clear_chat():
+    return "", ""
+
+css = """
+    <style>
+        .header-title {
+            font-size: 1.5em;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .gr-button {
+            background-color: #7D3C98; /* Placeholder for the purple color, replace with actual color code */
+            color: white;
+        }
+        .gr-button:hover {
+            background-color: #6C3483; /* Darker purple on hover, replace with actual color code */
+        }
+        .acknowledgments {
+            margin-top: 20px;
+            text-align: center;
+        }
+    </style>
+"""
+
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("<div class='header-title'>Fair Compute Llama-2 Chat</div>")
+    
     with gr.Row():
         prompt = gr.Textbox(label="Enter your prompt")
         submit_button = gr.Button("Submit")
+        clear_button = gr.Button("Clear")
     output = gr.Textbox(label="Response")
 
     submit_button.click(fn=get_text_response, inputs=prompt, outputs=output)
-
-    # Adding the acknowledgment about Fair Compute
-    gr.HTML(
+    clear_button.click(fn=clear_chat, inputs=[], outputs=[prompt, output])
+    gr.Markdown(
+        """
+        <div class="acknowledgments">
+            <p>Run AI models on your home computers, powered by <a href="https://faircompute.com/" style="text-decoration: underline;" target="_blank">FairCompute</a></p>
+        </div>
         """
-           <div class="acknowledgments">
-               <p>Run AI models on your home computers, powered by <a href="https://faircompute.com/" style="text-decoration: underline;" target="_blank">FairCompute</a></p>
-           </div>
-       """
     )
 
 demo.launch()