Skip to content

Commit

Permalink
✨ feat(i18n): Support i18n and welcome PR contributions
Browse files Browse the repository at this point in the history
  • Loading branch information
canisminor1990 committed Jun 29, 2023
1 parent fe32de2 commit a61f3b4
Show file tree
Hide file tree
Showing 41 changed files with 1,060 additions and 368 deletions.
1 change: 1 addition & 0 deletions README-zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
- [x] 🎛️ 高定制侧边栏,左侧为快捷设置侧边栏,右侧为模型侧边栏
- [x] 🖼️ 可调节画板比例,使生成图像始终置顶
- [x] 📱 移动端友好,针对手机屏幕完成部分优化
- [x] 🇨🇳 支持 i18n 并欢迎提交 [PR](https://github.com/canisminor1990/sd-webui-lobe-theme/tree/main/src/i18n/lang) 贡献
- [ ] 📝 语法高亮的 Prompt 输入框
- [ ] 🆗 i18n 多语言支持

Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [
- [x] 🎛️ Highly customizable sidebar, with a quick settings sidebar on the left and a model sidebar on the right
- [x] 🖼️ Adjustable canvas ratio, ensuring that generated images are always displayed at the top
- [x] 📱 Mobile-friendly, with partial optimization for mobile screens
- [x] 🇨🇳 Support i18n and welcome [PR](https://github.com/canisminor1990/sd-webui-lobe-theme/tree/main/src/i18n/lang) contributions
- [ ] 📝 Syntax highlighting in the prompt input box
- [ ] 🆗 Multilingual support with i18n

Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
"eslint": "^8",
"fast-deep-equal": "^3",
"husky": "^8",
"i18next": "^23",
"lightningcss": "^1",
"lint-staged": "^13",
"lodash-es": "^4",
Expand All @@ -95,6 +96,7 @@
"react": "^18",
"react-dom": "^18",
"react-helmet": "^6",
"react-i18next": "^13",
"react-layout-kit": "^1",
"react-rnd": "^10",
"react-tag-input": "^6",
Expand Down
76 changes: 40 additions & 36 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { memo, useEffect, useState } from 'react';
import { StrictMode, Suspense, memo, useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import { shallow } from 'zustand/shallow';

Expand All @@ -7,6 +7,8 @@ import Index from '@/pages';
import Loading from '@/slots/Loading';
import { useAppStore } from '@/store';

import './i18n/config';

const App = memo(() => {
const [loading, setLoading] = useState(true);
const setCurrentTab = useAppStore((st) => st.setCurrentTab, shallow);
Expand All @@ -22,41 +24,43 @@ const App = memo(() => {
}, []);

return (
<>
<Helmet>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/apple-touch-icon.png"
rel="apple-touch-icon"
sizes="180x180"
/>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-32x32.png"
rel="icon"
sizes="32x32"
type="image/png"
/>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-16x16.png"
rel="icon"
sizes="16x16"
type="image/png"
/>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/site.webmanifest"
rel="manifest"
/>
<link
color="#000000"
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/safari-pinned-tab.svg"
rel="mask-icon"
/>
<meta content="LobeHub" name="apple-mobile-web-app-title" />
<meta content="LobeHub" name="application-name" />
<meta content="#000000" name="msapplication-TileColor" />
<meta content="#000000" name="theme-color" />
</Helmet>
<Layout>{loading ? <Loading /> : <Index />}</Layout>
</>
<StrictMode>
<Suspense fallback={<Loading />}>
<Helmet>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/apple-touch-icon.png"
rel="apple-touch-icon"
sizes="180x180"
/>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-32x32.png"
rel="icon"
sizes="32x32"
type="image/png"
/>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-16x16.png"
rel="icon"
sizes="16x16"
type="image/png"
/>
<link
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/site.webmanifest"
rel="manifest"
/>
<link
color="#000000"
href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/safari-pinned-tab.svg"
rel="mask-icon"
/>
<meta content="LobeHub" name="apple-mobile-web-app-title" />
<meta content="LobeHub" name="application-name" />
<meta content="#000000" name="msapplication-TileColor" />
<meta content="#000000" name="theme-color" />
</Helmet>
<Layout>{loading ? <Loading /> : <Index />}</Layout>
</Suspense>
</StrictMode>
);
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar/SidebarBody.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { memo } from 'react';

import { DivProps } from '@/types/index';
import { type DivProps } from '@/types';

import { useStyles } from './style';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar/SidebarContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { memo } from 'react';

import { DivProps } from '@/types/index';
import { type DivProps } from '@/types';

import { useStyles } from './style';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar/SidebarFooter.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { memo } from 'react';

import { DivProps } from '@/types/index';
import { type DivProps } from '@/types';

import { useStyles } from './style';

Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar/SidebarHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ActionIcon } from '@lobehub/ui';
import { PanelLeft, Pin, PinOff } from 'lucide-react';
import { memo } from 'react';

import { DivProps } from '@/types/index';
import { type DivProps } from '@/types';

import { useStyles } from './style';

Expand Down
31 changes: 31 additions & 0 deletions src/i18n/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './lang/en';
import ja_JP from './lang/ja_JP';
import ko_KR from './lang/ko_KR';
import zh_CN from './lang/zh_CN';
import zh_HK from './lang/zh_HK';

i18next.use(initReactI18next).init({
debug: process.env.NODE_ENV === 'development',
fallbackLng: 'en',
lng: 'en',
resources: {
en: {
translation: en,
},
ja_JP: {
translation: ja_JP,
},
ko_KR: {
translation: ko_KR,
},
zh_CN: {
translation: zh_CN,
},
zh_HK: {
translation: zh_HK,
},
},
});
20 changes: 20 additions & 0 deletions src/i18n/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { type SelectProps } from 'antd';

export const i18nOptions: SelectProps['options'] = [
{
label: 'English',
value: 'en',
},
{
label: '简体中文',
value: 'zh_CN',
},
{
label: '繁體中文',
value: 'zh_HK',
},
{
label: '日本語',
value: 'ja_JP',
},
];
85 changes: 85 additions & 0 deletions src/i18n/lang/en.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
const translation = {
community: 'Community',
custom: 'Custom',
extraNetwork: 'Extra Network',
feedback: 'Feedback',
fixed: 'Fixed',
float: 'Float',
help: 'Help',
kitchen: 'Kitchen',
loadPrompt: 'Load Prompt',
lobe: 'Lobe',
moreProducts: 'More Products',
negative: 'Negative',
positive: 'Positive',
quickSetting: 'Quick Setting',
resizable: 'Resizable',
resources: 'Resources',
scroll: 'Scroll',
setPrompt: 'Set Prompt',
setting: 'Setting',
settingButtomReset: 'Reset',
settingButtomSubmit: 'Apply and Restart Interface',
settingCustomLogo: 'Custom Logo',
settingCustomLogoDesc: 'Support URL / Base64 / Emoji symbols',
settingCustomTitle: 'Custom Title',
settingCustomTitleDesc: 'Custom Logo Title',
settingExtraNetworkSidebarDefaultCardSize: 'Model Cover Size',
settingExtraNetworkSidebarDefaultCardSizeDesc: 'Default value of model cover size when starting',
settingExtraNetworkSidebarDefaultExpand: 'Default Expand',
settingExtraNetworkSidebarDefaultExpandDesc:
'Whether to expand the sidebar by default when starting',
settingExtraNetworkSidebarDefaultWidth: 'Default Width',
settingExtraNetworkSidebarDefaultWidthDesc: 'Default width of the sidebar when starting',
settingExtraNetworkSidebarDisplayMode: 'Display Mode',
settingExtraNetworkSidebarDisplayModeDesc:
'Fixed as grid mode for constant display, auto-expand when the mouse moves to the side in floating mode',
settingExtraNetworkSidebarEnable: 'Enable',
settingExtraNetworkSidebarEnableDesc: 'Enable the extra network sidebar on the right side',
settingGroupExtraNetworkSidebar: 'Extra Network Sidebar',
settingGroupLayout: 'Layout Settings',
settingGroupPromotTextarea: 'Prompt Textbox',
settingGroupQuickSettingSidebar: 'Quick Setting Sidebar',
settingGroupTheme: 'Theme Settings',
settingHideFooter: 'Hide Footer',
settingHideFooterDesc:
'Hide the theme footer and only display the default footer of stable diffusion webui',
settingLanguage: 'Language',
settingLanguageDesc: 'Lobe Theme language',
settingLogoPreview: 'Preview',
settingLogoType: 'Logo Type',
settingLogoTypeDesc: 'Logo Type',
settingNeutralColor: 'Neutral Color',
settingNeutralColorDesc:
'Customize different shades of gray with different color tendencies, the second one is the original Kitchen neutral color',
settingPrimaryColor: 'Primary Color',
settingPrimaryColorDesc:
'Custom primary color, the second one is the original Kitchen theme color',
settingPromptDisplayMode: 'Display Mode',
settingPromptDisplayModeDesc: 'Fixed height or auto height with draggable resize support',
settingPromptEditor: 'Prompt Editor',
settingPromptEditorDesc: 'Provide a simple prompt editor at the top of the quick setting sidebar',
settingQuickSettingSidebarDefaultExpand: 'Default Expand',
settingQuickSettingSidebarDefaultExpandDesc:
'Whether to expand the sidebar by default when starting',
settingQuickSettingSidebarDefaultWidth: 'Default Width',
settingQuickSettingSidebarDefaultWidthDesc: 'Default width of the sidebar when starting',
settingQuickSettingSidebarDisplayMode: 'Display Mode',
settingQuickSettingSidebarDisplayModeDesc:
'Fixed as grid mode for constant display, auto-expand when the mouse moves to the side in floating mode',
settingQuickSettingSidebarEnable: 'Enable',
settingQuickSettingSidebarEnableDesc: 'Enable the quick setting sidebar on the left side',
settingReduceAnimation: 'Reduce Animation',
settingReduceAnimationDesc:
'Reduce the blur effect and background flow color, which can improve smoothness and save CPU usage',
settingSplitPreviewer: 'Split Previewer',
settingSplitPreviewerDesc:
'Put the prompt input box on the left and the generate button on the right, ensuring that the generated image is always displayed at the top when scrolling (experimental)',
settingSvgIcons: 'Use SVG Icons',
settingSvgIconsDesc: 'Replace all Emoji icons in stable diffusion webui with SVG icons globally',
switchTheme: 'Switch Light/Dark Theme',
themeFeedback: 'Theme Feedback',
themeSetting: 'Theme Settings',
};

export default translation;
84 changes: 84 additions & 0 deletions src/i18n/lang/ja_JP.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import type { Translation } from '@/types';

const translation: Translation = {
community: 'コミュニティ',
custom: 'カスタム',
extraNetwork: '追加ネットワーク',
feedback: 'フィードバック',
fixed: '固定',
float: 'フロート',
help: 'ヘルプ',
kitchen: 'キッチン',
loadPrompt: 'プロンプトをロード',
lobe: 'ローブ',
moreProducts: 'その他の製品',
negative: 'ネガティブなヒント',
positive: 'ポジティブなヒント',
quickSetting: 'クイック設定',
resizable: 'リサイズ可能',
resources: '関連リソース',
scroll: 'スクロール',
setPrompt: 'プロンプトを設定',
setting: '設定',
settingButtomReset: 'リセット',
settingButtomSubmit: '適用して再起動',
settingCustomLogo: 'カスタムロゴ',
settingCustomLogoDesc: 'URL / Base64 / 絵文字をサポート',
settingCustomTitle: 'カスタムタイトル',
settingCustomTitleDesc: 'カスタムロゴのタイトル名',
settingExtraNetworkSidebarDefaultCardSize: 'モデルカバーサイズ',
settingExtraNetworkSidebarDefaultCardSizeDesc: '起動時のモデルカバーサイズのデフォルト値',
settingExtraNetworkSidebarDefaultExpand: 'デフォルトで展開',
settingExtraNetworkSidebarDefaultExpandDesc: '起動時にサイドバーをデフォルトで展開しますか?',
settingExtraNetworkSidebarDefaultWidth: 'デフォルト幅',
settingExtraNetworkSidebarDefaultWidthDesc: '起動時のサイドバーのデフォルト幅',
settingExtraNetworkSidebarDisplayMode: '表示モード',
settingExtraNetworkSidebarDisplayModeDesc:
'グリッドモードで常に表示するか、ホバー時に自動的に展開するフロートモードで表示するか',
settingExtraNetworkSidebarEnable: '有効にする',
settingExtraNetworkSidebarEnableDesc: '右側の追加ネットワークサイドバーを有効にする',
settingGroupExtraNetworkSidebar: '追加ネットワークサイドバー',
settingGroupLayout: 'レイアウト設定',
settingGroupPromotTextarea: 'プロンプトテキストエリア',
settingGroupQuickSettingSidebar: 'クイック設定サイドバー',
settingGroupTheme: 'テーマ設定',
settingHideFooter: 'フッターを非表示にする',
settingHideFooterDesc:
'テーマのフッターを非表示にし、stable diffusion webui のデフォルトフッターのみ表示します',
settingLanguage: '言語',
settingLanguageDesc: 'Lobe Themeの言語',
settingLogoPreview: 'プレビュー',
settingLogoType: 'ロゴタイプ',
settingLogoTypeDesc: 'ロゴタイプ',
settingNeutralColor: '中立色',
settingNeutralColorDesc:
'異なる色相のグレースケールのカスタマイズ。2番目は元のKitchenの中立色です',
settingPrimaryColor: 'プライマリカラー',
settingPrimaryColorDesc: 'カスタムプライマリカラー。2番目は元のKitchenのプライマリカラーです',
settingPromptDisplayMode: '表示モード',
settingPromptDisplayModeDesc: '固定の高さまたはドラッグリサイズをサポートする自動の高さ',
settingPromptEditor: 'プロンプトエディタ',
settingPromptEditorDesc: 'クイック設定サイドバーの上部に簡単なプロンプトエディタを提供します',
settingQuickSettingSidebarDefaultExpand: 'デフォルトで展開',
settingQuickSettingSidebarDefaultExpandDesc: '起動時にサイドバーをデフォルトで展開しますか?',
settingQuickSettingSidebarDefaultWidth: 'デフォルト幅',
settingQuickSettingSidebarDefaultWidthDesc: '起動時のサイドバーのデフォルト幅',
settingQuickSettingSidebarDisplayMode: '表示モード',
settingQuickSettingSidebarDisplayModeDesc:
'グリッドモードで常に表示するか、ホバー時に自動的に展開するフロートモードで表示するか',
settingQuickSettingSidebarEnable: '有効にする',
settingQuickSettingSidebarEnableDesc: '左側のクイック設定サイドバーを有効にする',
settingReduceAnimation: 'アニメーションを削減',
settingReduceAnimationDesc:
'ガラスのエフェクトと背景の流れる色を削減し、スムーズさを向上させ、CPUの使用量を節約できます',
settingSplitPreviewer: '2列モード',
settingSplitPreviewerDesc:
'プロンプト入力ボックスを左側に配置し、生成ボタンを右側に配置し、スクロール時に生成された画像が常にトップに表示されるようにします(実験的)',
settingSvgIcons: 'SVGアイコンを使用',
settingSvgIconsDesc: 'stable diffusion webuiの絵文字アイコンをすべてSVGアイコンに置き換えます',
switchTheme: '明暗テーマを切り替える',
themeFeedback: 'テーマのフィードバック',
themeSetting: 'テーマ設定',
};

export default translation;
Loading

0 comments on commit a61f3b4

Please sign in to comment.