diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/cache-store.js | 2 | ||||
| -rw-r--r-- | src/features/messages.js | 148 | ||||
| -rw-r--r-- | src/i18n.js | 10 | ||||
| -rw-r--r-- | src/style.css | 7 | ||||
| -rw-r--r-- | src/translate-split.js | 35 |
5 files changed, 196 insertions, 6 deletions
diff --git a/src/cache-store.js b/src/cache-store.js index 1257a04..4d2ed1e 100644 --- a/src/cache-store.js +++ b/src/cache-store.js @@ -36,7 +36,7 @@ const GLOBAL_KEYS = new Set([ // (btc-wallet-note-threads stays: a server-rendered note page seeds it // before boot has waited for anything) 'coinos-mod-baseline', 'coinos-community-directory-v1', - 'coinos-link-previews', 'coinos-video-info', 'coinos-video-dims', 'btc-wallet-search-profiles', + 'coinos-link-previews', 'coinos-translations', 'coinos-video-info', 'coinos-video-dims', 'btc-wallet-search-profiles', ]); export const isCacheKey = (k) => typeof k === 'string' && (GLOBAL_KEYS.has(k) || WALLET_RE.test(k)); 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 diff --git a/src/i18n.js b/src/i18n.js index 7f3dfc0..a1b0a79 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -436,6 +436,16 @@ const STR = { postUnmuteThread: 'Unmute this thread', postReport: 'Report…', postEdit: 'Edit', + translateBtn: 'Translate', + translating: 'Translating…', + translated: 'Translated', + translatedFrom: 'Translated from {lang}', + translateShowOriginal: 'Show original', + translateSame: 'This post is already in your language', + translateFailed: 'Couldn’t translate this post', + translateTitle: 'Translation', + translateAutoToggle: 'Translate posts into {lang} automatically', + translateHelp: 'Posts that look like they’re in another language are shown in yours, with a way back to the original. Translations come from your browser when it can, otherwise from coinos’s own LibreTranslate server — posts are public, but the text passes through it.', postEditTitle: 'Edit post', postEditHelp: 'The edit is published beside the original (kind 1010). Apps that read edits show the new text; others keep showing what you first wrote.', postEditedTag: 'edited', diff --git a/src/style.css b/src/style.css index 93a7da7..c80f8e0 100644 --- a/src/style.css +++ b/src/style.css @@ -1610,3 +1610,10 @@ body::after { padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; } .wallet-side-amount { font-size: 24px; font-weight: 700; letter-spacing: -.01em; } +/* "Translated from Spanish · Show original" under a post's words */ +.note-translate { margin-top: 4px; } +.note-translate-btn { + background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--muted); + cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 0; +} +.note-translate-btn:hover { color: var(--ink); } diff --git a/src/translate-split.js b/src/translate-split.js new file mode 100644 index 0000000..78833da --- /dev/null +++ b/src/translate-split.js @@ -0,0 +1,35 @@ +// What must come back from a translation exactly as it went in: links, +// nostr: mentions, custom emoji shortcodes, hashtags, @handles, invoices and +// other long codes. Translation models mangle them ("https: / / example.com +// / fot.jpg"), so only the prose between them is translated and the text is +// put back together around the untouched tokens. Shared by the registrar +// (names/translate.js) and the browser's own translator (messages.js). +const KEEP = /(https?:\/\/\S+|nostr:[a-z0-9]+|:[a-z0-9_+-]{1,40}:|#[\p{L}\p{N}_]+|@[\w.-]+(?:@[\w.-]+)?|\b(?:ln|lightning:|cashu|bitcoin:|nevent|npub|nprofile|note|naddr)[a-z0-9]{20,}|\S{40,})/giu; + +export function splitProse(text) { + const parts = []; + let last = 0; + for (const m of String(text || '').matchAll(KEEP)) { + if (m.index > last) parts.push({ prose: text.slice(last, m.index) }); + parts.push({ keep: m[0] }); + last = m.index + m[0].length; + } + if (last < text.length) parts.push({ prose: text.slice(last) }); + return parts; +} +// a piece worth translating: has words, not just spaces and punctuation +export const hasWords = (s) => /\p{L}{2,}/u.test(s || ''); + +// Translate the prose pieces (one call for all of them) and reassemble. +// Each piece keeps its own leading/trailing whitespace — line breaks matter. +export async function translatePieces(text, translateMany) { + const parts = splitProse(text); + const prose = parts.filter((p) => p.prose && hasWords(p.prose)); + if (!prose.length) return text; + const outs = await translateMany(prose.map((p) => p.prose.trim())); + prose.forEach((p, i) => { + const lead = p.prose.match(/^\s*/)[0], trail = p.prose.match(/\s*$/)[0]; + p.out = lead + String(outs[i] ?? p.prose.trim()) + trail; + }); + return parts.map((p) => p.keep ?? p.out ?? p.prose).join(''); +} |