Try 4 versions of a picture, graded side by side, and pick one

trailer.html

@@ -67,6 +67,17 @@
   .fchk .w{display:block;margin:3px 0}
   .fchk .w.serious{color:#b4531f;font-weight:600}
   .fchk .go{font-size:12px;padding:2px 9px;margin-left:6px}
+  .vars{border:1px solid var(--line);border-radius:10px;padding:10px;margin:0 0 10px}
+  .vars h5{margin:0 0 3px;font-size:13px}
+  .vars p{margin:0 0 8px;font-size:12px;color:var(--muted)}
+  .vars .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
+  .vars .v{font-size:12px}
+  .vars .v img{width:100%;border-radius:7px;border:2px solid var(--line);display:block}
+  .vars .v.good img{border-color:#1f7a3a}
+  .vars .v.bad img{border-color:#b4531f}
+  .vars .v .say{margin:4px 0;color:var(--muted);min-height:2.6em}
+  .vars .v.bad .say{color:#b4531f}
+  .vars .v .btn{font-size:12px;padding:3px 10px}
   .ffault{display:flex;gap:8px;margin:0 0 10px}
   .ffault input{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 8px;
                 border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit}
@@ -250,7 +261,7 @@
     if (String(PKG.look_state || "")
         && (Date.now() - (Date.parse(PKG.look_started || "") || 0)) < 15 * 60 * 1000) return true;
     return (PKG.shots || []).some(function (s) {
-      return s.writing || s.drawing || s.fixing || stillFilming(s); });
+      return s.writing || s.drawing || s.fixing || s.varying || stillFilming(s); });
   }
 
   // Preparing the storyboard audio is work too. Without this the page stops
@@ -969,6 +980,34 @@
       + '</div>';
   }
 
+  // Several versions of one picture, best first, each with what the checker
+  // made of it. Picking the best of four needs no vocabulary at all.
+  function variantsHtml(s) {
+    if (s.varying) return '<p class="busy">Drawing several versions of this picture and checking each one\u2026 about a minute.</p>';
+    var v = s.variants;
+    if (!v || !(v.items || []).length)
+      return (v && v.error) ? '<p class="cont" style="color:#b4531f">' + esc(v.error) + '</p>' : "";
+    return '<div class="vars"><h5>' + v.items.length + ' versions of this picture \u2014 best first</h5>'
+      + '<p>' + (v.note ? 'Drawn with your note: \u201c' + esc(v.note) + '\u201d. ' : '')
+      + 'Click a picture to see it large. Press \u201cUse this one\u201d under the one you like; '
+      + 'the ending picture is then drawn to match it.' + (v.error ? ' ' + esc(v.error) : '') + '</p>'
+      + '<div class="grid">' + v.items.map(function (it, i) {
+          var fc = it.check || {};
+          var faults = (fc.duplicated || []).filter(Boolean).map(function (d) { return "same person twice: " + d; })
+            .concat((fc.faults || []).filter(function (f) { return f && f.what && f.severity === "serious"; })
+              .map(function (f) { return f.what; }));
+          var minor = (fc.faults || []).filter(function (f) { return f && f.what && f.severity !== "serious"; });
+          var cls = fc.verdict === "broken" ? "bad" : (fc.verdict === "ok" ? "good" : "");
+          var say = faults.length ? faults[0]
+            : (minor.length ? "small things only: " + minor[0].what
+               : (fc.verdict ? "\u2713 the checker sees nothing wrong" : "not checked"));
+          return '<div class="v ' + cls + '"><img data-zoom="' + esc("shot " + s.id + " \u2014 version " + (i + 1) + ": " + say)
+            + '" src="' + esc(it.url) + '" alt=""><div class="say">' + esc(String(say).slice(0, 150)) + '</div>'
+            + '<button type="button" class="btn' + (i === 0 && cls !== "bad" ? ' primary' : '')
+            + '" data-pickvar="' + esc(s.id) + '|' + i + '">Use this one</button></div>';
+        }).join("") + '</div></div>';
+  }
+
   // "That is not right" - about the PICTURE, in the author's own words. The
   // picture is what the shot is filmed from, so a fault here is inherited by
   // the film and cannot be fixed by filming again.
@@ -982,7 +1021,10 @@
     return '<div class="ffault"><input type="text" id="ff-' + esc(s.id) + '" maxlength="400" '
       + 'placeholder="Something wrong with this picture? Say what you see \u2014 \u201cit should be night\u201d, '
       + '\u201cthere should be nobody else in the garden\u201d\u2026">'
-      + '<button type="button" class="btn go" data-ffgo="' + esc(s.id) + '">Redraw &middot; $0.16</button></div>' + err;
+      + '<button type="button" class="btn go" data-ffgo="' + esc(s.id) + '">Redraw &middot; $0.16</button>'
+      + '<button type="button" class="btn go" data-vargo="' + esc(s.id) + '" title="Draws four versions of this '
+      + 'picture, checks each one, and lets you choose. Anything typed in the box is used as a note for all four.">'
+      + 'Try 4 versions &middot; $0.35</button></div>' + err;
   }
 
   // WHO IS IN THIS SCENE, as they look in it. This is where an author changes
@@ -1157,6 +1199,7 @@
       + (s.day ? ' &middot; <span class="scene">' + esc(s.day) + '</span>' : '')
       + '</div>'
       + media
+      + variantsHtml(s)
       + frameCheckHtml(s)
       + frameFaultHtml(s)
       + whoInHtml(s)
@@ -1346,6 +1389,24 @@
       z.classList.add("on");
       return;
     }
+    if ((el = hit("data-vargo"))) {
+      var vsid = el.getAttribute("data-vargo");
+      var vbox = document.getElementById("ff-" + vsid);
+      el.disabled = true; el.textContent = "starting\u2026";
+      r = await act("draw_variants", { draft_id: CUR, shot_id: vsid, n: 4,
+                                       note: vbox ? vbox.value.trim() : "" });
+      if (r) { showMsg("msg", "Drawing " + r.n + " versions of shot " + vsid + ", about $" + r.usd
+        + ". They appear here in about a minute.", "ok"); await refresh(); }
+      return;
+    }
+    if ((el = hit("data-pickvar"))) {
+      var pv = el.getAttribute("data-pickvar").split("|");
+      el.disabled = true; el.textContent = "working\u2026";
+      r = await act("pick_variant", { draft_id: CUR, shot_id: pv[0], index: Number(pv[1]) });
+      if (r) { showMsg("msg", "Using that version for shot " + pv[0] + " and drawing its ending picture to match.", "ok");
+               await refresh(); }
+      return;
+    }
     if ((el = hit("data-chkpics"))) {
       el.disabled = true; el.textContent = "starting\u2026";
       r = await act("check_pictures", { draft_id: CUR });