app.py

import gradio as gr

def echo_text(input_text):
    return input_text

# Custom HTML layout for input and output
custom_interface = """
<div style="text-align: center;">
    <label for="io-text">Input Text:</label><br>
    <textarea id="io-text" name="io_text" rows="5" cols="40" style="width: 80%;"></textarea>
</div>
<script>
document.getElementById("io-text").addEventListener("input", function() {
    this.value = this.value;
});
</script>
"""

iface = gr.Interface(
    fn=echo_text,
    inputs=gr.HTML(custom_interface),  # Use custom HTML interface
    outputs=gr.Textbox("Output will be displayed here.", type="text"),
    live=True
)

iface.launch()