マルチモーダル機能を追加(add multimodal feature) #101
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ウォークスルーこの変更は、Webカメラの機能を追加および改善し、ユーザーインターフェースとバックエンドのメッセージ処理機能を強化することを目的としています。 変更点
詩
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- src/components/chatLog.tsx (1 hunks)
- src/components/menu.tsx (6 hunks)
- src/components/settings.tsx (1 hunks)
- src/components/webcam.tsx (1 hunks)
- src/features/messages/messages.ts (1 hunks)
- src/pages/index.tsx (8 hunks)
Files skipped from review due to trivial changes (1)
- src/components/settings.tsx
Additional context used
Biome
src/components/webcam.tsx
[error] 121-121: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (15)
src/features/messages/messages.ts (1)
7-7: メッセージ型の拡張
Message型がマルチモーダルコンテンツをサポートするように拡張されています。この変更は正しく、プロジェクトの要件に適合しています。ただし、マルチモーダルコンテンツの処理が他の部分でも適切に行われていることを確認してください。src/components/webcam.tsx (3)
23-23: カメラデバイスの更新
videoRefの初期化が正しく行われています。この変更は適切です。
140-150: 画像キャプチャの実装
handleCapture関数は正しく実装されています。この変更は適切です。
153-157: 画像キャプチャのトリガー
triggerShutterがtrueのときに画像をキャプチャする実装が正しく行われています。src/components/menu.tsx (5)
89-91: 新しいプロパティの追加
onChangeModalImage、triggerShutter、onChangeWebcamStatusのプロパティが追加されています。これらのプロパティは、Webcamの状態管理に必要です。
422-427: モーダル画像の変更ハンドラ
handleChangeModalImage関数が正しく実装されています。この変更は適切です。
429-434: Webcamステータスの変更
onChangeWebcamStatusを使用してWebcamの状態を管理する実装が適切に行われています。
460-479: Webcamボタンの条件付きレンダリング
selectAIServiceとselectAIModelに基づいてWebcamボタンの有効/無効を切り替える実装が正しく行われています。
570-575: Webcamコンポーネントのレンダリング
showWebcamがtrueの場合にWebcamコンポーネントをレンダリングする実装が正しく行われています。src/pages/index.tsx (6)
75-78: 確認: 新しい状態変数が追加されました
modalImage,triggerShutter,delayedText,webcamStatusの状態変数が追加されました。これらは新しいマルチモーダル機能に関連しているようです。初期化は問題ありません。
655-663: 確認:handleChangeModelImage関数
handleChangeModelImage関数が追加され、モーダル画像の変更を処理しています。状態の更新とシャッタートリガーのリセットが正しく行われることを確認してください。Verification successful
確認済み:
handleChangeModelImage関数
handleChangeModelImage関数は正しく定義され、モーダル画像の変更を処理しています。状態の更新とシャッタートリガーのリセットも正しく行われています。
- 定義:
src/pages/index.tsxの 655 行目- 使用箇所: 同ファイル内で
onChangeModalImageイベントに関連付けられているScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that handleChangeModelImage correctly updates modalImage and resets triggerShutter. # Test: Search for the function usage. Expect: Correct state updates and resets. rg --type js -A 5 $'handleChangeModelImage'Length of output: 42
Script:
#!/bin/bash # Search for the definition of handleChangeModelImage in the codebase ast-grep --lang tsx --pattern $'const handleChangeModelImage = useCallback($_, $_)' # Search for the usage of handleChangeModelImage in the codebase rg 'handleChangeModelImage'Length of output: 782
683-694: 確認:hookSendChat関数
hookSendChat関数が追加され、画像の有無にかかわらずチャットメッセージの送信を処理しています。この関数が遅延テキストとウェブカメラの状態を正しく処理することを確認してください。
665-669: 確認:clear関数
clear関数が追加され、modalImageをクリアしています。この関数が正しくmodalImageの状態をクリアすることを確認してください。Verification successful
確認:
clear関数
clear関数がsrc/pages/index.tsx内で定義および使用されています。特に、665行目で使用され、667行目で定義されています。この関数はmodalImageの状態を正しくクリアしています。
src/pages/index.tsx:
- 定義: 667行目
- 使用: 665行目
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that clear function correctly clears modalImage. # Test: Search for the function usage. Expect: Correct state clearing. rg --type js -A 5 $'clear'Length of output: 25
Script:
#!/bin/bash # Description: Verify invocation of the clear function. # Test: Search for the invocation of the clear function. Expect: Correct state clearing. rg --type js 'clear()'Length of output: 24
Script:
#!/bin/bash # Description: Verify the definition and context of the clear function. # Test: Search for the definition of the clear function and check its surrounding context. rg --type js -A 10 'const clear = useCallback'Length of output: 48
Script:
#!/bin/bash # Description: Verify any occurrence of the term clear in the codebase. # Test: Search for any occurrence of the term clear. rg 'clear'Length of output: 1102
514-523: 確認:handleSendChat関数の変更
handleSendChat関数内でmodalImageを処理し、送信後に画像をクリアするロジックが追加されました。これにより、画像の処理とクリアが正しく行われることを確認してください。Verification successful
確認完了:
handleSendChat関数の変更
handleSendChat関数がmodalImageを正しく処理し、送信後に画像をクリアするロジックが確認されました。以下の点について確認しました:
modalImageが設定され、送信後にクリアされる。- 関数の定義および使用箇所が適切に実装されている。
特に問題は見当たりませんでした。
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that handleSendChat correctly handles and clears modalImage. # Test: Search for the function usage. Expect: Proper image handling and clearing. rg --type js -A 5 $'handleSendChat'Length of output: 34
Script:
#!/bin/bash # Description: Verify the definition and usage of handleSendChat function to ensure modalImage is handled and cleared correctly. # Search for the definition of the handleSendChat function ast-grep --lang typescript --pattern 'function handleSendChat($_) { $$$ }' # Search for all usages of the handleSendChat function rg 'handleSendChat'Length of output: 1189
Script:
#!/bin/bash # Description: Extract the definition and all usages of the handleSendChat function to ensure modalImage is handled and cleared correctly. # Extract the handleSendChat function definition from src/pages/index.tsx ast-grep --lang typescript --pattern 'const handleSendChat = useCallback($_, $$$)' --json # Extract the surrounding lines for all usages of handleSendChat in src/pages/index.tsx and src/features/youtube/youtubeComments.ts rg 'handleSendChat' -A 5 -B 5 --jsonLength of output: 21500
Script:
#!/bin/bash # Description: Extract the full definition and all usages of the handleSendChat function to ensure modalImage is handled and cleared correctly. # Extract the handleSendChat function definition from src/pages/index.tsx with more surrounding lines rg 'const handleSendChat = useCallback' -A 50 -B 5 src/pages/index.tsx # Extract the surrounding lines for all usages of handleSendChat in src/pages/index.tsx and src/features/youtube/youtubeComments.ts with more context rg 'handleSendChat' -A 10 -B 10 src/pages/index.tsx src/features/youtube/youtubeComments.tsLength of output: 11862
414-414: 確認:processAIResponse関数の変更
processAIResponse関数内でメッセージの新しい構造（画像コンテンツを含む）を処理するためのロジックが追加されました。これにより、メッセージが正しく処理されることを確認してください。Verification successful
確認:
processAIResponse関数の変更
processAIResponse関数内でメッセージの新しい構造（画像コンテンツを含む）を処理するためのロジックが追加されました。このロジックは、メッセージの内容が文字列の場合はトリムし、配列の場合は最初の要素のテキストに「[画像]」を追加しています。これにより、メッセージが正しく処理されることを確認しました。
processAIResponse関数が適切に新しいメッセージ構造を処理していることを確認しました。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the processAIResponse function correctly handles the new message structure. # Test: Search for the function usage. Expect: No unhandled content types. rg --type js -A 5 $'processAIResponse'Length of output: 37
Script:
#!/bin/bash # Locate the definition of the `processAIResponse` function in the codebase ast-grep --lang typescript --pattern 'function processAIResponse($_) { $$$ }' # Locate the usage of the `processAIResponse` function in the codebase rg 'processAIResponse'Length of output: 773
Script:
#!/bin/bash # Extract the full implementation of the `processAIResponse` function from the specified file for review. ast-grep --lang typescript --pattern 'const processAIResponse = useCallback(async (currentChatLog: Message[], messages: Message[]) => { $$$ })' src/pages/index.tsxLength of output: 165
Script:
#!/bin/bash # Adjusted pattern to match the function implementation more accurately ast-grep --lang typescript --pattern 'const processAIResponse = useCallback(async ($_: Message[], $_: Message[]) => { $$$ })' src/pages/index.tsxLength of output: 147
Script:
#!/bin/bash # Search for the `useCallback` keyword to locate and extract the implementation of `processAIResponse` rg 'useCallback' -A 50 src/pages/index.tsxLength of output: 13190
src/components/chatLog.tsx
Outdated
| return ( | ||
| <div key={i} ref={messages.length - 1 === i ? chatScrollRef : null}> | ||
| <Chat role={msg.role} message={msg.content.trim()} characterName={characterName} /> | ||
| <Chat role={msg.role} message={typeof(msg.content)=="string"?msg.content:msg.content[0].text+"[画像]"} characterName={characterName} /> |
There was a problem hiding this comment.
マルチモーダルコンテンツの条件付き処理
msg.contentの条件付き処理が追加されています。この実装は、メッセージの内容が文字列であるか配列であるかを適切に処理しています。ただし、将来的な拡張性を考慮して、コードの可読性と保守性を高めるために、関数に分割することを検討してください。
- <Chat role={msg.role} message={typeof(msg.content)=="string"?msg.content:msg.content[0].text+"[画像]"} characterName={characterName} />
+ const getMessageContent = (content) => {
+ return typeof(content) == "string" ? content : content[0].text + "[画像]";
+ }
+ <Chat role={msg.role} message={getMessageContent(msg.content)} characterName={characterName} />Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Chat role={msg.role} message={typeof(msg.content)=="string"?msg.content:msg.content[0].text+"[画像]"} characterName={characterName} /> | |
| const getMessageContent = (content) => { | |
| return typeof(content) == "string" ? content : content[0].text + "[画像]"; | |
| } | |
| <Chat role={msg.role} message={getMessageContent(msg.content)} characterName={characterName} /> |
src/components/webcam.tsx
Outdated
| @@ -0,0 +1,189 @@ | |||
| import { get } from "http"; | |||
There was a problem hiding this comment.
不要なインポートの削除
httpモジュールのインポートが不要です。削除することをお勧めします。
- import { get } from "http";Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { get } from "http"; |
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/components/menu.tsx (6 hunks)
- src/components/webcam.tsx (1 hunks)
- src/pages/index.tsx (8 hunks)
Files skipped from review as they are similar to previous changes (2)
- src/components/menu.tsx
- src/pages/index.tsx
Additional context used
Biome
src/components/webcam.tsx
[error] 121-121: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (6)
src/components/webcam.tsx (6)
5-9: LGTM!状態変数とプロパティの宣言は適切です。
Also applies to: 17-20
23-23: LGTM!
videoRefの宣言は適切です。
140-150: LGTM!
handleCapture関数は適切に実装されています。
152-157: LGTM!
triggerShutterがtrueの時に画像を取得する実装は適切です。
159-189: LGTM!JSXの実装は適切です。
1-1: 不要なインポートの削除
httpモジュールのインポートが不要です。削除することをお勧めします。- import { get } from "http";Likely invalid or redundant comment.
src/components/webcam.tsx
Outdated
| useEffect(() => { | ||
| refreshDevices(); | ||
| const handleDeviceChange = () => { | ||
| refreshDevices(); | ||
| //stopCamera(); | ||
| }; | ||
| navigator.mediaDevices?.addEventListener("devicechange", handleDeviceChange); | ||
| return () => { | ||
| navigator.mediaDevices?.removeEventListener("devicechange", handleDeviceChange); | ||
| }; | ||
| }, [refreshDevices]); |
There was a problem hiding this comment.
不要なコメントアウトコードの削除
useEffectフック内のコメントアウトされたコードを削除して、コードを簡潔にすることをお勧めします。
- //stopCamera();- /*
- if (!showWebcam) {
- stopCamera();
- }
- return () => {
- console.log("dismount show webcam")
- stopCamera();
- }
- */Also applies to: 53-64, 91-102, 104-116
src/components/webcam.tsx
Outdated
| const stopCamera = useCallback(() => { | ||
| console.log("stopCamera") | ||
| if (videoRef.current?.srcObject) { | ||
| /* | ||
| const tracks = (videoRef.current.srcObject as MediaStream).getTracks(); | ||
| tracks.forEach(track => track.stop()); | ||
| console.log("stopCamera2") | ||
| videoRef.current.srcObject = null; | ||
| */ | ||
| //setCameraActive(false); | ||
| } else { | ||
| console.log("stopCamera3") | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
カメラ停止の最適化
stopCamera関数が正しく実装されていますが、コメントアウトされているコードを削除してコードを簡潔にすることをお勧めします。
- /*
- const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
- tracks.forEach(track => track.stop());
- console.log("stopCamera2")
- videoRef.current.srcObject = null;
- */Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const stopCamera = useCallback(() => { | |
| console.log("stopCamera") | |
| if (videoRef.current?.srcObject) { | |
| /* | |
| const tracks = (videoRef.current.srcObject as MediaStream).getTracks(); | |
| tracks.forEach(track => track.stop()); | |
| console.log("stopCamera2") | |
| videoRef.current.srcObject = null; | |
| */ | |
| //setCameraActive(false); | |
| } else { | |
| console.log("stopCamera3") | |
| } | |
| }, []); | |
| const stopCamera = useCallback(() => { | |
| console.log("stopCamera") | |
| if (videoRef.current?.srcObject) { | |
| //setCameraActive(false); | |
| } else { | |
| console.log("stopCamera3") | |
| } | |
| }, []); |
| const refreshDevices = useCallback(async () => { | ||
| if (!navigator.mediaDevices) return; | ||
| try { | ||
| const latestDevices = (await navigator.mediaDevices.enumerateDevices()) | ||
| .filter((d) => d.kind === "videoinput") | ||
| setDevices(latestDevices); | ||
| setShowRotateButton(latestDevices.length <= 1); | ||
| if (latestDevices.length > 0 && !selectedDevice) { | ||
| setSelectedDevice(latestDevices[0].deviceId); | ||
| } | ||
| } catch (error) { | ||
| console.error("Error refreshing devices:", error); | ||
| } | ||
| }, [selectedDevice]); |
There was a problem hiding this comment.
エラーハンドリングの追加
navigator.mediaDevicesが未定義の場合のエラーハンドリングを追加することをお勧めします。
+ if (!navigator.mediaDevices) {
+ console.error("Media devices API not supported.");
+ return;
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const refreshDevices = useCallback(async () => { | |
| if (!navigator.mediaDevices) return; | |
| try { | |
| const latestDevices = (await navigator.mediaDevices.enumerateDevices()) | |
| .filter((d) => d.kind === "videoinput") | |
| setDevices(latestDevices); | |
| setShowRotateButton(latestDevices.length <= 1); | |
| if (latestDevices.length > 0 && !selectedDevice) { | |
| setSelectedDevice(latestDevices[0].deviceId); | |
| } | |
| } catch (error) { | |
| console.error("Error refreshing devices:", error); | |
| } | |
| }, [selectedDevice]); | |
| const refreshDevices = useCallback(async () => { | |
| if (!navigator.mediaDevices) { | |
| console.error("Media devices API not supported."); | |
| return; | |
| } | |
| try { | |
| const latestDevices = (await navigator.mediaDevices.enumerateDevices()) | |
| .filter((d) => d.kind === "videoinput") | |
| setDevices(latestDevices); | |
| setShowRotateButton(latestDevices.length <= 1); | |
| if (latestDevices.length > 0 && !selectedDevice) { | |
| setSelectedDevice(latestDevices[0].deviceId); | |
| } | |
| } catch (error) { | |
| console.error("Error refreshing devices:", error); | |
| } | |
| }, [selectedDevice]); |
src/components/webcam.tsx
Outdated
| useEffect(() => { | ||
| // 利用デバイスの初期化 | ||
| devices && devices?.[0] && setSelectedDevice(devices[0].deviceId); | ||
| if (devices.length < 2) { |
There was a problem hiding this comment.
Optional Chainingの使用
devicesのオプショナルチェーンを使用して、安全にアクセスすることをお勧めします。
- devices && devices?.[0] && setSelectedDevice(devices[0].deviceId);
+ devices?.[0] && setSelectedDevice(devices[0].deviceId);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (devices.length < 2) { | |
| devices?.[0] && setSelectedDevice(devices[0].deviceId); |
Tools
Biome
[error] 121-121: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/components/vrmViewer.tsx (2 hunks)
- src/pages/index.tsx (8 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/pages/index.tsx
Additional comments not posted (4)
src/components/vrmViewer.tsx (4)
5-7: Propsの定義を追加しました。新しいプロパティ
onImageDroppedがPropsに追加され、画像がドロップされた際の処理を担当するようになります。この変更により、コンポーネントの再利用性と拡張性が向上しています。
9-11: 新しいPropsをコンポーネントに統合しました。
onImageDroppedプロパティをコンポーネントの引数として受け取り、必要な機能を組み込むことができるようになりました。これにより、画像関連の機能が強化され、ユーザーインタラクションが向上しています。
42-47: 画像ファイルのドロップ処理を追加しました。ドロップされたファイルが画像の場合、その画像を読み込み、
onImageDroppedを通じてアップロードします。この機能はユーザーがVRMビューアに直接画像をドロップできるようにするためのもので、非常に便利です。
53-53: 依存関係の配列にonImageDroppedを追加しました。
useCallbackフックの依存関係配列にonImageDroppedを追加することで、この関数が変更された場合にコールバックが正しく再生成されるようになります。これはパフォーマンスの最適化とバグの防止に役立ちます。
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- scripts/analyze_issue.py (2 hunks)
- src/features/youtube/conversationContinuityFunctions.ts (10 hunks)
- src/features/youtube/youtubeComments.ts (1 hunks)
- src/pages/index.tsx (11 hunks)
Additional context used
Biome
src/pages/index.tsx
[error] 344-345: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (7)
src/features/youtube/youtubeComments.ts (1)
147-147: スリープモード機能の追加
fetchAndProcessComments関数において、noCommentCountが 6 の場合にgetMessagesForSleep関数を呼び出すように変更されました。これにより、コメントがない状態が続いた際にスリープモードに移行する機能が追加されています。この変更は、ユーザーのエンゲージメントを維持するために有効な手段と考えられます。scripts/analyze_issue.py (2)
58-58: max_tokens パラメータの更新
anthropic.messages.create関数呼び出しにおけるmax_tokensパラメータが 1024 から 2048 に更新されました。この変更により、より多くのトークンを処理できるようになり、複雑な分析や長い応答の生成が可能になります。この変更は、スクリプトの機能向上に寄与するものと考えられます。
63-93: メッセージ内容の詳細な指示の追加AIアシスタントに対する指示が日本語で詳細に記述されています。これにより、GitHubのIssueと関連するファイルを特定するタスクが明確になり、AIの分析精度が向上する可能性があります。指示にはJSONフォーマットでの出力要求も含まれており、結果の利用が容易になります。
src/features/youtube/conversationContinuityFunctions.ts (2)
20-36: 共通のシステムメッセージ生成関数の追加
getCommonSystemMessage関数が新たに追加されました。この関数は、システムプロンプトと追加のガイドラインを受け取り、それに基づいてコメントを生成する役割を持っています。この関数の追加により、会話の継続性を管理する際の柔軟性が向上し、よりリッチなユーザー体験を提供することが可能になります。
47-81: 最新メッセージ取得関数のシグネチャ変更
getLastMessages関数のシグネチャが変更され、メッセージの配列を文字列ではなくMessage[]型で返すようになりました。この変更により、メッセージの扱いがより柔軟になり、後続の処理での利用が容易になります。また、この関数内でのメッセージのフィルタリングと結合のロジックが改善されています。src/pages/index.tsx (2)
76-79: 新しい状態変数の導入
modalImage,triggerShutter,delayedText,webcamStatusの四つの新しい状態変数が導入されました。これらの変数は、カメラ機能とそのトリガー管理に関連しており、ユーザーが画像をキャプチャしてチャットに投稿する機能をサポートします。これにより、アプリケーションのマルチモーダル機能が強化されます。
540-549: チャットログの画像コンテンツ処理の更新
handleSendChat関数内で、modalImageが存在する場合に画像URLを含むメッセージオブジェクトを作成し、チャットログに追加するロジックが追加されました。これにより、テキストと画像の両方を含むメッセージを扱うことが可能になり、ユーザー体験が向上します。
|
まだエラー内容を確認していないが、画像ドロップ後にテキストを送信すると添付のエラーが出ることがある
|
|
あ、LocalStorageの許容超えたのか… |
ちょっと気になったところ
|
|
もろもろ対応完了。 |
|
@tegnike: 以下のファイルの変更点を確認しました：
|
マルチモーダル機能を追加(add multimodal feature)
2 participants
マルチモーダル機能追加のコードです。webcam.tsxがカメラ機能の本体です。スマホではうまく動きません。
ChatVRMオリジナルモードの方に追加しています。LLMとしてOpenAIを指定してchatgpt-4かchatgpt-4oを指定している時だけ動作するようにしています。そのために、message.tsを修正していますが、現在のところOpenAI用です。
カメラを開いている時に、入力するか発言すると、その時の画像を撮影して、OpenAIのマルチモーダルAPIを呼び出します。
また、シャッターボタンを押すとその時の画像を記録するので、その状態で発言すると、同様にマルチモーダルAPIを呼び出します。一度、マルチモーダルAPIを呼び出すと、記録された画像は消しています(setModalImage(""))。
ChatLogでは、発言の中にイメージデータが埋め込んであるので、10発言の間は毎回画像つきで送ることになります。ログ表示の際には[画像]と付くようになっていて、ここは、まだ多言語化してません。
このコードの既知のバグ
・index.tsxの中のmodalImageにたまに画像以外と認識されないデータになっています。ゴミ箱ボタンで消せます。消さないまま発言すると、マルチモーダルAPIでエラーが返ってきます。
・カメラ切り替え(rotate)がうまく動作しません。
・カメラを閉じた時に、getUserMediaで取得したリソースを解放できていません。
不明な点があったらぜひ質問してください。
Summary by CodeRabbit
新機能
VrmViewerコンポーネントに画像ドロップ機能を追加しました。バグ修正