Fix: fix crashes by disabling react strict mode

typescripts/after_detailer/after_detailer.tsx

@@ -260,13 +260,13 @@ const domNode = document.getElementById('alwaysOnScriptsContainer')!
 const root = ReactDOM.createRoot(domNode)
 
 root.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                <Collapsible label={'ADetailer'}>
-                    <AfterDetailerComponent />
-                </Collapsible>
-            </div>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+            <Collapsible label={'ADetailer'}>
+                <AfterDetailerComponent />
+            </Collapsible>
+        </div>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/controlnet/main.tsx

@@ -22,28 +22,28 @@ if (elem) {
 if (elem2) {
     const root = ReactDOM.createRoot(elem2)
     root.render(
-        <React.StrictMode>
-            <ErrorBoundary>
-                <div
-                    style={{
-                        border: '2px solid #6d6c6c',
-                        padding: '3px',
-                    }}
+        //<React.StrictMode>
+        <ErrorBoundary>
+            <div
+                style={{
+                    border: '2px solid #6d6c6c',
+                    padding: '3px',
+                }}
+            >
+                <Collapsible
+                    defaultIsOpen={true}
+                    label={Locale('ControlNet Tab')}
                 >
-                    <Collapsible
-                        defaultIsOpen={true}
-                        label={Locale('ControlNet Tab')}
+                    <div
+                        id="controlNetTabParentContainer"
+                        style={{ marginTop: '10px' }}
                     >
-                        <div
-                            id="controlNetTabParentContainer"
-                            style={{ marginTop: '10px' }}
-                        >
-                            <ControlNetTab appState={store} />
-                        </div>
-                    </Collapsible>
-                </div>
-            </ErrorBoundary>
-        </React.StrictMode>
+                        <ControlNetTab appState={store} />
+                    </div>
+                </Collapsible>
+            </div>
+        </ErrorBoundary>
+        //</React.StrictMode>
     )
 }
 function scrollToEnabledControlNetUnit() {}

typescripts/extra_page/extra_page.tsx

@@ -254,14 +254,14 @@ containers.forEach((container) => {
     const root = ReactDOM.createRoot(container)
 
     root.render(
-        <React.StrictMode>
-            <ErrorBoundary>
-                <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                    <Collapsible defaultIsOpen={true} label={'Extra Page'}>
-                        <ExtraPage />
-                    </Collapsible>
-                </div>
-            </ErrorBoundary>
-        </React.StrictMode>
+        //<React.StrictMode>
+        <ErrorBoundary>
+            <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+                <Collapsible defaultIsOpen={true} label={'Extra Page'}>
+                    <ExtraPage />
+                </Collapsible>
+            </div>
+        </ErrorBoundary>
+        //</React.StrictMode>
     )
 })

typescripts/history/history.tsx

@@ -420,9 +420,9 @@ const gridContainerNode = document.getElementById('historyImagesContainer')!
 const gridRoot = ReactDOM.createRoot(gridContainerNode)
 
 gridRoot.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <History></History>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <History></History>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/image_search/image_search.tsx

@@ -63,9 +63,9 @@ const gridRoot = ReactDOM.createRoot(gridContainerNode)
 
 let images: string[] = []
 gridRoot.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <ImageSearch></ImageSearch>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <ImageSearch></ImageSearch>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/main/main.tsx

@@ -105,9 +105,9 @@ export async function populateVAE() {
 }
 
 vaeRoot.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <VAEComponent></VAEComponent>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <VAEComponent></VAEComponent>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/multiTextarea.tsx

@@ -140,7 +140,7 @@ export class MultiTextArea extends React.Component {
 //     const root = ReactDOM.createRoot(container)
 
 //     root.render(
-//         <React.StrictMode>
+//         //<React.StrictMode>
 //             <ErrorBoundary>
 //                 <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
 //                     <Collapsible defaultIsOpen={true} label={'Prompts'}>
@@ -148,6 +148,6 @@ export class MultiTextArea extends React.Component {
 //                     </Collapsible>
 //                 </div>
 //             </ErrorBoundary>
-//         </React.StrictMode>
+//         //</React.StrictMode>
 //     )
 // })

typescripts/one_button_prompt/one_button_prompt.tsx

@@ -299,17 +299,14 @@ containers.forEach((container) => {
     const root = ReactDOM.createRoot(container)
 
     root.render(
-        <React.StrictMode>
-            <ErrorBoundary>
-                <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                    <Collapsible
-                        defaultIsOpen={false}
-                        label={'One Button Prompt'}
-                    >
-                        <OneButtonPrompt />
-                    </Collapsible>
-                </div>
-            </ErrorBoundary>
-        </React.StrictMode>
+        //<React.StrictMode>
+        <ErrorBoundary>
+            <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+                <Collapsible defaultIsOpen={false} label={'One Button Prompt'}>
+                    <OneButtonPrompt />
+                </Collapsible>
+            </div>
+        </ErrorBoundary>
+        //</React.StrictMode>
     )
 })

typescripts/preset/preset.tsx

@@ -270,16 +270,13 @@ const gridContainerNode = document.getElementById('PresetTabContainer')!
 const gridRoot = ReactDOM.createRoot(gridContainerNode)
 
 gridRoot.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                <Collapsible
-                    defaultIsOpen={true}
-                    label={Locale('Custom Preset')}
-                >
-                    <PresetTab></PresetTab>
-                </Collapsible>
-            </div>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+            <Collapsible defaultIsOpen={true} label={Locale('Custom Preset')}>
+                <PresetTab></PresetTab>
+            </Collapsible>
+        </div>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/sam/sam.tsx

@@ -213,17 +213,14 @@ const containers = document.querySelectorAll('.samContainer')
 containers.forEach((container) => {
     const root = ReactDOM.createRoot(container)
     root.render(
-        <React.StrictMode>
-            <ErrorBoundary>
-                <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                    <Collapsible
-                        defaultIsOpen={false}
-                        label={'Segment Anything'}
-                    >
-                        <Sam></Sam>
-                    </Collapsible>
-                </div>
-            </ErrorBoundary>
-        </React.StrictMode>
+        //<React.StrictMode>
+        <ErrorBoundary>
+            <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+                <Collapsible defaultIsOpen={false} label={'Segment Anything'}>
+                    <Sam></Sam>
+                </Collapsible>
+            </div>
+        </ErrorBoundary>
+        //</React.StrictMode>
     )
 })

typescripts/sd_tab/sd_tab.tsx

@@ -108,11 +108,11 @@ const Modes = observer(() => {
 // const root = ReactDOM.createRoot(container)
 
 // root.render(
-//     <React.StrictMode>
+//     //<React.StrictMode>
 //         <ErrorBoundary>
 //             <Modes />
 //         </ErrorBoundary>
-//     </React.StrictMode>
+//     //</React.StrictMode>
 // )
 @observer
 class SDTab extends React.Component<{}> {
@@ -1226,6 +1226,7 @@ class SDTab extends React.Component<{}> {
                             </sp-label>
                         </SpSlider>
                     </div>
+
                     <div>
                         <div style={{ display: 'flex' }}>
                             <sp-label id="sdLabelSeed">Seed:</sp-label>
@@ -1317,9 +1318,9 @@ class SDTab extends React.Component<{}> {
 const sdTabContainer = document.getElementById('sdTabContainer')!
 const sdTabRoot = ReactDOM.createRoot(sdTabContainer)
 sdTabRoot.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            {/* <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        {/* <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
                 <Collapsible
                     defaultIsOpen={true}
                     label={Locale('Stable Diffusion Tab')}
@@ -1327,7 +1328,7 @@ sdTabRoot.render(
                     <SDTab></SDTab>
                 </Collapsible>
             </div> */}
-            <SDTab></SDTab>
-        </ErrorBoundary>
-    </React.StrictMode>
+        <SDTab></SDTab>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/session/generate.tsx

@@ -342,9 +342,9 @@ const toolBarButtonsContainer = document.getElementById(
 )!
 const toolBarButtonsContainerRoot = ReactDOM.createRoot(toolBarButtonsContainer)
 toolBarButtonsContainerRoot.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <ToolbarGenerateButtons></ToolbarGenerateButtons>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <ToolbarGenerateButtons></ToolbarGenerateButtons>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/settings/settings.tsx

@@ -321,11 +321,11 @@ const containerNode = document.getElementById('reactSettingsContainer')!
 const root = ReactDOM.createRoot(containerNode)
 
 root.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <Settings></Settings>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <Settings></Settings>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )
 
 progress_store.data.live_progress_image

typescripts/tool_bar/tool_bar.tsx

@@ -212,9 +212,9 @@ const container = document.getElementById('toolBarContainer')!
 const root = ReactDOM.createRoot(container)
 
 root.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <ToolBar></ToolBar>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <ToolBar></ToolBar>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/ultimate_sd_upscaler/scripts.tsx

@@ -164,11 +164,11 @@ const domNode = document.getElementById('scriptsContainer')!
 const root = ReactDOM.createRoot(domNode)
 
 root.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
-                <ScriptComponent></ScriptComponent>
-            </div>
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+            <ScriptComponent></ScriptComponent>
+        </div>
+    </ErrorBoundary>
+    //</React.StrictMode>
 )

typescripts/viewer/preview.tsx

@@ -85,10 +85,10 @@ containers.forEach((container) => {
     const root = ReactDOM.createRoot(container)
 
     root.render(
-        <React.StrictMode>
-            <ErrorBoundary>
-                <PreviewerContainer />
-            </ErrorBoundary>
-        </React.StrictMode>
+        //<React.StrictMode>
+        <ErrorBoundary>
+            <PreviewerContainer />
+        </ErrorBoundary>
+        //</React.StrictMode>
     )
 })

typescripts/viewer/viewer.tsx

@@ -631,25 +631,25 @@ const containers = document.querySelectorAll('.reactViewerContainer')
 containers.forEach((container) => {
     const root = ReactDOM.createRoot(container)
     root.render(
-        <React.StrictMode>
-            <ErrorBoundary>
-                {/* <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
+        //<React.StrictMode>
+        <ErrorBoundary>
+            {/* <div style={{ border: '2px solid #6d6c6c', padding: '3px' }}>
                     <Collapsible defaultIsOpen={true} label={Locale('Viewer')}>
                         <Viewer></Viewer>
                     </Collapsible>
                 </div> */}
-                <Viewer></Viewer>
-            </ErrorBoundary>
-        </React.StrictMode>
+            <Viewer></Viewer>
+        </ErrorBoundary>
+        //</React.StrictMode>
     )
 })
 
 const button_container = document.getElementById('viewerButtonContainer')!
 const root = ReactDOM.createRoot(button_container)
 root.render(
-    <React.StrictMode>
-        <ErrorBoundary>
-            <ToolbarViewerButtons />
-        </ErrorBoundary>
-    </React.StrictMode>
+    //<React.StrictMode>
+    <ErrorBoundary>
+        <ToolbarViewerButtons />
+    </ErrorBoundary>
+    //</React.StrictMode>
 )