fix: resolve 422 from Replicate + add local Cog Docker mode
- replicate-translate: parse owner/model:hash correctly — extract only
the hash portion for the version field, and use the model endpoint
(POST /v1/models/{owner}/{model}/predictions) which avoids 422
'Invalid version' errors when sending the full owner/model:hash string.
- Add local Cog mode: when replicateMode="local", calls the local Docker
container directly (no Replicate API key needed), default endpoint
http://localhost:5030/predictions (host port 5030 → container port 5000).
- settings-store: add replicateMode ("cloud"|"local") and localEndpoint
fields with env var fallbacks REPLICATE_MODE and LOCAL_MODEL_ENDPOINT.
- admin panel: Radio selector for Cloud vs Local mode; shows docker run
command snippet and local endpoint URL field when local is selected;
hides Replicate API token field in local mode (not needed).
Local model startup:
docker run -d -p 5030:5000 \
r8.im/jigsawstack/text-translate@sha256:454df4c...
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,21 +3,26 @@ import { NextPage } from "next";
|
||||
import NextLink from "next/link";
|
||||
import {
|
||||
Box, VStack, HStack, Heading, Text, Input, Button, Switch,
|
||||
FormControl, FormLabel, FormHelperText, Divider, Alert, AlertIcon,
|
||||
FormControl, FormLabel, FormHelperText, Alert, AlertIcon,
|
||||
InputGroup, InputRightElement, IconButton, Badge, Link,
|
||||
useColorModeValue, Spinner, Textarea
|
||||
useColorModeValue, Spinner, Textarea, RadioGroup, Radio, Code
|
||||
} from "@chakra-ui/react";
|
||||
import { FiEye, FiEyeOff, FiSave, FiLogOut, FiArrowLeft } from "react-icons/fi";
|
||||
import { CustomHead } from "@components";
|
||||
|
||||
type ReplicateMode = "cloud" | "local";
|
||||
|
||||
type Settings = {
|
||||
replicateApiToken: string;
|
||||
jigsawApiKey: string;
|
||||
modelVersion: string;
|
||||
replicateEnabled: boolean;
|
||||
replicateMode: ReplicateMode;
|
||||
localEndpoint: string;
|
||||
};
|
||||
|
||||
const DEFAULT_MODEL = "jigsawstack/text-translate:454df4c49941c05dea05175bd37686d0872c73c1f9366d1c2505db32ade52a89";
|
||||
const DEFAULT_LOCAL_ENDPOINT = "http://localhost:5030/predictions";
|
||||
|
||||
const AdminPage: NextPage = () => {
|
||||
const [authed, setAuthed] = useState<boolean | null>(null);
|
||||
@@ -29,7 +34,9 @@ const AdminPage: NextPage = () => {
|
||||
replicateApiToken: "",
|
||||
jigsawApiKey: "",
|
||||
modelVersion: DEFAULT_MODEL,
|
||||
replicateEnabled: false
|
||||
replicateEnabled: false,
|
||||
replicateMode: "cloud",
|
||||
localEndpoint: DEFAULT_LOCAL_ENDPOINT
|
||||
});
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [saveMsg, setSaveMsg] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
@@ -41,8 +48,8 @@ const AdminPage: NextPage = () => {
|
||||
|
||||
const cardBg = useColorModeValue("white", "gray.800");
|
||||
const borderCol = useColorModeValue("gray.200", "gray.600");
|
||||
const codeBg = useColorModeValue("gray.100", "gray.700");
|
||||
|
||||
// Check auth on load
|
||||
useEffect(() => {
|
||||
fetch("/api/admin/auth")
|
||||
.then(r => r.json())
|
||||
@@ -50,7 +57,6 @@ const AdminPage: NextPage = () => {
|
||||
.catch(() => setAuthed(false));
|
||||
}, []);
|
||||
|
||||
// Load settings when authed
|
||||
useEffect(() => {
|
||||
if (!authed) return;
|
||||
fetch("/api/admin/settings")
|
||||
@@ -69,9 +75,8 @@ const AdminPage: NextPage = () => {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ password })
|
||||
});
|
||||
if (res.ok) {
|
||||
setAuthed(true);
|
||||
} else {
|
||||
if (res.ok) setAuthed(true);
|
||||
else {
|
||||
const d = await res.json();
|
||||
setLoginError(d.error ?? "Login failed");
|
||||
}
|
||||
@@ -125,11 +130,7 @@ const AdminPage: NextPage = () => {
|
||||
body: JSON.stringify({ text: "Hello, world!", targetLanguage: "es" })
|
||||
});
|
||||
const d = await res.json();
|
||||
if (res.ok) {
|
||||
setTestResult(`✓ Success: "${d.translation}"`);
|
||||
} else {
|
||||
setTestResult(`✗ Error: ${d.error}`);
|
||||
}
|
||||
setTestResult(res.ok ? `✓ "${d.translation}"` : `✗ ${d.error}`);
|
||||
} catch {
|
||||
setTestResult("✗ Network error");
|
||||
} finally {
|
||||
@@ -137,7 +138,6 @@ const AdminPage: NextPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Loading state
|
||||
if (authed === null) {
|
||||
return (
|
||||
<Box w="full" display="flex" justifyContent="center" pt={20}>
|
||||
@@ -146,22 +146,14 @@ const AdminPage: NextPage = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// Login form
|
||||
if (!authed) {
|
||||
return (
|
||||
<>
|
||||
<CustomHead home={false} />
|
||||
<Box
|
||||
w="full"
|
||||
maxW="400px"
|
||||
mx="auto"
|
||||
mt={10}
|
||||
p={8}
|
||||
bg={cardBg}
|
||||
borderWidth={1}
|
||||
borderColor={borderCol}
|
||||
borderRadius="xl"
|
||||
boxShadow="md"
|
||||
w="full" maxW="400px" mx="auto" mt={10} p={8}
|
||||
bg={cardBg} borderWidth={1} borderColor={borderCol}
|
||||
borderRadius="xl" boxShadow="md"
|
||||
>
|
||||
<VStack spacing={6} as="form" onSubmit={login}>
|
||||
<Heading size="md">Admin Login</Heading>
|
||||
@@ -181,12 +173,7 @@ const AdminPage: NextPage = () => {
|
||||
/>
|
||||
<FormHelperText>Default: admin (set ADMIN_PASSWORD env var)</FormHelperText>
|
||||
</FormControl>
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="lingva"
|
||||
w="full"
|
||||
isLoading={loginLoading}
|
||||
>
|
||||
<Button type="submit" colorScheme="lingva" w="full" isLoading={loginLoading}>
|
||||
Login
|
||||
</Button>
|
||||
<NextLink href="/" passHref>
|
||||
@@ -198,25 +185,21 @@ const AdminPage: NextPage = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// Admin panel
|
||||
return (
|
||||
<>
|
||||
<CustomHead home={false} />
|
||||
<Box w="full" maxW="700px" mx="auto" px={4} pb={10}>
|
||||
<HStack justify="space-between" mb={6}>
|
||||
<NextLink href="/" passHref>
|
||||
<Button as={Link} leftIcon={<FiArrowLeft />} variant="ghost" size="sm">
|
||||
Back
|
||||
</Button>
|
||||
<Button as={Link} leftIcon={<FiArrowLeft />} variant="ghost" size="sm">Back</Button>
|
||||
</NextLink>
|
||||
<Heading size="md">Admin Settings</Heading>
|
||||
<Button leftIcon={<FiLogOut />} variant="ghost" size="sm" onClick={logout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Button leftIcon={<FiLogOut />} variant="ghost" size="sm" onClick={logout}>Logout</Button>
|
||||
</HStack>
|
||||
|
||||
<VStack spacing={6} as="form" onSubmit={save}>
|
||||
{/* Replicate Section */}
|
||||
|
||||
{/* ── Replicate Section ── */}
|
||||
<Box w="full" p={6} bg={cardBg} borderWidth={1} borderColor={borderCol} borderRadius="xl">
|
||||
<HStack mb={4}>
|
||||
<Heading size="sm">Replicate AI Translation</Heading>
|
||||
@@ -235,35 +218,103 @@ const AdminPage: NextPage = () => {
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
{/* Mode selector */}
|
||||
<FormControl>
|
||||
<FormLabel>Replicate API Token</FormLabel>
|
||||
<InputGroup>
|
||||
<Input
|
||||
type={showToken ? "text" : "password"}
|
||||
value={settings.replicateApiToken}
|
||||
onChange={e => setSettings(s => ({ ...s, replicateApiToken: e.target.value }))}
|
||||
placeholder="r8_..."
|
||||
fontFamily="mono"
|
||||
fontSize="sm"
|
||||
/>
|
||||
<InputRightElement>
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
aria-label="Toggle visibility"
|
||||
icon={showToken ? <FiEyeOff /> : <FiEye />}
|
||||
onClick={() => setShowToken(v => !v)}
|
||||
/>
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
<FormHelperText>
|
||||
Get your token at{" "}
|
||||
<Link href="https://replicate.com/account/api-tokens" isExternal color="lingva.400">
|
||||
replicate.com/account/api-tokens
|
||||
</Link>
|
||||
</FormHelperText>
|
||||
<FormLabel>Translation Backend</FormLabel>
|
||||
<RadioGroup
|
||||
value={settings.replicateMode}
|
||||
onChange={v => setSettings(s => ({ ...s, replicateMode: v as ReplicateMode }))}
|
||||
>
|
||||
<HStack spacing={6}>
|
||||
<Radio value="cloud" colorScheme="lingva">
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontSize="sm" fontWeight="semibold">Replicate Cloud</Text>
|
||||
<Text fontSize="xs" color="gray.500">Uses replicate.com API</Text>
|
||||
</VStack>
|
||||
</Radio>
|
||||
<Radio value="local" colorScheme="lingva">
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontSize="sm" fontWeight="semibold">Local Docker (Cog)</Text>
|
||||
<Text fontSize="xs" color="gray.500">Uses local container</Text>
|
||||
</VStack>
|
||||
</Radio>
|
||||
</HStack>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
|
||||
{/* Cloud fields */}
|
||||
{settings.replicateMode === "cloud" && (
|
||||
<>
|
||||
<FormControl>
|
||||
<FormLabel>Replicate API Token</FormLabel>
|
||||
<InputGroup>
|
||||
<Input
|
||||
type={showToken ? "text" : "password"}
|
||||
value={settings.replicateApiToken}
|
||||
onChange={e => setSettings(s => ({ ...s, replicateApiToken: e.target.value }))}
|
||||
placeholder="r8_..."
|
||||
fontFamily="mono"
|
||||
fontSize="sm"
|
||||
/>
|
||||
<InputRightElement>
|
||||
<IconButton size="xs" variant="ghost"
|
||||
aria-label="Toggle visibility"
|
||||
icon={showToken ? <FiEyeOff /> : <FiEye />}
|
||||
onClick={() => setShowToken(v => !v)}
|
||||
/>
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
<FormHelperText>
|
||||
Get your token at{" "}
|
||||
<Link href="https://replicate.com/account/api-tokens" isExternal color="lingva.400">
|
||||
replicate.com/account/api-tokens
|
||||
</Link>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Model Version</FormLabel>
|
||||
<Textarea
|
||||
value={settings.modelVersion}
|
||||
onChange={e => setSettings(s => ({ ...s, modelVersion: e.target.value }))}
|
||||
fontFamily="mono"
|
||||
fontSize="xs"
|
||||
rows={2}
|
||||
placeholder={DEFAULT_MODEL}
|
||||
/>
|
||||
<FormHelperText>
|
||||
Format: <Code fontSize="xs">owner/model:hash</Code> — the hash after the colon is extracted automatically.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Local fields */}
|
||||
{settings.replicateMode === "local" && (
|
||||
<>
|
||||
<Box bg={codeBg} p={4} borderRadius="md" fontSize="sm">
|
||||
<Text fontWeight="semibold" mb={2}>Start the local model container:</Text>
|
||||
<Code display="block" fontSize="xs" whiteSpace="pre" overflowX="auto">
|
||||
{`docker run -d -p 5030:5000 \\\n r8.im/jigsawstack/text-translate@sha256:454df4c49941c05dea05175bd37686d0872c73c1f9366d1c2505db32ade52a89`}
|
||||
</Code>
|
||||
</Box>
|
||||
<FormControl>
|
||||
<FormLabel>Local Model Endpoint</FormLabel>
|
||||
<Input
|
||||
value={settings.localEndpoint}
|
||||
onChange={e => setSettings(s => ({ ...s, localEndpoint: e.target.value }))}
|
||||
placeholder={DEFAULT_LOCAL_ENDPOINT}
|
||||
fontFamily="mono"
|
||||
fontSize="sm"
|
||||
/>
|
||||
<FormHelperText>
|
||||
Default: <Code fontSize="xs">{DEFAULT_LOCAL_ENDPOINT}</Code> (container port 5000 mapped to host 5030)
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* JigsawStack key — needed in both modes */}
|
||||
<FormControl>
|
||||
<FormLabel>JigsawStack API Key</FormLabel>
|
||||
<InputGroup>
|
||||
@@ -276,9 +327,7 @@ const AdminPage: NextPage = () => {
|
||||
fontSize="sm"
|
||||
/>
|
||||
<InputRightElement>
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
<IconButton size="xs" variant="ghost"
|
||||
aria-label="Toggle visibility"
|
||||
icon={showJigsawKey ? <FiEyeOff /> : <FiEye />}
|
||||
onClick={() => setShowJigsawKey(v => !v)}
|
||||
@@ -286,44 +335,21 @@ const AdminPage: NextPage = () => {
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
<FormHelperText>
|
||||
Required for the JigsawStack translation model. Get yours at{" "}
|
||||
<Link href="https://jigsawstack.com" isExternal color="lingva.400">
|
||||
jigsawstack.com
|
||||
</Link>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Model Version</FormLabel>
|
||||
<Textarea
|
||||
value={settings.modelVersion}
|
||||
onChange={e => setSettings(s => ({ ...s, modelVersion: e.target.value }))}
|
||||
fontFamily="mono"
|
||||
fontSize="xs"
|
||||
rows={2}
|
||||
placeholder={DEFAULT_MODEL}
|
||||
/>
|
||||
<FormHelperText>
|
||||
Replicate model version string. Default uses the JigsawStack text-translate model.
|
||||
Required by the JigsawStack model in both cloud and local modes.{" "}
|
||||
<Link href="https://jigsawstack.com" isExternal color="lingva.400">Get yours →</Link>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<HStack>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
colorScheme="lingva"
|
||||
onClick={testTranslation}
|
||||
isLoading={testLoading}
|
||||
isDisabled={!settings.replicateEnabled || !settings.replicateApiToken}
|
||||
size="sm" variant="outline" colorScheme="lingva"
|
||||
onClick={testTranslation} isLoading={testLoading}
|
||||
isDisabled={!settings.replicateEnabled || !settings.jigsawApiKey}
|
||||
>
|
||||
Test Translation
|
||||
</Button>
|
||||
{testResult && (
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={testResult.startsWith("✓") ? "green.500" : "red.500"}
|
||||
>
|
||||
<Text fontSize="sm" color={testResult.startsWith("✓") ? "green.500" : "red.500"}>
|
||||
{testResult}
|
||||
</Text>
|
||||
)}
|
||||
@@ -331,7 +357,7 @@ const AdminPage: NextPage = () => {
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
{/* Security Section */}
|
||||
{/* ── Security ── */}
|
||||
<Box w="full" p={6} bg={cardBg} borderWidth={1} borderColor={borderCol} borderRadius="xl">
|
||||
<Heading size="sm" mb={4}>Security</Heading>
|
||||
<FormControl>
|
||||
@@ -343,7 +369,7 @@ const AdminPage: NextPage = () => {
|
||||
placeholder="Leave blank to keep current"
|
||||
minLength={6}
|
||||
/>
|
||||
<FormHelperText>Minimum 6 characters. Leave blank to keep current password.</FormHelperText>
|
||||
<FormHelperText>Minimum 6 characters. Leave blank to keep current.</FormHelperText>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
@@ -353,14 +379,7 @@ const AdminPage: NextPage = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="lingva"
|
||||
leftIcon={<FiSave />}
|
||||
isLoading={saving}
|
||||
size="lg"
|
||||
w="full"
|
||||
>
|
||||
<Button type="submit" colorScheme="lingva" leftIcon={<FiSave />} isLoading={saving} size="lg" w="full">
|
||||
Save Settings
|
||||
</Button>
|
||||
</VStack>
|
||||
|
||||
Reference in New Issue
Block a user