@dickpy/dsh-imagegen 1.0.7 → 1.0.19

package/src/client/templates.module.css

@@ -0,0 +1,453 @@
+/**
+ * Prompt-template library styles. Same conventions as panel.module.css:
+ * scoped box-sizing, dsh --dsw-* tokens, no leakage outside the overlay
+ * subtree.
+ */
+
+.overlay,
+.overlay *,
+.overlay *::before,
+.overlay *::after {
+  box-sizing: border-box;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: var(--dsw-alias-bg-mask-1);
+  color: var(--dsw-alias-label-primary);
+  font-family: var(--dsw-font-family);
+}
+
+.shell {
+  display: flex;
+  flex-direction: column;
+  width: min(1180px, 100%);
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 14px;
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
+}
+
+/* --- header ------------------------------------------------------------ */
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px 10px;
+  flex: none;
+}
+
+.heading {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.meta {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.headerActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.close:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* --- toolbar ----------------------------------------------------------- */
+
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 18px 12px;
+  flex: none;
+}
+
+.search {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 9px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.search:focus {
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.search::placeholder {
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.categoryRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 64px;
+  overflow-y: auto;
+}
+
+.categoryPill {
+  height: 26px;
+  padding: 0 11px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.categoryPill:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.categoryPill[data-active] {
+  border-color: var(--dsw-alias-brand-primary);
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-bg-base);
+}
+
+.notice {
+  margin: 0 18px 10px;
+  padding: 8px 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 9px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  flex: none;
+}
+
+/* --- body / grid -------------------------------------------------------- */
+
+.body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 2px 18px 14px;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 100%;
+  min-height: 220px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+}
+
+.spinner {
+  width: 26px;
+  height: 26px;
+  border: 2px solid var(--dsw-alias-border-l2);
+  border-top-color: var(--dsw-alias-brand-primary);
+  border-radius: 50%;
+  animation: dsh-imagegen-templates-spin 0.9s linear infinite;
+}
+
+@keyframes dsh-imagegen-templates-spin {
+  to { transform: rotate(360deg); }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 11px;
+  background: var(--dsw-alias-bg-layer-1);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: var(--dsw-alias-label-primary);
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-brand-primary);
+  transform: translateY(-1px);
+}
+
+.thumbWrap {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.featuredBadge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-bg-base);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 9px 11px 10px;
+  min-width: 0;
+}
+
+.cardTitle {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cardCategory {
+  flex: none;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.cardSource {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- footer ------------------------------------------------------------- */
+
+.footer {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 18px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+.attribution {
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-dimmed);
+  min-width: 0;
+}
+
+.sourceLink {
+  flex: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--dsw-alias-brand-primary);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.sourceLink:hover {
+  text-decoration: underline;
+}
+
+/* --- detail overlay ----------------------------------------------------- */
+
+.detailOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 34px;
+  background: var(--dsw-alias-bg-mask-1);
+}
+
+.detail {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+  width: min(980px, 100%);
+  max-height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 14px;
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
+}
+
+.detailMedia {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.detailImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.detailInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px;
+}
+
+.detailTitle {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.detailMeta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.detailLink {
+  color: var(--dsw-alias-brand-primary);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detailLink:hover {
+  text-decoration: underline;
+}
+
+.detailPrompt {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 12px;
+  overflow-y: auto;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font-size: 12.5px;
+  line-height: 1.6;
+  font-family: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+}
+
+.detailActions {
+  display: flex;
+  gap: 8px;
+  flex: none;
+  position: sticky;
+  bottom: 0;
+  margin: 0 -18px -18px;
+  padding: 12px 18px;
+  background: var(--dsw-alias-bg-base);
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+/* Narrow shells: stack the detail pane. */
+@media (max-width: 760px) {
+  .detail {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 3fr) minmax(0, 4fr);
+  }
+}

package/src/engine.ts

@@ -42,6 +42,33 @@ const MAX_EDIT_IMAGE_BYTES = 10 * 1024 * 1024
 /** Sizes dall-e-3 accepts; anything else falls back to its square default. */
 const DALLE3_SIZES = new Set(['1024x1024', '1792x1024', '1024x1792'])
 
+/** Whether the model is an xAI Grok Imagine model (grok-imagine-image,
+ *  grok-imagine-image-2.0, …). Grok Imagine speaks JSON on both endpoints
+ *  and exposes its own aspect-ratio / response-format knobs instead of the
+ *  OpenAI size/quality/detail passthrough. */
+function isGrokImagine(model: string): boolean {
+  return /^grok-imagine(?:-|$)/.test(model)
+}
+
+/** The panel's aspect ratios mapped to the closest OpenAI pixel size
+ *  (gpt-image-2 / generic OpenAI-compatible endpoints). */
+const OPENAI_SIZE_BY_RATIO: Readonly<Record<string, string>> = {
+  '1:1': '1024x1024',
+  '3:4': '1024x1536',
+  '4:3': '1536x1024',
+  '9:16': '1024x1792',
+  '2:3': '1024x1536',
+  '3:2': '1536x1024',
+  '16:9': '1792x1024',
+  '21:9': '1792x1024',
+}
+
+/** Panel ratios that need renaming for a model's vocabulary. Grok documents
+ *  20:9 as its ultra-wide ratio, so the panel's 21:9 label is sent as 20:9. */
+const GROK_ASPECT_ALIASES: Readonly<Record<string, string>> = {
+  '21:9': '20:9',
+}
+
 /** Content-type extension hints for URL-fetched images. */
 function mimeOfExtension(path: string): string | undefined {
   const match = /\.([a-z0-9]+)$/i.exec(path)
@@ -87,17 +114,44 @@ function effectiveParams(request: GenerateRequest): {
   size?: string
   quality?: string
   detail?: string
+  aspect_ratio?: string
+  resolution?: string
+  response_format?: string
 } {
   const model = request.model.trim() === '' ? 'gpt-image-2' : request.model.trim()
   // dall-e-3 has no quality/detail knobs and only produces one image.
   if (model === 'dall-e-3') {
-    const size = DALLE3_SIZES.has(request.size) ? request.size : '1024x1024'
+    const pixel = OPENAI_SIZE_BY_RATIO[request.size]
+    const size = (pixel !== undefined && DALLE3_SIZES.has(pixel)) ? pixel : '1024x1024'
     return { model, size }
   }
+  // Grok Imagine: the panel's aspect ratios are sent as-is (21:9 aliased to
+  // the documented 20:9), the clarity tiers become the resolution parameter
+  // (the API documents 1k / 2k only, so 4k falls back to 2k), and base64
+  // output keeps the temporary signed result URLs from expiring before the
+  // host downloads them.
+  if (isGrokImagine(model)) {
+    return {
+      model,
+      ...request.size !== '' && request.size !== 'auto'
+        ? { aspect_ratio: GROK_ASPECT_ALIASES[request.size] ?? request.size }
+        : {},
+      ...request.quality !== '' && request.quality !== 'auto'
+        ? { resolution: request.quality === '4k' ? '2k' : request.quality }
+        : {},
+      response_format: 'b64_json',
+    }
+  }
+  // OpenAI-compatible endpoints: nearest pixel size, clarity tiers mapped to
+  // the quality levels (1k→low / 2k→medium / 4k→high), detail passthrough.
   return {
     model,
-    ...request.size !== '' && request.size !== 'auto' ? { size: request.size } : {},
-    ...request.quality !== '' && request.quality !== 'auto' ? { quality: request.quality } : {},
+    ...request.size !== '' && request.size !== 'auto' && OPENAI_SIZE_BY_RATIO[request.size] !== undefined
+      ? { size: OPENAI_SIZE_BY_RATIO[request.size] }
+      : {},
+    ...request.quality === '1k' ? { quality: 'low' } : {},
+    ...request.quality === '2k' ? { quality: 'medium' } : {},
+    ...request.quality === '4k' ? { quality: 'high' } : {},
     ...request.detail !== '' ? { detail: request.detail } : {},
   }
 }
@@ -178,14 +232,27 @@ async function requestOneImage(
     if (bytes.byteLength > MAX_EDIT_IMAGE_BYTES) {
       throw new ImageGenError('参考图片超过 10MB 上限', 'edit-image-too-large')
     }
-    const form = new FormData()
-    form.append('image', new Blob([bytes], { type: parsed.mime }), `reference.${extensionOf(parsed.mime)}`)
-    form.append('prompt', request.prompt)
-    form.append('model', params.model)
-    if (params.size !== undefined) form.append('size', params.size)
-    if (params.quality !== undefined) form.append('quality', params.quality)
-    if (params.detail !== undefined) form.append('detail', params.detail)
-    body = form
+    // Grok Imagine /images/edits takes a JSON image_url object (a base64 data
+    // URI is accepted) instead of OpenAI's multipart form-data upload.
+    if (isGrokImagine(params.model)) {
+      headers['content-type'] = 'application/json'
+      body = JSON.stringify({
+        model: params.model,
+        prompt: request.prompt,
+        image: { url: request.image, type: 'image_url' },
+        ...params.aspect_ratio !== undefined ? { aspect_ratio: params.aspect_ratio } : {},
+        response_format: 'b64_json',
+      })
+    } else {
+      const form = new FormData()
+      form.append('image', new Blob([bytes], { type: parsed.mime }), `reference.${extensionOf(parsed.mime)}`)
+      form.append('prompt', request.prompt)
+      form.append('model', params.model)
+      if (params.size !== undefined) form.append('size', params.size)
+      if (params.quality !== undefined) form.append('quality', params.quality)
+      if (params.detail !== undefined) form.append('detail', params.detail)
+      body = form
+    }
   } else {
     headers['content-type'] = 'application/json'
     body = JSON.stringify({ prompt: request.prompt, ...params } as Record<string, unknown>)