Skip to content

Commit

Permalink
Merge pull request #88 from danyyil-pelekhatyi/charater-save-load-42
Browse files Browse the repository at this point in the history
Merged. Added Local Save for VRM on Character Model Settings.
  • Loading branch information
slowsynapse authored Apr 9, 2024
2 parents 48d7ab6 + d907eee commit 57e36b1
Show file tree
Hide file tree
Showing 19 changed files with 419 additions and 88 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ Test that everything works. If something doesn't, open the debug window or your
The following environment variables may be set to configure the application:

* `NEXT_PUBLIC_BG_URL` - The URL of the background image.
* `NEXT_PUBLIC_VRM_URL` - The URL of the VRM file.
* `NEXT_PUBLIC_VRM_HASH` - The url of local VRM file or hash of localStorage VRM file.
* `NEXT_PUBLIC_YOUTUBE_VIDEOID` - The ID of the YouTube video.
* `NEXT_PUBLIC_ANIMATION_URL` - The URL of the animation file.
* `NEXT_PUBLIC_CHATBOT_BACKEND` - The backend to use for chatbot. Valid values are `echo`, `openai`, `llamacpp`, `ollama`, and `koboldai`
Expand Down
51 changes: 37 additions & 14 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
"@tailwindcss/line-clamp": "^0.4.4",
"@xenova/transformers": "^2.7.0",
"clsx": "^2.0.0",
"dexie": "^3.2.7",
"dexie-react-hooks": "^1.1.7",
"filepond": "^4.30.4",
"filepond-plugin-file-validate-type": "^1.2.8",
"filepond-plugin-image-preview": "^4.6.11",
Expand Down
Binary file added public/vrm/thumb-placeholder.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 9 additions & 10 deletions src/components/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -109,7 +111,7 @@ 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 [youtubeVideoID, setYoutubeVideoID] = useState(config("youtube_videoid"));
const [animationUrl, setAnimationUrl] = useState(config("animation_url"));

Expand Down Expand Up @@ -140,6 +142,7 @@ export const Settings = ({
const handleChangeVrmFile = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;

if (!files) return;

const file = files[0];
Expand All @@ -148,9 +151,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 = "";
Expand All @@ -165,8 +166,6 @@ export const Settings = ({
const file = files[0];
if (!file) return;

const file_type = file.name.split(".").pop();

if (! file.type.match('image.*')) return;

let reader = new FileReader();
Expand Down Expand Up @@ -219,7 +218,7 @@ export const Settings = ({
visionOllamaUrl, visionOllamaModel,
visionSystemPrompt,
bgColor,
bgUrl, vrmUrl, youtubeVideoID, animationUrl,
bgUrl, vrmHash, youtubeVideoID, animationUrl,
sttBackend,
whisperOpenAIApiKey, whisperOpenAIModel, whisperOpenAIUrl,
whisperCppUrl,
Expand All @@ -228,7 +227,6 @@ export const Settings = ({
sttWakeWordEnabled, sttWakeWord, sttWakeWordIdleTime
]);


function handleMenuClick(link: Link) {
setPage(link.key)
setBreadcrumbs([...breadcrumbs, link]);
Expand Down Expand Up @@ -297,8 +295,9 @@ export const Settings = ({
case 'character_model':
return <CharacterModelPage
viewer={viewer}
vrmUrl={vrmUrl}
setVrmUrl={setVrmUrl}
vrmHash={vrmHash}
vrmList={vrmList}
setVrmHash={setVrmHash}
setSettingsUpdated={setSettingsUpdated}
handleClickOpenVrmFile={handleClickOpenVrmFile}
/>
Expand Down
81 changes: 42 additions & 39 deletions src/components/settings/CharacterModelPage.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,66 @@
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,
vrmUrl,
setVrmUrl,
vrmHash,
vrmList,
setVrmHash,
setSettingsUpdated,
handleClickOpenVrmFile,
}: {
viewer: any; // TODO
vrmUrl: string;
setVrmUrl: (url: string) => void;
vrmHash: string;
vrmList: VrmData[],
setVrmHash: (hash: string) => void;
setSettingsUpdated: (updated: boolean) => void;
handleClickOpenVrmFile: () => void;
}) {
const { t } = useTranslation();

return (
<BasicPage

<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);
updateConfig("vrm_hash", vrm.getHash());
setVrmHash(vrm.getHash());
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.url === 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>

);
}

8 changes: 8 additions & 0 deletions src/components/settings/common.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion src/components/vrmDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default function VrmDemo({
}
}))
.then(() => {
console.log("vrm loaded");
setIsLoading(false);
setLoadingError(false);
onLoaded && onLoaded();
Expand Down
Loading

0 comments on commit 57e36b1

Please sign in to comment.