Update app.py

app.py

@@ -3,7 +3,6 @@ Agentic Coding : 3D Camera View Generator
 - Qwen Image Edit + Lightning LoRA + Multi-Angle LoRA
 - gr.HTML custom component (Gradio 6)
 - ZeroGPU (HuggingFace Spaces)
-
 """
 
 import gradio as gr
@@ -125,16 +124,15 @@ HTML_TEMPLATE = """
   {{#if value.img}}
     <img class="cv-img" src="{{value.img}}">
   {{else}}
-    <div class="cv-empty">
+    <div class="cv-empty cv-dropzone" data-action="upload">
       <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" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
       </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 see camera controls</p>
+      <p class="cv-empty-title">Drop an image here</p>
+      <p class="cv-empty-sub">or click to browse</p>
+      <input type="file" class="cv-file-input" accept="image/*" />
     </div>
   {{/if}}
-
   <div class="cv-hud">
     <div class="cv-readout">
       <span class="cv-lbl">Az</span><span class="cv-val">${value.az}&deg;</span>
@@ -162,7 +160,6 @@ HTML_TEMPLATE = """
 
 CSS_TEMPLATE = """
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
 /* ── Image well ── dark neutral so images pop, same treatment as any
    professional image editor / camera app preview area. Not a stylistic
    choice but a functional one: images render best against dark. */
@@ -174,12 +171,10 @@ CSS_TEMPLATE = """
   overflow: hidden;
   display: flex; align-items: center; justify-content: center;
 }
-
 .cv-img {
   max-width: 100%; max-height: 100%;
   object-fit: contain; display: block;
 }
-
 /* empty state */
 .cv-empty {
   text-align: center; user-select: none;
@@ -197,7 +192,26 @@ CSS_TEMPLATE = """
   font-size: 13px; max-width: 230px; line-height: 1.65;
   color: rgba(255,255,255,0.25);
 }
-
+/* dropzone */
+.cv-dropzone {
+  cursor: pointer;
+  border: 2px dashed rgba(255,255,255,0.15);
+  border-radius: 12px;
+  padding: 40px 24px;
+  transition: border-color 0.2s, background 0.2s;
+}
+.cv-dropzone:hover, .cv-dropzone.cv-drag-over {
+  border-color: #f97316;
+  background: rgba(249,115,22,0.06);
+}
+.cv-dropzone.cv-drag-over .cv-empty-icon {
+  color: #f97316;
+}
+.cv-file-input {
+  position: absolute;
+  width: 0; height: 0;
+  opacity: 0; pointer-events: none;
+}
 /* HUD — fades in on hover via CSS, no JS needed */
 .cv-hud {
   position: absolute; bottom: 16px; right: 16px;
@@ -205,7 +219,6 @@ CSS_TEMPLATE = """
   opacity: 0; transition: opacity 0.16s ease; pointer-events: auto;
 }
 .cv-wrap:hover .cv-hud { opacity: 1; }
-
 /* coordinate readout — white card floating over image */
 .cv-readout {
   display: flex; align-items: center; gap: 8px;
@@ -217,7 +230,6 @@ CSS_TEMPLATE = """
 .cv-lbl { color: #9ca3af; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
 .cv-val { color: #111827; font-weight: 600; font-variant-numeric: tabular-nums; }
 .cv-sep { color: #d1d5db; margin: 0 2px; }
-
 /* controls panel — white card, same treatment as readout */
 .cv-controls {
   display: flex; align-items: center; gap: 8px;
@@ -225,7 +237,6 @@ CSS_TEMPLATE = """
   border-radius: 10px; padding: 8px 10px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.25);
 }
-
 /* d-pad */
 .cv-dpad {
   display: grid;
@@ -248,7 +259,6 @@ CSS_TEMPLATE = """
   transform: scale(1.1);
 }
 .cv-btn:active { transform: scale(0.92); background: #ffedd5; }
-
 .cv-up    { grid-column:2; grid-row:1; }
 .cv-left  { grid-column:1; grid-row:2; }
 .cv-dot   {
@@ -258,7 +268,6 @@ CSS_TEMPLATE = """
 }
 .cv-right { grid-column:3; grid-row:2; }
 .cv-down  { grid-column:2; grid-row:3; }
-
 /* zoom column */
 .cv-zoom { display: flex; flex-direction: column; gap: 3px; }
 .cv-zbtn {
@@ -279,7 +288,6 @@ CSS_TEMPLATE = """
 
 JS_ON_LOAD = """
 const DIST_STEPS = [0.6, 1.0, 1.8];
-
 function snapDist(d) {
   return DIST_STEPS.reduce((p, c) => Math.abs(c - d) < Math.abs(p - d) ? c : p);
 }
@@ -287,17 +295,53 @@ function shiftDist(d, dir) {
   const idx = DIST_STEPS.indexOf(snapDist(Number(d)));
   return DIST_STEPS[Math.max(0, Math.min(DIST_STEPS.length - 1, idx + dir))];
 }
-
+// --- Image upload (drag-drop + click-to-browse) ---
+function loadImageFile(file) {
+  if (!file || !file.type.startsWith('image/')) return;
+  const reader = new FileReader();
+  reader.onload = function(e) {
+    const v = Object.assign({}, props.value);
+    props.value = { ...v, img: e.target.result };
+  };
+  reader.readAsDataURL(file);
+}
+element.addEventListener('dragover', function(e) {
+  e.preventDefault();
+  const dz = element.querySelector('.cv-dropzone');
+  if (dz) dz.classList.add('cv-drag-over');
+});
+element.addEventListener('dragleave', function(e) {
+  const dz = element.querySelector('.cv-dropzone');
+  if (dz) dz.classList.remove('cv-drag-over');
+});
+element.addEventListener('drop', function(e) {
+  e.preventDefault();
+  const dz = element.querySelector('.cv-dropzone');
+  if (dz) dz.classList.remove('cv-drag-over');
+  if (e.dataTransfer && e.dataTransfer.files.length) {
+    loadImageFile(e.dataTransfer.files[0]);
+  }
+});
+element.addEventListener('change', function(e) {
+  if (e.target.classList.contains('cv-file-input')) {
+    loadImageFile(e.target.files[0]);
+  }
+});
 // Delegated click listener — attached once, survives template re-renders.
 element.addEventListener('click', function(e) {
+  // Handle dropzone click -> open file picker
+  const dz = e.target.closest('[data-action="upload"]');
+  if (dz) {
+    const fi = element.querySelector('.cv-file-input');
+    if (fi) fi.click();
+    return;
+  }
   const btn = e.target.closest('[data-action]');
   if (!btn) return;
-
   const v    = Object.assign({}, props.value);
   let az   = Number(v.az)   || 0;
   let el   = Number(v.el)   || 0;
   let dist = Number(v.dist) || 1.0;
-
   switch (btn.dataset.action) {
     case 'az-minus':   az   = (az - 45 + 360) % 360;  break;
     case 'az-plus':    az   = (az + 45) % 360;         break;
@@ -306,7 +350,6 @@ element.addEventListener('click', function(e) {
     case 'dist-minus': dist = shiftDist(dist, -1);     break;
     case 'dist-plus':  dist = shiftDist(dist, +1);     break;
   }
-
   props.value = { ...v, az, el, dist };
   trigger('submit');
 });
@@ -321,7 +364,6 @@ GLOBAL_CSS = """
 .gradio-container .row {
   flex-wrap: nowrap !important;
 }
-
 /* ── Header ── */
 .app-heading { padding: 28px 0 20px; }
 .app-heading h1 {
@@ -348,13 +390,11 @@ GLOBAL_CSS = """
 .app-heading .chip svg {
   width: 12px; height: 12px; opacity: 0.7;
 }
-
 /* ── Controls column — subtle card to separate it from viewer ── */
 .controls-col > .block,
 .controls-col > .form {
   background: #fafafa !important;
 }
-
 /* ── Camera viewer column label ── */
 .viewer-label {
   font-size: 13px; font-weight: 600;
@@ -365,7 +405,6 @@ GLOBAL_CSS = """
 .viewer-label .hint {
   font-weight: 400; color: #9ca3af; font-size: 12px;
 }
-
 /* ── Status display ── replaces the plain textbox look */
 .status-row {
   display: flex; align-items: center; gap: 8px;
@@ -388,14 +427,12 @@ GLOBAL_CSS = """
   border-color: #e5e7eb !important;
   resize: none !important;
 }
-
 /* ── Prompt box ── */
 .prompt-box textarea {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace !important;
   font-size: 12px !important;
   color: #6b7280 !important;
 }
-
 """
 
 GRADIO_THEME = gr.themes.Default()
@@ -404,7 +441,6 @@ GRADIO_THEME = gr.themes.Default()
 # ── App ────────────────────────────────────────────────────────────────────────
 def create_app():
 
-    # FIX: theme and css are now passed to launch(), not gr.Blocks()
     with gr.Blocks(title="3D Camera View Generator") as demo:
 
         gr.HTML("""
@@ -456,7 +492,6 @@ def create_app():
                 </div>
                 """)
 
-                # FIX: plain gr.HTML with dict value — no subclass, no inspect error
                 cam_view = gr.HTML(
                     value=DEFAULT_CAM_VALUE,
                     html_template=HTML_TEMPLATE,
@@ -571,9 +606,8 @@ def create_app():
 
 if __name__ == "__main__":
     demo = create_app()
-    # FIX: theme and css passed to launch() as required by Gradio 6.0
     demo.launch(
         debug=True,
         theme=GRADIO_THEME,
         css=GLOBAL_CSS,
-    )
+    )