fix: images did not get cleared after clicking stop

src/pages/llmodels/components/deploy-modal.tsx

@@ -343,7 +343,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     }
 
     if (manual) {
-      form.current?.form?.resetFields(resetFieldsByModel);
+      form.current?.form?.setFieldsValue(defaultFormValues);
     }
     // If the item is empty
     setIsGGUF(item.isGGUF);

src/pages/playground/hooks/use-text-image.ts

@@ -5,6 +5,7 @@ import {
   fetchChunkedDataPostFormData,
   readLargeStreamData as readStreamData
 } from '@/utils/fetch-chunk-data';
+import { useIntl } from '@umijs/max';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { CREAT_IMAGE_API, EDIT_IMAGE_API } from '../apis';
@@ -12,6 +13,7 @@ import { CREAT_IMAGE_API, EDIT_IMAGE_API } from '../apis';
 const ODD_STRING = 'AAAABJRU5ErkJgg===';
 
 export default function useTextImage(props: any) {
+  const intl = useIntl();
   const { scroller, paramsRef, chunkFields, API } = props;
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
@@ -34,6 +36,8 @@ export default function useTextImage(props: any) {
   const requestToken = useRef<any>(null);
   const { initialize } = useOverlayScroller();
   const { initialize: innitializeParams } = useOverlayScroller();
+  const streamReaderRef = useRef<any>(null);
+  const requestIdRef = useRef<number>(0);
 
   useEffect(() => {
     if (scroller.current) {
@@ -46,6 +50,11 @@ export default function useTextImage(props: any) {
     }
   }, [innitializeParams]);
 
+  const updateRequestId = () => {
+    requestIdRef.current = requestIdRef.current + 1;
+    return requestIdRef.current;
+  };
+
   const removeBase64Suffix = (str: string, suffix: string) => {
     return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
   };
@@ -78,9 +87,18 @@ export default function useTextImage(props: any) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   };
 
+  const stopDebounce = _.debounce(() => {
+    setImageList([]);
+    setLoading(false);
+  }, 200);
+
   const submitMessage = async (parameters: any) => {
     try {
       if (!parameters.model) return;
+
+      requestToken.current?.abort?.('cancel');
+      requestToken.current = new AbortController();
+      const currentRequestId = updateRequestId();
       const size: any = setImageSize(parameters);
       setLoading(true);
       setMessageId();
@@ -107,9 +125,6 @@ export default function useTextImage(props: any) {
         });
       setImageList(newImageList);
 
-      requestToken.current?.abort?.('cancel');
-      requestToken.current = new AbortController();
-
       let result: any = {};
       if (API === CREAT_IMAGE_API) {
         result = await fetchChunkedData({
@@ -135,10 +150,15 @@ export default function useTextImage(props: any) {
         setImageList([]);
         return;
       }
-
+      console.log('result:', result);
       const { reader, decoder } = result;
-
-      await readStreamData(reader, decoder, (chunk: any) => {
+      streamReaderRef.current = reader;
+      await readStreamData(reader, decoder, (chunk: any, done?: boolean) => {
+        console.log('chunk done:', chunk, done);
+        if (requestIdRef.current !== currentRequestId) {
+          // If the request ID has changed, ignore this chunk
+          return;
+        }
         if (chunk?.error) {
           setTokenResult({
             error: true,
@@ -168,12 +188,25 @@ export default function useTextImage(props: any) {
             progress: progress
           };
         });
+        if (
+          done &&
+          !chunk?.error &&
+          newImageList.some((item) => item.progress < 100)
+        ) {
+          setTokenResult({
+            error: true,
+            errorMessage: intl.formatMessage({
+              id: 'playground.image.generate.error'
+            })
+          });
+        }
         setImageList([...newImageList]);
       });
     } catch (error) {
       console.log('error:', error);
+      updateRequestId();
+      stopDebounce();
       requestToken.current?.abort?.('cancel');
-      setImageList([]);
     } finally {
       setLoading(false);
     }
@@ -187,8 +220,6 @@ export default function useTextImage(props: any) {
 
   const handleStopConversation = () => {
     requestToken.current?.abort?.('stop');
-    setImageList([]);
-    setLoading(false);
   };
 
   useEffect(() => {

src/pages/resources/components/add-worker-macos.tsx

@@ -0,0 +1,69 @@
+import { useIntl } from '@umijs/max';
+import { Space, Typography } from 'antd';
+import React, { useMemo } from 'react';
+
+interface AddWorkerMacOSProps {
+  token?: string;
+}
+
+const registerWorkerSteps = [
+  'Open the quick configuration file.',
+  `Select the "General" option.`,
+  `Select "Worker" as the service role.`,
+  'Enter the Server URL.',
+  'Paste the Token.',
+  `Click "Restart".`
+];
+
+const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = () => {
+  const intl = useIntl();
+  const labels = useMemo(
+    () => ({
+      step1: intl.formatMessage({ id: 'resources.worker.add.step1' }),
+      step2: intl.formatMessage({ id: 'resources.worker.add.step2' }),
+      step2Tips: intl.formatMessage({ id: 'resources.worker.add.step2.tips' }),
+      step3: intl.formatMessage({ id: 'resources.worker.add.step3' }),
+      linuxOrMac: intl.formatMessage({ id: 'resources.worker.linuxormaxos' })
+    }),
+    [intl]
+  );
+  return (
+    <div className="script-install">
+      <h3 className="font-size-14 font-600">1. Install GPUStack</h3>
+      <Typography.Paragraph type="secondary" style={{ paddingLeft: 14 }}>
+        <Typography.Link>Download Package</Typography.Link> and install it on
+        your macOS machine.
+      </Typography.Paragraph>
+      <h3 className="font-size-14 font-600">
+        2. <span dangerouslySetInnerHTML={{ __html: labels.step1 }}></span>
+      </h3>
+      <Typography.Paragraph style={{ paddingLeft: 14 }}>
+        <Typography.Text type="secondary">
+          Click <span className="font-600">Copy the token</span>
+        </Typography.Text>
+      </Typography.Paragraph>
+      <h3 className="m-t-10 font-size-14 font-600">
+        3. {labels.step2}{' '}
+        <span
+          className="font-size-12"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+          dangerouslySetInnerHTML={{
+            __html: `${labels.step2Tips}`
+          }}
+        ></span>
+      </h3>
+      <Typography.Paragraph style={{ paddingLeft: 14 }}>
+        <Space direction="vertical">
+          {registerWorkerSteps.map((step, index) => (
+            <Typography.Text key={index} type="secondary">
+              {index + 1}. {step}
+            </Typography.Text>
+          ))}
+        </Space>
+      </Typography.Paragraph>
+      <h3 className="m-b-0 m-t-10 font-size-14 font-600">4. {labels.step3}</h3>
+    </div>
+  );
+};
+
+export default AddWorkerMacOS;

src/pages/resources/components/add-worker-windows.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface AddWorkerWindowsProps {
+  token?: string;
+}
+
+const AddWorkerWindows: React.FC<AddWorkerWindowsProps> = () => {
+  return <div>add worker in windows</div>;
+};
+
+export default AddWorkerWindows;

src/pages/resources/components/add-worker.tsx

@@ -23,9 +23,22 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
     },
     {
       key: 'container',
-      label: intl.formatMessage({ id: 'resources.worker.container.install' }),
+      label: 'Linux',
+      // icon: <LinuxOutlined />,
       children: <ContainerInstall token={token} />
     }
+    // {
+    //   key: 'macos',
+    //   label: 'macOS',
+    //   icon: <AppleOutlined />,
+    //   children: <MacOS token={token} />
+    // },
+    // {
+    //   key: 'windows',
+    //   label: 'Windows',
+    //   icon: <WindowsOutlined />,
+    //   children: <Windows token={token} />
+    // }
   ];
 
   return (