Upload app.py

app.py

@@ -378,37 +378,147 @@ modern_css = """
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* Login styling - Simple and clean */
-.login-row {
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    z-index: 10000 !important;
+/* Login styling */
+body, .gradio-container {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
 }
 
-.login-row > div {
+.login-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 24px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.login-card {
     max-width: 400px;
-    width: 90%;
+    width: 100%;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 20px;
-    padding: 40px;
+    padding: 48px 40px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }
+
+.login-icon {
+    font-size: 56px;
+    text-align: center;
+    margin-bottom: 16px;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+}
+
+.login-title {
+    text-align: center;
+    margin: 0 0 8px 0;
+    font-size: 28px;
+    font-weight: 700;
+    color: #1f2937;
+    letter-spacing: -0.02em;
+}
+
+.login-subtitle {
+    text-align: center;
+    margin: 0 0 32px 0;
+    font-size: 15px;
+    color: #6b7280;
+    font-weight: 400;
+}
+
+.login-input label {
+    color: #374151 !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+}
+
+.login-input input {
+    background: white !important;
+    border: 2px solid #e5e7eb !important;
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    font-size: 16px !important;
+    color: #111827 !important;
+}
+
+.login-input input:focus {
+    border-color: #667eea !important;
+    background: white !important;
+    outline: none !important;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
+}
+
+.login-error {
+    color: #dc2626;
+    background: #fee2e2;
+    border: 1px solid #fca5a5;
+    padding: 12px;
+    border-radius: 10px;
+    text-align: center;
+    font-weight: 500;
+}
+
+.freepik-credit {
+    margin-top: 24px;
+    text-align: center;
+    font-size: 12px;
+    color: #9ca3af;
+}
+
+.freepik-credit a {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.freepik-credit a:hover {
+    text-decoration: underline;
+}
 """
 
-# Create the interface - simple, no custom login
+# Create the interface with password protection
 def create_interface():
     with gr.Blocks(css=modern_css, title="Python to C++ Code Optimizer", theme=gr.themes.Soft()) as app:
-        
-        # Main UI - just the app, no login gate
-        with gr.Group() as main_group:
+        authorized = gr.State(False)
+        BANNER_URL = os.getenv("BANNER_URL", "")
+        BACKGROUND_URL = os.getenv("BACKGROUND_URL", "")
+        # Intentionally not rendering a banner image to avoid empty placeholders
+
+        def check_password(pw):
+            ok = pw == APP_PASSWORD
+            return (
+                gr.update(visible=not ok),  # login hidden when ok
+                gr.update(visible=ok),      # main shown when ok
+                gr.update(value="" if ok else "Invalid password", visible=not ok)
+            )
+
+        # Login gate
+        with gr.Group(visible=True) as login_group:
+            gr.HTML("""
+            <div class="login-wrapper">
+                <div class="login-card">
+                    <div class="login-icon">🔐</div>
+                    <div class="login-title">Private Access</div>
+                    <div class="login-subtitle">Enter password to continue</div>
+            """)
+            pw = gr.Textbox(
+                label="Password", 
+                type="password", 
+                placeholder="Enter password", 
+                elem_classes=["login-input"],
+                container=True
+            )
+            login_btn = gr.Button("Continue", elem_classes=["modern-button"], size="lg")
+            login_error = gr.Markdown(visible=False, elem_classes=["login-error"])
+            gr.HTML("""
+                    <div class="freepik-credit">Background design inspired by <a href="https://www.freepik.com" target="_blank">Freepik</a></div>
+                </div>
+            </div>
+            """)
+
+        # Main UI wrapped for toggling visibility
+        with gr.Group(visible=False) as main_group:
             main_group.elem_id = "main_group"
             # Header Section
             gr.HTML("""
@@ -504,6 +614,13 @@ def create_interface():
                 outputs=cpp_execution_output
             )
 
+        # Bind login after main_group is defined
+        login_btn.click(
+            fn=check_password,
+            inputs=[pw],
+            outputs=[login_group, main_group, login_error]
+        )
+
     return app
 
 # Launch the app
@@ -523,8 +640,6 @@ if __name__ == "__main__":
         print("🚀 Launching Python to C++ Code Optimizer on Hugging Face Spaces")
         print("🔐 Password protection enabled")
         app.launch(
-            auth=[("user", APP_PASSWORD)],
-            auth_message="🔐 Enter password to access Python→C++ Optimizer",
             show_error=True
         )
     else:
@@ -548,8 +663,6 @@ if __name__ == "__main__":
         app.launch(
             server_name="127.0.0.1",
             server_port=port,
-            auth=[("user", APP_PASSWORD)],
-            auth_message="🔐 Enter password to access Python→C++ Optimizer",
             show_error=True
         )