search

tegnike / aituber-kit

AITuber Kit
https://aituber-kit.vercel.app
Other
301 stars 61 forks source link

感情タグが適切に処理されない不具合 #224

Open tegnike opened 5 days ago

tegnike commented 5 days ago

CleanShot 2024-11-20 at 01 01 56

github-actions[bot] commented 5 days ago

Issue分析結果:

[
  {
    "file_path": "src/features/emoteController/expressionController.ts",
    "reason": "このファイルはVRMモデルの表情制御を担当しており、感情タグの処理に直接関係している可能性が高いです。"
  },
  {
    "file_path": "src/features/emoteController/emoteController.ts",
    "reason": "感情表現の制御を行うクラスが定義されているため、感情タグの処理に関連している可能性があります。"
  },
  {
    "file_path": "src/features/messages/speakCharacter.ts",
    "reason": "キャラクターの発話処理を行うファイルであり、感情タグの解釈と適用に関わっている可能性があります。"
  },
  {
    "file_path": "src/features/messages/messages.ts",
    "reason": "メッセージの処理や感情表現の定義が含まれており、感情タグの処理に関連している可能性が高いです。"
  },
  {
    "file_path": "src/components/chatLog.tsx",
    "reason": "チャットログの表示を担当するコンポーネントであり、感情タグの表示に関連している可能性があります。"
  },
  {
    "file_path": "src/components/assistantText.tsx",
    "reason": "アシスタントのテキスト表示を担当するコンポーネントで、感情タグの表示や処理に関わっている可能性があります。"
  },
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "AIチャットの応答生成を担当しており、感情タグの生成や処理に関連している可能性があります。"
  },
  {
    "file_path": "src/pages/index.tsx",
    "reason": "アプリケーションのメインコンポーネントであり、感情タグの処理や表示に関する全体的な制御を行っている可能性があります。"
  },
  {
    "file_path": "src/features/constants/systemPromptConstants.ts",
    "reason": "システムプロンプトの定義が含まれており、感情タグの生成や解釈に影響を与えている可能性があります。"
  },
  {
    "file_path": "src/features/vrmViewer/model.ts",
    "reason": "3Dキャラクターモデルの管理を行っており、感情表現の適用に関連している可能性があります。"
  },
  {
    "file_path": "src/components/menu.tsx",
    "reason": "UIの設定やコントロールを担当するコンポーネントであり、感情タグの表示や処理に関する設定が含まれている可能性があります。"
  },
  {
    "file_path": "src/features/chat/openAiChat.ts",
    "reason": "OpenAI APIを使用したチャット応答の生成を行っており、感情タグの生成に関連している可能性があります。"
  },
  {
    "file_path": "src/features/chat/anthropicChat.ts",
    "reason": "Anthropic APIを使用したチャット応答の生成を行っており、感情タグの生成に関連している可能性があります。"
  },
  {
    "file_path": "src/features/chat/googleChat.ts",
    "reason": "Google AIを使用したチャット応答の生成を行っており、感情タグの生成に関連している可能性があります。"
  },
  {
    "file_path": "src/features/lipSync/lipSync.ts",
    "reason": "リップシンク機能を制御しており、感情表現と連動している可能性があります。"
  },
  {
    "file_path": "src/components/messageInputContainer.tsx",
    "reason": "ユーザー入力の処理を行うコンポーネントであり、感情タグの入力や解釈に関連している可能性があります。"
  },
  {
    "file_path": "src/features/youtube/youtubeComments.ts",
    "reason": "YouTubeコメントの処理を行っており、コメント内の感情タグの解釈に関連している可能性があります。"
  },
  {
    "file_path": "src/features/youtube/conversationContinuityFunctions.ts",
    "reason": "会話の継続性を管理する機能があり、感情の文脈理解や感情タグの適切な使用に関連している可能性があります。"
  },
  {
    "file_path": "src/lib/VRMAnimation/VRMAnimation.ts",
    "reason": "VRMアニメーションを制御するクラスであり、感情表現のアニメーションに関連している可能性があります。"
  },
  {
    "file_path": "src/lib/VRMLookAtSmootherLoaderPlugin/VRMLookAtSmoother.ts",
    "reason": "視線制御を拡張するクラスであり、感情表現と連動した視線の動きに関連している可能性があります。"
  }
]

コード改善案:

問題の主な原因は、感情タグがメッセージ本文から適切に分離されていないことにあります。現在のコードでは、感情タグが含まれたメッセージ全体がそのまま表示されており、これが不自然な表示につながっています。また、感情タグの処理が一貫していないため、一部のタグが正しく解釈されていない可能性があります。 全体的に、メッセージの解析と表示に関するロジックを改善し、感情タグとメッセージ本文を明確に分離して処理する必要があります。さらに、感情タグの一貫した処理と、UI上での適切な表示方法を実装することが重要です。 1. メッセージ解析ロジックの改善 説明: 現在のコードでは感情タグとメッセージ本文が適切に分離されていません。これを改善することで、タグの処理と表示が正確になります。 改善後のコード例: ```typescript // src/features/messages/messages.ts に以下の関数を追加 export const parseMessage = (message: string): { emotion: string, content: string } => { const match = message.match(/^\[(.*?)\](.*)$/); if (match) { return { emotion: match[1], content: match[2].trim() }; } return { emotion: 'neutral', content: message.trim() }; }; ``` 2. Chatコンポーネントでのメッセージパースとレンダリングの改善 説明: Chatコンポーネントで新しいパース関数を使用し、感情タグとメッセージ内容を別々に処理します。これにより、UIでの表示が改善されます。 改善後のコード例: ```tsx // src/components/chatLog.tsx の Chat コンポーネントを修正 import { parseMessage } from '@/features/messages/messages'; const Chat = ({ role, message, characterName, }: { role: string message: string characterName: string }) => { const { emotion, content } = parseMessage(message); const roleColor = role !== 'user' ? 'bg-secondary text-white ' : 'bg-base text-primary' const roleText = role !== 'user' ? 'text-secondary' : 'text-primary' const offsetX = role === 'user' ? 'pl-40' : 'pr-40' return (
{role !== 'user' ? characterName || 'CHARACTER' : 'YOU'}
{content}
{role !== 'user' && (
Emotion: {emotion}
)}
) } ``` 3. 感情タグの一貫した処理 説明: 感情タグの処理を一箇所で行い、一貫性を保ちます。これにより、タグの解釈ミスを防ぎ、将来的な拡張も容易になります。 改善後のコード例: ```typescript // src/features/messages/messages.ts に以下の関数を追加 export const normalizeEmotion = (emotion: string): string => { const normalizedEmotions: { [key: string]: string } = { 'neutral': 'neutral', 'happy': 'happy', 'angry': 'angry', 'sad': 'sad', 'relaxed': 'relaxed', // 必要に応じて他の感情マッピングを追加 }; return normalizedEmotions[emotion.toLowerCase()] || 'neutral'; }; ``` 4. AssistantTextコンポーネントの改善 説明: AssistantTextコンポーネントでも同様にメッセージをパースし、感情タグを適切に処理します。 改善後のコード例: ```tsx // src/components/assistantText.tsx を修正 import { parseMessage, normalizeEmotion } from '@/features/messages/messages' export const AssistantText = ({ message }: { message: string }) => { const characterName = settingsStore((s) => s.characterName) const showCharacterName = settingsStore((s) => s.showCharacterName) const { emotion, content } = parseMessage(message); const normalizedEmotion = normalizeEmotion(emotion); return (
{showCharacterName && (
{characterName}
)}
{content}
Emotion: {normalizedEmotion}
) } ``` 5. システムプロンプトの改善 説明: システムプロンプトを更新し、AIに感情タグの使用方法を明確に指示します。これにより、一貫した感情タグの使用が期待できます。 改善後のコード例: ```typescript // src/features/constants/systemPromptConstants.ts を修正 export const SYSTEM_PROMPT = `あなたはこれからuserと仲の良い1人の人間として振舞い会話を行います。 感情の種類には "neutral"（通常）、"happy"（喜び）、"angry"（怒り）、"sad"（悲しみ）、"relaxed"（安らぎ）の5つがあります。 会話文の書式は以下の通りです： [感情]{会話文} 感情タグは必ず小文字で記述し、1つの発言につき1つのタグのみを使用してください。 例： [neutral]こんにちは。 [happy]今日はいい天気ですね。 [sad]悲しいニュースを聞いてしまいました。 返答には最も適切な会話文を一つだけ返答してください。 ですます調や敬語は使わないでください。 それでは会話を始めましょう。` ``` これらの改善により、感情タグの処理と表示が大幅に向上します。メッセージのパース処理を一元化し、