@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/components/preferences/PipelinePreferences.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import { Eraser, FileText, Search } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  defaultModel,
+  modelNames,
+  modelOptions,
+  replaceStage,
+  stageModel,
+  type ModelName,
+  type ModelStage,
+  type PipelineModel,
+} from '@aphrody/koharu-ui/components/preferences/models'
+import {
+  NumberField,
+  PreferencePage,
+  PreferenceRow,
+  PreferenceSection,
+  TextField,
+} from '@aphrody/koharu-ui/components/preferences/PreferenceFields'
+import type { PipelineConfig } from '@aphrody/koharu-bridge/protocol'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../internal/components/select'
+
+const stages = [
+  ['detection', Search],
+  ['ocr', FileText],
+  ['inpainting', Eraser],
+] as const satisfies ReadonlyArray<readonly [ModelStage, typeof Search]>
+
+export function PipelinePreferences({
+  value,
+  onChange,
+}: {
+  value: PipelineConfig
+  onChange: (value: PipelineConfig) => void
+}) {
+  const { t } = useTranslation()
+  return (
+    <PreferencePage
+      title={t('settings.pipeline.title')}
+      description={t('settings.pipeline.description')}
+    >
+      <PreferenceSection title={t('settings.pipeline.processing')}>
+        {stages.map(([stage, Icon]) => {
+          const model = stageModel(value, stage)
+          const title = t(`settings.pipeline.stages.${stage}.title`)
+          return (
+            <PreferenceRow
+              key={stage}
+              title={title}
+              description={t(`settings.pipeline.stages.${stage}.description`)}
+              align='start'
+            >
+              <div className='grid gap-3'>
+                <div className='flex items-center gap-2'>
+                  <Icon className='size-3.5 shrink-0 text-muted-foreground' />
+                  <Select
+                    value={model.model}
+                    items={Object.fromEntries(
+                      modelOptions[stage].map((name) => [name, modelNames[name]]),
+                    )}
+                    onValueChange={(name) => {
+                      if (name) {
+                        onChange(replaceStage(value, stage, defaultModel(name as ModelName)))
+                      }
+                    }}
+                  >
+                    <SelectTrigger
+                      aria-label={t('settings.pipeline.modelLabel', { stage: title })}
+                      className='h-8 min-w-0 flex-1 text-[11px]'
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {modelOptions[stage].map((name) => (
+                        <SelectItem key={name} value={name}>
+                          {modelNames[name]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <ModelOptions
+                  model={model}
+                  onChange={(next) => onChange(replaceStage(value, stage, next))}
+                />
+              </div>
+            </PreferenceRow>
+          )
+        })}
+      </PreferenceSection>
+    </PreferencePage>
+  )
+}
+
+function ModelOptions({
+  model,
+  onChange,
+}: {
+  model: PipelineModel
+  onChange: (model: PipelineModel) => void
+}) {
+  const { t } = useTranslation()
+  switch (model.model) {
+    case 'koharu-layout-rfdetr-seg-2xl':
+      return (
+        <div className='grid grid-cols-3 gap-2'>
+          <NumberField
+            label={t('settings.pipeline.options.textThreshold')}
+            value={model.text_threshold ?? null}
+            min={0}
+            max={1}
+            step={0.05}
+            onChange={(text_threshold) => onChange({ ...model, text_threshold })}
+          />
+          <NumberField
+            label={t('settings.pipeline.options.bubbleThreshold')}
+            value={model.bubble_threshold ?? null}
+            min={0}
+            max={1}
+            step={0.05}
+            onChange={(bubble_threshold) => onChange({ ...model, bubble_threshold })}
+          />
+          <NumberField
+            label={t('settings.pipeline.options.panelThreshold')}
+            value={model.panel_threshold ?? null}
+            min={0}
+            max={1}
+            step={0.05}
+            onChange={(panel_threshold) => onChange({ ...model, panel_threshold })}
+          />
+        </div>
+      )
+    case 'flux2-klein':
+      return (
+        <TextField
+          label={t('settings.pipeline.options.prompt')}
+          value={model.prompt ?? 'Remove the text and reconstruct the background.'}
+          onChange={(prompt) => onChange({ ...model, prompt })}
+        />
+      )
+    case 'rorem-mixed':
+      return (
+        <div className='grid grid-cols-2 gap-2'>
+          <TextField
+            label={t('settings.pipeline.options.prompt')}
+            value={model.prompt ?? ''}
+            onChange={(prompt) => onChange({ ...model, prompt })}
+          />
+          <TextField
+            label={t('settings.pipeline.options.negativePrompt')}
+            value={model.negative_prompt ?? ''}
+            onChange={(negative_prompt) => onChange({ ...model, negative_prompt })}
+          />
+        </div>
+      )
+    case 'paddleocr-vl-1.6':
+    case 'manga-ocr':
+    case 'baberu-ocr':
+    case 'hayai-ocr':
+    case 'lama':
+    case 'aot-inpainting':
+      return null
+  }
+}

package/src/components/preferences/PreferenceFields.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { useId } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Input } from '@aphrody/m3-primitives'
+
+export function PreferencePage({
+  title,
+  description,
+  children,
+}: {
+  title: string
+  description: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className='max-w-3xl'>
+      <header className='mb-8'>
+        <h2 className='text-[20px] font-semibold tracking-[-0.02em]'>{title}</h2>
+        <p className='mt-1 max-w-xl text-[12px] leading-5 text-muted-foreground'>{description}</p>
+      </header>
+      <div className='grid gap-8'>{children}</div>
+    </div>
+  )
+}
+
+export function PreferenceSection({
+  title,
+  description,
+  children,
+}: {
+  title: string
+  description?: string
+  children: React.ReactNode
+}) {
+  return (
+    <section>
+      <div className='mb-3'>
+        <h3 className='text-[12px] font-semibold'>{title}</h3>
+        {description && (
+          <p className='mt-0.5 text-[11px] leading-4 text-muted-foreground'>{description}</p>
+        )}
+      </div>
+      <div className='divide-y divide-border rounded-xl border border-border/80 bg-[var(--surface-panel)] px-5'>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export function PreferenceRow({
+  title,
+  description,
+  children,
+  align = 'center',
+}: {
+  title: string
+  description?: string
+  children: React.ReactNode
+  align?: 'center' | 'start'
+}) {
+  return (
+    <div
+      className={`grid grid-cols-[minmax(150px,0.9fr)_minmax(220px,1.1fr)] gap-6 py-3.5 ${align === 'start' ? 'items-start' : 'items-center'}`}
+    >
+      <div>
+        <p className='text-[12px] font-medium'>{title}</p>
+        {description && (
+          <p className='mt-0.5 text-[10px] leading-4 text-muted-foreground'>{description}</p>
+        )}
+      </div>
+      <div className='min-w-0'>{children}</div>
+    </div>
+  )
+}
+
+export function TextField({
+  label,
+  value,
+  type = 'text',
+  onChange,
+}: {
+  label: string
+  value: string
+  type?: 'text' | 'url'
+  onChange: (value: string) => void
+}) {
+  return (
+    <label className='grid gap-1 text-[10px] text-muted-foreground'>
+      {label}
+      <Input
+        type={type}
+        value={value}
+        className='h-8 text-[12px] text-foreground'
+        onChange={(event) => onChange(event.currentTarget.value)}
+      />
+    </label>
+  )
+}
+
+/**
+ * `min` and `max` on a number input are validation hints the browser never
+ * enforces on typed text, so bounds are applied here before the value reaches
+ * the stored configuration.
+ */
+function parseBounded(raw: string, min?: number, max?: number) {
+  if (raw === '') return null
+  const value = Number(raw)
+  if (!Number.isFinite(value)) return null
+  if (min !== undefined && value < min) return min
+  if (max !== undefined && value > max) return max
+  return value
+}
+
+export function NumberField({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+}: {
+  label: string
+  value: number | null
+  min?: number
+  max?: number
+  step?: number
+  onChange: (value: number | null) => void
+}) {
+  const { t } = useTranslation()
+  const id = useId()
+  return (
+    <label className='grid gap-1 text-[10px] text-muted-foreground'>
+      {label}
+      <Input
+        id={id}
+        type='number'
+        value={value ?? ''}
+        min={min}
+        max={max}
+        step={step}
+        placeholder={t('model.default')}
+        className='h-8 text-[12px] text-foreground'
+        onChange={(event) => onChange(parseBounded(event.currentTarget.value, min, max))}
+      />
+    </label>
+  )
+}

package/src/components/preferences/ProviderPreferences.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import { Eraser } from 'lucide-react'
+import { useEffect, useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  PreferencePage,
+  PreferenceRow,
+  PreferenceSection,
+  TextField,
+} from '@aphrody/koharu-ui/components/preferences/PreferenceFields'
+import type {
+  CredentialInput,
+  ProviderConfig,
+  ProviderPreference,
+  ProviderPreferences as ProviderSettings,
+} from '@aphrody/koharu-bridge/protocol'
+import { Button } from '../../internal/components/button'
+import { Input } from '../../internal/components/input'
+
+
+type ConfigWithSetting<T, Key extends PropertyKey> = T extends { settings: infer Settings }
+  ? Key extends keyof Settings
+    ? [Settings[Key]] extends [never]
+      ? never
+      : T
+    : never
+  : never
+
+type BaseUrlConfig = ConfigWithSetting<ProviderConfig, 'base_url'>
+
+export function ProviderPreferences({
+  value,
+  onChange,
+}: {
+  value: ProviderSettings
+  onChange: (value: ProviderSettings) => void
+}) {
+  const { t } = useTranslation()
+  return (
+    <PreferencePage
+      title={t('settings.providers.title')}
+      description={t('settings.providers.description')}
+    >
+      <PreferenceSection
+        title={t('settings.providers.connections')}
+        description={t('settings.providers.connectionsDescription')}
+      >
+        {value.entries.filter(isConfigurable).map((entry) => (
+          <PreferenceRow
+            key={entry.config.provider}
+            title={entry.name}
+            description={t(`providerDescriptions.${entry.config.provider}`)}
+            align='start'
+          >
+            <div className='grid gap-2'>
+              {entry.credential && (
+                <CredentialField
+                  label={entry.name}
+                  value={entry.credential}
+                  onChange={(credential) => onChange(replaceEntry(value, { ...entry, credential }))}
+                />
+              )}
+              {hasBaseUrl(entry.config) && (
+                <TextField
+                  label={t('model.baseUrl')}
+                  type='url'
+                  value={entry.config.settings.base_url ?? ''}
+                  onChange={(base_url) =>
+                    onChange(
+                      replaceEntry(value, {
+                        ...entry,
+                        config: withBaseUrl(entry.config, base_url),
+                      }),
+                    )
+                  }
+                />
+              )}
+            </div>
+          </PreferenceRow>
+        ))}
+      </PreferenceSection>
+    </PreferencePage>
+  )
+}
+
+function CredentialField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string
+  value: CredentialInput
+  onChange: (value: CredentialInput) => void
+}) {
+  const { t } = useTranslation()
+  const inputId = useId()
+  const [draftValue, setDraftValue] = useState(value.value ?? '')
+  useEffect(() => {
+    if (value.value !== null) setDraftValue(value.value)
+    else if (!value.configured || value.clear) setDraftValue('')
+  }, [value.clear, value.configured, value.value])
+  const configured = !value.clear && (value.configured || Boolean(draftValue))
+  return (
+    <div className='grid gap-1'>
+      <label htmlFor={inputId} className='text-[10px] text-muted-foreground'>
+        {t('settings.providers.credential')}
+      </label>
+      <div className='flex gap-2'>
+        <Input
+          id={inputId}
+          aria-label={t('settings.providers.credentialLabel', { provider: label })}
+          type='text'
+          autoComplete='off'
+          autoCapitalize='none'
+          spellCheck={false}
+          value={draftValue}
+          placeholder={
+            configured ? t('settings.providers.configured') : t('settings.providers.notConfigured')
+          }
+          className='h-8 min-w-0 flex-1 text-[12px] [-webkit-text-security:disc] [&::placeholder]:[-webkit-text-security:none]'
+          onChange={(event) => {
+            const draft = event.currentTarget.value
+            setDraftValue(draft)
+            onChange({ ...value, value: draft || null, clear: false })
+          }}
+        />
+        {configured && (
+          <Button
+            type='button'
+            variant='outline'
+            size='icon'
+            aria-label={t('settings.providers.clearCredential', { provider: label })}
+            onClick={() => {
+              setDraftValue('')
+              onChange({ configured: false, value: null, clear: true })
+            }}
+          >
+            <Eraser />
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function isConfigurable(entry: ProviderPreference): boolean {
+  return entry.credential !== null || hasBaseUrl(entry.config)
+}
+
+function hasBaseUrl(config: ProviderConfig): config is BaseUrlConfig {
+  return 'base_url' in config.settings
+}
+
+function withBaseUrl(config: ProviderConfig, base_url: string): ProviderConfig {
+  if (!hasBaseUrl(config)) return config
+  return {
+    ...config,
+    settings: { ...config.settings, base_url: base_url || null },
+  } as ProviderConfig
+}
+
+function replaceEntry(
+  preferences: ProviderSettings,
+  replacement: ProviderPreference,
+): ProviderSettings {
+  return {
+    entries: preferences.entries.map((entry) =>
+      entry.config.provider === replacement.config.provider ? replacement : entry,
+    ),
+  }
+}