Charater save load 42

src/components/messageInput.tsx

@@ -2,7 +2,6 @@ import * as ort from "onnxruntime-web"
 ort.env.wasm.wasmPaths = '/_next/static/chunks/'
 
 import { useContext, useEffect, useRef, useState } from "react";
-import { clsx } from "clsx";
 import { useMicVAD } from "@ricky0123/vad-react"
 import { IconButton } from "./iconButton";
 import { useTranscriber } from "@/hooks/useTranscriber";
@@ -11,8 +10,8 @@ import { AlertContext } from "@/features/alert/alertContext";
 import { ChatContext } from "@/features/chat/chatContext";
 import { openaiWhisper  } from "@/features/openaiWhisper/openaiWhisper";
 import { whispercpp  } from "@/features/whispercpp/whispercpp";
-import { config, updateConfig } from "@/utils/config";
-import wavefile, { WaveFile } from "wavefile";
+import { config } from "@/utils/config";
+import { WaveFile } from "wavefile";
 
 export default function MessageInput({
   userMessage,

src/components/settings.tsx

@@ -61,13 +61,15 @@ import { VisionSystemPromptPage } from './settings/VisionSystemPromptPage';
 
 import { NamePage } from './settings/NamePage';
 import { SystemPromptPage } from './settings/SystemPromptPage';
+import { useVrmStoreContext } from "@/features/vrmStore/vrmStoreContext";
 
 export const Settings = ({
   onClickClose,
 }: {
   onClickClose: () => void;
 }) => {
   const { viewer } = useContext(ViewerContext);
+  const { vrmList, vrmListAddFile } = useVrmStoreContext();
   useKeyboardShortcut("Escape", onClickClose);
 
   const [page, setPage] = useState('main_menu');
@@ -110,6 +112,8 @@ export const Settings = ({
   const [bgUrl, setBgUrl] = useState(config("bg_url"));
   const [bgColor, setBgColor] = useState(config("bg_color"));
   const [vrmUrl, setVrmUrl] = useState(config("vrm_url"));
+  const [vrmHash, setVrmHash] = useState(config("vrm_hash"));
+  const [vrmSaveType, setVrmSaveType] = useState(config('vrm_save_type'));
   const [youtubeVideoID, setYoutubeVideoID] = useState(config("youtube_videoid"));
   const [animationUrl, setAnimationUrl] = useState(config("animation_url"));
 
@@ -148,9 +152,7 @@ export const Settings = ({
       const file_type = file.name.split(".").pop();
 
       if (file_type === "vrm") {
-        const blob = new Blob([file], { type: "application/octet-stream" });
-        const url = window.URL.createObjectURL(blob);
-        viewer.loadVrm(url);
+        vrmListAddFile(file, viewer);
       }
 
       event.target.value = "";
@@ -219,7 +221,7 @@ export const Settings = ({
     visionOllamaUrl, visionOllamaModel,
     visionSystemPrompt,
     bgColor,
-    bgUrl, vrmUrl, youtubeVideoID, animationUrl,
+    bgUrl, vrmHash, vrmUrl, youtubeVideoID, animationUrl,
     sttBackend,
     whisperOpenAIApiKey, whisperOpenAIModel, whisperOpenAIUrl,
     whisperCppUrl,
@@ -297,8 +299,13 @@ export const Settings = ({
     case 'character_model':
       return <CharacterModelPage
         viewer={viewer}
+        vrmHash={vrmHash}
         vrmUrl={vrmUrl}
+        vrmSaveType={vrmSaveType}
+        vrmList={vrmList}
+        setVrmHash={setVrmHash}
         setVrmUrl={setVrmUrl}
+        setVrmSaveType={setVrmSaveType}
         setSettingsUpdated={setSettingsUpdated}
         handleClickOpenVrmFile={handleClickOpenVrmFile}
         />

src/components/settings/CharacterModelPage.tsx

@@ -1,21 +1,30 @@
 import { useTranslation } from 'react-i18next';
 import { clsx } from "clsx";
 import { BasicPage } from "./common";
-import { vrmList } from '@/paths';
-import { thumbPrefix } from './common';
 import { updateConfig } from "@/utils/config";
 import { TextButton } from "@/components/textButton";
+import { VrmData } from '@/features/vrmStore/vrmData';
 
 export function CharacterModelPage({
   viewer,
+  vrmHash,
   vrmUrl,
+  vrmSaveType,
+  vrmList,
+  setVrmHash,
   setVrmUrl,
+  setVrmSaveType,
   setSettingsUpdated,
   handleClickOpenVrmFile,
 }: {
   viewer: any; // TODO
+  vrmHash: string;
   vrmUrl: string;
+  vrmSaveType: string;
+  vrmList: VrmData[],
+  setVrmHash: (hash: string) => void;
   setVrmUrl: (url: string) => void;
+  setVrmSaveType: (saveType: string) => void;
   setSettingsUpdated: (updated: boolean) => void;
   handleClickOpenVrmFile: () => void;
 }) {
@@ -25,39 +34,50 @@ export function CharacterModelPage({
     <BasicPage
       title={t("Character Model")}
       description={t("character_desc", "Select the Character to play")}
-    >
-      <div className="rounded-lg shadow-lg bg-white flex flex-wrap justify-center space-x-4 space-y-4 p-4">
-        { vrmList.map((url) =>
-          <button
-            key={url}
-            onClick={() => {
-              viewer.loadVrm(url);
-              updateConfig("vrm_url", url);
-              setVrmUrl(url);
-              setSettingsUpdated(true);
-            }}
-            className={clsx(
-              "mx-4 py-2 rounded-4 transition-all bg-gray-100 hover:bg-white active:bg-gray-100 rounded-xl",
-              vrmUrl === url ? "opacity-100 shadow-md" : "opacity-60 hover:opacity-100"
-            )}
-            >
-              <img
-                src={`${thumbPrefix(url)}.jpg`}
-                alt={url}
-                width="160"
-                height="93"
-                className="m-0 rounded mx-4 pt-0 pb-0 pl-0 pr-0 shadow-sm shadow-black hover:shadow-md hover:shadow-black rounded-4 transition-all bg-gray-100 hover:bg-white active:bg-gray-100"
-              />
-          </button>
-        )}
-      </div>
-      <TextButton
-        className="rounded-t-none text-lg ml-4 px-8 shadow-lg bg-secondary hover:bg-secondary-hover active:bg-secondary-active"
-        onClick={handleClickOpenVrmFile}
       >
-        {t("Load VRM")}
-      </TextButton>
-    </BasicPage>
+        <div className="rounded-lg shadow-lg bg-white flex flex-wrap justify-center space-x-4 space-y-4 p-4">
+          { vrmList.map((vrm) =>
+            <button
+              key={vrm.url}
+              onClick={() => {
+                viewer.loadVrm(vrm.url);
+                setVrmSaveType(vrm.saveType);
+                updateConfig('vrm_save_type', vrm.saveType);
+                if (vrm.saveType == 'local') {
+                  updateConfig('vrm_hash', vrm.getHash());
+                  updateConfig('vrm_url', vrm.url);
+                  setVrmUrl(vrm.url);
+                  setVrmHash(vrm.getHash());
+                } else {
+                  updateConfig('vrm_hash', '');
+                  updateConfig('vrm_url', vrm.url);
+                  setVrmUrl(vrm.url);
+                }
+                setSettingsUpdated(true);
+              }}
+              className={clsx(
+                "mx-4 py-2 rounded-4 transition-all bg-gray-100 hover:bg-white active:bg-gray-100 rounded-xl",
+                ( vrm.saveType === 'web' && vrm.url === vrmUrl) || ( vrm.saveType === 'local' && vrm.getHash() === vrmHash) ? "opacity-100 shadow-md" : "opacity-60 hover:opacity-100"
+              )}
+              >
+                <img
+                  src={vrm.thumbUrl}
+                  alt={vrm.url}
+                  width="160"
+                  height="93"
+                  className="m-0 rounded mx-4 pt-0 pb-0 pl-0 pr-0 shadow-sm shadow-black hover:shadow-md hover:shadow-black rounded-4 transition-all bg-gray-100 hover:bg-white active:bg-gray-100"
+                />
+            </button>
+          )}
+        </div>
+        <TextButton
+          className="rounded-t-none text-lg ml-4 px-8 shadow-lg bg-secondary hover:bg-secondary-hover active:bg-secondary-active"
+          onClick={handleClickOpenVrmFile}
+        >
+          {t("Load VRM")}
+        </TextButton>
+      </BasicPage>
+
   );
 }
 

src/components/settings/common.tsx

@@ -91,6 +91,14 @@ export function thumbPrefix(path: string) {
   return a.join("/");
 }
 
+export function hashCode(str: string): string {
+  var hash = 0, i = 0, len = str.length;
+  while ( i < len ) {
+      hash  = ((hash << 5) - hash + str.charCodeAt(i++)) << 0;
+  }
+  return hash.toString();
+}
+
 export type Link = {
   key: string;
   label: string;

src/components/vrmDemo.tsx

@@ -1,14 +1,15 @@
 import { useContext, useCallback, useEffect, useState } from "react";
 import { ViewerContext } from "@/features/vrmViewer/viewerContext";
 import { buildUrl } from "@/utils/buildUrl";
-import { config } from "@/utils/config";
 
 export default function VrmDemo({
   vrmUrl,
+  onScreenShot,
   onLoaded,
   onError,
 }: {
   vrmUrl: string,
+  onScreenShot?: (blob: Blob | null) => void;
   onLoaded?: () => void,
   onError?: () => void,
 }) {
@@ -40,6 +41,8 @@ export default function VrmDemo({
           setLoadingError(false);
           onLoaded && onLoaded();
         })
+        .then(() => {if (onScreenShot) return new Promise(resolve => setTimeout(resolve, 300));})
+        .then(() => {if (onScreenShot) viewer.getScreenshotBlob(onScreenShot);})
         .catch((e) => {
           console.error("vrm loading error", e);
           setLoadingError(true);