adh-live2d-vue

WIP: Don't use in a production environment

Install

// current folder
npm install
npm run rollup
npm pack
// project folder
npm install [/path/to/adh-live2d-vue-0.1.2.tgz] --force

// vue 2
npm install @vue/composition-api --save

1. copy adh-live2d-vue/dist/assets/* to public/live2d/

<script type="text/javascript" src="<%= BASE_URL %>live2d/live2dcubismcore.min.js"></script>

Usage

<template>
  <div id="app">
	<Live2D ref="live2d" apiUrl="/live2d/api" appUrl="/ytpt/water" style="width: 300px"/>
    <button @click="chat">chat</button>
    <button @click="say">say</button>
    <button @click="talk">{{ text }}</button>
  </div>
</template>

<script>
import Live2D from "adh-live2d-vue";

export default {
  name: "App",
  components: {
    Live2D,
  },
  computed: {
    text() {
      return this.$refs.live2d.isRecording ? "stop" : "talk";
    },
  },
  methods: {
    chat() {
      this.$refs.live2d?.chatWithAI("你好");
    },
    say() {
      this.$refs.live2d?.say("你好");
    },
    talk() {
      this.$refs.live2d?.talkWithAI();
    },
  },
};
</script>

Props

| Property Name | Type | Default Value | Required | Description | |-------------------|-----------|---------------|----------|-----------------------------------| | character | String | "Chitose" | No | The name of the character. | | apiUrl | String | None | Yes | The URL of the API. | | appUrl | String | '/' | No | The URL of the application. | | mute | Boolean | false | No | Whether to mute. | | conversationId | String | None | No | The conversation ID. | | audioAutoStop | Boolean | true | No | Whether to automatically stop audio playback. |