tegnike · tegnike · Jun 2, 2025
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -301,5 +301,7 @@
   "CustomAPIBodyInfo": "Enter body information to include in API requests in JSON format. messages will be automatically included.",
   "CustomAPIDescription": "Note: Messages are automatically included in the request body. In streaming mode, the server must return text/event-stream.",
   "EditSlideScripts": "Edit Dialogue",
-  "PleaseSelectSlide": "Please select a slide"
+  "PleaseSelectSlide": "Please select a slide",
+  "MultimodalCapable": "🖼️ Multimodal",
+  "MultimodalTooltip": "This model supports image input"
 }
diff --git a/locales/ja/translation.json b/locales/ja/translation.json
@@ -301,5 +301,7 @@
   "CustomAPIHeadersInfo": "APIリクエストに含めるヘッダー情報をJSON形式で入力してください。",
   "CustomAPIBody": "カスタムボディ",
   "CustomAPIBodyInfo": "APIリクエストに含めるボディ情報をJSON形式で入力してください。messagesは自動的に含まれます。",
-  "CustomAPIDescription": "注意: メッセージは自動的にリクエストボディに含まれます。ストリーミングモードでは、サーバーがtext/event-streamを返す必要があります。"
+  "CustomAPIDescription": "注意: メッセージは自動的にリクエストボディに含まれます。ストリーミングモードでは、サーバーがtext/event-streamを返す必要があります。",
+  "MultimodalCapable": "🖼️ マルチモーダル対応",
+  "MultimodalTooltip": "このモデルは画像入力に対応しています"
 }
diff --git a/locales/ko/translation.json b/locales/ko/translation.json
@@ -301,5 +301,7 @@
   "CustomAPIBodyInfo": "API 요청에 포함할 바디 정보를 JSON 형식으로 입력해주세요. messages는 자동으로 포함됩니다.",
   "CustomAPIDescription": "주의: 메시지는 자동으로 요청 바디에 포함됩니다. 스트리밍 모드에서는, 서버가 text/event-stream을 반환해야 합니다.",
   "EditSlideScripts": "대사 편집",
-  "PleaseSelectSlide": "슬라이드를 선택하세요"
+  "PleaseSelectSlide": "슬라이드를 선택하세요",
+  "MultimodalCapable": "🖼️ 멀티모달",
+  "MultimodalTooltip": "이 모델은 이미지 입력을 지원합니다"
 }
diff --git a/locales/zh/translation.json b/locales/zh/translation.json
@@ -301,5 +301,7 @@
   "CustomAPIBodyInfo": "请以JSON格式输入要包含在API请求中的正文信息。messages将自动包含。",
   "CustomAPIDescription": "注意：消息将自动包含在请求正文中。在流式模式下，服务器需要返回text/event-stream。",
   "EditSlideScripts": "台词编辑",
-  "PleaseSelectSlide": "请选择幻灯片"
+  "PleaseSelectSlide": "请选择幻灯片",
+  "MultimodalCapable": "🖼️ 多模态",
+  "MultimodalTooltip": "此模型支持图像输入"
 }
diff --git a/src/components/settings/modelProvider.tsx b/src/components/settings/modelProvider.tsx
@@ -23,6 +23,7 @@ import {
   getModels,
   getOpenAIRealtimeModels,
   getOpenAIAudioModels,
+  isMultiModalCapable,
 } from '@/features/constants/aiModels'
 import toastStore from '@/features/stores/toast'
 import webSocketStore from '@/features/stores/websocketStore'
@@ -64,6 +65,7 @@ const ServiceLogo = ({ service }: { service: keyof typeof aiServiceLogos }) => {
   )
 }
 
+
 const ModelProvider = () => {
   const externalLinkageMode = settingsStore((s) => s.externalLinkageMode)
   const realtimeAPIMode = settingsStore((s) => s.realtimeAPIMode)
@@ -358,7 +360,7 @@ const ModelProvider = () => {
                     >
                       {getOpenAIRealtimeModels().map((model) => (
                         <option key={model} value={model}>
-                          {model}
+                          {model}{isMultiModalCapable('openai', model) ? ' 🖼️' : ''}
                         </option>
                       ))}
                     </select>
@@ -425,7 +427,7 @@ const ModelProvider = () => {
                     >
                       {getOpenAIAudioModels().map((model) => (
                         <option key={model} value={model}>
-                          {model}
+                          {model}{isMultiModalCapable('openai', model) ? ' 🖼️' : ''}
                         </option>
                       ))}
                     </select>
@@ -447,7 +449,7 @@ const ModelProvider = () => {
                   >
                     {getModels('openai').map((model) => (
                       <option key={model} value={model}>
-                        {model}
+                        {model}{isMultiModalCapable('openai', model) ? ' 🖼️' : ''}
                       </option>
                     ))}
                   </select>
@@ -490,7 +492,7 @@ const ModelProvider = () => {
                 >
                   {getModels('anthropic').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('anthropic', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -541,7 +543,7 @@ const ModelProvider = () => {
                 >
                   {getModels('google').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('google', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -727,7 +729,7 @@ const ModelProvider = () => {
                 >
                   {getModels('groq').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('groq', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -772,7 +774,7 @@ const ModelProvider = () => {
                 >
                   {getModels('cohere').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('cohere', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -817,7 +819,7 @@ const ModelProvider = () => {
                 >
                   {getModels('mistralai').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('mistralai', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -862,7 +864,7 @@ const ModelProvider = () => {
                 >
                   {getModels('perplexity').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('perplexity', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -907,7 +909,7 @@ const ModelProvider = () => {
                 >
                   {getModels('fireworks').map((model) => (
                     <option key={model} value={model}>
-                      {model.replace('accounts/fireworks/models/', '')}
+                      {model.replace('accounts/fireworks/models/', '')}{isMultiModalCapable('fireworks', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>
@@ -1031,7 +1033,7 @@ const ModelProvider = () => {
                 >
                   {getModels('deepseek').map((model) => (
                     <option key={model} value={model}>
-                      {model}
+                      {model}{isMultiModalCapable('deepseek', model) ? ' 🖼️' : ''}
                     </option>
                   ))}
                 </select>

diff --git a/src/features/constants/aiModels.ts b/src/features/constants/aiModels.ts
@@ -216,3 +216,18 @@ export const openAITTSModels = ['tts-1', 'tts-1-hd', 'gpt-4o-mini-tts'] as const
 export function getOpenAITTSModels(): string[] {
   return [...openAITTSModels]
 }
+
+/**
+ * 指定されたAIサービスとモデルがマルチモーダル（画像入力）に対応しているかチェックする
+ * @param service AIサービス名
+ * @param model モデル名（省略可）
+ * @returns マルチモーダル対応の場合true
+ */
+export function isMultiModalCapable(service: AIService, model?: string): boolean {
+  const slideModels = slideConvertModels[service]
+  if (!slideModels) return false
+
+  if (!model) return slideModels.length > 0
+
+  return slideModels.includes(model)
+}