chore: set image raw size to form

gpustack · Jan 18, 2025 · fccca24 · fccca24
1 parent 47ced11
commit fccca24
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 22 deletions.
diff --git a/src/hooks/use-broadcast.ts b/src/hooks/use-broadcast.ts
@@ -0,0 +1,18 @@
+// broadcast channel hook
+
+import { useEffect, useRef } from 'react';
+
+export const useBroadcast = () => {
+  const broadcastChannel = useRef<BroadcastChannel | null>(null);
+
+  useEffect(() => {
+    broadcastChannel.current = new BroadcastChannel('broadcast_channel');
+
+    return () => {
+      broadcastChannel.current?.close();
+      console.log('broadcast channel closed');
+    };
+  }, []);
+
+  return { broadcastChannel };
+};
diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx
@@ -1,4 +1,5 @@
 import TableContext from '@/components/seal-table/table-context';
+import { useBroadcast } from '@/hooks/use-broadcast';
 import useSetChunkRequest, {
   createAxiosToken as generateAxiosToken
 } from '@/hooks/use-chunk-request';
@@ -23,6 +24,7 @@ import { ListItem } from './config/types';
 const INSTANCE_SYNC = 'instance_sync';
 
 const Models: React.FC = () => {
+  const { broadcastChannel } = useBroadcast();
   const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
   const { setChunkRequest: setModelInstanceChunkRequest } =
     useSetChunkRequest();
@@ -148,10 +150,7 @@ const Models: React.FC = () => {
 
   const updateInstanceHandler = (list: any) => {
     setModelInstances(list);
-    window.postMessage(
-      { type: INSTANCE_SYNC, data: list },
-      window.location.origin
-    );
+    broadcastChannel.current?.postMessage({ type: INSTANCE_SYNC, data: list });
   };
 
   const createModelsChunkRequest = useCallback(async () => {
@@ -274,6 +273,14 @@ const Models: React.FC = () => {
     };
   }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
 
+  useEffect(() => {
+    broadcastChannel.current!.onmessage = (event) => {
+      if (event.data.type === INSTANCE_SYNC) {
+        console.log('event.data.data', event.data.data);
+      }
+    };
+  }, []);
+
   return (
     <TableContext.Provider
       value={{

diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
@@ -629,7 +629,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   const handleUpdateImageList = useCallback((base64List: any) => {
     console.log('updateimagelist=========', base64List);
-    const img = _.get(base64List, '[0].dataUrl', '');
+    const currentImg = _.get(base64List, '[0]', {});
+    const img = _.get(currentImg, 'dataUrl', '');
     setUploadList(base64List);
     setImage(img);
     setActiveImgUid(_.get(base64List, '[0].uid', ''));
@@ -638,6 +639,24 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       isResetNeeded: true
     });
     setImageList([]);
+    form.current?.form?.setFieldsValue({
+      size: 'custom',
+      width: currentImg.rawWidth || 512,
+      height: currentImg.rawHeight || 512
+    });
+    setParams((pre: object) => {
+      return {
+        ...pre,
+        size: 'custom',
+        width: currentImg.rawWidth || 512,
+        height: currentImg.rawHeight || 512
+      };
+    });
+    updateCacheFormData({
+      size: 'custom',
+      width: currentImg.rawWidth || 512,
+      height: currentImg.rawHeight || 512
+    });
   }, []);
 
   const handleOnSave = useCallback(

diff --git a/src/pages/playground/components/upload-img.tsx b/src/pages/playground/components/upload-img.tsx
@@ -3,7 +3,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
 import { RcFile } from 'antd/es/upload';
-import { debounce } from 'lodash';
+import { debounce, round } from 'lodash';
 import React, { useCallback, useRef } from 'react';
 
 interface UploadImgProps {
@@ -15,7 +15,12 @@ interface UploadImgProps {
   children?: React.ReactNode;
   accept?: string;
   handleUpdateImgList: (
-    imgList: { dataUrl: string; uid: number | string }[]
+    imgList: {
+      dataUrl: string;
+      uid: number | string;
+      rawWidth: number;
+      rawHeight: number;
+    }[]
   ) => void;
 }
 
@@ -31,6 +36,25 @@ const UploadImg: React.FC<UploadImgProps> = ({
   const intl = useIntl();
   const uploadRef = useRef<any>(null);
 
+  const getImgSize = useCallback(
+    (url: string): Promise<{ rawWidth: number; rawHeight: number }> => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          resolve({
+            rawWidth: round(img.width, 0),
+            rawHeight: round(img.height, 0)
+          });
+        };
+        img.onerror = () => {
+          resolve({ rawWidth: 0, rawHeight: 0 });
+        };
+        img.src = url;
+      });
+    },
+    []
+  );
+
   const getBase64 = useCallback((file: RcFile): Promise<string> => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -41,9 +65,19 @@ const UploadImg: React.FC<UploadImgProps> = ({
   }, []);
 
   const debouncedUpdate = useCallback(
-    debounce((base64List: { dataUrl: string; uid: number | string }[]) => {
-      handleUpdateImgList(base64List);
-    }, 300),
+    debounce(
+      (
+        base64List: {
+          dataUrl: string;
+          uid: number | string;
+          rawWidth: number;
+          rawHeight: number;
+        }[]
+      ) => {
+        handleUpdateImgList(base64List);
+      },
+      300
+    ),
     [handleUpdateImgList, intl]
   );
 
@@ -52,23 +86,32 @@ const UploadImg: React.FC<UploadImgProps> = ({
       const { fileList } = info;
 
       const newFileList = await Promise.all(
-        fileList.map(async (item: UploadFile) => {
-          if (item.originFileObj && !item.url) {
-            const base64 = await getBase64(item.originFileObj as RcFile);
+        fileList.map(
+          async (
+            item: UploadFile & { rawWidth: number; rawHeight: number }
+          ) => {
+            if (item.originFileObj && !item.url) {
+              const base64 = await getBase64(item.originFileObj as RcFile);
+              const { rawWidth, rawHeight } = await getImgSize(base64);
 
-            item.url = base64;
+              item.url = base64;
+              item.rawWidth = rawWidth;
+              item.rawHeight = rawHeight;
+            }
+            return item;
           }
-          return item;
-        })
+        )
       );
 
       if (newFileList.length > 0) {
         const base64List = newFileList
           .filter((sitem) => sitem.url)
-          .map((item: UploadFile) => {
+          .map((item: UploadFile & { rawHeight: number; rawWidth: number }) => {
             return {
               dataUrl: item.url as string,
-              uid: item.uid
+              uid: item.uid,
+              rawWidth: item.rawWidth,
+              rawHeight: item.rawHeight
             };
           });
 

diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
@@ -367,14 +367,15 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
     ]
   },
   {
-    type: 'Input',
+    type: 'TextArea',
     name: 'negative_prompt', // e.g. ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),
     label: {
       text: 'playground.image.params.negativePrompt',
       isLocalized: true
     },
     attrs: {
-      trim: false
+      trim: false,
+      autoSize: { minRows: 2, maxRows: 2 }
     },
     rules: [
       {
@@ -450,7 +451,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
       min: 256,
       max: 3200,
       step: 64,
-      inputnumber: false
+      inputnumber: true
     },
     rules: [
       {
@@ -470,7 +471,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
       min: 256,
       max: 3200,
       step: 64,
-      inputnumber: false
+      inputnumber: true
     },
     rules: [
       {