feat: implement Hybrid AI architecture for admin norm builder
This commit is contained in:
@@ -19,6 +19,8 @@ const App: React.FC = () => {
|
|||||||
const [endpoint, setEndpoint] = useState<string>('');
|
const [endpoint, setEndpoint] = useState<string>('');
|
||||||
const [provider, setProvider] = useState<AIProvider>('gemini');
|
const [provider, setProvider] = useState<AIProvider>('gemini');
|
||||||
const [model, setModel] = useState<string>('gemini-2.5-flash');
|
const [model, setModel] = useState<string>('gemini-2.5-flash');
|
||||||
|
const [adminApiKey, setAdminApiKey] = useState<string>('');
|
||||||
|
const [adminModel, setAdminModel] = useState<string>('claude-3.5-sonnet-20241022');
|
||||||
const [hasKey, setHasKey] = useState<boolean>(false);
|
const [hasKey, setHasKey] = useState<boolean>(false);
|
||||||
const [reportsData, setReportsData] = useState<ReportData[] | null>(null);
|
const [reportsData, setReportsData] = useState<ReportData[] | null>(null);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
@@ -50,6 +52,9 @@ const App: React.FC = () => {
|
|||||||
fetch('/api/config')
|
fetch('/api/config')
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(config => {
|
.then(config => {
|
||||||
|
if (config.adminApiKey) setAdminApiKey(config.adminApiKey);
|
||||||
|
if (config.adminModel) setAdminModel(config.adminModel);
|
||||||
|
|
||||||
if (config.provider) {
|
if (config.provider) {
|
||||||
setProvider(config.provider);
|
setProvider(config.provider);
|
||||||
if (config.apiKey) setApiKey(config.apiKey);
|
if (config.apiKey) setApiKey(config.apiKey);
|
||||||
@@ -224,6 +229,20 @@ const App: React.FC = () => {
|
|||||||
apiKey={apiKey}
|
apiKey={apiKey}
|
||||||
model={model}
|
model={model}
|
||||||
endpoint={endpoint}
|
endpoint={endpoint}
|
||||||
|
adminApiKey={adminApiKey}
|
||||||
|
adminModel={adminModel}
|
||||||
|
onAdminConfigSave={(key, mdl) => {
|
||||||
|
setAdminApiKey(key);
|
||||||
|
setAdminModel(mdl);
|
||||||
|
fetch('/api/config', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
provider, apiKey, model, endpoint,
|
||||||
|
adminApiKey: key, adminModel: mdl
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : (!hasKey || showSetup) ? (
|
) : (!hasKey || showSetup) ? (
|
||||||
<ApiKeySetup onKeySave={handleKeySave} onCancel={hasKey ? () => setShowSetup(false) : undefined} />
|
<ApiKeySetup onKeySave={handleKeySave} onCancel={hasKey ? () => setShowSetup(false) : undefined} />
|
||||||
|
|||||||
@@ -8,6 +8,9 @@ interface AdminPanelProps {
|
|||||||
provider: AIProvider;
|
provider: AIProvider;
|
||||||
model: string;
|
model: string;
|
||||||
endpoint?: string;
|
endpoint?: string;
|
||||||
|
adminApiKey: string;
|
||||||
|
adminModel: string;
|
||||||
|
onAdminConfigSave: (key: string, model: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const AdminPanel: React.FC<AdminPanelProps> = (props) => {
|
export const AdminPanel: React.FC<AdminPanelProps> = (props) => {
|
||||||
|
|||||||
@@ -8,9 +8,12 @@ interface AdminStandardsProps {
|
|||||||
provider: AIProvider;
|
provider: AIProvider;
|
||||||
model: string;
|
model: string;
|
||||||
endpoint?: string;
|
endpoint?: string;
|
||||||
|
adminApiKey: string;
|
||||||
|
adminModel: string;
|
||||||
|
onAdminConfigSave: (key: string, model: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const AdminStandards: React.FC<AdminStandardsProps> = ({ apiKey, provider, model, endpoint }) => {
|
export const AdminStandards: React.FC<AdminStandardsProps> = ({ apiKey, provider, model, endpoint, adminApiKey, adminModel, onAdminConfigSave }) => {
|
||||||
const [categories, setCategories] = useState<Category[]>([]);
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string>('');
|
const [selectedCategory, setSelectedCategory] = useState<string>('');
|
||||||
const [standards, setStandards] = useState<any[]>([]);
|
const [standards, setStandards] = useState<any[]>([]);
|
||||||
@@ -21,6 +24,9 @@ export const AdminStandards: React.FC<AdminStandardsProps> = ({ apiKey, provider
|
|||||||
const [generatedJson, setGeneratedJson] = useState('');
|
const [generatedJson, setGeneratedJson] = useState('');
|
||||||
const [jsonError, setJsonError] = useState<string | null>(null);
|
const [jsonError, setJsonError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const [localAdminKey, setLocalAdminKey] = useState(adminApiKey);
|
||||||
|
const [localAdminModel, setLocalAdminModel] = useState(adminModel);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchCategories();
|
fetchCategories();
|
||||||
}, []);
|
}, []);
|
||||||
@@ -66,7 +72,8 @@ export const AdminStandards: React.FC<AdminStandardsProps> = ({ apiKey, provider
|
|||||||
setJsonError(null);
|
setJsonError(null);
|
||||||
try {
|
try {
|
||||||
const jsonObj = await buildStandardWithAI(
|
const jsonObj = await buildStandardWithAI(
|
||||||
{ provider, apiKey, model, endpoint },
|
// Use the admin config if provided, otherwise fallback to the global one
|
||||||
|
localAdminKey ? { provider: 'openrouter', apiKey: localAdminKey, model: localAdminModel } : { provider, apiKey, model, endpoint },
|
||||||
standardName,
|
standardName,
|
||||||
cat.description
|
cat.description
|
||||||
);
|
);
|
||||||
@@ -113,6 +120,42 @@ export const AdminStandards: React.FC<AdminStandardsProps> = ({ apiKey, provider
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="animate-fade-in space-y-8">
|
<div className="animate-fade-in space-y-8">
|
||||||
|
{/* Admin Engine Config */}
|
||||||
|
<div className="bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 p-5">
|
||||||
|
<h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 mb-3">Motor de Engenharia IA (Opcional)</h3>
|
||||||
|
<p className="text-xs text-slate-500 mb-4">
|
||||||
|
Para criar normas perfeitamente estruturadas, recomendamos utilizar um modelo avançado como Claude 3.5 Sonnet ou GPT-4o via OpenRouter, separado do modelo de leitura rápida usado na página inicial.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">OpenRouter API Key (Admin)</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={localAdminKey}
|
||||||
|
onChange={e => setLocalAdminKey(e.target.value)}
|
||||||
|
placeholder="sk-or-v1-..."
|
||||||
|
className="w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Modelo de Alta Precisão</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={localAdminModel}
|
||||||
|
onChange={e => setLocalAdminModel(e.target.value)}
|
||||||
|
placeholder="ex: anthropic/claude-3.5-sonnet"
|
||||||
|
className="w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm font-mono"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => onAdminConfigSave(localAdminKey, localAdminModel)}
|
||||||
|
className="mt-3 px-4 py-1.5 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 text-xs font-bold rounded transition-all"
|
||||||
|
>
|
||||||
|
Salvar Cérebro Admin na Memória
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Selector */}
|
{/* Selector */}
|
||||||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5">
|
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5">
|
||||||
<label htmlFor="category-select" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Selecione a Categoria de Material</label>
|
<label htmlFor="category-select" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Selecione a Categoria de Material</label>
|
||||||
@@ -152,14 +195,14 @@ export const AdminStandards: React.FC<AdminStandardsProps> = ({ apiKey, provider
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={handleGenerate}
|
onClick={handleGenerate}
|
||||||
disabled={isGenerating || !standardName || !apiKey}
|
disabled={isGenerating || !standardName || !(localAdminKey || apiKey)}
|
||||||
className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white font-bold py-2.5 rounded-lg transition-all"
|
className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white font-bold py-2.5 rounded-lg transition-all"
|
||||||
>
|
>
|
||||||
{isGenerating ? 'Analisando e Extraindo Limites...' : 'Gerar Estrutura com IA'}
|
{isGenerating ? 'Analisando e Extraindo Limites...' : 'Gerar Estrutura com IA'}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{!apiKey && (
|
{!(localAdminKey || apiKey) && (
|
||||||
<p className="text-red-500 text-xs">Configure a Chave da API no painel inicial primeiro.</p>
|
<p className="text-red-500 text-xs">Configure uma Chave de IA (Admin ou Global) primeiro.</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{jsonError && (
|
{jsonError && (
|
||||||
|
|||||||
Reference in New Issue
Block a user