{% extends "_base.html" %}
{% block content %}
<div x-data="finetuneWizard()" x-init="init()">
  <span class="page-eyebrow">Workflow · fine-tune</span>
  <h1 class="page-title">Fine-tune a LoRA</h1>
  <p class="page-lead">
    Apply a LoRA adapter on top of any OptIQ quant. Runs MLX-natively; takes
    advantage of OptIQ's sensitivity data via rank-scaling.
  </p>

  <div style="display: flex; gap: 8px; margin-bottom: 24px; font-family: var(--mono); font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em;">
    <template x-for="(s, i) in steps" :key="i">
      <span :style="i === step ? 'color: var(--accent); font-weight: 500;' : (i < step ? 'color: var(--ink-2);' : '')">
        <span x-text="(i+1) + '. ' + s"></span>
        <template x-if="i < steps.length - 1"><span style="margin: 0 8px;">→</span></template>
      </span>
    </template>
  </div>

  {# Step 1: pick base #}
  <div class="card" x-show="step === 0">
    <h2 style="margin-top: 0;">Base model</h2>
    <template x-if="!localModels.length">
      <div class="empty"><h3>No local OptIQ quants yet</h3>
        <div>Run a quantize first (<a href="{{ url_for('quantize.quantize_page') }}">Quantize</a>), then come back here.</div>
      </div>
    </template>
    <template x-if="localModels.length">
      <div>
        <div class="form-row">
          <label>OptIQ quant on disk</label>
          <select x-model="modelDir">
            <option value="">— select —</option>
            <template x-for="m in localModels" :key="m.path">
              <option :value="m.path" x-text="m.name + '  ·  ' + m.path"></option>
            </template>
          </select>
        </div>
        <div class="form-row">
          <label>…or a custom directory</label>
          <input type="text" x-model="modelDir" placeholder="/abs/path/to/optiq_mixed">
        </div>
        <button class="btn" :disabled="!modelDir.trim()" @click="step = 1">Continue</button>
      </div>
    </template>
  </div>

  {# Step 2: dataset #}
  <div class="card" x-show="step === 1">
    <h2 style="margin-top: 0;">Dataset</h2>
    <p style="color: var(--mute); font-size: 13px;">
      Path to a directory containing <code>train.jsonl</code> (and optionally
      <code>valid.jsonl</code>). mlx-lm accepts the standard shapes:
      <code>{"text": ...}</code>, <code>{"prompt": ..., "completion": ...}</code>,
      or <code>{"messages": [...]}</code>.
    </p>
    <div class="form-row">
      <label>Dataset directory</label>
      <input type="text" x-model="dataDir" placeholder="/abs/path/to/dataset" @input="datasetInfo=null">
    </div>
    <button class="btn btn-ghost" :disabled="!dataDir.trim()" @click="inspectDataset()">Inspect</button>

    <template x-if="datasetInfo && datasetInfo.ok">
      <div class="flash flash-ok" style="margin-top: 12px;">
        <strong x-text="datasetInfo.n_train"></strong> train rows
        <template x-if="datasetInfo.n_valid"><span> · <strong x-text="datasetInfo.n_valid"></strong> valid rows</span></template>
        · format <strong x-text="datasetInfo.format"></strong>
      </div>
    </template>
    <template x-if="datasetInfo && !datasetInfo.ok">
      <div class="flash flash-err" style="margin-top: 12px;" x-text="datasetInfo.error"></div>
    </template>

    <div style="margin-top: 16px; display: flex; gap: 8px;">
      <button class="btn btn-ghost" @click="step = 0">Back</button>
      <button class="btn" :disabled="!datasetInfo || !datasetInfo.ok" @click="step = 2">Continue</button>
    </div>
  </div>

  {# Step 3: hyperparams #}
  <div class="card" x-show="step === 2">
    <h2 style="margin-top: 0;">Hyperparameters</h2>

    <div class="form-row" style="margin: 0 0 16px;">
      <label>Training objective</label>
      <select x-model="method">
        <option value="sft">SFT — supervised fine-tuning (default; data is messages or prompt+completion)</option>
        <option value="dpo">DPO — Direct Preference Optimization (data is {prompt, chosen, rejected})</option>
      </select>
      <div class="hint" x-show="method === 'dpo'" style="margin-top: 4px; color: var(--mute); font-size: 12px;">
        DPO uses the same adapted model with adapter scale temporarily zeroed for the reference forward pass — no second model load.
      </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
      <div class="form-row" style="margin: 0;"><label>Rank</label>
        <input type="number" min="1" max="128" x-model.number="rank"></div>
      <div class="form-row" style="margin: 0;"><label>Scale (alpha = rank × scale)</label>
        <input type="number" step="0.5" min="0" x-model.number="scale"></div>
      <div class="form-row" style="margin: 0;"><label>Dropout</label>
        <input type="number" step="0.01" min="0" max="0.5" x-model.number="dropout"></div>
      <div class="form-row" style="margin: 0;"><label>Rank scaling</label>
        <select x-model="rankScaling">
          <option value="constant">constant — same rank everywhere</option>
          <option value="by_bits">by_bits — higher rank on lower-bit layers (recommended)</option>
          <option value="by_kl">by_kl — proportional to per-layer KL</option>
        </select>
      </div>
      <div class="form-row" style="margin: 0;"><label>Target modules</label>
        <input type="text" x-model="targetModulesText" placeholder="q_proj,v_proj"></div>
      <div class="form-row" style="margin: 0;"><label>num_layers (-1 = all; risky on big models)</label>
        <input type="number" min="-1" x-model.number="numLayers"></div>
      <div class="form-row" style="margin: 0;"><label>iters</label>
        <input type="number" min="10" x-model.number="iters"></div>
      <div class="form-row" style="margin: 0;"><label>batch_size</label>
        <input type="number" min="1" max="16" x-model.number="batchSize"></div>
      <div class="form-row" style="margin: 0;"><label>learning rate</label>
        <input type="number" step="0.00001" min="0" x-model.number="learningRate"></div>
      <div class="form-row" style="margin: 0;"><label>max_seq_length</label>
        <input type="number" min="128" x-model.number="maxSeqLength"></div>
      <div class="form-row" style="margin: 0;" x-show="method === 'dpo'">
        <label>DPO beta (KL constraint strength)</label>
        <input type="number" step="0.01" min="0.01" max="1.0" x-model.number="dpoBeta">
      </div>
    </div>
    <div style="margin-top: 16px; display: flex; gap: 8px;">
      <button class="btn btn-ghost" @click="step = 1">Back</button>
      <button class="btn" @click="submit()">Start training</button>
    </div>
  </div>

  {# Step 4: live training #}
  <div class="card" x-show="step === 3">
    <h2 style="margin-top: 0;">Training</h2>
    <div style="margin-bottom: 12px;">
      <div style="height: 8px; background: var(--paper-3); border-radius: 4px; overflow: hidden;">
        <div style="height: 100%; background: var(--accent); transition: width 0.4s;"
             :style="'width: ' + Math.round((progress || 0) * 100) + '%;'"></div>
      </div>
      <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); margin-top: 6px;">
        <span x-text="message || 'Starting…'"></span>
        <span x-text="Math.round((progress || 0) * 100) + '%'"></span>
      </div>
    </div>

    {# Loss chart — minimal SVG sparkline #}
    <template x-if="trainPoints.length">
      <div style="margin: 16px 0;">
        <div class="side-label" style="margin-bottom: 4px;">Train loss</div>
        <svg :viewBox="'0 0 ' + Math.max(trainPoints.length, 100) + ' 100'" style="width: 100%; height: 120px; background: var(--paper-2); border-radius: 4px;" preserveAspectRatio="none">
          <polyline fill="none" stroke="var(--accent)" stroke-width="0.8"
                    :points="lossPolyline()"></polyline>
        </svg>
        <div style="display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 2px;">
          <span x-text="'step 0'"></span>
          <span x-text="'step ' + trainPoints.at(-1)?.step + '  ·  loss ' + trainPoints.at(-1)?.loss.toFixed(3)"></span>
        </div>
      </div>
    </template>

    <pre x-ref="logEl" style="max-height: 280px; overflow-y: auto; font-size: 11.5px;"
         x-text="logLines.slice(-200).join('\n')"></pre>
  </div>

  {# Step 5: push #}
  <div class="card" x-show="step === 4">
    <h2 style="margin-top: 0;">Done</h2>
    <p>LoRA adapter saved to:</p>
    <pre x-text="adapterPath"></pre>

    <h3>Push to Hugging Face</h3>
    <div class="form-row"><label>Repository</label>
      <input type="text" x-model="repoId" placeholder="your-username/qwen-lora-mine"></div>
    <div class="form-row">
      <label style="display: inline-flex; gap: 6px;">
        <input type="checkbox" x-model="repoPrivate"> Private
      </label>
    </div>
    <div class="form-row"><label>Lab password</label>
      <input type="password" x-model="pushPassword"></div>

    <template x-if="pushResult && pushResult.ok">
      <div class="flash flash-ok">Pushed: <a :href="pushResult.url" target="_blank" x-text="pushResult.url"></a></div>
    </template>
    <template x-if="pushResult && !pushResult.ok">
      <div class="flash flash-err" x-text="pushResult.error"></div>
    </template>

    <div style="display: flex; gap: 8px;">
      <button class="btn" :disabled="pushing || !repoId.trim() || !pushPassword" @click="push()">
        <span x-text="pushing ? 'Pushing…' : 'Push to HF'"></span>
      </button>
      <a class="btn btn-ghost" href="{{ url_for('finetune.finetune_page') }}">Train another</a>
    </div>
  </div>
</div>

<script>
function finetuneWizard() {
  return {
    step: 0,
    steps: ['Base', 'Dataset', 'Hyperparams', 'Train', 'Save & push'],
    localModels: {{ local_models | tojson }},

    modelDir: '',
    dataDir: '',
    datasetInfo: null,
    method: 'sft',
    dpoBeta: 0.1,
    rank: 8, scale: 20.0, dropout: 0.0,
    rankScaling: 'by_bits',
    targetModulesText: 'q_proj,v_proj',
    numLayers: 16,
    iters: 500, batchSize: 1,
    learningRate: 0.0001, maxSeqLength: 1024,

    jobId: null,
    progress: 0, message: '',
    logLines: [], trainPoints: [], valPoints: [],
    adapterPath: '',

    repoId: '', repoPrivate: true, pushPassword: '',
    pushing: false, pushResult: null,

    init() {
      const params = new URLSearchParams(window.location.search);
      const jid = params.get('job_id');
      if (jid) {
        this.jobId = jid;
        this.step = 3;
        this.attachStream();
      }
    },

    async inspectDataset() {
      this.datasetInfo = null;
      const r = await fetch('/api/finetune/inspect-dataset', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({path: this.dataDir.trim()}),
        credentials: 'same-origin',
      });
      this.datasetInfo = await r.json();
    },

    async submit() {
      const r = await fetch('/api/finetune/submit', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          model_dir: this.modelDir.trim(),
          data_dir: this.dataDir.trim(),
          method: this.method,
          dpo_beta: this.dpoBeta,
          rank: this.rank, scale: this.scale, dropout: this.dropout,
          rank_scaling: this.rankScaling,
          target_modules: this.targetModulesText.split(',').map(s => s.trim()).filter(Boolean),
          num_layers: this.numLayers,
          iters: this.iters, batch_size: this.batchSize,
          learning_rate: this.learningRate,
          max_seq_length: this.maxSeqLength,
        }),
        credentials: 'same-origin',
      });
      const data = await r.json();
      if (!data.ok) { alert(data.error); return; }
      this.jobId = data.job_id;
      this.adapterPath = data.adapter_path;
      this.step = 3;
      history.replaceState({}, '', '?job_id=' + this.jobId);
      this.attachStream();
    },

    attachStream() {
      if (!this.jobId) return;
      const es = new EventSource('/api/jobs/' + this.jobId + '/stream');
      es.onmessage = (ev) => {
        try {
          const e = JSON.parse(ev.data);
          if (e.type === 'log') {
            this.logLines.push(e.line);
            this.$nextTick(() => { if (this.$refs.logEl) this.$refs.logEl.scrollTop = this.$refs.logEl.scrollHeight; });
          } else if (e.type === 'metric') {
            if (e.kind === 'train') {
              this.trainPoints.push({step: e.step, loss: e.loss});
              this.progress = e.progress || this.progress;
              this.message = e.message || this.message;
            } else if (e.kind === 'val') {
              this.valPoints.push({step: e.step, loss: e.loss});
            }
          } else if (e.type === 'stage') {
            this.progress = e.progress || this.progress;
            this.message = e.message || this.message;
            if (e.stage === 'done') {
              this.adapterPath = e.adapter_path || this.adapterPath;
              this.progress = 1;
              this.step = 4;
              es.close();
            }
          } else if (e.type === 'failed') {
            this.message = 'Failed: ' + (e.error || 'unknown');
            es.close();
          }
        } catch (err) {}
      };
      es.addEventListener('end', () => es.close());
    },

    lossPolyline() {
      if (!this.trainPoints.length) return '';
      const minL = Math.min(...this.trainPoints.map(p => p.loss));
      const maxL = Math.max(...this.trainPoints.map(p => p.loss));
      const range = Math.max(maxL - minL, 0.001);
      const w = Math.max(this.trainPoints.length, 100);
      return this.trainPoints.map((p, i) => {
        const x = (i / Math.max(this.trainPoints.length - 1, 1)) * w;
        const y = 100 - ((p.loss - minL) / range) * 95 - 2;
        return x.toFixed(1) + ',' + y.toFixed(1);
      }).join(' ');
    },

    async push() {
      this.pushing = true; this.pushResult = null;
      const r = await fetch('/api/finetune/push', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          job_id: this.jobId, repo_id: this.repoId.trim(),
          private: this.repoPrivate, password: this.pushPassword,
        }),
        credentials: 'same-origin',
      });
      this.pushResult = await r.json();
      this.pushing = false;
    },
  };
}
</script>
{% endblock %}