paul/task-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhanced Ollama Integration (Model Fetching/Pulling)
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
paul
2025-12-12 08:57:30 +01:00
parent 93063f772d
commit a184115d28
2 changed files with 169 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/admin/AiSettingsCard.tsx
+124 -15
View File
@@ -10,6 +10,18 @@ import { Loader2, Bot } from "lucide-react";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { Loader2, Bot, RefreshCw, Download, Server } from "lucide-react";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
export function AiSettingsCard() {
const { t } = useTranslation();
const { toast } = useToast();
@@ -24,6 +36,10 @@ export function AiSettingsCard() {
const [model, setModel] = useState("gpt-4o");
const [baseUrl, setBaseUrl] = useState("");
// Ollama specific state
const [ollamaModels, setOllamaModels] = useState<string[]>([]);
const [pullModelName, setPullModelName] = useState("");
useEffect(() => {
if (settings) {
setProvider(settings.ai_provider || "openai");
@@ -47,6 +63,39 @@ export function AiSettingsCard() {
}
});
const fetchOllamaModelsMutation = useMutation({
mutationFn: async () => {
const res = await apiRequest("POST", "/api/admin/ollama/tags", { baseUrl });
if (!res.ok) throw new Error("Failed to fetch models");
return res.json();
},
onSuccess: (data: any) => {
const models = data.models?.map((m: any) => m.name) || [];
setOllamaModels(models);
toast({ title: `Found ${models.length} models` });
},
onError: (err: Error) => {
toast({ title: "Could not connect to Ollama", description: err.message, variant: "destructive" });
}
});
const pullOllamaModelMutation = useMutation({
mutationFn: async () => {
const res = await apiRequest("POST", "/api/admin/ollama/pull", { baseUrl, model: pullModelName });
if (!res.ok) throw new Error(await res.text());
return res.json();
},
onSuccess: () => {
toast({ title: "Model pulled successfully" });
setPullModelName("");
fetchOllamaModelsMutation.mutate(); // Refresh list
},
onError: (err: Error) => {
toast({ title: "Failed to pull model", description: err.message, variant: "destructive" });
}
});
const handleSave = () => {
mutation.mutate({
ai_provider: provider,
@@ -75,8 +124,8 @@ export function AiSettingsCard() {
if (v === 'openai' && model === 'claude-3-5-sonnet') setModel('gpt-4o');
if (v === 'anthropic' && model === 'gpt-4o') setModel('claude-3-5-sonnet');
if (v === 'ollama') {
setBaseUrl('http://localhost:11434');
setModel('llama3');
setBaseUrl(baseUrl || 'http://localhost:11434');
if (!ollamaModels.length) setModel('llama3'); // Default if unknown
}
}}>
<SelectTrigger>
@@ -102,27 +151,87 @@ export function AiSettingsCard() {
</div>
<div className="grid gap-2">
<Label>{t('settings.ai.model')}</Label>
<Input
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="e.g. gpt-4, claude-3-opus, llama3"
/>
<Label>{t('settings.ai.baseUrl')}</Label>
<div className="flex gap-2">
<Input
value={baseUrl}
onChange={(e) => setBaseUrl(e.target.value)}
placeholder={provider === 'ollama' ? 'http://localhost:11434' : 'Optional override'}
/>
{provider === 'ollama' && (
<Button
variant="outline"
size="icon"
onClick={() => fetchOllamaModelsMutation.mutate()}
disabled={fetchOllamaModelsMutation.isPending}
title="Fetch Models from Server"
>
{fetchOllamaModelsMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
</Button>
)}
</div>
</div>
<div className="grid gap-2">
<Label>{t('settings.ai.baseUrl')}</Label>
<Input
value={baseUrl}
onChange={(e) => setBaseUrl(e.target.value)}
placeholder={provider === 'ollama' ? 'http://localhost:11434' : 'Optional override'}
/>
<Label>{t('settings.ai.model')}</Label>
{provider === 'ollama' && ollamaModels.length > 0 ? (
<div className="flex gap-2">
<Select value={model} onValueChange={setModel}>
<SelectTrigger className="flex-1">
<SelectValue placeholder="Select a model" />
</SelectTrigger>
<SelectContent>
{ollamaModels.map(m => (
<SelectItem key={m} value={m}>{m}</SelectItem>
))}
</SelectContent>
</Select>
</div>
) : (
<Input
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="e.g. gpt-4, llama3"
/>
)}
</div>
{provider === 'ollama' && (
<div className="pt-4 border-t space-y-3">
<Label className="text-sm font-medium flex items-center gap-2">
<Download className="w-4 h-4" />
Pull Model from Ollama Library
</Label>
<div className="flex gap-2">
<Input
placeholder="Model name (e.g. llama3, mistral)"
value={pullModelName}
onChange={(e) => setPullModelName(e.target.value)}
/>
<Button
onClick={() => pullOllamaModelMutation.mutate()}
disabled={!pullModelName || pullOllamaModelMutation.isPending}
>
{pullOllamaModelMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Pulling...
</>
) : "Pull"}
</Button>
</div>
<p className="text-xs text-muted-foreground">
Please check your server logs/Ollama console if the pull takes a long time.
Ensure the container has internet access.
</p>
</div>
)}
</CardContent>
<CardFooter>
<Button onClick={handleSave} disabled={mutation.isPending}>
{mutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Save
Save Settings
</Button>
</CardFooter>
</Card>