Add shared ai-service container as AI provider intermediary
All feature containers now POST messages to ai-service (port 8010) instead of calling AI providers directly. ai-service routes to LM Studio, Ollama, or Anthropic based on /config/ai_service_config.json. doc-service AI providers removed; replaced by httpx ai_client.py. Backend settings restructured to /api/settings/ai. Frontend gets dedicated AIAdminSettingsPage and AI Service card in AppsPage. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
@@ -0,0 +1,251 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import Nav from "../components/Nav";
|
||||
import { getAISettings, updateAISettings, testAIConnection } from "../api/client";
|
||||
|
||||
type Provider = "anthropic" | "ollama" | "lmstudio";
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<section style={{ marginBottom: 36 }}>
|
||||
<h2 style={{ fontSize: 18, marginBottom: 16 }}>{title}</h2>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", fontSize: 13, marginBottom: 4, color: "#555" }}>
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: "100%",
|
||||
padding: "7px 10px",
|
||||
fontSize: 14,
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: 4,
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
|
||||
export default function AIAdminSettingsPage() {
|
||||
const { data: rawSettings, isLoading } = useQuery({
|
||||
queryKey: ["aiSettings"],
|
||||
queryFn: getAISettings,
|
||||
});
|
||||
|
||||
const [provider, setProvider] = useState<Provider>("lmstudio");
|
||||
const [anthropicKey, setAnthropicKey] = useState("");
|
||||
const [anthropicModel, setAnthropicModel] = useState("");
|
||||
const [ollamaUrl, setOllamaUrl] = useState("");
|
||||
const [ollamaModel, setOllamaModel] = useState("");
|
||||
const [ollamaKey, setOllamaKey] = useState("");
|
||||
const [lmstudioUrl, setLmstudioUrl] = useState("");
|
||||
const [lmstudioModel, setLmstudioModel] = useState("");
|
||||
const [lmstudioKey, setLmstudioKey] = useState("");
|
||||
|
||||
const [testResult, setTestResult] = useState<{
|
||||
ok: boolean;
|
||||
response?: string;
|
||||
error?: string;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!rawSettings) return;
|
||||
const s = rawSettings as Record<string, unknown>;
|
||||
|
||||
if (s.provider) setProvider(s.provider as Provider);
|
||||
const ant = s.anthropic as Record<string, string> | undefined;
|
||||
if (ant?.api_key) setAnthropicKey(ant.api_key);
|
||||
if (ant?.model) setAnthropicModel(ant.model);
|
||||
const oll = s.ollama as Record<string, string> | undefined;
|
||||
if (oll?.base_url) setOllamaUrl(oll.base_url);
|
||||
if (oll?.model) setOllamaModel(oll.model);
|
||||
if (oll?.api_key) setOllamaKey(oll.api_key);
|
||||
const lms = s.lmstudio as Record<string, string> | undefined;
|
||||
if (lms?.base_url) setLmstudioUrl(lms.base_url);
|
||||
if (lms?.model) setLmstudioModel(lms.model);
|
||||
if (lms?.api_key) setLmstudioKey(lms.api_key);
|
||||
}, [rawSettings]);
|
||||
|
||||
const aiMut = useMutation({ mutationFn: updateAISettings });
|
||||
|
||||
const testMut = useMutation({
|
||||
mutationFn: testAIConnection,
|
||||
onSuccess: (data) => setTestResult(data),
|
||||
});
|
||||
|
||||
const save = () => {
|
||||
aiMut.mutate({
|
||||
provider,
|
||||
anthropic_api_key: anthropicKey,
|
||||
anthropic_model: anthropicModel,
|
||||
ollama_base_url: ollamaUrl,
|
||||
ollama_model: ollamaModel,
|
||||
ollama_api_key: ollamaKey,
|
||||
lmstudio_base_url: lmstudioUrl,
|
||||
lmstudio_model: lmstudioModel,
|
||||
lmstudio_api_key: lmstudioKey,
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div style={{ padding: 32 }}>Loading…</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div style={{ padding: 32, maxWidth: 600, margin: "0 auto" }}>
|
||||
<h1 style={{ fontSize: 24, marginBottom: 32 }}>AI Service — Settings</h1>
|
||||
|
||||
<Section title="AI Provider">
|
||||
<Field label="Provider">
|
||||
<select
|
||||
value={provider}
|
||||
onChange={(e) => setProvider(e.target.value as Provider)}
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="anthropic">Anthropic (cloud)</option>
|
||||
<option value="ollama">Ollama (local)</option>
|
||||
<option value="lmstudio">LM Studio (local)</option>
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
{provider === "anthropic" && (
|
||||
<>
|
||||
<Field label="API Key">
|
||||
<input
|
||||
type="password"
|
||||
value={anthropicKey}
|
||||
onChange={(e) => setAnthropicKey(e.target.value)}
|
||||
placeholder="sk-ant-… (leave blank to keep current)"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Model">
|
||||
<input
|
||||
value={anthropicModel}
|
||||
onChange={(e) => setAnthropicModel(e.target.value)}
|
||||
placeholder="claude-haiku-4-5-20251001"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{provider === "ollama" && (
|
||||
<>
|
||||
<Field label="Base URL">
|
||||
<input
|
||||
value={ollamaUrl}
|
||||
onChange={(e) => setOllamaUrl(e.target.value)}
|
||||
placeholder="http://192.168.1.x:11434/v1"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Model">
|
||||
<input
|
||||
value={ollamaModel}
|
||||
onChange={(e) => setOllamaModel(e.target.value)}
|
||||
placeholder="llama3.2"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="API Key (usually 'ollama')">
|
||||
<input
|
||||
value={ollamaKey}
|
||||
onChange={(e) => setOllamaKey(e.target.value)}
|
||||
placeholder="ollama"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
{provider === "lmstudio" && (
|
||||
<>
|
||||
<Field label="Base URL">
|
||||
<input
|
||||
value={lmstudioUrl}
|
||||
onChange={(e) => setLmstudioUrl(e.target.value)}
|
||||
placeholder="http://192.168.1.x:1234/v1"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Model">
|
||||
<input
|
||||
value={lmstudioModel}
|
||||
onChange={(e) => setLmstudioModel(e.target.value)}
|
||||
placeholder="local-model"
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="API Key (can be empty)">
|
||||
<input
|
||||
value={lmstudioKey}
|
||||
onChange={(e) => setLmstudioKey(e.target.value)}
|
||||
placeholder=""
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", gap: 10, marginTop: 16 }}>
|
||||
<button
|
||||
onClick={save}
|
||||
disabled={aiMut.isPending}
|
||||
style={{ padding: "8px 16px", cursor: "pointer", background: "#222", color: "#fff", borderRadius: 4, border: "none" }}
|
||||
>
|
||||
{aiMut.isPending ? "Saving…" : "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => testMut.mutate()}
|
||||
disabled={testMut.isPending}
|
||||
style={{ padding: "8px 16px", cursor: "pointer", borderRadius: 4, border: "1px solid #ccc" }}
|
||||
>
|
||||
{testMut.isPending ? "Testing…" : "Test Connection"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{aiMut.isSuccess && (
|
||||
<p style={{ marginTop: 8, fontSize: 13, color: "#2a9d8f" }}>Settings saved.</p>
|
||||
)}
|
||||
{aiMut.isError && (
|
||||
<p style={{ marginTop: 8, fontSize: 13, color: "#c00" }}>Failed to save settings.</p>
|
||||
)}
|
||||
|
||||
{testResult && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 10,
|
||||
padding: 10,
|
||||
borderRadius: 4,
|
||||
background: testResult.ok ? "#e8f5e9" : "#fdecea",
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{testResult.ok ? (
|
||||
<>Connected. Response: <em>{testResult.response}</em></>
|
||||
) : (
|
||||
<>Connection failed: {testResult.error}</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user