add some localization

i18n/zh_CN/ps-plugin.json

@@ -176,5 +176,8 @@
     "ControlNet Unit": "ControlNet #",
     "Select Filter": "选择过滤器",
     "Select Module": "选择预处理器",
-    "Select Model": "选择模型"
+    "Select Model": "选择模型",
+    "Keep all generated images on the canvas": "在画布上保留所有生成图像",
+    "Delete all generated images from the canvas": "在画布上删除所有生成图像",
+    "Keep only the highlighted images": "在画布上保留选中的图像"
   }

typescripts/after_detailer/after_detailer.tsx

@@ -286,7 +286,7 @@ function Collapsible({
         setIsOpen(!isOpen)
     }
 
-    return useObserver(()=> (
+    return /*useObserver(()=>*/( (
         <div>
             <div
                 className="collapsible"
@@ -294,7 +294,7 @@ function Collapsible({
                 onClick={handleToggle}
             >
                 <span className="truncate" style={labelStyle}>
-                    {Locale(label as any)}
+                    {label}
                 </span>
 
                 <span

typescripts/controlnet/main.tsx

@@ -4,6 +4,7 @@ import ControlNetTab from './ControlNetTab'
 import store from './store'
 import { versionCompare } from './util'
 import Collapsible from '../after_detailer/after_detailer'
+import Locale from '../locale/locale'
 
 const elem = document.getElementById('sp-control_net-tab-page')
 const elem2 = document.getElementById('sp-control_net-tab-page2')
@@ -23,7 +24,7 @@ if (elem2) {
                     padding: '3px',
                 }}
             >
-                <Collapsible defaultIsOpen={true} label={'ControlNet Tab'}>
+                <Collapsible defaultIsOpen={true} label={Locale('ControlNet Tab')}>
                     <div
                         id="controlNetTabParentContainer"
                         style={{ marginTop: '10px' }}

typescripts/locale/locale.ts

@@ -17,7 +17,7 @@ function isExists(path: string): boolean {
 }
 
 export default function Locale(
-    key: keyof typeof zhHans | keyof typeof zhHansForPSPlugin
+    key: keyof typeof zhHans | keyof typeof zhHansForPSPlugin | any
 ): string {
     const locale = globalStore.Locale
 

typescripts/session/progress.ts

@@ -1,6 +1,7 @@
 import { reaction } from 'mobx'
 import { AStore } from '../main/astore'
 import { io, layer_util } from '../util/oldSystem'
+import Locale from '../locale/locale'
 
 export const store = new AStore({
     progress_layer: null,
@@ -8,7 +9,7 @@ export const store = new AStore({
     progress_value: 0,
     progress_image: '',
     progress_image_height: 0,
-    progress_label: 'Progress..',
+    progress_label: Locale('Progress..'),
     can_update: true,
 })
 declare let g_sd_url: string

typescripts/session/session.ts

@@ -1,4 +1,5 @@
 import { control_net, preview, viewer, progress } from '../entry'
+import Locale from '../locale/locale'
 import { AStore } from '../main/astore'
 import {
     html_manip,
@@ -386,7 +387,7 @@ export class Session {
                     )
                 }
 
-                progress.store.data.progress_label = 'Progress...'
+                progress.store.data.progress_label = Locale('Progress...')
 
                 console.log('progress object json: ', json)
             } catch (e) {

typescripts/settings/settings.tsx

@@ -124,7 +124,8 @@ const Settings = observer(() => {
                 selected_index={['en_US', 'zh_CN'].indexOf(globalStore.Locale)}
                 onChange={(id: any, value: any) => {
                     globalStore.Locale = value.item
-                    localStorage.setItem('last_selected_locale', value)
+                    localStorage.setItem('last_selected_locale', value.item)
+                    console.log(localStorage.getItem('last_selected_locale'))
                 }}
             ></SpMenu>
             <SpCheckBox

typescripts/viewer/preview.tsx

@@ -7,6 +7,7 @@ import { AStore } from '../main/astore'
 import { progress } from '../entry'
 import './style/preview.css'
 import { reaction } from 'mobx'
+import Locale from '../locale/locale'
 export const store = new AStore({
     // image: '',
     // progress_value: 0,
@@ -20,7 +21,7 @@ reaction(
         document.querySelectorAll('.pProgressBars').forEach((progress: any) => {
             progress.value = value?.toFixed(2)
         })
-    }
+    } 
 )
 const Previewer = observer(() => {
     const renderImage = () => {
@@ -61,9 +62,9 @@ const PreviewerContainer = observer(() => {
     return (
         <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
             <Collapsible
-                defaultIsOpen={true}
+                defaultIsOpen={true} 
                 label={
-                    'Preview ' +
+                    Locale('Preview') + ' ' +
                     (progress.store.data.progress_value
                         ? `: ${
                               progress.store.data.progress_label

typescripts/viewer/viewer.tsx

@@ -395,19 +395,19 @@ const Viewer = observer(() => {
                 }}
             >
                 <button
-                    title="Keep all generated images on the canvas"
+                    title={Locale("Keep all generated images on the canvas")}
                     className="btnSquare acceptClass acceptAllImgBtn"
                     style={button_style}
                     onClick={addAll}
                 ></button>
                 <button
-                    title="Delete all generated images from the canvas"
+                    title={Locale("Delete all generated images from the canvas")}
                     className="btnSquare discardClass discardAllImgBtn"
                     style={button_style}
                     onClick={discardAll}
                 ></button>
                 <button
-                    title="Keep only the highlighted images"
+                    title={Locale("Keep only the highlighted images")}
                     className="btnSquare acceptSelectedClass acceptSelectedImgBtn"
                     style={button_style}
                     onClick={onlySelected}
@@ -526,26 +526,26 @@ const ToolbarViewerButtons = observer(() => {
         // }}
         >
             <button
-                title="Keep all generated images on the canvas"
+                title={Locale("Keep all generated images on the canvas")}
                 className="btnSquare acceptClass acceptAllImgBtn"
                 style={button_style}
                 onClick={addAll}
             ></button>
             <button
-                title="Delete all generated images from the canvas"
+                title={Locale("Delete all generated images from the canvas")}
                 className="btnSquare discardClass discardAllImgBtn"
                 style={button_style}
                 onClick={discardAll}
             ></button>
             <button
-                title="Keep only the highlighted images"
+                title={Locale("Keep only the highlighted images")}
-                className="btnSquare acceptSelectedClass acceptSelectedImgBtn"
+                className="btnSquare acceptSelectedClass acceptSelectedImgBtn" 
                 style={button_style}
                 onClick={onlySelected}
             ></button>
         </div>
     )
-})
+}) 
 
 // const node = document.getElementById('reactViewerContainer')!
 const containers = document.querySelectorAll('.reactViewerContainer')
@@ -555,7 +555,7 @@ containers.forEach((container) => {
     root.render(
         <React.StrictMode>
             <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                <Collapsible defaultIsOpen={true} label={'Viewer'}>
+                <Collapsible defaultIsOpen={true} label={Locale('Viewer')}>
                     <Viewer></Viewer>
                 </Collapsible>
             </div>