nanogpt 0.2.0 → 0.3.0

data/lib/nano_gpt/web/training_worker.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+require "thread"
+
+module NanoGPT
+  module Web
+    # Processes all Torch operations on the main thread.
+    # The web server runs in a background thread while this worker owns the
+    # main thread and processes commands from a Queue.
+    class TrainingWorker
+      attr_reader :queue
+
+      def initialize(training_state:, metrics_store:, sse_notifier:)
+        @training_state = training_state
+        @metrics_store = metrics_store
+        @sse_notifier = sse_notifier
+        @queue = Queue.new
+      end
+
+      # Run the command loop on the MAIN thread (blocks forever).
+      # Call this AFTER starting the web server in a background thread.
+      def run
+        loop do
+          msg = @queue.pop
+          case msg[:command]
+          when :start then handle_start(**msg[:args])
+          when :resume then handle_resume(**msg[:args])
+          when :generate then handle_generate(msg)
+          when :prepare_dataset then handle_prepare_dataset(msg)
+          when :shutdown then break
+          end
+        end
+      rescue => e
+        puts "Training worker crashed: #{e.message}\n#{e.backtrace.first(5).join("\n")}"
+      end
+
+      # Enqueue a fire-and-forget training command
+      def enqueue(command, **args)
+        @queue.push({ command: command, args: args })
+      end
+
+      # Enqueue a command and wait for the result (used for generation)
+      def enqueue_sync(command, **args)
+        result_queue = Queue.new
+        @queue.push({ command: command, args: args, result: result_queue })
+        result_queue.pop
+      end
+
+      private
+
+      def handle_start(config:, data_dir:, run_id:)
+        run_training(config, data_dir, run_id)
+      rescue => e
+        handle_training_error(run_id, e)
+      end
+
+      def handle_resume(config:, data_dir:, run_id:, checkpoint_path:)
+        run_training(config, data_dir, run_id, resume: checkpoint_path)
+      rescue => e
+        handle_training_error(run_id, e)
+      end
+
+      def handle_generate(msg)
+        args = msg[:args]
+        result = generate_text(**args)
+        msg[:result]&.push(result)
+      end
+
+      def handle_prepare_dataset(msg)
+        args = msg[:args]
+        result = prepare_dataset(**args)
+        msg[:result]&.push(result)
+      end
+
+      def prepare_dataset(input_path:, output_name:, tokenizer:, val_ratio: 0.1)
+        preparer = if tokenizer == "bpe"
+          BPETextfilePreparer.new(input_path: input_path, output_name: output_name, val_ratio: val_ratio)
+        else
+          TextfilePreparer.new(input_path: input_path, output_name: output_name, val_ratio: val_ratio)
+        end
+        name = preparer.prepare
+        { ok: true, dataset: name }
+      rescue => e
+        { ok: false, error: e.message }
+      end
+
+      def generate_text(prompt:, temperature:, max_tokens:, top_k:, dataset:, checkpoint_path: nil, out_dir: nil)
+        ckpt_path = checkpoint_path || File.join(out_dir, "ckpt.pt")
+        checkpoint = Torch.load(ckpt_path)
+        model_args = checkpoint["model_args"].transform_keys(&:to_sym)
+        model_config = GPTConfig.new(**model_args)
+        gen_model = GPT.new(model_config)
+        gen_model.load_state_dict(checkpoint["model"])
+        gen_model.eval
+
+        dataset_dir = File.join("data", dataset)
+        tokenizer = Tokenizer.for_dataset(dataset_dir)
+        start_ids = tokenizer.encode(prompt)
+        x = Torch.tensor([start_ids], dtype: :long)
+
+        y = gen_model.generate(x, max_tokens, temperature: temperature, top_k: top_k)
+        text = tokenizer.decode(y[0].to_a)
+
+        { ok: true, text: text }
+      rescue => e
+        { ok: false, error: e.message }
+      end
+
+      def run_training(config, data_dir, run_id, resume: nil)
+        tokenizer = Tokenizer.for_dataset(data_dir)
+        model_config = GPTConfig.new(
+          block_size: config[:block_size],
+          vocab_size: tokenizer.vocab_size,
+          n_layer: config[:n_layer],
+          n_head: config[:n_head],
+          n_embd: config[:n_embd],
+          dropout: config[:dropout],
+          bias: config[:bias]
+        )
+
+        device = config[:device]
+        model = GPT.new(model_config)
+        model.to(device) if device != "cpu"
+
+        data_loader = DataLoader.new(
+          data_dir: data_dir,
+          block_size: config[:block_size],
+          batch_size: config[:batch_size],
+          device: device
+        )
+
+        trainer = WebTrainer.new(
+          model: model,
+          data_loader: data_loader,
+          config: config,
+          training_state: @training_state,
+          metrics_store: @metrics_store,
+          sse_notifier: @sse_notifier
+        )
+
+        trainer.load_checkpoint(resume) if resume
+        trainer.train(run_id)
+      end
+
+      def handle_training_error(run_id, error)
+        @training_state.update(status: "error")
+        @metrics_store.update_run(run_id, status: "error", stopped_at: Time.now.iso8601)
+        @sse_notifier.broadcast(type: "error", data: { message: error.message })
+        puts "Training error: #{error.message}\n#{error.backtrace.first(5).join("\n")}"
+      end
+    end
+  end
+end

data/lib/nano_gpt/web/views/layout.erb

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>nanoGPT</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+  <style>
+    .status-idle { color: #6b7280; }
+    .status-running { color: #10b981; }
+    .status-stopped { color: #f59e0b; }
+    .status-completed { color: #3b82f6; }
+    .status-error { color: #ef4444; }
+    .pulse { animation: pulse 2s infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    .badge { @apply px-2 py-0.5 rounded text-xs font-medium; }
+    .badge-running { @apply bg-green-900 text-green-300; }
+    .badge-stopped { @apply bg-yellow-900 text-yellow-300; }
+    .badge-completed { @apply bg-blue-900 text-blue-300; }
+    .badge-error { @apply bg-red-900 text-red-300; }
+  </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+  <header class="bg-gray-800 border-b border-gray-700 px-6 py-3">
+    <div class="flex items-center justify-between max-w-7xl mx-auto">
+      <nav class="flex items-center gap-6">
+        <a href="/" class="text-lg font-bold tracking-tight hover:text-white">nanoGPT</a>
+      </nav>
+      <div class="flex items-center gap-2">
+        <span id="nav-status-dot" class="w-2.5 h-2.5 rounded-full bg-gray-500 inline-block"></span>
+        <span id="nav-status-text" class="text-xs font-medium status-idle">Idle</span>
+      </div>
+    </div>
+  </header>
+
+  <main class="max-w-7xl mx-auto px-6 py-6 space-y-6">
+    <%= yield %>
+  </main>
+
+  <script>
+    async function pollNavStatus() {
+      try {
+        const res = await fetch('/train/status');
+        if (!res.ok) return;
+        const state = JSON.parse(await res.text());
+        const status = state.status || 'idle';
+        const dot = document.getElementById('nav-status-dot');
+        const text = document.getElementById('nav-status-text');
+        if (!dot || !text) return;
+
+        const labels = { idle: 'Idle', running: 'Training...', stopped: 'Stopped', completed: 'Completed', error: 'Error' };
+        text.textContent = labels[status] || status;
+        text.className = 'text-xs font-medium status-' + status;
+
+        const colors = { idle: 'bg-gray-500', running: 'bg-green-500', stopped: 'bg-yellow-500', completed: 'bg-blue-500', error: 'bg-red-500' };
+        dot.className = 'w-2.5 h-2.5 rounded-full inline-block ' + (colors[status] || 'bg-gray-500');
+        if (status === 'running') dot.classList.add('pulse');
+
+        // Dispatch for page-specific listeners
+        window.dispatchEvent(new CustomEvent('training-status', { detail: state }));
+      } catch (e) {}
+    }
+    pollNavStatus();
+    setInterval(pollNavStatus, 2000);
+
+    function statusBadge(s) {
+      const colors = { running: 'bg-green-900 text-green-300', stopped: 'bg-yellow-900 text-yellow-300', completed: 'bg-blue-900 text-blue-300', error: 'bg-red-900 text-red-300' };
+      return '<span class="px-2 py-0.5 rounded text-xs font-medium ' + (colors[s] || 'bg-gray-700 text-gray-300') + '">' + s + '</span>';
+    }
+
+    function formatTime(iso) {
+      if (!iso) return '--';
+      return new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+    }
+  </script>
+</body>
+</html>

data/lib/nano_gpt/web/views/run_detail.erb

@@ -0,0 +1,432 @@
+<%
+  config = JSON.parse(@run["config_json"] || "{}") rescue {}
+  max_iters = config["max_iters"] || 0
+  is_running = @run["status"] == "running"
+%>
+
+<!-- Breadcrumb + Status -->
+<div class="flex items-center justify-between">
+  <div class="flex items-center gap-3">
+    <a href="/" class="text-gray-400 hover:text-white text-sm">&larr; Runs</a>
+    <span class="text-gray-600">/</span>
+    <h1 class="text-lg font-semibold">Run #<%= @run["id"] %></h1>
+    <span id="run-status-badge"><%= @run["status"] %></span>
+  </div>
+  <div class="flex gap-2" id="run-actions">
+    <% if is_running %>
+      <button onclick="stopRun()" id="btn-stop" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm font-medium transition pulse">
+        Stop
+      </button>
+    <% elsif @run["status"] == "stopped" || @run["status"] == "completed" %>
+      <% if @run["checkpoint_path"] %>
+        <button onclick="resumeRun()" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-sm font-medium transition">
+          Resume
+        </button>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+
+<!-- Stats -->
+<div class="bg-gray-800 rounded-lg p-4 grid grid-cols-2 md:grid-cols-5 gap-4">
+  <div>
+    <div class="text-xs text-gray-400 uppercase">Dataset</div>
+    <div class="text-sm font-mono"><%= @run["dataset"] %></div>
+  </div>
+  <div>
+    <div class="text-xs text-gray-400 uppercase">Iteration</div>
+    <div class="text-sm font-mono"><span id="stat-iter"><%= @run["current_iter"] || 0 %></span> / <%= max_iters %></div>
+  </div>
+  <div>
+    <div class="text-xs text-gray-400 uppercase">Best Val Loss</div>
+    <div class="text-sm font-mono" id="stat-val-loss"><%= @run["best_val_loss"] ? format("%.4f", @run["best_val_loss"]) : "--" %></div>
+  </div>
+  <div>
+    <div class="text-xs text-gray-400 uppercase">Started</div>
+    <div class="text-sm font-mono"><%= @run["started_at"] ? Time.parse(@run["started_at"]).strftime("%b %d %H:%M") : "--" %></div>
+  </div>
+  <div>
+    <div class="text-xs text-gray-400 uppercase">Status</div>
+    <div class="text-sm font-mono" id="stat-status"><%= @run["status"] %></div>
+  </div>
+</div>
+
+<!-- Progress Bar (if running) -->
+<div id="progress-section" class="<%= 'hidden' unless is_running %>">
+  <div class="bg-gray-800 rounded-lg p-4">
+    <div class="flex items-center justify-between text-xs text-gray-400 mb-1.5">
+      <span id="progress-label"><%= @run["current_iter"] || 0 %> / <%= max_iters %></span>
+      <span id="progress-eta"></span>
+    </div>
+    <div class="w-full bg-gray-700 rounded-full h-2.5">
+      <% pct = max_iters > 0 ? [100, ((@run["current_iter"] || 0).to_f / max_iters * 100)].min : 0 %>
+      <div id="progress-bar" class="bg-green-500 h-2.5 rounded-full transition-all duration-300" style="width: <%= pct %>%"></div>
+    </div>
+  </div>
+</div>
+
+<!-- Loss Chart -->
+<div class="bg-gray-800 rounded-lg p-4">
+  <h2 class="text-sm font-medium text-gray-300 mb-3">Loss</h2>
+  <div style="height: 350px;">
+    <canvas id="loss-chart"></canvas>
+  </div>
+</div>
+
+<!-- Config -->
+<details class="bg-gray-800 rounded-lg">
+  <summary class="px-4 py-3 cursor-pointer text-sm font-medium text-gray-400 hover:text-white">Configuration</summary>
+  <div class="px-4 pb-4">
+    <pre class="text-xs font-mono text-gray-400 whitespace-pre-wrap"><%= JSON.pretty_generate(config) %></pre>
+  </div>
+</details>
+
+<!-- Checkpoints -->
+<div class="bg-gray-800 rounded-lg p-4">
+  <h2 class="text-sm font-medium text-gray-300 mb-3">Checkpoints</h2>
+  <div id="checkpoints-list">
+    <div class="text-xs text-gray-500">Loading...</div>
+  </div>
+</div>
+
+<!-- Generate from Checkpoint -->
+<div class="bg-gray-800 rounded-lg p-4" id="generate-section">
+  <h2 class="text-sm font-medium text-gray-300 mb-3">Generate Text</h2>
+  <div class="space-y-3">
+    <div>
+      <label class="block text-xs text-gray-400 mb-1">Checkpoint</label>
+      <select id="gen-checkpoint" class="w-full bg-gray-700 rounded px-3 py-2 text-sm font-mono">
+        <option value="">Select a checkpoint...</option>
+      </select>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+      <div class="md:col-span-2">
+        <label class="block text-xs text-gray-400 mb-1">Prompt</label>
+        <textarea id="gen-prompt" rows="3" class="w-full bg-gray-700 rounded px-3 py-2 text-sm font-mono resize-y" placeholder="Enter prompt text..."></textarea>
+      </div>
+      <div class="space-y-2">
+        <div>
+          <label class="block text-xs text-gray-400 mb-1">Temperature</label>
+          <input id="gen-temperature" type="number" value="0.8" step="0.1" min="0.1" max="2.0" class="w-full bg-gray-700 rounded px-2 py-1.5 text-sm">
+        </div>
+        <div>
+          <label class="block text-xs text-gray-400 mb-1">Max Tokens</label>
+          <input id="gen-max_tokens" type="number" value="200" class="w-full bg-gray-700 rounded px-2 py-1.5 text-sm">
+        </div>
+      </div>
+      <div>
+        <label class="block text-xs text-gray-400 mb-1">Top-K</label>
+        <input id="gen-top_k" type="number" value="200" class="w-full bg-gray-700 rounded px-2 py-1.5 text-sm">
+      </div>
+    </div>
+    <div class="flex items-center gap-3">
+      <button id="btn-generate" onclick="generateText()" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium text-sm transition disabled:opacity-40 disabled:cursor-not-allowed">
+        Generate
+      </button>
+      <span id="gen-status" class="text-xs text-gray-400"></span>
+    </div>
+    <pre id="gen-output" class="hidden bg-gray-950 rounded-lg p-4 text-sm font-mono text-green-400 whitespace-pre-wrap min-h-[100px] max-h-[400px] overflow-auto"></pre>
+  </div>
+</div>
+
+<script>
+  const RUN_ID = <%= @run["id"] %>;
+  const RUN_DATASET = '<%= @run["dataset"] %>';
+  const RUN_STATUS = '<%= @run["status"] %>';
+  const MAX_ITERS = <%= max_iters %>;
+  let checkpointsData = [];
+  let iterTimes = [];
+  let lastSeenIter = 0;
+  let pollTimer = null;
+
+  // ---- Chart ----
+  const ctx = document.getElementById('loss-chart').getContext('2d');
+  const chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      datasets: [
+        {
+          label: 'Train Loss',
+          borderColor: '#3b82f6',
+          backgroundColor: 'rgba(59,130,246,0.1)',
+          data: [],
+          pointRadius: 0,
+          borderWidth: 1.5,
+          tension: 0.1
+        },
+        {
+          label: 'Val Loss',
+          borderColor: '#ef4444',
+          backgroundColor: 'rgba(239,68,68,0.1)',
+          data: [],
+          pointRadius: 2,
+          borderWidth: 2,
+          tension: 0.1
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      interaction: { mode: 'nearest', intersect: false },
+      scales: {
+        x: {
+          type: 'linear',
+          title: { display: true, text: 'Iteration', color: '#9ca3af' },
+          ticks: { color: '#6b7280' },
+          grid: { color: '#374151' }
+        },
+        y: {
+          title: { display: true, text: 'Loss', color: '#9ca3af' },
+          ticks: { color: '#6b7280' },
+          grid: { color: '#374151' }
+        }
+      },
+      plugins: {
+        legend: { labels: { color: '#d1d5db' } }
+      }
+    }
+  });
+
+  // ---- Load Stored Metrics (from SQLite) ----
+  async function loadMetrics() {
+    try {
+      const res = await fetch('/api/runs/' + RUN_ID + '/metrics');
+      if (!res.ok) return;
+      const data = await res.json();
+
+      if (data.metrics.train_loss) {
+        chart.data.datasets[0].data = data.metrics.train_loss.map(p => ({ x: p.iteration, y: p.value }));
+        const maxIter = data.metrics.train_loss[data.metrics.train_loss.length - 1];
+        if (maxIter) lastSeenIter = maxIter.iteration;
+      }
+      if (data.metrics.val_loss) {
+        chart.data.datasets[1].data = data.metrics.val_loss.map(p => ({ x: p.iteration, y: p.value }));
+      }
+      chart.update('none');
+    } catch (e) {}
+  }
+
+  // ---- Live Polling (only for the active running run) ----
+  function startLivePolling() {
+    if (pollTimer) return;
+    pollTimer = setInterval(async () => {
+      try {
+        const res = await fetch('/metrics/poll?since_iter=' + lastSeenIter);
+        if (!res.ok) return;
+        const data = await res.json();
+
+        // Only update if this is still the active run
+        if (data.state && data.state.run_id !== RUN_ID) return;
+
+        let updated = false;
+        if (data.metrics && data.metrics.train_loss) {
+          data.metrics.train_loss.forEach(p => {
+            chart.data.datasets[0].data.push({ x: p.iteration, y: p.value });
+            if (p.iteration > lastSeenIter) lastSeenIter = p.iteration;
+          });
+          updated = true;
+        }
+        if (data.metrics && data.metrics.val_loss) {
+          data.metrics.val_loss.forEach(p => {
+            chart.data.datasets[1].data.push({ x: p.iteration, y: p.value });
+          });
+          updated = true;
+        }
+        if (data.metrics && data.metrics.iter_time_ms) {
+          data.metrics.iter_time_ms.forEach(p => {
+            iterTimes.push(p.value);
+            if (iterTimes.length > 10) iterTimes.shift();
+          });
+        }
+        if (updated) chart.update('none');
+
+        // Update progress
+        if (data.state) {
+          updateLiveStats(data.state);
+        }
+      } catch (e) {}
+    }, 1000);
+  }
+
+  function updateLiveStats(state) {
+    if (state.current_iter != null) {
+      document.getElementById('stat-iter').textContent = state.current_iter;
+    }
+    if (state.best_val_loss != null) {
+      document.getElementById('stat-val-loss').textContent = state.best_val_loss.toFixed(4);
+    }
+    if (state.status) {
+      document.getElementById('stat-status').textContent = state.status;
+    }
+
+    const section = document.getElementById('progress-section');
+    const bar = document.getElementById('progress-bar');
+    const label = document.getElementById('progress-label');
+    const eta = document.getElementById('progress-eta');
+
+    if (state.status === 'running' && MAX_ITERS > 0) {
+      section.classList.remove('hidden');
+      const pct = Math.min(100, ((state.current_iter || 0) / MAX_ITERS) * 100);
+      bar.style.width = pct.toFixed(1) + '%';
+      label.textContent = (state.current_iter || 0) + ' / ' + MAX_ITERS + ' (' + pct.toFixed(0) + '%)';
+
+      if (iterTimes.length > 0) {
+        const avgMs = iterTimes.reduce((a, b) => a + b, 0) / iterTimes.length;
+        const remaining = MAX_ITERS - (state.current_iter || 0);
+        const etaSec = (remaining * avgMs) / 1000;
+        eta.textContent = etaSec > 60
+          ? '~' + Math.floor(etaSec / 60) + 'm' + Math.floor(etaSec % 60) + 's remaining'
+          : '~' + Math.floor(etaSec) + 's remaining';
+      }
+    } else {
+      section.classList.add('hidden');
+      if (state.status !== 'running' && pollTimer) {
+        clearInterval(pollTimer);
+        pollTimer = null;
+        loadCheckpoints(); // Refresh checkpoints when run completes
+      }
+    }
+  }
+
+  // ---- Checkpoints ----
+  async function loadCheckpoints() {
+    try {
+      const res = await fetch('/api/runs/' + RUN_ID + '/checkpoints');
+      const data = await res.json();
+      checkpointsData = (data.checkpoints || []).filter(c => {
+        // Verify file exists info isn't available server-side for legacy,
+        // but we still show them
+        return true;
+      });
+
+      const container = document.getElementById('checkpoints-list');
+      const select = document.getElementById('gen-checkpoint');
+
+      if (checkpointsData.length === 0) {
+        container.innerHTML = '<div class="text-xs text-gray-500">No checkpoints saved yet.</div>';
+        select.innerHTML = '<option value="">No checkpoints available</option>';
+        return;
+      }
+
+      container.innerHTML = '<div class="space-y-1">' + checkpointsData.map((cp, i) => {
+        const valLoss = cp.val_loss ? parseFloat(cp.val_loss).toFixed(4) : '--';
+        return `
+          <div class="flex items-center justify-between text-sm py-1.5 px-2 rounded hover:bg-gray-700/50">
+            <div class="flex items-center gap-3 font-mono text-xs">
+              <span class="px-1.5 py-0.5 rounded bg-gray-700 text-gray-300">${cp.suffix}</span>
+              <span class="text-gray-400">iter ${cp.iteration}</span>
+              <span class="text-gray-500">val_loss: ${valLoss}</span>
+            </div>
+            <button onclick="selectCheckpoint(${i})" class="text-xs text-purple-400 hover:text-purple-300">Generate</button>
+          </div>
+        `;
+      }).join('') + '</div>';
+
+      select.innerHTML = checkpointsData.map((cp, i) => {
+        const valLoss = cp.val_loss ? parseFloat(cp.val_loss).toFixed(4) : '--';
+        return `<option value="${i}">${cp.suffix} -- iter ${cp.iteration} (val_loss: ${valLoss})</option>`;
+      }).join('');
+    } catch (e) {
+      document.getElementById('checkpoints-list').innerHTML =
+        '<div class="text-xs text-red-400">Failed to load checkpoints</div>';
+    }
+  }
+
+  function selectCheckpoint(idx) {
+    document.getElementById('gen-checkpoint').value = idx;
+    document.getElementById('gen-checkpoint').scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+
+  // ---- Generate ----
+  async function generateText() {
+    const btn = document.getElementById('btn-generate');
+    const output = document.getElementById('gen-output');
+    const status = document.getElementById('gen-status');
+    const selectIdx = document.getElementById('gen-checkpoint').value;
+
+    if (selectIdx === '' || !checkpointsData[selectIdx]) {
+      alert('Please select a checkpoint first.');
+      return;
+    }
+
+    const cp = checkpointsData[selectIdx];
+    btn.disabled = true;
+    status.textContent = 'Loading model and generating...';
+    status.className = 'text-xs text-yellow-400';
+    output.classList.remove('hidden');
+    output.textContent = 'Loading...';
+
+    try {
+      const res = await fetch('/generate/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: document.getElementById('gen-prompt').value || '\n',
+          temperature: parseFloat(document.getElementById('gen-temperature').value),
+          max_tokens: parseInt(document.getElementById('gen-max_tokens').value),
+          top_k: parseInt(document.getElementById('gen-top_k').value),
+          checkpoint_path: cp.path,
+          dataset: RUN_DATASET
+        })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        output.textContent = data.text;
+        status.textContent = 'Done!';
+        status.className = 'text-xs text-green-400';
+      } else {
+        output.textContent = 'Error: ' + data.error;
+        status.textContent = 'Failed';
+        status.className = 'text-xs text-red-400';
+      }
+    } catch (e) {
+      output.textContent = 'Error: ' + e.message;
+      status.textContent = 'Failed';
+      status.className = 'text-xs text-red-400';
+    } finally {
+      btn.disabled = false;
+    }
+  }
+
+  // ---- Run Actions ----
+  async function stopRun() {
+    const btn = document.getElementById('btn-stop');
+    if (btn) btn.disabled = true;
+    await fetch('/train/stop', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: '{}'
+    });
+  }
+
+  async function resumeRun() {
+    const config = <%= JSON.generate(config) %>;
+    config.checkpoint_path = '<%= @run["checkpoint_path"]&.gsub("'", "\\\\'") %>';
+
+    const res = await fetch('/train/resume', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(config)
+    });
+    const data = await res.json();
+    if (res.ok) {
+      window.location = '/runs/' + data.run_id;
+    } else {
+      alert(data.error);
+    }
+  }
+
+  // ---- Init ----
+  async function init() {
+    await loadMetrics();
+    await loadCheckpoints();
+
+    if (RUN_STATUS === 'running') {
+      startLivePolling();
+    }
+  }
+
+  init();
+</script>