From a34c375e2d335401793b881c3a960012f09708cf Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 12 Nov 2025 19:54:20 +0800 Subject: [PATCH] fix: image response handler --- src/pages/playground/hooks/use-text-image.ts | 146 ++++++++++++------- src/utils/fetch-chunk-data.ts | 9 +- 2 files changed, 97 insertions(+), 58 deletions(-) diff --git a/src/pages/playground/hooks/use-text-image.ts b/src/pages/playground/hooks/use-text-image.ts index 86eb7c05..0b3ef0f2 100644 --- a/src/pages/playground/hooks/use-text-image.ts +++ b/src/pages/playground/hooks/use-text-image.ts @@ -2,8 +2,7 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller'; import { extractErrorMessage, promptList } from '@/pages/playground/config'; import { fetchChunkedData, - fetchChunkedDataPostFormData, - readLargeStreamData as readStreamData + fetchChunkedDataPostFormData } from '@/utils/fetch-chunk-data'; import { useIntl } from '@umijs/max'; import _ from 'lodash'; @@ -151,57 +150,104 @@ export default function useTextImage(props: any) { return; } console.log('result:', result); - const { reader, decoder } = result; - 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, - errorMessage: extractErrorMessage(chunk) - }); - return; - } - chunk?.data?.forEach((item: any) => { - const imgItem = newImageList[item.index]; - if (item.b64_json && _.get(parameters, chunkFields)) { - imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING); - } else if (item.b64_json) { - imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`; - } - const progress = item.progress; + if (requestIdRef.current !== currentRequestId) { + // If the request ID has changed, ignore this chunk + // return; + } + // if (result?.error) { + // setTokenResult({ + // error: true, + // errorMessage: extractErrorMessage(result) + // }); + // return; + // } + result?.data?.forEach((item: any, index: number) => { + const imgItem = newImageList[index]; - newImageList[item.index] = { - dataUrl: imgItem.dataUrl, - height: imgSize[1], - width: imgSize[0], - maxHeight: `${imgSize[1]}px`, - maxWidth: `${imgSize[0]}px`, - uid: imgItem.uid, - span: imgItem.span, - loading: _.get(parameters, chunkFields) ? progress < 100 : false, - preview: API === CREAT_IMAGE_API ? progress >= 100 : false, - progress: progress - }; - }); - if ( - done && - !chunk?.error && - newImageList.some((item) => item.progress < 100) - ) { - setTokenResult({ - error: true, - errorMessage: intl.formatMessage({ - id: 'playground.image.generate.error' - }) - }); + if (item.b64_json) { + imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`; } - setImageList([...newImageList]); + + const progress = 100; + + newImageList[index] = { + dataUrl: imgItem.dataUrl, + height: imgSize[1], + width: imgSize[0], + maxHeight: `${imgSize[1]}px`, + maxWidth: `${imgSize[0]}px`, + uid: imgItem.uid, + span: imgItem.span, + loading: _.get(parameters, chunkFields) ? progress < 100 : false, + preview: API === CREAT_IMAGE_API ? progress >= 100 : false, + progress: progress + }; }); + console.log('newImageList:', newImageList); + // if ( + // done && + // !chunk?.error && + // newImageList.some((item) => item.progress < 100) + // ) { + // setTokenResult({ + // error: true, + // errorMessage: intl.formatMessage({ + // id: 'playground.image.generate.error' + // }) + // }); + // } + setImageList([...newImageList]); + // const { reader, decoder } = result; + // 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, + // errorMessage: extractErrorMessage(chunk) + // }); + // return; + // } + // chunk?.data?.forEach((item: any) => { + // const imgItem = newImageList[item.index]; + // if (item.b64_json && _.get(parameters, chunkFields)) { + // imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING); + // } else if (item.b64_json) { + // imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`; + // } + // const progress = item.progress; + + // newImageList[item.index] = { + // dataUrl: imgItem.dataUrl, + // height: imgSize[1], + // width: imgSize[0], + // maxHeight: `${imgSize[1]}px`, + // maxWidth: `${imgSize[0]}px`, + // uid: imgItem.uid, + // span: imgItem.span, + // loading: _.get(parameters, chunkFields) ? progress < 100 : false, + // preview: API === CREAT_IMAGE_API ? progress >= 100 : false, + // 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(); diff --git a/src/utils/fetch-chunk-data.ts b/src/utils/fetch-chunk-data.ts index 053bea08..422c5550 100644 --- a/src/utils/fetch-chunk-data.ts +++ b/src/utils/fetch-chunk-data.ts @@ -78,14 +78,7 @@ export const fetchChunkedData = async (params: { if (!response.ok) { return await errorHandler(response); } - const reader = response?.body?.getReader(); - const decoder = new TextDecoder('utf-8', { - fatal: true - }); - return { - reader, - decoder - }; + return response.json(); }; const createFormData = (data: any): FormData => {