mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2025-03-16 15:12:22 +00:00
* WIP Anythropic support for chat, chat and query w/context * Add onboarding support for Anthropic * cleanup * fix Anthropic answer parsing move embedding selector to general util
179 lines
6.8 KiB
JavaScript
179 lines
6.8 KiB
JavaScript
import React, { memo, useEffect, useState } from "react";
|
|
import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
|
|
import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
|
|
import System from "../../../../../models/system";
|
|
import PreLoader from "../../../../../components/Preloader";
|
|
import LLMProviderOption from "../../../../../components/LLMProviderOption";
|
|
|
|
function EmbeddingSelection({ nextStep, prevStep, currentStep, goToStep }) {
|
|
const [embeddingChoice, setEmbeddingChoice] = useState("openai");
|
|
const [llmChoice, setLLMChoice] = useState("openai");
|
|
|
|
const [settings, setSettings] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const updateChoice = (selection) => {
|
|
setEmbeddingChoice(selection);
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function fetchKeys() {
|
|
const _settings = await System.keys();
|
|
setSettings(_settings);
|
|
setEmbeddingChoice(_settings?.EmbeddingEngine || "openai");
|
|
setLoading(false);
|
|
}
|
|
fetchKeys();
|
|
}, [currentStep]);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const data = {};
|
|
const formData = new FormData(form);
|
|
for (var [key, value] of formData.entries()) data[key] = value;
|
|
const { error } = await System.updateSystem(data);
|
|
if (error) {
|
|
alert(`Failed to save LLM settings: ${error}`, "error");
|
|
return;
|
|
}
|
|
goToStep(2);
|
|
return;
|
|
};
|
|
|
|
if (loading)
|
|
return (
|
|
<div className="w-full h-full flex justify-center items-center p-20">
|
|
<PreLoader />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<form onSubmit={handleSubmit} className="flex flex-col w-full">
|
|
<div className="flex flex-col w-full px-1 md:px-8 py-12">
|
|
<div className="text-white text-sm font-medium pb-4">
|
|
Embedding Provider
|
|
</div>
|
|
<div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
|
|
<input
|
|
hidden={true}
|
|
name="EmbeddingEngine"
|
|
value={embeddingChoice}
|
|
/>
|
|
<LLMProviderOption
|
|
name="OpenAI"
|
|
value="openai"
|
|
link="openai.com"
|
|
description="The standard option for most non-commercial use. Provides both chat and embedding."
|
|
checked={embeddingChoice === "openai"}
|
|
image={OpenAiLogo}
|
|
onClick={updateChoice}
|
|
/>
|
|
<LLMProviderOption
|
|
name="Azure OpenAI"
|
|
value="azure"
|
|
link="azure.microsoft.com"
|
|
description="The enterprise option of OpenAI hosted on Azure services. Provides both chat and embedding."
|
|
checked={embeddingChoice === "azure"}
|
|
image={AzureOpenAiLogo}
|
|
onClick={updateChoice}
|
|
/>
|
|
</div>
|
|
<div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
|
|
{embeddingChoice === "openai" && (
|
|
<>
|
|
<div className="flex flex-col w-60">
|
|
<label className="text-white text-sm font-semibold block mb-4">
|
|
API Key
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="OpenAiKey"
|
|
className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
|
|
placeholder="OpenAI API Key"
|
|
defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
|
|
required={true}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{embeddingChoice === "azure" && (
|
|
<>
|
|
<div className="flex flex-col w-60">
|
|
<label className="text-white text-sm font-semibold block mb-4">
|
|
Azure Service Endpoint
|
|
</label>
|
|
<input
|
|
type="url"
|
|
name="AzureOpenAiEndpoint"
|
|
className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
|
|
placeholder="https://my-azure.openai.azure.com"
|
|
defaultValue={settings?.AzureOpenAiEndpoint}
|
|
required={true}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col w-60">
|
|
<label className="text-white text-sm font-semibold block mb-4">
|
|
API Key
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="AzureOpenAiKey"
|
|
className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
|
|
placeholder="Azure OpenAI API Key"
|
|
defaultValue={
|
|
settings?.AzureOpenAiKey ? "*".repeat(20) : ""
|
|
}
|
|
required={true}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col w-60">
|
|
<label className="text-white text-sm font-semibold block mb-4">
|
|
Embedding Deployment Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="AzureOpenAiEmbeddingModelPref"
|
|
className="bg-zinc-900 text-white placeholder-white placeholder-opacity-60 text-sm rounded-lg focus:border-white block w-full p-2.5"
|
|
placeholder="Azure OpenAI embedding model deployment name"
|
|
defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
|
|
required={true}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
|
|
<button
|
|
onClick={() => goToStep(1)}
|
|
type="button"
|
|
className="px-4 py-2 rounded-lg text-white hover:bg-sidebar"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="border border-slate-200 px-4 py-2 rounded-lg text-slate-800 bg-slate-200 text-sm items-center flex gap-x-2 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(EmbeddingSelection);
|