check if scripts base modules are installed in auto1111

typescripts/globalstore.ts

@@ -5,7 +5,8 @@ interface GlobalStore {
     Locale: 'zh_CN' | 'en_US'
 }
 
-const initialLocale = localStorage.getItem('last_selected_locale') || host.uiLocale;
+const initialLocale =
+    localStorage.getItem('last_selected_locale') || host.uiLocale
 var globalStore = observable<GlobalStore>({
     Locale: initialLocale == 'zh_CN' ? initialLocale : 'en_US',
 })

typescripts/one_button_prompt/one_button_prompt.tsx

@@ -5,8 +5,12 @@ import Collapsible from '../after_detailer/after_detailer'
 import { observer } from 'mobx-react'
 import { AStore } from '../main/astore'
 
-import { requestPost, requestGet } from '../util/ts/api'
-import { SpMenu, SpSliderWithLabel } from '../util/elements'
+import { requestPost, requestGet, isScriptInstalled } from '../util/ts/api'
+import {
+    ScriptInstallComponent,
+    SpMenu,
+    SpSliderWithLabel,
+} from '../util/elements'
 
 declare let g_sd_url: string
 export const store = new AStore({
@@ -19,6 +23,8 @@ export const store = new AStore({
     subject: 'all',
     artist: 'all',
     imagetype: 'all',
+    script_name: 'one button prompt',
+    is_installed: false,
 })
 
 export async function requestRandomPrompts(
@@ -119,8 +125,14 @@ export async function requestConfig() {
 
 @observer
 class OneButtonPrompt extends React.Component {
+    async initScript() {
+        const is_installed = await isScriptInstalled(store.data.script_name)
+        await store.updateProperty('is_installed', is_installed)
+    }
+
     async componentDidMount() {
         await requestConfig()
+        await this.initScript()
     }
 
     renderContainer() {
@@ -246,7 +258,22 @@ class OneButtonPrompt extends React.Component {
     }
 
     render() {
-        return <div style={{ padding: '4px' }}>{this.renderContainer()}</div>
+        return (
+            <div>
+                {store.data.is_installed ? (
+                    <div style={{ padding: '4px' }}>
+                        {this.renderContainer()}
+                    </div>
+                ) : (
+                    <ScriptInstallComponent
+                        onRefreshHandler={async (event: any) => {
+                            console.log(`Refresh ${store.data.script_name}`)
+                            await this.initScript()
+                        }}
+                    ></ScriptInstallComponent>
+                )}
+            </div>
+        )
     }
 }
 

typescripts/sam/sam.tsx

@@ -2,11 +2,15 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import Collapsible from '../after_detailer/after_detailer'
 import { observer } from 'mobx-react'
-
+import { isScriptInstalled } from '../util/ts/api'
 import { api, general, io, psapi, selection } from '../util/oldSystem'
 import { Grid } from '../util/grid'
 import { AStore } from '../main/astore'
-import { MoveToCanvasSvg, PenSvg } from '../util/elements'
+import {
+    MoveToCanvasSvg,
+    PenSvg,
+    ScriptInstallComponent,
+} from '../util/elements'
 declare let g_sd_url: string
 
 export async function getSamMap(base64: string, prompt: string) {
@@ -40,102 +44,140 @@ export const store = new AStore({
     prompt: '',
     width: 85,
     height: 85,
+    is_installed: false,
+    script_name: 'segment anything',
 })
-const Sam = observer(() => {
-    return (
-        <div>
-            <sp-textarea
-                placeholder="Segment Anything Prompt"
-                value={store.data.prompt}
-                onInput={(event: any) => {
-                    store.data.prompt = event.target.value
-                }}
-            ></sp-textarea>
-            <button
-                className="btnSquare"
-                onClick={async () => {
-                    const selection_info = await psapi.getSelectionInfoExe()
-                    const base64 = await io.getImageFromCanvas()
-                    const result = await getSamMap(base64, store.data.prompt)
-                    const masks = result?.masks ?? []
-                    const masks_urls = []
-                    for (const mask of masks) {
-                        const url =
-                            await io.convertBlackAndWhiteImageToRGBChannels3(
-                                mask
-                            )
-                        masks_urls.push(url)
-                    }
 
-                    store.updateProperty('thumbnails', masks_urls)
-                    store.updateProperty(
-                        'selection_info_list',
-                        Array(masks_urls.length).fill(selection_info)
-                    )
-                }}
-            >
-                Generate Mask
-            </button>
-            <Grid
-                // thumbnails_data={store.data.images?.map((base64: string) =>
-                //     base64
-                //         ? 'data:image/png;base64,' + base64
-                //         : 'https://source.unsplash.com/random'
-                // )}
-                thumbnails={store.data.thumbnails}
-                width={store.data.width}
-                height={store.data.height}
-                action_buttons={[
-                    {
-                        ComponentType: PenSvg,
-                        callback: async (index: number) => {
-                            try {
-                                const base64 = general.base64UrlToBase64(
-                                    store.data.thumbnails[index]
-                                )
-                                await selection.base64ToLassoSelection(
-                                    base64,
-                                    store.data.selection_info_list[index]
-                                )
-                            } catch (e) {
-                                console.warn(e)
-                            }
-                        },
-                    },
-                    {
-                        ComponentType: MoveToCanvasSvg,
-                        callback: async (index: number) => {
-                            try {
-                                const to_x =
-                                    store.data.selection_info_list[index]?.left
-                                const to_y =
-                                    store.data.selection_info_list[index]?.top
-                                const width =
-                                    store.data.selection_info_list[index]?.width
-                                const height =
-                                    store.data.selection_info_list[index]
-                                        ?.height
+@observer
+export class Sam extends React.Component<{
+    // store: AStore
+}> {
+    async initScript() {
+        const is_installed = await isScriptInstalled(store.data.script_name)
+        await store.updateProperty('is_installed', is_installed)
+    }
+    async componentDidMount(): Promise<void> {
+        await this.initScript()
+    }
 
-                                await io.IO.base64ToLayer(
-                                    general.base64UrlToBase64(
+    renderScript() {
+        return (
+            <div>
+                <sp-textarea
+                    placeholder="Segment Anything Prompt"
+                    value={store.data.prompt}
+                    onInput={(event: any) => {
+                        store.data.prompt = event.target.value
+                    }}
+                ></sp-textarea>
+                <button
+                    className="btnSquare"
+                    onClick={async () => {
+                        const selection_info = await psapi.getSelectionInfoExe()
+                        const base64 = await io.getImageFromCanvas()
+                        const result = await getSamMap(
+                            base64,
+                            store.data.prompt
+                        )
+                        const masks = result?.masks ?? []
+                        const masks_urls = []
+                        for (const mask of masks) {
+                            const url =
+                                await io.convertBlackAndWhiteImageToRGBChannels3(
+                                    mask
+                                )
+                            masks_urls.push(url)
+                        }
+
+                        store.updateProperty('thumbnails', masks_urls)
+                        store.updateProperty(
+                            'selection_info_list',
+                            Array(masks_urls.length).fill(selection_info)
+                        )
+                    }}
+                >
+                    Generate Mask
+                </button>
+                <Grid
+                    // thumbnails_data={store.data.images?.map((base64: string) =>
+                    //     base64
+                    //         ? 'data:image/png;base64,' + base64
+                    //         : 'https://source.unsplash.com/random'
+                    // )}
+                    thumbnails={store.data.thumbnails}
+                    width={store.data.width}
+                    height={store.data.height}
+                    action_buttons={[
+                        {
+                            ComponentType: PenSvg,
+                            callback: async (index: number) => {
+                                try {
+                                    const base64 = general.base64UrlToBase64(
                                         store.data.thumbnails[index]
-                                    ),
-                                    'segment_anything_mask.png',
-                                    to_x,
-                                    to_y,
-                                    width,
-                                    height
-                                )
-                            } catch (e) {
-                                console.warn(e)
-                            }
+                                    )
+                                    await selection.base64ToLassoSelection(
+                                        base64,
+                                        store.data.selection_info_list[index]
+                                    )
+                                } catch (e) {
+                                    console.warn(e)
+                                }
+                            },
                         },
-                    },
-                ]}
-            ></Grid>
-        </div>
-    )
-})
+                        {
+                            ComponentType: MoveToCanvasSvg,
+                            callback: async (index: number) => {
+                                try {
+                                    const to_x =
+                                        store.data.selection_info_list[index]
+                                            ?.left
+                                    const to_y =
+                                        store.data.selection_info_list[index]
+                                            ?.top
+                                    const width =
+                                        store.data.selection_info_list[index]
+                                            ?.width
+                                    const height =
+                                        store.data.selection_info_list[index]
+                                            ?.height
+
+                                    await io.IO.base64ToLayer(
+                                        general.base64UrlToBase64(
+                                            store.data.thumbnails[index]
+                                        ),
+                                        'segment_anything_mask.png',
+                                        to_x,
+                                        to_y,
+                                        width,
+                                        height
+                                    )
+                                } catch (e) {
+                                    console.warn(e)
+                                }
+                            },
+                        },
+                    ]}
+                ></Grid>
+            </div>
+        )
+    }
+    render() {
+        return (
+            <div>
+                {store.data.is_installed ? (
+                    this.renderScript()
+                ) : (
+                    <ScriptInstallComponent
+                        onRefreshHandler={async (event: any) => {
+                            console.log(`Refresh ${store.data.script_name}`)
+                            await this.initScript()
+                        }}
+                    ></ScriptInstallComponent>
+                )}
+            </div>
+        )
+    }
+}
 const containers = document.querySelectorAll('.samContainer')
 
 containers.forEach((container) => {

typescripts/settings/settings.tsx

@@ -69,28 +69,7 @@ function setDeleteLogTimer() {
     console.log('setDeleteLogTimer() timer_id :', timer_id)
     return timer_id
 }
-// reaction(
-//     () => {
-//         return store.data.should_log_to_file
-//     },
-//     (should_log_to_file) => {
-//         if (should_log_to_file && !store.data.delete_log_file_timer_id) {
-//             store.data.delete_log_file_timer_id = setDeleteLogTimer()
-//         } else {
-//             //don't log and clear delete file timer
-//             try {
-//                 store.data.delete_log_file_timer_id = clearInterval(
-//                     store.data.delete_log_file_timer_id
-//                 )
-//             } catch (e) {
-//                 console.warn(e)
-//             }
-//         }
 
-//         //@ts-ignore
-//         setLogMethod(should_log_to_file)
-//     }
-// )
 const Settings = observer(() => {
     return (
         <div style={{ width: '100%' }}>

typescripts/util/elements.tsx

@@ -174,7 +174,9 @@ export class SpSliderWithLabel extends React.Component<{
                     }
                     onChange={this.onSliderValueChangeHandler.bind(this)}
                 >
-                    <sp-label slot="label">{Locale(this.props.label as any)}:</sp-label>
+                    <sp-label slot="label">
+                        {Locale(this.props.label as any)}:
+                    </sp-label>
                     <sp-label
                         slot="label"
                         // id="lControlNetWeight_0"
@@ -463,3 +465,25 @@ export class ActionButtonSVG extends React.Component<{
         )
     }
 }
+
+interface ScriptInstallComponentProps {
+    onRefreshHandler: any
+}
+export const ScriptInstallComponent = observer(
+    ({ onRefreshHandler }: ScriptInstallComponentProps) => {
+        return (
+            <div>
+                <sp-label class="missing-error">
+                    Script is not available; Make sure to install it from
+                    Automatic1111 webui
+                </sp-label>
+                <button
+                    className="btnSquare refreshButton"
+                    id="btnResetSettings"
+                    title="Refresh the After Detailer Extension"
+                    onClick={onRefreshHandler}
+                ></button>
+            </div>
+        )
+    }
+)

typescripts/util/ts/api.ts

@@ -1,3 +1,4 @@
+declare let g_sd_url: string
 export async function requestGet(url: string) {
     let json = null
 
@@ -74,3 +75,18 @@ export async function requestFormDataPost(url: string, payload: any) {
         console.warn(e)
     }
 }
+
+export async function isScriptInstalled(script_name: string): Promise<boolean> {
+    let is_installed = false
+    try {
+        const full_url = `${g_sd_url}/sdapi/v1/scripts`
+        const scripts = await requestGet(full_url)
+        is_installed =
+            scripts?.txt2img?.includes(script_name) ||
+            scripts?.img2img?.includes(script_name)
+    } catch (e) {
+        console.error(e)
+    }
+    console.log('is_installed: ', is_installed)
+    return is_installed
+}