Update app.py

app.py

@@ -1,6 +1,3 @@
-import gradio as gr
-from huggingface_hub import InferenceClient
-
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
 def respond(
@@ -35,51 +32,68 @@ def respond(
         response += token
         yield response
 
-# ✅ Inject JavaScript using gr.Markdown()
-js_autofocus_fix = """
-<script>
-window.onload = function() {
-    setTimeout(function() {
-        let inputField = document.querySelector("textarea");
-        if (inputField) {
-            inputField.blur();  // Removes focus from the input field
-        }
-    }, 100);
-};
-</script>
-"""
-
-# ✅ Custom CSS (without JavaScript)
+# Define custom CSS
 custom_css = """
+/* Add your custom CSS styles here */
 body {
     font-family: Arial, sans-serif;
     background-color: white;
 }
 .gradio-container {
+    border: linear-gradient(90deg, rgba(0,0,0,1) 1%, rgba(15,6,83,1) 53%, rgba(22,9,121,1) 100%, rgba(0,212,255,1) 100%);
     border-radius: 10px;
     padding: 20px;
     background-color: #ffffff;
-    box-shadow: 0 0 12px 12px solid black; 
+    box-shadow:0 0 12px 12px solid black; 
 }
+.gradio-input {
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    padding: 10px;
+}
+.gradio-button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+}
+.gradio-output {
+    border: 1px solid #ddd;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow:0 0 12px 12px solid grey; 
+}
+<script>
+    window.onload = function() {
+        setTimeout(function() {
+            let inputField = document.querySelector("textarea");
+            if (inputField) {
+                inputField.blur();  // Removes focus from the input field
+            }
+        }, 100);
+    };
+</script>
 """
 
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown(js_autofocus_fix)  # ✅ Inject JavaScript here
-    gr.ChatInterface(
-        fn=respond,
-        additional_inputs=[
-            gr.Textbox(value="You are a Chatbot.Your name is Evy.Your are Developed By Joe.", 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)",
-            ),
-        ]
-    )
+# Create a Gradio chat interface with custom CSS
+demo = gr.ChatInterface(
+    fn=respond,
+    additional_inputs=[
+        gr.Textbox(value="You are a Chatbot.Your name is Evy.Your are Developed By Joe.", 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)",
+        ),
+    ],
+   
+    css=custom_css
+)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()