Update index.html

index.html

@@ -19,12 +19,14 @@
   }
   * { box-sizing: border-box; }
   [hidden] { display: none !important; }
-  html, body { margin: 0; padding: 0; }
+  html, body { height: 100%; margin: 0; padding: 0; }
   body {
+    display: flex; flex-direction: column;
     font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
     background: var(--paper);
     color: var(--ink);
-    line-height: 1.5;
+    line-height: 1.45;
+    overflow: hidden;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
@@ -32,18 +34,19 @@
 
   /* ---------- nav ---------- */
   .nav {
+    flex: 0 0 auto;
     display: flex; align-items: center; justify-content: space-between;
-    padding: 22px 40px;
+    padding: 12px 28px;
     border-bottom: 1px solid var(--rule);
   }
   .brand {
     font-family: 'Instrument Serif', Georgia, serif;
-    font-size: 24px;
+    font-size: 20px;
     letter-spacing: 0.005em;
   }
   .brand sup {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
+    font-size: 10px;
     color: var(--accent);
     margin-left: 4px;
     top: -0.7em;
@@ -51,7 +54,7 @@
   }
   .nav .meta {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
+    font-size: 10px;
     letter-spacing: 0.04em;
     color: var(--ink-3);
     text-transform: uppercase;
@@ -64,76 +67,73 @@
 
   /* ---------- hero ---------- */
   .hero {
-    padding: 96px 40px 56px;
+    flex: 0 0 auto;
+    padding: 14px 28px 16px;
     border-bottom: 1px solid var(--rule);
-    max-width: 1280px;
+    display: flex; align-items: baseline; gap: 24px;
+    flex-wrap: wrap;
   }
   .hero .eyebrow {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
+    font-size: 10px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--ink-3);
-    margin-bottom: 24px;
   }
   .hero h1 {
     font-family: 'Instrument Serif', Georgia, serif;
     font-weight: 400;
-    font-size: clamp(44px, 7.5vw, 92px);
-    line-height: 0.98;
-    letter-spacing: -0.015em;
-    margin: 0 0 24px;
-    max-width: 13ch;
+    font-size: clamp(22px, 3.2vw, 32px);
+    line-height: 1.05;
+    letter-spacing: -0.01em;
+    margin: 0;
   }
   .hero h1 em { font-style: italic; color: var(--accent); }
   .hero p {
-    max-width: 56ch;
     color: var(--ink-2);
-    font-size: 17px;
+    font-size: 13px;
     margin: 0;
+    margin-left: auto;
+    max-width: 56ch;
   }
 
-  /* ---------- workspace ---------- */
+  /* ---------- workspace grid ---------- */
   main {
+    flex: 1 1 auto;
+    min-height: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr auto;
     border-bottom: 1px solid var(--rule);
   }
-  @media (max-width: 880px) { main { grid-template-columns: 1fr; } }
+  .cell { padding: 0 28px; min-width: 0; min-height: 0; }
+  .cell.right { border-left: 1px solid var(--rule); }
 
-  .panel {
-    padding: 36px 40px 44px;
-    min-height: 560px;
-    display: flex; flex-direction: column;
-  }
-  .panel + .panel {
-    border-left: 1px solid var(--rule);
-  }
-  @media (max-width: 880px) {
-    .panel + .panel { border-left: 0; border-top: 1px solid var(--rule); }
-  }
-
-  .panel-head {
-    display: flex; align-items: baseline; justify-content: space-between;
-    margin-bottom: 18px;
+  .cell.head {
+    padding-top: 14px; padding-bottom: 8px;
+    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
   }
   .panel-num {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
+    font-size: 10px;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--ink-3);
   }
   .panel-title {
     font-family: 'Instrument Serif', Georgia, serif;
-    font-size: 22px;
+    font-size: 18px;
     font-style: italic;
     color: var(--ink);
   }
 
-  /* drop zone */
+  /* drop / output frame */
+  .cell.frame-cell {
+    padding-top: 0; padding-bottom: 0;
+    display: flex;
+  }
   .frame {
-    aspect-ratio: 4/5;
+    flex: 1; min-height: 0; min-width: 0;
     background: var(--paper-2);
     border: 1px solid var(--rule);
     position: relative;
@@ -144,78 +144,85 @@
   .frame.dashed:hover, .frame.dashed.over { border-color: var(--ink); background: #fff; }
   .frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
 
-  .placeholder { text-align: center; color: var(--ink-3); padding: 24px; }
+  .placeholder { text-align: center; color: var(--ink-3); padding: 18px; }
   .placeholder .glyph {
     font-family: 'Instrument Serif', Georgia, serif;
-    font-size: 48px; font-style: italic; color: var(--ink);
+    font-size: 36px; font-style: italic; color: var(--ink);
     line-height: 1;
   }
   .placeholder .small {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px; letter-spacing: 0.08em;
-    color: var(--ink-3); margin-top: 14px;
+    font-size: 10px; letter-spacing: 0.08em;
+    color: var(--ink-3); margin-top: 10px;
   }
   .placeholder .small b { color: var(--ink); font-weight: 500; }
 
-  /* prompt */
-  .field {
-    margin-top: 20px;
-  }
-  .field label {
-    display: block;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px; letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--ink-3);
-    margin-bottom: 8px;
+  /* controls (left bottom row) */
+  .cell.controls {
+    padding-top: 10px; padding-bottom: 14px;
+    display: flex; flex-direction: column; gap: 8px;
   }
   textarea {
     width: 100%;
-    padding: 14px 16px;
+    padding: 9px 12px;
     border: 1px solid var(--rule);
     background: var(--paper-2);
-    font-family: inherit; font-size: 15px;
+    font-family: inherit; font-size: 14px;
     color: var(--ink);
-    resize: vertical;
-    min-height: 88px;
+    resize: none;
+    height: 52px;
     border-radius: 0;
   }
   textarea:focus { outline: none; border-color: var(--ink); }
 
-  /* presets */
-  .presets {
-    display: flex; flex-wrap: wrap; gap: 6px;
-    margin-top: 10px;
+  .controls-row {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px; flex-wrap: wrap;
   }
+  .presets { display: flex; flex-wrap: wrap; gap: 5px; }
   .preset {
-    font: 12px/1 'JetBrains Mono', monospace;
+    font: 11px/1 'JetBrains Mono', monospace;
     color: var(--ink-2);
     background: transparent;
     border: 1px solid var(--rule);
-    padding: 7px 10px;
+    padding: 6px 9px;
     cursor: pointer;
     transition: border-color .12s, color .12s;
   }
   .preset:hover { border-color: var(--ink); color: var(--ink); }
 
   button.go {
-    margin-top: 20px;
-    padding: 16px 18px;
+    padding: 10px 18px;
     background: var(--ink);
     color: var(--paper);
     border: none;
     font-family: 'Inter', sans-serif;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     cursor: pointer;
     transition: background .15s;
+    white-space: nowrap;
   }
   button.go:hover:not(:disabled) { background: var(--accent); }
   button.go:disabled { opacity: 0.35; cursor: not-allowed; }
 
-  /* output */
+  /* result meta (right bottom row) */
+  .cell.meta-cell {
+    padding-top: 10px; padding-bottom: 14px;
+    display: flex; align-items: center; gap: 14px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3);
+  }
+  .cell.meta-cell a {
+    color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
+    text-transform: uppercase; letter-spacing: 0.12em;
+  }
+  .cell.meta-cell .seed { margin-left: auto; }
+  .meta-empty { color: var(--ink-3); }
+
+  /* loader & empty */
   .frame .empty {
     color: var(--ink-3);
     font-family: 'JetBrains Mono', monospace;
@@ -237,34 +244,31 @@
   }
   @keyframes pulse { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }
 
-  .out-meta {
-    margin-top: 16px;
-    display: flex; align-items: center; gap: 16px;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3);
-    min-height: 24px;
-  }
-  .out-meta a {
-    color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
-    text-transform: uppercase; letter-spacing: 0.12em;
-  }
-  .out-meta .seed { margin-left: auto; }
-
   /* footer */
   footer {
-    padding: 32px 40px;
+    flex: 0 0 auto;
+    padding: 10px 28px;
     display: flex; align-items: center; justify-content: space-between;
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px; letter-spacing: 0.04em;
+    font-size: 10px; letter-spacing: 0.04em;
     color: var(--ink-3);
     text-transform: uppercase;
   }
   footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
 
+  /* mobile / narrow viewports */
   @media (max-width: 880px) {
-    .nav, .hero, .panel, footer { padding-left: 24px; padding-right: 24px; }
-    .hero { padding-top: 64px; padding-bottom: 40px; }
-    .panel { min-height: 0; }
+    body { overflow: auto; }
+    .hero { padding: 12px 18px; gap: 8px; }
+    .hero p { margin-left: 0; }
+    main {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto auto auto auto;
+    }
+    .cell.right { border-left: 0; border-top: 1px solid var(--rule); }
+    .cell.head.right { padding-top: 12px; }
+    .cell.frame-cell { min-height: 280px; }
+    .nav, .cell, footer { padding-left: 18px; padding-right: 18px; }
   }
 </style>
 </head>
@@ -275,65 +279,64 @@
   <div class="meta"><span class="dot"></span>FireRed-Image-Edit · gr.Server</div>
 </nav>
 
-<section class="hero">
+<header class="hero">
   <div class="eyebrow">Issue 001 · Image Workshop</div>
   <h1>Edit any photograph with <em>one sentence</em>.</h1>
-  <p>A four-step image editor backed by FireRed-Image-Edit 1.1, served on free GPU through a small custom backend. Drop in a photo, describe the change, get a result.</p>
-</section>
+  <p>Four-step inference on FireRed-Image-Edit 1.1, served on free GPU.</p>
+</header>
 
 <main>
-  <!-- Source -->
-  <section class="panel">
-    <div class="panel-head">
-      <div class="panel-num">01 / Source</div>
-      <div class="panel-title">your photo</div>
-    </div>
-
+  <!-- heads -->
+  <div class="cell head left">
+    <span class="panel-num">01 / Source</span>
+    <span class="panel-title">your photo</span>
+  </div>
+  <div class="cell head right">
+    <span class="panel-num">02 / Result</span>
+    <span class="panel-title">the edit</span>
+  </div>
+
+  <!-- frames -->
+  <div class="cell frame-cell left">
     <div class="frame dashed" id="drop">
       <div class="placeholder" id="placeholder">
         <div class="glyph">+</div>
-        <div class="small"><b>Click</b> or <b>drop</b> a photo here<br>JPG · PNG · WEBP</div>
+        <div class="small"><b>Click</b> or <b>drop</b> a photo here · JPG · PNG · WEBP</div>
       </div>
       <img id="preview" hidden alt="">
     </div>
     <input type="file" id="file" accept="image/*" hidden>
+  </div>
+  <div class="cell frame-cell right">
+    <div class="frame" id="out">
+      <span class="empty" id="empty">Output will appear here</span>
+      <img id="result" hidden alt="">
+      <div class="loader" id="loader" hidden><span class="bar"></span>Editing</div>
+    </div>
+  </div>
 
-    <div class="field">
-      <label for="prompt">Edit instruction</label>
-      <textarea id="prompt" placeholder="convert to black and white with grain, replace background with a misty forest, transform into a 1990s polaroid..."></textarea>
+  <!-- controls / meta -->
+  <div class="cell controls left">
+    <textarea id="prompt" placeholder="convert to black and white with grain, replace background with a misty forest, transform into a 1990s polaroid..."></textarea>
+    <div class="controls-row">
       <div class="presets" id="presets">
         <button class="preset" type="button" data-p="Convert it to black and white with subtle film grain.">B&amp;W film</button>
         <button class="preset" type="button" data-p="Transform the image into a soft watercolor painting.">Watercolor</button>
         <button class="preset" type="button" data-p="Cinematic polaroid with soft grain, subtle vignette, gentle lighting, white frame, preserving realistic texture.">Polaroid</button>
         <button class="preset" type="button" data-p="Convert into a clean line-art ink drawing on white paper.">Line art</button>
       </div>
+      <button id="go" class="go" disabled>Run edit</button>
     </div>
-
-    <button id="go" class="go" disabled>Run edit</button>
-  </section>
-
-  <!-- Result -->
-  <section class="panel">
-    <div class="panel-head">
-      <div class="panel-num">02 / Result</div>
-      <div class="panel-title">the edit</div>
-    </div>
-
-    <div class="frame" id="out">
-      <span class="empty" id="empty">Output will appear here</span>
-      <img id="result" hidden alt="">
-      <div class="loader" id="loader" hidden><span class="bar"></span>Editing</div>
-    </div>
-
-    <div class="out-meta">
-      <a href="#" id="download" hidden>Download PNG</a>
-      <span class="seed" id="seed"></span>
-    </div>
-  </section>
+  </div>
+  <div class="cell meta-cell right">
+    <a href="#" id="download" hidden>Download PNG</a>
+    <span class="meta-empty" id="meta-empty">Upload a photo to begin</span>
+    <span class="seed" id="seed"></span>
+  </div>
 </main>
 
 <footer>
-  <span>Backend: <a href="https://www.gradio.app/main/docs/gradio/server">gr.Server</a> &nbsp;·&nbsp; Model: <a href="https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1">FireRed-Image-Edit 1.1</a></span>
+  <span>Backend: <a href="https://www.gradio.app/main/docs/gradio/server">gr.Server</a> · Model: <a href="https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1">FireRed-Image-Edit 1.1</a></span>
   <span>Free GPU via <a href="https://huggingface.co/docs/hub/spaces-zerogpu">ZeroGPU</a></span>
 </footer>
 
@@ -355,6 +358,7 @@
   const loader      = document.getElementById('loader');
   const download    = document.getElementById('download');
   const seedEl      = document.getElementById('seed');
+  const metaEmpty   = document.getElementById('meta-empty');
 
   let currentFile = null;
 
@@ -365,6 +369,7 @@
     preview.hidden = false;
     placeholder.hidden = true;
     goBtn.disabled = false;
+    if (metaEmpty) metaEmpty.textContent = 'Ready';
   }
 
   drop.addEventListener('click', () => fileInput.click());
@@ -395,6 +400,7 @@
     result.hidden  = true;
     download.hidden = true;
     seedEl.textContent = '';
+    if (metaEmpty) metaEmpty.hidden = true;
 
     try {
       const client = await clientPromise;