Update app.py

app.py

@@ -87,3 +87,88 @@ with gr.ChatInterface(
     demo.load(__attachIp, None, None)
 
 demo.launch(debug=True)
+
+
+# Your custom CSS code
+css = """
+/* Container styles */
+.container {
+    background-color: #f7f7f7;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Header styles */
+#header {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: 700;
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+/* Input box styles */
+#input-text {
+    background-color: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 8px;
+    padding: 10px;
+    font-size: 16px;
+    color: #333333;
+}
+
+/* Output box styles */
+#output-text {
+    background-color: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 8px;
+    padding: 10px;
+    font-size: 16px;
+    color: #333333;
+}
+
+/* Button styles */
+.submit {
+    background-color: #ff7f50;
+    color: white;
+    border-radius: 8px;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.submit:hover {
+    background-color: #ff6347;
+}
+
+/* Additional styling for retry, undo, clear buttons */
+.retry, .undo, .clear {
+    background-color: #dddddd;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 16px;
+    color: #333333;
+    cursor: pointer;
+}
+
+.retry:hover, .undo:hover, .clear:hover {
+    background-color: #cccccc;
+}
+"""
+
+def chatbot(message):
+    response = "Hey, I am Jeff Bezos, Founder of Amazon"
+    return response
+
+# Creating the Gradio interface with the custom CSS
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("# Business Advice from Jeff Bezos", elem_id="header")
+    input_box = gr.Textbox(label="Your Question", elem_id="input-text")
+    output_box = gr.Textbox(label="Business Advice from Jeff Bezos", elem_id="output-text")
+    submit_btn = gr.Button("Submit", elem_id="submit")
+
+    submit_btn.click(chatbot, inputs=input_box, outputs=output_box)
+
+demo.launch()