Update app.py

app.py

@@ -82,9 +82,9 @@ def bpe_app(input_text):
 custom_css = """
 <style>
     body {
-        font-family: 'Arial', sans-serif;
-        background: linear-gradient(135deg, #ff9966, #ff5e62);
-        color: #333;
+        font-family: 'Poppins', sans-serif;
+        background: linear-gradient(135deg, #1e3c72, #2a5298);
+        color: #ffffff;
     }
     .container {
         max-width: 900px;
@@ -92,50 +92,67 @@ custom_css = """
         padding: 20px;
     }
     .gradio-container {
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(255, 255, 255, 0.1);
         border-radius: 15px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     }
     h1 {
-        color: #ff5e62;
+        color: #ffffff;
         text-align: center;
         font-size: 2.5em;
         margin-bottom: 20px;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     }
     .gr-button {
-        background-color: #ff5e62 !important;
+        background-color: #4CAF50 !important;
         border: none !important;
+        color: white !important;
+        text-transform: uppercase;
+        font-weight: bold;
+        transition: all 0.3s ease;
     }
     .gr-button:hover {
-        background-color: #ff9966 !important;
+        background-color: #45a049 !important;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        transform: translateY(-2px);
     }
     .gr-form {
         border-radius: 10px;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 20px;
+        margin-bottom: 20px;
     }
     .gr-box {
         border-radius: 8px;
-        border: 1px solid #ff9966;
+        border: 1px solid rgba(255, 255, 255, 0.2);
         padding: 15px;
         margin-top: 10px;
-        background-color: rgba(255, 153, 102, 0.1);
+        background-color: rgba(255, 255, 255, 0.05);
     }
     .gr-padded {
         padding: 15px;
     }
     .gr-input, .gr-textarea {
-        border: 2px solid #ff9966 !important;
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        border: 2px solid rgba(255, 255, 255, 0.2) !important;
         border-radius: 8px !important;
+        color: white !important;
     }
     .gr-input:focus, .gr-textarea:focus {
-        border-color: #ff5e62 !important;
-        box-shadow: 0 0 0 2px rgba(255, 94, 98, 0.2) !important;
+        border-color: #4CAF50 !important;
+        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
     }
     #component-0 {
         border-radius: 10px;
         overflow: hidden;
     }
+    .footer {
+        text-align: center;
+        margin-top: 20px;
+        font-size: 0.9em;
+        color: rgba(255, 255, 255, 0.7);
+    }
 </style>
 """
 
@@ -143,7 +160,7 @@ custom_css = """
 html_template = f"""
 <div class="container">
     <h1>🇮🇳 Byte Pair Encoding for Hindi</h1>
-    <p style="text-align: center; margin-bottom: 20px;">
+    <p style="text-align: center; margin-bottom: 20px; color: rgba(255, 255, 255, 0.8);">
         Compress and tokenize Hindi text using the BPE algorithm. 
         Enter your text below or use one of the examples provided.
     </p>
@@ -159,7 +176,7 @@ with gr.Blocks(css=custom_css) as iface:
             input_text = gr.Textbox(lines=5, label="Input Hindi Text", placeholder="Enter Hindi text here or leave blank for an example")
     
     with gr.Row():
-        submit_btn = gr.Button("Process")
+        submit_btn = gr.Button("Process", variant="primary")
     
     with gr.Row():
         with gr.Column():
@@ -180,5 +197,7 @@ with gr.Blocks(css=custom_css) as iface:
     
     submit_btn.click(bpe_app, inputs=[input_text], outputs=[output_stats, output_encoded])
 
+    gr.HTML('<div class="footer">Developed with ❤️ for Hindi language processing</div>')
+
 # Launch the app
 iface.launch(inbrowser=True, share=True)