Merge pull request #26 from mrbusysky/beta-react

Translation added

.gitignore

@@ -4,4 +4,7 @@ installer.tar
 dist
 
 # built code for the front end
-!/ui/frontend/dist
+!/ui/frontend/dist
+ui/frontend/.idea/*
+ui/frontend/build_src/.idea/*
+.idea/*

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",

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"
   },

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: <Home className={themeClass} /> },
         { path: "/settings", element: <Settings className={themeClass} /> },
       ]}
-    ></Router>
+    >
+    </Router>
   );
 }
 

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,
+});

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"
+}

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")}
     </button>
   );
 }

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx

@@ -25,7 +25,6 @@ export default function CompletedImages({
     <div className={completedImagesMain}>
       {images &&
         images.map((image, index) => {
-
           if (void 0 === image) {
             console.warn(`image ${index} is undefined`);
             return null;

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -116,7 +116,6 @@ export default function DisplayPanel() {
         <CurrentDisplay image={currentImage}></CurrentDisplay>
       </div>
       <div className={previousImages}>
-
         <CompletedImages
           images={completedImages}
           setCurrentDisplay={setCurrentImage}

ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx

@@ -5,11 +5,15 @@ import { KEY_CONFIG, getConfig } from "../../../api";
 
 import StatusDisplay from "./statusDisplay";
 
+import { useTranslation } from "react-i18next"
+
 import {
   HeaderDisplayMain, //@ts-ignore
 } from "./headerDisplay.css.ts";
 
 export default function HeaderDisplay() {
+  const { t } = useTranslation();
+
   const { status, data } = useQuery([KEY_CONFIG], getConfig);
 
   const [version, setVersion] = useState("2.1.0");
@@ -36,7 +40,7 @@ export default function HeaderDisplay() {
   return (
     <div className={HeaderDisplayMain}>
       <h1>
-        Stable Diffusion UI {version} {release}{" "}
+        {t("title")} {version} {release}{" "}
       </h1>
       <StatusDisplay className="status-display"></StatusDisplay>
     </div>