Skip to content
Snippets Groups Projects
Unverified Commit dfb951e9 authored by Sean Hatfield's avatar Sean Hatfield Committed by GitHub
Browse files

Auto URL detection for localai (#2083) 

* implement auto url detection for localai

* add ports to localai common urls
parent fce0d8b7
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+ 74
− 28
View file @ dfb951e9
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
......@@ -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>
......@@ -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>
);
}
......@@ -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
......@@ -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
......
frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+ 75
− 29
View file @ dfb951e9
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);
......@@ -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
......@@ -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"
......@@ -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>
);
}
......@@ -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
......@@ -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
......
frontend/src/utils/constants.js
+ 7
− 0
View file @ dfb951e9
......@@ -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`;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

:feet::heart: Strive to be the person your dogs believe you are :heart::feet: