Upload vrm file

.gitignore

@@ -41,3 +41,8 @@ working/*
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# IDEs
+.idea/
+.vscode/
+

i18next-parser.config.mjs

@@ -2,7 +2,7 @@
 // run i18next
 export default {
   defaultNamespace: 'common',
-  locales: ['en', 'zh', 'de', 'ka'],
+  locales: ['en', 'zh', 'de', 'ka', 'ru'],
   output: 'src/i18n/locales/$LOCALE/$NAMESPACE.json',
   input: ["src/**/*.{ts,tsx}"],
   keepRemoved: true,

scripts/console-indexeddb-vrm-helper.js

@@ -0,0 +1,120 @@
+/**
+ * Вставка в консоль браузера (на странице приложения).
+ * База: AmicaVrmDatabase, store: vrms.
+ * Запись: { hash, saveType, vrmData, vrmUrl, thumbData }.
+ */
+
+// --------------- 1) Проверить, что в базе есть ---------------
+function listVrms() {
+  return new Promise((resolve, reject) => {
+    const r = indexedDB.open('AmicaVrmDatabase');
+    r.onsuccess = () => {
+      const db = r.result;
+      if (!db.objectStoreNames.contains('vrms')) {
+        db.close();
+        return resolve([]);
+      }
+      const t = db.transaction('vrms', 'readonly');
+      const s = t.objectStore('vrms');
+      const req = s.getAll();
+      req.onsuccess = () => { db.close(); resolve(req.result || []); };
+      req.onerror = () => { db.close(); reject(req.error); };
+    };
+    r.onerror = () => reject(r.error);
+  });
+}
+// В консоли: listVrms().then(console.log)
+
+// --------------- 2) Добавить одну тестовую запись (минимальная, без реального VRM) ---------------
+function addTestRecord() {
+  const record = {
+    hash: 'test-' + Date.now(),
+    saveType: 'local',
+    vrmData: 'data:application/octet-stream;base64,', // пустой base64
+    vrmUrl: '',
+    thumbData: ''
+  };
+  return new Promise((resolve, reject) => {
+    const r = indexedDB.open('AmicaVrmDatabase');
+    r.onsuccess = () => {
+      const db = r.result;
+      const t = db.transaction('vrms', 'readwrite');
+      const s = t.objectStore('vrms');
+      const req = s.put(record);
+      req.onsuccess = () => { db.close(); resolve(record.hash); };
+      req.onerror = () => { db.close(); reject(req.error); };
+    };
+    r.onerror = () => reject(r.error);
+  });
+}
+// В консоли: addTestRecord().then(h => console.log('Добавлен hash:', h))
+// Затем обнови страницу (F5) — в списке моделей может появиться карточка (по клику будет ошибка загрузки — это нормально для теста).
+
+// --------------- 3) Добавить реальный VRM из выбранного файла ---------------
+function addVrmFromFile(file) {
+  if (!file || !file.name.toLowerCase().endsWith('.vrm')) {
+    return Promise.reject(new Error('Нужен файл .vrm'));
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const vrmData = reader.result;
+      if (typeof vrmData !== 'string') {
+        reject(new Error('Ожидалась строка data URL'));
+        return;
+      }
+      const len = vrmData.length;
+      const S = 100000;
+      let h = 0;
+      for (let i = 0; i < Math.min(S, len); i++) h = ((h << 5) - h + vrmData.charCodeAt(i)) << 0;
+      for (let i = Math.max(0, len - S); i < len; i++) h = ((h << 5) - h + vrmData.charCodeAt(i)) << 0;
+      h = ((h << 5) - h + len) << 0;
+      const hash = String(h);
+      const record = {
+        hash,
+        saveType: 'local',
+        vrmData,
+        vrmUrl: '',
+        thumbData: ''
+      };
+      const r = indexedDB.open('AmicaVrmDatabase');
+      r.onsuccess = () => {
+        const db = r.result;
+        const t = db.transaction('vrms', 'readwrite');
+        const s = t.objectStore('vrms');
+        const req = s.put(record);
+        req.onsuccess = () => { db.close(); resolve({ hash, size: vrmData.length }); };
+        req.onerror = () => { db.close(); reject(req.error); };
+      };
+      r.onerror = () => reject(r.error);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+// Создать input и по выбору файла добавить в IndexedDB
+function addVrmViaFilePicker() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.vrm,.VRM';
+  input.onchange = () => {
+    const file = input.files && input.files[0];
+    if (!file) return;
+    addVrmFromFile(file)
+      .then((r) => console.log('[VRM] Запись в IndexedDB:', r))
+      .catch((e) => console.error('[VRM] Ошибка:', e));
+  };
+  input.click();
+}
+
+// Экспорт в глобал, чтобы в консоли вызывать по имени
+if (typeof window !== 'undefined') {
+  window.__vrmIndexedDB = {
+    list: listVrms,
+    addTest: addTestRecord,
+    addFromFile: addVrmFromFile,
+    pickAndAdd: addVrmViaFilePicker
+  };
+  console.log('VRM IndexedDB helper: __vrmIndexedDB.list() | .addTest() | .pickAndAdd()');
+}

src/components/settings.tsx

@@ -20,6 +20,8 @@ import { useKeyboardShortcut } from "@/hooks/useKeyboardShortcut";
 import { TextButton } from "@/components/textButton";
 import { ViewerContext } from "@/features/vrmViewer/viewerContext";
 import { config, updateConfig } from "@/utils/config";
+import { hashCodeLarge } from "./settings/common";
+import { vrmDataProvider } from "@/features/vrmStore/vrmDataProvider";
 
 
 import { Link } from "./settings/common";
@@ -81,7 +83,7 @@ export const Settings = ({
   onClickClose: () => void;
 }) => {
   const { viewer } = useContext(ViewerContext);
-  const { vrmList, vrmListAddFile } = useVrmStoreContext();
+  const { vrmList, vrmListAddFile, addVrmFromStored } = useVrmStoreContext();
   useKeyboardShortcut("Escape", onClickClose);
 
   const [page, setPage] = useState('main_menu');
@@ -187,9 +189,62 @@ export const Settings = ({
   const [useWebGPU, setUseWebGPU] = useState<boolean>(config("use_webgpu") === 'true' ? true : false);
 
   const vrmFileInputRef = useRef<HTMLInputElement>(null);
-  const handleClickOpenVrmFile = useCallback(() => {
-    vrmFileInputRef.current?.click();
-  }, []);
+
+  const processVrmFile = useCallback(
+    (file: File) => {
+      if (!file?.name.toLowerCase().endsWith(".vrm")) {
+        console.warn("[VRM] Неверное расширение (ожидается .vrm)");
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        const dataUrl = reader.result;
+        if (typeof dataUrl !== "string") return;
+        const hash = hashCodeLarge(dataUrl);
+        const exists = vrmList.some((v) => v.getHash() === hash);
+        if (exists) {
+          viewer.loadVrm(dataUrl, () => {}).catch((e) => console.error("[VRM]", e));
+          updateConfig("vrm_save_type", "local");
+          updateConfig("vrm_hash", hash);
+          updateConfig("vrm_url", dataUrl);
+          return;
+        }
+        vrmDataProvider
+          .addItem(hash, "local", dataUrl)
+          .then(() => {
+            updateConfig("vrm_save_type", "local");
+            updateConfig("vrm_hash", hash);
+            updateConfig("vrm_url", dataUrl);
+            addVrmFromStored(hash, dataUrl);
+            return viewer.loadVrm(dataUrl, () => {});
+          })
+          .then(() => {
+            viewer.getScreenshotBlob((thumbBlob: Blob | null) => {
+              if (thumbBlob) {
+                import("@/utils/blobDataUtils").then(({ BlobToBase64 }) => {
+                  BlobToBase64(thumbBlob).then((thumbData) => {
+                    vrmDataProvider.updateItemThumb(hash, thumbData);
+                  });
+                });
+              }
+            });
+          })
+          .catch((e) => console.error("[VRM] Ошибка загрузки VRM:", e));
+      };
+      reader.onerror = () => console.error("[VRM] FileReader ошибка:", reader.error);
+      reader.readAsDataURL(file);
+    },
+    [viewer, vrmList, addVrmFromStored]
+  );
+
+  const handleChangeVrmFile = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) processVrmFile(file);
+      event.target.value = "";
+    },
+    [processVrmFile]
+  );
 
   const bgImgFileInputRef = useRef<HTMLInputElement>(null);
   const handleClickOpenBgImgFile = useCallback(() => {
@@ -201,25 +256,6 @@ export const Settings = ({
   const mainMenuRef = useRef<HTMLDivElement>(null);
   const notificationsRef = useRef<HTMLDivElement>(null);
 
-  const handleChangeVrmFile = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const files = event.target.files;
-      if (!files) return;
-
-      const file = files[0];
-      if (!file) return;
-
-      const file_type = file.name.split(".").pop();
-
-      if (file_type === "vrm") {
-        vrmListAddFile(file, viewer);
-      }
-
-      event.target.value = "";
-    },
-    [viewer]
-  );
-
   function handleChangeBgImgFile(event: React.ChangeEvent<HTMLInputElement>) {
     const files = event.target.files;
     if (!files) return;
@@ -438,7 +474,7 @@ export const Settings = ({
         setVrmUrl={setVrmUrl}
         setVrmSaveType={setVrmSaveType}
         setSettingsUpdated={setSettingsUpdated}
-        handleClickOpenVrmFile={handleClickOpenVrmFile}
+        onPickVrmFile={processVrmFile}
         />
 
     case 'character_animation':
@@ -897,15 +933,16 @@ export const Settings = ({
       </div>
 
       <input
+        id="vrm-file-input"
         type="file"
-        className="hidden"
-        accept=".vrm"
+        className="sr-only"
+        accept=".vrm,.VRM,model/gltf-binary"
         ref={vrmFileInputRef}
         onChange={handleChangeVrmFile}
       />
       <input
         type="file"
-        className="hidden"
+        className="sr-only"
         accept=".jpg,.jpeg,.png,.gif,.webp"
         ref={bgImgFileInputRef}
         onChange={handleChangeBgImgFile}

src/components/settings/CharacterModelPage.tsx

@@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next';
 import { clsx } from "clsx";
 import { BasicPage } from "./common";
 import { updateConfig } from "@/utils/config";
-import { TextButton } from "@/components/textButton";
 import { VrmData } from '@/features/vrmStore/vrmData';
 import { Viewer } from '@/features/vrmViewer/viewer';
 
@@ -16,21 +15,32 @@ export function CharacterModelPage({
   setVrmUrl,
   setVrmSaveType,
   setSettingsUpdated,
-  handleClickOpenVrmFile,
+  onPickVrmFile,
 }: {
   viewer: Viewer;
   vrmHash: string;
   vrmUrl: string;
   vrmSaveType: string;
-  vrmList: VrmData[],
+  vrmList: VrmData[];
   setVrmHash: (hash: string) => void;
   setVrmUrl: (url: string) => void;
   setVrmSaveType: (saveType: string) => void;
   setSettingsUpdated: (updated: boolean) => void;
-  handleClickOpenVrmFile: () => void;
+  onPickVrmFile: (file: File) => void;
 }) {
   const { t } = useTranslation();
 
+  const handleLoadVrmClick = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".vrm,.VRM";
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) onPickVrmFile(file);
+    };
+    input.click();
+  };
+
   return (
     <BasicPage
       title={t("Character Model")}
@@ -73,14 +83,14 @@ export function CharacterModelPage({
             </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}
+        <button
+          type="button"
+          onClick={handleLoadVrmClick}
+          className="px-4 py-2 text-white font-bold rounded-lg rounded-t-none text-lg ml-4 px-8 shadow-lg bg-secondary hover:bg-secondary-hover active:bg-secondary-active cursor-pointer inline-block"
         >
           {t("Load VRM")}
-        </TextButton>
+        </button>
       </BasicPage>
-
   );
 }
 

src/components/settings/common.tsx

@@ -88,6 +88,7 @@ export function FormRow({label, children}: {
 }
 
 export function basename(path: string) {
+  if (!path || typeof path !== 'string') return "";
   const a = path.split("/");
   return a[a.length - 1];
 }
@@ -106,6 +107,18 @@ export function hashCode(str: string): string {
   return hash.toString();
 }
 
+/** Хеш для больших строк (VRM base64): берём начало, конец и длину, чтобы не блокировать UI. */
+const SAMPLE_SIZE = 100000;
+export function hashCodeLarge(str: string): string {
+  const len = str.length;
+  if (len <= SAMPLE_SIZE * 2) return hashCode(str);
+  let h = 0;
+  for (let i = 0; i < SAMPLE_SIZE; i++) h = ((h << 5) - h + str.charCodeAt(i)) << 0;
+  for (let i = len - SAMPLE_SIZE; i < len; i++) h = ((h << 5) - h + str.charCodeAt(i)) << 0;
+  h = ((h << 5) - h + len) << 0;
+  return h.toString();
+}
+
 export type Link = {
   key: string;
   label: string;

src/features/vrmStore/vrmDataProvider.ts

@@ -14,8 +14,10 @@ export class VrmDataProvider {
         this.db.close();
     }
 
-    public addItem(hash: string, saveType: 'local' | 'web', vrmData: string = "", vrmUrl: string = "", thumbData: string = ""): void {
-        this.db.vrms.put(new VrmDbModel(hash, saveType, vrmData, vrmUrl, thumbData));
+    public addItem(hash: string, saveType: 'local' | 'web', vrmData: string = "", vrmUrl: string = "", thumbData: string = ""): Promise<void> {
+        return this.db.vrms.put(new VrmDbModel(hash, saveType, vrmData, vrmUrl, thumbData))
+            .then(() => { console.log("[VRM] IndexedDB: запись vrms.put успешна, hash =", hash); })
+            .catch((err) => { console.error("[VRM] IndexedDB: ошибка vrms.put", err); throw err; });
     }
 
     public async getItems(): Promise<VrmDbModel[]> {