product/Nano-Banana-AI-Image-Editor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

新增 生成过程中可以中断；

Browse Source 
新增 生成结果上传到OSS；
新增 历史记录使用上传后的图片；
This commit is contained in:
yuantao
2025-09-15 18:30:50 +08:00
parent e325d0fc8d
commit bda049fcd1
7 changed files with 443 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/HistoryPanel.tsx
View File

@@ -39,6 +39,18 @@ export const HistoryPanel: React.FC = () => {
const generations = currentProject?.generations || [];
const edits = currentProject?.edits || [];
// 获取上传后的图片链接
const getUploadedImageUrl = (generationOrEdit: any, index: number) => {
if (generationOrEdit.uploadResults && generationOrEdit.uploadResults[index]) {
const uploadResult = generationOrEdit.uploadResults[index];
if (uploadResult.success && uploadResult.url) {
// 添加参数以降低图片质量
return `${uploadResult.url}?x-oss-process=image/quality,q_50`;
}
}
return null;
};
// 获取当前图像尺寸
const [imageDimensions, setImageDimensions] = React.useState<{ width: number; height: number } | null>(null);
@@ -184,6 +196,13 @@ export const HistoryPanel: React.FC = () => {
>
{generation.outputAssetsBlobUrls && generation.outputAssetsBlobUrls.length > 0 ? (
(() => {
// 首先尝试使用上传后的图片链接
const uploadedUrl = getUploadedImageUrl(generation, 0);
if (uploadedUrl) {
return <img src={uploadedUrl} alt="生成的变体" className="w-full h-full object-cover" />;
}
// 如果没有上传链接，则使用原来的Blob URL
const blobUrl = generation.outputAssetsBlobUrls[0];
const decodedUrl = decodedImages[blobUrl];
if (decodedUrl) {
@@ -239,6 +258,13 @@ export const HistoryPanel: React.FC = () => {
>
{edit.outputAssetsBlobUrls && edit.outputAssetsBlobUrls.length > 0 ? (
(() => {
// 首先尝试使用上传后的图片链接
const uploadedUrl = getUploadedImageUrl(edit, 0);
if (uploadedUrl) {
return <img src={uploadedUrl} alt="编辑的变体" className="w-full h-full object-cover" />;
}
// 如果没有上传链接，则使用原来的Blob URL
const blobUrl = edit.outputAssetsBlobUrls[0];
const decodedUrl = decodedImages[blobUrl];
if (decodedUrl) {
@@ -319,6 +345,35 @@ export const HistoryPanel: React.FC = () => {
</div>
</div>
{/* 上传结果 */}
{gen.uploadResults && gen.uploadResults.length > 0 && (
<div>
<h5 className="text-xs font-medium text-gray-500 mb-2">上传结果</h5>
<div className="space-y-1">
{gen.uploadResults.map((result, index) => (
<div key={index} className="text-xs">
<div className="flex justify-between">
<span>图像 {index + 1}:</span>
<span className={result.success ? 'text-green-600' : 'text-red-600'}>
{result.success ? '成功' : '失败'}
</span>
</div>
{result.success && result.url && (
<div className="text-blue-600 truncate">
{result.url.split('/').pop()}
</div>
)}
{result.error && (
<div className="text-red-600 truncate">
{result.error}
</div>
)}
</div>
))}
</div>
</div>
)}
{/* 参考图像信息 */}
{gen.sourceAssets.length > 0 && (
<div>
@@ -355,6 +410,35 @@ export const HistoryPanel: React.FC = () => {
)}
</div>
{/* 上传结果 */}
{selectedEdit.uploadResults && selectedEdit.uploadResults.length > 0 && (
<div>
<h5 className="text-xs font-medium text-gray-500 mb-2">上传结果</h5>
<div className="space-y-1">
{selectedEdit.uploadResults.map((result, index) => (
<div key={index} className="text-xs">
<div className="flex justify-between">
<span>图像 {index + 1}:</span>
<span className={result.success ? 'text-green-600' : 'text-red-600'}>
{result.success ? '成功' : '失败'}
</span>
</div>
{result.success && result.url && (
<div className="text-blue-600 truncate">
{result.url.split('/').pop()}
</div>
)}
{result.error && (
<div className="text-red-600 truncate">
{result.error}
</div>
)}
</div>
))}
</div>
</div>
)}
{/* 原始生成参考 */}
{parentGen && (
<div>