root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: image response handler

Browse Source
This commit is contained in:
jialin
2025-11-12 19:55:31 +08:00
parent e8eea9573e
commit a34c375e2d
2 changed files with 97 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/hooks/use-text-image.ts
+96 -50
View File
@@ -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();
src/utils/fetch-chunk-data.ts
+1 -8
View File
@@ -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 => {