check_1

app.py

@@ -42,28 +42,96 @@ def respond(
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
-
-# read css file
-def readCSS(file):
-    with open(file) as f:
-        return f.read()
-    
-demo.css = readCSS("style.css")
+# demo = gr.ChatInterface(
+#     respond,
+#     additional_inputs=[
+#         gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
+#         gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
+#         gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+#         gr.Slider(
+#             minimum=0.1,
+#             maximum=1.0,
+#             value=0.95,
+#             step=0.05,
+#             label="Top-p (nucleus sampling)",
+#         ),
+#     ],
+# )
+
+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%;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+}
+
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("## Zephyr Chatbot")
 
 if __name__ == "__main__":
     demo.launch()

style.css

@@ -1,68 +0,0 @@
-/* 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%;
-    border: none;
-    border-radius: 5px;
-    background-color: #007bff;
-    color: white;
-    cursor: pointer;
-    padding: 10px;
-}