operatore: acquisizione immagine, proxy execute e overlay per camera_measure/dxf_compare (#46)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/frontend/flask_app/templates/measure/task_execute.html

@@ -191,7 +191,8 @@
   {# ================================================================
      MAIN — 3-column layout
      ================================================================ #}
-  <div class="flex-1 flex overflow-hidden">
+  {# #46: camera_measure / dxf_compare get the acquisition panel below instead of the manual layout #}
+  <div class="flex-1 flex overflow-hidden" x-show="!isVisionTask">
 
     {# ──────────────────────────────────────────────
        LEFT SIDEBAR — Marker list (vertical, hidden when no subtasks)
@@ -451,6 +452,63 @@
 
   </div>
 
+  {# ================================================================
+     VISION PANEL (#46) - acquire an image, run the recipe server-side, show the
+     quotes and the overlay. acquire(blob) is the entry point the agent camera
+     (#3) will reuse.
+     ================================================================ #}
+  <div x-show="isVisionTask" x-cloak
+       x-data="visionExecute()"
+       x-init="ctx = () => ({ lot: lotNumber, serial: serialNumber, runId: productionRun ? productionRun.id : null })"
+       class="flex-1 overflow-auto p-3 flex flex-col lg:flex-row gap-3">
+
+    <div class="flex-1 min-w-0 flex flex-col gap-2">
+      <div class="flex items-center gap-2 flex-wrap">
+        {# On a tablet this opens the camera; on a PC it picks a file. «Riprova» reuses the same input. #}
+        <label class="btn btn-primary text-sm gap-1.5 cursor-pointer" :class="busy ? 'opacity-50 pointer-events-none' : ''">
+          <span x-text="result ? '{{ _('Riprova') }}' : '{{ _('Acquisisci immagine') }}'"></span>
+          <input type="file" accept="image/*" capture="environment" class="hidden"
+                 @change="onPick($event)" :disabled="busy">
+        </label>
+        <span x-show="busy" class="text-sm text-[var(--text-muted)]">{{ _('Elaborazione in corso...') }}</span>
+      </div>
+
+      <div x-show="error" class="p-2 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-sm text-measure-fail" x-text="error"></div>
+
+      <div x-show="shownImage" class="relative border border-[var(--border-color)] rounded-lg overflow-hidden bg-black/5">
+        <img x-ref="img" :src="shownImage" @load="drawOverlay()" alt="" class="block w-full h-auto">
+        <canvas x-ref="overlay" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
+      </div>
+      <div x-show="!shownImage" class="text-sm text-[var(--text-muted)]">
+        {{ _('Nessuna immagine acquisita: premi «Acquisisci immagine».') }}
+      </div>
+    </div>
+
+    <div class="lg:w-80 shrink-0 flex flex-col gap-2" x-show="result">
+      <div class="text-sm font-bold text-[var(--text-primary)]">
+        {{ _('Esito') }}: <span x-text="(result && result.outcome) || '-'"></span>
+      </div>
+
+      <table class="w-full text-sm" x-show="rows.length">
+        <template x-for="r in rows" :key="r.label">
+          <tr>
+            <td class="py-1 pr-2 text-[var(--text-secondary)]" x-text="r.label"></td>
+            <td class="py-1 pr-2 font-mono text-right" x-text="Number(r.value).toFixed(3) + ' ' + r.unit"></td>
+            <td class="py-1"><span class="inline-block px-2 py-0.5 rounded text-xs font-bold" :class="statusClass(r.status)" x-text="r.status"></span></td>
+          </tr>
+        </template>
+      </table>
+
+      <div x-show="result && result.failures && result.failures.length"
+           class="p-2 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700 text-xs">
+        <div class="font-bold mb-1">{{ _('Strumenti falliti') }}</div>
+        <template x-for="f in ((result && result.failures) || [])" :key="f.tool_id">
+          <div><span class="font-mono" x-text="f.tool_name || f.tool_id"></span>: <span x-text="f.error"></span></div>
+        </template>
+      </div>
+    </div>
+  </div>
+
   {# ================================================================
      MEASUREMENT TIMER BANNER
      ================================================================ #}
@@ -912,6 +970,18 @@
 <script src="{{ url_for('static', filename='js/numpad.js') }}"></script>
 <script src="{{ url_for('static', filename='js/annotation-viewer.js') }}?v=6"></script>
 <script src="{{ url_for('static', filename='js/caliper.js') }}"></script>
+{# #46: acquisition + overlay for camera_measure / dxf_compare #}
+<script>
+  window.__visionCfg = {
+    executeUrl: '{{ url_for("measure.api_vision_execute") }}',
+    imageUrlTpl: '{{ url_for("measure.api_vision_result_image", result_id=0) }}',
+    taskId: {{ task.id|tojson }},
+    taskType: {{ (task.task_type or '')|tojson }},
+    subtasks: window.__taskSubtasks,
+    labels: { requestFailed: {{ _('Richiesta non riuscita')|tojson }} },
+  };
+</script>
+<script src="{{ url_for('static', filename='js/vision_execute.js') }}"></script>
 {# The clock's rules - how a delay reads, when the buzzer goes, where the
    measurement lives - are shared with the other screens rather than restated. #}
 <script src="{{ url_for('static', filename='js/production-clock.js') }}"></script>
@@ -1776,6 +1846,12 @@ function taskExecute() {
       return declared === 'measure' || declared === 'camera_measure';
     },
 
+    /* #46: image-based tasks run a VisionSuite recipe on the server. */
+    get isVisionTask() {
+      const t = this.task.task_type;
+      return t === 'camera_measure' || t === 'dxf_compare';
+    },
+
     /* A measurement task with no quotes yet: the recipe is unfinished. Said out
        loud rather than silently rendering an empty screen. */
     get isMeasureTaskWithoutQuotes() {