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

新增 现在参考图可以拖动排序了；

Browse Source 
修复 双参考图生成结果显示问题；
This commit is contained in:
袁涛
2025-09-22 22:39:45 +08:00
parent 690a530031
commit 260a7e4f0f
6 changed files with 430 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/components/HistoryPanel.tsx
View File

@@ -612,11 +612,20 @@ export const HistoryPanel: React.FC<{
)}
onClick={() => {
selectGeneration(generation.id);
// 设置画布图像为参考图像，如果没有参考图像则使用第一个输出资产
// 设置画布图像为生成结果图像，而不是参考图像
let imageUrl = null;
// 首先尝试获取参考图像
if (generation.sourceAssets && generation.sourceAssets.length > 0) {
// 优先使用生成结果图像
if (generation.outputAssets && generation.outputAssets.length > 0) {
const asset = generation.outputAssets[0];
if (asset.url) {
const uploadedUrl = getUploadedImageUrl(generation, 0);
imageUrl = uploadedUrl || asset.url;
}
}
// 如果没有生成结果图像，则使用参考图像
if (!imageUrl && generation.sourceAssets && generation.sourceAssets.length > 0) {
// 参考图像在uploadResults中从索引outputAssets.length开始
const outputAssetsCount = generation.outputAssets?.length || 0;
const uploadResultIndex = outputAssetsCount; // 第一个参考图像
@@ -628,8 +637,57 @@ export const HistoryPanel: React.FC<{
}
}
// 如果没有参考图像，则使用生成结果图像
if (!imageUrl && generation.outputAssets && generation.outputAssets.length > 0) {
if (imageUrl) {
// 检查是否是Blob URL并且可能已经失效
if (imageUrl.startsWith('blob:')) {
// 预先检查Blob URL是否有效
fetch(imageUrl)
.then(response => {
if (!response.ok) {
// Blob URL失效，尝试从AppStore重新获取
const { getBlob } = useAppStore.getState();
const blob = getBlob(imageUrl);
if (blob) {
console.log('从AppStore找到Blob，重新创建URL...');
const newUrl = URL.createObjectURL(blob);
setCanvasImage(newUrl);
} else {
// 如果AppStore中也没有，直接设置原URL，让ImageCanvas处理
setCanvasImage(imageUrl);
}
} else {
// Blob URL有效，直接使用
setCanvasImage(imageUrl);
}
})
.catch(() => {
// 网络错误，尝试从AppStore重新获取
const { getBlob } = useAppStore.getState();
const blob = getBlob(imageUrl);
if (blob) {
console.log('从AppStore找到Blob，重新创建URL...');
const newUrl = URL.createObjectURL(blob);
setCanvasImage(newUrl);
} else {
// 如果AppStore中也没有，直接设置原URL，让ImageCanvas处理
setCanvasImage(imageUrl);
}
});
} else {
// 非Blob URL直接设置
setCanvasImage(imageUrl);
}
}
}}
onMouseEnter={(e) => {
// 设置当前悬停的记录
setHoveredRecord({type: 'generation', id: generation.id});
// 优先显示生成结果图像，如果没有生成结果图像则显示参考图像
let imageUrl = null;
// 优先使用生成结果图像
if (generation.outputAssets && generation.outputAssets.length > 0) {
const asset = generation.outputAssets[0];
if (asset.url) {
const uploadedUrl = getUploadedImageUrl(generation, 0);
@@ -637,19 +695,8 @@ export const HistoryPanel: React.FC<{
}
}
if (imageUrl) {
setCanvasImage(imageUrl);
}
}}
onMouseEnter={(e) => {
// 设置当前悬停的记录
setHoveredRecord({type: 'generation', id: generation.id});
// 优先显示参考图像，如果没有参考图像则显示生成结果图像
let imageUrl = null;
// 首先尝试获取参考图像
if (generation.sourceAssets && generation.sourceAssets.length > 0) {
// 如果没有生成结果图像，则使用参考图像
if (!imageUrl && generation.sourceAssets && generation.sourceAssets.length > 0) {
// 参考图像在uploadResults中从索引outputAssets.length开始
const outputAssetsCount = generation.outputAssets?.length || 0;
const uploadResultIndex = outputAssetsCount; // 第一个参考图像
@@ -657,12 +704,6 @@ export const HistoryPanel: React.FC<{
(generation.sourceAssets[0].url ? generation.sourceAssets[0].url : null);
}
// 如果没有参考图像，则使用生成结果图像
if (!imageUrl) {
imageUrl = getUploadedImageUrl(generation, 0) ||
(generation.outputAssets && generation.outputAssets.length > 0 && generation.outputAssets[0].url ? generation.outputAssets[0].url : null);
}
if (imageUrl) {
// 创建图像对象以获取尺寸
const img = new Image();
@@ -769,11 +810,20 @@ export const HistoryPanel: React.FC<{
}}
>
{(() => {
// 优先显示参考图像，如果没有参考图像则显示生成结果图像
// 优先显示生成结果图像，如果没有生成结果图像则显示参考图像
let imageUrl = null;
// 首先尝试获取参考图像
if (generation.sourceAssets && generation.sourceAssets.length > 0) {
// 优先使用生成结果图像
if (generation.outputAssets && generation.outputAssets.length > 0) {
const asset = generation.outputAssets[0];
if (asset.url) {
const uploadedUrl = getUploadedImageUrl(generation, 0);
imageUrl = uploadedUrl || asset.url;
}
}
// 如果没有生成结果图像，则使用参考图像
if (!imageUrl && generation.sourceAssets && generation.sourceAssets.length > 0) {
// 参考图像在uploadResults中从索引outputAssets.length开始
const outputAssetsCount = generation.outputAssets?.length || 0;
const uploadResultIndex = outputAssetsCount; // 第一个参考图像
@@ -781,12 +831,6 @@ export const HistoryPanel: React.FC<{
(generation.sourceAssets[0].url ? generation.sourceAssets[0].url : null);
}
// 如果没有参考图像，则使用生成结果图像
if (!imageUrl) {
imageUrl = getUploadedImageUrl(generation, 0) ||
(generation.outputAssets && generation.outputAssets.length > 0 && generation.outputAssets[0].url ? generation.outputAssets[0].url : null);
}
if (imageUrl) {
return <img src={imageUrl} alt="生成的变体" className="w-full h-full object-cover" />;
} else {
@@ -919,11 +963,20 @@ export const HistoryPanel: React.FC<{
onClick={() => {
selectEdit(edit.id);
selectGeneration(null);
// 设置画布图像为参考图像，如果没有参考图像则使用第一个输出资产
// 设置画布图像为编辑结果图像，而不是参考图像
let imageUrl = null;
// 首先尝试获取参考图像
if (edit.sourceAssets && edit.sourceAssets.length > 0) {
// 优先使用编辑结果图像
if (edit.outputAssets && edit.outputAssets.length > 0) {
const asset = edit.outputAssets[0];
if (asset.url) {
const uploadedUrl = getUploadedImageUrl(edit, 0);
imageUrl = uploadedUrl || asset.url;
}
}
// 如果没有编辑结果图像，则使用参考图像
if (!imageUrl && edit.sourceAssets && edit.sourceAssets.length > 0) {
// 参考图像在uploadResults中从索引outputAssets.length开始
const outputAssetsCount = edit.outputAssets?.length || 0;
const uploadResultIndex = outputAssetsCount; // 第一个参考图像
@@ -935,8 +988,57 @@ export const HistoryPanel: React.FC<{
}
}
// 如果没有参考图像，则使用编辑结果图像
if (!imageUrl && edit.outputAssets && edit.outputAssets.length > 0) {
if (imageUrl) {
// 检查是否是Blob URL并且可能已经失效
if (imageUrl.startsWith('blob:')) {
// 预先检查Blob URL是否有效
fetch(imageUrl)
.then(response => {
if (!response.ok) {
// Blob URL失效，尝试从AppStore重新获取
const { getBlob } = useAppStore.getState();
const blob = getBlob(imageUrl);
if (blob) {
console.log('从AppStore找到Blob，重新创建URL...');
const newUrl = URL.createObjectURL(blob);
setCanvasImage(newUrl);
} else {
// 如果AppStore中也没有，直接设置原URL，让ImageCanvas处理
setCanvasImage(imageUrl);
}
} else {
// Blob URL有效，直接使用
setCanvasImage(imageUrl);
}
})
.catch(() => {
// 网络错误，尝试从AppStore重新获取
const { getBlob } = useAppStore.getState();
const blob = getBlob(imageUrl);
if (blob) {
console.log('从AppStore找到Blob，重新创建URL...');
const newUrl = URL.createObjectURL(blob);
setCanvasImage(newUrl);
} else {
// 如果AppStore中也没有，直接设置原URL，让ImageCanvas处理
setCanvasImage(imageUrl);
}
});
} else {
// 非Blob URL直接设置
setCanvasImage(imageUrl);
}
}
}}
onMouseEnter={(e) => {
// 设置当前悬停的记录
setHoveredRecord({type: 'edit', id: edit.id});
// 优先显示编辑结果图像，如果没有编辑结果图像则显示参考图像
let imageUrl = null;
// 优先使用编辑结果图像
if (edit.outputAssets && edit.outputAssets.length > 0) {
const asset = edit.outputAssets[0];
if (asset.url) {
const uploadedUrl = getUploadedImageUrl(edit, 0);
@@ -944,19 +1046,8 @@ export const HistoryPanel: React.FC<{
}
}
if (imageUrl) {
setCanvasImage(imageUrl);
}
}}
onMouseEnter={(e) => {
// 设置当前悬停的记录
setHoveredRecord({type: 'edit', id: edit.id});
// 优先显示参考图像，如果没有参考图像则显示编辑结果图像
let imageUrl = null;
// 首先尝试获取参考图像
if (edit.sourceAssets && edit.sourceAssets.length > 0) {
// 如果没有编辑结果图像，则使用参考图像
if (!imageUrl && edit.sourceAssets && edit.sourceAssets.length > 0) {
// 参考图像在uploadResults中从索引outputAssets.length开始
const outputAssetsCount = edit.outputAssets?.length || 0;
const uploadResultIndex = outputAssetsCount; // 第一个参考图像
@@ -964,12 +1055,6 @@ export const HistoryPanel: React.FC<{
(edit.sourceAssets[0].url ? edit.sourceAssets[0].url : null);
}
// 如果没有参考图像，则使用编辑结果图像
if (!imageUrl) {
imageUrl = getUploadedImageUrl(edit, 0) ||
(edit.outputAssets && edit.outputAssets.length > 0 && edit.outputAssets[0].url ? edit.outputAssets[0].url : null);
}
if (imageUrl) {
// 创建图像对象以获取尺寸
const img = new Image();
@@ -1016,11 +1101,20 @@ export const HistoryPanel: React.FC<{
}}
>
{(() => {
// 优先显示参考图像，如果没有参考图像则显示编辑结果图像
// 优先显示编辑结果图像，如果没有编辑结果图像则显示参考图像
let imageUrl = null;
// 首先尝试获取参考图像
if (edit.sourceAssets && edit.sourceAssets.length > 0) {
// 优先使用编辑结果图像
if (edit.outputAssets && edit.outputAssets.length > 0) {
const asset = edit.outputAssets[0];
if (asset.url) {
const uploadedUrl = getUploadedImageUrl(edit, 0);
imageUrl = uploadedUrl || asset.url;
}
}
// 如果没有编辑结果图像，则使用参考图像
if (!imageUrl && edit.sourceAssets && edit.sourceAssets.length > 0) {
// 参考图像在uploadResults中从索引outputAssets.length开始
const outputAssetsCount = edit.outputAssets?.length || 0;
const uploadResultIndex = outputAssetsCount; // 第一个参考图像
@@ -1028,12 +1122,6 @@ export const HistoryPanel: React.FC<{
(edit.sourceAssets[0].url ? edit.sourceAssets[0].url : null);
}
// 如果没有参考图像，则使用编辑结果图像
if (!imageUrl) {
imageUrl = getUploadedImageUrl(edit, 0) ||
(edit.outputAssets && edit.outputAssets.length > 0 && edit.outputAssets[0].url ? edit.outputAssets[0].url : null);
}
if (imageUrl) {
return <img src={imageUrl} alt="编辑的变体" className="w-full h-full object-cover" />;
} else {