feat: support i18n

buxuku · Oct 10, 2024 · 8fa8722 · 8fa8722
1 parent a6a0000
commit 8fa8722
Show file tree

Hide file tree

Showing 22 changed files with 991 additions and 833 deletions.
diff --git a/main/background.ts b/main/background.ts
@@ -33,10 +33,10 @@ if (isProd) {
   });
 
   if (isProd) {
-    await mainWindow.loadURL(`app://./${userLanguage}/home`);
+    await mainWindow.loadURL(`app://./${userLanguage}/home/`);
   } else {
     const port = process.argv[2];
-    await mainWindow.loadURL(`http://localhost:${port}/${userLanguage}/home`);
+    await mainWindow.loadURL(`http://localhost:${port}/${userLanguage}/home/`);
     mainWindow.webContents.openDevTools();
   }
 

diff --git a/main/helpers/storeManager.ts b/main/helpers/storeManager.ts
@@ -72,7 +72,10 @@ export function setupStoreHandlers() {
   });
 
   ipcMain.handle('getUserConfig', async () => {
-    return store.get('userConfig');
+    const storedConfig = store.get('userConfig');
+    // 合并默认配置和存储的配置
+    const mergedConfig = { ...defaultUserConfig, ...storedConfig };
+    return mergedConfig;
   });
 
   ipcMain.handle('setSettings', async (event, settings) => {

diff --git a/main/helpers/systemInfoManager.ts b/main/helpers/systemInfoManager.ts
@@ -31,19 +31,20 @@ export function setupSystemInfoManager(mainWindow: BrowserWindow) {
   ipcMain.handle('downloadModel', async (event, { model, source }) => {
     downloadingModels.add(model);
     const onProcess = (data) => {
-      const match = data?.match(/(\d+)%/);
+      const match = data?.match?.(/(\d+)/);
+      console.log(match, model, 'match');
       if (match) {
         event.sender.send('downloadProgress', model, +match[1]);
       }
-      if (data?.includes('Done') || data?.includes('main')) {
+      if (data?.includes?.('Done') || data?.includes?.('main')) {
         event.sender.send('downloadProgress', model, 100);
       }
     };
     try {
       await downloadModelSync(model?.toLowerCase(), source, onProcess);
       downloadingModels.delete(model);
     } catch (error) {
-      event.sender.send('message', '下载失败，请切换下载源重试');
+      event.sender.send('message', 'download error, please try again');
       downloadingModels.delete(model);
       return false;
     }

diff --git a/main/helpers/translate.ts b/main/helpers/translate.ts
@@ -28,6 +28,7 @@ export default async function translate(
     sourceLanguage,
     targetLanguage,
   } = formData || {};
+  console.log(formData, 'formData');
 
   const renderContentTemplate = contentTemplate[translateContent];
   const proof = provider;

diff --git a/main/helpers/utils.ts b/main/helpers/utils.ts
@@ -40,7 +40,7 @@ export function runCommand(command, args, onProcess = undefined) {
     child.on("close", (code) => {
       if (code !== 0) {
         reject(
-          new Error(`${command} ${args.join(" ")} 进程退出，退出码 ${code}`),
+          new Error(`${command} ${args.join(" ")} process error ${code}`),
         );
       } else {
         resolve(true);
@@ -77,8 +77,8 @@ function throttle(func, limit) {
 export const defaultUserConfig = {
     sourceLanguage: 'en',
     targetLanguage: 'zh',
-    targetSrtSaveFileName: '${fileName}.${targetLanguage}',
-    sourceSrtSaveFileName: '${fileName}.${sourceLanguage}',
+    customTargetSrtFileName: '${fileName}.${targetLanguage}',
+    customSourceSrtFileName: '${fileName}.${sourceLanguage}',
     model: 'tiny',
     translateProvider: 'baidu',
     translateContent: 'onlyTranslate',

diff --git a/main/helpers/whisper.ts b/main/helpers/whisper.ts
@@ -4,8 +4,8 @@ import path from "path";
 import fs from "fs";
 import git from "isomorphic-git";
 import http from "isomorphic-git/http/node";
-import replaceModelSource from "./model-source";
-import { isDarwin, isWin32, runCommand } from "./utils";
+import { isWin32 } from "./utils";
+import { BrowserWindow, DownloadItem } from 'electron';
 
 export const getPath = (key?: string) => {
   const userDataPath = app.getPath("userData");
@@ -120,40 +120,57 @@ export const deleteModel = async (model) => {
   });
 };
 
-export const downloadModelSync = async (model, source, onProcess) => {
+export const downloadModelSync = async (model: string, source: string, onProcess: (message: string) => void) => {
   const modelsPath = getPath("modelsPath");
   const modelPath = path.join(modelsPath, `ggml-${model}.bin`);
-  if (fs.existsSync(modelPath)) return;
-  if (!checkWhisperInstalled()) {
-    throw Error("whisper.cpp 未下载，请先下载 whisper.cpp");
+
+  if (fs.existsSync(modelPath)) {
+    return;
   }
-  try {
-    let downShellPath;
-    let shell: string;
-    let args = [];
-    if (isDarwin()) {
-      downShellPath = path.join(modelsPath, "download-ggml-model.sh");
-      shell = "bash";
-      args = [`${downShellPath}`, `${model}`];
-    } else if (isWin32()) {
-      downShellPath = path.join(modelsPath, "download-ggml-model.cmd");
-      shell = "cmd";
-      args = [`/c`, `${downShellPath}`, `${model}`];
-    } else {
-      throw Error("platform does not support! ");
-    }
-    await replaceModelSource(`${downShellPath}`, source);
-    console.log("完成模型下载地址替换", model);
-    console.log("正在安装 whisper.cpp 模型");
-    try {
-      await runCommand(`${shell}`, args, (data) => onProcess(data));
-    } catch (error) {
-      await deleteModel(model);
-      throw error;
-    }
-  } catch (error) {
-    throw error;
+  if (!checkWhisperInstalled()) {
+    throw Error("whisper.cpp 未安装，请先安装 whisper.cpp");
   }
+
+  const url = `https://${source === 'huggingface' ? 'huggingface.co' : 'hf-mirror.com'}/ggerganov/whisper.cpp/resolve/main/ggml-${model}.bin`;
+
+  return new Promise((resolve, reject) => {
+    const win = new BrowserWindow({ show: false });
+
+    const willDownloadHandler = (event, item: DownloadItem) => {
+      if (item.getFilename() !== `ggml-${model}.bin`) {
+        return; // 忽略不匹配的下载项
+      }
+
+      item.setSavePath(modelPath);
+
+      item.on('updated', (event, state) => {
+        if (state === 'progressing' && !item.isPaused()) {
+          const percent = item.getReceivedBytes() / item.getTotalBytes() * 100;
+          onProcess(`${model}: ${percent.toFixed(2)}%`);
+        }
+      });
+
+      item.once('done', (event, state) => {
+        if (state === 'completed') {
+          onProcess(`${model} 完成`);
+          cleanup();
+          resolve(1);
+        } else {
+          fs.unlink(modelPath, () => {});
+          cleanup();
+          reject(new Error(`${model} download error: ${state}`));
+        }
+      });
+    };
+
+    const cleanup = () => {
+      win.webContents.session.removeListener('will-download', willDownloadHandler);
+      win.destroy();
+    };
+
+    win.webContents.session.on('will-download', willDownloadHandler);
+    win.webContents.downloadURL(url);
+  });
 };
 
 export async function checkOpenAiWhisper(): Promise<boolean> {

diff --git a/package.json b/package.json
@@ -55,10 +55,10 @@
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.52",
     "autoprefixer": "^10.4.19",
-    "electron": "^29.3.0",
+    "electron": "^30.1.0",
     "electron-builder": "^24.13.3",
-    "next": "^13.5.6",
-    "nextron": "^8.15.0",
+    "next": "^14.2.4",
+    "nextron": "^9.1.0",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/renderer/components/DownModel.tsx b/renderer/components/DownModel.tsx
@@ -11,8 +11,8 @@ const DownModel: FC<IProps> = (props) => {
   const [loading, setLoading] = React.useState(false);
   const [progress, setProgress] = React.useState(0);
   useEffect(() => {
-    window?.ipc?.on("downloadProgress", (model, progress: number) => {
-      if (model === modelName) {
+    window?.ipc?.on("downloadProgress", (model: string, progress: number) => {
+      if (model?.toLowerCase() === modelName?.toLowerCase()) {
         setProgress(progress);
         setLoading(progress < 100);
         if (progress >= 100) {

diff --git a/renderer/components/DownModelLink.tsx b/renderer/components/DownModelLink.tsx
@@ -1,5 +1,5 @@
-import { useTranslation } from "next-i18next";
-import React, { FC } from "react";
+import { useTranslation } from 'next-i18next';
+import React, { FC } from 'react';
 
 interface IProps {
   loading?: boolean;
@@ -10,16 +10,18 @@ const DownModelLink: FC<IProps> = ({ loading, progress, handleDownModel }) => {
   const { t } = useTranslation('common');
   return (
     <span className="inline-block">
-      {t('modelNotDownloaded')}
       {loading ? (
         `${t('downloading')} ${progress}%...`
       ) : (
-        <a
-          className="cursor-pointer text-blue-500"
-          onClick={() => handleDownModel()}
-        >
-          {t('downloadNow')}
-        </a>
+        <>
+          {t('modelNotDownloaded')}
+          <a
+            className="cursor-pointer text-blue-500 ml-4"
+            onClick={() => handleDownModel()}
+          >
+            {t('downloadNow')}
+          </a>
+        </>
       )}
     </span>
   );

diff --git a/renderer/components/Guide.tsx b/renderer/components/Guide.tsx
@@ -93,7 +93,7 @@ const Guide: FC<IProps> = ({ systemInfo, updateSystemInfo }) => {
   };
 
   const changeLanguage = (lang: string) => {
-    router.push(router.pathname, router.asPath, { locale: lang });
+    router.push(`/${lang}/home/`);
     window?.ipc?.invoke('setSettings', { language: lang });
   };
 

diff --git a/renderer/components/Layout.tsx b/renderer/components/Layout.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from 'next-i18next';
 
 
 const Layout = ({ children }) => {
-  const { t } = useTranslation('common');
+  const { t, i18n: { language: locale } } = useTranslation('common');
   const { asPath } = useRouter();
   useEffect(() => {
     window?.ipc?.on('message', (res: string) => {
@@ -41,7 +41,7 @@ const Layout = ({ children }) => {
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Link href="/home">
+                <Link href={`/${locale}/home`}>
                   <Button
                     variant="ghost"
                     size="icon"
@@ -60,7 +60,7 @@ const Layout = ({ children }) => {
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Link href="/modelsControl">
+                <Link href={`/${locale}/modelsControl`}>
                   <Button
                     variant="ghost"
                     size="icon"
@@ -79,7 +79,7 @@ const Layout = ({ children }) => {
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Link href="/translateControl">
+                <Link href={`/${locale}/translateControl`}>
                   <Button
                     variant="ghost"
                     size="icon"
@@ -98,7 +98,7 @@ const Layout = ({ children }) => {
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Link href="/settings">
+                <Link href={`/${locale}/settings`}>
                   <Button
                     variant="ghost"
                     size="icon"

diff --git a/renderer/components/Models.tsx b/renderer/components/Models.tsx
@@ -32,7 +32,7 @@ const Models: FC<SelectPrimitive.SelectProps & IProps> = (props) => {
                   {item.name}
                   {!props?.modelsInstalled?.includes(
                     item.name?.toLowerCase()
-                  ) && `(${t('notInstalled')})`}
+                  ) && `(${t('modelNotDownloaded')})`}
                 </p>
                 <p className="text-xs" data-description>
                   {t(item.desc.key)} {item.desc.size}

diff --git a/renderer/components/TaskConfigForm.tsx b/renderer/components/TaskConfigForm.tsx
@@ -68,11 +68,12 @@ const TaskConfigForm = ({
                       modelsInstalled={systemInfo.modelsInstalled}
                     />
                   </FormControl>
-                  {!isInstalledModel && (
+                  {!isInstalledModel && field.value && (
                     <FormDescription>
                       <DownModel
-                        modelName={formData.model}
+                        modelName={field.value}
                         callBack={updateSystemInfo}
+                        key={field.value}
                       >
                         <DownModelLink />
                       </DownModel>

diff --git a/renderer/lib/get-static.ts b/renderer/lib/get-static.ts
@@ -0,0 +1,33 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import i18next from '../../next-i18next.config.js'
+
+export function getI18nPaths() {
+  return ['en', 'zh'].map((locale) => ({
+    params: {
+      locale,
+    },
+  }))
+}
+
+export function getStaticPaths() {
+  return {
+    fallback: false,
+    paths: getI18nPaths(),
+  }
+}
+
+export async function getI18nProperties(context, namespaces = ['common']) {
+  const locale = context?.params?.locale ?? i18next.i18n.defaultLocale
+  return {
+    ...(await serverSideTranslations(locale, namespaces)),
+  }
+}
+
+export function makeStaticProperties(namespaces = []) {
+  return async function (context) {
+    return {
+      props: await getI18nProperties(context, namespaces),
+    }
+  }
+}
diff --git a/renderer/next-env.d.ts b/renderer/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/renderer/next.config.js b/renderer/next.config.js
@@ -1,12 +1,12 @@
 /** @type {import('next').NextConfig} */
-const { i18n } = require('../next-i18next.config')
 
 module.exports = {
-  i18n,
   trailingSlash: true,
   images: {
     unoptimized: true,
   },
+  output: 'export',
+  distDir: process.env.NODE_ENV === 'production' ? '../app' : '.next',
   webpack: (config) => {
     return config
   },