Update app.py

app.py

@@ -7,6 +7,89 @@ from Crypto.Hash import SHA256
 import base64
 import gradio as gr
 
+# Custom CSS for modern styling
+custom_css = """
+body {
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+}
+
+.gradio-container {
+    max-width: 800px;
+    margin: 20px auto;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    padding: 24px;
+}
+
+h1, .gr-markdown h1 {
+    color: #1e3c72;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.gr-button {
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.gr-button-primary {
+    background: #2a5298;
+    color: white;
+    border: none;
+}
+
+.gr-button-primary:hover {
+    background: #1e3c72;
+    transform: translateY(-2px);
+}
+
+.gr-button-secondary {
+    background: #f1f3f5;
+    color: #2a5298;
+    border: 1px solid #2a5298;
+}
+
+.gr-button-secondary:hover {
+    background: #e9ecef;
+    transform: translateY(-2px);
+}
+
+.gr-textbox, .gr-radio {
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    background: #f8f9fa;
+}
+
+.gr-textbox:focus {
+    border-color: #2a5298;
+    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.2);
+}
+
+.gr-row {
+    gap: 16px;
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+}
+
+.footer {
+    text-align: center;
+    color: #6c757d;
+    font-size: 0.9em;
+    margin-top: 24px;
+}
+"""
+
 def generate_random_key(length=32):
     """Generate a random key with digits, uppercase, lowercase, and special characters."""
     characters = string.ascii_lowercase + string.ascii_uppercase + string.digits + string.punctuation
@@ -26,7 +109,6 @@ def derive_key(custom_key, key_size):
     hasher = SHA256.new()
     hasher.update(custom_key.encode('utf-8'))
     full_hash = hasher.digest()
-    # Convert key_size to integer before division
     return full_hash[:int(key_size) // 8]
 
 def encrypt_string(plain_text, key, key_size):
@@ -68,41 +150,60 @@ def generate_and_display_key():
     return generate_random_key()
 
 # Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# AES Encryption/Decryption App")
-    gr.Markdown("Encrypt or decrypt text using AES (128, 192, or 256-bit keys).")
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown(
+        """
+        # 🔒 AES Encryption/Decryption App
+        Securely encrypt or decrypt text using AES with 128, 192, or 256-bit keys.
+        """
+    )
 
-    with gr.Row():
+    with gr.Column(elem_classes="card"):
+        gr.Markdown("### Configuration")
         key_size = gr.Radio(
             choices=["128", "192", "256"],
             label="AES Key Size (bits)",
-            value="256"
-        )
-    
-    with gr.Row():
-        custom_key = gr.Textbox(
-            label="Custom Key",
-            placeholder="Enter your key or generate one",
-            lines=1
+            value="256",
+            elem_classes="radio"
         )
-        generate_key_btn = gr.Button("Generate Random Key")
+        
+        with gr.Row():
+            custom_key = gr.Textbox(
+                label="Custom Key",
+                placeholder="Enter your key or generate one",
+                lines=1,
+                show_copy_button=True
+            )
+            generate_key_btn = gr.Button("Generate Key", variant="secondary")
 
-    with gr.Row():
+    with gr.Column(elem_classes="card"):
+        gr.Markdown("### Input")
         input_text = gr.Textbox(
             label="Input Text",
-            placeholder="Enter text to encrypt",
-            lines=3
+            placeholder="Enter text to encrypt or encrypted text to decrypt",
+            lines=4
         )
-    
-    with gr.Row():
-        encrypt_btn = gr.Button("Encrypt")
-        decrypt_btn = gr.Button("Decrypt")
-    
-    output_text = gr.Textbox(
-        label="Output",
-        placeholder="Result will appear here",
-        lines=3,
-        interactive=False
+        
+        with gr.Row():
+            encrypt_btn = gr.Button("🔐 Encrypt", variant="primary")
+            decrypt_btn = gr.Button("🔓 Decrypt", variant="secondary")
+
+    with gr.Column(elem_classes="card"):
+        gr.Markdown("### Output")
+        output_text = gr.Textbox(
+            label="Result",
+            placeholder="Result will appear here",
+            lines=4,
+            interactive=False,
+            show_copy_button=True
+        )
+
+    gr.Markdown(
+        """
+        <div class="footer">
+            Powered by Gradio & PyCrypto | © 2025 SecureApp
+        </div>
+        """
     )
 
     # Event handlers