From 476094e49b46584aaa53f1969d23c54e1979c57d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Fri, 12 Dec 2025 19:30:05 +0100 Subject: [PATCH] pl-fe: use types provided by google for Translator API instead MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- packages/pl-fe/package.json | 1 + .../pl-fe/src/components/translate-button.tsx | 4 +-- packages/pl-fe/src/main.tsx | 2 ++ .../statuses/use-local-status-translation.ts | 27 ++----------------- .../src/stores/language-model-availability.ts | 4 +-- pnpm-lock.yaml | 8 ++++++ 6 files changed, 17 insertions(+), 29 deletions(-) diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json index 3dd84c3f4..fe5f86785 100644 --- a/packages/pl-fe/package.json +++ b/packages/pl-fe/package.json @@ -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", diff --git a/packages/pl-fe/src/components/translate-button.tsx b/packages/pl-fe/src/components/translate-button.tsx index 0d896c8bf..4249b6c8e 100644 --- a/packages/pl-fe/src/components/translate-button.tsx +++ b/packages/pl-fe/src/components/translate-button.tsx @@ -39,7 +39,7 @@ const canRemoteTranslate = (status: ITranslateButton['status'], instance: Instan return true; }; -type Availability = Awaited>; +type Availability = Awaited>; const localTranslationAvailability = async (status: ITranslateButton['status'], locale: string): Promise => { 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, }); diff --git a/packages/pl-fe/src/main.tsx b/packages/pl-fe/src/main.tsx index 6ac316fd9..2b9c27e01 100644 --- a/packages/pl-fe/src/main.tsx +++ b/packages/pl-fe/src/main.tsx @@ -1,3 +1,5 @@ +/// + import './polyfills'; import React from 'react'; diff --git a/packages/pl-fe/src/queries/statuses/use-local-status-translation.ts b/packages/pl-fe/src/queries/statuses/use-local-status-translation.ts index a9038993e..3f6ad4704 100644 --- a/packages/pl-fe/src/queries/statuses/use-local-status-translation.ts +++ b/packages/pl-fe/src/queries/statuses/use-local-status-translation.ts @@ -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; - translate: (input: string, options?: { signal?: AbortSignal }) => Promise; - translateStreaming: (input: string, options?: { signal?: AbortSignal }) => ReadableStream; -} - -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; - }; - } -} - 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({ 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) => { diff --git a/packages/pl-fe/src/stores/language-model-availability.ts b/packages/pl-fe/src/stores/language-model-availability.ts index a2aae99d5..eca92d20c 100644 --- a/packages/pl-fe/src/stores/language-model-availability.ts +++ b/packages/pl-fe/src/stores/language-model-availability.ts @@ -2,10 +2,10 @@ import { create } from 'zustand'; import { mutative } from 'zustand-mutative'; type State = { - languageModelAvailability: Record>>; + languageModelAvailability: Record>>; languageModelDownloadProgress: Record; actions: { - setLanguageModelAvailability: (sourceLanguage: string, targetLanguage: string, availability: Awaited>) => void; + setLanguageModelAvailability: (sourceLanguage: string, targetLanguage: string, availability: Awaited>) => void; setLanguageModelDownloadProgress: (sourceLanguage: string, targetLanguage: string, event: ProgressEvent) => void; }; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7b47a7236..b9993bf35 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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':