fix: miss logs

src/components/logs-viewer/styles/pagination.less

@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: rgba(255, 255, 255, 70%);
+  color: rgba(255, 255, 255, 100%);
   gap: 5px;
 
   .ant-btn:hover {
@@ -12,7 +12,7 @@
   }
 
   .ant-btn {
-    background-color: rgba(71, 71, 71, 50%) !important;
+    background-color: rgba(71, 71, 71, 100%) !important;
   }
 
   .pages {

src/hooks/use-chunk-fetch.ts

@@ -1,4 +1,4 @@
-import { split, throttle } from 'lodash';
+import { throttle } from 'lodash';
 import qs from 'query-string';
 import { useEffect, useRef } from 'react';
 
@@ -21,53 +21,52 @@ const useSetChunkFetch = () => {
   const readTextEventStreamData = async (
     reader: ReadableStreamDefaultReader<Uint8Array>,
     decoder: TextDecoder,
-    callback: (data: any) => void
+    callback: (data: any) => void,
+    delay = 200
   ) => {
-    const throttledCallback = throttle((data: any) => {
-      callback(data);
-    }, 200);
+    class BufferManager {
+      private buffer: any[] = [];
+
+      public add(data: any) {
+        this.buffer.push(data);
+      }
+
+      public flush() {
+        if (this.buffer.length > 0) {
+          const currentBuffer = [...this.buffer];
+          this.buffer = [];
+          currentBuffer.forEach((item) => callback(item));
+        }
+      }
+
+      public getBuffer() {
+        return this.buffer;
+      }
+    }
+    const bufferManager = new BufferManager();
+
+    const throttledCallback = throttle(() => {
+      bufferManager.flush();
+    }, delay);
+
+    let isReading = true;
 
     while (true) {
       const { done, value } = await reader.read();
 
       if (done) {
+        isReading = false;
+        bufferManager.flush();
         break;
       }
 
-      const chunk = decoder.decode(value, { stream: true });
-      throttledCallback(chunk);
-    }
-  };
-
-  const readTextEventStreamDataByLine = async (
-    reader: ReadableStreamDefaultReader<Uint8Array>,
-    decoder: TextDecoder,
-    callback: (data: any) => void
-  ) => {
-    const { done, value } = await reader.read();
-    if (done) {
-      return;
-    }
-
-    bufferCacheRef.current += decoder.decode(value, { stream: true });
-    const lines = split(bufferCacheRef.current, /\r?\n/);
-    bufferCacheRef.current = lines.pop();
-    for (const line of lines) {
-      callback(line);
-    }
-
-    await readTextEventStreamDataByLine(reader, decoder, callback);
-  };
-
-  const readTextEventStreamDataByLineWithBuffer = async (
-    reader: ReadableStreamDefaultReader<Uint8Array>,
-    decoder: TextDecoder,
-    callback: (data: any) => void
-  ) => {
-    await readTextEventStreamDataByLine(reader, decoder, callback);
-
-    if (bufferCacheRef.current.length > 0) {
-      callback(bufferCacheRef.current);
+      try {
+        const chunk = decoder.decode(value, { stream: true });
+        bufferManager.add(chunk);
+        throttledCallback();
+      } catch (error) {
+        console.log('error:', error);
+      }
     }
   };
 

src/pages/playground/config/params-config.ts

@@ -14,10 +14,13 @@ export const imageSizeOptions: {
     width: 0,
     height: 0
   },
-  { label: '512x512', value: '512x512', width: 512, height: 512 },
+  { label: '512x512(1:1)', value: '512x512', width: 512, height: 512 },
+  { label: '512x1024(1:2)', value: '512x1024', width: 512, height: 1024 },
   { label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 },
   { label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 },
-  { label: '1024x1024', value: '1024x1024', width: 1024, height: 1024 }
+  { label: '1024x576(16:9)', value: '1024x768', width: 1024, height: 576 },
+  { label: '576x1024(9:16)', value: '1024x768', width: 576, height: 1024 },
+  { label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 }
 ];
 
 export const TTSParamsConfig: ParamsSchema[] = [