update app.py to change the login visibility

app.py

@@ -1201,9 +1201,24 @@ CSS = """
   text-decoration: none !important; }
 .gradio-container .dr-mark { height: 32px !important; width: auto !important; margin: 0 !important; }
 .gradio-container .dr-word { height: 20px !important; width: auto !important; margin: 0 !important; }
-#dr-login { max-width: 240px; margin-left: auto; flex: none !important; width: auto !important; }
-#dr-login button { border-radius: 8px !important; font-size: 13px !important; padding: 7px 14px !important;
-  background: transparent !important; border: 1px solid #2c2c35 !important; }
+#dr-login { max-width: 280px; margin-left: auto; flex: none !important; width: auto !important; }
+.gradio-container #dr-login, .gradio-container #dr-login button { border-radius: 10px !important; }
+.gradio-container #dr-login button, .gradio-container button#dr-login {
+  background: #fff !important; color: #111 !important; border: 1px solid #fff !important;
+  font-size: 14px !important; font-weight: 600 !important; padding: 9px 16px !important;
+  box-shadow: 0 0 0 4px rgba(255,255,255,.08) !important; }
+.gradio-container #dr-login button:hover, .gradio-container button#dr-login:hover { background: #e9e9ee !important; }
+/* once signed in it becomes a quiet account button */
+.gradio-container .dr-signed-in#dr-login, .gradio-container .dr-signed-in#dr-login button,
+.gradio-container #dr-login.dr-signed-in button {
+  background: transparent !important; color: var(--dr-muted) !important; border: 1px solid var(--dr-line) !important;
+  box-shadow: none !important; font-weight: 500 !important; font-size: 13px !important; }
+/* in-form sign-in, shown in place of Generate while signed out */
+.gradio-container #dr-login-cta, .gradio-container #dr-login-cta button {
+  width: 100% !important; background: #fff !important; color: #111 !important; border: 1px solid #fff !important;
+  border-radius: 10px !important; font-size: 16px !important; font-weight: 700 !important; min-height: 50px; }
+.gradio-container #dr-login-cta:hover, .gradio-container #dr-login-cta button:hover { background: #e9e9ee !important; }
+.gradio-container #dr-login-cta img, .gradio-container #dr-login img { filter: none !important; }
 
 /* hero */
 .gradio-container .dr-hero { text-align: center !important; padding: 64px 0 44px; position: relative; z-index: 1; }
@@ -1429,9 +1444,10 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
   .gradio-container .dr-meta span + span::before { content: none; }
   .gradio-container .dr-hero-actions a.dr-btn { flex: 1 1 100%; text-align: center; }
   .gradio-container .dr-head { min-height: 0; }
+  .gradio-container #dr-login-cta, .gradio-container #dr-login-cta button { font-size: 15px !important; }
   .gradio-container .dr-card { padding: 16px !important; }
   .gradio-container .dr-mark { height: 28px !important; } .dr-word { height: 17px !important; }
-  #dr-login button { font-size: 12px !important; padding: 6px 10px !important; }
+  .gradio-container #dr-login button, .gradio-container button#dr-login { font-size: 12px !important; padding: 7px 10px !important; }
   .gradio-container .dr-cta-btns { width: 100%; } .gradio-container .dr-cta-btns a.dr-btn { flex: 1 1 100%; text-align: center; }
   .gradio-container .dr-section { padding-top: 64px !important; }
   .gradio-container .dr-foot { grid-template-columns: 1fr; margin-top: 64px; }
@@ -1478,12 +1494,17 @@ FORCE_DARK = """
     }
   } catch (e) {}
   document.addEventListener('click', (e) => {
-    const btn = e.target.closest && e.target.closest('#dr-login');
+    const btn = e.target.closest && e.target.closest('#dr-login, #dr-login-cta');
     if (!btn || !window.__drFramedNoCookies) return;
     if (!/sign in/i.test(btn.textContent || '')) return;  // leave "Logout" alone
     e.preventDefault(); e.stopImmediatePropagation();
     window.open(window.location.origin + '/login/huggingface?_target_url=/', '_blank', 'noopener');
   }, true);
+  const markSignedIn = () => {
+    const b = document.getElementById('dr-login'); if (!b) return;
+    b.classList.toggle('dr-signed-in', /^\\s*sign out/i.test(b.textContent || ''));
+  };
+  new MutationObserver(markSignedIn).observe(document.body, { childList: true, subtree: true, characterData: true });
   // Before/after: switch examples
   document.addEventListener('click', (e) => {
     const chip = e.target.closest && e.target.closest('.dr-ba-chip'); if (!chip) return;
@@ -1611,7 +1632,7 @@ fetch_samples()
 def remaining_html(profile: gr.OAuthProfile | None = None):
     """Free allowance line next to the Generate button, with the live balance for signed-in users."""
     if profile is None:
-        left = "Sign in with Hugging Face to use your free generations."
+        left = "Free with a Hugging Face account."
     elif is_admin(profile.username):
         left = "Team account: no daily limit."
     else:
@@ -1627,6 +1648,12 @@ def remaining_html(profile: gr.OAuthProfile | None = None):
 HIDE_DL = gr.update(visible=False, value=None)
 
 
+def signin_state(profile: gr.OAuthProfile | None = None):
+    """Signed out: the big sign-in button sits where Generate goes. Signed in: show Generate."""
+    signed_in = profile is not None
+    return gr.update(visible=not signed_in), gr.update(visible=signed_in)
+
+
 def generate(video, mood, excited, angry, updates, preset_name, profile: gr.OAuthProfile | None):
     """UI wrapper around run(): adds the download button and the remaining-generations line."""
     last = (None, IDLE)
@@ -1647,7 +1674,7 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
     gr.HTML('<div class="dr-glow"></div>')
     with gr.Row(elem_id="dr-top"):
         gr.HTML(logo_html())
-        gr.LoginButton(elem_id="dr-login", size="sm")
+        gr.LoginButton("Sign in with Hugging Face", logout_value="Sign out ({})", elem_id="dr-login", size="sm")
 
     gr.HTML(f"""
     <header class="dr-hero">
@@ -1691,7 +1718,9 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
                 angry = gr.Slider(0, 1, value=d_ang, step=0.05, label="Anger",
                                   info="0 = no added anger · 1 = strongest anger")
             quota = gr.HTML(remaining_html())
-            go = gr.Button("Generate edited video", variant="primary", elem_id="dr-go")
+            login_cta = gr.LoginButton("Sign in with Hugging Face to generate", logout_value="Sign out ({})",
+                                       elem_id="dr-login-cta", size="lg")
+            go = gr.Button("Generate edited video", variant="primary", elem_id="dr-go", visible=False)
             updates = gr.Checkbox(label="Email me DRAMA product updates and offers.", value=False,
                                   container=False, elem_id="dr-optin")
             gr.HTML('<div class="dr-fine">Only upload footage you have the right to edit, with permission from '
@@ -1775,6 +1804,7 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
                    api_visibility="private")
     demo.load(on_visit, inputs=None, outputs=None, api_visibility="private", show_progress="hidden")
     demo.load(remaining_html, inputs=None, outputs=[quota], api_visibility="private", show_progress="hidden")
+    demo.load(signin_state, inputs=None, outputs=[login_cta, go], api_visibility="private", show_progress="hidden")
     go.click(
         generate,
         inputs=[video_in, mood, excited, angry, updates, preset],
@@ -1798,4 +1828,6 @@ def favicon_file():
 startup_check()
 demo.queue(max_size=20).launch(theme=THEME, css=CSS, js=FORCE_DARK, head=HEAD,
                                allowed_paths=[os.path.abspath(SAMPLES_DIR), os.path.abspath("examples"), SAMPLES_CACHE],
-                               favicon_path=favicon_file(), footer_links=[])
+                               favicon_path=favicon_file(), footer_links=[])
+
+