Update app.py

app.py

@@ -256,16 +256,17 @@ footer{display:none!important}
 .hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
 
 .app-shell{background:#18181b;border:1px solid #27272a;border-radius:16px;margin:12px auto;max-width:1400px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
-.app-header{background:linear-gradient(135deg,#18181b,#1e1e24);border-bottom:1px solid #27272a;padding:14px 24px;display:flex;align-items:center;gap:12px}
-.app-logo{width:36px;height:36px;background:linear-gradient(135deg,#818cf8,#6366f1);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;box-shadow:0 4px 12px rgba(129,140,248,.35)}
-.app-title{font-size:18px;font-weight:700;background:linear-gradient(135deg,#e4e4e7,#a1a1aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
-.app-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(129,140,248,.15);color:#a5b4fc;border:1px solid rgba(129,140,248,.25)}
-.app-subtitle {
-  padding: 8px 24px 12px 24px;
-  font-size: 13px;
-  color: #a1a1aa;
-  border-bottom: 1px solid #27272a;
-}
+.app-header{background:linear-gradient(135deg,#18181b 0%,#1a1a2e 50%,#18181b 100%);border-bottom:1px solid #27272a;padding:16px 24px;display:flex;align-items:center;gap:14px}
+.app-logo{width:38px;height:38px;flex-shrink:0}
+.app-logo svg{width:38px;height:38px}
+.app-header-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
+.app-header-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.app-title{font-size:17px;font-weight:700;color:#f4f4f5;letter-spacing:-0.01em;white-space:nowrap}
+.app-title .klein{color:#a5b4fc}
+.app-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;background:rgba(129,140,248,.12);color:#818cf8;border:1px solid rgba(129,140,248,.2);letter-spacing:0.5px;text-transform:uppercase}
+.app-subtitle{font-size:12.5px;color:#71717a;line-height:1.4}
+.app-model-link{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:6px;background:rgba(255,255,255,.04);color:#71717a;border:1px solid #27272a;text-decoration:none;white-space:nowrap;transition:all .15s;flex-shrink:0}
+.app-model-link:hover{color:#a5b4fc;border-color:rgba(129,140,248,.3);background:rgba(129,140,248,.08)}
 .app-toolbar{background:#18181b;border-bottom:1px solid #27272a;padding:8px 16px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
 .tb-sep{width:1px;height:28px;background:#27272a;margin:0 8px}
 .modern-tb-btn{display:inline-flex;align-items:center;gap:6px;min-width:32px;height:34px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;padding:0 12px;font-family:'DM Sans',sans-serif;color:#e4e4e7!important;transition:all .15s}
@@ -949,16 +950,30 @@ with gr.Blocks(css=css) as demo:
     gr.HTML(f"""
 <div class="app-shell">
   <div class="app-header">
-    <div class="app-logo">⤿</div>
-    <span class="app-title">FLUX.2 [klein] Move</span>
+    <div class="app-logo">
+      <svg viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="1" y="1" width="36" height="36" rx="9" fill="url(#logo-bg)" stroke="url(#logo-border)" stroke-width="0.5"/>
+        <rect x="8" y="12" width="11" height="11" rx="2.5" fill="none" stroke="#fff" stroke-width="1.8" opacity="0.9"/>
+        <rect x="19" y="16" width="11" height="11" rx="2.5" fill="none" stroke="#a5b4fc" stroke-width="1.8" stroke-dasharray="2.5 2"/>
+        <path d="M14.5 17.5L20 20" stroke="#c7d2fe" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
+        <circle cx="14.5" cy="17.5" r="1.5" fill="#fff" opacity="0.8"/>
+        <polygon points="21.5,19 19,21 21.5,20.2" fill="#c7d2fe" opacity="0.5"/>
+        <defs>
+          <linearGradient id="logo-bg" x1="0" y1="0" x2="38" y2="38"><stop offset="0%" stop-color="#4f46e5"/><stop offset="100%" stop-color="#7c3aed"/></linearGradient>
+          <linearGradient id="logo-border" x1="0" y1="0" x2="38" y2="38"><stop offset="0%" stop-color="#818cf8"/><stop offset="100%" stop-color="#a78bfa"/></linearGradient>
+        </defs>
+      </svg>
+    </div>
+    <div class="app-header-text">
+      <div class="app-header-top">
+        <span class="app-title">FLUX.2 <span class="klein">[klein]</span> Move</span>
+        <span class="app-badge">9B + LoRA</span>
+      </div>
+      <span class="app-subtitle">Select an object or draw a box to move and resize it</span>
+    </div>
     <a href="https://huggingface.co/linoyts/flux2-klein-bbox-drag-drop-lora" 
        target="_blank" 
-       class="app-badge">
-       FLUX.2 Klein 9B + LoRA
-    </a>
-    <div class="app-subtitle">
-      Pick an object from the right or draw a box manually to move and resize it.
-    </div>
+       class="app-model-link">Model card</a>
   </div>
   <div class="app-toolbar">
     <button id="tb-draw" class="modern-tb-btn active"><span>▬</span> Draw</button>