this repo has no description
Use latest Translator and LanguageDetector API
- No more ai namespace
- throttle it to prevent console.groupCollapse from getting nested.
+35
-40
+3
-1
src/components/translation-block.jsx
+3
-1
src/components/translation-block.jsx
···
101
101
maxAge: TRANSLATED_MAX_AGE,
102
102
});
103
103
104
+
const throttledBrowserTranslate = throttle(browserTranslate);
105
+
104
106
function TranslationBlock({
105
107
forceTranslate,
106
108
sourceLanguage,
···
126
128
if (!onTranslate) {
127
129
onTranslate = async (...args) => {
128
130
if (supportsBrowserTranslator) {
129
-
const result = await browserTranslate(...args);
131
+
const result = await throttledBrowserTranslate(...args);
130
132
if (result && !result.error) {
131
133
return result;
132
134
}
+7
-7
src/locales/en.po
+7
-7
src/locales/en.po
···
1300
1300
#: src/components/media-alt-modal.jsx:58
1301
1301
#: src/components/status.jsx:1131
1302
1302
#: src/components/status.jsx:1140
1303
-
#: src/components/translation-block.jsx:235
1303
+
#: src/components/translation-block.jsx:237
1304
1304
msgid "Translate"
1305
1305
msgstr ""
1306
1306
···
2539
2539
msgid "<0>Filtered</0>: <1>{0}</1>"
2540
2540
msgstr ""
2541
2541
2542
-
#: src/components/translation-block.jsx:192
2542
+
#: src/components/translation-block.jsx:194
2543
2543
msgid "Auto-translated from {sourceLangText}"
2544
2544
msgstr ""
2545
2545
2546
-
#: src/components/translation-block.jsx:230
2546
+
#: src/components/translation-block.jsx:232
2547
2547
msgid "Translating…"
2548
2548
msgstr ""
2549
2549
2550
-
#: src/components/translation-block.jsx:233
2550
+
#: src/components/translation-block.jsx:235
2551
2551
msgid "Translate from {sourceLangText} (auto-detected)"
2552
2552
msgstr ""
2553
2553
2554
-
#: src/components/translation-block.jsx:234
2554
+
#: src/components/translation-block.jsx:236
2555
2555
msgid "Translate from {sourceLangText}"
2556
2556
msgstr ""
2557
2557
2558
2558
#. placeholder {0}: detectedLang ?? '…'
2559
-
#: src/components/translation-block.jsx:262
2559
+
#: src/components/translation-block.jsx:264
2560
2560
msgid "Auto ({0})"
2561
2561
msgstr ""
2562
2562
2563
-
#: src/components/translation-block.jsx:275
2563
+
#: src/components/translation-block.jsx:277
2564
2564
msgid "Failed to translate"
2565
2565
msgstr ""
2566
2566
+25
-32
src/utils/browser-translator.js
+25
-32
src/utils/browser-translator.js
···
1
1
export const supportsBrowserTranslator =
2
-
'ai' in self && 'translator' in self.ai;
2
+
'LanguageDetector' in self && 'Translator' in self;
3
3
4
4
// https://developer.chrome.com/docs/ai/language-detection
5
5
export let langDetector;
6
6
if (supportsBrowserTranslator) {
7
7
(async () => {
8
8
try {
9
-
const languageDetectorCapabilities =
10
-
await self.ai.languageDetector.capabilities();
11
-
const canDetect = languageDetectorCapabilities.capabilities;
12
-
if (canDetect === 'no') {
9
+
const availability = await LanguageDetector.availability();
10
+
if (availability === 'unavailable') {
13
11
// The language detector isn't usable.
14
-
// return;
12
+
return;
15
13
}
16
-
if (canDetect === 'readily') {
14
+
if (availability === 'available') {
17
15
// The language detector can immediately be used.
18
-
langDetector = await self.ai.languageDetector.create();
16
+
langDetector = await LanguageDetector.create();
19
17
} else {
20
18
// The language detector can be used after model download.
21
-
langDetector = await self.ai.languageDetector.create({
19
+
langDetector = await LanguageDetector.create({
22
20
monitor(m) {
23
21
m.addEventListener('downloadprogress', (e) => {
24
-
console.log(
25
-
`Detector: Downloaded ${e.loaded} of ${e.total} bytes.`,
26
-
);
22
+
console.log(`Detector: Downloaded ${e.loaded * 100}%`);
27
23
});
28
24
},
29
25
});
···
51
47
};
52
48
}
53
49
}
54
-
console.groupCollapsed(
55
-
'💬 BROWSER TRANSLATE',
56
-
originalSource,
57
-
detectedSourceLanguage,
58
-
target,
59
-
);
60
-
console.log(text);
50
+
const groupLabel = `💬 BROWSER TRANSLATE ${text}`;
51
+
console.groupCollapsed(groupLabel);
52
+
console.log(originalSource, detectedSourceLanguage, target);
61
53
try {
62
-
const translatorCapabilities = await self.ai.translator.capabilities();
63
-
const canTranslate = translatorCapabilities.languagePairAvailable(
64
-
source,
65
-
target,
66
-
);
67
-
if (canTranslate === 'no') {
68
-
console.groupEnd();
54
+
const translatorCapabilities = await Translator.availability({
55
+
sourceLanguage: source,
56
+
targetLanguage: target,
57
+
});
58
+
// Note: Translator.availability() returns 'unavailable', 'downloadable', 'downloading', or 'available'.
59
+
if (translatorCapabilities === 'unavailable') {
60
+
console.groupEnd(groupLabel);
69
61
return {
70
62
error: `Unsupported language pair: ${source} -> ${target}`,
71
63
};
72
64
}
73
65
let translator;
74
-
if (canTranslate === 'readily') {
75
-
translator = await self.ai.translator.create({
66
+
if (translatorCapabilities === 'available') {
67
+
translator = await Translator.create({
76
68
sourceLanguage: source,
77
69
targetLanguage: target,
78
70
});
79
71
} else {
80
-
translator = await self.ai.translator.create({
72
+
translator = await Translator.create({
81
73
sourceLanguage: source,
82
74
targetLanguage: target,
83
75
monitor(m) {
84
76
m.addEventListener('downloadprogress', (e) => {
85
77
console.log(
86
-
`Translate ${source} -> ${target}: Downloaded ${e.loaded} of ${e.total} bytes.`,
78
+
`Translate ${source} -> ${target}: Downloaded ${e.loaded * 100}%`,
87
79
);
88
80
});
89
81
},
90
82
});
83
+
await translator.ready;
91
84
}
92
85
93
86
const content = await translator.translate(text);
94
87
console.log(content);
95
-
console.groupEnd();
88
+
console.groupEnd(groupLabel);
96
89
97
90
return {
98
91
content,
···
100
93
provider: 'browser',
101
94
};
102
95
} catch (e) {
103
-
console.groupEnd();
96
+
console.groupEnd(groupLabel);
104
97
console.error(e);
105
98
return {
106
99
error: e,