layout change

app.py

@@ -6,9 +6,9 @@ def echo_text(input_text):
 
 custom_css = """
     .gr-textbox {
-        background-color: #f2f2f2;
+        background-color: rgb(79, 129, 145);
         color: #333;
-        font-size: 16px;
+        font-size: 30px;
         border: 2px solid #666;
         padding: 10px;
     }
@@ -17,15 +17,17 @@ custom_css = """
     }
 """
 
+# Create a Gradio interface with input above output
 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="Professional Text Echo Interface",
-    width=500,
-    height=200,
-    theme="light"  # You can use "dark" for a dark theme
+    inputs=gr.Textbox(text="Enter text here..."),  # Text input field
+    outputs=gr.Column(  # Create a column layout for input and output
+        gr.Textbox(text="Input Text:", output=False),  # Display input text above output
+        gr.Textbox(text="Output Text:", output=True),  # Display output text
+        layout="rows"  # Arrange input and output in a vertical column
+    ),
+    live=True
 )
 
-iface.launch()
+# Launch the Gradio interface
+iface.launch(share=True)