webserver/templates/predict_result_fragment.html

<div class="card">
  <div class="topline">
    <div>
      <h2>Prediction Results: {{ prediction_id }}</h2>
      <div class="meta">The model checkpoint has been loaded and predictions have been generated.</div>
    </div>
    <div class="pill">DONE</div>
  </div>

  <div class="stats">
    <div class="stat"><div class="k">Samples</div><div class="v">{{ summary.num_samples }}</div></div>
    <div class="stat"><div class="k">Classes</div><div class="v">{{ summary.class_names|length }}</div></div>
    <div class="stat"><div class="k">Download CSV</div><div class="v"><a href="{{ download_csv }}">CSV</a></div></div>
  </div>
  <div class="meta" style="margin-top: 12px;">If you need the same checkpoint for another dataset, keep the exported pth file and upload it here again.</div>
  {% if summary.spectrum_source or summary.wavenumber_source %}
  <div class="helper-note">Spectrum source: {{ summary.spectrum_source }} | Wavelength source: {{ summary.wavenumber_source }}</div>
  {% endif %}
  {% if summary.label_mapping_source %}
  <div class="helper-note">Label mapping source: {{ summary.label_mapping_source }}</div>
  {% endif %}
</div>

<div class="grid">
  <div class="card">
    <h3>Per-sample Predictions</h3>
    <table>
      <thead>
        <tr>
          <th>Sample</th>
          <th>Predicted class</th>
          <th>Confidence</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          <td>{{ row.sample_index }}</td>
          <td>{{ row.pred_label }}</td>
          <td>{{ "%.4f"|format(row.confidence) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <h3>Top-5 Logits</h3>
    <div class="top5-grid">
      {% for row in top5_rows %}
        <div class="top5-item">
          <strong>Sample {{ row.sample_index }}</strong>
          <div>
            {% for item in row.top5 %}
              <div>Top{{ item.rank }}: {{ item.class_name }} - {{ "%.6f"|format(item.logit) }}</div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="grid">
  <div class="card">
    <h3>Input Spectra Preview</h3>
    <img class="preview-img" src="{{ preview_image }}" alt="Input spectra preview">
  </div>
</div>