Translation: posts in another language are shown in yours — "Translated from Spanish · Show original" under the words, automatic by default for posts the language guess calls foreign (Settings → Nostr → Translation switches it off and leaves a Translate link instead), and ⋯ → Translate for any post. The browser's on-device Translator does it when the language pair is already installed (desktop Chrome); otherwise the registrar's new POST /translate (names/translate.js): a cached, 4-at-a-time front for a LibreTranslate container on cs (names/compose-libretranslate.yml, v1.9.6, 32 languages; none for sw/mr/ta/te, so those readers get no offer). Links, nostr: mentions, :emoji:, #tags and long codes are never sent to the model — only the prose between them, batched in one call (src/translate-split.js, shared). Translations are remembered (coinos-translations, 300). tools/translate-test.js

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3

1 files changed, 143 insertions, 5 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 2097a5a..8596f23 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -43,7 +43,8 @@ import { hexToBytes, bytesToHex } from '@noble/hashes/utils';
 import { sha256 } from '@noble/hashes/sha256';
 import { base64urlnopad } from '@scure/base';
 import { t, getLang } from '../i18n.js';
-import { inLanguage, isMachinePost } from '../lang-guess.js';
+import { inLanguage, isMachinePost, guessLang } from '../lang-guess.js';
+import { translatePieces } from '../translate-split.js';
 import { animateZap, warmZapSound } from '../zap-animation.js';
 import { SIGNER_SILENT } from '../dm.js';
 import { cacheStorage, onCacheReady, cacheIsReady } from '../cache-store.js';
@@ -4049,6 +4050,126 @@ export function messagesFeature(ctx) {
     }
   }
 
+  // ---- translation ----------------------------------------------------------
+  // A post in a language other than the app's is shown in the app's, the way
+  // Amethyst does it: "Translated from Spanish · Show original". The
+  // browser's own on-device translator does it when it has the language pair
+  // ready (desktop Chrome); otherwise the registrar's LibreTranslate, cached
+  // there by text. Automatic for posts we can tell are foreign (a Settings
+  // switch); Translate in ⋯ for the ones the guess misses.
+  const TRANSLATE_API = 'https://names.coinos.io/translate';
+  const TRANSLATE_KEEP = 300;
+  const AUTO_TRANSLATE_KEY = 'coinos-auto-translate';
+  const autoTranslateOn = () => { try { return localStorage.getItem(AUTO_TRANSLATE_KEY) !== '0'; } catch { return true; } };
+  const translations = new Map(); // key -> { text, source } (done) — remembered
+  const translating = new Map(); // key -> 'loading' | 'fail'
+  const transOriginal = new Set(); // keys the reader flipped back to the original
+  const transAsked = new Set(); // keys the reader asked for by hand (shown even with auto off)
+  const loadTranslations = () => mergeStored(translations, 'coinos-translations');
+  loadTranslations();
+  let transFlush = null;
+  const saveTranslations = () => {
+    if (transFlush) return;
+    transFlush = setTimeout(() => {
+      transFlush = null;
+      try { cacheStorage.setItem('coinos-translations', JSON.stringify([...translations].slice(-TRANSLATE_KEEP))); } catch {}
+    }, 1000);
+  };
+  // LibreTranslate has no Swahili, Marathi, Tamil or Telugu models: readers
+  // in those get no offer rather than one that always fails
+  const TRANSLATE_NO = new Set(['sw', 'mr', 'ta', 'te']);
+  const canTranslateTo = (lang) => !!lang && !TRANSLATE_NO.has(lang);
+  const transKey = (ev) => ev.id + '|' + getLang() + '|' + (editOf(ev)?.at || 0);
+  const translatable = (ev) => !!ev && !ev.pending && (ev.kind === 1 || ev.kind === COMMENT);
+  // foreign as far as the cheap guess can tell (a script, or a clear other
+  // language); unknown is never translated unasked
+  const looksForeign = (ev) => translatable(ev) && canTranslateTo(getLang()) && !inLanguage(noteText(ev), getLang());
+  const langName = (code) => { try { return new Intl.DisplayNames([getLang()], { type: 'language' }).of(code) || code; } catch { return code; } };
+  // the translation to SHOW for this post now, or null
+  function shownTranslation(ev) {
+    if (!translatable(ev)) return null;
+    const k = transKey(ev);
+    if (transOriginal.has(k)) return null;
+    const tr = translations.get(k);
+    if (!tr) return null;
+    return transAsked.has(k) || (autoTranslateOn() && looksForeign(ev)) ? tr : null;
+  }
+  const browserTranslators = new Map(); // 'es>en' -> Promise(translator | null)
+  async function browserTranslate(text, from, to) {
+    const T = typeof self !== 'undefined' ? self.Translator : null;
+    if (!T || !from || from === to) return null;
+    const pair = from + '>' + to;
+    if (!browserTranslators.has(pair)) {
+      browserTranslators.set(pair, (async () => {
+        // only a pair already on the device: a download needs a user gesture
+        // and minutes; the registrar answers in a second meanwhile
+        if ((await T.availability({ sourceLanguage: from, targetLanguage: to })) !== 'available') return null;
+        return T.create({ sourceLanguage: from, targetLanguage: to });
+      })().catch(() => null));
+    }
+    const tr = await browserTranslators.get(pair);
+    if (!tr) return null;
+    return translatePieces(text, (qs) => Promise.all(qs.map((q) => tr.translate(q))));
+  }
+  async function translateNote(ev, { asked = false } = {}) {
+    const k = transKey(ev);
+    if (asked) { transAsked.add(k); transOriginal.delete(k); }
+    if (translations.has(k) || translating.get(k) === 'loading') { scheduleRepaint(); return; }
+    if (!asked && translating.get(k) === 'fail') return;
+    translating.set(k, 'loading');
+    scheduleRepaint();
+    const text = noteText(ev);
+    const to = getLang();
+    try {
+      let out = null;
+      const guess = guessLang(text);
+      try { const t2 = await browserTranslate(text, guess, to); if (t2) out = { text: t2, source: guess }; } catch {}
+      if (!out) {
+        const r = await fetch(TRANSLATE_API, {
+          method: 'POST', headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ text, target: to }), signal: AbortSignal.timeout(20_000),
+        });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok) throw new Error(j.error || 'translate ' + r.status);
+        out = { text: String(j.text || ''), source: j.source || null };
+      }
+      // already in the reader's language after all: nothing to show, and
+      // nothing to offer again
+      if (!out.text || out.source === to || out.text.trim() === text.trim()) {
+        translating.set(k, 'same');
+        if (asked) toast(t('translateSame'));
+      } else {
+        translations.set(k, out);
+        translating.delete(k);
+        saveTranslations();
+      }
+    } catch {
+      translating.set(k, 'fail');
+      if (asked) toast(t('translateFailed'));
+    }
+    scheduleRepaint();
+  }
+  // Under the post's words: where it was translated from, and the way back —
+  // or, for a post that reads foreign with auto off, the offer.
+  function translateLine(ev) {
+    if (!translatable(ev)) return null;
+    const k = transKey(ev);
+    const tr = shownTranslation(ev);
+    const state = translating.get(k);
+    const btn = (label, onClick) => h('button', { type: 'button', class: 'note-translate-btn', onClick: (e) => { e.stopPropagation(); onClick(); } }, label);
+    if (tr) {
+      return h('div', { class: 'note-translate small faint' },
+        h('span', {}, tr.source ? t('translatedFrom', { lang: langName(tr.source) }) : t('translated')), ' · ',
+        btn(t('translateShowOriginal'), () => { transOriginal.add(k); transAsked.delete(k); render(); }));
+    }
+    if (state === 'loading' && (transAsked.has(k) || (autoTranslateOn() && looksForeign(ev)))) {
+      return h('div', { class: 'note-translate small faint' }, t('translating'));
+    }
+    if (!looksForeign(ev) || state === 'same') return null;
+    if (autoTranslateOn() && !transOriginal.has(k) && state !== 'fail') { translateNote(ev); return null; }
+    return h('div', { class: 'note-translate small faint' }, btn(t('translateBtn'), () => translateNote(ev, { asked: true })));
+  }
+
   // Where an event about a note goes. A zap receipt is money and has its own
   // bookkeeping (see below); a like and a boost are just tallies of who.
   function noteEvent(ev) {
@@ -7373,7 +7494,7 @@ export function messagesFeature(ctx) {
       h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' },
         // one level deep only: a quote of a quote of a quote is a rabbit
         // hole, and the inner one stays a link you can follow
-        ...noteBody(noteText(ev), depth + 1, noteEmojiTags(ev))),
+        ...noteBody(shownTranslation(ev)?.text ?? noteText(ev), depth + 1, noteEmojiTags(ev))),
       ev.kind === POLL ? pollBox(ev, { interactive: false }) : null);
   }
 
@@ -8874,6 +8995,17 @@ export function messagesFeature(ctx) {
       h('div', { class: 'small faint' }, t('videoLargeHelp', { mb: Math.round(videoBudget() / 1e6) })));
   }
 
+  function translateCard() {
+    if (!canTranslateTo(getLang())) return null;
+    return h('div', { class: 'card col translate-card', style: 'gap:8px' },
+      h('h3', {}, t('translateTitle')),
+      h('label', { class: 'row gap6', style: 'align-items:center;cursor:pointer' },
+        h('input', { type: 'checkbox', class: 'auto-translate', checked: autoTranslateOn(), style: 'width:18px;height:18px;accent-color:var(--accent);margin:0',
+          onChange: (e) => { try { localStorage.setItem(AUTO_TRANSLATE_KEY, e.target.checked ? '1' : '0'); } catch {} render(); } }),
+        h('span', {}, t('translateAutoToggle', { lang: langName(getLang()) }))),
+      h('div', { class: 'small faint' }, t('translateHelp')));
+  }
+
   function moderationCard() {
     const m = mutesNow();
     const e = ui.modEdit || (ui.modEdit = { word: '' });
@@ -8997,6 +9129,11 @@ export function messagesFeature(ctx) {
         typeof navigator !== 'undefined' && navigator.share
           ? item('\u2197', t('postShare'), () => { navigator.share({ url: noteLink(ev) }).catch(() => {}); })
           : null,
+        translatable(ev) && canTranslateTo(getLang())
+          ? shownTranslation(ev)
+            ? item('\u{1F310}', t('translateShowOriginal'), () => { const k = transKey(ev); transOriginal.add(k); transAsked.delete(k); render(); })
+            : item('\u{1F310}', t('translateBtn'), () => translateNote(ev, { asked: true }))
+          : null,
         canEdit(ev) ? item('\u270e', t('postEdit'), () => { ui.postEdit = { ev, text: noteText(ev) }; render(); }) : null,
         mine && !ev.pending ? item('\u{1F5D1}', t('postDelete'), () => { ui.postDeleteAsk = ev; render(); }, true) : null,
         mine || !myPubkeys().length ? null : item('\u2630', t('listAddTo'), () => { ui.listPick = ev.pubkey; render(); }),
@@ -9204,7 +9341,8 @@ export function messagesFeature(ctx) {
           }, '\u22ef')),
         foreign
           ? h('div', { class: 'note-text small muted', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, (ev.kind === 64 ? '\u265f ' : '') + altText)
-          : h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...(ev.kind === ARTICLE ? (open ? [articleCard(ev)] : articleBody(ev)) : noteBody(noteText(ev), 0, noteEmojiTags(ev)))),
+          : h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...(ev.kind === ARTICLE ? (open ? [articleCard(ev)] : articleBody(ev)) : noteBody(shownTranslation(ev)?.text ?? noteText(ev), 0, noteEmojiTags(ev)))),
+        foreign || pending ? null : translateLine(ev),
         ev.kind === POLL ? pollBox(ev) : null,
         pending ? null : noteActions(pk, ev, { canZap }),
         !pending && whoOpen(ev.id) ? whoPanel(ev) : null));
@@ -13279,7 +13417,7 @@ export function messagesFeature(ctx) {
   if (!cacheIsReady()) onCacheReady(() => {
     profBlob = null; facelessBlob = null; relayLists = null; packMembers = null; reportsCache = null; baseline = null;
     profilesWarmed = false; warmProfiles();
-    loadHubCache(); loadVideoDims(); loadVideoInfo(); loadPreviews();
+    loadHubCache(); loadVideoDims(); loadVideoInfo(); loadPreviews(); loadTranslations();
     scheduleRepaint();
   });
 
@@ -13288,7 +13426,7 @@ export function messagesFeature(ctx) {
     // group-chat state is device state in IndexedDB: it goes with the account
     wipeCache(bases) { import('../marmot-store.js').then((m) => { for (const b of bases) m.wipeMarmot(b); }).catch(() => {}); },
     forgetAll() { wipeMediaIndex(); mediaIdx.clear(); try { caches.delete(VIDEO_THUMB_CACHE); } catch {} },
-    nostrSettingsCards() { return [relaysCard(), followHistoryCard(), moderationCard(), videosCard()]; },
+    nostrSettingsCards() { return [relaysCard(), followHistoryCard(), moderationCard(), translateCard(), videosCard()]; },
     // The app came back after being backgrounded. A phone freezes a hidden
     // tab: the relay sockets are cut and every post made in the meantime is
     // simply missing, which is why the feed used to sit there looking stale