check_1

app.py

@@ -60,78 +60,25 @@ For information on how to customize the ChatInterface, peruse the gradio docs: h
 
 custom_css = """
 /* styles.css */
-#chatbox {
-    background-color: #ece5dd;
-    border-radius: 8px;
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-}
-
-.message {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-}
-
-.message.user {
-    justify-content: flex-end;
-}
-
-.message.bot {
-    justify-content: flex-start;
-}
-
-.message .text {
-    background-color: #ffffff;
-    border-radius: 10px;
-    padding: 10px;
-    max-width: 80%;
-    line-height: 1.4;
-}
-
-.message.user .text {
-    background-color: #dcf8c6;
-}
-
-.message.bot .text {
-    background-color: #ffffff;
-}
-
-.message .timestamp {
-    font-size: 0.8em;
-    color: #999;
-}
-
-#input-box {
-    margin-top: 10px;
-    display: flex;
-}
-
-#input-box textarea {
-    width: 80%;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-    resize: none;
-}
-
-#input-box button {
-    width: 20%;
+.gr_button {
+    background-color: #4CAF50; /* Green */
     border: none;
-    border-radius: 5px;
-    background-color: #007bff;
     color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
     cursor: pointer;
-    padding: 10px;
 }
 
 """
 
 with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("## Zephyr Chatbot")
+    # load button from css
+    button = gr.Button("Click me", css_class="gr_button")
 
 if __name__ == "__main__":
     demo.launch()