app.py

import gradio as gr

def echo_text(input_text):
    return input_text

# Custom HTML and JavaScript 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>
<script>
document.getElementById("input-text").addEventListener("input", function() {
    document.getElementById("output-text").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()