matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: use types provided by google for Translator API instead

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-12-12 19:30:05 +01:00
parent 1ce3326bc1
commit 476094e49b
6 changed files with 17 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/pl-fe/package.json
View File

@ -152,6 +152,7 @@
"@testing-library/react": "^16.1.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/dom-chromium-ai": "^0.0.11",
"@types/leaflet": "^1.9.15",
"@types/lodash": "^4.17.13",
"@types/path-browserify": "^1.0.3",

4
packages/pl-fe/src/components/translate-button.tsx
View File

@ -39,7 +39,7 @@ const canRemoteTranslate = (status: ITranslateButton['status'], instance: Instan
return true;
};
type Availability = Awaited<ReturnType<typeof window.Translator.availability>>;
type Availability = Awaited<ReturnType<typeof Translator.availability>>;
const localTranslationAvailability = async (status: ITranslateButton['status'], locale: string): Promise<Availability | false> => {
if (!('Translator' in window)) return 'unavailable';
@ -49,7 +49,7 @@ const localTranslationAvailability = async (status: ITranslateButton['status'],
// TODO: support language detection
if (status.language === null || locale === status.language || status.content_map?.[locale]) return false;
return window.Translator.availability({
return Translator.availability({
sourceLanguage: status.language,
targetLanguage: locale,
});

2
packages/pl-fe/src/main.tsx
View File

@ -1,3 +1,5 @@
/// <reference path="../node_modules/@types/dom-chromium-ai/index.d.ts" />
import './polyfills';
import React from 'react';

27
packages/pl-fe/src/queries/statuses/use-local-status-translation.ts
View File

@ -5,29 +5,6 @@ import * as v from 'valibot';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useLanguageModelAvailabilityActions } from 'pl-fe/stores/language-model-availability';
interface CreateMonitor extends EventTarget {}
interface Translator {
destroy: () => void;
measureInputUsage: (input: string, options?: { signal?: AbortSignal }) => Promise<number>;
translate: (input: string, options?: { signal?: AbortSignal }) => Promise<string>;
translateStreaming: (input: string, options?: { signal?: AbortSignal }) => ReadableStream<string>;
}
declare global {
interface Window {
Translator: {
availability: (options: { sourceLanguage: string; targetLanguage: string }) => Promise<'available' | 'downloadable' | 'downloading' | 'unavailable'>;
create: (options: {
sourceLanguage: string;
targetLanguage: string;
monitor?: (monitor: CreateMonitor) => void;
signal?: AbortSignal;
}) => Promise<Translator>;
};
}
}
const useLocalStatusTranslation = (statusId: string, targetLanguage?: string) => {
const status = useAppSelector((state) => state.statuses[statusId]);
const { setLanguageModelAvailability, setLanguageModelDownloadProgress } = useLanguageModelAvailabilityActions();
@ -37,10 +14,10 @@ const useLocalStatusTranslation = (statusId: string, targetLanguage?: string) =>
return useQuery<Translation | false>({
queryKey: ['statuses', 'localTranslations', statusId, targetLanguage],
queryFn: async ({ signal }) => {
if (!window.Translator) return false;
if (!('Translator' in globalThis)) return false;
try {
const translator = await window.Translator.create({
const translator = await Translator.create({
sourceLanguage: sourceLanguage!,
targetLanguage: targetLanguage!,
monitor: (createMonitor) => {

4
packages/pl-fe/src/stores/language-model-availability.ts
View File

@ -2,10 +2,10 @@ import { create } from 'zustand';
import { mutative } from 'zustand-mutative';
type State = {
languageModelAvailability: Record<string, Awaited<ReturnType<typeof window.Translator.availability>>>;
languageModelAvailability: Record<string, Awaited<ReturnType<typeof Translator.availability>>>;
languageModelDownloadProgress: Record<string, number>;
actions: {
setLanguageModelAvailability: (sourceLanguage: string, targetLanguage: string, availability: Awaited<ReturnType<typeof window.Translator.availability>>) => void;
setLanguageModelAvailability: (sourceLanguage: string, targetLanguage: string, availability: Awaited<ReturnType<typeof Translator.availability>>) => void;
setLanguageModelDownloadProgress: (sourceLanguage: string, targetLanguage: string, event: ProgressEvent) => void;
};
}

8
pnpm-lock.yaml generated
View File

@ -452,6 +452,9 @@ importers:
'@testing-library/user-event':
specifier: ^14.5.2
version: 14.6.1(@testing-library/dom@10.4.1)
'@types/dom-chromium-ai':
specifier: ^0.0.11
version: 0.0.11
'@types/leaflet':
specifier: ^1.9.15
version: 1.9.20
@ -2451,6 +2454,9 @@ packages:
'@types/babel__traverse@7.28.0':
resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
'@types/dom-chromium-ai@0.0.11':
resolution: {integrity: sha512-Li04Mac9ic1vbX/te9re8v1010fh5YB/30dMcJLpIuIyDoT7xE/dIdg9r9UrFZLs5Ztmonb3nP7+LhPpFuHBGw==}
'@types/emscripten@1.40.1':
resolution: {integrity: sha512-sr53lnYkQNhjHNN0oJDdUm5564biioI5DuOpycufDVK7D3y+GR3oUswe2rlwY1nPNyusHbrJ9WoTyIHl4/Bpwg==}
@ -8949,6 +8955,8 @@ snapshots:
dependencies:
'@babel/types': 7.28.2
'@types/dom-chromium-ai@0.0.11': {}
'@types/emscripten@1.40.1': {}
'@types/eslint-scope@3.7.7':