{% extends "base.html" %}
{% block title %}Doctor - LLM Lab{% endblock %}
{% block content %}
<h1>Doctor</h1>
<p class="lede">
  What works on this machine and what does not. Every failing row tells you the
  command to fix it. Rows for later stages are expected to fail until you install
  that stage - only <code>core</code> decides the verdict.
</p>

<p class="doctor-verdict {{ 'good' if ok else 'bad' }}">
  {{ 'Core environment is ready.' if ok else 'Core environment has problems - see the red rows.' }}
</p>

<pre class="doctor-platform">{% for line in platform %}{{ line }}
{% endfor %}</pre>

<h2>Live check</h2>
<p class="lede">
  The rows below are the only proof that acceleration works. Every other check reads
  <em>this</em> process's environment, but the GPU is chosen by the Ollama server's
  environment - so they can disagree. This one generates real tokens and asks Ollama
  where the weights actually live.
</p>
<p>
  <button id="measure" data-model="{{ model }}">Run live check on {{ model }}</button>
  <span id="measure-status"></span>
</p>
<table class="doctor" id="measure-rows" hidden><tbody></tbody></table>

<h2>Environment</h2>
<table class="doctor">
  <tbody>
    {% for row in rows %}
    <tr class="{{ 'good' if row.good else 'bad' }}">
      <td class="mark">{{ 'PASS' if row.good else 'FAIL' }}</td>
      <td class="label">{{ row.label }}</td>
      <td class="note">{% if row.note %}<code>{{ row.note }}</code>{% endif %}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script type="module">
const button = document.getElementById("measure");
const status = document.getElementById("measure-status");
const table = document.getElementById("measure-rows");

button.addEventListener("click", async () => {
  button.disabled = true;
  status.textContent = "generating...";
  table.hidden = true;
  try {
    const response = await fetch("/api/doctor/measure?model="
                                 + encodeURIComponent(button.dataset.model));
    const data = await response.json();
    table.querySelector("tbody").innerHTML = data.rows.map(row => `
      <tr class="${row.good ? "good" : "bad"}">
        <td class="mark">${row.good ? "PASS" : "FAIL"}</td>
        <td class="label">${row.label}</td>
        <td class="note">${row.note ? `<code>${row.note}</code>` : ""}</td>
      </tr>`).join("");
    table.hidden = false;
    const reading = data.reading || {};
    status.textContent = reading.elapsed ? `done in ${reading.elapsed}s` : "done";
  } catch (error) {
    status.textContent = "failed: " + error.message;
  } finally {
    button.disabled = false;
  }
});
</script>
{% endblock %}