Create ApiKeyInput.tsx

frontend/components/ApiKeyInput.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+
+export default function ApiKeyInput() {
+  const { t } = useTranslation('common');
+  const [civitaiKey, setCivitaiKey] = useState('');
+  const [hfToken, setHfToken] = useState('');
+
+  useEffect(() => {
+    sessionStorage.setItem('civitai_key', civitaiKey);
+    sessionStorage.setItem('hf_token_manual', hfToken);
+  }, [civitaiKey, hfToken]);
+
+  return (
+    <div className="space-y-2">
+      <div>
+        <label className="block text-sm font-medium">{t('hf_token')} ({t('leave_blank_for_oauth')})</label>
+        <input type="password" value={hfToken} onChange={e => setHfToken(e.target.value)} className="mt-1 block w-full border rounded p-2" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium">{t('civitai_key')}</label>
+        <input type="password" value={civitaiKey} onChange={e => setCivitaiKey(e.target.value)} className="mt-1 block w-full border rounded p-2" />
+      </div>
+    </div>
+  );
+}