Update app.py

app.py

@@ -116,44 +116,76 @@ def process_invoice_file(file_path: str, user_id: int) -> dict:
     except Exception as e: return {"filename": os.path.basename(file_path), "status": "error"}
 
 # ==========================================
-# 3. OBSIDIAN DESIGN SYSTEM (CSS)
+# 3. CYBERpunk / COMMAND CENTER DESIGN
 # ==========================================
 CUSTOM_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-:root { --bg: #09090b; --card: rgba(255,255,255,0.03); --border: rgba(255,255,255,0.08); --text: #f4f4f5; --muted: #71717a; --accent: #10b981; --accent-glow: rgba(16,185,129,0.2); }
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+:root { 
+    --bg: #050505; 
+    --panel: rgba(15, 15, 15, 0.6); 
+    --border: rgba(255, 255, 255, 0.08); 
+    --text: #ffffff; 
+    --muted: #6b7280; 
+    --accent: #00ff9d; 
+    --accent-glow: rgba(0, 255, 157, 0.15); 
+    --danger: #ff3366;
+}
 * { box-sizing: border-box; font-family: 'Inter', sans-serif; }
-body { background: var(--bg); color: var(--text); margin: 0; }
-.gradio-container { max-width: 100% !important; padding: 0 !important; background: var(--bg) !important; min-height: 100vh; }
+body { background: var(--bg); color: var(--text); margin: 0; background-image: radial-gradient(circle at 50% 0%, rgba(0, 255, 157, 0.05) 0%, transparent 50%); }
+.gradio-container { max-width: 100% !important; padding: 0 !important; background: transparent !important; min-height: 100vh; }
 .hide { display: none !important; }
 
 /* Layout */
-#navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(9,9,11,0.8); backdrop-filter: blur(10px); z-index: 100; }
-#hero { text-align: center; padding: 100px 20px; }
-#hero h1 { font-size: 56px; font-weight: 700; margin-bottom: 24px; background: linear-gradient(180deg, #fff 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
-#hero p { font-size: 20px; color: var(--muted); max-width: 600px; margin: 0 auto 40px; }
-.dash-container { display: flex; padding: 40px; max-width: 1400px; margin: 0 auto; gap: 30px; }
-.dash-sidebar { width: 250px; display: flex; flex-direction: column; gap: 10px; }
-.dash-main { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; backdrop-filter: blur(20px); }
-
-/* Gradio Component Overrides */
-.gr-button { background: var(--accent) !important; color: #000 !important; border: none !important; border-radius: 8px !important; padding: 12px 24px !important; font-weight: 600 !important; transition: 0.2s !important; box-shadow: none !important; }
-.gr-button:hover { box-shadow: 0 0 20px var(--accent-glow) !important; transform: translateY(-1px) !important; }
-.btn-ghost { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
-.btn-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
-.btn-danger { background: #ef4444 !important; color: #fff !important; }
-
-.gr-textbox, .gr-dropdown { background: rgba(0,0,0,0.3) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; color: var(--text) !important; }
-.gr-textbox:focus { border-color: var(--accent) !important; }
+.app-shell { display: flex; min-height: 100vh; }
+.sidebar { width: 260px; border-right: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.3); backdrop-filter: blur(20px); position: sticky; top: 0; height: 100vh; }
+.main-area { flex: 1; padding: 40px 60px; overflow-y: auto; }
+.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); position: sticky; top: 0; background: rgba(5,5,5,0.8); z-index: 100; }
+.hero { text-align: center; padding: 120px 20px; }
+.hero h1 { font-size: 64px; font-weight: 700; margin-bottom: 24px; background: linear-gradient(180deg, #fff 0%, #888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; letter-spacing: -2px; }
+.hero p { font-size: 20px; color: var(--muted); max-width: 600px; margin: 0 auto 40px; }
+
+/* Gradio Overrides - Making it look like a hacker SaaS */
+.gr-button { 
+    background: transparent !important; 
+    border: 1px solid var(--border) !important; 
+    color: var(--muted) !important; 
+    border-radius: 8px !important; 
+    padding: 10px 16px !important; 
+    font-weight: 500 !important; 
+    transition: all 0.2s !important; 
+    box-shadow: none !important; 
+    text-align: left !important;
+    justify-content: flex-start !important;
+    font-size: 14px !important;
+}
+.gr-button:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-glow) !important; }
+.btn-primary { background: var(--accent) !important; color: #000 !important; border: none !important; font-weight: 700 !important; justify-content: center !important; text-align: center !important; }
+.btn-primary:hover { box-shadow: 0 0 30px var(--accent-glow) !important; transform: translateY(-1px) !important; background: var(--accent) !important; color: #000 !important; }
+.btn-danger { background: transparent !important; border: 1px solid var(--danger) !important; color: var(--danger) !important; justify-content: center !important; text-align: center !important; }
+.btn-danger:hover { background: var(--danger) !important; color: #fff !important; }
+
+.gr-textbox { background: rgba(0,0,0,0.3) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; color: var(--text) !important; }
+.gr-textbox input { color: var(--text) !important; }
+.gr-textbox:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-glow) !important; }
 .gr-form { background: transparent !important; border: none !important; }
 .gr-box { border: none !important; background: transparent !important; }
+
+/* Dataframe - Command Center Table */
+.gr-dataframe { border: 1px solid var(--border) !important; border-radius: 12px !important; overflow: hidden; background: rgba(0,0,0,0.2) !important; }
 .gr-dataframe table { background: transparent !important; color: var(--text) !important; border-collapse: collapse; width: 100%; }
-.gr-dataframe th { background: rgba(255,255,255,0.05) !important; border-bottom: 1px solid var(--border) !important; color: var(--accent) !important; text-align: left; padding: 12px; }
-.gr-dataframe td { border-bottom: 1px solid var(--border) !important; padding: 12px; }
+.gr-dataframe th { background: rgba(0,0,0,0.5) !important; border-bottom: 1px solid var(--border) !important; color: var(--accent) !important; text-align: left; padding: 16px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 1px; }
+.gr-dataframe td { border-bottom: 1px solid var(--border) !important; padding: 16px !important; font-family: 'Inter', sans-serif !important; }
+.gr-dataframe tr:hover { background: var(--accent-glow) !important; }
+
 .gr-markdown { color: var(--text) !important; background: transparent !important; }
+.gr-markdown a { color: var(--accent) !important; text-decoration: none !important; border-bottom: 1px solid var(--accent) !important; }
 footer { display: none !important; }
-"""
 
-ICON_BOLT = '<svg style="width:24px;height:24px;display:inline-block;vertical-align:middle;margin-right:10px;fill:var(--accent);" viewBox="0 0 24 24"><path d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z"/></svg>'
+/* Logo */
+.logo-text { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; color: var(--text); }
+.logo-dot { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); animation: pulse 2s infinite; }
+@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
+"""
 
 # ==========================================
 # 4. BACKEND FUNCTIONS
@@ -166,35 +198,35 @@ def get_user_invoices(user_dict):
 def handle_auth(email, password, request: gr.Request):
     ip = request.client.host if request else "127.0.0.1"
     if rate_limiter.is_rate_limited(f"auth_{ip}", 5, 300):
-        return None, "🚨 Příliš mnoho pokusů.", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
+        return None, "🚨 Too many attempts.", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
     
     if not supabase: return None, "DB Error", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
     
     res = supabase.table("users").select("*").eq("email", email).execute()
     if res.data and verify_password(password, res.data[0]['password']):
         user = res.data[0]
-        return user, "Přihlášení úspěšné.", gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
+        return user, "Login successful.", gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
     
     if not res.data:
         if not validate_password_strength(password):
-            return None, "Slabé heslo (min 12 znaků, 1 velké, 1 číslo, 1 symbol).", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
+            return None, "Weak password (min 12 chars, 1 upper, 1 number, 1 symbol).", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
         hashed = hash_password(password)
         new_user = supabase.table("users").insert({"email": email, "password": hashed, "plan": "free"}).execute()
         user = new_user.data[0]
-        return user, "Účet vytvořen!", gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
+        return user, "Account created!", gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
         
-    return None, "Neplatné údaje.", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
+    return None, "Invalid credentials.", gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
 
 def handle_upload(files, user_dict):
-    if not user_dict: return "Nejste přihlášen.", get_user_invoices(user_dict)
-    if not files: return "Žádné soubory.", get_user_invoices(user_dict)
+    if not user_dict: return "Not logged in.", get_user_invoices(user_dict)
+    if not files: return "No files.", get_user_invoices(user_dict)
     for file in files:
         if os.path.getsize(file.name) > 20 * 1024 * 1024: continue
         process_invoice_file(file.name, user_dict['id'])
-    return f"Zpracováno {len(files)} souborů.", get_user_invoices(user_dict)
+    return f"Processed {len(files)} files.", get_user_invoices(user_dict)
 
 def create_stripe_checkout(plan: str, user_dict):
-    if not user_dict or not STRIPE_SECRET_KEY: return "Platby nejsou nakonfigurovány."
+    if not user_dict or not STRIPE_SECRET_KEY: return "Payments not configured."
     prices = {"basic": STRIPE_PRICE_BASIC, "pro": STRIPE_PRICE_PRO, "enterprise": STRIPE_PRICE_ENTERPRISE}
     try:
         session = stripe.checkout.Session.create(
@@ -203,8 +235,8 @@ def create_stripe_checkout(plan: str, user_dict):
             cancel_url=f"{APP_URL}?checkout=cancel", customer_email=user_dict['email'],
             metadata={"user_id": user_dict['id'], "plan": plan}
         )
-        return f"[Zaplatit zde]({session.url})"
-    except Exception as e: return f"Chyba: {e}"
+        return f"[Complete Payment Here]({session.url})"
+    except Exception as e: return f"Error: {e}"
 
 # ==========================================
 # 5. GRADIO UI ARCHITECTURE
@@ -215,70 +247,71 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="emerald", ne
     # ---------------- VIEW 1: LANDING ----------------
     with gr.Group(visible=True) as landing_view:
         with gr.Row(elem_id="navbar"):
-            gr.HTML(f"<div style='font-weight:700;font-size:20px;'>{ICON_BOLT}OmniParse AI</div>")
-            landing_login_btn = gr.Button("Log In", elem_classes="btn-ghost", size="sm")
+            gr.HTML("<div class='logo-text'><div class='logo-dot'></div>OmniParse_AI</div>")
+            landing_login_btn = gr.Button("Log In", size="sm")
         with gr.Column(elem_id="hero"):
             gr.HTML("<h1>Invoice processing in <span style='color: var(--accent);'>seconds</span>, not hours.</h1>")
             gr.HTML("<p>AI extracts vendor, dates, amounts and line items from any PDF or image. Export to CSV, JSON or Excel.</p>")
-            landing_signup_btn = gr.Button("Start Free — 20 invoices", size="lg")
-            gr.HTML("<div style='margin-top: 40px; color: var(--muted); font-size: 14px;'>99.2% accuracy · &lt;4s per invoice · 40+ formats</div>")
+            landing_signup_btn = gr.Button("Start Free — 20 invoices", elem_classes="btn-primary", size="lg")
+            gr.HTML("<div style='margin-top: 40px; color: var(--muted); font-size: 14px; font-family: JetBrains Mono;'>99.2% accuracy · &lt;4s per invoice · 40+ formats</div>")
 
     # ---------------- VIEW 2: AUTH ----------------
     with gr.Group(visible=False) as auth_view:
-        with gr.Column(elem_id="hero", elem_classes="auth-container"):
-            gr.HTML("<h2 style='margin-bottom:24px;'>Welcome to OmniParse</h2>")
+        with gr.Column(elem_id="hero"):
+            gr.HTML("<div class='logo-text' style='justify-content:center; margin-bottom:24px;'><div class='logo-dot'></div>OmniParse_AI</div>")
+            gr.HTML("<h2 style='margin-bottom:24px; font-size: 32px;'>Access Terminal</h2>")
             auth_email = gr.Textbox(label="Work Email", placeholder="you@company.com")
             auth_pass = gr.Textbox(label="Password", type="password", placeholder="Min 12 chars, 1 upper, 1 symbol")
-            auth_submit = gr.Button("Log In / Sign Up", size="lg")
+            auth_submit = gr.Button("Execute", elem_classes="btn-primary", size="lg")
             auth_msg = gr.Markdown("")
-            auth_back = gr.Button("Back to Home", elem_classes="btn-ghost", size="sm")
+            auth_back = gr.Button("Back to Home", elem_classes="btn-danger", size="sm")
 
     # ---------------- VIEW 3: DASHBOARD ----------------
     with gr.Group(visible=False) as dash_view:
         with gr.Row(elem_id="navbar"):
-            gr.HTML(f"<div style='font-weight:700;font-size:20px;'>{ICON_BOLT}Dashboard</div>")
+            gr.HTML("<div class='logo-text'><div class='logo-dot'></div>OmniParse_AI</div>")
             dash_logout = gr.Button("Log Out", elem_classes="btn-danger", size="sm")
         
-        with gr.Row(elem_classes="dash-container"):
+        with gr.Row(elem_classes="app-shell"):
             # Sidebar
-            with gr.Column(elem_classes="dash-sidebar"):
-                nav_upload = gr.Button("Upload Invoice", elem_classes="btn-ghost")
-                nav_invoices = gr.Button("My Invoices", elem_classes="btn-ghost")
-                nav_upgrade = gr.Button("Upgrade Plan", elem_classes="btn-ghost")
-            
+            with gr.Column(elem_classes="sidebar"):
+                gr.HTML("<div style='color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;'>Menu</div>")
+                nav_upload = gr.Button("1. Upload Invoice")
+                nav_invoices = gr.Button("2. My Invoices")
+                nav_upgrade = gr.Button("3. Upgrade Plan")
+                
             # Main Content Area
-            with gr.Column(elem_classes="dash-main"):
+            with gr.Column(elem_classes="main-area"):
                 # Upload Panel
                 with gr.Group(visible=True) as panel_upload:
-                    gr.HTML("<h3>Upload Invoices</h3>")
+                    gr.HTML("<h2 style='margin-bottom:20px;'>Upload Invoices</h2>")
                     file_input = gr.File(file_count="multiple", file_types=[".pdf", ".png", ".jpg"])
-                    process_btn = gr.Button("Process Invoices", variant="primary")
+                    process_btn = gr.Button("Process Invoices", elem_classes="btn-primary", variant="primary")
                     upload_status = gr.Markdown("")
                 
                 # Invoices Panel
                 with gr.Group(visible=False) as panel_invoices:
-                    gr.HTML("<h3>Processed Invoices</h3>")
+                    gr.HTML("<h2 style='margin-bottom:20px;'>Processed Invoices</h2>")
                     invoices_table = gr.Dataframe(headers=["Vendor", "Invoice#", "Total", "Status"], wrap=True, interactive=False)
-                    export_btn = gr.Button("Export to CSV", elem_classes="btn-ghost")
+                    export_btn = gr.Button("Export to CSV", elem_classes="btn-primary")
                     csv_file = gr.File(label="Download CSV", visible=False)
                 
                 # Upgrade Panel
                 with gr.Group(visible=False) as panel_upgrade:
-                    gr.HTML("<h3>Upgrade Your Plan</h3>")
+                    gr.HTML("<h2 style='margin-bottom:20px;'>Upgrade Plan</h2>")
                     with gr.Row():
-                        gr.HTML("<div style='text-align:center;padding:20px;'><h4>Basic</h4><h2 style='color:var(--accent);'>$29/mo</h2></div>")
-                        gr.HTML("<div style='text-align:center;padding:20px;'><h4>Pro</h4><h2 style='color:var(--accent);'>$129/mo</h2></div>")
-                        gr.HTML("<div style='text-align:center;padding:20px;'><h4>Enterprise</h4><h2 style='color:var(--accent);'>$499/mo</h2></div>")
+                        gr.HTML("<div style='text-align:center;padding:30px;border:1px solid var(--border);border-radius:12px;'><h4>Basic</h4><h2 style='color:var(--accent);'>$29/mo</h2></div>")
+                        gr.HTML("<div style='text-align:center;padding:30px;border:1px solid var(--border);border-radius:12px;'><h4>Pro</h4><h2 style='color:var(--accent);'>$129/mo</h2></div>")
+                        gr.HTML("<div style='text-align:center;padding:30px;border:1px solid var(--border);border-radius:12px;'><h4>Enterprise</h4><h2 style='color:var(--accent);'>$499/mo</h2></div>")
                     with gr.Row():
-                        up_basic = gr.Button("Choose Basic")
-                        up_pro = gr.Button("Choose Pro")
-                        up_ent = gr.Button("Choose Enterprise")
+                        up_basic = gr.Button("Choose Basic", elem_classes="btn-primary")
+                        up_pro = gr.Button("Choose Pro", elem_classes="btn-primary")
+                        up_ent = gr.Button("Choose Enterprise", elem_classes="btn-primary")
                     checkout_link = gr.Markdown("")
 
     # ==========================================
     # 6. EVENT BINDINGS (FUNKČNÍ INTERAKCE)
     # ==========================================
-    # Navigation Logic
     def show_auth(): return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
     def show_landing(): return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
     def show_dashboard(user):
@@ -289,7 +322,6 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="emerald", ne
     landing_signup_btn.click(fn=show_auth, outputs=[landing_view, auth_view, dash_view])
     auth_back.click(fn=show_landing, outputs=[landing_view, auth_view, dash_view])
     
-    # Auth Logic
     auth_submit.click(
         fn=handle_auth, 
         inputs=[auth_email, auth_pass], 
@@ -300,7 +332,6 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="emerald", ne
     
     dash_logout.click(fn=lambda: (None, *show_landing()), outputs=[user_state, landing_view, auth_view, dash_view])
 
-    # Dashboard Navigation Logic
     def switch_panel(panel_name):
         u, i, p = gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
         if panel_name == "upload": u = gr.update(visible=True)
@@ -312,7 +343,6 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="emerald", ne
     nav_invoices.click(fn=lambda: switch_panel("invoices"), outputs=[panel_upload, panel_invoices, panel_upgrade])
     nav_upgrade.click(fn=lambda: switch_panel("upgrade"), outputs=[panel_upload, panel_invoices, panel_upgrade])
 
-    # Processing Logic
     process_btn.click(fn=handle_upload, inputs=[file_input, user_state], outputs=[upload_status, invoices_table])
     
     def handle_export(user_dict):
@@ -323,7 +353,6 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="emerald", ne
         return gr.update(value=temp.name, visible=True)
     export_btn.click(fn=handle_export, inputs=[user_state], outputs=[csv_file])
 
-    # Stripe Logic
     up_basic.click(fn=lambda u: create_stripe_checkout("basic", u), inputs=[user_state], outputs=[checkout_link])
     up_pro.click(fn=lambda u: create_stripe_checkout("pro", u), inputs=[user_state], outputs=[checkout_link])
     up_ent.click(fn=lambda u: create_stripe_checkout("enterprise", u), inputs=[user_state], outputs=[checkout_link])