θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Auto URL detection for localai #2083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 12, 2024
Merged

Auto URL detection for localai #2083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b1b3324
implement auto url detection for localai
shatfield4 Aug 10, 2024
d68e2b3
Merge branch 'master' into localai-auto-url
shatfield4 Aug 12, 2024
718e983
add ports to localai common urls
shatfield4 Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 74 additions & 28 deletions frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,36 @@
import React, { useEffect, useState } from "react";
import { CaretDown, CaretUp } from "@phosphor-icons/react";
import System from "@/models/system";
import PreLoader from "@/components/Preloader";
import { LOCALAI_COMMON_URLS } from "@/utils/constants";
import useProviderEndpointAutoDiscovery from "@/hooks/useProviderEndpointAutoDiscovery";

export default function LocalAiOptions({ settings }) {
const [basePathValue, setBasePathValue] = useState(
settings?.EmbeddingBasePath
);
const [basePath, setBasePath] = useState(settings?.EmbeddingBasePath);
const {
autoDetecting: loading,
basePath,
basePathValue,
showAdvancedControls,
setShowAdvancedControls,
handleAutoDetectClick,
} = useProviderEndpointAutoDiscovery({
provider: "localai",
initialBasePath: settings?.EmbeddingBasePath,
ENDPOINTS: LOCALAI_COMMON_URLS,
});
const [apiKeyValue, setApiKeyValue] = useState(settings?.LocalAiApiKey);
const [apiKey, setApiKey] = useState(settings?.LocalAiApiKey);

return (
<div className="w-full flex flex-col gap-y-7">
<div className="w-full flex items-center gap-[36px] mt-1.5">
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
LocalAI Base URL
</label>
<input
type="url"
name="EmbeddingBasePath"
className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="http://localhost:8080/v1"
defaultValue={settings?.EmbeddingBasePath}
onChange={(e) => setBasePathValue(e.target.value)}
onBlur={() => setBasePath(basePathValue)}
required={true}
autoComplete="off"
spellCheck={false}
/>
</div>
<LocalAIModelSelection
settings={settings}
apiKey={apiKey}
basePath={basePath}
basePath={basePath.value}
/>
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-semibold block mb-2">
Max embedding chunk length
</label>
<input
Expand All @@ -50,10 +45,8 @@ export default function LocalAiOptions({ settings }) {
autoComplete="off"
/>
</div>
</div>
<div className="w-full flex items-center gap-[36px]">
<div className="flex flex-col w-60">
<div className="flex flex-col gap-y-1 mb-4">
<div className="flex flex-col gap-y-1 mb-2">
<label className="text-white text-sm font-semibold flex items-center gap-x-2">
Local AI API Key{" "}
<p className="!text-xs !italic !font-thin">optional</p>
Expand All @@ -72,6 +65,59 @@ export default function LocalAiOptions({ settings }) {
/>
</div>
</div>
<div className="flex justify-start mt-4">
<button
onClick={(e) => {
e.preventDefault();
setShowAdvancedControls(!showAdvancedControls);
}}
className="text-white hover:text-white/70 flex items-center text-sm"
>
{showAdvancedControls ? "Hide" : "Show"} advanced settings
{showAdvancedControls ? (
<CaretUp size={14} className="ml-1" />
) : (
<CaretDown size={14} className="ml-1" />
)}
</button>
</div>
<div hidden={!showAdvancedControls}>
<div className="w-full flex items-center gap-4">
<div className="flex flex-col w-60">
<div className="flex justify-between items-center mb-2">
<label className="text-white text-sm font-semibold">
LocalAI Base URL
</label>
{loading ? (
<PreLoader size="6" />
) : (
<>
{!basePathValue.value && (
<button
onClick={handleAutoDetectClick}
className="bg-primary-button text-xs font-medium px-2 py-1 rounded-lg hover:bg-secondary hover:text-white shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
>
Auto-Detect
</button>
)}
</>
)}
</div>
<input
type="url"
name="EmbeddingBasePath"
className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="http://localhost:8080/v1"
value={basePathValue.value}
required={true}
autoComplete="off"
spellCheck={false}
onChange={basePath.onChange}
onBlur={basePath.onBlur}
/>
</div>
</div>
</div>
</div>
);
}
Expand Down Expand Up @@ -102,7 +148,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
if (loading || customModels.length == 0) {
return (
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-semibold block mb-2">
Embedding Model Name
</label>
<select
Expand All @@ -122,7 +168,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {

return (
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-semibold block mb-2">
Embedding Model Name
</label>
<select
Expand Down
104 changes: 75 additions & 29 deletions frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
import { useEffect, useState } from "react";
import { Info } from "@phosphor-icons/react";
import React, { useEffect, useState } from "react";
import { Info, CaretDown, CaretUp } from "@phosphor-icons/react";
import paths from "@/utils/paths";
import System from "@/models/system";
import PreLoader from "@/components/Preloader";
import { LOCALAI_COMMON_URLS } from "@/utils/constants";
import useProviderEndpointAutoDiscovery from "@/hooks/useProviderEndpointAutoDiscovery";

export default function LocalAiOptions({ settings, showAlert = false }) {
const [basePathValue, setBasePathValue] = useState(settings?.LocalAiBasePath);
const [basePath, setBasePath] = useState(settings?.LocalAiBasePath);
const {
autoDetecting: loading,
basePath,
basePathValue,
showAdvancedControls,
setShowAdvancedControls,
handleAutoDetectClick,
} = useProviderEndpointAutoDiscovery({
provider: "localai",
initialBasePath: settings?.LocalAiBasePath,
ENDPOINTS: LOCALAI_COMMON_URLS,
});
const [apiKeyValue, setApiKeyValue] = useState(settings?.LocalAiApiKey);
const [apiKey, setApiKey] = useState(settings?.LocalAiApiKey);

Expand All @@ -29,32 +42,15 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
</div>
)}
<div className="w-full flex items-center gap-[36px] mt-1.5">
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
Local AI Base URL
</label>
<input
type="url"
name="LocalAiBasePath"
className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="http://localhost:1234/v1"
defaultValue={settings?.LocalAiBasePath}
required={true}
autoComplete="off"
spellCheck={false}
onChange={(e) => setBasePathValue(e.target.value)}
onBlur={() => setBasePath(basePathValue)}
/>
</div>
{!settings?.credentialsOnly && (
<>
<LocalAIModelSelection
settings={settings}
basePath={basePath}
basePath={basePath.value}
apiKey={apiKey}
/>
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-semibold block mb-2">
Token context window
</label>
<input
Expand All @@ -71,16 +67,13 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
</div>
</>
)}
</div>
<div className="w-full flex items-center gap-4">
<div className="flex flex-col w-60">
<div className="flex flex-col gap-y-1 mb-4">
<div className="flex flex-col gap-y-1 mb-2">
<label className="text-white text-sm font-semibold flex items-center gap-x-2">
Local AI API Key{" "}
<p className="!text-xs !italic !font-thin">optional</p>
</label>
</div>

<input
type="password"
name="LocalAiApiKey"
Expand All @@ -94,6 +87,59 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
/>
</div>
</div>
<div className="flex justify-start mt-4">
<button
onClick={(e) => {
e.preventDefault();
setShowAdvancedControls(!showAdvancedControls);
}}
className="text-white hover:text-white/70 flex items-center text-sm"
>
{showAdvancedControls ? "Hide" : "Show"} advanced settings
{showAdvancedControls ? (
<CaretUp size={14} className="ml-1" />
) : (
<CaretDown size={14} className="ml-1" />
)}
</button>
</div>
<div hidden={!showAdvancedControls}>
<div className="w-full flex items-center gap-4">
<div className="flex flex-col w-60">
<div className="flex justify-between items-center mb-2">
<label className="text-white text-sm font-semibold">
Local AI Base URL
</label>
{loading ? (
<PreLoader size="6" />
) : (
<>
{!basePathValue.value && (
<button
onClick={handleAutoDetectClick}
className="bg-primary-button text-xs font-medium px-2 py-1 rounded-lg hover:bg-secondary hover:text-white shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
>
Auto-Detect
</button>
)}
</>
)}
</div>
<input
type="url"
name="LocalAiBasePath"
className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="http://localhost:8080/v1"
value={basePathValue.value}
required={true}
autoComplete="off"
spellCheck={false}
onChange={basePath.onChange}
onBlur={basePath.onBlur}
/>
</div>
</div>
</div>
</div>
);
}
Expand Down Expand Up @@ -124,7 +170,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
if (loading || customModels.length == 0) {
return (
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-semibold block mb-2">
Chat Model Selection
</label>
<select
Expand All @@ -144,7 +190,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {

return (
<div className="flex flex-col w-60">
<label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-semibold block mb-2">
Chat Model Selection
</label>
<select
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/utils/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ export const KOBOLDCPP_COMMON_URLS = [
"http://172.17.0.1:5000/v1",
];

export const LOCALAI_COMMON_URLS = [
"http://127.0.0.1:8080/v1",
"http://localhost:8080/v1",
"http://host.docker.internal:8080/v1",
"http://172.17.0.1:8080/v1",
];

export function fullApiUrl() {
if (API_BASE !== "/api") return API_BASE;
return `${window.location.origin}/api`;
Expand Down