feat(image): pass reference images to GPT image model for edits
Server: forward canvas/reference images to the image model so extract, continue, and edit requests stay faithful to the source product. - Add ImageRequestOptions.Images and route requests with inputs to the /v1/images/edits endpoint, via multipart upload (default) or JSON image_url payload, selectable through Agent.Image.InputImageTransport. - Extract reference URLs from prompt directives, inline @image tokens, and chat message image/mask contents; fold them into the idempotency key and prepend a reference-fidelity instruction to the prompt. Frontend: - Shrink CanvasToast to a compact top pill. - Paste an internal transparent clipboard node instead of re-uploading when it matches the clipboard image. - Keep agent-project polling alive on stream error while streaming.
This commit is contained in:
@@ -1,27 +1,30 @@
|
||||
.canvas-toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 48px;
|
||||
top: 14px;
|
||||
z-index: 120;
|
||||
width: min(1040px, calc(100vw - 140px));
|
||||
min-height: 126px;
|
||||
box-sizing: border-box;
|
||||
width: fit-content;
|
||||
min-width: 220px;
|
||||
max-width: min(480px, calc(100vw - 32px));
|
||||
min-height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
padding: 0 44px;
|
||||
gap: 12px;
|
||||
padding: 12px 18px;
|
||||
border: 1px solid rgba(224, 229, 238, 0.96);
|
||||
border-radius: 24px;
|
||||
border-radius: 14px;
|
||||
color: #1f2329;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 38px 90px rgba(17, 24, 39, 0.16);
|
||||
box-shadow: 0 14px 36px rgba(17, 24, 39, 0.12);
|
||||
pointer-events: none;
|
||||
transform: translateX(-50%);
|
||||
animation: canvas-toast-enter 180ms cubic-bezier(0.2, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.canvas-toast-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
@@ -29,6 +32,11 @@
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.canvas-toast-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.canvas-toast.success .canvas-toast-icon {
|
||||
background: #45d27c;
|
||||
}
|
||||
@@ -40,9 +48,9 @@
|
||||
.canvas-toast strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 32px;
|
||||
font-weight: 850;
|
||||
line-height: 1.18;
|
||||
font-size: 15px;
|
||||
font-weight: 750;
|
||||
line-height: 1.32;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
@@ -62,26 +70,28 @@
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.canvas-toast {
|
||||
top: 18px;
|
||||
width: calc(100vw - 32px);
|
||||
min-height: 76px;
|
||||
gap: 14px;
|
||||
padding: 16px 18px;
|
||||
border-radius: 18px;
|
||||
top: 0;
|
||||
width: fit-content;
|
||||
min-width: 0;
|
||||
max-width: calc(100vw - 28px);
|
||||
min-height: 50px;
|
||||
gap: 10px;
|
||||
padding: 11px 14px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.canvas-toast-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.canvas-toast-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.canvas-toast strong {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -233,8 +233,9 @@ export function useGenerationStream({
|
||||
closeRef.current = null;
|
||||
},
|
||||
onError: (nextError) => {
|
||||
if (closeAgentProjectPollRef.current) {
|
||||
if (streamingRef.current === streamKey) {
|
||||
closeRef.current = null;
|
||||
startAgentProjectPolling(nextProjectId, threadId);
|
||||
return;
|
||||
}
|
||||
completeChannel(channel);
|
||||
@@ -243,7 +244,6 @@ export function useGenerationStream({
|
||||
closeRef.current = null;
|
||||
}
|
||||
});
|
||||
startAgentProjectPolling(nextProjectId, threadId);
|
||||
},
|
||||
[appendThinkingMessage, applyProject, completeChannel, toUserMessageText, messages.generateError, messages.generateTimeout, setError, startAgentProjectPolling, startGeneratorTaskPolling]
|
||||
);
|
||||
@@ -306,8 +306,9 @@ export function useGenerationStream({
|
||||
closeRef.current = null;
|
||||
},
|
||||
onError: (nextError) => {
|
||||
if (closeAgentProjectPollRef.current) {
|
||||
if (streamingRef.current === streamKey) {
|
||||
closeRef.current = null;
|
||||
startAgentProjectPolling(nextProjectId, payload.threadId);
|
||||
return;
|
||||
}
|
||||
completeChannel(channel);
|
||||
@@ -316,7 +317,6 @@ export function useGenerationStream({
|
||||
closeRef.current = null;
|
||||
}
|
||||
});
|
||||
startAgentProjectPolling(nextProjectId, payload.threadId);
|
||||
},
|
||||
[appendThinkingMessage, applyProject, completeChannel, toUserMessageText, messages.generateError, messages.generateTimeout, setError, startAgentProjectPolling, startGeneratorTaskPolling]
|
||||
);
|
||||
|
||||
@@ -1843,9 +1843,9 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
|
||||
.catch(() => showCanvasToast(t("clipboardCopyFailed"), "error"));
|
||||
};
|
||||
|
||||
const pasteNode = () => {
|
||||
if (!clipboardNode) return;
|
||||
const copy = cloneCanvasNode(clipboardNode, cryptoFallbackId());
|
||||
const pasteNode = (sourceNode = clipboardNode) => {
|
||||
if (!sourceNode) return;
|
||||
const copy = cloneCanvasNode(sourceNode, cryptoFallbackId());
|
||||
setNodes((current) => [...current, copy]);
|
||||
selectOnlyNode(copy.id);
|
||||
setDirty(true);
|
||||
@@ -2145,11 +2145,25 @@ export function CanvasWorkspace({ projectId }: { projectId: string }) {
|
||||
if (isEditableShortcutTarget(event.target)) return;
|
||||
|
||||
const imageFiles = event.clipboardData ? dataTransferImageFiles(event.clipboardData, "clipboard-image") : [];
|
||||
if (imageFiles.length > 0) {
|
||||
event.preventDefault();
|
||||
const pasteImageFiles = () => {
|
||||
const pointer = lastCanvasPointerRef.current;
|
||||
const anchor = pointer ? canvasPointFromClient(pointer.clientX, pointer.clientY) : canvasCenterPoint();
|
||||
void uploadImagesToCanvas(imageFiles, anchor);
|
||||
};
|
||||
if (clipboardNode && imageFiles.length > 0 && isTransparentClipboardNode(clipboardNode)) {
|
||||
event.preventDefault();
|
||||
void shouldUseInternalClipboardNode(clipboardNode, imageFiles).then((useInternalNode) => {
|
||||
if (useInternalNode) {
|
||||
pasteNode(clipboardNode);
|
||||
return;
|
||||
}
|
||||
pasteImageFiles();
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (imageFiles.length > 0) {
|
||||
event.preventDefault();
|
||||
pasteImageFiles();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user