From 3149b94cc31d7e2e2455046a714610d2e5d3517b Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Mon, 6 Jan 2025 11:26:24 +0900
Subject: [PATCH] [FR-315] feat: integrate image generation model

---
 .../lablupTalkativotUI/LLMChatCard.tsx        | 161 ++++++++++++++----
 resources/i18n/de.json                        |   3 +-
 resources/i18n/el.json                        |   3 +-
 resources/i18n/en.json                        |   3 +-
 resources/i18n/es.json                        |   3 +-
 resources/i18n/fi.json                        |   3 +-
 resources/i18n/fr.json                        |   3 +-
 resources/i18n/id.json                        |   3 +-
 resources/i18n/it.json                        |   3 +-
 resources/i18n/ja.json                        |   3 +-
 resources/i18n/ko.json                        |   3 +-
 resources/i18n/mn.json                        |   3 +-
 resources/i18n/ms.json                        |   3 +-
 resources/i18n/pl.json                        |   3 +-
 resources/i18n/pt-BR.json                     |   3 +-
 resources/i18n/pt.json                        |   3 +-
 resources/i18n/ru.json                        |   3 +-
 resources/i18n/th.json                        |   3 +-
 resources/i18n/tr.json                        |   3 +-
 resources/i18n/vi.json                        |   3 +-
 resources/i18n/zh-CN.json                     |   3 +-
 resources/i18n/zh-TW.json                     |   3 +-
 22 files changed, 166 insertions(+), 58 deletions(-)

diff --git a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
index 2d545c99c8..473d602688 100644
--- a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
+++ b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
@@ -13,6 +13,7 @@ import {
   DeleteOutlined,
   LinkOutlined,
   MoreOutlined,
+  PictureOutlined,
   RocketOutlined,
 } from '@ant-design/icons';
 import { Attachments, AttachmentsProps, Sender } from '@ant-design/x';
@@ -31,6 +32,7 @@ import {
   MenuProps,
   Tag,
   theme,
+  Tooltip,
   Typography,
 } from 'antd';
 import _ from 'lodash';
@@ -92,6 +94,8 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
 }) => {
   const webuiNavigate = useWebUINavigate();
   const [isOpenAttachments, setIsOpenAttachments] = useState(false);
+  const [isImageGeneration, setIsImageGeneration] = useState(false);
+  const [loadingImageGeneration, setLoadingImageGeneration] = useState(false);
 
   const [modelId, setModelId] = useControllableValue(cardProps, {
     valuePropName: 'modelId',
@@ -214,6 +218,34 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
     },
   ]);
 
+  const generateImage = async (prompt: string, accessKey: string) => {
+    setLoadingImageGeneration(true);
+    try {
+      const response = await fetch(
+        'https://flux-inference.asia03.app.backend.ai/generate-flux-image',
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            prompt: prompt,
+            access_key: accessKey,
+          }),
+        },
+      );
+
+      if (response.ok) {
+        const responseData = await response.json();
+        return responseData.image_base64;
+      } else {
+        throw new Error('Error generating image');
+      }
+    } finally {
+      setLoadingImageGeneration(false);
+    }
+  };
+
   return (
     <Card
       ref={cardRef}
@@ -244,6 +276,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               value={modelId}
               onChange={setModelId}
               allowCustomModel={allowCustomModel}
+              disabled={isImageGeneration}
             />
             <Dropdown menu={{ items }} trigger={['click']}>
               <Button
@@ -318,32 +351,59 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               />
             </Sender.Header>
           }
+          styles={{
+            prefix: {
+              alignSelf: 'center',
+            },
+          }}
           prefix={
-            <Attachments
-              beforeUpload={() => false}
-              getDropContainer={() => cardRef.current}
-              accept="image/*,text/*"
-              items={files}
-              onChange={({ fileList }) => {
-                setFiles(fileList);
-                setIsOpenAttachments(true);
-              }}
-              placeholder={(type) =>
-                type === 'drop'
-                  ? {
-                      title: t('chatui.DropFileHere'),
-                    }
-                  : {
-                      icon: <CloudUploadOutlined />,
-                      title: t('chatui.UploadFiles'),
-                      description: t('chatui.UploadFilesDescription'),
-                    }
-              }
-            >
-              <Badge dot={!_.isEmpty(files) && !isOpenAttachments}>
-                <Button type="text" icon={<LinkOutlined />} />
-              </Badge>
-            </Attachments>
+            isImageGeneration ? (
+              <Tag
+                title={t('chatui.Picture')}
+                closable
+                onClose={() => setIsImageGeneration(false)}
+                color="blue"
+              >
+                {t('chatui.Picture')}
+              </Tag>
+            ) : (
+              <>
+                <Attachments
+                  beforeUpload={() => false}
+                  getDropContainer={() => cardRef.current}
+                  accept="image/*,text/*"
+                  items={files}
+                  onChange={({ fileList }) => {
+                    setFiles(fileList);
+                    setIsOpenAttachments(true);
+                  }}
+                  placeholder={(type) =>
+                    type === 'drop'
+                      ? {
+                          title: t('chatui.DropFileHere'),
+                        }
+                      : {
+                          icon: <CloudUploadOutlined />,
+                          title: t('chatui.UploadFiles'),
+                          description: t('chatui.UploadFilesDescription'),
+                        }
+                  }
+                >
+                  <Badge dot={!_.isEmpty(files) && !isOpenAttachments}>
+                    <Button type="text" icon={<LinkOutlined />} />
+                  </Badge>
+                </Attachments>
+                <Tooltip title={t('chatui.Picture')}>
+                  <Button
+                    type="text"
+                    icon={<PictureOutlined />}
+                    onClick={() => {
+                      setIsImageGeneration(true);
+                    }}
+                  />
+                </Tooltip>
+              </>
+            )
           }
           onChange={(v: string) => {
             setInput(v);
@@ -351,37 +411,64 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               onInputChange(v);
             }
           }}
-          loading={isLoading}
+          loading={isLoading || loadingImageGeneration}
           onStop={() => {
             stop();
           }}
-          onSend={() => {
+          onSend={async () => {
             if (input || !_.isEmpty(files)) {
               const fileList = _.map(
                 files,
                 (item) => item.originFileObj as File,
               );
-              // Filter after converting to `File`
               const fileListArray = _.filter(fileList, Boolean);
               const dataTransfer = new DataTransfer();
               _.forEach(fileListArray, (file) => {
                 dataTransfer.items.add(file);
               });
 
-              append(
-                {
-                  role: 'user',
-                  content: input,
-                },
-                {
-                  experimental_attachments: dataTransfer.files,
-                },
-              );
+              if (isImageGeneration) {
+                try {
+                  const imageBase64 = await generateImage(input, 'accessKey');
+                  setMessages((prevMessages) => [
+                    ...prevMessages,
+                    {
+                      id: _.uniqueId(),
+                      role: 'user',
+                      content: input,
+                    },
+                    {
+                      id: _.uniqueId(),
+                      role: 'assistant',
+                      content: '',
+                      experimental_attachments: [
+                        {
+                          contentType: 'image/png',
+                          url: imageBase64,
+                        },
+                      ],
+                    },
+                  ]);
+                } catch (error) {
+                  console.error(error);
+                }
+              } else {
+                append(
+                  {
+                    role: 'user',
+                    content: input,
+                  },
+                  {
+                    experimental_attachments: dataTransfer.files,
+                  },
+                );
+              }
 
               setTimeout(() => {
                 setInput('');
                 setFiles([]);
                 setIsOpenAttachments(false);
+                setIsImageGeneration(false);
               }, 0);
               onSubmitChange?.();
             }
diff --git a/resources/i18n/de.json b/resources/i18n/de.json
index 91f3e3b6e3..d4b3e802db 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Anhänge",
     "DropFileHere": "Datei hier ablegen",
     "UploadFiles": "Dateien hochladen",
-    "UploadFilesDescription": "Klicken oder ziehen Sie Dateien zum Hochladen in diesen Bereich"
+    "UploadFilesDescription": "Klicken oder ziehen Sie Dateien zum Hochladen in diesen Bereich",
+    "Picture": "Bild"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
index 5c7c778246..cb4de75386 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Συνημμένα",
     "DropFileHere": "Αποθέστε το αρχείο εδώ",
     "UploadFiles": "Μεταφόρτωση αρχείων",
-    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση"
+    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση",
+    "Picture": "Εικόνα"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index a861332a66..a80cd84770 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -1751,7 +1751,8 @@
     "Attachments": "Attachments",
     "DropFileHere": "Drop file here",
     "UploadFiles": "Upload files",
-    "UploadFilesDescription": "Click or drag files to this area to upload"
+    "UploadFilesDescription": "Click or drag files to this area to upload",
+    "Picture": "Picture"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index 128622e793..9f8efdc805 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -1749,7 +1749,8 @@
     "Attachments": "Adjuntos",
     "DropFileHere": "Suelta el archivo aquí",
     "UploadFiles": "Subir archivos",
-    "UploadFilesDescription": "Haga clic o arrastre archivos a esta área para cargarlos"
+    "UploadFilesDescription": "Haga clic o arrastre archivos a esta área para cargarlos",
+    "Picture": "Imagen"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
index bb7af91ce5..5b6f6b6acc 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -1746,7 +1746,8 @@
     "Attachments": "Liitteet",
     "DropFileHere": "Pudota tiedosto tähän",
     "UploadFiles": "Lataa tiedostoja",
-    "UploadFilesDescription": "Napsauta tai vedä tiedostoja tälle alueelle ladataksesi"
+    "UploadFilesDescription": "Napsauta tai vedä tiedostoja tälle alueelle ladataksesi",
+    "Picture": "Kuva"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
index 3b48649e92..5042e7498d 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Pièces jointes",
     "DropFileHere": "Déposez le fichier ici",
     "UploadFiles": "Télécharger des fichiers",
-    "UploadFilesDescription": "Cliquez ou faites glisser les fichiers vers cette zone pour les télécharger"
+    "UploadFilesDescription": "Cliquez ou faites glisser les fichiers vers cette zone pour les télécharger",
+    "Picture": "Image"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index c55d137862..331c647ba6 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Lampiran",
     "DropFileHere": "Letakkan file di sini",
     "UploadFiles": "Unggah file",
-    "UploadFilesDescription": "Klik atau seret file ke area ini untuk diunggah"
+    "UploadFilesDescription": "Klik atau seret file ke area ini untuk diunggah",
+    "Picture": "Gambar"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index fd8f072619..64a6d94cdb 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Allegati",
     "DropFileHere": "Rilascia il file qui",
     "UploadFiles": "Carica file",
-    "UploadFilesDescription": "Fare clic o trascinare i file in quest'area per caricarli"
+    "UploadFilesDescription": "Fare clic o trascinare i file in quest'area per caricarli",
+    "Picture": "Immagine"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index a1cc356da1..96c7513c3d 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -1747,7 +1747,8 @@
     "Attachments": "添付ファイル",
     "DropFileHere": "ここにファイルをドロップします",
     "UploadFiles": "ファイルをアップロードする",
-    "UploadFilesDescription": "ファイルをクリックまたはこの領域にドラッグしてアップロードします"
+    "UploadFilesDescription": "ファイルをクリックまたはこの領域にドラッグしてアップロードします",
+    "Picture": "写真"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index dc783239f0..cb316a73c4 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -1749,7 +1749,8 @@
     "Attachments": "첨부파일",
     "DropFileHere": "파일을 여기에 놓아주세요.",
     "UploadFiles": "파일 업로드",
-    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요"
+    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요",
+    "Picture": "그림"
   },
   "time": {
     "ms": "밀리초",
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index f47c018975..d429322795 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Хавсралтууд",
     "DropFileHere": "Файлыг энд буулгана уу",
     "UploadFiles": "Файлуудыг байршуулах",
-    "UploadFilesDescription": "Байршуулахын тулд файлуудыг энэ хэсэгт товшиж эсвэл чирнэ үү"
+    "UploadFilesDescription": "Байршуулахын тулд файлуудыг энэ хэсэгт товшиж эсвэл чирнэ үү",
+    "Picture": "Зураг"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index 3a23655c01..b2e21dc157 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Lampiran",
     "DropFileHere": "Lepaskan fail di sini",
     "UploadFiles": "Muat naik fail",
-    "UploadFilesDescription": "Klik atau seret fail ke kawasan ini untuk memuat naik"
+    "UploadFilesDescription": "Klik atau seret fail ke kawasan ini untuk memuat naik",
+    "Picture": "Gambar"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index 49fa0ae652..d0eeccea0d 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Załączniki",
     "DropFileHere": "Upuść plik tutaj",
     "UploadFiles": "Prześlij pliki",
-    "UploadFilesDescription": "Kliknij lub przeciągnij pliki do tego obszaru, aby je przesłać"
+    "UploadFilesDescription": "Kliknij lub przeciągnij pliki do tego obszaru, aby je przesłać",
+    "Picture": "Zdjęcie"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index 8cf39c15b3..7613c8a672 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Anexos",
     "DropFileHere": "Solte o arquivo aqui",
     "UploadFiles": "Carregar arquivos",
-    "UploadFilesDescription": "Clique ou arraste os arquivos para esta área para fazer upload"
+    "UploadFilesDescription": "Clique ou arraste os arquivos para esta área para fazer upload",
+    "Picture": "Foto"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index 997cf704de..249dc8beb0 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Anexos",
     "DropFileHere": "Solte o arquivo aqui",
     "UploadFiles": "Carregar arquivos",
-    "UploadFilesDescription": "Clique ou arraste os arquivos para esta área para fazer upload"
+    "UploadFilesDescription": "Clique ou arraste os arquivos para esta área para fazer upload",
+    "Picture": "Foto"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index 7a6592a45b..6cc7ab50c7 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Вложения",
     "DropFileHere": "Перетащите файл сюда",
     "UploadFiles": "Загрузить файлы",
-    "UploadFilesDescription": "Нажмите или перетащите файлы в эту область, чтобы загрузить"
+    "UploadFilesDescription": "Нажмите или перетащите файлы в эту область, чтобы загрузить",
+    "Picture": "Картина"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 5fa2078538..da737f955d 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -1727,7 +1727,8 @@
     "Attachments": "ไฟล์แนบ",
     "DropFileHere": "วางไฟล์ที่นี่",
     "UploadFiles": "อัพโหลดไฟล์",
-    "UploadFilesDescription": "คลิกหรือลากไฟล์ไปยังบริเวณนี้เพื่ออัปโหลด"
+    "UploadFilesDescription": "คลิกหรือลากไฟล์ไปยังบริเวณนี้เพื่ออัปโหลด",
+    "Picture": "รูปภาพ"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index 400ae355f8..3aff6811cd 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -1746,7 +1746,8 @@
     "Attachments": "Ekler",
     "DropFileHere": "Dosyayı buraya bırakın",
     "UploadFiles": "Dosyaları yükle",
-    "UploadFilesDescription": "Yüklemek için dosyaları bu alana tıklayın veya sürükleyin"
+    "UploadFilesDescription": "Yüklemek için dosyaları bu alana tıklayın veya sürükleyin",
+    "Picture": "Resim"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index 4104b6610e..ba03b34e8e 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -1747,7 +1747,8 @@
     "Attachments": "Tệp đính kèm",
     "DropFileHere": "Thả tập tin ở đây",
     "UploadFiles": "Tải tập tin lên",
-    "UploadFilesDescription": "Nhấp hoặc kéo tệp vào khu vực này để tải lên"
+    "UploadFilesDescription": "Nhấp hoặc kéo tệp vào khu vực này để tải lên",
+    "Picture": "Hình ảnh"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index 6749d68cba..449198615d 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -1748,7 +1748,8 @@
     "Attachments": "附件",
     "DropFileHere": "将文件拖放到此处",
     "UploadFiles": "上传文件",
-    "UploadFilesDescription": "点击或拖拽文件到该区域即可上传"
+    "UploadFilesDescription": "点击或拖拽文件到该区域即可上传",
+    "Picture": "图片"
   },
   "time": {
     "ms": "ms",
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index d0e87d4cc2..42f2b0d74b 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -1748,7 +1748,8 @@
     "Attachments": "附件",
     "DropFileHere": "將文件拖放到此處",
     "UploadFiles": "上傳文件",
-    "UploadFilesDescription": "點選或拖曳文件到該區域即可上傳"
+    "UploadFilesDescription": "點選或拖曳文件到該區域即可上傳",
+    "Picture": "圖片"
   },
   "time": {
     "ms": "ms",