Update app.py

app.py

@@ -153,22 +153,24 @@ HTML_TEMPLATE = """
 <div class="cv-wrap">
   {{#if value.img}}
     <img class="cv-img" src="{{value.img}}">
-    <div class="cv-scanline"></div>
   {{else}}
     <div class="cv-empty">
-      <div class="cv-reticle"><div class="cv-reticle-inner"></div></div>
+      <svg class="cv-empty-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.25">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" />
+      </svg>
       <p class="cv-empty-title">No image loaded</p>
-      <p class="cv-empty-sub">Upload an image on the left, then hover here to orbit</p>
+      <p class="cv-empty-sub">Upload an image on the left, then hover here to see camera controls</p>
     </div>
   {{/if}}
 
   <div class="cv-hud">
     <div class="cv-readout">
-      <span class="cv-lbl">AZ</span><span class="cv-val">${value.az}&deg;</span>
-      <span class="cv-sep">&middot;</span>
-      <span class="cv-lbl">EL</span><span class="cv-val">${value.el}&deg;</span>
-      <span class="cv-sep">&middot;</span>
-      <span class="cv-lbl">DIST</span><span class="cv-val">${value.dist}&times;</span>
+      <span class="cv-lbl">Az</span><span class="cv-val">${value.az}&deg;</span>
+      <span class="cv-sep">/</span>
+      <span class="cv-lbl">El</span><span class="cv-val">${value.el}&deg;</span>
+      <span class="cv-sep">/</span>
+      <span class="cv-lbl">Dist</span><span class="cv-val">${value.dist}&times;</span>
     </div>
     <div class="cv-controls">
       <div class="cv-dpad">
@@ -179,8 +181,8 @@ HTML_TEMPLATE = """
         <button class="cv-btn cv-down"  data-action="el-minus" title="Lower">&#9660;</button>
       </div>
       <div class="cv-zoom">
-        <button class="cv-zbtn" data-action="dist-minus" title="Zoom In">&#xFF0B;</button>
-        <button class="cv-zbtn" data-action="dist-plus"  title="Zoom Out">&#xFF0D;</button>
+        <button class="cv-zbtn" data-action="dist-minus" title="Zoom In">+</button>
+        <button class="cv-zbtn" data-action="dist-plus"  title="Zoom Out">&minus;</button>
       </div>
     </div>
   </div>
@@ -192,129 +194,123 @@ CSS_TEMPLATE = """
 
 .cv-wrap {
   position: relative;
-  width: 100%; height: 540px;
-  background: #08080f;
-  border: 1px solid rgba(34,211,238,0.15);
-  border-radius: 18px;
+  width: 100%; height: 500px;
+  background: var(--background-fill-secondary, #f9fafb);
+  border: 1px solid var(--border-color-primary, #e5e7eb);
+  border-radius: var(--radius-lg, 10px);
   overflow: hidden;
   display: flex; align-items: center; justify-content: center;
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
 }
 
 .cv-img {
   max-width: 100%; max-height: 100%;
-  object-fit: contain; border-radius: 4px; display: block;
-}
-
-.cv-scanline {
-  position: absolute; inset: 0;
-  background: repeating-linear-gradient(
-    to bottom,
-    transparent 0px, transparent 3px,
-    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
-  );
-  pointer-events: none; border-radius: inherit;
+  object-fit: contain; display: block;
 }
 
+/* empty state */
 .cv-empty {
   text-align: center; user-select: none;
-  display: flex; flex-direction: column; align-items: center; gap: 10px;
-}
-.cv-reticle {
-  width: 72px; height: 72px;
-  border: 2px solid rgba(34,211,238,0.3); border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  position: relative; margin-bottom: 4px;
+  display: flex; flex-direction: column; align-items: center; gap: 12px;
+  color: var(--body-text-color-subdued, #9ca3af);
 }
-.cv-reticle::before, .cv-reticle::after {
-  content: ''; position: absolute; background: rgba(34,211,238,0.25);
-}
-.cv-reticle::before { width: 1px; height: 100%; }
-.cv-reticle::after  { width: 100%; height: 1px; }
-.cv-reticle-inner {
-  width: 12px; height: 12px; border-radius: 50%;
-  background: rgba(34,211,238,0.6); z-index: 1;
+.cv-empty-icon {
+  width: 56px; height: 56px; opacity: 0.3;
 }
 .cv-empty-title {
-  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
-  color: rgba(255,255,255,0.45);
+  font-size: 14px; font-weight: 500;
+  color: var(--body-text-color-subdued, #6b7280);
 }
 .cv-empty-sub {
-  font-size: 11px; color: rgba(255,255,255,0.2);
-  max-width: 240px; line-height: 1.6;
+  font-size: 13px; max-width: 220px; line-height: 1.6;
+  color: var(--body-text-color-subdued, #9ca3af);
 }
 
-/* HUD: hidden by default, shown on CSS :hover — survives template re-renders */
+/* HUD — hidden until hover, pure CSS */
 .cv-hud {
-  position: absolute; bottom: 16px; right: 16px;
+  position: absolute; bottom: 14px; right: 14px;
   display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
-  opacity: 0; transition: opacity 0.2s ease; pointer-events: auto;
+  opacity: 0; transition: opacity 0.18s ease; pointer-events: auto;
 }
 .cv-wrap:hover .cv-hud { opacity: 1; }
 
+/* coordinate readout */
 .cv-readout {
-  display: flex; align-items: center; gap: 6px;
-  background: rgba(5,5,15,0.88); border: 1px solid rgba(34,211,238,0.3);
-  border-radius: 8px; padding: 5px 14px;
-  font-size: 11px; letter-spacing: 0.08em; white-space: nowrap;
-  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-}
-.cv-lbl { color: rgba(34,211,238,0.5); font-size: 9px; text-transform: uppercase; }
-.cv-val { color: #22d3ee; font-weight: 600; }
-.cv-sep { color: rgba(255,255,255,0.15); }
-
+  display: flex; align-items: center; gap: 8px;
+  background: var(--background-fill-primary, #ffffff);
+  border: 1px solid var(--border-color-primary, #e5e7eb);
+  border-radius: 6px; padding: 5px 12px;
+  font-size: 12px; white-space: nowrap;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+}
+.cv-lbl { color: var(--body-text-color-subdued, #9ca3af); font-size: 11px; }
+.cv-val { color: var(--body-text-color, #111827); font-weight: 600; font-variant-numeric: tabular-nums; }
+.cv-sep { color: var(--border-color-primary, #d1d5db); }
+
+/* controls panel */
 .cv-controls {
-  display: flex; align-items: center; gap: 10px;
-  background: rgba(5,5,15,0.82); border: 1px solid rgba(255,255,255,0.07);
-  border-radius: 14px; padding: 10px 12px;
-  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  display: flex; align-items: center; gap: 8px;
+  background: var(--background-fill-primary, #ffffff);
+  border: 1px solid var(--border-color-primary, #e5e7eb);
+  border-radius: 10px; padding: 8px 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 }
 
+/* d-pad */
 .cv-dpad {
   display: grid;
-  grid-template-columns: repeat(3, 36px);
-  grid-template-rows: repeat(3, 36px);
-  gap: 3px;
+  grid-template-columns: repeat(3, 32px);
+  grid-template-rows: repeat(3, 32px);
+  gap: 2px;
 }
 .cv-btn {
-  width: 36px; height: 36px;
-  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
-  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65);
-  font-size: 11px; cursor: pointer;
+  width: 32px; height: 32px;
+  border: 1px solid var(--border-color-primary, #e5e7eb);
+  border-radius: 6px;
+  background: var(--background-fill-primary, #ffffff);
+  color: var(--body-text-color-subdued, #6b7280);
+  font-size: 10px; cursor: pointer;
   display: flex; align-items: center; justify-content: center;
-  transition: background .12s, border-color .12s, transform .1s, color .12s;
+  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.08s;
   padding: 0; line-height: 1;
 }
 .cv-btn:hover {
-  background: rgba(34,211,238,0.2); border-color: rgba(34,211,238,0.5);
-  color: #22d3ee; transform: scale(1.12);
+  background: var(--color-accent-soft, #eff6ff);
+  border-color: var(--color-accent, #3b82f6);
+  color: var(--color-accent, #3b82f6);
+  transform: scale(1.1);
 }
-.cv-btn:active { transform: scale(0.9); }
+.cv-btn:active { transform: scale(0.93); }
 
 .cv-up    { grid-column:2; grid-row:1; }
 .cv-left  { grid-column:1; grid-row:2; }
 .cv-dot   {
-  grid-column:2; grid-row:2; width:36px; height:36px; border-radius:50%;
-  background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.12);
+  grid-column:2; grid-row:2; width:32px; height:32px; border-radius:50%;
+  background: var(--background-fill-secondary, #f3f4f6);
+  border: 1px solid var(--border-color-primary, #e5e7eb);
 }
 .cv-right { grid-column:3; grid-row:2; }
 .cv-down  { grid-column:2; grid-row:3; }
 
-.cv-zoom { display: flex; flex-direction: column; gap: 4px; }
+/* zoom */
+.cv-zoom { display: flex; flex-direction: column; gap: 3px; }
 .cv-zbtn {
-  width: 36px; height: 42px;
-  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
-  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65);
-  font-size: 16px; font-weight: 500; cursor: pointer;
+  width: 32px; height: 37px;
+  border: 1px solid var(--border-color-primary, #e5e7eb);
+  border-radius: 6px;
+  background: var(--background-fill-primary, #ffffff);
+  color: var(--body-text-color-subdued, #6b7280);
+  font-size: 15px; font-weight: 500; cursor: pointer;
   display: flex; align-items: center; justify-content: center;
-  transition: background .12s, border-color .12s, transform .1s, color .12s;
+  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.08s;
   padding: 0; line-height: 1;
 }
 .cv-zbtn:hover {
-  background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.5);
-  color: #fbbf24; transform: scale(1.12);
+  background: var(--color-accent-soft, #eff6ff);
+  border-color: var(--color-accent, #3b82f6);
+  color: var(--color-accent, #3b82f6);
+  transform: scale(1.1);
 }
-.cv-zbtn:active { transform: scale(0.9); }
+.cv-zbtn:active { transform: scale(0.93); }
 """
 
 # BUG FIX: distance uses shiftDist() to jump between the exact snap points
@@ -357,117 +353,37 @@ element.addEventListener('click', function(e) {
 
 # ── Global Gradio CSS ──────────────────────────────────────────────────────────
 GLOBAL_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
-
-body,
-.gradio-container,
-.gradio-container > .main,
-footer { background: #06060d !important; }
-
-.gradio-container {
-  font-family: 'Oxanium', sans-serif !important;
-  max-width: 1120px !important;
-  margin: 0 auto !important;
-  padding: 0 20px 40px !important;
-}
-
-.app-heading {
-  text-align: center;
-  padding: 36px 0 16px;
-}
+/* Header */
+.app-heading { padding: 20px 0 4px; }
 .app-heading h1 {
-  font-family: 'Oxanium', sans-serif;
-  font-size: clamp(28px, 4vw, 44px);
+  font-size: clamp(22px, 3vw, 32px);
   font-weight: 700;
-  letter-spacing: -0.025em;
-  background: linear-gradient(125deg, #22d3ee 0%, #818cf8 55%, #c084fc 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  line-height: 1.1;
-  margin: 0 0 10px;
+  letter-spacing: -0.01em;
+  margin: 0 0 4px;
 }
 .app-heading p {
-  font-family: 'IBM Plex Mono', monospace;
-  font-size: 11px;
-  color: rgba(255,255,255,0.28);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-size: 13px;
+  opacity: 0.5;
+  margin: 0;
 }
 
-.gradio-container .block,
-.gradio-container .form {
-  background: rgba(255,255,255,0.025) !important;
-  border: 1px solid rgba(255,255,255,0.06) !important;
-  border-radius: 14px !important;
-  box-shadow: none !important;
-}
-
-label > span,
-.label-wrap span {
-  font-family: 'IBM Plex Mono', monospace !important;
-  font-size: 10px !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.1em !important;
-  color: rgba(255,255,255,0.32) !important;
-}
-
-textarea,
-input[type=text],
-input[type=number] {
-  background: rgba(255,255,255,0.04) !important;
-  border: 1px solid rgba(255,255,255,0.08) !important;
-  color: rgba(255,255,255,0.8) !important;
-  border-radius: 8px !important;
-  font-family: 'IBM Plex Mono', monospace !important;
-  font-size: 11px !important;
-}
-textarea:focus, input:focus {
-  border-color: rgba(34,211,238,0.4) !important;
-  box-shadow: 0 0 0 2px rgba(34,211,238,0.06) !important;
-}
-
-input[type=range] { accent-color: #22d3ee !important; }
-
-.accordion > button,
-details > summary {
-  background: rgba(255,255,255,0.03) !important;
-  border-radius: 8px !important;
-  color: rgba(255,255,255,0.5) !important;
-  font-family: 'IBM Plex Mono', monospace !important;
-  font-size: 11px !important;
-  letter-spacing: 0.06em !important;
-}
-
-input[type=checkbox] { accent-color: #22d3ee; }
-
-.gradio-container h3 {
-  font-family: 'Oxanium', sans-serif;
-  font-size: 12px; font-weight: 600;
-  letter-spacing: 0.1em; text-transform: uppercase;
-  color: rgba(255,255,255,0.35);
-  margin-bottom: 6px;
-}
-
-.status-box textarea {
-  color: rgba(34,211,238,0.8) !important;
-  font-size: 11px !important;
+/* Gallery: let it expand to fit its content instead of being fixed-height */
+.gallery-container,
+.gallery-container > .gallery,
+.gallery-container > .gallery > .grid-wrap {
+  height: auto !important;
+  min-height: 180px;
 }
 
+/* Section divider */
 .section-divider {
   border: none;
-  border-top: 1px solid rgba(255,255,255,0.05);
-  margin: 8px 0;
+  border-top: 1px solid var(--border-color-primary);
+  margin: 12px 0 4px;
 }
-
-.gallery-item { border-radius: 8px !important; overflow: hidden; }
 """
 
-GRADIO_THEME = gr.themes.Base(
-    primary_hue="cyan",
-    neutral_hue="slate",
-    font=["Oxanium", "sans-serif"],
-)
+GRADIO_THEME = gr.themes.Default()
 
 
 # ── App ────────────────────────────────────────────────────────────────────────
@@ -479,7 +395,7 @@ def create_app():
         gr.HTML("""
         <div class="app-heading">
           <h1>3D Camera View Generator</h1>
-          <p>Qwen Image Edit &nbsp;&middot;&nbsp; Lightning LoRA &nbsp;&middot;&nbsp; Multi-Angle LoRA</p>
+          <p>Qwen Image Edit · Lightning LoRA · Multi-Angle LoRA</p>
         </div>
         """)
 
@@ -511,7 +427,7 @@ def create_app():
 
             # ── Right column ─────────────────────────────────────────────────
             with gr.Column(scale=5, min_width=400):
-                gr.Markdown("### Camera View — hover to reveal orbit controls")
+                gr.Markdown("**Camera View** — hover to reveal controls")
 
                 # FIX: plain gr.HTML with dict value — no subclass, no inspect error
                 cam_view = gr.HTML(
@@ -531,14 +447,13 @@ def create_app():
                 )
 
         gr.HTML('<hr class="section-divider">')
-        gr.Markdown("### Generated Views")
 
         gallery_state = gr.State([])
         gallery = gr.Gallery(
-            label="",
-            show_label=False,
-            columns=6,
-            height=190,
+            label="Generated Views",
+            show_label=True,
+            columns=4,
+            height="auto",
             object_fit="cover",
             allow_preview=True,
         )