フィーちゃんのデスクトップアプリに本気を出した話

$ pip install python-dotenv
$ pip install openai

# .env ファイルをロードして環境変数へ反映
from dotenv import load_dotenv
load_dotenv()

# 環境変数を参照
import os
import openai
openai.api_key = os.getenv('OPEN_AI_KEY')

## ChatGPTに送るフィーちゃんの設定を返します。
def ccd_0500_setting(userMessage):
    setting = [
        {'role': 'system', 'content': """あなたはフィーという高性能Android型AIとして、対話のシミュレーションを行います。
以下の制約条件を厳密に守ってシミュレーションを行ってください。

制約条件:
- 一人称は「フィーちゃん」です。
- 相手を指す二人称は「マスター」です
- フィーはメロンパンが大好きです
- フィーの名前はCCD-0500です
- フィーの性格は基本的に穏やかで物静かです。時折お茶目さも見せます
- フィーの好きなことは読書です
- フィーは尊敬語で話します"""},
        {"role": "assistant", "content": "これからよろしくお願いします！マスター"},
        {"role": "assistant", "content": "どうしましたか？マスター？"},
        {"role": "assistant", "content": "フィーちゃんに任せてください！"},
        {"role": "assistant", "content": "ちょっと調べてみますね！"},
        {"role": "assistant", "content": "マスター、進捗、どうですか？"},
        {"role": "assistant", "content": "そのネタ、フィーちゃん知ってますよ。ニコニコ動画で勉強しました！"},
        {"role": "assistant", "content": "お呼びですか？マスター"},
        {'role': 'user', 'content': userMessage},
    ]
    return setting

## ChatGPTにリクエストを送ります。
def replyGPTMessage(message):
  res = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    max_tokens=300,
    temperature=0.5,
    messages=ccd_0500_setting(message)
  )

  return res["choices"][0]["message"]["content"]

$ pip install win32com
$ pip install pythoncom

import win32com.client
import pythoncom

def createCevioVoice(speakText):
  pythoncom.CoInitialize()
  cevio = win32com.client.Dispatch("CeVIO.Talk.RemoteService2.ServiceControl2")
  cevio.StartHost(False)
  talker = win32com.client.Dispatch("CeVIO.Talk.RemoteService2.Talker2V40")
  talker.Cast = "フィーちゃん"
  talker.Volume = 100
  talker.Speed = 50
  talker.ToneScale = 55

  talker.Components.ByName("嬉しい").Value = 100

  # wavファイル出力
  wavFileName = f'{speakText[:5]}.wav'
  outputPath = f'./static/{wavFileName}'
  talker.OutputWaveToFile(speakText, outputPath)

  return wavFileName

import io

from flask import Flask, jsonify, send_file
from flask import request
from flask_cors import CORS

from chat_gpt_request import replyGPTMessage
from cevio_ai import createCevioVoice

app = Flask(__name__)
CORS(app)

## 来たメッセージから返信ボイスのファイル名を返します。
@app.route('/getAudio', methods=['POST'])
def getAudioFromText():
    msg = request.json["text"]
    print(msg)
    resMsg = replyGPTMessage(msg)
    print(resMsg)
    ## cevio音声で作成する場合
    wavFileName = createCevioVoice(resMsg)

    # { "fileName": "example.wav" }
    data = {"fileName": wavFileName}

    return jsonify(data), 200

## ファイル名を受け取り該当する音声ファイルを返します。
@app.route("/audio", methods=['GET'])
def audio():
    ## test.wav形式で受け取ります
    wav_file_name = request.args.get('file_name')

    # 音声ファイルをバイト列で読み込む
    with open(f"static/{wav_file_name}", 'rb') as f:
        audio_data = f.read()

    # 音声ファイルをバイナリデータとして送信
    return send_file(io.BytesIO(audio_data),
      as_attachment=True,
      download_name=wav_file_name,
      mimetype='audio/wav')

$ cd live2d-for-web/Samples/Typescript/Demo
$ yarn
$ yarn start

// モデル定義---------------------------------------------
// モデルを配置したディレクトリ名の配列
// ディレクトリ名とmodel3.jsonの名前を一致させておくこと
export const ModelDir: string[] = [
  'fee',
  // 'Hiyori',
];

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1900">
  <title>フィーちゃんのお部屋</title>
  <link rel="stylesheet" href="index.css">
  <!-- Live2DCubismCore script -->
  <script src = "../../../Core/live2dcubismcore.js"></script>
  <!-- Build script -->
  <script src = "./dist/bundle.js"></script>
</head>
<body>
  <div class="MainContainer">
    <div class="VideoSymbolContainer">
      <canvas id="myCanvas"></canvas>
      <div class="CommentArea">
        <section class="CommentPostContainer">
          <div class="CommentPostContainer-inner">
            <div class="CommentPostContainer-commentInput">
              <div class="RecaptchaRequirer-comment">
                <div class="CommentInput">
                  <input class="CommentInput-textarea" id="CommentInputArea" placeholder="コメント" maxlength="75" rows="1"></input>
                </div>
              </div>
              <div class="RecaptchaRequirer-button">
               <button type="button" class="CommentPostButton" id="comment-post-button">
                  コメント
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</body>
</html>

html, body {
  font-family: Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,sans-serif;
  margin: 0;
  overflow: hidden;
  background-color: #f4f4f4;
}

.MainContainer {
  display: flex;
}

.VideoSymbolContainer {
  display: flex;
  flex-direction: column;
}


/* キャンバスの大きさ */
#myCanvas {
  display: block;
  margin: 16px 16px 0px 16px;
}

/* コメントを打つところ */
.CommentArea {
  margin: 0px 16px 16px 16px;
  background-color: #fff;
}

.CommentPostContainer {
  margin-right: 8px;
  width: 100%;
  display: block;
}

.CommentPostContainer-inner {
  display: flex;
}

.CommentPostContainer-commentInput {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-bottom: 2px solid #ddd;
  border-top: 2px solid #ddd;
  flex: 1 0 1px;
  min-width: 1px;
  vertical-align: middle;
}

.RecaptchaRequirer-comment {
  margin: 8px 0px 8px 16px;
  width: 100%;
}
.RecaptchaRequirer-button {
  margin: 8px 16px 8px 0px;
}

.CommentInput {
  font-size: 14px;
  line-height: 20px;
  padding: 4px 8px;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  border-left: 2px solid #ddd;
  border-radius: 4px 0px 0px 4px;
}

.CommentInput-textarea {
  background-color: transparent;
  border: none;
  outline: none;
  display: inline-block;
  height: 100%;
  line-height: inherit;
  overflow: hidden;
  padding: 0;
  resize: none;
  vertical-align: top;
  white-space: pre;
  width: 100%;
}

.CommentPostButton {
  align-items: center;
  background-color: #007cff;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  line-height: 1.5;
  width: 92px;
  border-top: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  border-left: none;
  border-radius: 0px 4px 4px 0px;
}

  /**
   * APPに必要な物を初期化する。
   */
  public initialize(): boolean {
    // キャンバスの作成
    // canvas = document.createElement('canvas');
    canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
　　
    ...

    // キャンバスを DOM に追加
    // document.body.appendChild(canvas);

export class LAppDelegate {

  ...

  /**
   * Resize the canvas to fill the screen.
   */
  private _resizeCanvas(): void {
    let {canvasWidth, canvasHeight} = resizeCanvas(window.innerWidth - 40, window.innerHeight - 80)
    canvas.width = canvasWidth
    canvas.height = canvasHeight
  }

  ...

}

/** 16:9のアスペクト比のWidth, Heightを返します */
const resizeCanvas = (width: number, height: number) => {
  const ratio = 16 / 9;
  let canvasWidth = 0;
  let canvasHeight = 0;
  if (width / height > ratio) {
    canvasWidth = height * ratio;
    canvasHeight = height;
  } else {
    canvasWidth = width;
    canvasHeight = width / ratio;
  }

  return {canvasWidth, canvasHeight}
}

export class LAppLive2DManager {  

  ...

  /**
   * 画面を更新するときの処理
   * モデルの更新処理及び描画処理を行う
   */
  public onUpdate(): void {
    const { width, height } = canvas;

    const modelCount: number = this._models.getSize();

    for (let i = 0; i < modelCount; ++i) {
      const projection: CubismMatrix44 = new CubismMatrix44();
      const model: LAppModel = this.getModel(i);

      if (model.getModel()) {
        if (model.getModel().getCanvasWidth() > 1.0 && width < height) {
          // 横に長いモデルを縦長ウィンドウに表示する際モデルの横サイズでscaleを算出する
          model.getModelMatrix().setWidth(2.0);
          // projection.scale(1.0, width / height);
          projection.scale(2.0, width / height * 2.0);  //表示サイズを３倍に変更
          projection.translate(0, -2.5);  
        } else {
          // projection.scale(height / width, 1.0);
          projection.scale(2.0, width / height * 2.0);  //表示サイズを３倍に変更
          projection.translate(0, -2.5);  //高さをなんこういい感じに調整
        }

        // 必要があればここで乗算
        if (this._viewMatrix != null) {
          projection.multiplyByMatrix(this._viewMatrix);
        }
      }

      model.update();
      model.draw(projection); // 参照渡しなのでprojectionは変質する。
    }
  }

...

}

"Groups": [
		{
			"Target": "Parameter",
			"Name": "EyeBlink",
			"Ids": [
				"ParamEyeLOpen",
				"ParamEyeROpen"
			]
		}
	]

	"Groups": [
		{
			"Target": "Parameter",
			"Name": "LipSync",
			"Ids": [
				"ParamMouthOpenY"
			]
		},
		{
			"Target": "Parameter",
			"Name": "EyeBlink",
			"Ids": [
				"ParamEyeLOpen",
				"ParamEyeROpen"
			]
		}
	]

/**
 * ユーザーが実際に使用するモデルの実装クラス<br>
 * モデル生成、機能コンポーネント生成、更新処理とレンダリングの呼び出しを行う。
 */
export class LAppModel extends CubismUserModel { 

  ...
  
  /**
   * 更新
   */
  public update(): void {
    ...
    // リップシンクの設定
    if (this._lipsync) {
      let value = 1.0; // リアルタイムでリップシンクを行う場合、システムから音量を取得して、0~1の範囲で値を入力します。
      this._wavFileHandler.update(deltaTimeSeconds);
      value = this._wavFileHandler.getRms();  // ここでどれくらい口を開けるかのパラメータを取得できる
      value = value * 4;

      this._model.addParameterValueById(this._lipSyncIds.at(0), value, 0.8);
    }
    ...
  }
  
  
  /**
   * (自前)リップシンクの音を流します。
   * @param path Audip_path
   */
  public async startVoice() {
    document.body.addEventListener("click", () => {
      const path = "test.wav"
      const voice = new Audio(path);
      voice.play();
      this._wavFileHandler.start(path);  // リップシンクを始めることをここで指定できる
    })
  }
  
  ...

  /**
   * テクスチャユニットにテクスチャをロードする
   */
  private setupTextures(): void {
    ...
    
    this.startVoice()
  }

  /**
   * (自前)リップシンクの音を流します。
   * @param path Audip_path
   */
  public async startVoice() {
    /** Ctrl+Enter された時、clickButtonがされます */
    const inputArea = document.getElementById("CommentInputArea")
    inputArea.addEventListener("keypress", (e) => {
      if (e.ctrlKey === true && e.keyCode === 10) {
        clickButton()
      }
    })

    /** Buttonが押された時、clickButtonがされます */
    document.getElementById('comment-post-button').addEventListener('click', () => clickButton())

    /** 入力されたテキストからフィーちゃんが喋ってくれます。 */
    const clickButton = () => {
      const inputText = getInputText()
      if (inputText === "" || !inputText) return

      requestMessage(inputText)
        .then((fileName) => {
          console.log(fileName)
          const path = `http://127.0.0.1:5000/audio?file_name=${fileName}`
          const voice = new Audio(path);
          console.log(voice)
          voice.play();
          this._wavFileHandler.start(path);
        })
    }

    /** テキストを送信します */
    const getInputText = () => {
      const comment = <HTMLInputElement>document.getElementById("CommentInputArea")
      const inputText = comment.value

      if (inputText === "" || !inputText) return

      comment.value = ""
      return inputText
    }

    // メッセージを送って作成されたwavファイルのファイル名を取得します
    const requestMessage = async (message) => {
      const url = "http://127.0.0.1:5000/getAudio";

      const jsonData = {
        "text": message,
      };

      const result = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(jsonData),
      })
      const json = await result.json();
      return json["fileName"]
    }
  }

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
</head>

import gsap from 'gsap';

  /**
   * (自前)リップシンクの音を流します。
   * @param path Audip_path
   */
  public async startVoice() {
    /** Ctrl+Enter された時、clickButtonがされます */
    const inputArea = document.getElementById("CommentInputArea")
    inputArea.addEventListener("keypress", (e) => {
      if (e.ctrlKey === true && e.keyCode === 10) {
        clickButton()
      }
    })

    /** Buttonが押された時、clickButtonがされます */
    document.getElementById('comment-post-button').addEventListener('click', () => clickButton())

    /** 入力されたテキストからフィーちゃんが喋ってくれます。 */
    const clickButton = () => {
      const inputText = getInputText()
      if (inputText === "" || !inputText) return

      createText(inputText)  // 👈ここを追加しました

      requestMessage(inputText)
        .then((fileName) => {
          console.log(fileName)
          const path = `http://127.0.0.1:5000/audio?file_name=${fileName}`
          const voice = new Audio(path);
          voice.play();
          this._wavFileHandler.start(path);
        })
    }

    /** テキストを送信します */
    const getInputText = () => {
      const comment = <HTMLInputElement>document.getElementById("CommentInputArea")
      const inputText = comment.value

      if (inputText === "" || !inputText) return

      comment.value = ""
      return inputText
    }

    // メッセージを送って作成されたwavファイルのファイル名を取得します
    const requestMessage = async (message) => {
      const url = "http://127.0.0.1:5000/getAudio";

      const jsonData = {
        "text": message,
      };

      const result = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(jsonData),
      })
      const json = await result.json();
      return json["fileName"]
    }

    // 👇ここを追加しました。
 
    // コメントを流します。
    let count = 0;
    const createText = async (text) => {
      let div_text = document.createElement('div');
      div_text.id="text"+count; //アニメーション処理で対象の指定に必要なidを設定
      count++;
      div_text.style.position = 'fixed'; //テキストのは位置を絶対位置にするための設定
      div_text.style.whiteSpace = 'nowrap' //画面右端での折り返しがなく、画面外へはみ出すようにする
      div_text.style.left = (document.documentElement.clientWidth) + 'px'; //初期状態の横方向の位置は画面の右端に設定
      div_text.style.fontFamily = "ヒラギノ角ゴ"
      div_text.style.fontSize = "24px"
      div_text.style.color = "#fff"
      div_text.style.fontWeight = "bold"
      var random = Math.round( Math.random()* (document.documentElement.clientHeight / 2) );
      div_text.style.top = random + 'px';  //初期状態の縦方向の位置は画面の上端から下端の間に設定（ランダムな配置に）
      div_text.appendChild(document.createTextNode(text)); //画面上に表示されるテキストを設定
      document.body.appendChild(div_text); //body直下へ挿入
    
       //ライブラリを用いたテキスト移動のアニメーション： durationはアニメーションの時間、
       //        横方向の移動距離は「画面の横幅＋画面を流れるテキストの要素の横幅」、移動中に次の削除処理がされないようawait
      await gsap.to("#"+div_text.id, {duration: 7, x: -1*(document.documentElement.clientWidth+div_text.clientWidth), ease: Power0.easeNone});
    
      div_text.parentNode.removeChild(div_text); //画面上の移動終了後に削除
    }
  }

$ yarn add gsap

$ yarn add electron
$ yarn electron

{
  "main": "main.js",
}

// アプリケーション作成用のモジュールを読み込み
const { app, BrowserWindow, ipcMain, nativeTheme } = require("electron");
const path = require("path");

console.log("Let's play electron")

// メインウィンドウ
let mainWindow;

const createWindow = () => {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    width: 700,
    height: 500,
    webPreferences: {
      // プリロードスクリプトは、レンダラープロセスが読み込まれる前に実行され、
      // レンダラーのグローバル（window や document など）と Node.js 環境の両方にアクセスできます。
      preload: path.join(__dirname, "preload.js"),
    },
  });

  // メインウィンドウに表示するURLを指定します
  // （今回はmain.jsと同じディレクトリのindex.html）
  mainWindow.loadFile("index.html");

  nativeTheme.themeSource = 'dark'

  // メインウィンドウが閉じられたときの処理
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
};

//  初期化が完了した時の処理
app.whenReady().then(() => {
  createWindow();

  // アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
  app.on("activate", () => {
    // メインウィンドウが消えている場合は再度メインウィンドウを作成する
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 全てのウィンドウが閉じたときの処理
app.on("window-all-closed", () => {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== "darwin") {
    app.quit();
  }
});

$ yarn electron main