diff --git a/src/components/logs-viewer/styles/pagination.less b/src/components/logs-viewer/styles/pagination.less index 11b6de15..28af886f 100644 --- a/src/components/logs-viewer/styles/pagination.less +++ b/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 { diff --git a/src/hooks/use-chunk-fetch.ts b/src/hooks/use-chunk-fetch.ts index 7b9c8636..336c52dd 100644 --- a/src/hooks/use-chunk-fetch.ts +++ b/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, 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, - 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, - 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); + } } }; diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index 0df7b77c..b30df37a 100644 --- a/src/pages/playground/config/params-config.ts +++ b/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[] = [