Added Sugoi Translator support (master branch)

src/components/TranslatedMessage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { refreshScroll, translatorClient, translateTargetLanguage } from '../ts/storage';
+  import { refreshScroll, translatorClient, translateTargetLanguage, sugoiTranslatorOfflineClient, sugoiTranslatorOfflineEnabled } from '../ts/storage';
   import Icon from './common/Icon.svelte';
   import { Theme } from '../ts/chat-constants';
 
@@ -20,13 +20,32 @@
     });
   }
 
+  $: if ($sugoiTranslatorOfflineEnabled) {
+    try {
+        $sugoiTranslatorOfflineClient.translate(text).then(result => {
+        if (result !== text) {
+          translatedLanguage = $translateTargetLanguage;
+          translatedMessage = result;
+          $refreshScroll = true;
+        }
+      })
+    } catch(e) {
+      // do nothing, Sugoi Translator Offline server is not available
+    }
+  }
+
   $: showTL = Boolean(translatedMessage && !showOriginal && translatedMessage.trim() !== text.trim());
 
   $: if ($translateTargetLanguage !== translatedLanguage) {
     translatedMessage = '';
     translatedLanguage = '';
   }
 
+  $: if (!$sugoiTranslatorOfflineEnabled) {
+    translatedMessage = '';
+    translatedLanguage = '';
+  }
+
   $: translatedColor = forceTLColor === Theme.DARK
     ? 'text-translated-dark'
     : `text-translated-light ${forceTLColor === Theme.YOUTUBE ? 'dark:text-translated-dark' : ''}`;

src/components/settings/MessageTranslationSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    translateTargetLanguage
+    translateTargetLanguage, sugoiTranslatorOfflineEnabled
   } from '../../ts/storage';
   import DropdownStore from '../common/DropdownStore.svelte';
   import Checkbox from '../common/CheckboxStore.svelte';
@@ -48,6 +48,10 @@
   ];
 </script>
 
+<span on:click={scrollToBottom}>
+  <Checkbox name="Translate chat messages with Sugoi Translator Offline (experimental, only supports JP -> EN)" store={sugoiTranslatorOfflineEnabled} />
+</span>
+
 <span on:click={scrollToBottom}>
   <Checkbox name="Translate chat messages with Google Translate (experimental)" store={enabled} />
   {#if $enabled}

src/ts/storage.ts

@@ -4,11 +4,14 @@ import type { Writable } from 'svelte/store';
 import { getClient, AvailableLanguages } from 'iframe-translator';
 import type { IframeTranslatorClient, AvailableLanguageCodes } from 'iframe-translator';
 import { ChatReportUserOptions, Theme, YoutubeEmojiRenderMode } from './chat-constants';
+import { SugoiTranslatorOffline } from './sugoi-translator-offline';
 
 export const stores = webExtStores();
 
 export const hcEnabled = stores.addSyncStore('hc.enabled', true);
 export const translateTargetLanguage = stores.addSyncStore('hc.translateTargetLanguage', '' as '' | AvailableLanguageCodes);
+export const sugoiTranslatorOfflineClient = readable(new SugoiTranslatorOffline());
+export const sugoiTranslatorOfflineEnabled = stores.addSyncStore('sugoiTranslatorOffline.enabled', false);
 export const translatorClient = readable(null as (null | IframeTranslatorClient), (set) => {
   let client: IframeTranslatorClient | null = null;
   const destroyIf = (): void => {

src/ts/sugoi-translator-offline.ts

@@ -0,0 +1,27 @@
+/**
+ * Only translates from JP to EN. For it to work, you need to install and run Sugoi Translator server on your local machine
+ */
+export class SugoiTranslatorOffline {
+    translate(text: string) : Promise<string> {
+        const SugoiHost = '127.0.0.1'
+        const SugoiPort = 14366
+        const SugoiPath = ''
+
+        return fetch(`http://${SugoiHost}:${SugoiPort}/${SugoiPath}`, {
+            method: 'POST',
+            headers: {
+                'content-type': 'application/json'
+            },
+            body: JSON.stringify({
+                message: 'translate sentences',
+                content: text
+            })
+        }).then(response => {
+            if (!response.ok) {
+                throw new Error(`Error: ${response.status}`);
+            }
+
+            return response.json() as Promise<string>;
+        });
+    }
+}