Create app.py

app.py

@@ -0,0 +1,99 @@
+import gradio as gr
+
+def reverse_text(text):
+    if not text:
+        return ""
+    return text[::-1]
+
+# Custom CSS for professional styling with pink submit button
+custom_css = """
+#component-0 {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.gradio-container {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+}
+
+h1 {
+    text-align: center;
+    color: #1f2937;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.contain {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+button.primary {
+    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 500 !important;
+    padding: 10px 24px !important;
+    border-radius: 8px !important;
+    transition: all 0.3s ease !important;
+}
+
+button.primary:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4) !important;
+}
+
+.output-class {
+    background: #f9fafb;
+    border-radius: 8px;
+    padding: 16px;
+}
+"""
+
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
+    gr.Markdown(
+        """
+        # Text Reverser
+        ### Transform your text with a simple reverse operation
+        Enter any text below and watch it get reversed instantly.
+        """
+    )
+    
+    with gr.Row():
+        with gr.Column():
+            input_text = gr.Textbox(
+                label="Input Text",
+                placeholder="Type or paste your text here...",
+                lines=5,
+                max_lines=10
+            )
+            
+            submit_btn = gr.Button("Reverse Text", variant="primary", size="lg")
+    
+    with gr.Row():
+        with gr.Column():
+            output_text = gr.Textbox(
+                label="Reversed Text",
+                lines=5,
+                max_lines=10,
+                interactive=False,
+                elem_classes=["output-class"]
+            )
+    
+    # Connect the button to the function
+    submit_btn.click(fn=reverse_text, inputs=input_text, outputs=output_text)
+    
+    # Also trigger on Enter key in the input
+    input_text.submit(fn=reverse_text, inputs=input_text, outputs=output_text)
+    
+    gr.Markdown(
+        """
+        ---
+        *Tip: Press Enter in the input field or click the button to reverse your text*
+        """
+    )
+
+if __name__ == "__main__":
+    app.launch()