From 296b48bb968a1286a623dbb0f38665f7ee5d340e Mon Sep 17 00:00:00 2001 From: Ryan Holinshead <> Date: Tue, 2 Jan 2024 13:19:30 -0500 Subject: [PATCH 1/2] [editor] Connect Server & Client for Updating Model Name / Settings # [editor] Connect Server & Client for Updating Model Name / Settings Add the calls to the server endpoint for `update_model` to set the model name and settings https://github.com/lastmile-ai/aiconfig/assets/5060851/6e6f6cb4-5968-4050-8e97-9316d553c2a8 --- .../src/aiconfig/editor/client/src/Editor.tsx | 17 ++++-- .../client/src/components/EditorContainer.tsx | 59 +++++++++++++------ 2 files changed, 51 insertions(+), 25 deletions(-) diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx index a87bb6099..7aee33c63 100644 --- a/python/src/aiconfig/editor/client/src/Editor.tsx +++ b/python/src/aiconfig/editor/client/src/Editor.tsx @@ -2,7 +2,7 @@ import EditorContainer, { AIConfigCallbacks, } from "./components/EditorContainer"; import { Flex, Loader, MantineProvider } from "@mantine/core"; -import { AIConfig, ModelMetadata, Prompt } from "aiconfig"; +import { AIConfig, InferenceSettings, Prompt } from "aiconfig"; import { useCallback, useEffect, useMemo, useState } from "react"; import { ufetch } from "ufetch"; import { ROUTE_TABLE } from "./utils/api"; @@ -73,11 +73,16 @@ export default function Editor() { ); const updateModel = useCallback( - async (_promptName?: string, _modelData?: string | ModelMetadata) => { - // return await ufetch.post(ROUTE_TABLE.UPDATE_MODEL, - // prompt_name: promptName, - // model_data: modelData, - // }); + async (value: { + modelName?: string; + settings?: InferenceSettings; + promptName?: string; + }) => { + return await ufetch.post(ROUTE_TABLE.UPDATE_MODEL, { + model_name: value.modelName, + settings: value.settings, + prompt_name: value.promptName, + }); }, [] ); diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx index 9d2005590..34980cb8d 100644 --- a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx +++ b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx @@ -3,8 +3,8 @@ import { Container, Button, createStyles, Stack, Flex } from "@mantine/core"; import { showNotification } from "@mantine/notifications"; import { AIConfig, + InferenceSettings, JSONObject, - ModelMetadata, Prompt, PromptInput, } from "aiconfig"; @@ -27,6 +27,7 @@ import GlobalParametersContainer from "./GlobalParametersContainer"; import AIConfigContext from "./AIConfigContext"; import ConfigNameDescription from "./ConfigNameDescription"; import { DEBOUNCE_MS } from "../utils/constants"; +import { getPromptModelName } from "../utils/promptUtils"; type Props = { aiconfig: AIConfig; @@ -45,10 +46,11 @@ export type AIConfigCallbacks = { save: (aiconfig: AIConfig) => Promise; setConfigDescription: (description: string) => Promise; setConfigName: (name: string) => Promise; - updateModel: ( - promptName?: string, - modelData?: string | ModelMetadata - ) => Promise; + updateModel: (value: { + modelName?: string; + settings?: InferenceSettings; + promptName?: string; + }) => Promise<{ aiconfig: AIConfig }>; updatePrompt: ( promptName: string, promptData: Prompt @@ -184,8 +186,11 @@ export default function EditorContainer({ const debouncedUpdateModel = useMemo( () => debounce( - (promptName?: string, modelMetadata?: string | ModelMetadata) => - updateModelCallback(promptName, modelMetadata), + (value: { + modelName?: string; + settings?: InferenceSettings; + promptName?: string; + }) => updateModelCallback(value), DEBOUNCE_MS ), [updateModelCallback] @@ -198,9 +203,31 @@ export default function EditorContainer({ id: promptId, modelSettings: newModelSettings, }); - // TODO: Call server-side endpoint to update model + + try { + const statePrompt = getPrompt(stateRef.current, promptId); + if (!statePrompt) { + throw new Error(`Could not find prompt with id ${promptId}`); + } + const modelName = getPromptModelName(statePrompt); + if (!modelName) { + throw new Error(`Could not find model name for prompt ${promptId}`); + } + await debouncedUpdateModel({ + modelName, + settings: newModelSettings as InferenceSettings, + promptName: statePrompt.name, + }); + } catch (err: unknown) { + const message = err instanceof Error ? err.message : null; + showNotification({ + title: "Error updating prompt model settings", + message, + color: "red", + }); + } }, - [dispatch] + [debouncedUpdateModel, dispatch] ); const onUpdatePromptModel = useCallback( @@ -216,17 +243,11 @@ export default function EditorContainer({ if (!statePrompt) { throw new Error(`Could not find prompt with id ${promptId}`); } - const prompt = clientPromptToAIConfigPrompt(statePrompt); - const currentModel = prompt.metadata?.model; - let modelData: string | ModelMetadata | undefined = newModel; - if (newModel && currentModel && typeof currentModel !== "string") { - modelData = { - ...currentModel, - name: newModel, - }; - } - await debouncedUpdateModel(prompt.name, modelData); + await debouncedUpdateModel({ + modelName: newModel, + promptName: statePrompt.name, + }); // TODO: Consolidate } catch (err: unknown) { From 46a1babe9c51c916cc740f9c57daae8dd4f8c59a Mon Sep 17 00:00:00 2001 From: Ryan Holinshead <> Date: Tue, 2 Jan 2024 13:24:46 -0500 Subject: [PATCH 2/2] [editor] Error Notification for Name/Description Exception --- .../client/src/components/EditorContainer.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx index 34980cb8d..f844d727b 100644 --- a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx +++ b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx @@ -409,7 +409,16 @@ export default function EditorContainer({ type: "SET_NAME", name, }); - await debouncedSetName(name); + try { + await debouncedSetName(name); + } catch (err: unknown) { + const message = err instanceof Error ? err.message : null; + showNotification({ + title: "Error setting config name", + message, + color: "red", + }); + } }, [debouncedSetName] ); @@ -430,7 +439,17 @@ export default function EditorContainer({ type: "SET_DESCRIPTION", description, }); - await debouncedSetDescription(description); + + try { + await debouncedSetDescription(description); + } catch (err: unknown) { + const message = err instanceof Error ? err.message : null; + showNotification({ + title: "Error setting config description", + message, + color: "red", + }); + } }, [debouncedSetDescription] );