@dickpy/dsh-imagegen 1.0.20 → 1.2.0

package/src/client/SettingsCard.tsx

@@ -9,17 +9,22 @@
 import { useState } from 'react'
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
-import { CardForm, booleanField, secretField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
+import { CardForm, booleanField, secretField, stringListField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
 import type { ImageGenScope } from './settings-scope.ts'
-import { PLUGIN_VERSION } from '../protocol.ts'
+import { IMAGE_MODEL_API, PROMPT_ENHANCE_API } from '../protocol.ts'
 import css from './settings-card.module.css'
 
 /** The fields this card edits (the namespace's full schema). */
 export interface ImageGenSettings {
   enabled?: boolean
   announceToAgent?: boolean
+  allowAgentImageGeneration?: boolean
   apiUrl?: string
   apiKey?: string
+  imageModels?: string[]
+  promptApiUrl?: string
+  promptApiKey?: string
+  promptModel?: string
 }
 
 /** What the card renders. */
@@ -28,10 +33,15 @@ export interface ImageGenSettingsCardState extends CardShell {
   enabled: CardFieldState
   /** System-prompt announcement flag. */
   announceToAgent: CardFieldState
+  allowAgentImageGeneration: CardFieldState
   /** API base URL. */
   apiUrl: CardFieldState
   /** API key draft (the stored value is never rendered). */
   apiKey: CardFieldState
+  imageModels: CardFieldState
+  promptApiUrl: CardFieldState
+  promptApiKey: CardFieldState
+  promptModel: CardFieldState
 }
 
 /** The registration-side face the card's slot entry injects. */
@@ -53,8 +63,13 @@ export class ImageGenSettingsCardController {
     this.form = new CardForm(scope, [
       booleanField('enabled'),
       booleanField('announceToAgent'),
+      booleanField('allowAgentImageGeneration'),
       textField('apiUrl'),
       secretField('apiKey'),
+      stringListField('imageModels'),
+      textField('promptApiUrl'),
+      secretField('promptApiKey'),
+      textField('promptModel'),
     ], {
       // The redacted wire view never returns the key; a save's outcome is
       // judged by the namespace's secrets sidecar instead.
@@ -67,8 +82,13 @@ export class ImageGenSettingsCardController {
       ...this.form.shell(),
       enabled: this.form.field('enabled'),
       announceToAgent: this.form.field('announceToAgent'),
+      allowAgentImageGeneration: this.form.field('allowAgentImageGeneration'),
       apiUrl: this.form.field('apiUrl'),
       apiKey: this.form.field('apiKey'),
+      imageModels: this.form.field('imageModels'),
+      promptApiUrl: this.form.field('promptApiUrl'),
+      promptApiKey: this.form.field('promptApiKey'),
+      promptModel: this.form.field('promptModel'),
     }
   }
 
@@ -106,6 +126,19 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
   const state = props.useImageGenSettingsCard(snapshot => snapshot)
   const keySet = props.useImageGenKeySet(snapshot => snapshot)
   const [open, setOpen] = useState(false)
+  const [promptModels, setPromptModels] = useState<string[]>([])
+  const [loadingPromptModels, setLoadingPromptModels] = useState(false)
+  const [promptModelsError, setPromptModelsError] = useState<string | null>(null)
+  const [imageModelCandidates, setImageModelCandidates] = useState<string[]>([])
+  const [loadingImageModels, setLoadingImageModels] = useState(false)
+  const [imageModelsError, setImageModelsError] = useState<string | null>(null)
+  const [manualModelsOpen, setManualModelsOpen] = useState(false)
+  const [manualModel, setManualModel] = useState('')
+  const [enhancementOpen, setEnhancementOpen] = useState(false)
+  const [manualPromptModelOpen, setManualPromptModelOpen] = useState(false)
+  const [manualPromptModel, setManualPromptModel] = useState('')
+  const [promptApiOpen, setPromptApiOpen] = useState(false)
+  const [moreOpen, setMoreOpen] = useState(false)
   if (!state.available) return null
   const title = t('settings.title')
   const blocked = !state.dirty || state.invalid || state.saving
@@ -162,10 +195,16 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
         ? (
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{t('settings.readOnly')}</p> : null}
-            <div className={css.versionRow}>
-              <span className={css.versionLabel}>{t('settings.currentVersion')}</span>
-              <code className={css.versionValue}>v{PLUGIN_VERSION}</code>
-            </div>
+            <ValueField
+              id="dsh-imagegen-settings-apiurl"
+              label={t('settings.apiUrl')}
+              hint={t('settings.apiUrlHint')}
+              placeholder="https://api.openai.com/v1"
+              {...fieldProps}
+              {...state.apiUrl}
+              onEdit={(text) => { props.edit('apiUrl', text) }}
+              onReset={() => { props.resetField('apiUrl') }}
+            />
             <ValueField
               id="dsh-imagegen-settings-apikey"
               label={t('settings.apiKey')}
@@ -181,16 +220,216 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
               onClear={() => { props.resetField('apiKey') }}
               canClear={keySet}
             />
+            <div className={css.sectionDivider} />
+            <section className={css.modelSection} aria-label={t('settings.imageModelsTitle')}>
+              <div className={css.sectionHeader}>
+                <div>
+                  <h3 className={css.sectionTitle}>{t('settings.imageModelsTitle')}</h3>
+                  <p className={css.sectionHint}>{t('settings.imageModelsHint')}</p>
+                </div>
+                <button
+                  type="button"
+                  className={css.modelFetch}
+                  disabled={disabled || loadingImageModels}
+                  onClick={() => {
+                    setLoadingImageModels(true)
+                    setImageModelsError(null)
+                    void fetch(IMAGE_MODEL_API.models, { method: 'POST' })
+                      .then(async response => {
+                        const body = await response.json() as { ok?: boolean; models?: string[]; message?: string }
+                        if (!response.ok || body.ok !== true) throw new Error(body.message ?? `HTTP ${response.status}`)
+                        setImageModelCandidates(body.models ?? [])
+                      })
+                      .catch(error => { setImageModelsError(error instanceof Error ? error.message : String(error)) })
+                      .finally(() => { setLoadingImageModels(false) })
+                  }}
+                >
+                  {loadingImageModels ? t('settings.imageModelsLoading') : t('settings.imageModelsFetch')}
+                </button>
+              </div>
+              <div className={css.modelSummary}>
+                {splitModels(state.imageModels.text).map(model => (
+                  <span key={model} className={css.modelChip}>
+                    <span>{model}</span>
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      aria-label={`${t('settings.removeModel')}: ${model}`}
+                      onClick={() => { props.edit('imageModels', splitModels(state.imageModels.text).filter(value => value !== model).join('\n')) }}
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+                <button type="button" className={css.addModel} disabled={disabled} onClick={() => { setManualModelsOpen(open => !open) }}>
+                  {manualModelsOpen ? t('settings.cancelAddModel') : t('settings.addModel')}
+                </button>
+              </div>
+              {manualModelsOpen ? (
+                <div className={css.manualModelRow}>
+                  <input
+                    className={css.input}
+                    value={manualModel}
+                    placeholder={t('settings.addModelPlaceholder')}
+                    disabled={disabled}
+                    onChange={event => { setManualModel(event.target.value) }}
+                    onKeyDown={event => {
+                      if (event.key !== 'Enter') return
+                      event.preventDefault()
+                      const next = manualModel.trim()
+                      if (next === '') return
+                      props.edit('imageModels', [...splitModels(state.imageModels.text), next].join('\n'))
+                      setManualModel('')
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className={css.addModel}
+                    disabled={disabled || manualModel.trim() === ''}
+                    onClick={() => {
+                      props.edit('imageModels', [...splitModels(state.imageModels.text), manualModel.trim()].join('\n'))
+                      setManualModel('')
+                    }}
+                  >
+                    {t('settings.addModelConfirm')}
+                  </button>
+                </div>
+              ) : null}
+              {imageModelCandidates.length > 0 ? (
+                <div className={css.modelCandidateList} role="group" aria-label={t('settings.imageModelsCandidates')}>
+                  <span className={css.modelCandidateLabel}>{t('settings.imageModelsCandidates')}</span>
+                  {imageModelCandidates.map(candidate => {
+                    const selected = splitModels(state.imageModels.text).includes(candidate)
+                    return (
+                      <label key={candidate} className={css.modelCandidate} data-selected={selected ? '' : undefined}>
+                        <input
+                          type="checkbox"
+                          checked={selected}
+                          disabled={disabled}
+                          onChange={() => {
+                            const selectedModels = splitModels(state.imageModels.text)
+                            const next = selected ? selectedModels.filter(model => model !== candidate) : [...selectedModels, candidate]
+                            props.edit('imageModels', next.join('\n'))
+                          }}
+                        />
+                        <span>{candidate}</span>
+                      </label>
+                    )
+                  })}
+                </div>
+              ) : null}
+              {imageModelsError !== null ? <p className={css.failed} role="status">{imageModelsError}</p> : null}
+            </section>
+            <button
+              type="button"
+              className={css.disclosure}
+              aria-expanded={enhancementOpen}
+              onClick={() => { setEnhancementOpen(open => !open) }}
+            >
+              <span>{t('settings.promptEnhanceTitle')}</span>
+              <span>{t('settings.optional')}</span>
+              <span aria-hidden="true">{enhancementOpen ? '⌃' : '⌄'}</span>
+            </button>
+            {enhancementOpen ? <section className={css.optionalContent} aria-label={t('settings.promptEnhanceTitle')}>
+            <p className={css.sectionHint}>{t('settings.promptEnhanceHint')}</p>
+            <div className={css.sectionHeader}>
+              <div>
+                <h3 className={css.sectionTitle}>{t('settings.promptModel')}</h3>
+                <p className={css.sectionHint}>{t('settings.promptModelDetectionHint')}</p>
+              </div>
+              <button
+                type="button"
+                className={css.modelFetch}
+                disabled={disabled || loadingPromptModels}
+                onClick={() => {
+                  setLoadingPromptModels(true)
+                  setPromptModelsError(null)
+                  void fetch(PROMPT_ENHANCE_API.models, { method: 'POST' })
+                    .then(async response => {
+                      const body = await response.json() as { ok?: boolean; models?: string[]; message?: string }
+                      if (!response.ok || body.ok !== true) throw new Error(body.message ?? `HTTP ${response.status}`)
+                      setPromptModels(body.models ?? [])
+                    })
+                    .catch(error => { setPromptModelsError(error instanceof Error ? error.message : String(error)) })
+                    .finally(() => { setLoadingPromptModels(false) })
+                }}
+              >
+                {loadingPromptModels ? t('settings.promptModelsLoading') : t('settings.promptModelsFetch')}
+              </button>
+            </div>
+            <div className={css.modelSummary}>
+              {state.promptModel.text.trim() !== '' ? (
+                <span className={css.modelChip}>
+                  <span>{state.promptModel.text}</span>
+                  <button type="button" disabled={disabled} aria-label={`${t('settings.removeModel')}: ${state.promptModel.text}`} onClick={() => { props.edit('promptModel', '') }}>×</button>
+                </span>
+              ) : null}
+              <button type="button" className={css.addModel} disabled={disabled} onClick={() => { setManualPromptModelOpen(open => !open) }}>
+                {manualPromptModelOpen ? t('settings.cancelAddModel') : t('settings.addModel')}
+              </button>
+            </div>
+            {manualPromptModelOpen ? (
+              <div className={css.manualModelRow}>
+                <input className={css.input} value={manualPromptModel} placeholder={t('settings.addPromptModelPlaceholder')} disabled={disabled} onChange={event => { setManualPromptModel(event.target.value) }} />
+                <button type="button" className={css.addModel} disabled={disabled || manualPromptModel.trim() === ''} onClick={() => { props.edit('promptModel', manualPromptModel); setManualPromptModel('') }}>
+                  {t('settings.addModelConfirm')}
+                </button>
+              </div>
+            ) : null}
+            {promptModels.length > 0 ? (
+              <div className={css.modelCandidateList} role="radiogroup" aria-label={t('settings.promptModelsCandidates')}>
+                <span className={css.modelCandidateLabel}>{t('settings.promptModelsCandidates')}</span>
+                {promptModels.map(candidate => (
+                  <button
+                    key={candidate}
+                    type="button"
+                    role="radio"
+                    className={css.modelCandidate}
+                    aria-checked={state.promptModel.text === candidate}
+                    data-selected={state.promptModel.text === candidate ? '' : undefined}
+                    disabled={disabled}
+                    onClick={() => { props.edit('promptModel', candidate) }}
+                  >
+                    {candidate}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+            {promptModelsError !== null ? <p className={css.failed} role="status">{promptModelsError}</p> : null}
+            <button type="button" className={css.inlineDisclosure} aria-expanded={promptApiOpen} onClick={() => { setPromptApiOpen(open => !open) }}>
+              <span>{t('settings.promptApiAdvanced')}</span>
+              <span aria-hidden="true">{promptApiOpen ? '⌃' : '⌄'}</span>
+            </button>
+            {promptApiOpen ? <div className={css.optionalContent}>
             <ValueField
-              id="dsh-imagegen-settings-apiurl"
-              label={t('settings.apiUrl')}
-              hint={t('settings.apiUrlHint')}
+              id="dsh-imagegen-settings-prompt-apiurl"
+              label={t('settings.promptApiUrl')}
+              hint={t('settings.promptApiUrlHint')}
               placeholder="https://api.openai.com/v1"
               {...fieldProps}
-              {...state.apiUrl}
-              onEdit={(text) => { props.edit('apiUrl', text) }}
-              onReset={() => { props.resetField('apiUrl') }}
+              {...state.promptApiUrl}
+              onEdit={(text) => { props.edit('promptApiUrl', text) }}
+              onReset={() => { props.resetField('promptApiUrl') }}
+            />
+            <ValueField
+              id="dsh-imagegen-settings-prompt-apikey"
+              label={t('settings.promptApiKey')}
+              hint={t('settings.promptApiKeyHint')}
+              placeholder="sk-…"
+              secret
+              {...fieldProps}
+              {...state.promptApiKey}
+              overridden={false}
+              onEdit={(text) => { props.edit('promptApiKey', text) }}
+              onReset={() => { props.resetField('promptApiKey') }}
             />
+            </div> : null}
+            </section> : null}
+            <button type="button" className={css.disclosure} aria-expanded={moreOpen} onClick={() => { setMoreOpen(open => !open) }}>
+              <span>{t('settings.moreOptions')}</span>
+              <span aria-hidden="true">{moreOpen ? '⌃' : '⌄'}</span>
+            </button>
+            {moreOpen ? <div className={css.optionalContent}>
             <BooleanField
               id="dsh-imagegen-settings-enabled"
               label={t('settings.enabled')}
@@ -215,6 +454,19 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
               onEdit={(text) => { props.edit('announceToAgent', text) }}
               onReset={() => { props.resetField('announceToAgent') }}
             />
+            <BooleanField
+              id="dsh-imagegen-settings-agent-generation"
+              label={t('settings.allowAgentImageGeneration')}
+              hint={t('settings.allowAgentImageGenerationHint')}
+              inheritLabel={t('settings.inherit')}
+              onLabel={t('settings.on')}
+              offLabel={t('settings.off')}
+              {...fieldProps}
+              {...state.allowAgentImageGeneration}
+              onEdit={(text) => { props.edit('allowAgentImageGeneration', text) }}
+              onReset={() => { props.resetField('allowAgentImageGeneration') }}
+            />
+            </div> : null}
             <div className={css.footer}>
               {state.failed ? <p className={css.failed} role="status">{t('settings.saveFailed')}</p> : null}
               <button
@@ -281,6 +533,8 @@ function ValueField(props: FieldProps & {
   onClear?: () => void
   /** Whether a stored secret exists (enables the clear control). */
   canClear?: boolean
+  /** Render a multiline input for newline-separated configuration values. */
+  multiline?: boolean
 }) {
   return (
     <div className={css.field}>
@@ -314,17 +568,29 @@ function ValueField(props: FieldProps & {
           )
           : null}
       </div>
-      <input
-        id={props.id}
-        className={props.invalid ? css.inputInvalid : css.input}
-        type={props.secret === true ? 'password' : 'text'}
-        autoComplete={props.secret === true ? 'off' : undefined}
-        {...props.invalid ? { 'aria-invalid': true } : {}}
-        value={props.text}
-        placeholder={props.placeholder ?? ''}
-        disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      />
+      {props.multiline === true ? (
+        <textarea
+          id={props.id}
+          className={props.invalid ? css.textareaInvalid : css.textarea}
+          {...props.invalid ? { 'aria-invalid': true } : {}}
+          value={props.text}
+          placeholder={props.placeholder ?? ''}
+          disabled={props.disabled}
+          onChange={(event) => { props.onEdit(event.target.value) }}
+        />
+      ) : (
+        <input
+          id={props.id}
+          className={props.invalid ? css.inputInvalid : css.input}
+          type={props.secret === true ? 'password' : 'text'}
+          autoComplete={props.secret === true ? 'off' : undefined}
+          {...props.invalid ? { 'aria-invalid': true } : {}}
+          value={props.text}
+          placeholder={props.placeholder ?? ''}
+          disabled={props.disabled}
+          onChange={(event) => { props.onEdit(event.target.value) }}
+        />
+      )}
       <p className={props.invalid ? css.invalid : css.hint}>
         {props.invalid ? props.invalidLabel : props.hint}
       </p>
@@ -332,6 +598,10 @@ function ValueField(props: FieldProps & {
   )
 }
 
+function splitModels(value: string): string[] {
+  return [...new Set(value.split(/[\n,]/).map(model => model.trim()).filter(Boolean))]
+}
+
 /** A staged boolean field: 继承 / 开 / 关. */
 function BooleanField(props: FieldProps & {
   /** Copy for the inherit option. */

package/src/client/api.ts

@@ -3,7 +3,7 @@
  * data access path the panel uses — plain fetch, same origin.
  */
 
-import { GALLERY_API, GENERATE_API, HISTORY_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type HistoryEntry, type HistoryEntryInput, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
+import { GALLERY_API, GENERATE_API, HISTORY_API, PROMPT_ENHANCE_API, TASK_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type GenerationTask, type HistoryEntry, type HistoryEntryInput, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
 
 /** Error carrying the route's JSON error message. */
 export class ImageGenApiError extends Error {
@@ -73,6 +73,37 @@ export class ImageGenApi {
     }
   }
 
+  /** Ask the configured chat model to expand a concise image prompt. */
+  async enhancePrompt(prompt: string): Promise<string> {
+    const response = await fetch(PROMPT_ENHANCE_API.enhance, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ prompt }),
+    })
+    const body = await readEnvelope<{ ok: true; prompt: string }>(response)
+    return body.prompt
+  }
+
+  async taskSubmit(request: GenerateRequest): Promise<GenerationTask> {
+    const response = await fetch(TASK_API.submit, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(request) })
+    return (await readEnvelope<{ ok: true; task: GenerationTask }>(response)).task
+  }
+
+  async taskList(): Promise<GenerationTask[]> {
+    const response = await fetch(TASK_API.list, { method: 'POST' })
+    return (await readEnvelope<{ ok: true; tasks: GenerationTask[] }>(response)).tasks
+  }
+
+  async taskCancel(id: string): Promise<GenerationTask> {
+    const response = await fetch(TASK_API.cancel, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id }) })
+    return (await readEnvelope<{ ok: true; task: GenerationTask }>(response)).task
+  }
+
+  async taskRetry(id: string): Promise<GenerationTask> {
+    const response = await fetch(TASK_API.retry, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id }) })
+    return (await readEnvelope<{ ok: true; task: GenerationTask }>(response)).task
+  }
+
   /** List the host-persisted history (newest first). */
   async historyList(): Promise<HistoryEntry[]> {
     const response = await fetch(HISTORY_API.list, { method: 'POST' })
@@ -135,6 +166,11 @@ export class ImageGenApi {
     return body.entries
   }
 
+  async gallerySetTags(id: string, tags: string[]): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.tags, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, tags }) })
+    return (await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)).entries
+  }
+
   /** Fetch the prompt-template library (bundled snapshot or refreshed copy). */
   async templatesList(): Promise<TemplateListResult> {
     const response = await fetch(TEMPLATES_API.list, { method: 'POST' })