From 3c082e753b412ebcc1dbb1ae5b5b8c5f255674f2 Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Sun, 11 Aug 2024 02:32:54 -0400 Subject: [PATCH] Add new models --- src/shared/api.ts | 166 ++++++++++++++++++--- webview-ui/scripts/build-react-no-split.js | 7 +- webview-ui/src/index.css | 8 + 3 files changed, 159 insertions(+), 22 deletions(-) diff --git a/src/shared/api.ts b/src/shared/api.ts index e95d168..abf5420 100644 --- a/src/shared/api.ts +++ b/src/shared/api.ts @@ -25,9 +25,9 @@ export interface ModelInfo { export type ApiModelId = AnthropicModelId | OpenRouterModelId | BedrockModelId // Anthropic +// https://docs.anthropic.com/en/docs/about-claude/models export type AnthropicModelId = keyof typeof anthropicModels export const anthropicDefaultModelId: AnthropicModelId = "claude-3-5-sonnet-20240620" -// https://docs.anthropic.com/en/docs/about-claude/models export const anthropicModels = { "claude-3-5-sonnet-20240620": { maxTokens: 8192, @@ -44,30 +44,19 @@ export const anthropicModels = { "claude-3-sonnet-20240229": { maxTokens: 4096, supportsImages: true, - inputPrice: 2.5, - outputPrice: 12.5, + inputPrice: 3.0, + outputPrice: 15.0, }, "claude-3-haiku-20240307": { maxTokens: 4096, supportsImages: true, - inputPrice: 2.5, - outputPrice: 12.5, + inputPrice: 0.25, + outputPrice: 1.25, }, -} as const satisfies Record - -// OpenRouter -export type OpenRouterModelId = keyof typeof openRouterModels -export const openRouterDefaultModelId: OpenRouterModelId = "anthropic/claude-3.5-sonnet:beta" -export const openRouterModels = { - "anthropic/claude-3.5-sonnet:beta": { - maxTokens: 4096, - supportsImages: true, - inputPrice: 3.0, - outputPrice: 15.0, - }, -} as const satisfies Record +} as const satisfies Record // as const assertion makes the object deeply readonly // AWS Bedrock +// https://docs.aws.amazon.com/bedrock/latest/userguide/conversation-inference.html export type BedrockModelId = keyof typeof bedrockModels export const bedrockDefaultModelId: BedrockModelId = "anthropic.claude-3-5-sonnet-20240620-v1:0" export const bedrockModels = { @@ -77,4 +66,143 @@ export const bedrockModels = { inputPrice: 3.0, outputPrice: 15.0, }, -} as const satisfies Record // as const assertion makes the object deeply readonly (just declaring it as const makes it mutable) + "anthropic.claude-3-opus-20240229-v1:0": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 15.0, + outputPrice: 75.0, + }, + "anthropic.claude-3-sonnet-20240229-v1:0": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 3.0, + outputPrice: 15.0, + }, + "anthropic.claude-3-haiku-20240307-v1:0": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 0.25, + outputPrice: 1.25, + }, +} as const satisfies Record + +// OpenRouter +// https://openrouter.ai/models?order=newest&supported_parameters=tools +export type OpenRouterModelId = keyof typeof openRouterModels +export const openRouterDefaultModelId: OpenRouterModelId = "anthropic/claude-3.5-sonnet" +export const openRouterModels = { + "anthropic/claude-3.5-sonnet": { + maxTokens: 8192, + supportsImages: true, + inputPrice: 3.0, + outputPrice: 15.0, + }, + "anthropic/claude-3-opus": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 15, + outputPrice: 75, + }, + "anthropic/claude-3-sonnet": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 3, + outputPrice: 15, + }, + "anthropic/claude-3-haiku": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 0.25, + outputPrice: 1.25, + }, + "openai/gpt-4o-2024-08-06": { + maxTokens: 16384, + supportsImages: true, + inputPrice: 2.5, + outputPrice: 10, + }, + "openai/gpt-4o-mini-2024-07-18": { + maxTokens: 16384, + supportsImages: true, + inputPrice: 0.15, + outputPrice: 0.6, + }, + "openai/gpt-4-turbo": { + maxTokens: 4096, + supportsImages: true, + inputPrice: 10, + outputPrice: 30, + }, + "meta-llama/llama-3.1-405b-instruct": { + maxTokens: 2048, + supportsImages: false, + inputPrice: 2.7, + outputPrice: 2.7, + }, + "meta-llama/llama-3.1-70b-instruct": { + maxTokens: 2048, + supportsImages: false, + inputPrice: 0.52, + outputPrice: 0.75, + }, + "meta-llama/llama-3.1-8b-instruct": { + maxTokens: 2048, + supportsImages: false, + inputPrice: 0.06, + outputPrice: 0.06, + }, + "google/gemini-pro-1.5": { + maxTokens: 8192, + supportsImages: true, + inputPrice: 2.5, + outputPrice: 7.5, + }, + "google/gemini-flash-1.5": { + maxTokens: 8192, + supportsImages: true, + inputPrice: 0.25, + outputPrice: 0.75, + }, + "deepseek/deepseek-coder": { + maxTokens: 4096, + supportsImages: false, + inputPrice: 0.14, + outputPrice: 0.28, + }, + "mistralai/mistral-large": { + maxTokens: 8192, + supportsImages: false, + inputPrice: 3, + outputPrice: 9, + }, + "mistralai/mistral-medium": { + maxTokens: 4096, + supportsImages: false, + inputPrice: 2.7, + outputPrice: 8.1, + }, + "mistralai/mistral-small": { + maxTokens: 4096, + supportsImages: false, + inputPrice: 2, + outputPrice: 6, + }, + "mistralai/mistral-7b-instruct-v0.1": { + maxTokens: 4096, + supportsImages: false, + inputPrice: 0.06, + outputPrice: 0.06, + }, + "cohere/command-r-plus": { + maxTokens: 4000, + supportsImages: false, + inputPrice: 3, + outputPrice: 15, + }, + "cohere/command-r": { + maxTokens: 4000, + supportsImages: false, + inputPrice: 0.5, + outputPrice: 1.5, + }, +} as const satisfies Record diff --git a/webview-ui/scripts/build-react-no-split.js b/webview-ui/scripts/build-react-no-split.js index a7a5557..8fe1faf 100644 --- a/webview-ui/scripts/build-react-no-split.js +++ b/webview-ui/scripts/build-react-no-split.js @@ -72,8 +72,8 @@ By modifying these rules, we can change how webpack processes different files in Why we need to modify the webpack config -Create React App (CRA) is designed to only process files within the src directory for security reasons. Our project structure includes a shared directory outside of src. -To use files from this shared directory, we need to: +Create React App (CRA) is designed to only process files within the src directory for security reasons. (CRA limits processing to the src directory to prevent accidental inclusion of sensitive files, reduce the attack surface, and ensure predictable builds, enhancing overall project security and consistency. Therefore it's essential that if you do include files outside src, you do so explicitly.) +To use files from the shared directory, we need to: 1. Modify ModuleScopePlugin to allow imports from the shared directory. 2. Update the TypeScript loader rule to process TypeScript files from the shared directory. These changes tell webpack it's okay to import from the shared directory and ensure that TypeScript files in this directory are properly converted to JavaScript. @@ -89,7 +89,8 @@ Note: This code assumes a specific structure in the CRA webpack config. If CRA u */ config.module.rules[1].oneOf.forEach((rule) => { if (rule.test && rule.test.toString().includes("ts|tsx")) { - rule.include = [...(rule.include || []), sharedDir] + // rule.include is path to src by default, but we can update rule.include to be an array as it matches an expected schema by react-scripts + rule.include = [rule.include, sharedDir].filter(Boolean) } }) diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 375d5f4..73572e5 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -129,3 +129,11 @@ https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#wi line-height: normal; margin-bottom: 2px; } + +/* Fix scrollbar in dropdown */ + +vscode-dropdown::part(listbox) { + border-color: var(--vscode-scrollbarSlider-background); + transition: none; + scrollbar-color: var(--vscode-scrollbarSlider-background) transparent; +}