templates/batch_progress.html

{% extends "base.html" %}

{% block title %}Batch Processing — AI Medical Intelligence Pipeline{% endblock %}

{% block content %}
{% set display_total = batch.total if batch.total else (expected_total or 0) %}
<div class="batch-page"
  data-batch-id="{{ batch_id }}"
  data-status-url="{{ url_for('batch_status', batch_id=batch_id) }}"
  data-cancel-url="{{ url_for('cancel_batch', batch_id=batch_id) }}"
  data-reports-url="{{ url_for('reports') }}"
  data-expected-total="{{ display_total }}">
<section class="breadcrumb">
  <a href="{{ url_for('home') }}">Home</a>
  <span class="sep">/</span>
  <a href="{{ url_for('upload') }}">Upload</a>
  <span class="sep">/</span>
  <span>Batch {{ batch_id }}</span>
</section>

<section class="batch-header">
  <h1 id="batchTitle">Processing Batch&hellip;</h1>
  <p class="muted" id="batchSubtitle">
    Analyzing {{ display_total }} DICOM file{{ 's' if display_total != 1 }} — please keep this page open.
  </p>
  <p class="muted" id="queueStatus">
    {% if batch.queue_size is not none %}
      Queue size: {{ batch.queue_size }}
    {% endif %}
  </p>
  <div class="batch-header-actions">
    <button type="button" class="btn btn-outline" id="cancelBatch">Cancel Batch</button>
  </div>
</section>

<!-- ── Progress bar ────────────────────────────────────────────────── -->
<section class="panel batch-panel">
  <div class="batch-stats-row">
    <div class="batch-stat">
      <span class="batch-stat-label">Total</span>
      <span class="batch-stat-value" id="statTotal">{{ display_total }}</span>
    </div>
    <div class="batch-stat">
      <span class="batch-stat-label">Processed</span>
      <span class="batch-stat-value" id="statProcessed">0</span>
    </div>
    <div class="batch-stat accent-green">
      <span class="batch-stat-label">Succeeded</span>
      <span class="batch-stat-value" id="statSucceeded">0</span>
    </div>
    <div class="batch-stat accent-red">
      <span class="batch-stat-label">Failed</span>
      <span class="batch-stat-value" id="statFailed">0</span>
    </div>
  </div>

  <div class="progress-track">
    <div class="progress-fill" id="progressFill" style="width: 0%"></div>
  </div>
  <div class="progress-text">
    <span id="progressPct">0%</span>
    <span id="currentFile" class="muted"></span>
  </div>
</section>

<!-- ── Live feed of recent results ─────────────────────────────────── -->
<section class="panel" id="feedPanel" style="display: none">
  <h3>Recent Results</h3>
  <ul class="batch-feed" id="batchFeed"></ul>
</section>

<!-- ── Completion summary (shown when done) ────────────────────────── -->
<section class="panel batch-done-panel" id="donePanel" style="display: none">
  <div class="batch-done-icon">
    <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
         stroke="var(--green)" stroke-width="2">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
      <polyline points="22 4 12 14.01 9 11.01" />
    </svg>
  </div>
  <h2>Batch Complete</h2>
  <p class="muted" id="doneSummary"></p>
  <div class="batch-done-actions">
    <a href="{{ url_for('reports') }}" class="btn btn-primary">View Reports</a>
    <a href="{{ url_for('upload') }}" class="btn">Upload More</a>
  </div>
</section>

<!-- ── Failed files (shown only if failures) ───────────────────────── -->
<section class="panel" id="failPanel" style="display: none">
  <h3 class="text-red">Failed Files</h3>
  <ul class="batch-fail-list" id="failList"></ul>
</section>
 </div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/batch.js') }}" defer></script>
{% endblock %}