feat: add bedrock api ui

aws-samples · Jan 20, 2025 · e9a253e · e9a253e
1 parent 9e603fe
commit e9a253e
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 63 deletions.
diff --git a/source/portal/src/layout/CommonLayout.tsx b/source/portal/src/layout/CommonLayout.tsx
@@ -21,7 +21,7 @@ import {
   ZH_TEXT,
   USE_CHAT_HISTORY,
   ONLY_RAG_TOOL,
-  SCENARIO,
+  MODEL_TYPE,
   MODEL_OPTION,
   MAX_TOKEN,
   TEMPERATURE,
@@ -36,7 +36,7 @@ const STORAGE_KEYS = [
   USE_CHAT_HISTORY,
   ENABLE_TRACE,
   ONLY_RAG_TOOL,
-  SCENARIO,
+  MODEL_TYPE,
   MODEL_OPTION,
   MAX_TOKEN,
   TEMPERATURE,

diff --git a/source/portal/src/locale/en.json b/source/portal/src/locale/en.json
@@ -82,6 +82,7 @@
     "topKRetrievals": "Top K Retrievals",
     "score": "Relevance Score",
     "scenarioDesc": "Applicable scenario for the current session",
+    "modelTypeDesc": "LLM model type",
     "modelNameDesc": "LLM used in the current session",
     "maxTokenDesc": " Max length of tokens that LLM process in a sequence",
     "maxRoundsDesc": "Max rounds of dialog that saved in memory",
@@ -96,6 +97,7 @@
     "embeddingModel": "Embedding Model Name",
     "noChatbotFound": "No chatbot found",
     "scenario": "Scenario",
+    "modelType": "Model type",
     "maxTokens": "Max Tokens",
     "temperature": "Temperature",
     "sessionHistory": "Recent chats",
@@ -226,7 +228,9 @@
       "tagEmpty": "Tag can not be empty.",
       "indexValid": "Index is used by other model, please change index name",
       "repeatedIndexName": "The index is duplicated with a previous entry, please modify it",
-      "repeatedIndex": "The index name is already in use. Please choose a different name"
+      "repeatedIndex": "The index name is already in use. Please choose a different name",
+      "requireApiEndpoint": "API endpoint is required",
+      "requireApiModelName": "API model name is required"
     },
     "tour": {
       "home": "Deploying this solution using the default parameters will build the environment in Amazon Web Services.",
@@ -286,6 +290,10 @@
       "name": "More Resources",
       "faq": "Frequency Asked Questions",
       "submitIssue": "Submit an Issue"
-    }
+    },
+    "apiEndpoint": "API Endpoint",
+    "apiEndpointDesc": "Enter the Bedrock API endpoint URL",
+    "apiModelName": "API Model Name",
+    "apiModelNameDesc": "Enter the model name for the API"
   }
 }
diff --git a/source/portal/src/locale/zh.json b/source/portal/src/locale/zh.json
@@ -91,6 +91,7 @@
     "topKRetrievals": "召回最关联的K条",
     "score": "相关度分数",
     "scenarioDesc": "当前会话的应用场景",
+    "modelTypeDesc": "LLM 模型类型",
     "modelNameDesc": "当前会话使用的大语言模型",
     "maxTokenDesc": "序列中处理的最大token长度",
     "maxRoundsDesc": "保存在上下文中的记忆最大轮数",
@@ -106,6 +107,7 @@
     "embeddingModelName": "向量化模型",
     "embeddingModelDesc": "用于此机器人的向量化操作",
     "scenario": "场景",
+    "modelType": "模型类型",
     "maxTokens": "最大 Token 数",
     "temperature": "温度",
     "sessionHistory": "历史记录",
@@ -219,7 +221,9 @@
       "indexNameEmpty": "索引名称不能为空",
       "tagEmpty": "标签不能为空",
       "indexValid": "索引已经被其他模型使用，请变更索引名称",
-      "repeatedIndex": "索引名称和现有索引重复，请更换名称"
+      "repeatedIndex": "索引名称和现有索引重复，请更换名称",
+      "requireApiEndpoint": "请输入API端点",
+      "requireApiModelName": "请输入API模型名称"
     },
     "tour": {
       "home": "使用默认参数部署此解决方案将在亚马逊网络服务（Amazon Web Services）中构建此环境。",
@@ -279,6 +283,10 @@
       "name": "更多资源",
       "faq": "常见问题",
       "submitIssue": "提交问题"
-    }
+    },
+    "apiEndpoint": "API 端点",
+    "apiEndpointDesc": "输入 Bedrock API 端点 URL",
+    "apiModelName": "API 模型名称",
+    "apiModelNameDesc": "输入 API 使用的模型名称"
   }
 }
diff --git a/source/portal/src/pages/chatbot/ChatBot.tsx b/source/portal/src/pages/chatbot/ChatBot.tsx
@@ -28,9 +28,9 @@ import { useAuth } from 'react-oidc-context';
 import {
   LLM_BOT_COMMON_MODEL_LIST,
   LLM_BOT_RETAIL_MODEL_LIST,
-  SCENARIO_LIST,
+  MODEL_TYPE_LIST,
   RETAIL_GOODS_LIST,
-  SCENARIO,
+  MODEL_TYPE,
   MAX_TOKEN,
   TEMPERATURE,
   ADITIONAL_SETTINGS,
@@ -64,7 +64,7 @@ interface ChatBotProps {
 
 const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   const { historySessionId } = props;
-  const localScenario = localStorage.getItem(SCENARIO);
+  const localScenario = localStorage.getItem(MODEL_TYPE);
   const localMaxToken = localStorage.getItem(MAX_TOKEN);
   const localTemperature = localStorage.getItem(TEMPERATURE);
   const localConfig = localStorage.getItem(ADITIONAL_SETTINGS);
@@ -106,13 +106,8 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   const [showTrace, setShowTrace] = useState(enableTrace);
   const [onlyRAGTool, setOnlyRAGTool] = useState(localStorage.getItem(ONLY_RAG_TOOL) == null || localStorage.getItem(ONLY_RAG_TOOL) == "true" ? true : false);
   const [isComposing, setIsComposing] = useState(false);
-  // const [useWebSearch, setUseWebSearch] = useState(false);
-  // const [googleAPIKey, setGoogleAPIKey] = useState('');
-  const [retailGoods, setRetailGoods] = useState<SelectProps.Option>(
-    RETAIL_GOODS_LIST[0],
-  );
-  const [scenario, setScenario] = useState<SelectProps.Option>(
-    localScenario == null ? SCENARIO_LIST[0] : JSON.parse(localScenario),
+  const [modelType, setModelType] = useState<SelectProps.Option>(
+    MODEL_TYPE_LIST[0],
   );
   const defaultConfig = {
     temperature: '0.01',
@@ -148,6 +143,11 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   const [modelSettingExpand, setModelSettingExpand] = useState(false);
   const [additionalConfigError, setAdditionalConfigError] = useState('');
 
+  const [apiEndpoint, setApiEndpoint] = useState('');
+  const [apiModelName, setApiModelName] = useState('');
+  const [apiEndpointError, setApiEndpointError] = useState('');
+  const [apiModelNameError, setApiModelNameError] = useState('');
+
   const connectionStatus = {
     [ReadyState.CONNECTING]: 'loading',
     [ReadyState.OPEN]: 'success',
@@ -160,12 +160,12 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   const fetchData = useAxiosRequest();
 
   const startNewChat = () => {
-    [CURRENT_CHAT_BOT,ENABLE_TRACE,MAX_TOKEN, MODEL_OPTION,ONLY_RAG_TOOL,SCENARIO,TEMPERATURE,USE_CHAT_HISTORY].forEach((item) => {
+    [CURRENT_CHAT_BOT,ENABLE_TRACE,MAX_TOKEN, MODEL_OPTION,ONLY_RAG_TOOL,MODEL_TYPE,TEMPERATURE,USE_CHAT_HISTORY].forEach((item) => {
       localStorage.removeItem(item);
     })
     // localStorage.()
     setChatbotOption(chatbotList[0])
-    setScenario(SCENARIO_LIST[0])
+    setModelType(MODEL_TYPE_LIST[0])
     setMaxToken(defaultConfig.maxToken)
     setMaxRounds(defaultConfig.maxRounds)
     setTemperature(defaultConfig.temperature)
@@ -306,10 +306,10 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   }, [enableTrace]);
 
   useEffect(() => {
-    if (scenario) {
-      localStorage.setItem(SCENARIO, JSON.stringify(scenario))
+    if (modelType) {
+      localStorage.setItem(MODEL_TYPE, JSON.stringify(modelType))
     }
-  }, [scenario])
+  }, [modelType])
 
   useEffect(() => {
     if (maxRounds) {
@@ -449,10 +449,23 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
       return;
     }
     // validate model settings
-    if (!modelOption.trim()) {
-      setModelError('validation.requireModel');
-      setModelSettingExpand(true);
-      return;
+    if (modelType.value === 'Bedrock API') {
+      if (!apiEndpoint.trim()) {
+        setApiEndpointError('validation.requireApiEndpoint');
+        setModelSettingExpand(true);
+        return;
+      }
+      if (!apiModelName.trim()) {
+        setApiModelNameError('validation.requireApiModelName');
+        setModelSettingExpand(true);
+        return;
+      }
+    } else {
+      if (!modelOption.trim()) {
+        setModelError('validation.requireModel');
+        setModelSettingExpand(true);
+        return;
+      }
     }
     if (!temperature.trim()) {
       setTemperatureError('validation.requireTemperature');
@@ -512,7 +525,7 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
       return;
     }
     // validate endpoint
-    if (modelOption === 'qwen2-72B-instruct' && !endPoint.trim()) {
+    if (modelType.value === 'Bedrock API' && !endPoint.trim()) {
       setEndPointError('validation.requireEndPoint');
       setModelSettingExpand(true);
       return;
@@ -533,23 +546,22 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
     const groupName: string[] = auth?.user?.profile?.['cognito:groups'] as any;
     let message = {
       query: userMessage,
-      entry_type: scenario.value,
+      entry_type: 'common',
       session_id: sessionId,
       user_id: auth?.user?.profile?.['cognito:username'] || 'default_user_id',
       chatbot_config: {
         max_rounds_in_memory: parseInt(maxRounds),
         group_name: groupName?.[0] ?? 'Admin',
         chatbot_id: chatbotOption.value ?? 'admin',
-        goods_id: retailGoods.value,
         chatbot_mode: 'agent',
         use_history: useChatHistory,
         enable_trace: enableTrace,
         use_websearch: true,
         google_api_key: '',
         default_llm_config: {
-          model_id: modelOption,
-          endpoint_name:
-            modelOption === 'qwen2-72B-instruct' ? endPoint.trim() : '',
+          model_id: modelType.value === 'Bedrock API' ? apiModelName : modelOption,
+          endpoint_name: modelType.value === 'Bedrock API' ? apiEndpoint : 
+            (modelOption === 'qwen2-72B-instruct' ? endPoint.trim() : ''),
           model_kwargs: {
             temperature: parseFloat(temperature),
             max_tokens: parseInt(maxToken),
@@ -598,19 +610,16 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   useEffect(() => {
     let optionList: any[] = [];
     const localModel = localStorage.getItem(MODEL_OPTION)
-    if (scenario.value === 'common') {
+    if (modelType.value === 'Bedrock') {
       optionList=LLM_BOT_COMMON_MODEL_LIST;
       setModelList(LLM_BOT_COMMON_MODEL_LIST);
-    } else if (scenario.value === 'retail') {
-      optionList=LLM_BOT_RETAIL_MODEL_LIST;
-      setModelList(LLM_BOT_RETAIL_MODEL_LIST);
     }
     if (localModel) {
       setModelOption(localModel)
     } else {
       setModelOption(optionList?.[0]?.options?.[0].value ?? '');
     }
-  }, [scenario]);
+  }, [modelType]);
 
   useEffect(() => {
     if (modelOption === 'qwen2-72B-instruct') {
@@ -727,31 +736,52 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
               headingTagOverride="h4"
               headerText={t('configurations')}
             >
-              {/* <SpaceBetween direction="vertical" size="l"> */}
                 <div style={{fontSize: 16, fontWeight: 700, marginBottom: 15, marginTop: 15}}>{t('common')}</div>
                 <SpaceBetween size="xs" direction="vertical">
                 <Grid gridDefinition={[{colspan: 5},{colspan: 6}]}>
-                {/* <ColumnLayout columns={3} variant="text-grid"> */}
-                  <FormField label={t('scenario')} stretch={true} description={t('scenarioDesc')}>
+                  <FormField label={t('modelType')} stretch={true} description={t('scenarioDesc')}>
                     <Select
-                      options={SCENARIO_LIST}
-                      selectedOption={scenario}
+                      options={MODEL_TYPE_LIST}
+                      selectedOption={modelType}
                       onChange={({ detail }) => {
-                        setScenario(detail.selectedOption);
+                        setModelType(detail.selectedOption);
                       }}
                     />
-                    {scenario.value == 'retail' && (
-                      <div style={{ minWidth: 300 }}>
-                        <Select
-                          options={RETAIL_GOODS_LIST}
-                          selectedOption={retailGoods}
+                  </FormField>
+                  {modelType.value === 'Bedrock API' ? (
+                    <SpaceBetween size="xs" direction="vertical">
+                      <FormField
+                        label={t('apiEndpoint')}
+                        stretch={true}
+                        errorText={t(apiEndpointError)}
+                        description={t('apiEndpointDesc')}
+                      >
+                        <Input
+                          value={apiEndpoint}
                           onChange={({ detail }) => {
-                            setRetailGoods(detail.selectedOption);
+                            setApiEndpointError('');
+                            setApiEndpoint(detail.value);
                           }}
+                          placeholder="https://api.example.com/v1"
                         />
-                      </div>
-                    )}
-                  </FormField>
+                      </FormField>
+                      <FormField
+                        label={t('apiModelName')}
+                        stretch={true}
+                        errorText={t(apiModelNameError)}
+                        description={t('apiModelNameDesc')}
+                      >
+                        <Input
+                          value={apiModelName}
+                          onChange={({ detail }) => {
+                            setApiModelNameError('');
+                            setApiModelName(detail.value);
+                          }}
+                          placeholder="model-name"
+                        />
+                      </FormField>
+                    </SpaceBetween>
+                  ) : (
                     <FormField
                       label={t('modelName')}
                       stretch={true}
@@ -769,8 +799,9 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
                         empty={t('noModelFound')}
                       />
                     </FormField>
-                    </Grid>
-                    <Grid gridDefinition={[ {colspan: 5},{colspan: 6}]}>
+                  )}
+                  </Grid>
+                  <Grid gridDefinition={[ {colspan: 5},{colspan: 6}]}>
                   <FormField
                     label={t('maxTokens')}
                     stretch={true}
@@ -888,7 +919,6 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
                     />
                   </FormField>
                   </Grid>
-                {/* </ColumnLayout> */}
                 <FormField
                   label={t('additionalSettings')}
                   errorText={t(additionalConfigError)}
@@ -973,8 +1003,6 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
           )}
         </div>
 
-        {/* {historySessionId?(<></>): */}
-        {/* ( */}
         <div className="flex-v gap-10">
           <div className="flex gap-5 send-message">
             <Select
@@ -1054,7 +1082,6 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
             </div>
           </div>
         </div>
-        {/* )} */}
       </div>
     </Container>
       </ContentLayout>

diff --git a/source/portal/src/pages/customService/CustomerService.tsx b/source/portal/src/pages/customService/CustomerService.tsx
@@ -11,7 +11,7 @@ import {
   MAX_TOKEN,
   MODEL_OPTION,
   ONLY_RAG_TOOL,
-  SCENARIO,
+  MODEL_TYPE,
   TEMPERATURE,
   USE_CHAT_HISTORY,
   ZH_LANGUAGE_LIST,
@@ -36,7 +36,7 @@ const STORAGE_KEYS = [
   USE_CHAT_HISTORY,
   ENABLE_TRACE,
   ONLY_RAG_TOOL,
-  SCENARIO,
+  MODEL_TYPE,
   MODEL_OPTION,
   MAX_TOKEN,
   TEMPERATURE,