1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
import styled from "styled-components";
import {
defaultBorderRadius,
secondaryDark,
vscBackground,
vscForeground,
} from ".";
import { useContext, useEffect } from "react";
import { GUIClientContext } from "../App";
import { RootStore } from "../redux/store";
import { useSelector } from "react-redux";
const MODEL_INFO: { title: string; class: string; args: any }[] = [
{
title: "gpt-4",
class: "MaybeProxyOpenAI",
args: {
model: "gpt-4",
api_key: "",
},
},
{
title: "gpt-3.5-turbo",
class: "MaybeProxyOpenAI",
args: {
model: "gpt-3.5-turbo",
api_key: "",
},
},
{
title: "claude-2",
class: "AnthropicLLM",
args: {
model: "claude-2",
api_key: "<ANTHROPIC_API_KEY>",
},
},
{
title: "GGML",
class: "GGML",
args: {},
},
{
title: "Ollama",
class: "Ollama",
args: {
model: "codellama",
},
},
{
title: "Replicate",
class: "ReplicateLLM",
args: {
model:
"replicate/llama-2-70b-chat:58d078176e02c219e11eb4da5a02a7830a283b14cf8f94537af893ccff5ee781",
api_key: "<REPLICATE_API_KEY>",
},
},
{
title: "TogetherAI",
class: "TogetherLLM",
args: {
model: "gpt-4",
api_key: "<TOGETHER_API_KEY>",
},
},
{
title: "llama.cpp",
class: "LlamaCpp",
args: {},
},
];
const Select = styled.select`
border: none;
width: fit-content;
background-color: ${secondaryDark};
color: ${vscForeground};
border-radius: ${defaultBorderRadius};
padding: 6px;
/* box-shadow: 0px 0px 1px 0px ${vscForeground}; */
max-height: 35vh;
overflow: scroll;
cursor: pointer;
margin-right: auto;
&:focus {
outline: none;
}
`;
function ModelSelect(props: {}) {
const client = useContext(GUIClientContext);
const defaultModel = useSelector(
(state: RootStore) =>
(state.serverState.config as any)?.models?.default?.class_name
);
return (
<Select
defaultValue={0}
onChange={(e) => {
const model = MODEL_INFO[parseInt(e.target.value)];
client?.setModelForRole("*", model.class, model.args);
}}
>
{MODEL_INFO.map((model, idx) => {
return (
<option selected={defaultModel === model.class} value={idx}>
{model.title}
</option>
);
})}
</Select>
);
}
export default ModelSelect;
|
