diff --git a/.gitignore b/.gitignore
index dd89019a..f91d8fbf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,7 @@ installer.tar
dist
# built code for the front end
-!/ui/frontend/dist
\ No newline at end of file
+!/ui/frontend/dist
+ui/frontend/.idea/*
+ui/frontend/build_src/.idea/*
+.idea/*
diff --git a/ui/frontend/build_src/package-lock.json b/ui/frontend/build_src/package-lock.json
index c4fee72c..2b6b316f 100644
--- a/ui/frontend/build_src/package-lock.json
+++ b/ui/frontend/build_src/package-lock.json
@@ -14,9 +14,11 @@
"@vanilla-extract/css": "^1.9.0",
"@vanilla-extract/recipes": "^0.2.5",
"@vanilla-extract/vite-plugin": "^3.5.0",
+ "i18next": "^21.9.2",
"immer": "^9.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-i18next": "^11.18.6",
"uuid": "^9.0.0",
"zustand": "^4.1.1"
},
@@ -1427,6 +1429,36 @@
"@babel/runtime": "^7.7.6"
}
},
+ "node_modules/html-parse-stringify": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+ "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+ "dependencies": {
+ "void-elements": "3.1.0"
+ }
+ },
+ "node_modules/i18next": {
+ "version": "21.9.2",
+ "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.9.2.tgz",
+ "integrity": "sha512-00fVrLQOwy45nm3OtC9l1WiLK3nJlIYSljgCt0qzTaAy65aciMdRy9GsuW+a2AtKtdg9/njUGfRH30LRupV7ZQ==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://locize.com"
+ },
+ {
+ "type": "individual",
+ "url": "https://locize.com/i18next.html"
+ },
+ {
+ "type": "individual",
+ "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+ }
+ ],
+ "dependencies": {
+ "@babel/runtime": "^7.17.2"
+ }
+ },
"node_modules/immer": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
@@ -1702,6 +1734,27 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-i18next": {
+ "version": "11.18.6",
+ "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",
+ "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==",
+ "dependencies": {
+ "@babel/runtime": "^7.14.5",
+ "html-parse-stringify": "^3.0.1"
+ },
+ "peerDependencies": {
+ "i18next": ">= 19.0.0",
+ "react": ">= 16.8.0"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ }
+ },
"node_modules/react-refresh": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -1923,6 +1976,14 @@
}
}
},
+ "node_modules/void-elements": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+ "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -2867,6 +2928,22 @@
"@babel/runtime": "^7.7.6"
}
},
+ "html-parse-stringify": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+ "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+ "requires": {
+ "void-elements": "3.1.0"
+ }
+ },
+ "i18next": {
+ "version": "21.9.2",
+ "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.9.2.tgz",
+ "integrity": "sha512-00fVrLQOwy45nm3OtC9l1WiLK3nJlIYSljgCt0qzTaAy65aciMdRy9GsuW+a2AtKtdg9/njUGfRH30LRupV7ZQ==",
+ "requires": {
+ "@babel/runtime": "^7.17.2"
+ }
+ },
"immer": {
"version": "9.0.15",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
@@ -3040,6 +3117,15 @@
"scheduler": "^0.23.0"
}
},
+ "react-i18next": {
+ "version": "11.18.6",
+ "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",
+ "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==",
+ "requires": {
+ "@babel/runtime": "^7.14.5",
+ "html-parse-stringify": "^3.0.1"
+ }
+ },
"react-refresh": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -3169,6 +3255,11 @@
"rollup": "~2.78.0"
}
},
+ "void-elements": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+ "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
+ },
"yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/ui/frontend/build_src/package.json b/ui/frontend/build_src/package.json
index 53ab4d0e..2d2c4874 100644
--- a/ui/frontend/build_src/package.json
+++ b/ui/frontend/build_src/package.json
@@ -16,9 +16,11 @@
"@vanilla-extract/css": "^1.9.0",
"@vanilla-extract/recipes": "^0.2.5",
"@vanilla-extract/vite-plugin": "^3.5.0",
+ "i18next": "^21.9.2",
"immer": "^9.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-i18next": "^11.18.6",
"uuid": "^9.0.0",
"zustand": "^4.1.1"
},
diff --git a/ui/frontend/build_src/src/App.tsx b/ui/frontend/build_src/src/App.tsx
index c1c02eb1..0e070e89 100644
--- a/ui/frontend/build_src/src/App.tsx
+++ b/ui/frontend/build_src/src/App.tsx
@@ -6,6 +6,8 @@ import Settings from "./pages/Settings";
// @ts-ignore
import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
+import './Translation/config';
+
const location = new ReactLocation();
function App() {
@@ -21,7 +23,8 @@ function App() {
{ path: "/", element: },
{ path: "/settings", element: },
]}
- >
+ >
+
);
}
diff --git a/ui/frontend/build_src/src/Translation/config.ts b/ui/frontend/build_src/src/Translation/config.ts
new file mode 100644
index 00000000..84c09792
--- /dev/null
+++ b/ui/frontend/build_src/src/Translation/config.ts
@@ -0,0 +1,17 @@
+import i18n from "i18next";
+import translation from "./en.json";
+import { initReactI18next } from "react-i18next";
+
+export const resources = {
+ en: {
+ translation,
+ },
+} as const;
+
+i18n.use(initReactI18next).init({
+ lng: "en",
+ interpolation: {
+ escapeValue: false,
+ },
+ resources,
+});
diff --git a/ui/frontend/build_src/src/Translation/en.json b/ui/frontend/build_src/src/Translation/en.json
new file mode 100644
index 00000000..90474a0c
--- /dev/null
+++ b/ui/frontend/build_src/src/Translation/en.json
@@ -0,0 +1,104 @@
+{
+ "title": "Stable Diffusion UI",
+ "description": "",
+ "navbar": {
+ "home": "Home",
+ "history": "History",
+ "community": "Community",
+ "settings": "Settings"
+ },
+ "land-cre": {
+ "cp": "Create Profile",
+ "cp-place": "Profile name",
+ "pp": "Profile Picture",
+ "pp-disc": "",
+ "ast": "Automatically save to",
+ "ast-disc": "File path to auto save your creations",
+ "place": "File path",
+ "cre": "Create"
+ },
+ "land-pre": {
+ "user": "Username",
+ "add": "Add Profile"
+ },
+ "home": {
+ "status-starting": "Stable Diffusion is starting...",
+ "status-ready": "Stable Diffusion is ready to use!",
+ "status-error": "Stable Diffusion is not running!",
+ "editor-title": "Prompt",
+ "initial-img-txt": "Initial Image: (optional)",
+ "initial-img-btn": "Browse...",
+ "initial-img-text2": "No file selected.",
+ "make-img-btn": "Make Image",
+ "make-img-btn-stop": "Stop"
+ },
+ "in-paint": {
+ "txt": "In-Painting (select the area which the AI will paint into)",
+ "clear": "Clear"
+ },
+ "settings": {
+ "base-img": "Use base image:",
+ "seed": "Seed:",
+ "amount-of-img": "Amount of images to make:",
+ "how-many": "How many at once:",
+ "width": "Width:",
+ "height": "Height:",
+ "steps": "Number of inference steps:",
+ "guide-scale": "Guidance Scale:",
+ "live-preview": "Show a live preview of the image (disable this for faster image generation)",
+ "fix-face": "Fix incorrect faces and eyes (uses GFPGAN)",
+ "upscale": "Upscale the image to 4x resolution using:",
+ "corrected": "Show only the corrected/upscaled image"
+ },
+ "tags": {
+ "txt": "Image Modifiers (art styles, tags etc)"
+ },
+ "preview-prompt": {
+ "part1": "Type a prompt and press the \"Make Image\" button.",
+ "part2": "You can set an \"Initial Image\" if you want to guide the AI.\n",
+ "part3": "You can also add modifiers like \"Realistic\", \"Pencil Sketch\", \"ArtStation\" etc by browsing through the \"Image Modifiers\" section and selecting the desired modifiers.\n",
+ "part4": "Click \"Advanced Settings\" for additional settings like seed, image size, number of images to generate etc.",
+ "part5": "Enjoy! :)"
+ },
+ "current-task": "Current task",
+ "recent-create": "Recently Created",
+ "popup": {
+ "use-btn": "Use Image",
+ "use-btn2": "Use Image and Tags"
+ },
+ "history": {
+ "fave": "Favorites Only",
+ "search": "Search"
+ },
+ "advanced-settings": {
+ "sound": "Play sound on task completion",
+ "sound-disc": "Will play a sound so user can hear when image is done.",
+ "turbo": "Turbo mode",
+ "turbo-disc": "Generates images faster, but uses an additional 1 GB of GPU memory",
+ "cpu": "Use CPU instead of GPU",
+ "cpu-disc": "Warning: this will be *very* slow",
+ "beta": "Beta Features",
+ "beta-disc": "Get the latest features immediately (but could be less stable). \nPlease restart the program after changing this.",
+ "save": "SAVE"
+ },
+ "storage": {
+ "ast": "Automatically save to",
+ "ast-disc": "File path to auto save your creations",
+ "place": "File path",
+ "cps": "Cross profile sharing",
+ "cps-disc": "Profiles will see suggestions from each other.",
+ "acb": "Allow cloud backup",
+ "acb-disc": "A button will show up for images on hover",
+ "acb-place": "Choose your",
+ "acc-api": "Api key",
+ "acb-api-place": "Your API key",
+ "save": "SAVE"
+ },
+ "import": {
+ "imp-btn": "IMPORT",
+ "exp-btn": "EXPORT",
+ "disc": "It is a good idea to leave the exported file as it is. Otherwise it may not import correctly",
+ "disc:2": "When importing, only profiles that are not already present on the will be added."
+ },
+ "about": "If you found this project useful and want to help keep it alive, please to help cover the cost of development and maintenance! Thank you for your support!\n\nPlease feel free to join the discord community or file an issue if you have any problems or suggestions in using this interface.\n\nDisclaimer: The authors of this project are not responsible for any content generated using this interface.\n\nThis license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm,\nspread misinformation and target vulnerable groups. For the full list of restrictions please read the license.\n\nBy using this software, you consent to the terms and conditions of the license.\n"
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
index ac5a8710..30cd92c5 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
@@ -10,7 +10,11 @@ import {
MakeButtonStyle, // @ts-ignore
} from "./makeButton.css.ts";
+import { useTranslation } from "react-i18next";
+
export default function MakeButton() {
+ const { t } = useTranslation();
+
const parallelCount = useImageCreate((state) => state.parallelCount);
const builtRequest = useImageCreate((state) => state.builtRequest);
const addNewImage = useImageQueue((state) => state.addNewImage);
@@ -78,7 +82,7 @@ export default function MakeButton() {
onClick={makeImages}
disabled={hasQueue}
>
- Make
+ {t("home.make-img-btn")}
);
}
diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
index a925f756..89ab7cfa 100644
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
@@ -25,7 +25,6 @@ export default function CompletedImages({
{images &&
images.map((image, index) => {
-
if (void 0 === image) {
console.warn(`image ${index} is undefined`);
return null;
diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
index ef229ce7..de54f5e6 100644
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
@@ -116,7 +116,6 @@ export default function DisplayPanel() {
-
- Stable Diffusion UI {version} {release}{" "}
+ {t("title")} {version} {release}{" "}