Adding missed files

frontend/src/components/ModelSelector.jsx

@@ -0,0 +1,33 @@
+import { Cpu } from 'lucide-react'
+
+const SELECT_CLASS =
+  'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
+  'focus:outline-none focus:border-purple-500/50 transition-colors'
+
+// Dropdown to pick which OCR model runs the analysis.
+// `models` comes from the useModels() hook; `value` is the selected model id.
+export default function ModelSelector({ models, value, onChange, loading }) {
+  return (
+    <div className="glass p-4 rounded-2xl space-y-3">
+      <div className="flex items-center gap-2">
+        <Cpu className="w-4 h-4 text-purple-400" />
+        <h3 className="text-sm font-semibold text-gray-200">Model</h3>
+      </div>
+
+      <select
+        value={value || ''}
+        onChange={e => onChange(e.target.value)}
+        disabled={loading || models.length === 0}
+        className={SELECT_CLASS}
+      >
+        {loading && <option value="">Loading models…</option>}
+        {!loading && models.length === 0 && <option value="">No models available</option>}
+        {models.map(m => (
+          <option key={m.id} value={m.id}>
+            {m.label}{m.default ? ' (default)' : ''}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

frontend/src/hooks/useModels.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+
+const API_BASE = import.meta.env.VITE_API_URL || '/api'
+
+// Fetches the OCR models available for selection. Returns { models, loading }.
+// Each model: { id, label, capabilities: { grounding, advanced_settings }, default }
+export function useModels() {
+  const [models, setModels] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch(`${API_BASE}/models`)
+      .then(r => (r.ok ? r.json() : null))
+      .then(data => {
+        if (!cancelled && data?.models) setModels(data.models)
+      })
+      .catch(() => {})
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [])
+
+  return { models, loading }
+}