update ai buttons

2026-04-14 19:55:44 -04:00
parent dae33a36bc
commit afcf740f63
6 changed files with 255 additions and 166 deletions
--- a/src/app/api/ai-tagging/extract-text/route.ts
+++ b/src/app/api/ai-tagging/extract-text/route.ts
@@ -3,14 +3,14 @@ import { requireLibraryAccess } from '@/lib/auth'
 import { enqueueJob } from '@/lib/ai-jobs'

 export async function POST(request: NextRequest) {
-  let body: { itemKey?: string; ocrLanguages?: string }
+  let body: { itemKey?: string; ocrLanguages?: string; ocrMode?: string }
  try {
    body = await request.json()
  } catch {
    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
  }

-  const { itemKey, ocrLanguages } = body
+  const { itemKey, ocrLanguages, ocrMode } = body
  if (!itemKey || typeof itemKey !== 'string') {
    return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
  }
@@ -19,12 +19,15 @@ export async function POST(request: NextRequest) {
  const auth = await requireLibraryAccess(request, libraryId)
  if (auth instanceof NextResponse) return auth

+  const payload: Record<string, string> = {}
+  if (ocrLanguages) payload.ocrLanguages = ocrLanguages
+  if (ocrMode) payload.ocrMode = ocrMode
  const jobId = enqueueJob(
    itemKey,
    'extract',
    libraryId,
    undefined,
-    ocrLanguages ? { ocrLanguages } : undefined,
+    Object.keys(payload).length ? payload : undefined,
  )
  return NextResponse.json({ jobId }, { status: 202 })
 }
--- a/src/app/api/ai-tagging/fields/route.ts
+++ b/src/app/api/ai-tagging/fields/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { requireLibraryAccess } from '@/lib/auth'
-import { getAiFields, updateExtractedText } from '@/lib/ai-tagger'
+import { getAiFields, updateExtractedText, updateAiDescription } from '@/lib/ai-tagger'

 export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl
@@ -19,25 +19,37 @@ export async function GET(request: NextRequest) {
 }

 export async function PATCH(request: NextRequest) {
-  let body: { itemKey?: string; extractedText?: string }
+  let body: { itemKey?: string; extractedText?: string; aiDescription?: string }
  try {
    body = await request.json()
  } catch {
    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
  }

-  const { itemKey, extractedText } = body
+  const { itemKey, extractedText, aiDescription } = body
  if (!itemKey || typeof itemKey !== 'string') {
    return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
  }
-  if (typeof extractedText !== 'string') {
-    return NextResponse.json({ error: 'extractedText is required' }, { status: 400 })
+  if (extractedText === undefined && aiDescription === undefined) {
+    return NextResponse.json({ error: 'extractedText or aiDescription is required' }, { status: 400 })
  }

  const libraryId = itemKey.split(':')[0]
  const auth = await requireLibraryAccess(request, libraryId)
  if (auth instanceof NextResponse) return auth

-  updateExtractedText(itemKey, extractedText)
+  if (extractedText !== undefined) {
+    if (typeof extractedText !== 'string') {
+      return NextResponse.json({ error: 'extractedText must be a string' }, { status: 400 })
+    }
+    updateExtractedText(itemKey, extractedText)
+  }
+  if (aiDescription !== undefined) {
+    if (typeof aiDescription !== 'string') {
+      return NextResponse.json({ error: 'aiDescription must be a string' }, { status: 400 })
+    }
+    updateAiDescription(itemKey, aiDescription)
+  }
+
  return NextResponse.json({ ok: true })
 }
--- a/src/components/mixed/ImageLightbox.tsx
+++ b/src/components/mixed/ImageLightbox.tsx
@@ -39,6 +39,8 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item

  // Description state
  const [aiDescription, setAiDescription] = useState<string | null>(null)
+  const [editedDescription, setEditedDescription] = useState<string>('')
+  const [savingDesc, setSavingDesc] = useState(false)
  const [generatingDesc, setGeneratingDesc] = useState(false)
  const [descPending, setDescPending] = useState(false)
  const [descError, setDescError] = useState<string | null>(null)
@@ -71,6 +73,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
        setEditedExtractedText(data.extractedText ?? '')
        setTranslatedText(data.extractedTextTranslated)
        setAiDescription(data.aiDescription)
+        setEditedDescription(data.aiDescription ?? '')
      })
      .catch(() => {})
  }, [itemKey])
@@ -116,6 +119,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
          setEditedExtractedText(data.extractedText ?? '')
          setTranslatedText(data.extractedTextTranslated)
          setAiDescription(data.aiDescription)
+          setEditedDescription(data.aiDescription ?? '')
          setExtractPending(false)
          setTranslatePending(false)
          setDescPending(false)
@@ -172,6 +176,57 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
    }
  }

+  const callExtract = async (modeOverride: string) => {
+    setExtracting(true)
+    setExtractError(null)
+    setExtractPending(false)
+    try {
+      const res = await fetch('/api/ai-tagging/extract-text', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          itemKey,
+          ocrMode: modeOverride,
+          ...(modeOverride !== 'llm' && ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
+        }),
+      })
+      if (res.status === 202) {
+        setExtractPending(true)
+        startPolling(extractedText, translatedText, aiDescription)
+        return
+      }
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error((data as { error?: string }).error ?? 'Failed to extract text')
+      }
+      const result = await res.json()
+      setExtractedText(result.extractedText || null)
+      setEditedExtractedText(result.extractedText || '')
+      setTranslatedText(result.translatedText || null)
+    } catch (err) {
+      setExtractError(err instanceof Error ? err.message : 'Failed to extract text')
+      setTimeout(() => setExtractError(null), 4000)
+    } finally {
+      setExtracting(false)
+    }
+  }
+
+  const handleAiTag = async () => {
+    if (!onAiTag) return
+    setAiTagging(true)
+    setAiTagError(null)
+    try {
+      await onAiTag()
+      setTagRefreshKey((k) => k + 1)
+      onTagsChanged?.()
+    } catch (err) {
+      setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
+      setTimeout(() => setAiTagError(null), 4000)
+    } finally {
+      setAiTagging(false)
+    }
+  }
+
  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'

  return (
@@ -331,42 +386,6 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                ›
              </button>
              <div className="flex items-center gap-1.5">
-                {onAiTag && (
-                  <button
-                    onClick={async (e) => {
-                      e.stopPropagation()
-                      setAiTagging(true)
-                      setAiTagError(null)
-                      try {
-                        await onAiTag()
-                        setTagRefreshKey((k) => k + 1)
-                        onTagsChanged?.()
-                      } catch (err) {
-                        setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                        setTimeout(() => setAiTagError(null), 4000)
-                      } finally {
-                        setAiTagging(false)
-                      }
-                    }}
-                    disabled={aiTagging}
-                    className={`${smallBtn} disabled:opacity-50`}
-                    style={{
-                      backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
-                      color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
-                      fontSize: '1rem',
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                    }}
-                    aria-label="AI Tag this image"
-                    title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-                  >
-                    {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
-                  </button>
-                )}
                <button
                  onClick={onClose}
                  className={smallBtn}
@@ -386,92 +405,112 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item

              {/* Description section */}
              <div className="flex flex-col gap-1" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
-                  Description
-                </p>
-                {aiDescription && (
-                  <p className="text-xs italic mb-2" style={{ color: 'var(--text-secondary)' }}>
-                    {aiDescription}
+                {/* Heading row */}
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                    Description
                  </p>
-                )}
-                <div className="flex items-center gap-1.5">
                  <button
                    onClick={handleGenerateDescription}
                    disabled={generatingDesc || descPending}
-                    className="text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-50"
+                    className={`${smallBtn} disabled:opacity-50`}
                    style={{
                      backgroundColor: descPending ? 'var(--accent)' : 'var(--border)',
                      color: descPending ? '#fff' : 'var(--text-secondary)',
+                      fontSize: '1rem',
                    }}
                    onMouseEnter={(e) => {
-                      if (!generatingDesc && !descPending) {
-                        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                        ;(e.currentTarget as HTMLElement).style.color = 'var(--background)'
-                      }
+                      if (!generatingDesc && !descPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
                    }}
                    onMouseLeave={(e) => {
-                      if (!descPending) {
-                        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                        ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                      }
+                      if (!descPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
                    }}
+                    aria-label={aiDescription ? 'Regenerate description' : 'Generate description'}
                    title={aiDescription ? 'Regenerate AI description' : 'Generate AI description'}
                  >
-                    {generatingDesc ? '⟳ Generating…' : descPending ? '⟳ Queued…' : aiDescription ? '✦ Regenerate Description' : '✦ Generate Description'}
+                    {generatingDesc || descPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
                  </button>
-                  {descError && (
-                    <span className="text-xs" style={{ color: '#f87171' }}>{descError}</span>
-                  )}
                </div>
+                {/* Editable textarea */}
+                <textarea
+                  value={editedDescription}
+                  onChange={(e) => setEditedDescription(e.target.value)}
+                  placeholder="No description yet…"
+                  className="text-xs rounded-lg p-2 w-full resize-y outline-none"
+                  style={{
+                    backgroundColor: 'var(--background)',
+                    border: '1px solid var(--border)',
+                    color: 'var(--text-primary)',
+                    minHeight: '3.5rem',
+                    maxHeight: '8rem',
+                    fontFamily: 'inherit',
+                  }}
+                />
+                {editedDescription !== (aiDescription ?? '') && (
+                  <button
+                    onClick={async () => {
+                      setSavingDesc(true)
+                      try {
+                        await fetch('/api/ai-tagging/fields', {
+                          method: 'PATCH',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ itemKey, aiDescription: editedDescription }),
+                        })
+                        setAiDescription(editedDescription)
+                      } finally {
+                        setSavingDesc(false)
+                      }
+                    }}
+                    disabled={savingDesc}
+                    className="mt-1 text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-50"
+                    style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                  >
+                    {savingDesc ? '⟳ Saving…' : 'Save'}
+                  </button>
+                )}
+                {descError && <span className="text-xs" style={{ color: '#f87171' }}>{descError}</span>}
              </div>

              {/* Text extraction section — only for images */}
              {isImage && (
                <div className="flex flex-col gap-2" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-                  <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
-                    Text Extraction
-                  </p>
-
-                  <div className="flex items-center gap-2 flex-wrap">
+                  {/* Heading row */}
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                      Text Extraction
+                    </p>
+                    {/* AI button — forces LLM, no OCR */}
                    <button
-                      onClick={async () => {
-                        setExtracting(true)
-                        setExtractError(null)
-                        setExtractPending(false)
-                        try {
-                          const res = await fetch('/api/ai-tagging/extract-text', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({
-                              itemKey,
-                              ...(ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
-                            }),
-                          })
-                          if (res.status === 202) {
-                            setExtractPending(true)
-                            startPolling(extractedText, translatedText, aiDescription)
-                            return
-                          }
-                          if (!res.ok) {
-                            const data = await res.json().catch(() => ({}))
-                            throw new Error((data as { error?: string }).error ?? 'Failed to extract text')
-                          }
-                          const result = await res.json()
-                          setExtractedText(result.extractedText || null)
-                          setEditedExtractedText(result.extractedText || '')
-                          setTranslatedText(result.translatedText || null)
-                        } catch (err) {
-                          setExtractError(err instanceof Error ? err.message : 'Failed to extract text')
-                          setTimeout(() => setExtractError(null), 4000)
-                        } finally {
-                          setExtracting(false)
-                        }
-                      }}
+                      onClick={() => callExtract('llm')}
                      disabled={extracting || extractPending}
-                      className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-50 self-start flex-shrink-0"
+                      className={`${smallBtn} disabled:opacity-50`}
                      style={{
                        backgroundColor: extractPending ? 'var(--accent)' : 'var(--border)',
                        color: extractPending ? '#fff' : 'var(--text-secondary)',
+                        fontSize: '1rem',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!extracting && !extractPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!extractPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                      }}
+                      aria-label="Extract text with AI"
+                      title="Extract with AI (skips OCR)"
+                    >
+                      {extractPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                    </button>
+                  </div>
+
+                  {/* OCR button row */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <button
+                      onClick={() => callExtract('tesseract')}
+                      disabled={extracting || extractPending}
+                      className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-50 self-start flex-shrink-0"
+                      style={{
+                        backgroundColor: 'var(--border)',
+                        color: 'var(--text-secondary)',
                      }}
                      onMouseEnter={(e) => {
                        if (!extracting && !extractPending) {
@@ -480,30 +519,26 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                        }
                      }}
                      onMouseLeave={(e) => {
-                        if (!extractPending) {
-                          ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                        }
+                        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                        ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
                      }}
                    >
-                      {extracting ? '⟳ Extracting…' : extractPending ? '⟳ Queued…' : extractedText ? '🔍 Re-extract Text' : '🔍 Extract Text'}
+                      {extracting ? '⟳ Scanning…' : extractedText ? '🔍 Re-scan with OCR' : '🔍 Scan with OCR'}
                    </button>
-                    {ocrMode && ocrMode !== 'llm' && (
-                      <input
-                        type="text"
-                        value={ocrLanguageInput}
-                        onChange={(e) => setOcrLanguageInput(e.target.value)}
-                        placeholder={defaultOcrLanguages}
-                        className="text-xs px-2 py-0.5 rounded-full outline-none"
-                        style={{
-                          backgroundColor: 'var(--background)',
-                          border: '1px solid var(--border)',
-                          color: 'var(--text-primary)',
-                          width: 120,
-                        }}
-                        title="Tesseract language(s) for this extraction (e.g. jpn+jpn_vert). Leave blank to use the configured default."
-                      />
-                    )}
+                    <input
+                      type="text"
+                      value={ocrLanguageInput}
+                      onChange={(e) => setOcrLanguageInput(e.target.value)}
+                      placeholder={defaultOcrLanguages}
+                      className="text-xs px-2 py-0.5 rounded-full outline-none"
+                      style={{
+                        backgroundColor: 'var(--background)',
+                        border: '1px solid var(--border)',
+                        color: 'var(--text-primary)',
+                        width: 120,
+                      }}
+                      title="Tesseract language(s) for this extraction (e.g. jpn+jpn_vert). Leave blank to use the configured default."
+                    />
                  </div>

                  {extractError && (
@@ -637,9 +672,34 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item

              {/* Tags section */}
              <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
-                  Tags
-                </p>
+                <div className="flex items-center justify-between mb-3">
+                  <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                    Tags
+                  </p>
+                  {onAiTag && (
+                    <button
+                      onClick={handleAiTag}
+                      disabled={aiTagging}
+                      className={`${smallBtn} disabled:opacity-50`}
+                      style={{
+                        backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
+                        color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
+                        fontSize: '1rem',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                      }}
+                      aria-label="AI Tag this image"
+                      title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
+                    >
+                      {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                    </button>
+                  )}
+                </div>
+                {aiTagError && <p className="text-xs mb-2" style={{ color: '#f87171' }}>{aiTagError}</p>}
                <TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} refreshKey={tagRefreshKey} hideDescription />
              </div>
            </div>
--- a/src/components/mixed/VideoPlayerModal.tsx
+++ b/src/components/mixed/VideoPlayerModal.tsx
@@ -50,6 +50,22 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
    if (e.target === overlayRef.current) onClose()
  }

+  const handleAiTag = async () => {
+    if (!onAiTag) return
+    setAiTagging(true)
+    setAiTagError(null)
+    try {
+      await onAiTag()
+      setTagRefreshKey((k) => k + 1)
+      onTagsChanged?.()
+    } catch (err) {
+      setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
+      setTimeout(() => setAiTagError(null), 4000)
+    } finally {
+      setAiTagging(false)
+    }
+  }
+
  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'

  return (
@@ -144,7 +160,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
            onClick={(e) => e.stopPropagation()}
          >
-            {/* Panel header — ‹ hide  |  ✨ AI tag  ✕ close */}
+            {/* Panel header — ‹ hide  |  ✕ close */}
            <div className="flex items-center justify-between p-4 flex-shrink-0">
              <button
                onClick={() => setShowTags(false)}
@@ -158,23 +174,29 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                ›
              </button>
              <div className="flex items-center gap-1.5">
+                <button
+                  onClick={onClose}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                  aria-label="Close"
+                  title="Close"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+
+            {/* Tags */}
+            <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
+              <div className="flex items-center justify-between mt-4 mb-3">
+                <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                  Tags
+                </p>
                {onAiTag && (
                  <button
-                    onClick={async (e) => {
-                      e.stopPropagation()
-                      setAiTagging(true)
-                      setAiTagError(null)
-                      try {
-                        await onAiTag()
-                        setTagRefreshKey((k) => k + 1)
-                        onTagsChanged?.()
-                      } catch (err) {
-                        setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                        setTimeout(() => setAiTagError(null), 4000)
-                      } finally {
-                        setAiTagging(false)
-                      }
-                    }}
+                    onClick={handleAiTag}
                    disabled={aiTagging}
                    className={`${smallBtn} disabled:opacity-50`}
                    style={{
@@ -194,25 +216,8 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                    {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
                  </button>
                )}
-                <button
-                  onClick={onClose}
-                  className={smallBtn}
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                  aria-label="Close"
-                  title="Close"
-                >
-                  ✕
-                </button>
              </div>
-            </div>
-
-            {/* Tags */}
-            <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
-              <p className="text-xs font-semibold uppercase tracking-wider mt-4 mb-3" style={{ color: 'var(--text-secondary)' }}>
-                Tags
-              </p>
+              {aiTagError && <p className="text-xs mb-2" style={{ color: '#f87171' }}>{aiTagError}</p>}
              <TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} refreshKey={tagRefreshKey} />
            </div>
          </div>
--- a/src/lib/ai-jobs.ts
+++ b/src/lib/ai-jobs.ts
@@ -269,7 +269,7 @@ async function processNextJob(): Promise<boolean> {
        await generateItemDescription(row.item_key)
        break
      case 'extract':
-        await extractItemText(row.item_key, jobPayload?.ocrLanguages)
+        await extractItemText(row.item_key, jobPayload?.ocrLanguages, jobPayload?.ocrMode)
        break
      case 'translate':
        await translateItemText(row.item_key, sourceLanguage || undefined)
--- a/src/lib/ai-tagger.ts
+++ b/src/lib/ai-tagger.ts
@@ -538,7 +538,7 @@ async function extractWithTesseract(
 * Translation is not performed automatically — call translateItemText() separately.
 * Returns { extractedText, translatedText } where translatedText is always null.
 */
-export async function extractItemText(itemKey: string, ocrLanguagesOverride?: string): Promise<{ extractedText: string; translatedText: string | null }> {
+export async function extractItemText(itemKey: string, ocrLanguagesOverride?: string, ocrModeOverride?: string): Promise<{ extractedText: string; translatedText: string | null }> {
  const libraryId = itemKey.split(':')[0]
  const config = getEffectiveAiConfig(libraryId)

@@ -567,7 +567,8 @@ export async function extractItemText(itemKey: string, ocrLanguagesOverride?: st
    throw Object.assign(new Error('Text extraction is only available for images'), { code: 'NO_IMAGE' })
  }

-  const { ocrMode, ocrLanguages: configOcrLanguages, ocrConfidenceThreshold } = config
+  const { ocrMode: configOcrMode, ocrLanguages: configOcrLanguages, ocrConfidenceThreshold } = config
+  const ocrMode = ocrModeOverride ?? configOcrMode
  const ocrLanguages = ocrLanguagesOverride?.trim() || configOcrLanguages

  // ── Tesseract path ────────────────────────────────────────────────────────
@@ -655,6 +656,14 @@ export function updateExtractedText(itemKey: string, text: string): void {
  db.prepare('UPDATE media_items SET extracted_text = ? WHERE item_key = ?').run(text, itemKey)
 }

+/**
+ * Update the ai_description of an item.
+ */
+export function updateAiDescription(itemKey: string, description: string): void {
+  const db = getDb()
+  db.prepare('UPDATE media_items SET ai_description = ? WHERE item_key = ?').run(description, itemKey)
+}
+
 /**
 * Translate text to a target language using the chat API.
 * Returns null if the text is already in the target language.