// js/app.js
// @huggingface/transformers を使用
const MODEL_NAME = "Xenova/distilgpt2";

const promptEl = document.getElementById("prompt");
const btn = document.getElementById("generate");
const outEl = document.getElementById("output");
const tokensEl = document.getElementById("tokens");
const maxTokensEl = document.getElementById("maxTokens");
const tempEl = document.getElementById("temp");

let generator = null;

async function init() {
  outEl.textContent = "Loading library...";
  
  const { pipeline, env } = await import(
    "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2"
  ).catch((e) => {
    throw new Error("Failed to load transformers lib: " + e.message);
  });

  env.allowRemoteModels = true;
  env.useBrowserCache = true;

  outEl.textContent = "Loading model...";
  generator = await pipeline("text-generation", MODEL_NAME);
  outEl.textContent = "Model loaded. Ready.";
}

function renderToken(token) {
  const el = document.createElement("span");
  el.className = "tok";
  el.textContent = token;
  tokensEl.appendChild(el);
}

function clearOutput() {
  outEl.textContent = "";
  tokensEl.innerHTML = "";
}

async function generateText(prompt, maxNewTokens = 64, temperature = 0.7) {
  clearOutput();
  outEl.textContent = "Generating...";

  const outputs = await generator(prompt, {
    max_new_tokens: maxNewTokens,
    temperature: temperature,
    do_sample: temperature > 0,
  });

  const text = outputs[0].generated_text;
  const generatedPart = text.slice(prompt.length);
  
  outEl.textContent = generatedPart;
}

btn.addEventListener("click", async () => {
  btn.disabled = true;
  try {
    const p = promptEl.value;
    const maxTokens = Number(maxTokensEl.value) || 64;
    const temp = Number(tempEl.value) || 0.7;
    await generateText(p, maxTokens, temp);
  } catch (e) {
    console.error(e);
    outEl.textContent = "Error: " + (e.message || e);
  } finally {
    btn.disabled = false;
  }
});

init().catch((e) => {
  console.error("Init failed", e);
  outEl.textContent = "Initialization failed: " + (e.message || e);
});