Upload 4 files

test-ui/index.html

@@ -10,7 +10,7 @@
 <div class="wrap">
   <header>
     <h1>Hy-MT2 Translation API <span class="badge">Test Arayüzü</span></h1>
-    <p class="sub">Tek istek ve toplu (batch) isteklerin yanıt sürelerini karşılaştırın.</p>
+    <p class="sub">Tek istek ve toplu (batch) isteklerin yanıt sürelerini karşılaştırın. <a href="rpgm.html">→ RPG Maker proje çevirisi</a></p>
   </header>
 
   <section class="panel" id="config-panel">

test-ui/rpgm.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>RPG Maker Çeviri</title>
+<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <h1>RPG Maker Çeviri <span class="badge">MV / MZ</span></h1>
+    <p class="sub">
+      Oyunun <code>data</code> (MZ) veya <code>www/data</code> (MV) klasörünü zip olarak yükleyin;
+      diyaloglar otomatik çıkarılır, çevrilir ve aynı yapıda geri paketlenir.
+      <a href="index.html">→ Hız testi arayüzü</a>
+    </p>
+  </header>
+
+  <section class="panel">
+    <h2>1 · Proje Yükle</h2>
+    <div class="grid">
+      <label>
+        API Base URL
+        <input type="text" id="apiBase" value="http://localhost:7860" />
+      </label>
+      <label>
+        API Key <span class="hint">(opsiyonel)</span>
+        <input type="text" id="apiKey" placeholder="X-API-Key" />
+      </label>
+      <label>
+        Hedef Dil
+        <select id="targetLang"></select>
+      </label>
+    </div>
+
+    <div id="dropZone" class="dropzone">
+      <input type="file" id="fileInput" accept=".zip" hidden />
+      <strong>Zip dosyasını buraya sürükleyin</strong>
+      <span class="hint">veya tıklayıp seçin — yalnızca data klasörü, tüm oyun değil</span>
+    </div>
+
+    <div class="actions">
+      <button id="btnUpload" class="primary" disabled>Yükle ve Analiz Et</button>
+      <span id="uploadInfo" class="hint"></span>
+    </div>
+  </section>
+
+  <section class="panel" id="projectPanel" hidden>
+    <h2>2 · Çeviri</h2>
+    <div class="stats" id="projectStats"></div>
+    <div class="actions">
+      <button id="btnStart" class="accent">Çeviriyi Başlat</button>
+      <button id="btnCancel" hidden>Durdur</button>
+      <button id="btnDownload">Çeviriyi İndir</button>
+      <button id="btnDelete">Projeyi Sil</button>
+    </div>
+
+    <div class="progress-block">
+      <div class="progress-head">
+        <span>Genel İlerleme</span>
+        <span id="overallPct">0%</span>
+      </div>
+      <div class="progress-track"><div class="progress-fill" id="overallBar"></div></div>
+      <p class="hint" id="overallNote"></p>
+    </div>
+
+    <h3 class="subhead">Dosya Bazında</h3>
+    <div id="fileList" class="file-list"></div>
+  </section>
+
+  <section class="panel" id="reviewPanel" hidden>
+    <h2>Gözden Geçirilmesi Gerekenler</h2>
+    <p class="hint">
+      Çevirisi kontrol kodlarını (<code>\C[2]</code>, <code>\N[1]</code> gibi) koruyamadığı için
+      <strong>oyuna yazılmayan</strong> satırlar — bunlar kaynak dilde bırakıldı, oyun bozulmaz.
+    </p>
+    <div class="table-wrap">
+      <table id="reviewTable">
+        <thead><tr><th>Kaynak</th><th>Yazılan</th></tr></thead>
+        <tbody></tbody>
+      </table>
+    </div>
+  </section>
+
+  <section class="panel">
+    <h2>Log</h2>
+    <pre id="log"></pre>
+  </section>
+</div>
+<script src="rpgm.js"></script>
+</body>
+</html>

test-ui/rpgm.js

@@ -0,0 +1,271 @@
+const $ = (id) => document.getElementById(id);
+const logEl = $("log");
+
+let selectedFile = null;
+let projectId = null;
+let pollTimer = null;
+
+function log(msg) {
+  logEl.textContent += `[${new Date().toLocaleTimeString()}] ${msg}\n`;
+  logEl.scrollTop = logEl.scrollHeight;
+}
+
+function apiBase() {
+  return $("apiBase").value.replace(/\/+$/, "");
+}
+
+function headers(extra) {
+  const h = Object.assign({}, extra || {});
+  const key = $("apiKey").value.trim();
+  if (key) h["X-API-Key"] = key;
+  return h;
+}
+
+async function api(path, options) {
+  const res = await fetch(apiBase() + path, options || {});
+  const text = await res.text();
+  let data = null;
+  try { data = text ? JSON.parse(text) : null; } catch (e) { /* not json */ }
+  if (!res.ok) throw new Error((data && data.detail) || text || res.status);
+  return data;
+}
+
+// ---------------------------------------------------------------- languages
+
+const FALLBACK_LANGS = { tr: "Turkish", en: "English", ja: "Japanese", de: "German", es: "Spanish" };
+
+function fillLanguages(map) {
+  const sel = $("targetLang");
+  sel.innerHTML = "";
+  for (const [code, name] of Object.entries(map)) {
+    sel.add(new Option(`${name} (${code})`, code));
+  }
+  sel.value = "tr";
+}
+
+async function loadLanguages() {
+  try {
+    fillLanguages(await api("/languages", { headers: headers() }));
+  } catch (e) {
+    fillLanguages(FALLBACK_LANGS);
+  }
+}
+
+// ------------------------------------------------------------------- upload
+
+function setFile(file) {
+  if (!file) return;
+  if (!file.name.toLowerCase().endsWith(".zip")) {
+    log("Yalnızca .zip dosyası yükleyebilirsiniz.");
+    return;
+  }
+  selectedFile = file;
+  $("uploadInfo").textContent = `${file.name} — ${(file.size / 1048576).toFixed(1)} MB`;
+  $("btnUpload").disabled = false;
+}
+
+$("dropZone").addEventListener("click", () => $("fileInput").click());
+$("fileInput").addEventListener("change", (e) => setFile(e.target.files[0]));
+["dragenter", "dragover"].forEach((ev) =>
+  $("dropZone").addEventListener(ev, (e) => {
+    e.preventDefault();
+    $("dropZone").classList.add("dragging");
+  })
+);
+["dragleave", "drop"].forEach((ev) =>
+  $("dropZone").addEventListener(ev, (e) => {
+    e.preventDefault();
+    $("dropZone").classList.remove("dragging");
+  })
+);
+$("dropZone").addEventListener("drop", (e) => setFile(e.dataTransfer.files[0]));
+
+$("btnUpload").addEventListener("click", async () => {
+  if (!selectedFile) return;
+  const body = new FormData();
+  body.append("file", selectedFile);
+  $("btnUpload").disabled = true;
+  log(`Yükleniyor: ${selectedFile.name} ...`);
+  try {
+    const st = await api("/project/upload", { method: "POST", headers: headers(), body });
+    projectId = st.id;
+    log(`Analiz tamam — ${st.engine.toUpperCase()}, ${st.total_units} benzersiz metin, ${st.total_slots} konum.`);
+    if (st.unreadable_files && st.unreadable_files.length) {
+      log(`Okunamayan dosyalar atlandı: ${st.unreadable_files.join(", ")}`);
+    }
+    render(st);
+  } catch (e) {
+    log("Yükleme hatası: " + e.message);
+  } finally {
+    $("btnUpload").disabled = false;
+  }
+});
+
+// -------------------------------------------------------------------- render
+
+function stat(num, label) {
+  return `<div class="stat"><div class="num">${num}</div><div class="label">${label}</div></div>`;
+}
+
+const STATUS_TR = {
+  ready: "hazır", translating: "çevriliyor", done: "tamamlandı",
+  cancelled: "durduruldu", failed: "hata", extracting: "çıkarılıyor",
+};
+
+function render(st) {
+  $("projectPanel").hidden = false;
+
+  $("projectStats").innerHTML = [
+    stat(st.engine ? st.engine.toUpperCase() : "-", "Motor"),
+    stat(st.total_units, "Benzersiz Metin"),
+    stat(st.total_slots, "Toplam Konum"),
+    stat(STATUS_TR[st.status] || st.status, "Durum"),
+    stat(st.review_count || 0, "İncelenecek"),
+  ].join("");
+
+  $("overallBar").style.width = st.percent + "%";
+  $("overallPct").textContent = st.percent + "%";
+  $("overallNote").textContent =
+    `${st.translated_units} / ${st.total_units} metin çevrildi` +
+    (st.target_lang ? ` — hedef: ${st.target_lang}` : "");
+
+  $("fileList").innerHTML = st.files.map((f) => `
+    <div class="file-row">
+      <div class="file-name" title="${f.file}">${f.file}</div>
+      <div class="progress-track small"><div class="progress-fill" style="width:${f.percent}%"></div></div>
+      <div class="file-count">${f.done}/${f.total}</div>
+    </div>`).join("");
+
+  const running = st.running || st.status === "translating";
+  $("btnStart").hidden = running;
+  $("btnStart").textContent = st.translated_units > 0 && st.status !== "done"
+    ? "Kaldığı Yerden Devam Et" : "Çeviriyi Başlat";
+  $("btnCancel").hidden = !running;
+
+  const samples = st.review_samples || [];
+  $("reviewPanel").hidden = samples.length === 0;
+  document.querySelector("#reviewTable tbody").innerHTML = samples
+    .map((s) => `<tr><td>${escapeHtml(s.source)}</td><td>${escapeHtml(s.translation)}</td></tr>`)
+    .join("");
+
+  if (running) startPolling(); else stopPolling();
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+}
+
+// ------------------------------------------------------------------ polling
+
+function startPolling() {
+  if (pollTimer) return;
+  pollTimer = setInterval(refresh, 2000);
+}
+function stopPolling() {
+  if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+}
+
+async function refresh() {
+  if (!projectId) return;
+  try {
+    const st = await api(`/project/${projectId}/status`, { headers: headers() });
+    const wasRunning = !$("btnCancel").hidden;
+    render(st);
+    if (wasRunning && !(st.running || st.status === "translating")) {
+      log(`Çeviri ${STATUS_TR[st.status] || st.status}. ${st.translated_units}/${st.total_units} metin.` +
+          (st.review_count ? ` ${st.review_count} satır incelenmeli.` : ""));
+    }
+  } catch (e) {
+    log("Durum alınamadı: " + e.message);
+    stopPolling();
+  }
+}
+
+// ------------------------------------------------------------------ actions
+
+$("btnStart").addEventListener("click", async () => {
+  if (!projectId) return;
+  try {
+    log("Çeviri başlatılıyor...");
+    await api(`/project/${projectId}/start`, {
+      method: "POST",
+      headers: headers({ "Content-Type": "application/json" }),
+      body: JSON.stringify({ target_lang: $("targetLang").value }),
+    });
+    startPolling();
+    refresh();
+  } catch (e) {
+    log("Başlatılamadı: " + e.message);
+  }
+});
+
+$("btnCancel").addEventListener("click", async () => {
+  try {
+    await api(`/project/${projectId}/cancel`, { method: "POST", headers: headers() });
+    log("Durdurma istendi — devam eden istekler bitince duracak.");
+  } catch (e) {
+    log("Durdurulamadı: " + e.message);
+  }
+});
+
+$("btnDownload").addEventListener("click", async () => {
+  if (!projectId) return;
+  log("Paketleniyor...");
+  try {
+    // Fetched rather than linked so the API key header can be sent, and so a
+    // failure surfaces as a log line instead of a broken download.
+    const res = await fetch(`${apiBase()}/project/${projectId}/download`, { headers: headers() });
+    if (!res.ok) throw new Error(await res.text());
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "translated.zip";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+    log(`İndirildi (${(blob.size / 1048576).toFixed(2)} MB).`);
+  } catch (e) {
+    log("İndirilemedi: " + e.message);
+  }
+});
+
+$("btnDelete").addEventListener("click", async () => {
+  if (!projectId) return;
+  try {
+    await api(`/project/${projectId}`, { method: "DELETE", headers: headers() });
+    log("Proje silindi.");
+    stopPolling();
+    projectId = null;
+    $("projectPanel").hidden = true;
+    $("reviewPanel").hidden = true;
+  } catch (e) {
+    log("Silinemedi: " + e.message);
+  }
+});
+
+// --------------------------------------------------------------- initialise
+
+if (location.protocol === "http:" || location.protocol === "https:") {
+  $("apiBase").value = location.origin;
+}
+loadLanguages();
+
+// Pick up a job that is already running - e.g. after a page reload, or after
+// the Space restarted and resumed the run on its own.
+(async () => {
+  try {
+    const list = await api("/project", { headers: headers() });
+    if (list.projects && list.projects.length) {
+      const active = list.projects.find((p) => p.running) || list.projects[0];
+      projectId = active.id;
+      render(active);
+      log(`Mevcut proje bulundu: ${active.name || active.id} (${STATUS_TR[active.status] || active.status}).`);
+    } else {
+      log("Arayüz hazır. Bir data klasörü zip'i yükleyin.");
+    }
+  } catch (e) {
+    log("Arayüz hazır. API'ye bağlanılamadı: " + e.message);
+  }
+})();

test-ui/style.css

@@ -269,3 +269,97 @@ td.time { color: var(--text-dim); white-space: nowrap; }
   white-space: pre-wrap;
   margin: 0;
 }
+
+/* --- RPG Maker project page ------------------------------------------- */
+
+.subhead {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 22px 0 10px;
+}
+
+code {
+  background: #0d1322;
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 0.85em;
+}
+
+a { color: var(--accent); }
+
+.dropzone {
+  margin-top: 16px;
+  border: 2px dashed var(--panel-border);
+  border-radius: 12px;
+  padding: 30px 20px;
+  text-align: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.dropzone:hover,
+.dropzone.dragging {
+  border-color: var(--accent);
+  background: #131b2e;
+}
+
+.progress-block { margin-top: 20px; }
+
+.progress-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  margin-bottom: 6px;
+}
+
+.progress-track {
+  background: #0d1322;
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
+  height: 20px;
+  overflow: hidden;
+}
+
+.progress-track.small { height: 12px; }
+
+.progress-fill {
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  transition: width 0.4s ease;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 340px;
+  overflow-y: auto;
+}
+
+.file-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) 2fr 70px;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.82rem;
+}
+
+.file-name {
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-count {
+  text-align: right;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}