Merge pull request #31 from mrbusysky/beta-react

Updates for translations

ui/frontend/build_src/src/Translation/config.ts

@@ -1,7 +1,7 @@
 import i18n from "i18next";
 // this should be updated to an interface
 import ENTranslation from "./locales/en/home.json";
-import ESTranlation from "./locales/es/home.json";
+import ESTranslation from "./locales/es/home.json";
 import { initReactI18next } from "react-i18next";
 
 export const resources = {
@@ -9,7 +9,7 @@ export const resources = {
     translation: ENTranslation,
   },
   es: {
-    translation: ESTranlation,
+    translation: ESTranslation,
   },
 } as const;
 

ui/frontend/build_src/src/Translation/locales/en/home.json

@@ -45,9 +45,11 @@
     "height": "Height:",
     "steps": "Number of inference steps:",
     "guide-scale": "Guidance Scale:",
+    "prompt-str": "Prompt Strength:",
     "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:",
+    "ups": "Upscale the image to 4x resolution using:",
+    "no-ups": "No Upscaling",
     "corrected": "Show only the corrected/upscaled image"
   },
   "tags": {
@@ -77,6 +79,8 @@
     "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",
+    "gpu": "Use full precision",
+    "gpu-disc": "(for GPU-only. warning: this will consume more VRAM)",
     "beta": "Beta Features",
     "beta-disc": "Get the latest features immediately (but could be less stable). \nPlease restart the program after changing this.",
     "save": "SAVE"

ui/frontend/build_src/src/Translation/locales/es/home.json

@@ -1,20 +1,108 @@
 {
-  "title": "Stable Diffusion UI en Español",
+  "title": "Stable Diffusion UI",
   "description": "",
-  "navbar": {},
-  "land-cre": {},
-  "land-pre": {},
-  "home": {},
-  "in-paint": {},
-  "settings": {},
-  "tags": {},
-  "preview-prompt": {},
-  "current-task": "",
-  "recent-create": "",
-  "popup": {},
-  "history": {},
-  "advanced-settings": {},
-  "storage": {},
-  "import": {},
-  "about": ""
+  "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:",
+    "prompt-str": "Prompt Strength:",
+    "live-preview": "Show a live preview of the image (disable this for faster image generation)",
+    "fix-face": "Fix incorrect faces and eyes (uses GFPGAN)",
+    "ups": "Upscale the image to 4x resolution using:",
+    "no-ups": "No Upscaling",
+    "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",
+    "gpu": "Use full precision",
+    "gpu-disc": "(for GPU-only. warning: this will consume more VRAM)",
+    "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/molecules/betaMode/index.tsx

@@ -8,7 +8,10 @@ import {
   toggleBetaConfig,
 } from "../../../api";
 
+import { useTranslation } from "react-i18next";
+
 export default function BetaMode() {
+  const { t } = useTranslation();
   // gate for the toggle
   const [shouldSetCofig, setShouldSetConfig] = useState(false);
   // next branch to get
@@ -65,7 +68,7 @@ export default function BetaMode() {
           setShouldSetConfig(true);
         }}
       />
-      Enable Beta Mode
+      {t("advanced-settings.beta")} {t("advanced-settings.beta-disc")}
     </label>
   );
 }

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx

@@ -10,8 +10,11 @@ import {
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
+import { useTranslation } from "react-i18next";
 
 export default function GpuSettings() {
+  const { t } = useTranslation();
+
   const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
   const useCpu = useImageCreate((state) =>
     state.getValueForRequestKey("use_cpu")
@@ -39,8 +42,7 @@ export default function GpuSettings() {
                 onChange={(e) => setRequestOption("turbo", e.target.checked)}
                 type="checkbox"
               />
-              Turbo mode (generates images faster, but uses an additional 1 GB
-              of GPU memory)
+              {t("advanced-settings.turbo")} {t("advanced-settings.turbo-disc")}
             </label>
           </div>
           <div className={SettingItem}>
@@ -50,7 +52,7 @@ export default function GpuSettings() {
                 checked={useCpu}
                 onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
               />
-              Use CPU instead of GPU (warning: this will be *very* slow)
+              {t("advanced-settings.cpu")} {t("advanced-settings.cpu-disc")}
             </label>
           </div>
           <div className={SettingItem}>
@@ -62,8 +64,7 @@ export default function GpuSettings() {
                 }
                 type="checkbox"
               />
-              Use full precision (for GPU-only. warning: this will consume more
-              VRAM)
+              {t("advanced-settings.gpu")} {t("advanced-settings.gpu-disc")}
             </label>
           </div>
         </>

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx

@@ -10,7 +10,11 @@ import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
 
+import { useTranslation } from "react-i18next";
+
 export default function ImprovementSettings() {
+  const { t } = useTranslation();
+
   // these are conditionals that should be retired and inferred from the store
   const isUsingFaceCorrection = useImageCreate((state) =>
     state.isUsingFaceCorrection()
@@ -74,7 +78,7 @@ export default function ImprovementSettings() {
           </div>
           <div className={SettingItem}>
             <label>
-              Upscale the image to 4x resolution using
+              {t("settings.ups")}
               <select
                 id="upscale_model"
                 name="upscale_model"
@@ -83,7 +87,7 @@ export default function ImprovementSettings() {
                   setRequestOption("use_upscale", e.target.value);
                 }}
               >
-                <option value="">No Uscaling</option>
+                <option value="">{t("settings.no-ups")}</option>
                 <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
                 <option value="RealESRGAN_x4plus_anime_6B">
                   RealESRGAN_x4plus_anime_6B
@@ -101,7 +105,7 @@ export default function ImprovementSettings() {
                   setRequestOption("show_only_filtered_image", e.target.checked)
                 }
               />
-              Show only filtered image
+              {t("settings.correct")}
             </label>
           </div>
         </>

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx

@@ -9,6 +9,9 @@ import {
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
+
+import { useTranslation } from "react-i18next";
+
 // todo: move this someplace more global
 const IMAGE_DIMENSIONS = [
   { value: 128, label: "128 (*)" },
@@ -29,6 +32,8 @@ const IMAGE_DIMENSIONS = [
 ];
 
 export default function PropertySettings() {
+  const { t } = useTranslation();
+
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
   const toggleUseRandomSeed = useImageCreate(
     (state) => state.toggleUseRandomSeed
@@ -91,7 +96,7 @@ export default function PropertySettings() {
 
           <div className={SettingItem}>
             <label>
-              Number of inference steps:{" "}
+              {t("settings.steps")} {" "}
               <input
                 value={steps}
                 onChange={(e) => {
@@ -104,7 +109,7 @@ export default function PropertySettings() {
 
           <div className={SettingItem}>
             <label>
-              Guidance Scale:
+              {t("settings.guide-scale")}
               <input
                 value={guidanceScale}
                 onChange={(e) =>
@@ -122,7 +127,7 @@ export default function PropertySettings() {
           {initImage && (
             <div className={SettingItem}>
               <label>
-                Prompt Strength:{" "}
+                {t("settings.prompt-str")} {" "}
                 <input
                   value={promptStrength}
                   onChange={(e) =>
@@ -140,7 +145,7 @@ export default function PropertySettings() {
 
           <div className={SettingItem}>
             <label>
-              Width:
+              {t("settings.width")}
               <select
                 value={width}
                 onChange={(e) => setRequestOption("width", e.target.value)}
@@ -157,7 +162,7 @@ export default function PropertySettings() {
             </label>
 
             <label>
-              Height:
+              {t("settings.height")}
               <select
                 value={height}
                 onChange={(e) => setRequestOption("height", e.target.value)}

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx

@@ -11,7 +11,11 @@ import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
 
+import { useTranslation } from "react-i18next";
+
 export default function WorkflowSettings() {
+  const { t } = useTranslation();
+
   const numOutputs = useImageCreate((state) =>
     state.getValueForRequestKey("num_outputs")
   );
@@ -43,7 +47,7 @@ export default function WorkflowSettings() {
         <>
           <div className={SettingItem}>
             <label>
-              Number of images to make:{" "}
+              {t("settings.amount-of-img")}{" "}
               <input
                 type="number"
                 value={numOutputs}
@@ -56,7 +60,7 @@ export default function WorkflowSettings() {
           </div>
           <div className={SettingItem}>
             <label>
-              Generate in parallel:
+              {t("settings.how-many")}
               <input
                 type="number"
                 value={parallelCount}
@@ -72,7 +76,7 @@ export default function WorkflowSettings() {
                 onChange={(e) => toggleUseAutoSave()}
                 type="checkbox"
               />
-              Automatically save to{" "}
+              {t("storage.ast")}{" "}
             </label>
             <label>
               <input
@@ -95,7 +99,7 @@ export default function WorkflowSettings() {
                 onChange={(e) => toggleSoundEnabled()}
                 type="checkbox"
               />
-              Play sound on task completion
+              {t("advanced-settings.sound")}
             </label>
           </div>
         </>

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx

@@ -10,7 +10,11 @@ import SeedImage from "./seedImage";
 import ActiveTags from "./activeTags";
 import MakeButton from "./makeButton";
 
+import { useTranslation } from "react-i18next";
+
 export default function BasicCreation() {
+  const { t } = useTranslation();
+
   const promptText = useImageCreate((state) =>
     state.getValueForRequestKey("prompt")
   );
@@ -23,7 +27,7 @@ export default function BasicCreation() {
   return (
     <div className={CreationBasicMain}>
       <div className={PromptDisplay}>
-        <p>Prompt </p>
+        <p>{t("home.editor-title")}</p>
         <textarea value={promptText} onChange={handlePromptChange}></textarea>
       </div>
 

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx

@@ -10,9 +10,13 @@ import {
 } from "./seedImage.css.ts";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
+import { useTranslation } from "react-i18next";
+
 // TODO : figure out why this needs props to be passed in.. fixes a type error
 // when the component is used in the parent component
 export default function SeedImage(_props: any) {
+  const { t } = useTranslation();
+
   const imageInputRef = useRef<HTMLInputElement>(null);
 
   const initImage = useImageCreate((state) =>
@@ -55,7 +59,7 @@ export default function SeedImage(_props: any) {
     <div className={ImageInputDisplay}>
       <div>
         <label className={InputLabel}>
-          <b>Initial Image:</b> (optional)
+          <b>{t("home.initial-img-txt")}</b>
         </label>
         <input
           ref={imageInputRef}
@@ -65,7 +69,7 @@ export default function SeedImage(_props: any) {
           onChange={_handleFileSelect}
         />
         <button className={ImageInputButton} onClick={_startFileSelect}>
-          Select File
+          {t("home.initial-img-btn")}
         </button>
       </div>
 
@@ -86,7 +90,7 @@ export default function SeedImage(_props: any) {
                 }}
                 checked={isInPaintingMode}
               ></input>
-              Use for Inpainting
+              {t("in-paint.txt")}
             </label>
           </>
         )}