ドキュメント更新とリファクタリング

.env

@@ -19,6 +19,7 @@ NEXT_PUBLIC_VOICEVOX_INTONATION=""
 NEXT_PUBLIC_KOEIROMAP_KEY=""
 
 # Google TTS
+GOOGLE_APPLICATION_CREDENTIALS="./credentials.json"
 NEXT_PUBLIC_GOOGLE_TTS_TYPE=""
 
 # StyleBertVits2

.env.example

@@ -19,6 +19,7 @@ NEXT_PUBLIC_VOICEVOX_INTONATION=""
 NEXT_PUBLIC_KOEIROMAP_KEY=""
 
 # Google TTS
+GOOGLE_APPLICATION_CREDENTIALS="./credentials.json"
 NEXT_PUBLIC_GOOGLE_TTS_TYPE=""
 
 # StyleBertVits2

README.md

@@ -219,6 +219,9 @@ npm run dev
  <a href="https://github.com/gijigae" title="gijigae">
  <img src="https://github.com/gijigae.png" width="40" height="40" alt="gijigae">
  </a>
+ <a href="https://github.com/takm-reason" title="takm-reason">
+ <img src="https://github.com/takm-reason.png" width="40" height="40" alt="takm-reason">
+ </a>
 </p>
 
 他、プライベートスポンサー 複数名

docs/README_en.md

@@ -222,6 +222,9 @@ Your support will greatly contribute to the development and improvement of the A
  <a href="https://github.com/gijigae" title="gijigae">
  <img src="https://github.com/gijigae.png" width="40" height="40" alt="gijigae">
  </a>
+ <a href="https://github.com/takm-reason" title="takm-reason">
+ <img src="https://github.com/takm-reason.png" width="40" height="40" alt="takm-reason">
+ </a>
 </p>
 
 Plus multiple private sponsors

docs/README_ko.md

@@ -220,6 +220,9 @@ npm run dev
  <a href="https://github.com/gijigae" title="gijigae">
  <img src="https://github.com/gijigae.png" width="40" height="40" alt="gijigae">
  </a>
+ <a href="https://github.com/takm-reason" title="takm-reason">
+ <img src="https://github.com/takm-reason.png" width="40" height="40" alt="takm-reason">
+ </a>
 </p>
 
 그 외, 다수의 비공개 스폰서

docs/README_zh.md

@@ -220,6 +220,9 @@ npm run dev
  <a href="https://github.com/gijigae" title="gijigae">
  <img src="https://github.com/gijigae.png" width="40" height="40" alt="gijigae">
  </a>
+ <a href="https://github.com/takm-reason" title="takm-reason">
+ <img src="https://github.com/takm-reason.png" width="40" height="40" alt="takm-reason">
+ </a>
 </p>
 
 以及多位匿名贊助者

src/components/messageReceiver.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react'
-import { processReceivedMessage } from '@/features/chat/handlers'
+import { speakMessageHandler } from '@/features/chat/handlers'
 import settingsStore from '@/features/stores/settings'
 import homeStore from '@/features/stores/home'
 
@@ -17,17 +17,8 @@ const MessageReceiver = () => {
  const [lastTimestamp, setLastTimestamp] = useState(0)
  const clientId = settingsStore((state) => state.clientId)
 
- const updateChatLog = useCallback((messages: Message[]) => {
- homeStore.setState((state) => ({
- chatLog: [
- ...state.chatLog,
- ...messages.map((message) => ({
- role: 'assistant',
- content: message.message,
- })),
- ],
- }))
- messages.forEach((message) => processReceivedMessage(message.message))
+ const speakMessage = useCallback((messages: Message[]) => {
+ messages.forEach((message) => speakMessageHandler(message.message))
  }, [])
 
  useEffect(() => {
@@ -40,7 +31,7 @@ const MessageReceiver = () => {
  )
  const data = await response.json()
  if (data.messages && data.messages.length > 0) {
- updateChatLog(data.messages)
+ speakMessage(data.messages)
  const newLastTimestamp =
  data.messages[data.messages.length - 1].timestamp
  setLastTimestamp(newLastTimestamp)
@@ -53,7 +44,7 @@ const MessageReceiver = () => {
  const intervalId = setInterval(fetchMessages, 1000) // 5秒ごとに変更
 
  return () => clearInterval(intervalId)
- }, [lastTimestamp, clientId, updateChatLog]) // chatLogを依存配列から除外し、updateChatLogを追加
+ }, [lastTimestamp, clientId, speakMessage])
 
  return <></>
 }

src/components/settings/voice.tsx

@@ -7,7 +7,7 @@ import {
  PRESET_D,
 } from '@/features/constants/koeiroParam'
 import { AIVoice } from '@/features/constants/settings'
-import { testVoice } from '@/features/messages/speakCharacter'
+import { testVoiceVox } from '@/features/messages/speakCharacter'
 import settingsStore from '@/features/stores/settings'
 import { Link } from '../link'
 import { TextButton } from '../textButton'
@@ -208,7 +208,7 @@ const Voice = () => {
  </option>
  ))}
  </select>
- <TextButton onClick={() => testVoice()} className="ml-16">
+ <TextButton onClick={() => testVoiceVox()} className="ml-16">
  {t('TestVoice')}
  </TextButton>
  </div>

src/components/slides.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react'
-import slideStore from '../features/stores/slide'
-import homeStore from '../features/stores/home'
-import { processReceivedMessage } from '../features/chat/handlers'
+import slideStore from '@/features/stores/slide'
+import homeStore from '@/features/stores/home'
+import { speakMessageHandler } from '@/features/chat/handlers'
 import SlideContent from './slideContent'
 import SlideControls from './slideControls'
 
@@ -114,7 +114,7 @@ const Slides: React.FC<SlidesProps> = ({ markdown }) => {
 
  const currentLines = getCurrentLines()
  console.log(currentLines)
- processReceivedMessage(currentLines)
+ speakMessageHandler(currentLines)
  },
  [selectedSlideDocs]
  )

src/features/chat/handlers.ts

@@ -9,121 +9,123 @@ import slideStore from '@/features/stores/slide'
 import { goToSlide } from '@/components/slides'
 
 /**
- * 文字列を処理する関数
+ * 受け取ったメッセージを処理し、AIの応答を生成して発話させる
  * @param receivedMessage 処理する文字列
- * @param sentences 返答を一文単位で格納する配列
- * @param aiTextLog AIの返答ログ
- * @param tag タグ
- * @param isCodeBlock コードブロックのフラグ
- * @param codeBlockText コードブロックのテキスト
  */
-export const processReceivedMessage = async (
- receivedMessage: string,
- sentences: string[] = [],
- aiTextLog: Message[] = [],
- tag: string = '',
- isCodeBlock: boolean = false,
- codeBlockText: string = ''
-) => {
+export const speakMessageHandler = async (receivedMessage: string) => {
  const ss = settingsStore.getState()
  const hs = homeStore.getState()
  const currentSlideMessages: string[] = []
 
- // 返答内容のタグ部分と返答部分を分離
- const tagMatch = receivedMessage.match(/^\[(.*?)\]/)
- if (tagMatch && tagMatch[0]) {
- tag = tagMatch[0]
- receivedMessage = receivedMessage.slice(tag.length)
- }
+ let isCodeBlock: boolean = false
+ let codeBlockText: string = ''
+ let logText: string = ''
+ let assistantMessage: string[] = []
+ let remainingMessage = receivedMessage
+ let prevRemainingMessage: string = ''
+ const addedChatLog: Message[] = []
+ const delimiter = '```'
+
+ while (remainingMessage.length > 0 || isCodeBlock) {
+ let sentence = ''
+ prevRemainingMessage = remainingMessage
+
+ if (remainingMessage.includes(delimiter)) {
+ // コードブロックの分割
+ isCodeBlock = true
+ const [first, ...rest] = remainingMessage.split(delimiter)
+ ;[remainingMessage, codeBlockText] = [
+ first,
+ rest.join(delimiter).replace(/^\n/, ''),
+ ]
+ } else if (remainingMessage == '' && isCodeBlock) {
+ // コードブロックの分割
+ let code = ''
+ const [first, ...rest] = codeBlockText.split(delimiter)
+ ;[code, remainingMessage] = [first, rest.join(delimiter)]
+ addedChatLog.push({
+ role: 'assistant',
+ content: logText,
+ })
+ addedChatLog.push({
+ role: 'code',
+ content: code,
+ })
+
+ codeBlockText = ''
+ logText = ''
+ isCodeBlock = false
+ }
+
+ // 返答内容のタグ部分と返答部分を分離
+ let tag: string = ''
+ const tagMatch = remainingMessage.match(/^\[(.*?)\]/)
+ if (tagMatch?.[0]) {
+ tag = tagMatch[0]
+ remainingMessage = remainingMessage.slice(tag.length)
+ }
 
- // 返答を一文単位で切り出して処理する
- while (receivedMessage.length > 0) {
- const sentenceMatch = receivedMessage.match(
- /^(.+?[。．.!?！？\n]|.{20,}[、,])/
+ const sentenceMatch = remainingMessage.match(
+ /^(.{1,19}?[。．.!?！？\n]|.{20,}?[、,])/
  )
  if (sentenceMatch?.[0]) {
- let sentence = sentenceMatch[0]
- // 区切った文字をsentencesに追加
- sentences.push(sentence)
- // 区切った文字の残りでreceivedMessageを更新
- receivedMessage = receivedMessage.slice(sentence.length).trimStart()
-
- // 発話不要/不可能な文字列だった場合はスキップ
- if (
- !sentence.includes('```') &&
- !sentence.replace(
- /^[\s\u3000\t\n\r\[\(\{「［（【『〈《〔｛«‹〘〚〛〙›»〕》〉』】）］」\}\)\]'"''""・、。,.!?！？:：;；\-_=+~～*＊@＠#＃$＄%％^＾&＆|｜\\＼/／`｀]+$/gu,
- ''
- )
- ) {
- continue
- }
-
- // タグと返答を結合（音声再生で使用される）
- let aiText = `${tag} ${sentence}`
- console.log('aiText', aiText)
+ sentence = sentenceMatch?.[0]
+ // 区切った文字の残りでremainingMessageを更新
+ remainingMessage = remainingMessage.slice(sentence.length).trimStart()
+ }
 
-  if (isCodeBlock && !sentence.includes('```')) {
-  codeBlockText += sentence
-  continue
-  }
+ if (remainingMessage != '' && remainingMessage == prevRemainingMessage) {
+ sentence = prevRemainingMessage
+ remainingMessage = ''
+ }
 
- if (sentence.includes('```')) {
- if (isCodeBlock) {
- // コードブロックの終了処理
- const [codeEnd, ...restOfSentence] = sentence.split('```')
- aiTextLog.push({
- role: 'code',
- content: codeBlockText + codeEnd,
- })
- aiText += `${tag} ${restOfSentence.join('```') || ''}`
+ // 発話不要/不可能な文字列だった場合はスキップ
+ if (
+ sentence == '' ||
+ sentence.replace(
+ /^[\s\u3000\t\n\r\[\(\{「［（【『〈《〔｛«‹〘〚〛〙›»〕》〉』】）］」\}\)\]'"''""・、。,.!?！？:：;；\-_=+~～*＊@＠#＃$＄%％^＾&＆|｜\\＼/／`｀]+$/gu,
+ ''
+ ) == ''
+ ) {
+ continue
+ }
 
- // AssistantMessage欄の更新
- homeStore.setState({ assistantMessage: sentences.join(' ') })
+ // 区切った文字をassistantMessageに追加
+ assistantMessage.push(sentence)
+ // タグと返答を結合（音声再生で使用される）
+ let aiText = tag ? `${tag} ${sentence}` : sentence
 
- codeBlockText = ''
- isCodeBlock = false
- } else {
- // コードブロックの開始処理
- isCodeBlock = true
- ;[aiText, codeBlockText] = aiText.split('```')
- }
+ const aiTalks = textsToScreenplay([aiText], ss.koeiroParam) // TODO
+ logText = logText + ' ' + sentence
 
- sentence = sentence.replace(/```/g, '')
+ speakCharacter(
+ aiTalks[0],
+ () => {
+ homeStore.setState({
+ assistantMessage: assistantMessage.join(' '),
+ })
+ hs.incrementChatProcessingCount()
+ // スライド用のメッセージを更新
+ currentSlideMessages.push(sentence)
+ },
+ () => {
+ hs.decrementChatProcessingCount()
+ currentSlideMessages.shift()
+ homeStore.setState({
+ slideMessages: currentSlideMessages,
+ })
  }
+ )
+ } // while loop end
 
- const aiTalks = textsToScreenplay([aiText], ss.koeiroParam)
- aiTextLog.push({ role: 'assistant', content: sentence })
-
- // 文ごとに音声を生成 & 再生、返答を表示
- const currentAssistantMessage = sentences.join(' ')
-
- speakCharacter(
- aiTalks[0],
- () => {
- homeStore.setState({
- assistantMessage: currentAssistantMessage,
- })
- hs.incrementChatProcessingCount()
- // スライド用のメッセージを更新
- currentSlideMessages.push(sentence)
- homeStore.setState({
- slideMessages: currentSlideMessages,
- })
- },
- () => {
- hs.decrementChatProcessingCount()
- currentSlideMessages.shift()
- homeStore.setState({
- slideMessages: currentSlideMessages,
- })
- }
- )
- } else {
- // マッチする文がない場合、ループを抜ける
- break
- }
- }
+ addedChatLog.push({
+ role: 'assistant',
+ content: logText,
+ })
+ homeStore.setState({
+ slideMessages: currentSlideMessages,
+ chatLog: [...hs.chatLog, ...addedChatLog],
+ })
 }
 
 /**