improve image generation model endpoint generation and realted UX

lablup · Jan 8, 2025 · df487b0 · df487b0
1 parent 12a8290
commit df487b0
Show file tree

Hide file tree

Showing 27 changed files with 1,264 additions and 1,470 deletions.
diff --git a/react/src/components/ChatContent.tsx b/react/src/components/ChatContent.tsx
@@ -13,12 +13,14 @@ import { useLazyLoadQuery } from 'react-relay/hooks';
 interface ChatContentProps {
   endpointId: string;
   endpointUrl: string;
+  endpointName: string;
   basePath: string;
 }
 
 const ChatContent: React.FC<ChatContentProps> = ({
   endpointId,
   endpointUrl,
+  endpointName,
   basePath,
 }) => {
   const { t } = useTranslation();
@@ -56,6 +58,7 @@ const ChatContent: React.FC<ChatContentProps> = ({
         fetchPolicy: 'network-only',
       },
     );
+  const isTextToImageModel = _.includes(endpointName, 'stable-diffusion');
 
   const newestValidToken =
     _.orderBy(endpoint_token_list?.items, ['valid_until'], ['desc'])[0]
@@ -85,7 +88,12 @@ const ChatContent: React.FC<ChatContentProps> = ({
   return (
     <LLMChatCard
       endpointId={endpointId || ''}
-      baseURL={new URL(basePath, endpointUrl).toString()}
+      baseURL={
+        isTextToImageModel
+          ? new URL('/generate-image', endpointUrl || '').toString()
+          : new URL(basePath, endpointUrl || '').toString()
+      }
+      isImageGeneration={isTextToImageModel}
       models={_.map(modelsResult?.data, (m) => ({
         id: m.id,
         name: m.id,

diff --git a/react/src/components/ModelCardChat.tsx b/react/src/components/ModelCardChat.tsx
@@ -67,6 +67,7 @@ const ModelCardChat: React.FC<ModelCardChatProps> = ({
     <ChatContent
       endpointId={healthyEndpoint[0]?.endpoint_id as string}
       endpointUrl={healthyEndpoint[0]?.url as string}
+      endpointName={healthyEndpoint[0]?.name as string}
       basePath={basePath}
     />
   ) : (

diff --git a/react/src/components/ModelCardModal.tsx b/react/src/components/ModelCardModal.tsx
@@ -151,7 +151,7 @@ const ModelCardModal: React.FC<ModelCardModalProps> = ({
                   wrap="wrap"
                   align="stretch"
                   gap={'sm'}
-                  style={{ width: '100%' }}
+                  style={{ width: '100%', minHeight: '50vh' }}
                 >
                   <Flex
                     direction="row"

diff --git a/react/src/components/lablupTalkativotUI/ChatMessage.tsx b/react/src/components/lablupTalkativotUI/ChatMessage.tsx
@@ -79,8 +79,8 @@ const ChatMessage: React.FC<{
                 src={attachment?.url}
                 alt={attachment?.name}
                 style={{
-                  maxWidth: '50vw',
-                  maxHeight: '12vh',
+                  maxWidth: placement === 'left' ? 200 : 300,
+                  maxHeight: placement === 'left' ? 200 : 300,
                   borderRadius: token.borderRadius,
                 }}
               />

diff --git a/react/src/components/lablupTalkativotUI/ChatUIModal.tsx b/react/src/components/lablupTalkativotUI/ChatUIModal.tsx
@@ -71,6 +71,7 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
     graphql`
       fragment ChatUIModalFragment on Endpoint {
         endpoint_id
+        name
         url
         status
       }
@@ -90,6 +91,7 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
     `,
     endpointTokenFrgmt,
   );
+  const isTextToImageModel = _.includes(endpoint?.name, 'stable-diffusion');
 
   const newestToken = _.maxBy(
     endpointTokenList?.items,
@@ -124,7 +126,12 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
   ) : (
     <LLMChatCard
       endpointId={endpoint?.endpoint_id || ''}
-      baseURL={new URL(basePath, endpoint?.url || '').toString()}
+      baseURL={
+        isTextToImageModel
+          ? new URL('/generate-image', endpoint?.url || '').toString()
+          : new URL(basePath, endpoint?.url || '').toString()
+      }
+      isImageGeneration={isTextToImageModel}
       models={_.map(modelsResult?.data, (m) => ({
         id: m.id,
         name: m.id,
@@ -133,6 +140,7 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
       style={{ flex: 1 }}
       allowCustomModel={_.isEmpty(modelsResult?.data)}
       alert={
+        !isTextToImageModel &&
         _.isEmpty(modelsResult?.data) && (
           <Alert
             type="warning"

diff --git a/react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx b/react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx
@@ -49,6 +49,7 @@ const EndpointLLMChatCard: React.FC<EndpointLLMChatCardProps> = ({
       fragment EndpointLLMChatCard_endpoint on Endpoint {
         endpoint_id
         url
+        name
       }
     `,
     endpointFrgmt,
@@ -63,6 +64,8 @@ const EndpointLLMChatCard: React.FC<EndpointLLMChatCardProps> = ({
     chatSubmitKeyInfoState,
   );
 
+  const isTextToImageModel = _.includes(endpoint?.name, 'stable-diffusion');
+
   const { data: modelsResult } = useSuspenseTanQuery<{
     data: Array<Model>;
   }>({
@@ -92,10 +95,11 @@ const EndpointLLMChatCard: React.FC<EndpointLLMChatCardProps> = ({
     <LLMChatCard
       {...cardProps}
       baseURL={
-        endpoint?.url
-          ? new URL(basePath, endpoint?.url ?? undefined).toString()
-          : undefined
+        isTextToImageModel
+          ? new URL('/generate-image', endpoint?.url || '').toString()
+          : new URL(basePath, endpoint?.url || '').toString()
       }
+      isImageGeneration={isTextToImageModel}
       models={models}
       fetchOnClient
       leftExtra={
@@ -147,7 +151,8 @@ const EndpointLLMChatCard: React.FC<EndpointLLMChatCardProps> = ({
       }
       allowCustomModel={_.isEmpty(models)}
       alert={
-        _.isEmpty(models) && (
+        !isTextToImageModel &&
+        _.isEmpty(modelsResult?.data) && (
           <Alert
             type="warning"
             showIcon

diff --git a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
@@ -230,7 +230,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
     setLoadingImageGeneration(true);
     try {
       const response = await fetch(
-        'https://stable-diffusion-3m.asia03.app.backend.ai/generate-image',
+        customModelFormRef.current?.getFieldValue('baseURL'),
         {
           method: 'POST',
           headers: {
@@ -244,7 +244,9 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
       );
       if (response.ok) {
         const responseData = await response.json();
-        return 'data:image/png;base64,' + responseData.image_base64;
+        return _.startsWith(responseData.image_base64, 'data:image/png;base64,')
+          ? responseData.image_base64
+          : 'data:image/png;base64,' + responseData.image_base64;
       } else {
         throw new Error('Error generating image');
       }
@@ -414,8 +416,8 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               });
 
               if (isImageGeneration) {
+                const generationId = _.uniqueId();
                 try {
-                  const imageBase64 = await generateImage(input, 'accessKey');
                   setMessages((prevMessages) => [
                     ...prevMessages,
                     {
@@ -424,7 +426,20 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
                       content: input,
                     },
                     {
-                      id: _.uniqueId(),
+                      id: generationId,
+                      role: 'assistant',
+                      content: 'Processing...',
+                    },
+                  ]);
+                  setInput('');
+                  const imageBase64 = await generateImage(input, 'accessKey');
+                  setMessages((prevMessages) => [
+                    ..._.filter(
+                      prevMessages,
+                      (message) => message.id !== generationId,
+                    ),
+                    {
+                      id: generationId,
                       role: 'assistant',
                       content: '',
                       experimental_attachments: [
@@ -510,6 +525,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
                 required: true,
               },
             ]}
+            hidden={isImageGeneration}
           >
             <Input placeholder="llm-model" />
           </Form.Item>

diff --git a/resources/i18n/de.json b/resources/i18n/de.json
@@ -1721,50 +1721,11 @@
     "UploadFilesDescription": "Klicken oder ziehen Sie Dateien zum Hochladen in diesen Bereich"
   },
   "time": {
-    "Day": "day",
-    "Hour": "Stunde",
-    "Min": "min",
-    "Ms": "ms",
-    "Sec": "Sek",
-    "Week": "Woche"
-  },
-  "usagePanel": {
-    "CpuUsedTime": "CPU-Nutzungszeit",
-    "DiskUsed": "Festplattennutzung",
-    "GpuUsedTime": "GPU-Nutzungszeit",
-    "NumSessions": "Anzahl der Sitzungen",
-    "StatisticsForThisMonth": "Statistik für diesen Monat",
-    "TrafficUsed": "Traffic-Nutzung",
-    "UsedTime": "Genutzte Zeit"
-  },
-  "sidePanel": {
-    "BackgroundTasks": "Ausführen von Aufgaben",
-    "NoBackgroundTask": "Nicht fragen.",
-    "NoNotification": "Keine Benachrichtigung.",
-    "Notification": "Benachrichtigung",
-    "Running": "Laufen..."
-  },
-  "tourGuide": {
-    "neoSessionLauncher": {
-      "FixErrorAndTryAgainText": "Wenn ein Fehlerfeld vorhanden ist, ist die Schaltfläche „Sitzung starten“ deaktiviert. \nBitte beheben Sie den Fehler und versuchen Sie es erneut.",
-      "FixErrorFieldByModifyButton": "Für dieses Fehlerfeld können Sie direkt auf die Schaltfläche „Bearbeiten“ in der oberen rechten Ecke gehen, um es zu bearbeiten.",
-      "ValidationErrorText": "Wenn Sie in einem Pflichtfeld keinen Wert eingeben oder einen ungültigen Wert eingeben, wird in diesem Feld eine Fehlermeldung angezeigt.",
-      "ValidationErrorTitle": "Fehler bei der Validierung des Eingabefelds"
-    }
-  },
-  "errorBoundary": {
-    "DisplayOnlyDevEnv": "Dieser Fehlerblock wird nur in der WebUI-Entwicklungsumgebung angezeigt.",
-    "ExpiredLoginSessionReLogin": "Anmeldung",
-    "ExpiredLoginSessionTitle": "Ihre Anmeldesitzung ist abgelaufen.",
-    "ReloadPage": "Laden Sie die Seite neu",
-    "ResetErrorBoundary": "ErrorBoundary zurücksetzen",
-    "Title": "Es ist ein Fehler aufgetreten."
-  },
-  "modelserving": {
-    "menu": {
-      "ModelServices": "Modelldienstleistungen",
-      "ModelList": "Modellliste",
-      "MyServices": "Meine Dienste"
-    }
+    "ms": "ms",
+    "sec": "Sek",
+    "min": "min",
+    "hour": "Stunde",
+    "day": "day",
+    "week": "Woche"
   }
 }
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -1721,50 +1721,11 @@
     "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση"
   },
   "time": {
-    "Day": "day",
-    "Hour": "ώρα",
-    "Min": "min",
-    "Ms": "ms",
-    "Sec": "δευτ",
-    "Week": "εβδομάδα"
-  },
-  "usagePanel": {
-    "CpuUsedTime": "Χρησιμοποιημένος χρόνος CPU",
-    "DiskUsed": "Χρήση δίσκου",
-    "GpuUsedTime": "Χρησιμοποιημένος χρόνος GPU",
-    "NumSessions": "Αριθμός συνεδριών",
-    "StatisticsForThisMonth": "Στατιστικά για αυτόν τον μήνα",
-    "TrafficUsed": "Χρήση κυκλοφορίας",
-    "UsedTime": "Χρησιμοποιημένος χρόνος"
-  },
-  "sidePanel": {
-    "BackgroundTasks": "Εκτέλεση εργασιών",
-    "NoBackgroundTask": "Χωρίς εργασία.",
-    "NoNotification": "Χωρίς ειδοποίηση.",
-    "Notification": "Γνωστοποίηση",
-    "Running": "Τρέξιμο..."
-  },
-  "tourGuide": {
-    "neoSessionLauncher": {
-      "FixErrorAndTryAgainText": "Εάν υπάρχει πεδίο σφάλματος, το κουμπί Εκκίνηση συνεδρίας είναι απενεργοποιημένο. \nΔιορθώστε το σφάλμα και δοκιμάστε ξανά.",
-      "FixErrorFieldByModifyButton": "Για αυτό το πεδίο σφάλματος, μπορείτε να μεταβείτε απευθείας στο κουμπί Επεξεργασία στην επάνω δεξιά γωνία για να το επεξεργαστείτε.",
-      "ValidationErrorText": "Εάν δεν εισαγάγετε μια τιμή σε ένα απαιτούμενο πεδίο ή εισαγάγετε μια μη έγκυρη τιμή, εμφανίζεται ένα μήνυμα σφάλματος σε αυτό το πεδίο.",
-      "ValidationErrorTitle": "Σφάλματα επικύρωσης πεδίου εισαγωγής"
-    }
-  },
-  "errorBoundary": {
-    "DisplayOnlyDevEnv": "Αυτό το μπλοκ σφάλματος εμφανίζεται μόνο στο περιβάλλον ανάπτυξης WebUI.",
-    "ExpiredLoginSessionReLogin": "Σύνδεση",
-    "ExpiredLoginSessionTitle": "Η περίοδος σύνδεσής σας έχει λήξει.",
-    "ReloadPage": "Επαναφόρτωση της σελίδας",
-    "ResetErrorBoundary": "Επαναφορά ErrorBoundary",
-    "Title": "Εμφανίστηκε σφάλμα."
-  },
-  "modelserving": {
-    "menu": {
-      "ModelServices": "Υπηρεσίες μοντέλου",
-      "ModelList": "Λίστα μοντέλων",
-      "MyServices": "Οι υπηρεσίες μου"
-    }
+    "ms": "ms",
+    "sec": "δευτ",
+    "min": "min",
+    "hour": "ώρα",
+    "day": "day",
+    "week": "εβδομάδα"
   }
 }
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
@@ -1721,50 +1721,11 @@
     "UploadFilesDescription": "Haga clic o arrastre archivos a esta área para cargarlos"
   },
   "time": {
-    "Day": "day",
-    "Hour": "hora",
-    "Min": "min",
-    "Ms": "ms",
-    "Sec": "segundo",
-    "Week": "semana"
-  },
-  "usagePanel": {
-    "CpuUsedTime": "Tiempo de uso de la CPU",
-    "DiskUsed": "Uso del disco",
-    "GpuUsedTime": "Tiempo de uso de la GPU",
-    "NumSessions": "Número de sesiones",
-    "StatisticsForThisMonth": "Estadísticas de este mes",
-    "TrafficUsed": "Uso del tráfico",
-    "UsedTime": "Tiempo de uso"
-  },
-  "sidePanel": {
-    "BackgroundTasks": "Tareas en curso",
-    "NoBackgroundTask": "Ninguna tarea.",
-    "NoNotification": "No hay notificación.",
-    "Notification": "Notificación",
-    "Running": "Corriendo..."
-  },
-  "tourGuide": {
-    "neoSessionLauncher": {
-      "FixErrorAndTryAgainText": "Si hay un campo de error, el botón Iniciar sesión está deshabilitado. \nCorrija el error y vuelva a intentarlo.",
-      "FixErrorFieldByModifyButton": "Para ese campo de error, puede ir directamente al botón Editar en la esquina superior derecha para editarlo.",
-      "ValidationErrorText": "Si no ingresa un valor en un campo obligatorio o ingresa un valor no válido, aparece un mensaje de error en ese campo.",
-      "ValidationErrorTitle": "Errores de validación del campo de entrada"
-    }
-  },
-  "errorBoundary": {
-    "DisplayOnlyDevEnv": "Este bloque de error sólo se muestra en el entorno de desarrollo WebUI.",
-    "ExpiredLoginSessionReLogin": "Inicio de sesión",
-    "ExpiredLoginSessionTitle": "Su sesión ha expirado.",
-    "ReloadPage": "Recargar la página",
-    "ResetErrorBoundary": "Restablecer ErrorBoundary",
-    "Title": "Se ha producido un error."
-  },
-  "modelserving": {
-    "menu": {
-      "ModelServices": "Servicios modelo",
-      "ModelList": "Lista de modelos",
-      "MyServices": "Mis servicios"
-    }
+    "ms": "ms",
+    "sec": "segundo",
+    "min": "min",
+    "hour": "hora",
+    "day": "day",
+    "week": "semana"
   }
 }