fix: cpu offloads do not display

src/assets/styles/common.less

@@ -248,3 +248,27 @@
 .gap-16 {
   gap: 16px;
 }
+
+.color-white-tertiary {
+  color: var(--color-white-tertiary);
+}
+
+.color-white-quaternary {
+  color: var(--color-white-quaternary);
+}
+
+.color-white-light-1 {
+  color: var(--color-white-light-1);
+}
+
+.color-white-light-2 {
+  color: var(--color-white-light-2);
+}
+
+.color-white-light-3 {
+  color: var(--color-white-light-3);
+}
+
+.color-white-light-4 {
+  color: var(--color-white-light-4);
+}

src/pages/llmodels/components/instance-item.tsx

@@ -359,35 +359,42 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   const renderOffloadInfo = useMemo(() => {
     const total_layers = instanceData.computed_resource_claim?.total_layers;
     const offload_layers = instanceData.computed_resource_claim?.offload_layers;
-    if (total_layers === offload_layers || !offload_layers || !total_layers) {
+    if (total_layers === offload_layers || !total_layers) {
       return null;
     }
     return (
       <Tooltip
+        open
         title={
           <span className="flex flex-center">
             <span>
               CPU:{' '}
-              {_.subtract(
-                instanceData.computed_resource_claim?.total_layers,
-                instanceData.computed_resource_claim?.offload_layers
-              ) || 0}{' '}
-              {intl.formatMessage({
-                id: 'models.table.layers'
-              })}
+              <span className="color-white-light-4">
+                {_.subtract(
+                  instanceData.computed_resource_claim?.total_layers,
+                  instanceData.computed_resource_claim?.offload_layers
+                ) || 0}{' '}
+                {intl.formatMessage({
+                  id: 'models.table.layers'
+                })}
+              </span>
             </span>
             <Divider
               type="vertical"
               style={{
                 borderColor: '#fff',
-                opacity: 0.5
+                opacity: 0.45,
+                height: 14
               }}
             ></Divider>
             <span>
-              GPU: {instanceData.computed_resource_claim?.offload_layers}{' '}
-              {intl.formatMessage({
-                id: 'models.table.layers'
-              })}
+              GPU:{' '}
+              <span className="color-white-light-4">
+                {instanceData.computed_resource_claim?.offload_layers}{' '}
+                {intl.formatMessage({
+                  id: 'models.table.layers'
+                })}
+              </span>
             </span>
           </span>
         }

src/pages/playground/components/image-edit.tsx

@@ -280,9 +280,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     [handleOnScaleImageSize]
   );
 
-  const handleUpdateMaskList = useCallback((base64List: any) => {
+  const handleUpdateMaskList = useCallback(async (base64List: any) => {
     setMaskUpload(base64List);
     const mask = _.get(base64List, '[0].dataUrl', '');
+    // const maskColors = await extractImageColors(mask);
+    // console.log('maskColors:', maskColors);
     setMask(mask);
   }, []);