feat: add Ollama local provider support
- Added Ollama (local) as AI provider option - Configure VPS endpoint for Ollama connection - Auto-detect available models from Ollama server - Support for vision-capable models (llama3.2-vision, etc)
This commit is contained in:
39
App.tsx
39
App.tsx
@@ -14,6 +14,7 @@ import { ApiKeySetup } from './components/ApiKeySetup';
|
||||
const App: React.FC = () => {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [apiKey, setApiKey] = useState<string>('');
|
||||
const [endpoint, setEndpoint] = useState<string>('');
|
||||
const [provider, setProvider] = useState<AIProvider>('gemini');
|
||||
const [model, setModel] = useState<string>('gemini-2.5-flash');
|
||||
const [hasKey, setHasKey] = useState<boolean>(false);
|
||||
@@ -25,11 +26,13 @@ const App: React.FC = () => {
|
||||
const savedApiKey = localStorage.getItem('api-key');
|
||||
const savedProvider = localStorage.getItem('ai-provider') as AIProvider;
|
||||
const savedModel = localStorage.getItem('model-' + savedProvider);
|
||||
const savedEndpoint = localStorage.getItem('ollama-endpoint');
|
||||
|
||||
if (savedApiKey) {
|
||||
setApiKey(savedApiKey);
|
||||
if (savedApiKey || savedEndpoint) {
|
||||
setApiKey(savedApiKey || '');
|
||||
if (savedProvider) setProvider(savedProvider);
|
||||
if (savedModel) setModel(savedModel);
|
||||
if (savedEndpoint) setEndpoint(savedEndpoint);
|
||||
setHasKey(true);
|
||||
}
|
||||
}, []);
|
||||
@@ -42,24 +45,33 @@ const App: React.FC = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleKeySave = useCallback((key: string, newProvider: AIProvider, newModel: string) => {
|
||||
if (key) {
|
||||
setApiKey(key);
|
||||
setProvider(newProvider);
|
||||
setModel(newModel);
|
||||
localStorage.setItem('api-key', key);
|
||||
localStorage.setItem('ai-provider', newProvider);
|
||||
localStorage.setItem('model-' + newProvider, newModel);
|
||||
setHasKey(true);
|
||||
const handleKeySave = useCallback((key: string, newProvider: AIProvider, newModel: string, newEndpoint?: string) => {
|
||||
setApiKey(key);
|
||||
setProvider(newProvider);
|
||||
setModel(newModel);
|
||||
if (newEndpoint) {
|
||||
setEndpoint(newEndpoint);
|
||||
localStorage.setItem('ollama-endpoint', newEndpoint);
|
||||
}
|
||||
if (key) {
|
||||
localStorage.setItem('api-key', key);
|
||||
}
|
||||
localStorage.setItem('ai-provider', newProvider);
|
||||
localStorage.setItem('model-' + newProvider, newModel);
|
||||
setHasKey(true);
|
||||
}, []);
|
||||
|
||||
const handleAnalyzeClick = async () => {
|
||||
if (!apiKey) {
|
||||
if (provider !== 'ollama' && !apiKey) {
|
||||
setError("A chave de API não foi encontrada. Por favor, configure-a novamente.");
|
||||
setHasKey(false);
|
||||
return;
|
||||
}
|
||||
if (provider === 'ollama' && !endpoint) {
|
||||
setError("O endereço do Ollama não foi configurado. Por favor, configure-o.");
|
||||
setHasKey(false);
|
||||
return;
|
||||
}
|
||||
if (!file) {
|
||||
setError("Por favor, selecione um arquivo primeiro.");
|
||||
return;
|
||||
@@ -72,7 +84,8 @@ const App: React.FC = () => {
|
||||
provider,
|
||||
apiKey,
|
||||
model,
|
||||
file
|
||||
file,
|
||||
endpoint: provider === 'ollama' ? endpoint : undefined
|
||||
});
|
||||
setReportData(data);
|
||||
} catch (err) {
|
||||
|
||||
@@ -4,7 +4,7 @@ import { PROVIDERS, type AIProvider } from '../types/providers';
|
||||
import { testApiKey, type ModelInfo } from '../services/apiTestService';
|
||||
|
||||
interface ApiKeySetupProps {
|
||||
onKeySave: (key: string, provider: AIProvider, model: string) => void;
|
||||
onKeySave: (key: string, provider: AIProvider, model: string, endpoint?: string) => void;
|
||||
}
|
||||
|
||||
const isValidApiKey = (key: string): boolean => {
|
||||
@@ -63,6 +63,7 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
|
||||
case 'openai': return 'https://platform.openai.com/api-keys';
|
||||
case 'anthropic': return 'https://console.anthropic.com/keys';
|
||||
case 'azure': return 'https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps';
|
||||
case 'ollama': return 'https://ollama.com/download';
|
||||
default: return '#';
|
||||
}
|
||||
};
|
||||
@@ -73,6 +74,7 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
|
||||
case 'openai': return 'OpenAI';
|
||||
case 'anthropic': return 'Anthropic (Claude)';
|
||||
case 'azure': return 'Azure OpenAI';
|
||||
case 'ollama': return 'Ollama (Local)';
|
||||
default: return 'API';
|
||||
}
|
||||
};
|
||||
@@ -115,7 +117,11 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (localApiKey.trim() && isValidApiKey(localApiKey)) {
|
||||
if (provider === 'ollama') {
|
||||
if (endpoint.trim()) {
|
||||
onKeySave('', provider, model, endpoint.trim());
|
||||
}
|
||||
} else if (localApiKey.trim() && isValidApiKey(localApiKey)) {
|
||||
onKeySave(localApiKey.trim(), provider, model);
|
||||
}
|
||||
};
|
||||
@@ -157,79 +163,86 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Azure Endpoint (only show if Azure is selected) */}
|
||||
{provider === 'azure' && (
|
||||
{/* Azure/Ollama Endpoint */}
|
||||
{(provider === 'azure' || provider === 'ollama') && (
|
||||
<div>
|
||||
<label htmlFor="azure-endpoint" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Endpoint do Azure
|
||||
<label htmlFor="provider-endpoint" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
{provider === 'ollama' ? 'Endereço do Ollama (VPS)' : 'Endpoint do Azure'}
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="azure-endpoint"
|
||||
id="provider-endpoint"
|
||||
className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
||||
placeholder="https://seu-resource.openai.azure.com"
|
||||
placeholder={provider === 'ollama' ? 'http://192.168.1.100:11434' : 'https://seu-resource.openai.azure.com'}
|
||||
value={endpoint}
|
||||
onChange={(e) => setEndpoint(e.target.value)}
|
||||
/>
|
||||
{provider === 'ollama' && (
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
Informe o IP público da sua VPS e a porta (padrão: 11434)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API Key Input */}
|
||||
<div>
|
||||
<label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Chave de API ({getProviderLabel(provider)})
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<KeyIcon className="h-5 w-5 text-slate-400" />
|
||||
{/* API Key Input (not needed for Ollama) */}
|
||||
{provider !== 'ollama' && (
|
||||
<div>
|
||||
<label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Chave de API ({getProviderLabel(provider)})
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<KeyIcon className="h-5 w-5 text-slate-400" />
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
id="api-key-setup"
|
||||
className={`block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-24 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-all
|
||||
${isValid === false ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
|
||||
${testStatus === 'success' ? 'border-green-500 focus:border-green-500 focus:ring-green-500' : ''}`}
|
||||
placeholder="Cole sua chave aqui"
|
||||
value={localApiKey}
|
||||
onChange={handleChange}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleTestApi()}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTestApi}
|
||||
disabled={isTesting || !localApiKey.trim()}
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-all
|
||||
${testStatus === 'success'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: testStatus === 'error'
|
||||
? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
: 'bg-slate-200 dark:bg-slate-600 text-slate-600 dark:text-slate-300 hover:bg-blue-500 hover:text-white'
|
||||
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
>
|
||||
{isTesting ? (
|
||||
<span className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
|
||||
) : testStatus === 'success' ? (
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<TestTubeIcon className="w-3 h-3" />
|
||||
)}
|
||||
<span>{isTesting ? 'Testando...' : testStatus === 'success' ? 'OK' : 'Testar'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
id="api-key-setup"
|
||||
className={`block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-24 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-all
|
||||
${isValid === false ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
|
||||
${testStatus === 'success' ? 'border-green-500 focus:border-green-500 focus:ring-green-500' : ''}`}
|
||||
placeholder="Cole sua chave aqui"
|
||||
value={localApiKey}
|
||||
onChange={handleChange}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleTestApi()}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTestApi}
|
||||
disabled={isTesting || !localApiKey.trim()}
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-all
|
||||
${testStatus === 'success'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: testStatus === 'error'
|
||||
? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
: 'bg-slate-200 dark:bg-slate-600 text-slate-600 dark:text-slate-300 hover:bg-blue-500 hover:text-white'
|
||||
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
>
|
||||
{isTesting ? (
|
||||
<span className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
|
||||
) : testStatus === 'success' ? (
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<TestTubeIcon className="w-3 h-3" />
|
||||
)}
|
||||
<span>{isTesting ? 'Testando...' : testStatus === 'success' ? 'OK' : 'Testar'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="mt-2 text-xs text-red-600 dark:text-red-400" role="alert">
|
||||
{error}
|
||||
{error && (
|
||||
<p className="mt-2 text-xs text-red-600 dark:text-red-400" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
Não tem uma chave? <a href={getProviderLink(provider)} target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline">Obtenha aqui</a>.
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
Não tem uma chave? <a href={getProviderLink(provider)} target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline">Obtenha aqui</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Model Selector */}
|
||||
<div>
|
||||
@@ -268,7 +281,7 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!localApiKey.trim() || isValid === false}
|
||||
disabled={provider !== 'ollama' && (!localApiKey.trim() || isValid === false)}
|
||||
className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
|
||||
>
|
||||
<SaveIcon className="h-5 w-5" />
|
||||
|
||||
@@ -347,7 +347,67 @@ export const analyzeCertificate = async (options: AnalyzeOptions): Promise<Repor
|
||||
return analyzeWithAnthropic(file, apiKey, model);
|
||||
case 'azure':
|
||||
return analyzeWithAzure(file, apiKey, endpoint!, model);
|
||||
case 'ollama':
|
||||
return analyzeWithOllama(file, endpoint!, model);
|
||||
default:
|
||||
throw new Error(`Provedor não suportado: ${provider}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const analyzeWithOllama = async (file: File, endpoint: string, model: string = 'llama3.2-vision'): Promise<ReportData> => {
|
||||
if (!endpoint) {
|
||||
throw new Error("O endpoint do Ollama é necessário. Configure o endereço da sua VPS.");
|
||||
}
|
||||
|
||||
const base64Data = await new Promise<string>((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve((reader.result as string).split(',')[1]);
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
const url = `${endpoint}/api/chat`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model,
|
||||
messages: [
|
||||
{
|
||||
role: 'user',
|
||||
content: [
|
||||
{
|
||||
type: 'image',
|
||||
data: base64Data
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: PROMPT_BASE + "\n\nRetorne apenas JSON válido sem formatação markdown."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
format: 'json',
|
||||
options: {
|
||||
temperature: 0.1,
|
||||
num_predict: 4096
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.text();
|
||||
throw new Error(`Erro do Ollama: ${error}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const content = data.message?.content;
|
||||
|
||||
if (!content) {
|
||||
throw new Error("Resposta vazia do Ollama");
|
||||
}
|
||||
|
||||
return cleanAndParseJson(content) as ReportData;
|
||||
};
|
||||
@@ -22,6 +22,8 @@ export const testApiKey = async (provider: AIProvider, apiKey: string, endpoint?
|
||||
return await testAnthropic(apiKey);
|
||||
case 'azure':
|
||||
return await testAzure(apiKey, endpoint);
|
||||
case 'ollama':
|
||||
return await testOllama(endpoint);
|
||||
default:
|
||||
return { success: false, error: 'Provedor não suportado' };
|
||||
}
|
||||
@@ -33,6 +35,44 @@ export const testApiKey = async (provider: AIProvider, apiKey: string, endpoint?
|
||||
}
|
||||
};
|
||||
|
||||
const testOllama = async (endpoint?: string): Promise<TestResult> => {
|
||||
if (!endpoint) {
|
||||
return { success: false, error: 'Endereço do Ollama é obrigatório (ex: http://192.168.1.100:11434)' };
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${endpoint}/api/tags`);
|
||||
|
||||
if (!response.ok) {
|
||||
return { success: false, error: 'Não foi possível conectar ao Ollama. Verifique o endereço.' };
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const models = data.models?.map((m: any) => ({
|
||||
id: m.name,
|
||||
name: m.name
|
||||
})) || [];
|
||||
|
||||
const visionModels = models.filter((m: ModelInfo) =>
|
||||
m.id.includes('vision') ||
|
||||
m.id.includes('llama3') ||
|
||||
m.id.includes('qwen2') ||
|
||||
m.id.includes('moondream')
|
||||
);
|
||||
|
||||
if (visionModels.length > 0) {
|
||||
return { success: true, models: visionModels };
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
models: models.length > 0 ? models : [{ id: 'llama3.2', name: 'Llama 3.2 (Padrão)' }]
|
||||
};
|
||||
} catch (error: any) {
|
||||
return { success: false, error: 'Não foi possível conectar ao Ollama. Verifique o endereço e certifique-se que o Ollama está rodando.' };
|
||||
}
|
||||
};
|
||||
|
||||
const testGemini = async (apiKey: string): Promise<TestResult> => {
|
||||
const { GoogleGenAI } = await import('@google/genai');
|
||||
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
export type AIProvider = 'gemini' | 'openai' | 'anthropic' | 'azure';
|
||||
import { AIProvider } from './providers';
|
||||
|
||||
export type AIProvider = 'gemini' | 'openai' | 'anthropic' | 'azure' | 'ollama';
|
||||
|
||||
export interface ProviderConfig {
|
||||
id: AIProvider;
|
||||
@@ -38,5 +40,13 @@ export const PROVIDERS: ProviderConfig[] = [
|
||||
models: ['gpt-4', 'gpt-4-32k', 'gpt-35-turbo'],
|
||||
requiresEndpoint: true,
|
||||
defaultModel: 'gpt-4'
|
||||
},
|
||||
{
|
||||
id: 'ollama',
|
||||
name: 'Ollama (Local)',
|
||||
description: 'LLMs rodando localmente na sua VPS',
|
||||
models: [],
|
||||
requiresEndpoint: true,
|
||||
defaultModel: 'llama3.2-vision'
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user