Open LLM Vtuber

The Cubism Web Framework is designed for using models exported from the Live2D Cubism Editor within applications. It provides various functions to display and manipulate models.

Important Note: This framework does not include the Live2D Cubism Core for Web. You must download and include the Cubism Core library from the Cubism SDK for Web to load models.

For the best development experience with this React and TypeScript Electron application, it is recommended to use:

• VSCode
• ESLint
• Prettier

The framework is organized into several functional modules:

• effect: Handles automatic blinking, lip sync, and adding motion information as effects.
• id: Manages unique types for parameter names, part names, and Drawable names.
• math: Provides matrix and vector calculations for model manipulation and drawing.
• model: Core functions for generating, updating, and destroying models.
• motion: Handles motion playback and parameter blending.
• physics: Applies physics-based transformation manipulations.
• rendering: Implements graphics instructions for drawing the model.
• type: Contains framework-wide type definitions.
• utils: Utility functions including JSON parsing and logging.

Translations are organized by language in the src/renderer/src/locales/ directory. Keys use dot-notation namespaces to organize strings logically.

Directory Structure:

• src/renderer/src/i18n.ts: i18next configuration.
• src/renderer/src/locales/en/translation.json: English translations.
• src/renderer/src/locales/zh/translation.json: Chinese translations.

Key Naming Convention:

• common.save: General purpose keys (e.g., button text).
• settings.general.language: Hierarchical keys for specific UI sections.

The Cubism Web Framework used in this project is part of Live2D Cubism Components. Licensing depends on your entity's revenue and which components you are using:

1. Business Users: If your entity's annual gross revenue was more than 10,000,000 JPY in the most recent fiscal year, you must obtain a Cubism SDK Release License.
2. Component Licensing:
   • Live2D Cubism Components are governed by the Live2D Open Software License.
   • Live2D Cubism Core is governed by the Live2D Proprietary Software License.

The framework provides several npm tasks for development lifecycle management. These can be executed via the VS Code Task list or command line:

• npm: build: Compiles source files and outputs them to the dist directory. Configuration is managed via tsconfig.json.
• npm: test: Performs TypeScript type checking. Configuration is managed via tsconfig.json.
• npm: lint: Performs static analysis of TypeScript files in the src directory. Configuration is managed via .eslintrc.yml.
• npm: lint:fix: Performs static analysis and automatically fixes issues in the src directory. Configuration is managed via .eslintrc.yml.
• npm: clean: Deletes the dist directory.

The Live2D Cubism Core folder provides the essential library files required to develop applications using Live2D Cubism. Depending on your development environment and target deployment, you should use the following files:

• For TypeScript development: Use live2dcubismcore.d.ts alongside live2dcubismcore.js to provide type information.
• For JavaScript development: Use live2dcubismcore.js directly.
• For Production environments: Use the minified version live2dcubismcore.min.js to optimize performance and file size.
• For Debugging: Ensure live2dcubismcore.js.map is available to map the minified or compiled code back to the source via live2dcubismcore.d.ts and live2dcubismcore.js.

The project uses i18next for multi-language support. To use translations within a React component, import the useTranslation hook from react-i18next. This hook provides the t function for looking up translation keys and the i18n instance for managing language state (such as changing the current language).

import { useTranslation } from 'react-i18next';

function MyComponent() {
  // t: translation function
  // i18n: i18next instance for language management
  const { t, i18n } = useTranslation();
  
  return (
    <div>
      {/* Translate text using keys */}
      <h1>{t('common.settings')}</h1>
      
      {/* Change language manually */}
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
      <button onClick={() => i18n.changeLanguage('zh')}>中文</button>
    </div>
  );
}

The Live2D Cubism Core directory provides the necessary files to integrate Live2D Cubism functionality into web-based applications. Depending on your development environment and target deployment, you should use the following files:

• For TypeScript development: Use live2dcubismcore.js alongside live2dcubismcore.d.ts to ensure type safety and autocompletion.
• For JavaScript development: Use live2dcubismcore.js directly.
• For Production: Use the minified version live2dcubismcore.min.js to optimize performance and file size.
• For Debugging: Use live2dcubismcore.js.map to map errors back to the original source during development.

To set up the project dependencies, run npm install in the root directory of the repository.

$ npm install