Merge pull request #337 from grafana/grafana-frontend-add-model-abstraction

llm-frontend: add model abstraction

Author: yoziru

package.json

@@ -2,12 +2,13 @@
   "scripts": {
     "build": "npm run build --workspaces",
     "build:all": "npm run build --workspaces && npm run backend:build --workspace=@grafana/llm-app",
-    "dev": "npm run backend:build && npm run build -w @grafana/llm && concurrently --names 'llm-frontend,llm-app' 'npm run dev -w @grafana/llm' 'npm run dev -w @grafana/llm-app' -c 'bgBlue.bold,bgMagenta.bold'",
+    "dev": "npm run frontend:build && npm run backend:build && npm run build -w @grafana/llm && concurrently --names 'llm-frontend,llm-app' 'npm run dev -w @grafana/llm' 'npm run dev -w @grafana/llm-app' -c 'bgBlue.bold,bgMagenta.bold'",
     "e2e:ci": "npm run e2e:ci --workspace=@grafana/llm-app",
     "backend:update-sdk": "npm run backend:update-sdk --workspace=@grafana/llm-app",
     "backend:build": "npm run backend:build --workspace=@grafana/llm-app",
     "backend:test": "npm run backend:test --workspace=@grafana/llm-app",
     "backend:restart": "npm run backend:restart --workspace=@grafana/llm-app",
+    "frontend:build": "npm run build --workspace=@grafana/llm",
     "lint": "npm run lint --workspaces",
     "lint:fix": "npm run lint:fix --workspaces",
     "server": "npm run server --workspace=@grafana/llm-app",

packages/grafana-llm-app/src/components/AppConfig/DevSandbox.tsx

@@ -37,7 +37,7 @@ const BasicChatTest = () => {
     if (!useStream) {
       // Make a single request to the LLM.
       const response = await openai.chatCompletions({
-        model: 'base',
+        model: openai.Model.BASE,
         messages: [
           { role: 'system', content: 'You are a cynical assistant.' },
           { role: 'user', content: message },
@@ -50,7 +50,7 @@ const BasicChatTest = () => {
     } else {
       // Stream the completions. Each element is the next stream chunk.
       const stream = openai.streamChatCompletions({
-        model: 'base',
+        model: openai.Model.BASE,
         messages: [
           { role: 'system', content: 'You are a cynical assistant.' },
           { role: 'user', content: message },
@@ -92,8 +92,8 @@ const BasicChatTest = () => {
             placeholder="Enter a message"
           />
           <br />
-          <Button type="submit" onClick={() => {setMessage(input); setUseStream(true);}}>Submit Stream</Button>
-          <Button type="submit" onClick={() => {setMessage(input); setUseStream(false);}}>Submit Request</Button>
+          <Button type="submit" onClick={() => { setMessage(input); setUseStream(true); }}>Submit Stream</Button>
+          <Button type="submit" onClick={() => { setMessage(input); setUseStream(false); }}>Submit Request</Button>
           <br />
           <div>{loading ? <Spinner /> : reply}</div>
           <div>{started ? "Response is started" : "Response is not started"}</div>

packages/grafana-llm-frontend/README.md

@@ -40,7 +40,7 @@ const MyComponent = (): JSX.Element => {
     // Stream the completions. Each element is the next stream chunk.
     const stream = llms.openai
       .streamChatCompletions({
-        model: 'gpt-3.5-turbo',
+        model: llms.openai.Model.BASE,
         messages: [
           { role: 'system', content: 'You are a cynical assistant.' },
           { role: 'user', content: message },

packages/grafana-llm-frontend/src/openai.ts

@@ -72,13 +72,25 @@ export interface Function {
   parameters: Object;
 }
 
+/**
+ * Enum representing abstracted models used by the backend app.
+ * @enum {string}
+ */
+export enum Model {
+  BASE = 'base',
+  LARGE = 'large',
+}
+
+/**
+ * @deprecated Use {@link Model} instead.
+ */
+type DeprecatedString = string;
+
 export interface ChatCompletionsRequest {
   /**
-   * ID of the model to use.
-   *
-   * See the model endpoint compatibility table for details on which models work with the Chat Completions API.
+   * Model abstraction to use. These abstractions are then translated back into specific models based on the users settings.
    */
-  model: string;
+  model: Model | DeprecatedString;
   /** A list of messages comprising the conversation so far. */
   messages: Message[];
   /** A list of functions the model may generate JSON inputs for. */
@@ -255,7 +267,7 @@ export function isErrorResponse<T>(
  * @returns An observable that emits the content messages. Each emission will be a string containing the
  *         token emitted by the model.
  * @example <caption>Example of reading all tokens in a stream.</caption>
- * const stream = streamChatCompletions({ model: 'gpt-3.5-turbo', messages: [
+ * const stream = streamChatCompletions({ model: Model.BASE, messages: [
  *   { role: 'system', content: 'You are a great bot.' },
  *   { role: 'user', content: 'Hello, bot.' },
  * ]}).pipe(extractContent());
@@ -282,7 +294,7 @@ export function extractContent(): UnaryFunction<
  * @returns An observable that emits the accumulated content messages. Each emission will be a string containing the
  *         content of all messages received so far.
  * @example
- * const stream = streamChatCompletions({ model: 'gpt-3.5-turbo', messages: [
+ * const stream = streamChatCompletions({ model: Model.BASE, messages: [
  *   { role: 'system', content: 'You are a great bot.' },
  *   { role: 'user', content: 'Hello, bot.' },
  * ]}).pipe(accumulateContent());
@@ -324,7 +336,7 @@ export async function chatCompletions(request: ChatCompletionsRequest): Promise<
  * The 'done' message will not be emitted; the stream will simply end when this message is encountered.
  *
  * @example <caption>Example of reading all tokens in a stream.</caption>
- * const stream = streamChatCompletions({ model: 'gpt-3.5-turbo', messages: [
+ * const stream = streamChatCompletions({ model: Model.BASE, messages: [
  *   { role: 'system', content: 'You are a great bot.' },
  *   { role: 'user', content: 'Hello, bot.' },
  * ]}).pipe(extractContent());
@@ -333,7 +345,7 @@ export async function chatCompletions(request: ChatCompletionsRequest): Promise<
  * // ['Hello', '? ', 'How ', 'are ', 'you', '?']
  *
  * @example <caption>Example of accumulating tokens in a stream.</caption>
- * const stream = streamChatCompletions({ model: 'gpt-3.5-turbo', messages: [
+ * const stream = streamChatCompletions({ model: Model.BASE, messages: [
  *   { role: 'system', content: 'You are a great bot.' },
  *   { role: 'user', content: 'Hello, bot.' },
  * ]}).pipe(accumulateContent());
@@ -487,7 +499,7 @@ export type OpenAIStreamState = {
  * @property {Subscription|undefined} value.stream - The stream subscription object if the stream is active, or undefined if not.
  */
 export function useOpenAIStream(
-  model = 'gpt-4',
+  model = Model.LARGE,
   temperature = 1,
   notifyError: (title: string, text?: string, traceId?: string) => void = () => {}
 ): OpenAIStreamState {