[FR-315] feat: integrate image generation model

lablup · Jan 6, 2025 · 753266b · 753266b
1 parent 750a200
commit 753266b
Show file tree

Hide file tree

Showing 22 changed files with 99 additions and 46 deletions.
diff --git 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,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
 }) => {
   const webuiNavigate = useWebUINavigate();
   const [isOpenAttachments, setIsOpenAttachments] = useState(false);
+  const [isImageGeneration, setIsImageGeneration] = useState(false);
 
   const [modelId, setModelId] = useControllableValue(cardProps, {
     valuePropName: 'modelId',
@@ -244,6 +247,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               value={modelId}
               onChange={setModelId}
               allowCustomModel={allowCustomModel}
+              disabled={isImageGeneration}
             />
             <Dropdown menu={{ items }} trigger={['click']}>
               <Button
@@ -318,32 +322,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);
@@ -382,6 +413,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
                 setInput('');
                 setFiles([]);
                 setIsOpenAttachments(false);
+                setIsImageGeneration(false);
               }, 0);
               onSubmitChange?.();
             }

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1749,7 +1749,8 @@
     "Attachments": "첨부파일",
     "DropFileHere": "파일을 여기에 놓아주세요.",
     "UploadFiles": "파일 업로드",
-    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요"
+    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요",
+    "Picture": "그림"
   },
   "time": {
     "ms": "밀리초",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1748,7 +1748,8 @@
     "Attachments": "附件",
     "DropFileHere": "將文件拖放到此處",
     "UploadFiles": "上傳文件",
-    "UploadFilesDescription": "點選或拖曳文件到該區域即可上傳"
+    "UploadFilesDescription": "點選或拖曳文件到該區域即可上傳",
+    "Picture": "圖片"
   },
   "time": {
     "ms": "ms",