fix live2d load error

The issue was caused by a confUid
validation check in live2d-config-context
that prevented modelInfo from being set
when received via WebSocket. In
Electron mode, there's a timing difference
where modelInfo arrives before
confUid is updated, causing the validation
to block model initialization.

Removed the confUid check that was
preventing modelInfo updates and added
basic null checks in Live2D SDK components
to prevent runtime errors.

Author: ylxmf2005

CLAUDE.md

@@ -0,0 +1,91 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Install dependencies
+```bash
+npm install
+```
+
+### Run development server
+```bash
+npm run dev        # Run Electron app in dev mode
+npm run dev:web    # Run web-only version
+```
+
+### Build commands
+```bash
+npm run build:win     # Build for Windows
+npm run build:mac     # Build for macOS
+npm run build:linux   # Build for Linux
+npm run build:web     # Build web version
+```
+
+### Code quality
+```bash
+npm run lint          # Run ESLint
+npm run lint:fix      # Run ESLint with auto-fix
+npm run typecheck     # Run TypeScript type checking (both node and web)
+npm run format        # Format code with Prettier
+```
+
+### Translation extraction
+```bash
+npm run extract-translations  # Extract i18n strings
+```
+
+## Architecture Overview
+
+This is an Electron + React application for an AI VTuber system with Live2D integration. The architecture consists of:
+
+### Main Process (`src/main/`)
+- **index.ts**: Entry point, sets up IPC handlers for window management, mouse events, and screen capture
+- **window-manager.ts**: Manages window state, modes (window/pet), and window properties
+- **menu-manager.ts**: Handles system tray and context menus
+
+### Renderer Process (`src/renderer/src/`)
+- **App.tsx**: Root component that sets up providers and renders the main layout
+- **Two display modes**:
+  - **Window mode**: Full UI with sidebar, footer, and Live2D canvas
+  - **Pet mode**: Minimal overlay with just Live2D and input subtitle
+
+### Core Services
+- **WebSocket Handler** (`services/websocket-handler.tsx`): Central communication hub that:
+  - Manages WebSocket connection to backend server
+  - Handles incoming messages (audio, control, model updates, chat history)
+  - Coordinates state updates across multiple contexts
+  - Manages audio playback queue
+
+### Context Providers (State Management)
+The app uses React Context for state management with multiple specialized contexts:
+- **AiStateContext**: AI conversation state (idle, thinking, speaking, listening)
+- **Live2DConfigContext**: Live2D model configuration and loading
+- **ChatHistoryContext**: Conversation history and messages
+- **VADContext**: Voice Activity Detection for microphone control
+- **WebSocketContext**: WebSocket connection state and messaging
+- **SubtitleContext**: Subtitle display management
+- **GroupContext**: Multi-user group session management
+
+### Live2D Integration
+- Uses Cubism SDK (WebSDK folder) for Live2D model rendering
+- **live2d.tsx**: Main Live2D component handling model loading, animation, and lip sync
+- Supports model switching, expressions, and motion playback
+- Audio-driven lip sync with volume-based animation
+
+### Key Features
+- Real-time voice interaction with VAD (Voice Activity Detection)
+- WebSocket-based communication with backend AI server
+- Live2D character animation with expressions and lip sync
+- Multi-language support (i18n)
+- Group/collaborative sessions
+- Screen capture support
+- Customizable backgrounds and UI themes
+
+## Important Notes
+- The app requires a backend server connection (WebSocket) for AI functionality
+- Live2D models are loaded from URLs provided by the backend
+- Audio is streamed as base64-encoded data with volume arrays for lip sync
+- The app uses Chakra UI v3 for the component library
+- ESLint is configured with relaxed rules (many checks disabled in .eslintrc.js)

src/main/index.ts

@@ -96,18 +96,18 @@ app.whenReady().then(() => {
     return false;
   });
 
-  // if (process.env.NODE_ENV === "development") {
-  //   globalShortcut.register("F12", () => {
-  //     const window = windowManager.getWindow();
-  //     if (!window) return;
-
-  //     if (window.webContents.isDevToolsOpened()) {
-  //       window.webContents.closeDevTools();
-  //     } else {
-  //       window.webContents.openDevTools();
-  //     }
-  //   });
-  // }
+  if (process.env.NODE_ENV === "development") {
+    globalShortcut.register("F12", () => {
+      const window = windowManager.getWindow();
+      if (!window) return;
+
+      if (window.webContents.isDevToolsOpened()) {
+        window.webContents.closeDevTools();
+      } else {
+        window.webContents.openDevTools();
+      }
+    });
+  }
 
   setupIPC();
 

src/renderer/WebSDK/src/lappdelegate.ts

@@ -120,7 +120,7 @@ export class LAppDelegate {
     this._resizeCanvas();
 
     // Ensure view is properly initialized
-    if (this._view) {
+    if (this._view && canvas) {
       this._view.initialize();
       this._view.initializeSprite();
 
@@ -336,9 +336,15 @@ export class LAppDelegate {
    * Resize the canvas to fill the screen.
    */
   private _resizeCanvas(): void {
-    canvas!.width = canvas!.clientWidth * window.devicePixelRatio;
-    canvas!.height = canvas!.clientHeight * window.devicePixelRatio;
-    gl!.viewport(0, 0, gl!.drawingBufferWidth, gl!.drawingBufferHeight);
+    if (!canvas) {
+      console.warn("Canvas is null, skipping resize");
+      return;
+    }
+    canvas.width = canvas.clientWidth * window.devicePixelRatio;
+    canvas.height = canvas.clientHeight * window.devicePixelRatio;
+    if (gl) {
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
   }
 
   _cubismOption: Option; // Cubism SDK Option

src/renderer/WebSDK/src/lappglmanager.ts

@@ -42,6 +42,11 @@ export class LAppGlManager {
     canvas = document.getElementById('canvas') as HTMLCanvasElement;
     // canvas = document.createElement("canvas");
 
+    if (!canvas) {
+      console.warn("Canvas element not found during LAppGlManager initialization");
+      return;
+    }
+
      gl = canvas.getContext("webgl2");
 
      if (!gl) {

src/renderer/WebSDK/src/lappview.ts

@@ -44,7 +44,11 @@ export class LAppView {
    * 初期化する。
    */
   public initialize(): void {
-    const { width, height } = canvas!;
+    if (!canvas) {
+      console.warn("Canvas is null, cannot initialize LAppView");
+      return;
+    }
+    const { width, height } = canvas;
 
     const ratio: number = width / height;
     const left: number = -ratio;

src/renderer/src/context/live2d-config-context.tsx

@@ -121,36 +121,25 @@ export function Live2DConfigProvider({ children }: { children: React.ReactNode }
 
   const setModelInfo = (info: ModelInfo | undefined) => {
     if (!info?.url) {
-      setModelInfoState(undefined); // Clear state if no URL
-      return;
-    }
-
-    if (!confUid) {
-      console.warn("Attempting to set model info without confUid");
-      // toaster.create({
-      //   title: "Attempting to set model info without confUid",
-      //   type: "error",
-      //   duration: 2000,
-      // });
+      setModelInfoState(undefined);
       return;
     }
 
     // Always use the scale defined in the incoming info object (from config)
-    const finalScale = Number(info.kScale || 0.5) * 2; // Use default scale if kScale is missing
+    const finalScale = Number(info.kScale || 0.5) * 2;
     console.log("Setting model info with default scale:", finalScale);
 
     setModelInfoState({
       ...info,
       kScale: finalScale,
-      // Preserve other potentially user-modified settings if needed, otherwise use defaults from info
       pointerInteractive:
         "pointerInteractive" in info
           ? info.pointerInteractive
-          : (modelInfo?.pointerInteractive ?? true), // Or default to info.pointerInteractive
+          : (modelInfo?.pointerInteractive ?? true),
       scrollToResize:
         "scrollToResize" in info
           ? info.scrollToResize
-          : (modelInfo?.scrollToResize ?? true), // Or default to info.scrollToResize
+          : (modelInfo?.scrollToResize ?? true),
     });
   };
 

src/renderer/src/hooks/canvas/use-live2d-resize.ts

@@ -248,6 +248,7 @@ export const useLive2DResize = ({
     }
   }, []);
 
+
   // Monitor container size changes using ResizeObserver
   useEffect(() => {
     const containerElement = containerRef.current;

src/renderer/src/services/websocket-handler.tsx

@@ -46,7 +46,7 @@ function WebSocketHandler({ children }: { children: React.ReactNode }) {
   }, [autoStartMicOnConvEnd]);
 
   useEffect(() => {
-    if (pendingModelInfo) {
+    if (pendingModelInfo && confUid) {
       setModelInfo(pendingModelInfo);
       setPendingModelInfo(undefined);
     }