UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #251 from wonderwhy-er/addGetKeyLinks

Browse Source 
feat: refactor/standardise model providers code + add "get provider key"
This commit is contained in:
Chris Mahoney 2024-11-14 15:23:27 -06:00 committed by GitHub
commit 1e6f8ef293
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 258 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/chat/APIKeyManager.tsx
View File

@ -1,13 +1,20 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IconButton } from '~/components/ui/IconButton'; import { IconButton } from '~/components/ui/IconButton';
import type { ProviderInfo } from '~/types/model';
interface APIKeyManagerProps { interface APIKeyManagerProps {
provider: string; provider: ProviderInfo;
apiKey: string; apiKey: string;
setApiKey: (key: string) => void; setApiKey: (key: string) => void;
getApiKeyLink?: string;
labelForGetApiKey?: string;
} }
export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => { export const APIKeyManager: React.FC<APIKeyManagerProps> = ({
provider,
apiKey,
setApiKey,
}) => {
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [tempKey, setTempKey] = useState(apiKey); const [tempKey, setTempKey] = useState(apiKey);
@ -18,7 +25,7 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
return ( return (
<div className="flex items-center gap-2 mt-2 mb-2"> <div className="flex items-center gap-2 mt-2 mb-2">
<span className="text-sm text-bolt-elements-textSecondary">{provider} API Key:</span> <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
{isEditing ? ( {isEditing ? (
<> <>
<input <input
@ -42,6 +49,11 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
<IconButton onClick={() => setIsEditing(true)} title="Edit API Key"> <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
<div className="i-ph:pencil-simple" /> <div className="i-ph:pencil-simple" />
</IconButton> </IconButton>
{provider?.getApiKeyLink && <IconButton onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
<span className="mr-2">{provider?.labelForGetApiKey || 'Get API Key'}</span>
<div className={provider?.icon || "i-ph:key"} />
</IconButton>}
</> </>
)} )}
</div> </div>

53
app/components/chat/BaseChat.tsx
View File

@ -7,7 +7,7 @@ import { Menu } from '~/components/sidebar/Menu.client';
import { IconButton } from '~/components/ui/IconButton'; import { IconButton } from '~/components/ui/IconButton';
import { Workbench } from '~/components/workbench/Workbench.client'; import { Workbench } from '~/components/workbench/Workbench.client';
import { classNames } from '~/utils/classNames'; import { classNames } from '~/utils/classNames';
import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants'; import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
import { Messages } from './Messages.client'; import { Messages } from './Messages.client';
import { SendButton } from './SendButton.client'; import { SendButton } from './SendButton.client';
import { useState } from 'react'; import { useState } from 'react';
@ -15,6 +15,7 @@ import { APIKeyManager } from './APIKeyManager';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import styles from './BaseChat.module.scss'; import styles from './BaseChat.module.scss';
import type { ProviderInfo } from '~/utils/types';
const EXAMPLE_PROMPTS = [ const EXAMPLE_PROMPTS = [
{ text: 'Build a todo app in React using Tailwind' }, { text: 'Build a todo app in React using Tailwind' },
@ -24,42 +25,35 @@ const EXAMPLE_PROMPTS = [
{ text: 'How do I center a div?' }, { text: 'How do I center a div?' },
]; ];
const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]; const providerList = PROVIDER_LIST;
const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => { const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
return ( return (
<div className="mb-2 flex gap-2"> <div className="mb-2 flex gap-2">
<select <select
value={provider} value={provider?.name}
onChange={(e) => { onChange={(e) => {
setProvider(e.target.value); setProvider(providerList.find(p => p.name === e.target.value));
const firstModel = [...modelList].find((m) => m.provider == e.target.value); const firstModel = [...modelList].find((m) => m.provider == e.target.value);
setModel(firstModel ? firstModel.name : ''); setModel(firstModel ? firstModel.name : '');
}} }}
className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all" className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
> >
{providerList.map((provider) => ( {providerList.map((provider) => (
<option key={provider} value={provider}> <option key={provider.name} value={provider.name}>
{provider} {provider.name}
</option> </option>
))} ))}
<option key="Ollama" value="Ollama">
Ollama
</option>
<option key="OpenAILike" value="OpenAILike">
OpenAILike
</option>
<option key="LMStudio" value="LMStudio">
LMStudio
</option>
</select> </select>
<select <select
key={provider?.name}
value={model} value={model}
onChange={(e) => setModel(e.target.value)} onChange={(e) => setModel(e.target.value)}
style={{maxWidth: "70%"}}
className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all" className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
> >
{[...modelList] {[...modelList]
.filter((e) => e.provider == provider && e.name) .filter((e) => e.provider == provider?.name && e.name)
.map((modelOption) => ( .map((modelOption) => (
<option key={modelOption.name} value={modelOption.name}> <option key={modelOption.name} value={modelOption.name}>
{modelOption.label} {modelOption.label}
@ -85,8 +79,8 @@ interface BaseChatProps {
input?: string; input?: string;
model?: string; model?: string;
setModel?: (model: string) => void; setModel?: (model: string) => void;
provider?: string; provider?: ProviderInfo;
setProvider?: (provider: string) => void; setProvider?: (provider: ProviderInfo) => void;
handleStop?: () => void; handleStop?: () => void;
sendMessage?: (event: React.UIEvent, messageInput?: string) => void; sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@ -117,8 +111,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}, },
ref, ref,
) => { ) => {
console.log(provider);
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
const [apiKeys, setApiKeys] = useState<Record<string, string>>({}); const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
const [modelList, setModelList] = useState(MODEL_LIST);
useEffect(() => { useEffect(() => {
// Load API keys from cookies on component mount // Load API keys from cookies on component mount
@ -135,6 +132,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
// Clear invalid cookie data // Clear invalid cookie data
Cookies.remove('apiKeys'); Cookies.remove('apiKeys');
} }
initializeModelList().then(modelList => {
setModelList(modelList);
});
}, []); }, []);
const updateApiKey = (provider: string, key: string) => { const updateApiKey = (provider: string, key: string) => {
@ -198,18 +199,20 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
})} })}
> >
<ModelSelector <ModelSelector
key={provider?.name + ':' + modelList.length}
model={model} model={model}
setModel={setModel} setModel={setModel}
modelList={MODEL_LIST} modelList={modelList}
provider={provider} provider={provider}
setProvider={setProvider} setProvider={setProvider}
providerList={providerList} providerList={PROVIDER_LIST}
/>
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider] || ''}
setApiKey={(key) => updateApiKey(provider, key)}
/> />
{provider &&
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider.name] || ''}
setApiKey={(key) => updateApiKey(provider.name, key)}
/>}
<div <div
className={classNames( className={classNames(
'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all', 'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',

17
app/components/chat/Chat.client.tsx
View File

@ -11,11 +11,12 @@ import { useChatHistory } from '~/lib/persistence';
import { chatStore } from '~/lib/stores/chat'; import { chatStore } from '~/lib/stores/chat';
import { workbenchStore } from '~/lib/stores/workbench'; import { workbenchStore } from '~/lib/stores/workbench';
import { fileModificationsToHTML } from '~/utils/diff'; import { fileModificationsToHTML } from '~/utils/diff';
import { DEFAULT_MODEL, DEFAULT_PROVIDER } from '~/utils/constants'; import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROVIDER_LIST } from '~/utils/constants';
import { cubicEasingFn } from '~/utils/easings'; import { cubicEasingFn } from '~/utils/easings';
import { createScopedLogger, renderLogger } from '~/utils/logger'; import { createScopedLogger, renderLogger } from '~/utils/logger';
import { BaseChat } from './BaseChat'; import { BaseChat } from './BaseChat';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import type { ProviderInfo } from '~/utils/types';
const toastAnimation = cssTransition({ const toastAnimation = cssTransition({
enter: 'animated fadeInRight', enter: 'animated fadeInRight',
@ -80,7 +81,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
}); });
const [provider, setProvider] = useState(() => { const [provider, setProvider] = useState(() => {
const savedProvider = Cookies.get('selectedProvider'); const savedProvider = Cookies.get('selectedProvider');
return savedProvider || DEFAULT_PROVIDER; return PROVIDER_LIST.find(p => p.name === savedProvider) || DEFAULT_PROVIDER;
}); });
const { showChat } = useStore(chatStore); const { showChat } = useStore(chatStore);
@ -96,7 +97,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
}, },
onError: (error) => { onError: (error) => {
logger.error('Request failed\n\n', error); logger.error('Request failed\n\n', error);
toast.error('There was an error processing your request'); toast.error('There was an error processing your request: ' + (error.message ? error.message : "No details were returned"));
}, },
onFinish: () => { onFinish: () => {
logger.debug('Finished streaming'); logger.debug('Finished streaming');
@ -195,7 +196,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
* manually reset the input and we'd have to manually pass in file attachments. However, those * manually reset the input and we'd have to manually pass in file attachments. However, those
* aren't relevant here. * aren't relevant here.
*/ */
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${diff}\n\n${_input}` }); append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
/** /**
* After sending a new message we reset all modifications since the model * After sending a new message we reset all modifications since the model
@ -203,7 +204,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
*/ */
workbenchStore.resetAllFileModifications(); workbenchStore.resetAllFileModifications();
} else { } else {
append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${_input}` }); append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
} }
setInput(''); setInput('');
@ -227,9 +228,9 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
Cookies.set('selectedModel', newModel, { expires: 30 }); Cookies.set('selectedModel', newModel, { expires: 30 });
}; };
const handleProviderChange = (newProvider: string) => { const handleProviderChange = (newProvider: ProviderInfo) => {
setProvider(newProvider); setProvider(newProvider);
Cookies.set('selectedProvider', newProvider, { expires: 30 }); Cookies.set('selectedProvider', newProvider.name, { expires: 30 });
}; };
return ( return (
@ -263,7 +264,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
})} })}
enhancePrompt={() => { enhancePrompt={() => {
enhancePrompt( enhancePrompt(
input, input,
(input) => { (input) => {
setInput(input); setInput(input);
scrollTextArea(); scrollTextArea();

5
app/lib/.server/llm/model.ts
View File

@ -6,7 +6,6 @@ import { createOpenAI } from '@ai-sdk/openai';
import { createGoogleGenerativeAI } from '@ai-sdk/google'; import { createGoogleGenerativeAI } from '@ai-sdk/google';
import { ollama } from 'ollama-ai-provider'; import { ollama } from 'ollama-ai-provider';
import { createOpenRouter } from "@openrouter/ai-sdk-provider"; import { createOpenRouter } from "@openrouter/ai-sdk-provider";
import { mistral } from '@ai-sdk/mistral';
import { createMistral } from '@ai-sdk/mistral'; import { createMistral } from '@ai-sdk/mistral';
export function getAnthropicModel(apiKey: string, model: string) { export function getAnthropicModel(apiKey: string, model: string) {
@ -41,9 +40,9 @@ export function getMistralModel(apiKey: string, model: string) {
} }
export function getGoogleModel(apiKey: string, model: string) { export function getGoogleModel(apiKey: string, model: string) {
const google = createGoogleGenerativeAI( const google = createGoogleGenerativeAI({
apiKey, apiKey,
); });
return google(model); return google(model);
} }

31
app/routes/api.chat.ts
View File

@ -10,12 +10,35 @@ export async function action(args: ActionFunctionArgs) {
return chatAction(args); return chatAction(args);
} }
function parseCookies(cookieHeader) {
const cookies = {};
// Split the cookie string by semicolons and spaces
const items = cookieHeader.split(";").map(cookie => cookie.trim());
items.forEach(item => {
const [name, ...rest] = item.split("=");
if (name && rest) {
// Decode the name and value, and join value parts in case it contains '='
const decodedName = decodeURIComponent(name.trim());
const decodedValue = decodeURIComponent(rest.join("=").trim());
cookies[decodedName] = decodedValue;
}
});
return cookies;
}
async function chatAction({ context, request }: ActionFunctionArgs) { async function chatAction({ context, request }: ActionFunctionArgs) {
const { messages, apiKeys } = await request.json<{ const { messages } = await request.json<{
messages: Messages, messages: Messages
apiKeys: Record<string, string>
}>(); }>();
const cookieHeader = request.headers.get("Cookie");
// Parse the cookie's value (returns an object or null if no cookie exists)
const apiKeys = JSON.parse(parseCookies(cookieHeader).apiKeys || "{}");
const stream = new SwitchableStream(); const stream = new SwitchableStream();
try { try {
@ -56,7 +79,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
}); });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
if (error.message?.includes('API key')) { if (error.message?.includes('API key')) {
throw new Response('Invalid or missing API key', { throw new Response('Invalid or missing API key', {
status: 401, status: 401,

10
app/types/model.ts Normal file
View File

@ -0,0 +1,10 @@
import type { ModelInfo } from '~/utils/types';
export type ProviderInfo = {
staticModels: ModelInfo[],
name: string,
getDynamicModels?: () => Promise<ModelInfo[]>,
getApiKeyLink?: string,
labelForGetApiKey?: string,
icon?:string,
};

215
app/utils/constants.ts
View File

@ -1,4 +1,5 @@
import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types'; import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types';
import type { ProviderInfo } from '~/types/model';
export const WORK_DIR_NAME = 'project'; export const WORK_DIR_NAME = 'project';
export const WORK_DIR = `/home/${WORK_DIR_NAME}`; export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
@ -6,50 +7,120 @@ export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/; export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/; export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest'; export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
export const DEFAULT_PROVIDER = 'Anthropic';
const staticModels: ModelInfo[] = [ const PROVIDER_LIST: ProviderInfo[] = [
{ name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' }, {
{ name: 'anthropic/claude-3.5-sonnet', label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)', provider: 'OpenRouter' }, name: 'Anthropic',
{ name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' }, staticModels: [
{ name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' }, { name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' },
{ name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' }, { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' },
{ name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' }, { name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' },
{ name: 'x-ai/grok-beta', label: "xAI Grok Beta (OpenRouter)", provider: 'OpenRouter' }, { name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' },
{ name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' }, { name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
{ name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' }, { name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' }
{ name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' }, ],
{ name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' }, getApiKeyLink: "https://console.anthropic.com/settings/keys",
{ name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google' }, },
{ name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq' }, {
{ name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq' }, name: 'Ollama',
{ name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq' }, staticModels: [],
{ name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq' }, getDynamicModels: getOllamaModels,
{ name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' }, getApiKeyLink: "https://ollama.com/download",
{ name: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet (new)', provider: 'Anthropic' }, labelForGetApiKey: "Download Ollama",
{ name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet (old)', provider: 'Anthropic' }, icon: "i-ph:cloud-arrow-down",
{ name: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku (new)', provider: 'Anthropic' }, }, {
{ name: 'claude-3-opus-latest', label: 'Claude 3 Opus', provider: 'Anthropic' }, name: 'OpenAILike',
{ name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' }, staticModels: [],
{ name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' }, getDynamicModels: getOpenAILikeModels
{ name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' }, },
{ name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' }, {
{ name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' }, name: 'OpenRouter',
{ name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' }, staticModels: [
{ name: 'grok-beta', label: "xAI Grok Beta", provider: 'xAI' }, { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
{ name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek'}, {
{ name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek'}, name: 'anthropic/claude-3.5-sonnet',
{ name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral' }, label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)',
{ name: 'open-mixtral-8x7b', label: 'Mistral 8x7B', provider: 'Mistral' }, provider: 'OpenRouter'
{ name: 'open-mixtral-8x22b', label: 'Mistral 8x22B', provider: 'Mistral' }, },
{ name: 'open-codestral-mamba', label: 'Codestral Mamba', provider: 'Mistral' }, { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' },
{ name: 'open-mistral-nemo', label: 'Mistral Nemo', provider: 'Mistral' }, { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' },
{ name: 'ministral-8b-latest', label: 'Mistral 8B', provider: 'Mistral' }, { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' },
{ name: 'mistral-small-latest', label: 'Mistral Small', provider: 'Mistral' }, { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' },
{ name: 'codestral-latest', label: 'Codestral', provider: 'Mistral' }, { name: 'x-ai/grok-beta', label: 'xAI Grok Beta (OpenRouter)', provider: 'OpenRouter' },
{ name: 'mistral-large-latest', label: 'Mistral Large Latest', provider: 'Mistral' }, { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' },
{ name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' },
{ name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' }
],
getDynamicModels: getOpenRouterModels,
getApiKeyLink: 'https://openrouter.ai/settings/keys',
}, {
name: 'Google',
staticModels: [
{ name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' },
{ name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google' }
],
getApiKeyLink: 'https://aistudio.google.com/app/apikey'
}, {
name: 'Groq',
staticModels: [
{ name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq' },
{ name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq' },
{ name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq' },
{ name: 'llama-3.2-3b-preview', label: 'Llama 3.2 3b (Groq)', provider: 'Groq' },
{ name: 'llama-3.2-1b-preview', label: 'Llama 3.2 1b (Groq)', provider: 'Groq' }
],
getApiKeyLink: 'https://console.groq.com/keys'
}, {
name: 'OpenAI',
staticModels: [
{ name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
{ name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' },
{ name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' },
{ name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' }
],
getApiKeyLink: "https://platform.openai.com/api-keys",
}, {
name: 'xAI',
staticModels: [
{ name: 'grok-beta', label: 'xAI Grok Beta', provider: 'xAI' }
],
getApiKeyLink: 'https://docs.x.ai/docs/quickstart#creating-an-api-key'
}, {
name: 'Deepseek',
staticModels: [
{ name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek' },
{ name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek' }
],
getApiKeyLink: 'https://platform.deepseek.com/api_keys'
}, {
name: 'Mistral',
staticModels: [
{ name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral' },
{ name: 'open-mixtral-8x7b', label: 'Mistral 8x7B', provider: 'Mistral' },
{ name: 'open-mixtral-8x22b', label: 'Mistral 8x22B', provider: 'Mistral' },
{ name: 'open-codestral-mamba', label: 'Codestral Mamba', provider: 'Mistral' },
{ name: 'open-mistral-nemo', label: 'Mistral Nemo', provider: 'Mistral' },
{ name: 'ministral-8b-latest', label: 'Mistral 8B', provider: 'Mistral' },
{ name: 'mistral-small-latest', label: 'Mistral Small', provider: 'Mistral' },
{ name: 'codestral-latest', label: 'Codestral', provider: 'Mistral' },
{ name: 'mistral-large-latest', label: 'Mistral Large Latest', provider: 'Mistral' }
],
getApiKeyLink: 'https://console.mistral.ai/api-keys/'
}, {
name: 'LMStudio',
staticModels: [],
getDynamicModels: getLMStudioModels,
getApiKeyLink: 'https://lmstudio.ai/',
labelForGetApiKey: 'Get LMStudio',
icon: "i-ph:cloud-arrow-down",
}
]; ];
export const DEFAULT_PROVIDER = PROVIDER_LIST[0];
const staticModels: ModelInfo[] = PROVIDER_LIST.map(p => p.staticModels).flat();
export let MODEL_LIST: ModelInfo[] = [...staticModels]; export let MODEL_LIST: ModelInfo[] = [...staticModels];
const getOllamaBaseUrl = () => { const getOllamaBaseUrl = () => {
@ -64,7 +135,7 @@ const getOllamaBaseUrl = () => {
const isDocker = process.env.RUNNING_IN_DOCKER === 'true'; const isDocker = process.env.RUNNING_IN_DOCKER === 'true';
return isDocker return isDocker
? defaultBaseUrl.replace("localhost", "host.docker.internal") ? defaultBaseUrl.replace('localhost', 'host.docker.internal')
: defaultBaseUrl; : defaultBaseUrl;
}; };
@ -77,7 +148,7 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
return data.models.map((model: OllamaModel) => ({ return data.models.map((model: OllamaModel) => ({
name: model.name, name: model.name,
label: `${model.name} (${model.details.parameter_size})`, label: `${model.name} (${model.details.parameter_size})`,
provider: 'Ollama', provider: 'Ollama'
})); }));
} catch (e) { } catch (e) {
return []; return [];
@ -86,37 +157,64 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
async function getOpenAILikeModels(): Promise<ModelInfo[]> { async function getOpenAILikeModels(): Promise<ModelInfo[]> {
try { try {
const base_url = import.meta.env.OPENAI_LIKE_API_BASE_URL || ""; const base_url = import.meta.env.OPENAI_LIKE_API_BASE_URL || '';
if (!base_url) { if (!base_url) {
return []; return [];
} }
const api_key = import.meta.env.OPENAI_LIKE_API_KEY ?? ""; const api_key = import.meta.env.OPENAI_LIKE_API_KEY ?? '';
const response = await fetch(`${base_url}/models`, { const response = await fetch(`${base_url}/models`, {
headers: { headers: {
Authorization: `Bearer ${api_key}`, Authorization: `Bearer ${api_key}`
} }
}); });
const res = await response.json() as any; const res = await response.json() as any;
return res.data.map((model: any) => ({ return res.data.map((model: any) => ({
name: model.id, name: model.id,
label: model.id, label: model.id,
provider: 'OpenAILike', provider: 'OpenAILike'
})); }));
} catch (e) { } catch (e) {
return [] return [];
} }
}
type OpenRouterModelsResponse = {
data: {
name: string;
id: string;
context_length: number;
pricing: {
prompt: number;
completion: number;
}
}[]
};
async function getOpenRouterModels(): Promise<ModelInfo[]> {
const data: OpenRouterModelsResponse = await (await fetch('https://openrouter.ai/api/v1/models', {
headers: {
'Content-Type': 'application/json'
}
})).json();
return data.data.sort((a, b) => a.name.localeCompare(b.name)).map(m => ({
name: m.id,
label: `${m.name} - in:$${(m.pricing.prompt * 1_000_000).toFixed(
2)} out:$${(m.pricing.completion * 1_000_000).toFixed(2)} - context ${Math.floor(
m.context_length / 1000)}k`,
provider: 'OpenRouter'
}));
} }
async function getLMStudioModels(): Promise<ModelInfo[]> { async function getLMStudioModels(): Promise<ModelInfo[]> {
try { try {
const base_url = import.meta.env.LMSTUDIO_API_BASE_URL || "http://localhost:1234"; const base_url = import.meta.env.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
const response = await fetch(`${base_url}/v1/models`); const response = await fetch(`${base_url}/v1/models`);
const data = await response.json() as any; const data = await response.json() as any;
return data.data.map((model: any) => ({ return data.data.map((model: any) => ({
name: model.id, name: model.id,
label: model.id, label: model.id,
provider: 'LMStudio', provider: 'LMStudio'
})); }));
} catch (e) { } catch (e) {
return []; return [];
@ -124,11 +222,14 @@ async function getLMStudioModels(): Promise<ModelInfo[]> {
} }
async function initializeModelList(): Promise<void> {
const ollamaModels = await getOllamaModels(); async function initializeModelList(): Promise<ModelInfo[]> {
const openAiLikeModels = await getOpenAILikeModels(); MODEL_LIST = [...(await Promise.all(
const lmstudioModels = await getLMStudioModels(); PROVIDER_LIST
MODEL_LIST = [...ollamaModels,...openAiLikeModels, ...staticModels,...lmstudioModels,]; .filter((p): p is ProviderInfo & { getDynamicModels: () => Promise<ModelInfo[]> } => !!p.getDynamicModels)
.map(p => p.getDynamicModels())))
.flat(), ...staticModels];
return MODEL_LIST;
} }
initializeModelList().then();
export { getOllamaModels,getOpenAILikeModels,getLMStudioModels,initializeModelList }; export { getOllamaModels, getOpenAILikeModels, getLMStudioModels, initializeModelList, getOpenRouterModels, PROVIDER_LIST };

9
app/utils/types.ts
View File

@ -26,3 +26,12 @@ export interface ModelInfo {
label: string; label: string;
provider: string; provider: string;
} }
export interface ProviderInfo {
staticModels: ModelInfo[],
name: string,
getDynamicModels?: () => Promise<ModelInfo[]>,
getApiKeyLink?: string,
labelForGetApiKey?: string,
icon?:string,
};