🐛 fix: Fix ImageInfo reload (#474)

src/modules/ImageInfo/features/formatInfo.ts

@@ -8,31 +8,49 @@ const formatPrompt = (prompt: string) => {
 export const formatInfo = (info: string) => {
   if (!info || info === 'undefined') return;
   if (!info.includes('<br>')) return;
-  const data = info.split('<br>').filter(Boolean);
+  const data = info?.split('<br>').filter(Boolean);
-  const config = data[2] || data[1];
+
+  let position: any;
+  let negative: any;
+  let config: any;
+
+  switch (data.length) {
+    case 1: {
+      config = data[0] || info;
+      break;
+    }
+    case 2: {
+      if (data[0].includes('Negative prompt:')) {
+        negative = data[0];
+        config = data[1];
+      } else {
+        position = data[0];
+        config = data[1];
+      }
+      break;
+    }
+    case 3: {
+      position = data[0];
+      negative = data[1];
+      config = data[2];
+    }
+  }
+
   if (!config.includes(',')) return;
   const clearConfigs = config
     .split(',')
-    .map((item) => item.trim())
+    .map((item: any) => item?.trim())
     .filter(Boolean);
 
   const configs: any = {};
 
   for (const item of clearConfigs) {
     const items = item.split(':');
-    configs[items[0].trim()] = items[1].trim();
+    configs[items[0]?.trim()] = items[1]?.trim();
   }
 
-  let position = data[0];
+  position = position ? formatPrompt(position) : '';
-  let negative = data[2] ? data[1] : '';
+  negative = negative ? formatPrompt(negative.split('Negative prompt: ')[1]) : '';
-
-  if (position.includes('Negative prompt:')) {
-    negative = position;
-    position = '';
-  }
-
-  position = formatPrompt(position);
-  negative = formatPrompt(negative.split('Negative prompt: ')[1]);
 
   return {
     config: configs,

src/modules/ImageInfo/page.tsx

@@ -10,10 +10,7 @@ const ImageInfo = (parentId: string, containerId: string) => {
   const settingsDiv = document.createElement('div') as HTMLDivElement;
   settingsDiv.id = containerId.replace('#', '');
 
-  (gradioApp().querySelector(parentId) as HTMLDivElement).insertBefore(
+  (gradioApp().querySelector(parentId) as HTMLDivElement).append(settingsDiv);
-    settingsDiv,
-    (gradioApp().querySelector(parentId) as HTMLDivElement).firstChild,
-  );
 
   createRoot(settingsDiv).render(
     <StrictMode>

vite.config.ts

@@ -1,4 +1,5 @@
 import react from '@vitejs/plugin-react-swc';
+import { consola } from 'consola';
 import dotenv from 'dotenv';
 import { resolve } from 'node:path';
 import * as process from 'node:process';
@@ -11,7 +12,7 @@ const isProduction = process.env.NODE_ENV === 'production';
 const SD_HOST = process.env.SD_HOST || '127.0.0.1';
 const SD_PORT = process.env.SD_PORT || 7860;
 
-console.log(SD_HOST, SD_PORT);
+consola.info('Proxy:', `http://${SD_HOST}:${SD_PORT}`);
 export default defineConfig({
   base: '/dev',
   build: {