allow environment variables to be changed

Author: ddPn08

i18n/en.ts

@@ -79,4 +79,5 @@ export const en: LangConfig = {
     'webui/config/embeddings-dir': 'Embeddings directory',
     'webui/config/xformers': 'Enable xformers',
     'webui/config/custom': 'Custom arguments',
+    'webui/config/env': 'Environment variables',
 }

i18n/ja.ts

@@ -78,4 +78,5 @@ export const ja: LangConfig = {
     'webui/config/embeddings-dir': 'Embeddingsディレクトリ',
     'webui/config/xformers': 'xformersを有効にする',
     'webui/config/custom': 'コマンドライン引数',
+    'webui/config/env': "環境変数"
 }

i18n/types.ts

@@ -72,6 +72,7 @@ const LangKeys = [
     'webui/config/hypernetwork-dir',
     'webui/config/xformers',
     'webui/config/custom',
+    'webui/config/env',
 ] as const
 export type LangKeys = (typeof LangKeys)[number]
 export type LangConfig = Record<LangKeys, string>

src/features/stable-diffusion-webui/index.ts

@@ -51,7 +51,7 @@ class StableDiffusionWebUI {
         )
 
         this.ipc.handle('webui/running', () => this.ps !== null)
-        this.ipc.handle('webui/launch', (_, args, commit) => this.launch(args, commit))
+        this.ipc.handle('webui/launch', (_, args, env, commit) => this.launch(args, env, commit))
         this.ipc.handle('webui/stop', this.stop.bind(this))
         this.ipc.handle('webui/logs', () => this.logs)
         this.ipc.handle('webui/port', () => this.port)
@@ -125,7 +125,7 @@ class StableDiffusionWebUI {
         this.ipc.emit('log', 'Installation finished🎉')
     }
 
-    public async launch(args: string, commit = 'master') {
+    public async launch(args: string, env: Record<string, any>, commit = 'master') {
         if (this.ps) throw new Error('already running.')
         const git = this.git()
         try {
@@ -139,6 +139,7 @@ class StableDiffusionWebUI {
             cwd: path.join(this.dir, 'repository'),
             env: {
                 COMMANDLINE_ARGS: args,
+                ...env,
             },
         })
         this.ps.stdout?.on('data', (data: Buffer) => {

src/features/stable-diffusion-webui/ipc.ts

@@ -21,7 +21,7 @@ export interface ClientToServerEvents {
     'folder/open': () => void
     'webui/running': () => boolean
     'webui/logs': () => string[]
-    'webui/launch': (args: string, commit: string) => number
+    'webui/launch': (args: string, env: Record<string, any>, commit: string) => number
     'webui/stop': () => void
     'webui/port': () => number
     'webui/data-dir': () => string

src/web/lib/config.ts

@@ -15,6 +15,7 @@ export type Config = {
     'webui/args/hypernetwork-dir': string
     'webui/args/xformers': boolean
     'webui/args/custom': string
+    'webui/settings/env': string
 }
 
 const defaultConfig: Config = {
@@ -42,6 +43,7 @@ const defaultConfig: Config = {
     ),
     'webui/args/xformers': true,
     'webui/args/custom': '',
+    'webui/settings/env': '',
 }
 
 const merge = (obj: any) => {

src/web/pages/webui/launcher.tsx

@@ -33,6 +33,15 @@ const StyledIconButton = styled(IconButton)`
   font-size: 1.5rem;
 `
 
+const extractString = (str: string) => {
+  const regex = /(['"])((?:\\\1|.)*?)\1/
+  const match = str.match(regex)
+  if (match) {
+    return match[2]
+  }
+  return str
+}
+
 export const createArgs = () => {
   let result = ''
   for (const [key, val] of Object.entries(config)) {
@@ -47,11 +56,22 @@ export const createArgs = () => {
   return result
 }
 
+export const createEnv = () => {
+  const result: Record<string, any> = {}
+  const envs = config['webui/settings/env'].split(',')
+  for (const v of envs) {
+    if (!v.includes('=') || v.split('=').length < 2) continue
+    const [key, value] = v.split('=')
+    result[key!] = extractString(value!)
+  }
+  return result
+}
+
 export const Launcher: Component = () => {
   const theme = useTheme()
   const toast = useToast()
   const [t] = useI18n()
-  const { setUrl, onLaunch } = useContext(WebUIContext)
+  const { url, setUrl, onLaunch } = useContext(WebUIContext)
   const [gitLog, setGitLog] = createSignal<LogResult<DefaultLogFields>['all']>([])
   const [logs, setLogs] = createSignal<string[]>([])
   const [installed, setInstalled] = createSignal(true)
@@ -63,16 +83,18 @@ export const Launcher: Component = () => {
     setLogs((prev) => [...prev, ...logs])
 
     const re = /Running on local URL: (.*)/
-    const url = logs.map((v) => v.match(re)).filter(Boolean)
-    if (url.length > 0) {
+    const urls = logs.map((v) => v.match(re)).filter(Boolean)
+    if (urls.length > 0) {
       toast({
         title: t('webui/launcher/launched/title'),
         status: 'success',
         duration: 3000,
         isClosable: true,
       })
-      const matches = url[0] as RegExpMatchArray
-      setTimeout(() => onLaunch(matches[1] as string), 500)
+      const matches = urls[0] as RegExpMatchArray
+      const newUrl = matches[1] as string
+      if (newUrl == url()) return
+      setTimeout(() => onLaunch(newUrl), 500)
     }
   }
 
@@ -211,7 +233,12 @@ export const Launcher: Component = () => {
             onClick={() => {
               setRunning(true)
               setLogs([])
-              ipc.webui.invoke('webui/launch', createArgs(), config['webui/git/commit'].slice(0, 6))
+              ipc.webui.invoke(
+                'webui/launch',
+                createArgs(),
+                createEnv(),
+                config['webui/git/commit'].slice(0, 6),
+              )
               ipc.webui.once('webui/close', () => {
                 setUrl('')
                 setRunning(false)

src/web/pages/webui/settings.tsx

@@ -118,6 +118,13 @@ export const Settings: Component = () => {
       />
       <br />
 
+      <Label>{t('webui/config/env')}</Label>
+      <Input
+        value={config['webui/settings/env']}
+        onInput={(e) => setConfig('webui/settings/env', e.currentTarget.value)}
+      />
+      <br />
+
       <HStack>
         <Button
           onClick={() => {