From e566e03a6bc1caf3894a80708c27130547a14e4e Mon Sep 17 00:00:00 2001
From: Jihyun Kang <jihyunkang@lablup.com>
Date: Tue, 7 Jan 2025 17:04:31 +0900
Subject: [PATCH] add: temporally add talkativot service site as iframe in
 model card of talkativot-standalone

---
 react/src/components/ModelCardModal.tsx  | 44 ++++++++++++++++--------
 react/src/components/ModelTryContent.tsx | 24 +++++++++----
 react/src/pages/ModelStoreListPage.tsx   |  1 +
 3 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/react/src/components/ModelCardModal.tsx b/react/src/components/ModelCardModal.tsx
index eee6b022da..3eeeb524ae 100644
--- a/react/src/components/ModelCardModal.tsx
+++ b/react/src/components/ModelCardModal.tsx
@@ -160,20 +160,36 @@ const ModelCardModal: React.FC<ModelCardModalProps> = ({
                     gap={'sm'}
                     style={{ flex: 1 }}
                   >
-                    <ModelCardChat
-                      basePath={
-                        model_card?.name?.includes('stable-diffusion-3-medium')
-                          ? 'generate-image'
-                          : 'v1'
-                      }
-                      modelName={
-                        model_card?.name === 'stable-diffusion-3-medium'
-                          ? 'stable-diffusion-3m'
-                          : model_card?.name === 'Llama-3.2-11B-Vision-Instruct'
-                            ? 'llama-vision-11b'
-                            : model_card?.name || ''
-                      }
-                    />
+                    {model_card?.name === 'Talkativot UI' ? (
+                      // FIXME: temporally add iframe for Talkativot UI
+                      <iframe
+                        src="https://talkativot-aiot-demo.asia03.app.backend.ai/chat"
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          border: 'none',
+                        }}
+                        title="Talkativot AIOT Demo"
+                      />
+                    ) : (
+                      <ModelCardChat
+                        basePath={
+                          model_card?.name?.includes(
+                            'stable-diffusion-3-medium',
+                          )
+                            ? 'generate-image'
+                            : 'v1'
+                        }
+                        modelName={
+                          model_card?.name === 'stable-diffusion-3-medium'
+                            ? 'stable-diffusion-3m'
+                            : model_card?.name ===
+                                'Llama-3.2-11B-Vision-Instruct'
+                              ? 'llama-vision-11b'
+                              : model_card?.name || ''
+                        }
+                      />
+                    )}
                   </Flex>
                   <Divider type="vertical" style={{ height: '100%' }} />
                   <Flex
diff --git a/react/src/components/ModelTryContent.tsx b/react/src/components/ModelTryContent.tsx
index f13779d991..7e674021c8 100644
--- a/react/src/components/ModelTryContent.tsx
+++ b/react/src/components/ModelTryContent.tsx
@@ -89,7 +89,9 @@ const ModelTryContent: React.FC<ModelTryContentProps> = ({
   );
 
   const filteredModelStoreList = myModelStoreList.filter((vFolder) =>
-    vFolder.name.includes(modelName || ''),
+    vFolder.name.includes(
+      modelName === 'Talkativot UI' ? 'talkativot-standalone' : modelName || '',
+    ),
   );
 
   const mutationToClone = useTanMutation<
@@ -207,7 +209,9 @@ const ModelTryContent: React.FC<ModelTryContentProps> = ({
       ? 'stable-diffusion-3m'
       : modelName?.includes('Llama-3.2-11B-Vision-Instruct')
         ? 'llama-vision-11b'
-        : modelName;
+        : modelName?.includes('Talkativot UI')
+          ? 'talkativot'
+          : modelName;
     return {
       serviceName: `${model}-${generateRandomString(4)}`,
       replicas: 1,
@@ -267,7 +271,9 @@ const ModelTryContent: React.FC<ModelTryContentProps> = ({
       resource: {
         cpu: 4,
         mem: '32g',
-        accelerator: minAIAcclResource,
+        accelerator: modelName?.includes('Talkativot UI')
+          ? 0
+          : minAIAcclResource,
         acceleratorType: 'cuda.shares',
         shmem: '1g',
       },
@@ -299,10 +305,10 @@ const ModelTryContent: React.FC<ModelTryContentProps> = ({
             cloneable: true,
             permission: 'wd', // write-delete permission
             target_host: modelStorageHost, // lowestUsageHost, // clone to accessible and lowest usage storage host
-            target_name: `${modelName}-1`,
+            target_name: `${modelName === 'Talkativot UI' ? 'talkativot-standalone-1' : modelName}`,
             usage_mode: 'model',
           },
-          name: `${modelName}`,
+          name: `${modelName === 'Talkativot UI' ? 'talkativot-standalone' : modelName}`,
         },
         {
           onSuccess: (data) => {
@@ -525,7 +531,10 @@ const ModelTryContent: React.FC<ModelTryContentProps> = ({
       )}
       <Button
         type="primary"
-        disabled={modelName?.includes('stable-diffusion')}
+        disabled={
+          modelName?.includes('stable-diffusion') ||
+          modelName?.includes('Talkativot UI')
+        }
         onClick={() => {
           cloneOrCreateModelService('vllm');
         }}
@@ -540,7 +549,8 @@ const ModelTryContent: React.FC<ModelTryContentProps> = ({
         disabled={
           modelName?.includes('stable-diffusion') ||
           modelName?.includes('gemma-2-27b-it') ||
-          modelName?.includes('Llama-3.2-11B-Vision-Instruct')
+          modelName?.includes('Llama-3.2-11B-Vision-Instruct') ||
+          modelName?.includes('Talkativot UI')
         }
         type="primary"
         onClick={() => {
diff --git a/react/src/pages/ModelStoreListPage.tsx b/react/src/pages/ModelStoreListPage.tsx
index 9be4235a4d..d342b97ec5 100644
--- a/react/src/pages/ModelStoreListPage.tsx
+++ b/react/src/pages/ModelStoreListPage.tsx
@@ -246,6 +246,7 @@ const ModelStoreListPage: React.FC = () => {
               'gemma-2-27b-it',
               'Llama-3.2-11B-Vision-Instruct',
               'stable-diffusion-3-medium',
+              'Talkativot UI',
             ];
             const aIndex = specialNames.indexOf(a?.name || '');
             const bIndex = specialNames.indexOf(b?.name || '');