add support to clip skip in the settings tabs

sdapi_py_re.js

@@ -176,7 +176,7 @@ async function requestGetConfig() {
     try {
         let request = await fetch(full_url)
         json = await request.json()
-        console.log('models json:')
+
         console.dir(json)
     } catch (e) {
         console.warn(`issues requesting from ${full_url}`, e)
@@ -194,7 +194,6 @@ async function requestGetOptions() {
         }
 
         json = await request.json()
-        console.log('models json:')
         console.dir(json)
     } catch (e) {
         console.warn(`issues requesting from ${full_url}`, e)

typescripts/settings/settings.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import { observer } from 'mobx-react'
 import { AStore } from '../main/astore'
 
-import { SpCheckBox, SpMenu } from '../util/elements'
+import { SpCheckBox, SpMenu, SpSlider } from '../util/elements'
 import Locale from '../locale/locale'
 import globalStore from '../globalstore'
 import { io } from '../util/oldSystem'
@@ -13,10 +13,11 @@ import { storage } from 'uxp'
 import { ErrorBoundary } from '../util/errorBoundary'
 import { MaskModeEnum, ScriptMode } from '../util/ts/enum'
 import { store as progress_store } from '../session/progress'
+import { requestPost } from '../util/ts/api'
 
 // import { Jimp } from '../util/oldSystem'
 declare const Jimp: any // make sure you import jimp before importing settings.tsx
-
+declare let g_sd_url: string
 type InterpolationMethod = {
     [key: string]: {
         photoshop: string
@@ -78,6 +79,7 @@ interface AStoreData {
     use_sharp_mask: boolean
     use_prompt_shortcut: boolean
     bTurnOffServerStatusAlert: boolean
+    CLIP_stop_at_last_layers: number
 }
 export const store = new AStore<AStoreData>({
     scale_interpolation_method: interpolationMethods.bilinear,
@@ -92,6 +94,7 @@ export const store = new AStore<AStoreData>({
     bTurnOffServerStatusAlert:
         JSON.parse(storage.localStorage.getItem('bTurnOffServerStatusAlert')) ||
         false,
+    CLIP_stop_at_last_layers: 1,
 })
 
 function onShouldLogToFileChange(event: any) {
@@ -129,10 +132,41 @@ function setDeleteLogTimer() {
     console.log('setDeleteLogTimer() timer_id :', timer_id)
     return timer_id
 }
+async function postOptions(options: Object) {
+    try {
+        const full_url = `${g_sd_url}/sdapi/v1/options`
+        await requestPost(full_url, options)
+    } catch (e) {
+        console.warn('failed postOptions at : ', g_sd_url, options, e)
+    }
+}
+
+interface Options {
+    [key: string]: number
+    CLIP_stop_at_last_layers: number
+}
+
+async function getOptions(): Promise<Options | null> {
+    const full_url = `${g_sd_url}/sdapi/v1/options`
+    try {
+        const response = await fetch(full_url)
+        if (response.status === 404) return null
+        return await response.json()
+    } catch (error) {
+        console.error(`Error fetching from ${full_url}:`, error)
+        return null
+    }
+}
 
 @observer
 export class Settings extends React.Component<{}> {
-    componentDidMount(): void {}
+    async componentDidMount(): Promise<void> {
+        const options = await getOptions()
+
+        store.data.CLIP_stop_at_last_layers =
+            options?.CLIP_stop_at_last_layers ??
+            store.data.CLIP_stop_at_last_layers
+    }
 
     render() {
         return (
@@ -313,6 +347,35 @@ export class Settings extends React.Component<{}> {
                         Turn Off Server Status Alert
                     </sp-checkbox>
                 </div>
+                <div>
+                    <SpSlider
+                        show-value="false"
+                        min={1}
+                        max={12}
+                        value={store.data.CLIP_stop_at_last_layers}
+                        onInput={(evt: any) => {
+                            store.data.CLIP_stop_at_last_layers =
+                                evt.target.value
+                        }}
+                        onChange={async (evt: any) => {
+                            console.log(
+                                'should update clip skip through the option endpoint'
+                            )
+                            await postOptions({
+                                CLIP_stop_at_last_layers:
+                                    store.data.CLIP_stop_at_last_layers,
+                            })
+                        }}
+                        title="clip skip: use 1 for none, 2 for skipping one layer"
+                    >
+                        <sp-label slot="label">
+                            {Locale('Clip Skip: ')}
+                        </sp-label>
+                        <sp-label slot="label">
+                            {store.data.CLIP_stop_at_last_layers}
+                        </sp-label>
+                    </SpSlider>
+                </div>
             </div>
         )
     }