mirror of
https://github.com/Yidadaa/ChatGPT-Next-Web.git
synced 2025-08-25 01:41:21 +08:00
feat: add multi-model support
This commit is contained in:
Yidadaa
171
app/components/config/index.tsx
Normal file
171
app/components/config/index.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import {
|
||||
ChatConfig,
|
||||
LLMProvider,
|
||||
LLMProviders,
|
||||
ModelConfig,
|
||||
ProviderConfig,
|
||||
} from "@/app/store";
|
||||
import { Updater } from "@/app/typing";
|
||||
import { OpenAIModelConfig } from "./openai/model";
|
||||
import { OpenAIProviderConfig } from "./openai/provider";
|
||||
import { ListItem, Select } from "../ui-lib";
|
||||
import Locale from "@/app/locales";
|
||||
import { InputRange } from "../input-range";
|
||||
|
||||
export function ModelConfigList(props: {
|
||||
provider: LLMProvider;
|
||||
config: ModelConfig;
|
||||
updateConfig: Updater<ModelConfig>;
|
||||
}) {
|
||||
if (props.provider === "openai") {
|
||||
return (
|
||||
<OpenAIModelConfig
|
||||
config={props.config.openai}
|
||||
updateConfig={(update) => {
|
||||
props.updateConfig((config) => update(config.openai));
|
||||
}}
|
||||
models={[
|
||||
{
|
||||
name: "gpt-3.5-turbo",
|
||||
available: true,
|
||||
},
|
||||
{
|
||||
name: "gpt-4",
|
||||
available: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function ProviderConfigList(props: {
|
||||
provider: LLMProvider;
|
||||
config: ProviderConfig;
|
||||
updateConfig: Updater<ProviderConfig>;
|
||||
}) {
|
||||
if (props.provider === "openai") {
|
||||
return (
|
||||
<OpenAIProviderConfig
|
||||
config={props.config.openai}
|
||||
updateConfig={(update) => {
|
||||
props.updateConfig((config) => update(config.openai));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function ProviderSelectItem(props: {
|
||||
value: LLMProvider;
|
||||
update: (value: LLMProvider) => void;
|
||||
}) {
|
||||
return (
|
||||
<ListItem title="服务提供商" subTitle="切换不同的模型提供商">
|
||||
<Select
|
||||
value={props.value}
|
||||
onChange={(e) => {
|
||||
props.update(e.target.value as LLMProvider);
|
||||
}}
|
||||
>
|
||||
{LLMProviders.map(([k, v]) => (
|
||||
<option value={v} key={k}>
|
||||
{k}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</ListItem>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChatConfigList(props: {
|
||||
config: ChatConfig;
|
||||
updateConfig: (updater: (config: ChatConfig) => void) => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<ListItem
|
||||
title={Locale.Settings.InjectSystemPrompts.Title}
|
||||
subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.config.enableInjectSystemPrompts}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) =>
|
||||
(config.enableInjectSystemPrompts = e.currentTarget.checked),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
title={Locale.Settings.InputTemplate.Title}
|
||||
subTitle={Locale.Settings.InputTemplate.SubTitle}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={props.config.template}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.template = e.currentTarget.value),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
title={Locale.Settings.HistoryCount.Title}
|
||||
subTitle={Locale.Settings.HistoryCount.SubTitle}
|
||||
>
|
||||
<InputRange
|
||||
title={props.config.historyMessageCount.toString()}
|
||||
value={props.config.historyMessageCount}
|
||||
min="0"
|
||||
max="64"
|
||||
step="1"
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.historyMessageCount = e.target.valueAsNumber),
|
||||
)
|
||||
}
|
||||
></InputRange>
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
title={Locale.Settings.CompressThreshold.Title}
|
||||
subTitle={Locale.Settings.CompressThreshold.SubTitle}
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
min={500}
|
||||
max={4000}
|
||||
value={props.config.compressMessageLengthThreshold}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) =>
|
||||
(config.compressMessageLengthThreshold =
|
||||
e.currentTarget.valueAsNumber),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
<ListItem title={Locale.Memory.Title} subTitle={Locale.Memory.Send}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.config.sendMemory}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.sendMemory = e.currentTarget.checked),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
113
app/components/config/openai/model.tsx
Normal file
113
app/components/config/openai/model.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { ModelConfig } from "@/app/store";
|
||||
import { ModelConfigProps } from "../types";
|
||||
import { ListItem, Select } from "../../ui-lib";
|
||||
import Locale from "@/app/locales";
|
||||
import { InputRange } from "../../input-range";
|
||||
|
||||
export function OpenAIModelConfig(
|
||||
props: ModelConfigProps<ModelConfig["openai"]>,
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<ListItem title={Locale.Settings.Model}>
|
||||
<Select
|
||||
value={props.config.model}
|
||||
onChange={(e) => {
|
||||
props.updateConfig(
|
||||
(config) => (config.model = e.currentTarget.value),
|
||||
);
|
||||
}}
|
||||
>
|
||||
{props.models.map((v, i) => (
|
||||
<option value={v.name} key={i} disabled={!v.available}>
|
||||
{v.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title={Locale.Settings.Temperature.Title}
|
||||
subTitle={Locale.Settings.Temperature.SubTitle}
|
||||
>
|
||||
<InputRange
|
||||
value={props.config.temperature?.toFixed(1)}
|
||||
min="0"
|
||||
max="1" // lets limit it to 0-1
|
||||
step="0.1"
|
||||
onChange={(e) => {
|
||||
props.updateConfig(
|
||||
(config) => (config.temperature = e.currentTarget.valueAsNumber),
|
||||
);
|
||||
}}
|
||||
></InputRange>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title={Locale.Settings.TopP.Title}
|
||||
subTitle={Locale.Settings.TopP.SubTitle}
|
||||
>
|
||||
<InputRange
|
||||
value={(props.config.top_p ?? 1).toFixed(1)}
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
onChange={(e) => {
|
||||
props.updateConfig(
|
||||
(config) => (config.top_p = e.currentTarget.valueAsNumber),
|
||||
);
|
||||
}}
|
||||
></InputRange>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title={Locale.Settings.MaxTokens.Title}
|
||||
subTitle={Locale.Settings.MaxTokens.SubTitle}
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
min={100}
|
||||
max={100000}
|
||||
value={props.config.max_tokens}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.max_tokens = e.currentTarget.valueAsNumber),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title={Locale.Settings.PresencePenalty.Title}
|
||||
subTitle={Locale.Settings.PresencePenalty.SubTitle}
|
||||
>
|
||||
<InputRange
|
||||
value={props.config.presence_penalty?.toFixed(1)}
|
||||
min="-2"
|
||||
max="2"
|
||||
step="0.1"
|
||||
onChange={(e) => {
|
||||
props.updateConfig(
|
||||
(config) =>
|
||||
(config.presence_penalty = e.currentTarget.valueAsNumber),
|
||||
);
|
||||
}}
|
||||
></InputRange>
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
title={Locale.Settings.FrequencyPenalty.Title}
|
||||
subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
|
||||
>
|
||||
<InputRange
|
||||
value={props.config.frequency_penalty?.toFixed(1)}
|
||||
min="-2"
|
||||
max="2"
|
||||
step="0.1"
|
||||
onChange={(e) => {
|
||||
props.updateConfig(
|
||||
(config) =>
|
||||
(config.frequency_penalty = e.currentTarget.valueAsNumber),
|
||||
);
|
||||
}}
|
||||
></InputRange>
|
||||
</ListItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
71
app/components/config/openai/provider.tsx
Normal file
71
app/components/config/openai/provider.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { ProviderConfig } from "@/app/store";
|
||||
import { ProviderConfigProps } from "../types";
|
||||
import { ListItem, PasswordInput } from "../../ui-lib";
|
||||
import Locale from "@/app/locales";
|
||||
import { REMOTE_API_HOST } from "@/app/constant";
|
||||
|
||||
export function OpenAIProviderConfig(
|
||||
props: ProviderConfigProps<ProviderConfig["openai"]>,
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<ListItem
|
||||
title={Locale.Settings.Endpoint.Title}
|
||||
subTitle={Locale.Settings.Endpoint.SubTitle}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={props.config.endpoint}
|
||||
placeholder={REMOTE_API_HOST}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.endpoint = e.currentTarget.value),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title={Locale.Settings.Token.Title}
|
||||
subTitle={Locale.Settings.Token.SubTitle}
|
||||
>
|
||||
<PasswordInput
|
||||
value={props.config.apiKey}
|
||||
type="text"
|
||||
placeholder={Locale.Settings.Token.Placeholder}
|
||||
onChange={(e) => {
|
||||
props.updateConfig(
|
||||
(config) => (config.apiKey = e.currentTarget.value),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title={Locale.Settings.CustomModel.Title}
|
||||
subTitle={Locale.Settings.CustomModel.SubTitle}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={props.config.customModels}
|
||||
placeholder="model1,model2,model3"
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.customModels = e.currentTarget.value),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
|
||||
<ListItem title="自动拉取可用模型" subTitle="尝试拉取所有可用模型">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.config.autoFetchModels}
|
||||
onChange={(e) =>
|
||||
props.updateConfig(
|
||||
(config) => (config.autoFetchModels = e.currentTarget.checked),
|
||||
)
|
||||
}
|
||||
></input>
|
||||
</ListItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
14
app/components/config/types.ts
Normal file
14
app/components/config/types.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { LLMModel } from "@/app/client";
|
||||
import { Updater } from "@/app/typing";
|
||||
|
||||
export type ModelConfigProps<T> = {
|
||||
models: LLMModel[];
|
||||
config: T;
|
||||
updateConfig: Updater<T>;
|
||||
};
|
||||
|
||||
export type ProviderConfigProps<T> = {
|
||||
readonly?: boolean;
|
||||
config: T;
|
||||
updateConfig: Updater<T>;
|
||||
};
|
||||
Reference in New Issue
Block a user