From decdfede4708f1186a050076d81d59f276da28b3 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Sat, 8 Jun 2024 14:35:40 +0800 Subject: [PATCH] :bug: fix: viewer model load --- .../components/LaserShine/LaserShine.tsx | 1 - src/features/AgentViewer/Viewer.tsx | 39 ------------------- src/features/AgentViewer/index.tsx | 30 ++++++++++++-- src/hooks/useLoadModel.tsx | 36 +++++++---------- src/layout/Header/index.tsx | 14 +++---- .../Touch/ActionList/Actions/AddOrEdit.tsx | 1 - 6 files changed, 48 insertions(+), 73 deletions(-) delete mode 100644 src/features/AgentViewer/Viewer.tsx diff --git a/src/components/HolographicCard/components/LaserShine/LaserShine.tsx b/src/components/HolographicCard/components/LaserShine/LaserShine.tsx index 87c6e2df..f019135b 100644 --- a/src/components/HolographicCard/components/LaserShine/LaserShine.tsx +++ b/src/components/HolographicCard/components/LaserShine/LaserShine.tsx @@ -13,7 +13,6 @@ export interface LaserShineProps extends DivProps { export const LaserShine = memo(({ mask, className, ...res }) => { const { styles, cx } = useStyles(); - console.log(className); return ( s.viewer); - - const canvasRef = useCallback( - (canvas: HTMLCanvasElement) => { - if (canvas) { - viewer.setup(canvas); - setLoading(true); - viewer.loadVrm(vrmUrl).then(() => { - setLoading(false); - }); - } - }, - [viewer, vrmUrl], - ); - - return ( - <> - {loading ? : null} - - - ); -} - -export default memo(Viewer); diff --git a/src/features/AgentViewer/index.tsx b/src/features/AgentViewer/index.tsx index 80f08b88..fd5d4683 100644 --- a/src/features/AgentViewer/index.tsx +++ b/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(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 (
) : null} - {vrmUrl ? : null} +
); } diff --git a/src/hooks/useLoadModel.tsx b/src/hooks/useLoadModel.tsx index 1b929bbe..f28fdb0d 100644 --- a/src/hooks/useLoadModel.tsx +++ b/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, }; }; diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx index ddb3341f..d0d56314 100644 --- a/src/layout/Header/index.tsx +++ b/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 ( , + // , , , , diff --git a/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx b/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx index 439e10a9..47906c6a 100644 --- a/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit.tsx +++ b/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);