Update app.py

app.py

@@ -43,29 +43,6 @@ def paraphrase_text(text, creativity_level=3, tone="neutral"):
     
     return paraphrased_text, original_count, paraphrased_count
 
-# Custom CSS for professional look
-css = """
-.gradio-container {
-    max-width: 900px !important;
-    margin: auto !important;
-    font-family: 'Inter', sans-serif;
-}
-.contain {
-    border-radius: 12px !important;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
-}
-.dark .input-text, .dark .output-text {
-    background: #1e1e1e !important;
-}
-.stats-box {
-    background: #f8f9fa;
-    border-radius: 8px;
-    padding: 12px;
-    margin-top: 16px;
-}
-"""
-
-# Comparison table component
 def create_comparison(original, paraphrased, orig_count, para_count):
     comparison = pd.DataFrame({
         "Metric": ["Text", "Word Count"],
@@ -74,59 +51,135 @@ def create_comparison(original, paraphrased, orig_count, para_count):
     })
     return comparison
 
-with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
-    gr.Markdown("""
-    # <center>Professional AI Paraphraser</center>
-    <center>Transform your text while preserving meaning with advanced T5 AI</center>
+# Custom HTML with Tailwind CSS
+custom_html = """
+<script src="https://cdn.tailwindcss.com"></script>
+<style>
+  .gradio-container {
+    font-family: 'Inter', sans-serif;
+    max-width: 100% !important;
+  }
+  .gradio-interface {
+    padding: 0 !important;
+  }
+  .gradio-input, .gradio-output {
+    border: 1px solid #e5e7eb !important;
+    border-radius: 0.5rem !important;
+  }
+  .gradio-input textarea, .gradio-output textarea {
+    padding: 1rem !important;
+  }
+  .gradio-button {
+    background-color: #4f46e5 !important;
+    color: white !important;
+    border-radius: 0.375rem !important;
+    padding: 0.5rem 1rem !important;
+    font-weight: 500 !important;
+  }
+  .gradio-button:hover {
+    background-color: #4338ca !important;
+  }
+  .gradio-slider .gradio-slider-handle {
+    background: #4f46e5 !important;
+  }
+  .gradio-slider .gradio-slider-bar {
+    background: #c7d2fe !important;
+  }
+</style>
+"""
+
+with gr.Blocks(theme=gr.themes.Base(), css=custom_html) as demo:
+    # Header Section
+    gr.HTML("""
+    <div class="bg-indigo-600 text-white py-6 px-4 rounded-t-lg">
+      <div class="max-w-4xl mx-auto text-center">
+        <h1 class="text-3xl font-bold mb-2">Professional AI Paraphraser</h1>
+        <p class="text-indigo-100">Transform your text while preserving meaning with advanced T5 AI</p>
+      </div>
+    </div>
     """)
     
-    with gr.Row():
-        with gr.Column():
+    # Main Content
+    with gr.Row().style(equal_height=True):
+        with gr.Column(scale=1):
+            # Input Section
+            gr.HTML("""<div class="p-4 bg-white rounded-lg shadow-sm">""")
             input_text = gr.Textbox(
-                lines=6,
+                lines=8,
                 placeholder="Enter text to paraphrase...",
                 label="Original Text",
-                elem_classes=["input-text"]
-            )
+                elem_classes=["border", "rounded-lg", "p-4", "w-full"]
+            ).style(container=False)
+            
             with gr.Row():
                 creativity = gr.Slider(
                     1, 5, value=3,
                     label="Creativity Level",
-                    info="1 = Conservative, 5 = Highly Creative"
+                    info="1 = Conservative, 5 = Highly Creative",
+                    interactive=True
                 )
                 tone = gr.Dropdown(
                     ["neutral", "formal", "casual", "academic"],
                     value="neutral",
-                    label="Output Tone"
+                    label="Output Tone",
+                    interactive=True
                 )
-            submit_btn = gr.Button("Paraphrase", variant="primary")
+            
+            submit_btn = gr.Button(
+                "Paraphrase",
+                variant="primary"
+            ).style(full_width=True)
+            gr.HTML("""</div>""")
         
-        with gr.Column():
+        with gr.Column(scale=1):
+            # Output Section
+            gr.HTML("""<div class="p-4 bg-white rounded-lg shadow-sm h-full">""")
             output_text = gr.Textbox(
-                lines=6,
+                lines=8,
                 label="Paraphrased Text",
                 interactive=False,
-                elem_classes=["output-text"]
-            )
-            with gr.Column(elem_classes=["stats-box"]):
-                gr.Markdown("**Statistics**")
-                with gr.Row():
-                    orig_count = gr.Number(label="Original Words")
-                    para_count = gr.Number(label="Paraphrased Words")
-                    similarity = gr.Number(label="Similarity Score")
+                elem_classes=["border", "rounded-lg", "p-4", "w-full"]
+            ).style(container=False)
+            
+            # Stats Section
+            gr.HTML("""
+            <div class="mt-4 p-4 bg-gray-50 rounded-lg">
+              <h3 class="font-medium text-gray-900 mb-3">Statistics</h3>
+              <div class="grid grid-cols-3 gap-4">
+            """)
+            
+            with gr.Row():
+                orig_count = gr.Number(
+                    label="Original Words",
+                    interactive=False
+                ).style(container=False)
+                para_count = gr.Number(
+                    label="Paraphrased Words",
+                    interactive=False
+                ).style(container=False)
+                similarity = gr.Number(
+                    label="Similarity Score",
+                    interactive=False,
+                    visible=False  # Placeholder for future feature
+                ).style(container=False)
+            
+            gr.HTML("""</div></div></div>""")
     
-    # Comparison section
+    # Comparison Section
+    gr.HTML("""<div class="mt-4 p-4 bg-white rounded-lg shadow-sm">""")
     with gr.Accordion("Detailed Comparison", open=False):
         comparison_table = gr.DataFrame(
             headers=["Metric", "Original", "Paraphrased"],
             datatype=["str", "str", "str"],
-            interactive=False
+            interactive=False,
+            elem_classes=["w-full"]
         )
+    gr.HTML("""</div>""")
     
     # Footer
-    gr.Markdown("""
-    <div style="text-align: center; margin-top: 20px; color: #666;">
-        <small>Powered by T5 Transformer | Embeddable in any website</small>
+    gr.HTML("""
+    <div class="mt-6 py-4 text-center text-gray-500 text-sm">
+      <p>Powered by T5 Transformer | Embeddable in any website</p>
     </div>
     """)
     
@@ -141,6 +194,5 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         outputs=comparison_table
     )
 
-# For embedding
 if __name__ == "__main__":
     demo.launch()