优化

api/system.py

@@ -321,7 +321,11 @@ def create_router(app_version: str) -> APIRouter:
         content_type = response.headers.get("content-type") or "image/png"
         if not content_type.lower().startswith("image/"):
             content_type = "image/png"
-        return Response(content=response.content, media_type=content_type)
+        return Response(
+            content=response.content,
+            media_type=content_type,
+            headers={"Cache-Control": "private, max-age=3600"},
+        )
 
     @router.get("/image-thumbnails/{image_path:path}", include_in_schema=False)
     async def get_image_thumbnail(image_path: str):

web/src/app/image/components/image-results.tsx

@@ -4,7 +4,7 @@ import { memo, useEffect, useRef, useState } from "react";
 import { Clock3, Download, LoaderCircle, RotateCcw, ScanSearch, Sparkles, Trash2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { downloadImageSrc, normalizeImageUrl } from "@/lib/image-url";
+import { downloadImageSrc, normalizeImageUrl, warmImageBlob } from "@/lib/image-url";
 import { cn } from "@/lib/utils";
 import type { ImageConversation, ImageTurnStatus, StoredImage, StoredReferenceImage } from "@/store/image-conversations";
 
@@ -46,7 +46,7 @@ export type ImageLightboxItem = {
 type ImageResultsProps = {
   selectedConversation: ImageConversation | null;
   onOpenLightbox: (images: ImageLightboxItem[], index: number) => void;
-  onContinueEdit: (conversationId: string, image: StoredImage | StoredReferenceImage) => void;
+  onContinueEdit: (conversationId: string, image: StoredImage | StoredReferenceImage) => void | Promise<void>;
   onReversePrompt: (conversationId: string, turnId: string, image: StoredImage) => void | Promise<void>;
   reversePromptLoadingImageIds: string[];
   onDeletePrompt: (conversationId: string, turnId: string) => void;
@@ -154,6 +154,7 @@ export function ImageResults({
   }, []);
 
   const [imageDimensions, setImageDimensions] = useState<Record<string, string>>({});
+  const [continueEditLoadingImageIds, setContinueEditLoadingImageIds] = useState<string[]>([]);
   const [now, setNow] = useState(() => Date.now());
   const hasPendingTurns = selectedConversation?.turns.some(
     (turn) => !turn.resultsDeleted && (turn.status === "queued" || turn.status === "generating"),
@@ -172,6 +173,20 @@ export function ImageResults({
     setImageDimensions((current) => current[id] === dimensions ? current : { ...current, [id]: dimensions });
   };
 
+
+  const continueEdit = async (
+    conversationId: string,
+    image: StoredImage | StoredReferenceImage,
+    loadingId: string,
+  ) => {
+    setContinueEditLoadingImageIds((current) => current.includes(loadingId) ? current : [...current, loadingId]);
+    try {
+      await onContinueEdit(conversationId, image);
+    } finally {
+      setContinueEditLoadingImageIds((current) => current.filter((item) => item !== loadingId));
+    }
+  };
+
   if (!selectedConversation) {
     return (
       <div className="flex h-full min-h-[260px] items-center justify-center text-center sm:min-h-[420px]">
@@ -284,9 +299,14 @@ export function ImageResults({
                               variant="outline"
                               size="sm"
                               className="rounded-full border-stone-200 bg-white text-stone-700 hover:bg-stone-50"
-                              onClick={() => onContinueEdit(selectedConversation.id, image)}
+                              onClick={() => void continueEdit(selectedConversation.id, image, `${turn.id}-reference-${index}`)}
+                              disabled={continueEditLoadingImageIds.includes(`${turn.id}-reference-${index}`)}
                             >
-                              <Sparkles className="size-4" />
+                              {continueEditLoadingImageIds.includes(`${turn.id}-reference-${index}`) ? (
+                                <LoaderCircle className="size-4 animate-spin" />
+                              ) : (
+                                <Sparkles className="size-4" />
+                              )}
                               加入编辑
                             </Button>
                           </div>
@@ -330,6 +350,9 @@ export function ImageResults({
                                   event.currentTarget.naturalWidth,
                                   event.currentTarget.naturalHeight,
                                 );
+                                if (image.url && !image.b64_json) {
+                                  warmImageBlob(image.url);
+                                }
                               }}
                             />
                             <div className="flex flex-col gap-1 px-0 py-1 text-[10px] sm:flex-row sm:items-center sm:justify-between sm:gap-2 sm:px-0 sm:py-3 sm:text-xs">
@@ -358,10 +381,15 @@ export function ImageResults({
                                   variant="outline"
                                   size="sm"
                                   className="h-7 w-7 rounded-full border-stone-200 bg-white px-0 text-[10px] text-stone-700 hover:bg-stone-50 sm:h-8 sm:w-fit sm:px-3 sm:text-xs"
-                                  onClick={() => onContinueEdit(selectedConversation.id, image)}
+                                  onClick={() => void continueEdit(selectedConversation.id, image, image.id)}
+                                  disabled={continueEditLoadingImageIds.includes(image.id)}
                                   aria-label="加入编辑"
                                 >
-                                  <Sparkles className="size-3 sm:size-4" />
+                                  {continueEditLoadingImageIds.includes(image.id) ? (
+                                    <LoaderCircle className="size-3 animate-spin sm:size-4" />
+                                  ) : (
+                                    <Sparkles className="size-3 sm:size-4" />
+                                  )}
                                   <span className="hidden sm:inline">加入编辑</span>
                                 </Button>
                                 <Button
@@ -545,6 +573,7 @@ function getProgressLabel(progress?: string) {
     generation_success: "生成成功",
     generating: "正在生成中",
   };
+
   return labels[progress || ""] || "正在生成中";
 }
 

web/src/app/image/page.tsx

@@ -40,7 +40,7 @@ import {
   type RedeemCode,
   type ThirdPartyImageModelOption,
 } from "@/lib/api";
-import { fetchImageBlob } from "@/lib/image-url";
+import { fetchImageBlob, releaseImageBlob, warmImageBlob } from "@/lib/image-url";
 import { formatChinaDateTime, formatChinaShortDateTime } from "@/lib/time";
 import { useAuthGuard } from "@/lib/use-auth-guard";
 import { Input } from "@/components/ui/input";
@@ -433,15 +433,19 @@ async function buildReferenceImageFromStoredImage(image: StoredImage, fileName:
     return null;
   }
   const file = await fetchImageAsFile(image.url, fileName);
-  return {
-    referenceImage: {
-      name: file.name,
-      type: file.type || "image/png",
-      dataUrl: await readFileAsDataUrl(file),
-      source: "result" as const,
-    },
-    file,
-  };
+  try {
+    return {
+      referenceImage: {
+        name: file.name,
+        type: file.type || "image/png",
+        dataUrl: await readFileAsDataUrl(file),
+        source: "result" as const,
+      },
+      file,
+    };
+  } finally {
+    releaseImageBlob(image.url);
+  }
 }
 
 function hasImageTaskResult(item: NonNullable<ImageTask["data"]>[number] | null | undefined) {
@@ -466,6 +470,11 @@ function taskDataToStoredImages(image: StoredImage, task: ImageTask): StoredImag
         durationMs: task.duration_ms,
       }];
     }
+    resultItems.forEach((item) => {
+      if (item.url && !item.b64_json) {
+        warmImageBlob(item.url);
+      }
+    });
     return resultItems.map((item, index) => ({
       ...image,
       id: index === 0 ? image.id : `${image.id}-extra-${index}`,
@@ -1753,7 +1762,6 @@ function ImagePageContent({ session }: { session: StoredAuthSession }) {
 
         setReferenceImages((prev) => [...prev, nextReference.referenceImage]);
         setReferenceImageFiles((prev) => [...prev, nextReference.file]);
-        setImagePrompt("");
         textareaRef.current?.focus();
         toast.success("已加入当前参考图，继续输入描述即可编辑");
       } catch (error) {
@@ -1773,11 +1781,6 @@ function ImagePageContent({ session }: { session: StoredAuthSession }) {
 
     setSelectedConversationId(conversationId);
     setImagePrompt(turn.prompt);
-    setReferenceImages([]);
-    setReferenceImageFiles([]);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
     textareaRef.current?.focus();
     toast.success("已复用这条提示词");
   }, []);

web/src/lib/image-url.ts

@@ -1,6 +1,17 @@
 import webConfig from "@/constants/common-env";
 import { getStoredAuthKey } from "@/store/auth";
 
+type ImageBlobCacheEntry = {
+  promise: Promise<Blob>;
+  size: number;
+  lastUsedAt: number;
+};
+
+const imageBlobCache = new Map<string, ImageBlobCacheEntry>();
+const MAX_IMAGE_BLOB_CACHE_ITEMS = 8;
+const MAX_IMAGE_BLOB_CACHE_BYTES = 64 * 1024 * 1024;
+let imageBlobCacheBytes = 0;
+
 function isBrowserHttps() {
   return typeof window !== "undefined" && window.location.protocol === "https:";
 }
@@ -74,11 +85,11 @@ function imageFetchCandidates(src: string) {
   return Array.from(new Set(candidates.filter(Boolean)));
 }
 
-export async function fetchImageBlob(src: string) {
+async function fetchImageBlobUncached(src: string) {
   let lastError: unknown = null;
   for (const candidate of imageFetchCandidates(src)) {
     try {
-      const response = await fetch(candidate, { cache: "no-store" });
+      const response = await fetch(candidate, { cache: "force-cache" });
       if (response.ok) {
         return response.blob();
       }
@@ -94,7 +105,7 @@ export async function fetchImageBlob(src: string) {
       const apiBase = webConfig.apiUrl.replace(/\/$/, "");
       const authKey = await getStoredAuthKey();
       const response = await fetch(`${apiBase}/api/images/proxy?url=${encodeURIComponent(parsed.toString())}`, {
-        cache: "no-store",
+        cache: "force-cache",
         headers: authKey ? { Authorization: `Bearer ${authKey}` } : undefined,
       });
       if (response.ok) {
@@ -110,6 +121,67 @@ export async function fetchImageBlob(src: string) {
   throw new Error(`读取图片失败${detail}`);
 }
 
+function evictImageBlobCache(protectedKey = "") {
+  while (
+    imageBlobCache.size > MAX_IMAGE_BLOB_CACHE_ITEMS ||
+    imageBlobCacheBytes > MAX_IMAGE_BLOB_CACHE_BYTES
+  ) {
+    const candidate = [...imageBlobCache.entries()]
+      .filter(([key]) => key !== protectedKey)
+      .sort(([, left], [, right]) => left.lastUsedAt - right.lastUsedAt)[0];
+    if (!candidate) return;
+    imageBlobCache.delete(candidate[0]);
+    imageBlobCacheBytes = Math.max(0, imageBlobCacheBytes - candidate[1].size);
+  }
+}
+
+export async function fetchImageBlob(src: string) {
+  const key = normalizeImageUrl(src);
+  const cached = imageBlobCache.get(key);
+  if (cached) {
+    cached.lastUsedAt = Date.now();
+    return cached.promise;
+  }
+
+  const entry: ImageBlobCacheEntry = {
+    promise: Promise.resolve(new Blob()),
+    size: 0,
+    lastUsedAt: Date.now(),
+  };
+  entry.promise = fetchImageBlobUncached(key)
+    .then((blob) => {
+      if (imageBlobCache.get(key) === entry) {
+        entry.size = blob.size;
+        entry.lastUsedAt = Date.now();
+        imageBlobCacheBytes += blob.size;
+        evictImageBlobCache(key);
+      }
+      return blob;
+    })
+    .catch((error) => {
+      if (imageBlobCache.get(key) === entry) {
+        imageBlobCache.delete(key);
+      }
+      throw error;
+    });
+  imageBlobCache.set(key, entry);
+  evictImageBlobCache(key);
+  return entry.promise;
+}
+
+export function warmImageBlob(src: string) {
+  if (!String(src || "").trim()) return;
+  void fetchImageBlob(src).catch(() => undefined);
+}
+
+export function releaseImageBlob(src: string) {
+  const key = normalizeImageUrl(src);
+  const cached = imageBlobCache.get(key);
+  if (!cached) return;
+  imageBlobCache.delete(key);
+  imageBlobCacheBytes = Math.max(0, imageBlobCacheBytes - cached.size);
+}
+
 export async function downloadImageSrc(src: string, filename: string) {
   const blob = await fetchImageBlob(src);
   const objectUrl = URL.createObjectURL(blob);