feat(website): update prompt settings based on selected model

aws-samples · Oct 13, 2023 · 8e82eaa · 8e82eaa
1 parent 7eb3da7
commit 8e82eaa
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 12 deletions.
diff --git a/demo/website/src/components/chat/dev-settings/ChatConfigForm/components/PromptEditor.tsx b/demo/website/src/components/chat/dev-settings/ChatConfigForm/components/PromptEditor.tsx
@@ -38,6 +38,7 @@ export interface PromptEditorProps<
 > {
   readonly value?: string | T;
   readonly promptCls: PTC;
+  readonly promptClsOptions?: any;
   readonly onChange: (value?: string | T) => void;
   readonly defaultInputValues: Partial<IV>;
 }
@@ -70,7 +71,7 @@ export const PromptEditor: FC<PromptEditorProps> = (props) => {
 
   // generate a flattened version of the default template
   useEffect(() => {
-    const prompt = new props.promptCls({});
+    const prompt = new props.promptCls(props.promptClsOptions || {});
 
     defaultTemplateRef.current = prompt.flatten();
     setValue((current) => {
@@ -93,7 +94,7 @@ export const PromptEditor: FC<PromptEditorProps> = (props) => {
     } else {
       setPartials(undefined);
     }
-  }, [props.promptCls]);
+  }, [props.promptCls, props.promptClsOptions]);
 
   // Update editor auto completion based on template partials
   useEffect(() => {
@@ -170,7 +171,7 @@ export const PromptEditor: FC<PromptEditorProps> = (props) => {
                 setInputValues(JSON.parse(detail.value));
               } catch {}
             }}
-            language="javascript"
+            language="json"
             editorContentHeight={250}
           />
         ) : (

diff --git a/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/HistorySettings.tsx b/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/HistorySettings.tsx
@@ -15,7 +15,7 @@ export const HistorySettings: FC = () => {
     <SpaceBetween direction="vertical" size="s">
       <FormField label="Memory Kwargs">
         <CodeEditor
-          language="javascript"
+          language="json"
           value={toCodeEditorJson(memoryKwargs)}
           onChange={({ detail }) => {
             try {

diff --git a/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/InferenceSettings.tsx b/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/InferenceSettings.tsx
@@ -4,6 +4,7 @@ import {
   ModelFramework,
   ISageMakerEndpointModelFramework,
 } from "@aws/galileo-sdk/lib/models/types";
+import { Icon } from "@cloudscape-design/components";
 import FormField from "@cloudscape-design/components/form-field";
 import SpaceBetween from "@cloudscape-design/components/space-between";
 import { isEmpty } from "lodash";
@@ -78,7 +79,16 @@ export const InferenceSettings: FC = () => {
 
   return (
     <SpaceBetween direction="vertical" size="s">
-      <FormField label="LLM model" stretch>
+      <FormField
+        label="LLM model"
+        stretch
+        constraintText={
+          <>
+            <Icon name="status-warning" size="small" /> Settings will be
+            overridden to selected model defaults (Kwargs / Prompts)
+          </>
+        }
+      >
         <ModelSelector
           custom
           value={isCustomLlmModel ? CUSTOM_VALUE : llmModel?.uuid}
@@ -90,11 +100,12 @@ export const InferenceSettings: FC = () => {
       )}
       <FormField label="Model Kwargs" stretch>
         <CodeEditor
-          language="javascript"
+          language="json"
           value={toCodeEditorJson(llmModelKwargs)}
           onChange={({ detail }) => {
             try {
-              setLlmModelKwargs(JSON.parse(detail.value));
+              detail.value.length &&
+                setLlmModelKwargs(JSON.parse(detail.value));
             } catch (error) {
               console.warn(
                 "Failed to parse `LLM Model Kwargs`",
@@ -107,11 +118,12 @@ export const InferenceSettings: FC = () => {
       </FormField>
       <FormField label="Model Endpoint Kwargs" stretch>
         <CodeEditor
-          language="javascript"
+          language="json"
           value={toCodeEditorJson(llmEndpointKwargs)}
           onChange={({ detail }) => {
             try {
-              setLlmEndpointKwargs(JSON.parse(detail.value));
+              detail.value.length &&
+                setLlmEndpointKwargs(JSON.parse(detail.value));
             } catch (error) {
               console.warn(
                 "Failed to parse `LLM Endpoint Kwargs`",

diff --git a/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/PromptSettings.tsx b/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/PromptSettings.tsx
@@ -9,14 +9,19 @@ import { Icon, Link, TextContent } from "@cloudscape-design/components";
 import FormField from "@cloudscape-design/components/form-field";
 import SpaceBetween from "@cloudscape-design/components/space-between";
 import { FC } from "react";
-import { useChatEngineConfigState } from "../../../../../providers/ChatEngineConfig";
+import {
+  useChatEngineConfigModelAdapter,
+  useChatEngineConfigState,
+} from "../../../../../providers/ChatEngineConfig";
 import PromptEditor from "../components/PromptEditor";
 
 export const PromptSettings: FC = () => {
   const [qaPrompt, setQaPrompt] = useChatEngineConfigState("qaPrompt");
   const [condenseQuestionPrompt, setCondenseQuestionPrompt] =
     useChatEngineConfigState("condenseQuestionPrompt");
 
+  const adapter = useChatEngineConfigModelAdapter();
+
   return (
     <SpaceBetween direction="vertical" size="s">
       <TextContent>
@@ -62,6 +67,7 @@ export const PromptSettings: FC = () => {
       >
         <PromptEditor
           promptCls={ChatQuestionAnswerPromptTemplate}
+          promptClsOptions={adapter?.prompt?.chat?.questionAnswer}
           value={qaPrompt}
           onChange={setQaPrompt}
           defaultInputValues={{
@@ -78,6 +84,7 @@ export const PromptSettings: FC = () => {
       >
         <PromptEditor
           promptCls={ChatCondenseQuestionPromptTemplate}
+          promptClsOptions={adapter?.prompt?.chat?.condenseQuestion}
           value={condenseQuestionPrompt}
           onChange={setCondenseQuestionPrompt}
           defaultInputValues={{

diff --git a/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/SearchSettings.tsx b/demo/website/src/components/chat/dev-settings/ChatConfigForm/sections/SearchSettings.tsx
@@ -27,7 +27,7 @@ export const SearchSettings: FC = () => {
     <SpaceBetween direction="vertical" size="s">
       <FormField label="Search Kwargs" stretch>
         <CodeEditor
-          language="javascript"
+          language="json"
           value={toCodeEditorJson(searchKwargs)}
           onChange={({ detail }) => {
             try {

diff --git a/demo/website/src/providers/ChatEngineConfig.tsx b/demo/website/src/providers/ChatEngineConfig.tsx
@@ -1,21 +1,26 @@
 /*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
 PDX-License-Identifier: Apache-2.0 */
+import { ModelAdapter } from "@aws/galileo-sdk/lib/models/adapter";
+import { resolveModelAdapter } from "@aws/galileo-sdk/lib/models/llms/utils";
+import { IModelInfo } from "@aws/galileo-sdk/lib/models/types";
 import {
   ChatEngineConfig,
   ChatEngineConfigSearchType,
 } from "api-typescript-react-query-hooks";
-import { isEmpty } from "lodash";
+import { isEmpty, merge } from "lodash";
 import React, {
   PropsWithChildren,
   createContext,
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
 } from "react";
 import { useLocation } from "react-router-dom";
 import { useImmer, Updater, DraftFunction } from "use-immer";
 import { useIsAdmin } from "../Auth";
+import { useFoundationModelInventory } from "../hooks/llm-inventory";
 
 export type { ChatEngineConfig, ChatEngineConfigSearchType };
 
@@ -65,6 +70,36 @@ export const useChatEngineConfigState = <P extends keyof ChatEngineConfig>(
   return [config[prop], setter];
 };
 
+export const useChatEngineConfigModelInfo = (
+  noDefault: boolean = false
+): Partial<IModelInfo> | undefined => {
+  const llmModel: IModelInfo | undefined =
+    useChatEngineConfigState("llmModel")[0];
+  const inventory = useFoundationModelInventory();
+
+  return useMemo(() => {
+    if (inventory) {
+      const uuid =
+        llmModel?.uuid || (noDefault ? undefined : inventory.defaultModelId);
+      const inventoryInfo = uuid ? inventory.models[uuid] : {};
+      return merge({}, inventoryInfo, llmModel || {});
+    }
+    return undefined;
+  }, [inventory, llmModel?.uuid, noDefault]);
+};
+
+export const useChatEngineConfigModelAdapter = (
+  noDefault: boolean = false
+): ModelAdapter | undefined => {
+  const modelInfo = useChatEngineConfigModelInfo(noDefault);
+
+  return useMemo(() => {
+    return modelInfo
+      ? resolveModelAdapter(modelInfo as any)
+      : new ModelAdapter();
+  }, [modelInfo]);
+};
+
 /**
  * Sets up the ChatEngineConfig context used to config chat engine config for admins.
  * This provider MUST wrap the <App /> which manages the splitpanel where dev settings are rendered.