From bc92c75f79772a33249974f9608bf9d5b6815d29 Mon Sep 17 00:00:00 2001 From: Abdullah Alfaraj Date: Sat, 8 Jul 2023 17:16:11 +0300 Subject: [PATCH] check if scripts base modules are installed in auto1111 --- typescripts/globalstore.ts | 3 +- .../one_button_prompt/one_button_prompt.tsx | 33 ++- typescripts/sam/sam.tsx | 228 +++++++++++------- typescripts/settings/settings.tsx | 21 -- typescripts/util/elements.tsx | 26 +- typescripts/util/ts/api.ts | 16 ++ 6 files changed, 208 insertions(+), 119 deletions(-) diff --git a/typescripts/globalstore.ts b/typescripts/globalstore.ts index e8e621d..6d4c7d4 100644 --- a/typescripts/globalstore.ts +++ b/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({ Locale: initialLocale == 'zh_CN' ? initialLocale : 'en_US', }) diff --git a/typescripts/one_button_prompt/one_button_prompt.tsx b/typescripts/one_button_prompt/one_button_prompt.tsx index 9b38c33..8ff813e 100644 --- a/typescripts/one_button_prompt/one_button_prompt.tsx +++ b/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
{this.renderContainer()}
+ return ( +
+ {store.data.is_installed ? ( +
+ {this.renderContainer()} +
+ ) : ( + { + console.log(`Refresh ${store.data.script_name}`) + await this.initScript() + }} + > + )} +
+ ) } } diff --git a/typescripts/sam/sam.tsx b/typescripts/sam/sam.tsx index a56b22e..d122491 100644 --- a/typescripts/sam/sam.tsx +++ b/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 ( -
- { - store.data.prompt = event.target.value - }} - > - - - // 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 { + await this.initScript() + } - await io.IO.base64ToLayer( - general.base64UrlToBase64( + renderScript() { + return ( +
+ { + store.data.prompt = event.target.value + }} + > + + + // 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) + } + }, }, - }, - ]} - > -
- ) -}) + { + 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) + } + }, + }, + ]} + > +
+ ) + } + render() { + return ( +
+ {store.data.is_installed ? ( + this.renderScript() + ) : ( + { + console.log(`Refresh ${store.data.script_name}`) + await this.initScript() + }} + > + )} +
+ ) + } +} const containers = document.querySelectorAll('.samContainer') containers.forEach((container) => { diff --git a/typescripts/settings/settings.tsx b/typescripts/settings/settings.tsx index 792ae73..7a9b322 100644 --- a/typescripts/settings/settings.tsx +++ b/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 (
diff --git a/typescripts/util/elements.tsx b/typescripts/util/elements.tsx index f70dbaf..fe64d26 100644 --- a/typescripts/util/elements.tsx +++ b/typescripts/util/elements.tsx @@ -174,7 +174,9 @@ export class SpSliderWithLabel extends React.Component<{ } onChange={this.onSliderValueChangeHandler.bind(this)} > - {Locale(this.props.label as any)}: + + {Locale(this.props.label as any)}: + { + return ( +
+ + Script is not available; Make sure to install it from + Automatic1111 webui + + +
+ ) + } +) diff --git a/typescripts/util/ts/api.ts b/typescripts/util/ts/api.ts index 33d9e6b..0177d03 100644 --- a/typescripts/util/ts/api.ts +++ b/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 { + 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 +}