testing custom js and css

app.py

@@ -1,31 +1,32 @@
 import gradio as gr
 
-# Define a function that echoes the input text
 def echo_text(input_text):
     return input_text
 
+# Custom CSS
 custom_css = """
-    .gr-textbox {
-        background-color: rgb(79, 129, 145);
-        color: #333;
-        font-size: 16px;
-        border: 2px solid #666;
-        padding: 10px;
-    }
-    .gr-textbox:focus {
-        border: 2px solid #009688;
-    }
+#custom-textbox {
+    background-color: #f2f2f2;
+    color: #333;
+    font-size: 16px;
+    border: 2px solid #666;
+    padding: 10px;
+}
+"""
+
+# Custom JavaScript
+custom_js = """
+document.getElementById("custom-textbox").addEventListener("input", function() {
+    var inputValue = this.value;
+    document.getElementById("output-text").value = inputValue;
+});
 """
 
 iface = gr.Interface(
     fn=echo_text,
-    inputs=gr.Textbox(text="Enter text here...", style=custom_css),
-    outputs=gr.Textbox(style=custom_css),
-    live=True,
-    title="LLM Evaluator with Linguistic Scrutiny",
-    width=500,
-    height=200,
-    theme="dark"  # You can use "dark" for a dark theme
+    inputs=gr.Textbox(id="custom-textbox", text="Enter text here...", style=custom_css, _js=custom_js),  # Use custom CSS and JavaScript
+    outputs=gr.Textbox(id="output-text", style=custom_css),
+    live=True
 )
 
-iface.launch()
+iface.launch()