testing html on gradio

app.py

@@ -1,16 +1,24 @@
 import gradio as gr
+import random
 
-# Define a function that echoes the input text
 def echo_text(input_text):
     return input_text
 
+# Custom HTML and CSS to display input above output
+custom_interface = """
+<div style="text-align: center;">
+    <label for="input-text">Input Text:</label><br>
+    <input type="text" id="input-text" name="input_text" value="Enter text here..." style="width: 80%;"><br>
+    <br>
+    <label for="output-text">Output Text:</label><br>
+    <textarea id="output-text" name="output_text" rows="5" cols="40" readonly style="width: 80%;"></textarea>
+</div>
+"""
+
 iface = gr.Interface(
     fn=echo_text,
-    inputs=gr.Textbox(text="Enter text here...", label="Input Text"),  # Text input field with a label
-    outputs=gr.Row(  # Create a row layout for input and output
-        gr.Text(label="Input Text:", type="output"),  # Display input text above output
-        gr.Text(label="Output Text:", type="output"),  # Display output text
-    ),
+    inputs=gr.Component(custom_interface, type="html"),  # Use custom HTML interface
+    outputs=gr.Component("Output will be displayed here.", type="html"),
     live=True
 )