🐛 fix: viewer model load

src/components/HolographicCard/components/LaserShine/LaserShine.tsx

@@ -13,7 +13,6 @@ export interface LaserShineProps extends DivProps {
 export const LaserShine = memo<LaserShineProps>(({ mask, className, ...res }) => {
   const { styles, cx } = useStyles();
 
-  console.log(className);
   return (
     <animated.div
       className={cx(

src/features/AgentViewer/index.tsx

@@ -1,12 +1,13 @@
 import { Progress } from 'antd';
 import classNames from 'classnames';
-import React, { memo, useRef } from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 
 import PageLoading from '@/components/PageLoading';
-import Viewer from '@/features/AgentViewer/Viewer';
 import { useLoadModel } from '@/hooks/useLoadModel';
 import { useGlobalStore } from '@/store/global';
 import { Agent } from '@/types/agent';
+import { getModelPathByAgentId } from '@/utils/file';
+import storage from '@/utils/storage';
 
 import ToolBar from './ToolBar';
 import { useStyles } from './style';
@@ -25,7 +26,28 @@ function AgentViewer(props: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const viewer = useGlobalStore((s) => s.viewer);
 
-  const { downloading, percent, vrmUrl } = useLoadModel(agent.agentId, agent.meta.model!);
+  const { downloading, percent, fetchModelBlob } = useLoadModel();
+
+  const canvasRef = useCallback(
+    (canvas: HTMLCanvasElement) => {
+      if (canvas) {
+        viewer.setup(canvas);
+        const modelPath = getModelPathByAgentId(agent.agentId);
+        storage.getItem(modelPath).then((blob) => {
+          if (!blob) {
+            fetchModelBlob(agent.agentId, agent.meta.model!).then((res) => {
+              const modelUrl = URL.createObjectURL(res);
+              viewer.loadVrm(modelUrl);
+            });
+          } else {
+            const modelUrl = URL.createObjectURL(blob as Blob);
+            viewer.loadVrm(modelUrl);
+          }
+        });
+      }
+    },
+    [viewer, agent.agentId],
+  );
 
   return (
     <div
@@ -41,7 +63,7 @@ function AgentViewer(props: Props) {
           className={styles.loading}
         />
       ) : null}
-      {vrmUrl ? <Viewer vrmUrl={vrmUrl} /> : null}
+      <canvas ref={canvasRef} className={styles.canvas}></canvas>
     </div>
   );
 }

src/hooks/useLoadModel.tsx

@@ -1,38 +1,32 @@
 import { useState } from 'react';
-import useSWR from 'swr';
 
 import { fetchWithProgress } from '@/utils/fetch';
 import { getModelPathByAgentId } from '@/utils/file';
 import storage from '@/utils/storage';
 
-export const useLoadModel = (agentId: string, model: string) => {
+export const useLoadModel = () => {
   const [downloading, setDownloading] = useState(false);
   const [percent, setPercent] = useState(0);
 
-  const { data: vrmUrl, error } = useSWR(model, async (url) => {
-    const modelPath = getModelPathByAgentId(agentId);
-    // 根据 AgentId 获取本地模型数据
-    let blob = (await storage.getItem(modelPath)) as Blob | null;
-    if (!blob) {
-      setDownloading(true);
-      setPercent(0);
+  const fetchModelBlob = async (agentId: string, modelUrl: string) => {
+    setDownloading(true);
+    setPercent(0);
 
-      blob = await fetchWithProgress(url, {
-        onProgress: (loaded, total) => {
-          setPercent(Math.ceil((loaded / total) * 100));
-        },
-      });
-      setDownloading(false);
+    const blob = await fetchWithProgress(modelUrl, {
+      onProgress: (loaded, total) => {
+        setPercent(Math.ceil((loaded / total) * 100));
+      },
+    });
+    setDownloading(false);
 
-      await storage.setItem(modelPath, blob);
-    }
-    return blob ? URL.createObjectURL(blob) : null;
-  });
+    const modelPath = getModelPathByAgentId(agentId);
+    await storage.setItem(modelPath, blob);
+    return blob;
+  };
 
   return {
     downloading,
     percent,
-    vrmUrl,
-    error,
+    fetchModelBlob,
   };
 };

src/layout/Header/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Header as LobeHeader, Logo, TabsNav } from '@lobehub/ui';
-import { Alert, Space, Tag, Tooltip } from 'antd';
+import { Space, Tag, Tooltip } from 'antd';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
@@ -22,12 +22,12 @@ const Header = (props: Props) => {
   return (
     <LobeHeader
       actions={[
-        <Alert
-          message="近期由于 OSS 服务商限制，部分资源可能无法加载，可以从发现页重新订阅角色与舞蹈，造成的不便敬请谅解"
-          key={'alert'}
-          banner
-          closable
-        />,
+        // <Alert
+        //   message="近期由于 OSS 服务商限制，部分资源可能无法加载，可以从发现页重新订阅角色与舞蹈，造成的不便敬请谅解"
+        //   key={'alert'}
+        //   banner
+        //   closable
+        // />,
         <Github key="github" />,
         <ThemeMode key={'theme'} />,
         <Discord key={'discord'} />,

src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx

@@ -32,7 +32,6 @@ export default memo((props: Props) => {
 
   const handleOk = () => {
     form.validateFields().then((values) => {
-      console.log('values', values);
       setOpen(false);
       if (isEdit) {
         updateTouchAction(touchArea, index!, values);