Clearer layout: header with logo and links, a first-try tip, numbered steps, status callout

.gitignore

@@ -0,0 +1,3 @@
+weights/
+__pycache__/
+*.pyc

app.py

@@ -15,7 +15,7 @@ from PIL import Image, ImageDraw, ImageFont
 
 import engine
 
-SINGLE, DUAL, TILT = "One focal plane", "Two focal planes", "Tilt-shift"
+SINGLE, DUAL, TILT = "📍 One focal plane", "👥 Two focal planes", "🏙️ Tilt-shift"
 EXAMPLES = ["examples/portrait_city.jpg", "examples/portrait_aquarium.jpg", "examples/flower.jpg",
             "examples/dock.jpg", "examples/sculpture.jpg"]
 FONT = "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf"
@@ -193,55 +193,76 @@ def on_reset(state):
     return controls + [aif_view(state, r["mode"]), out, depth_view, state, note + msg]
 
 
-HEADER = """
-<div style="text-align:center">
-<h1 style="margin-bottom:0.2em">FlashReFocus: Interactive Image Refocusing in Seconds</h1>
-<p><a href="https://ming053l.github.io/FlashReFocus/">Project page</a> &nbsp;·&nbsp;
-<a href="https://ming053l.github.io/FlashReFocus/assets/FlashReFocus.pdf">Paper</a> &nbsp;·&nbsp;
-<a href="https://github.com/ming053l/FlashReFocus">Code</a> &nbsp;·&nbsp;
-<a href="https://youtu.be/g032M7moWQ4">Video</a></p>
+LOGO = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><circle cx="32" cy="32" r="30" fill="#FFFFFF" stroke="#2E7D32" stroke-width="3"/><g fill="#48A43F" stroke="#FFFFFF" stroke-width="1.6" stroke-linejoin="round"><path d="M32 4 A28 28 0 0 1 56.2 18 L40.6 27 Z" transform="rotate(0 32 32)"/><path d="M32 4 A28 28 0 0 1 56.2 18 L40.6 27 Z" transform="rotate(60 32 32)"/><path d="M32 4 A28 28 0 0 1 56.2 18 L40.6 27 Z" transform="rotate(120 32 32)"/><path d="M32 4 A28 28 0 0 1 56.2 18 L40.6 27 Z" transform="rotate(180 32 32)"/><path d="M32 4 A28 28 0 0 1 56.2 18 L40.6 27 Z" transform="rotate(240 32 32)"/><path d="M32 4 A28 28 0 0 1 56.2 18 L40.6 27 Z" transform="rotate(300 32 32)"/></g><path d="M35.5 19 L25.5 34 H31.5 L28.5 45 L39 29 H33 Z" fill="#FFD21E" stroke="#363636" stroke-width="1.4" stroke-linejoin="round"/></svg>
+"""
+
+HEADER = f"""
+<div id="header">
+  <div class="title">{LOGO}<div><h1>FlashReFocus</h1><p>Interactive image refocusing in seconds: restore a photo once,
+  then click to refocus, open the aperture, or keep two subjects sharp.</p></div></div>
+  <div class="links">
+    <a href="https://ming053l.github.io/FlashReFocus/" target="_blank">🌐 Project page</a>
+    <a href="https://ming053l.github.io/FlashReFocus/assets/FlashReFocus.pdf" target="_blank">📄 Paper</a>
+    <a href="https://github.com/ming053l/FlashReFocus" target="_blank">💻 Code</a>
+    <a href="https://youtu.be/g032M7moWQ4" target="_blank">🎬 Video</a>
+  </div>
+  <div class="tip">👉 <b>Try this first:</b> pick the aquarium example → <b>Restore</b> → choose <b>👥 Two focal planes</b>
+  → click the face, then the shark. Every click after Restore runs only the 1.3M-parameter renderer.</div>
 </div>
+"""
 
-**How to use.** (1) Upload a photograph, or pick an example, and press **Restore**: one-step diffusion restores the
-all-in-focus image once. (2) **Click** the restored image or the depth map to focus; each click runs only the
-1.3M-parameter renderer. (3) Turn the **aperture**, reshape the **depth curve**, or upload your **own depth map**;
-switch to **Two focal planes** (click two points) or **Tilt-shift** (click the row to keep sharp).
+CSS = """
+#header {margin-bottom: 4px}
+#header .title {display: flex; align-items: center; justify-content: center; gap: 16px}
+#header h1 {margin: 0; font-size: 2.1em; color: #2E7D32}
+#header .title p {margin: 2px 0 0; color: var(--body-text-color-subdued)}
+#header .links {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0}
+#header .links a {padding: 5px 14px; border-radius: 999px; border: 1px solid #48A43F; color: #2E7D32;
+                  text-decoration: none; font-weight: 600}
+#header .links a:hover {background: #48A43F; color: white}
+#header .tip {background: #f1f8ef; border-left: 4px solid #48A43F; padding: 10px 14px; border-radius: 8px;
+              color: #1f3d1f}
+.step h3 {margin: 6px 0 2px; color: #2E7D32}
+#status {background: #f1f8ef; border-left: 4px solid #48A43F; padding: 8px 14px; border-radius: 8px; min-height: 2.4em}
+#status p {margin: 0; color: #1f3d1f}
 """
 
-with gr.Blocks(title="FlashReFocus", theme=gr.themes.Soft()) as demo:
-    gr.Markdown(HEADER)
+with gr.Blocks(title="FlashReFocus", theme=gr.themes.Soft(primary_hue="green"), css=CSS) as demo:
+    gr.HTML(HEADER)
     state = gr.State(None)
     with gr.Row():
         with gr.Column():
-            inp = gr.Image(label="1. Input photograph", type="pil", sources=["upload", "clipboard"], height=340)
-            with gr.Row():
+            gr.Markdown("### ① Upload a photo and restore it once", elem_classes="step")
+            inp = gr.Image(label="Input photograph", type="pil", sources=["upload", "clipboard"], height=320)
+            gr.Examples(EXAMPLES, inputs=inp, label="Examples (Unsplash portraits and our own photographs)")
+            with gr.Accordion("Restoration settings", open=False):
                 long_side = gr.Slider(512, 1536, value=1024, step=64, label="Long side (pixels)")
                 omega = gr.Slider(0.0, 1.5, value=1.25, step=0.25, label="Detail weight ω",
                                   info="0: pixel LoRA only (most faithful); higher restores more detail.")
-            btn = gr.Button("Restore", variant="primary")
-            gr.Examples(EXAMPLES, inputs=inp, label="Examples (Unsplash portraits and our own photographs)")
+            btn = gr.Button("✨ Restore", variant="primary", size="lg")
+            gr.Markdown("### ③ Depth map", elem_classes="step")
             depth = gr.Image(label="Depth used for rendering (near is bright): click to focus", type="pil",
-                             interactive=False, height=300)
-            with gr.Accordion("Depth map controls", open=True):
+                             interactive=False, height=280)
+            with gr.Accordion("Depth controls", open=False):
                 gamma = gr.Slider(0.4, 2.5, value=1.0, step=0.05, label="Depth curve γ (D → D^γ)",
                                   info="< 1 spreads out the near range, > 1 the far range; blur follows the new spacing.")
                 band = gr.Slider(0.02, 0.3, value=0.06, step=0.01, label="Tilt-shift: half-height of the sharp band")
                 user_depth = gr.Image(label="Your own depth map (optional; near is bright, any size)", type="numpy",
-                                      sources=["upload", "clipboard"], height=160)
+                                      sources=["upload", "clipboard"], height=150)
         with gr.Column():
-            aif = gr.Image(label="2. Restored all-in-focus image: click to focus", type="pil", interactive=False,
-                           height=340)
-            with gr.Row():
-                mode = gr.Radio([SINGLE, DUAL, TILT], value=SINGLE, label="Focus mode",
-                                info="Two planes: the first click sets A, the second B. Tilt-shift: click a row.")
-            strength = gr.Slider(0.0, 1.5, value=0.5, step=0.05, label="Aperture (blur strength K)",
+            gr.Markdown("### ② Click the restored image to focus", elem_classes="step")
+            aif = gr.Image(label="Restored all-in-focus image (click to focus)", type="pil", interactive=False,
+                           height=320)
+            mode = gr.Radio([SINGLE, DUAL, TILT], value=SINGLE, label="Focus mode",
+                            info="Two planes: the first click sets A, the second B. Tilt-shift: click the row to keep sharp.")
+            strength = gr.Slider(0.0, 1.5, value=0.5, step=0.05, label="🔆 Aperture (blur strength K)",
                                  info="0: everything sharp; 1: the widest aperture seen in training; above 1 extrapolates.")
             with gr.Row():
-                show_marker = gr.Checkbox(value=False, label="Show focal markers on the result")
-                clear = gr.Button("Clear focal points")
-                reset = gr.Button("Reset to recommended settings")
-            out = gr.Image(label="3. Refocused", type="pil", interactive=False, height=420, format="png")
-    status = gr.Markdown("")
+                show_marker = gr.Checkbox(value=False, label="Show focal markers")
+                clear = gr.Button("Clear focal points", size="sm")
+                reset = gr.Button("↺ Recommended settings", size="sm")
+            status = gr.Markdown("Upload a photo or pick an example, then press ✨ Restore.", elem_id="status")
+            out = gr.Image(label="Refocused result", type="pil", interactive=False, height=430, format="png")
     controls = [state, strength, mode, gamma, band, show_marker]
     outputs = [aif, out, depth, state, status]
     btn.click(restore, [inp, long_side, omega, gamma], [aif, depth, out, state, status])

flashrefocus/rendering/depth_edits.py

@@ -11,11 +11,12 @@ def depth_at(depth, x, y):
 
 def two_focal_planes(depth, focal_depth_a, focal_depth_b):
     """D' = D_A + min(|D - D_A|, |D - D_B|): every pixel is blurred by its distance to the nearer of two focal planes.
-    Render D' with focal depth D_A. When D_A > 0.5 the distance is subtracted instead, so that D' stays within [0, 1]
-    (adding it to a far plane would clip everything to 1, i.e. nothing blurred)."""
+    Render D' with focal depth D_A. If adding the distance would clip more pixels at 1 than subtracting it would clip at
+    0 (a far plane A), it is subtracted instead: adding it to D_A = 1 would make the whole image sharp."""
     da, db = float(focal_depth_a), float(focal_depth_b)
     distance = torch.minimum((depth - da).abs(), (depth - db).abs())
-    return (da - distance if da > 0.5 else da + distance).clamp(0, 1)
+    subtract = int((da - distance < 0).sum()) < int((da + distance > 1).sum())
+    return (da - distance if subtract else da + distance).clamp(0, 1)
 
 
 def tilt_shift(height, width, row, slope=3.0, band=0.06, device="cpu"):