@dickpy/dsh-imagegen 1.0.3 → 1.0.5

package/lib/index.js

@@ -14,7 +14,7 @@ import { spawn } from "node:child_process";
 /** Settings namespace this plugin owns (host settings seam + bridge). */
 const IMAGEGEN_SETTINGS_NAMESPACE = "dsh-imagegen";
 /** Published package version shared by the host updater and the client UI. */
-const PLUGIN_VERSION = "1.0.3";
+const PLUGIN_VERSION = "1.0.5";
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 const SETTINGS_API = {
 	describe: "/api/dsh-imagegen/settings/describe",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dickpy/dsh-imagegen",
   "description": "AI 生图 (image generation) plugin for the dsh web GUI: text-to-image and image-to-image through a configurable OpenAI-compatible endpoint (gpt-image-2 / gpt-image-1 / dall-e-3), with a settings card for api_url / api_key and a sidebar entry opening a split-pane generation studio.",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/ImageGenPanel.tsx

@@ -42,6 +42,13 @@ const DETAILS = ['', 'standard', 'high'] as const
 
 const PROMPT_MAX = 2000
 const REF_IMAGE_MAX_BYTES = 10 * 1024 * 1024
+const PREVIEW_SCALE_MIN = 0.5
+const PREVIEW_SCALE_MAX = 3
+const PREVIEW_SCALE_STEP = 0.25
+
+function clampPreviewScale(scale: number): number {
+  return Math.min(PREVIEW_SCALE_MAX, Math.max(PREVIEW_SCALE_MIN, scale))
+}
 
 /** Read the current config from the settings scope snapshot. */
 function useConfig(scope: ImageGenScope): ImageGenConfig | undefined {
@@ -133,11 +140,14 @@ export function ImageGenPanel(props: {
   const [history, setHistory] = useState<HistoryEntry[]>([])
   const [viewingHistoryId, setViewingHistoryId] = useState<string | null>(null)
   const [preview, setPreview] = useState<{ images: GeneratedImage[]; index: number } | null>(null)
+  const [previewScale, setPreviewScale] = useState(1)
+  const [promptCopied, setPromptCopied] = useState(false)
   const [update, setUpdate] = useState<UpdateInfo | null>(null)
   const [updating, setUpdating] = useState(false)
   const [updateMessage, setUpdateMessage] = useState<string | null>(null)
   const [updateResult, setUpdateResult] = useState<'success' | 'failed' | null>(null)
   const fileInput = useRef<HTMLInputElement>(null)
+  const previewStage = useRef<HTMLDivElement>(null)
   const elapsed = useElapsed(generating, startedAt)
 
   // Load the host-persisted history once on mount (it lives in ~/.dsh on the
@@ -242,10 +252,20 @@ export function ImageGenPanel(props: {
   /** Open the full-screen image preview at a given index. */
   const openPreview = (previewImages: GeneratedImage[], index: number): void => {
     setPreview({ images: previewImages, index })
+    setPreviewScale(1)
+    setPromptCopied(false)
+  }
+
+  const closePreview = (): void => {
+    setPreview(null)
+    setPreviewScale(1)
+    setPromptCopied(false)
   }
 
   /** Step the preview by ±1, wrapping around. */
   const stepPreview = (delta: number): void => {
+    setPreviewScale(1)
+    setPromptCopied(false)
     setPreview(current => {
       if (current === null) return null
       const total = current.images.length
@@ -257,14 +277,30 @@ export function ImageGenPanel(props: {
   useEffect(() => {
     if (preview === null) return
     const onKey = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') setPreview(null)
+      if (event.key === 'Escape') closePreview()
       else if (event.key === 'ArrowLeft') stepPreview(-1)
       else if (event.key === 'ArrowRight') stepPreview(1)
+      else if (event.key === '+' || event.key === '=') setPreviewScale(current => clampPreviewScale(current + PREVIEW_SCALE_STEP))
+      else if (event.key === '-') setPreviewScale(current => clampPreviewScale(current - PREVIEW_SCALE_STEP))
+      else if (event.key === '0') setPreviewScale(1)
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
   }, [preview])
 
+  // A scaled image owns real scrollable space, rather than being visually
+  // transformed and clipped. Recenter the viewport after every zoom or slide.
+  useEffect(() => {
+    if (preview === null) return
+    const frame = window.requestAnimationFrame(() => {
+      const stage = previewStage.current
+      if (stage === null) return
+      stage.scrollLeft = Math.max(0, (stage.scrollWidth - stage.clientWidth) / 2)
+      stage.scrollTop = Math.max(0, (stage.scrollHeight - stage.clientHeight) / 2)
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [preview, previewScale])
+
   /** Load a past generation's images into the canvas. */
   const viewHistoryEntry = async (entry: HistoryEntry): Promise<void> => {
     try {
@@ -321,6 +357,42 @@ export function ImageGenPanel(props: {
   const generateDisabled = generating || !enabled || !configured
   const viewingEntry = viewingHistoryId === null ? null : history.find(entry => entry.id === viewingHistoryId) ?? null
   const previewImage = preview === null ? null : preview.images[preview.index] ?? null
+  const previewFrameScale = Math.max(1, previewScale)
+  const previewImageScale = previewScale / previewFrameScale
+
+  const copyPreviewPrompt = async (text: string): Promise<void> => {
+    try {
+      if (navigator.clipboard?.writeText !== undefined) {
+        await navigator.clipboard.writeText(text)
+      } else {
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        const copied = document.execCommand('copy')
+        textarea.remove()
+        if (!copied) throw new Error('copy failed')
+      }
+      setPromptCopied(true)
+      window.setTimeout(() => { setPromptCopied(false) }, 1800)
+    } catch {
+      setPromptCopied(false)
+    }
+  }
+
+  const addPreviewToEdit = (): void => {
+    if (previewImage === null || preview === null) return
+    setMode('edit')
+    setRefImage({
+      dataUrl: srcOf(previewImage),
+      name: `dsh-image-${preview.index + 1}.${extensionOf(previewImage.mime)}`,
+    })
+    if (prompt.trim() === '' && previewImage.revisedPrompt !== undefined) setPrompt(previewImage.revisedPrompt)
+    setError(null)
+    closePreview()
+  }
 
   return (
     <div className={css.panel}>
@@ -569,7 +641,7 @@ export function ImageGenPanel(props: {
                   <span className={css.canvasHistoryTag}>{tt('history.viewing', { time: formatTime(viewingEntry.createdAt) })}</span>
                 ) : null}
               </div>
-              <div className={css.grid}>
+              <div className={css.grid} data-count={images.length}>
                 {images.map((image, index) => (
                   <figure
                     key={index}
@@ -677,9 +749,9 @@ export function ImageGenPanel(props: {
             role="dialog"
             aria-modal="true"
             aria-label={tt('preview.title')}
-            onClick={() => { setPreview(null) }}
+            onClick={closePreview}
           >
-            <button type="button" className={css.lightboxClose} aria-label={tt('preview.close')} onClick={() => { setPreview(null) }}>
+            <button type="button" className={css.lightboxClose} aria-label={tt('preview.close')} title={tt('preview.close')} onClick={closePreview}>
               <svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
             </button>
             {preview.images.length > 1 ? (
@@ -693,25 +765,66 @@ export function ImageGenPanel(props: {
               </>
             ) : null}
             <figure className={css.lightboxFigure} onClick={(event) => { event.stopPropagation() }}>
-              <img
-                className={css.lightboxImage}
-                src={srcOf(previewImage)}
-                alt={previewImage.revisedPrompt ?? tt('preview.title')}
-              />
+              <div
+                ref={previewStage}
+                className={css.lightboxStage}
+                onWheel={(event) => {
+                  event.preventDefault()
+                  setPreviewScale(current => clampPreviewScale(current + (event.deltaY < 0 ? PREVIEW_SCALE_STEP : -PREVIEW_SCALE_STEP)))
+                }}
+              >
+                <div
+                  className={css.lightboxScaleFrame}
+                  style={{ width: `${previewFrameScale * 100}%`, height: `${previewFrameScale * 100}%` }}
+                >
+                  <img
+                    className={css.lightboxImage}
+                    style={{ width: `${previewImageScale * 100}%`, height: `${previewImageScale * 100}%` }}
+                    src={srcOf(previewImage)}
+                    alt={previewImage.revisedPrompt ?? tt('preview.title')}
+                  />
+                </div>
+              </div>
+              <div className={css.lightboxTools} role="group" aria-label={tt('preview.zoomControls')}>
+                <button type="button" className={css.lightboxTool} aria-label={tt('preview.zoomOut')} title={tt('preview.zoomOut')} onClick={() => { setPreviewScale(current => clampPreviewScale(current - PREVIEW_SCALE_STEP)) }}>
+                  <svg viewBox="0 0 16 16" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><circle cx="7" cy="7" r="4.2"/><path d="M4.8 7h4.4M13 13l-2.8-2.8"/></svg>
+                </button>
+                <button type="button" className={css.lightboxZoomLevel} aria-label={tt('preview.zoomReset')} title={tt('preview.zoomReset')} onClick={() => { setPreviewScale(1) }}>
+                  {tt('preview.zoomLevel', { percent: Math.round(previewScale * 100) })}
+                </button>
+                <button type="button" className={css.lightboxTool} aria-label={tt('preview.zoomIn')} title={tt('preview.zoomIn')} onClick={() => { setPreviewScale(current => clampPreviewScale(current + PREVIEW_SCALE_STEP)) }}>
+                  <svg viewBox="0 0 16 16" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><circle cx="7" cy="7" r="4.2"/><path d="M7 4.8v4.4M4.8 7h4.4M13 13l-2.8-2.8"/></svg>
+                </button>
+              </div>
               {previewImage.revisedPrompt !== undefined ? (
-                <figcaption className={css.lightboxCaption} title={previewImage.revisedPrompt}>
-                  {tt('revisedPrompt', { prompt: previewImage.revisedPrompt })}
-                </figcaption>
+                <div className={css.lightboxCaptionRow}>
+                  <figcaption className={css.lightboxCaption} title={previewImage.revisedPrompt}>
+                    {tt('revisedPrompt', { prompt: previewImage.revisedPrompt })}
+                  </figcaption>
+                  <button type="button" className={css.lightboxCopy} aria-label={tt(promptCopied ? 'preview.copied' : 'preview.copyPrompt')} title={tt(promptCopied ? 'preview.copied' : 'preview.copyPrompt')} onClick={() => { void copyPreviewPrompt(previewImage.revisedPrompt!) }}>
+                    {promptCopied ? (
+                      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8l3 3 7-7"/></svg>
+                    ) : (
+                      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="5" y="5" width="7" height="8" rx="1"/><path d="M3 10V3.8c0-.44.36-.8.8-.8H9"/></svg>
+                    )}
+                    <span>{tt(promptCopied ? 'preview.copied' : 'preview.copyPrompt')}</span>
+                  </button>
+                </div>
               ) : null}
               <div className={css.lightboxMeta}>
                 <span className={css.lightboxIndex}>{tt('preview.index', { index: preview.index + 1, total: preview.images.length })}</span>
-                <a
-                  className={css.lightboxDownload}
-                  href={srcOf(previewImage)}
-                  download={`dsh-image-${preview.index + 1}.${extensionOf(previewImage.mime)}`}
-                >
-                  {tt('download')}
-                </a>
+                <span className={css.lightboxActions}>
+                  <button type="button" className={css.lightboxEdit} onClick={addPreviewToEdit}>
+                    {tt('preview.addToEdit')}
+                  </button>
+                  <a
+                    className={css.lightboxDownload}
+                    href={srcOf(previewImage)}
+                    download={`dsh-image-${preview.index + 1}.${extensionOf(previewImage.mime)}`}
+                  >
+                    {tt('download')}
+                  </a>
+                </span>
               </div>
             </figure>
           </div>,

package/src/client/locales.ts

@@ -72,6 +72,14 @@ export const zh = {
   'preview.prev': '上一张',
   'preview.next': '下一张',
   'preview.index': '{index} / {total}',
+  'preview.zoomControls': '图片缩放控制',
+  'preview.zoomIn': '放大',
+  'preview.zoomOut': '缩小',
+  'preview.zoomReset': '重置缩放',
+  'preview.zoomLevel': '{percent}%',
+  'preview.copyPrompt': '复制提示词',
+  'preview.copied': '已复制',
+  'preview.addToEdit': '添加到图生图',
   // config banner
   'config.missing': '尚未配置 API：请前往「设置 → 插件 → 可配置」为 AI 生图填写 api_url 与 api_key。',
   'config.configured': '已连接 {url}',
@@ -178,6 +186,14 @@ export const en: Record<keyof typeof zh, string> = {
   'preview.prev': 'Previous',
   'preview.next': 'Next',
   'preview.index': '{index} / {total}',
+  'preview.zoomControls': 'Image zoom controls',
+  'preview.zoomIn': 'Zoom in',
+  'preview.zoomOut': 'Zoom out',
+  'preview.zoomReset': 'Reset zoom',
+  'preview.zoomLevel': '{percent}%',
+  'preview.copyPrompt': 'Copy prompt',
+  'preview.copied': 'Copied',
+  'preview.addToEdit': 'Add to image to image',
   'config.missing': 'API not configured: open "Settings → Plugins → Configurable" and fill in api_url and api_key for AI Image.',
   'config.configured': 'Connected to {url}',
   'config.disabled': 'The plugin is disabled — re-enable it in Settings.',

package/src/client/panel.module.css

@@ -798,9 +798,15 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  flex: 1;
+  min-height: 0;
   gap: 14px;
-  align-content: start;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.grid[data-count='1'] .imageCard {
+  grid-area: 1 / 1 / 3 / 3;
 }
 
 .imageCard {
@@ -813,6 +819,7 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   overflow: hidden;
   background: var(--dsw-alias-bg-layer-2);
   cursor: zoom-in;
+  min-height: 0;
 }
 
 .imageCard:focus-visible {
@@ -822,8 +829,9 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 
 .image {
   display: block;
+  flex: 1;
+  min-height: 0;
   width: 100%;
-  aspect-ratio: 1 / 1;
   object-fit: cover;
   background: var(--dsw-alias-bg-base);
 }
@@ -971,11 +979,11 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 .lightboxNav[data-dir='prev'] {
-  left: 16px;
+  left: max(20px, calc(50% - 640px));
 }
 
 .lightboxNav[data-dir='next'] {
-  right: 16px;
+  right: max(20px, calc(50% - 640px));
 }
 
 .lightboxFigure {
@@ -984,19 +992,91 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   gap: 10px;
   margin: 0;
   max-width: min(1100px, calc(100vw - 160px));
-  max-height: calc(100vh - 48px);
+  width: min(1100px, calc(100vw - 160px));
+  height: min(820px, calc(100vh - 48px));
+  min-height: 0;
+}
+
+.lightboxStage {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: auto;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.lightboxScaleFrame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100%;
+  min-height: 100%;
 }
 
 .lightboxImage {
+  display: block;
   max-width: 100%;
-  max-height: calc(100vh - 160px);
+  max-height: 100%;
   object-fit: contain;
   border-radius: 10px;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
-  background: rgba(255, 255, 255, 0.04);
+}
+
+.lightboxTools {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.lightboxTool,
+.lightboxZoomLevel,
+.lightboxCopy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  cursor: pointer;
+}
+
+.lightboxTool,
+.lightboxZoomLevel {
+  height: 32px;
+}
+
+.lightboxTool {
+  width: 32px;
+  border-radius: 50%;
+}
+
+.lightboxZoomLevel {
+  min-width: 58px;
+  padding: 0 9px;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.lightboxTool:hover,
+.lightboxZoomLevel:hover,
+.lightboxCopy:hover {
+  background: rgba(255, 255, 255, 0.26);
+}
+
+.lightboxCaptionRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .lightboxCaption {
+  flex: 1;
+  min-width: 0;
   font-size: 12px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.9);
@@ -1006,6 +1086,17 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   overflow: hidden;
 }
 
+.lightboxCopy {
+  flex: none;
+  gap: 5px;
+  min-height: 28px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
 .lightboxMeta {
   display: flex;
   align-items: center;
@@ -1019,8 +1110,16 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   font-variant-numeric: tabular-nums;
 }
 
-.lightboxDownload {
+.lightboxActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lightboxDownload,
+.lightboxEdit {
   padding: 4px 14px;
+  font: inherit;
   font-size: 12.5px;
   font-weight: 500;
   color: #fff;
@@ -1028,12 +1127,51 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   border: 1px solid rgba(255, 255, 255, 0.28);
   border-radius: 999px;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.lightboxDownload:hover {
+.lightboxDownload:hover,
+.lightboxEdit:hover {
   background: rgba(255, 255, 255, 0.26);
 }
 
+.lightboxEdit {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+}
+
+@media (max-width: 720px) {
+  .lightbox {
+    padding: 16px;
+  }
+
+  .lightboxFigure {
+    width: calc(100vw - 32px);
+    max-width: none;
+  }
+
+  .lightboxNav[data-dir='prev'] {
+    left: 20px;
+  }
+
+  .lightboxNav[data-dir='next'] {
+    right: 20px;
+  }
+
+  .lightboxCaptionRow,
+  .lightboxMeta {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .lightboxCopy,
+  .lightboxActions {
+    align-self: flex-end;
+  }
+}
+
 @keyframes dshImageGenSpin {
   to { transform: rotate(360deg); }
 }

package/src/protocol.ts

@@ -8,7 +8,7 @@
 export const IMAGEGEN_SETTINGS_NAMESPACE = 'dsh-imagegen'
 
 /** Published package version shared by the host updater and the client UI. */
-export const PLUGIN_VERSION = '1.0.3'
+export const PLUGIN_VERSION = '1.0.5'
 
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 export const SETTINGS_API = {