Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6281 from menloresearch/fix/handle-vision-remote-model

Browse Source 
fix: handle manual toggle vision for remote model
This commit is contained in:
Faisal Amir 2025-08-25 13:36:27 +07:00 committed by GitHub
commit 2472cc949a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 56 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web-app/src/containers/ChatInput.tsx
View File

@ -107,9 +107,15 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
if (selectedProvider === 'llamacpp') { if (selectedProvider === 'llamacpp') {
const hasLocalMmproj = await checkMmprojExists(selectedModel.id) const hasLocalMmproj = await checkMmprojExists(selectedModel.id)
setHasMmproj(hasLocalMmproj) setHasMmproj(hasLocalMmproj)
} else { }
// For non-llamacpp providers, only check vision capability // For non-llamacpp providers, only check vision capability
else if (
selectedProvider !== 'llamacpp' &&
selectedModel?.capabilities?.includes('vision')
) {
setHasMmproj(true) setHasMmproj(true)
} else {
setHasMmproj(false)
} }
} catch (error) { } catch (error) {
console.error('Error checking mmproj:', error) console.error('Error checking mmproj:', error)
@ -119,7 +125,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
} }
checkMmprojSupport() checkMmprojSupport()
}, [selectedModel?.id, selectedProvider]) }, [selectedModel?.capabilities, selectedModel?.id, selectedProvider])
// Check if there are active MCP servers // Check if there are active MCP servers
const hasActiveMCPServers = connectedServers.length > 0 || tools.length > 0 const hasActiveMCPServers = connectedServers.length > 0 || tools.length > 0
@ -535,11 +541,17 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
)} )}
{/* File attachment - show only for models with mmproj */} {/* File attachment - show only for models with mmproj */}
{hasMmproj && ( {hasMmproj && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div <div
className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1" className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"
onClick={handleAttachmentClick} onClick={handleAttachmentClick}
> >
<IconPhoto size={18} className="text-main-view-fg/50" /> <IconPhoto
size={18}
className="text-main-view-fg/50"
/>
<input <input
type="file" type="file"
ref={fileInputRef} ref={fileInputRef}
@ -548,16 +560,22 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
onChange={handleFileChange} onChange={handleFileChange}
/> />
</div> </div>
</TooltipTrigger>
<TooltipContent>
<p>{t('visions')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)} )}
{/* Microphone - always available - Temp Hide */} {/* Microphone - always available - Temp Hide */}
{/* <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"> {/* <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
<IconMicrophone size={18} className="text-main-view-fg/50" /> <IconMicrophone size={18} className="text-main-view-fg/50" />
</div> */} </div> */}
{selectedModel?.capabilities?.includes('embeddings') && ( {selectedModel?.capabilities?.includes('embeddings') && (
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"> <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
<IconCodeCircle2 <IconCodeCircle2
size={18} size={18}
className="text-main-view-fg/50" className="text-main-view-fg/50"
@ -601,7 +619,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
return ( return (
<div <div
className={cn( className={cn(
'h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1 cursor-pointer relative', 'h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1 cursor-pointer relative',
isOpen && 'bg-main-view-fg/10' isOpen && 'bg-main-view-fg/10'
)} )}
> >
@ -632,7 +650,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"> <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
<IconWorld <IconWorld
size={18} size={18}
className="text-main-view-fg/50" className="text-main-view-fg/50"
@ -649,7 +667,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1"> <div className="h-7 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
<IconAtom <IconAtom
size={18} size={18}
className="text-main-view-fg/50" className="text-main-view-fg/50"

4
web-app/src/containers/DropdownModelProvider.tsx
View File

@ -414,7 +414,9 @@ const DropdownModelProvider = ({
</span> </span>
</button> </button>
</PopoverTrigger> </PopoverTrigger>
{currentModel?.settings && provider && ( {currentModel?.settings &&
provider &&
provider.provider === 'llamacpp' && (
<ModelSetting <ModelSetting
model={currentModel as Model} model={currentModel as Model}
provider={provider} provider={provider}

8
web-app/src/containers/dialogs/EditModel.tsx
View File

@ -177,21 +177,13 @@ export const DialogEditModel = ({
{t('providers:editModel.vision')} {t('providers:editModel.vision')}
</span> </span>
</div> </div>
<Tooltip>
<TooltipTrigger>
<Switch <Switch
id="vision-capability" id="vision-capability"
checked={capabilities.vision} checked={capabilities.vision}
disabled={true}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
handleCapabilityChange('vision', checked) handleCapabilityChange('vision', checked)
} }
/> />
</TooltipTrigger>
<TooltipContent>
{t('providers:editModel.notAvailable')}
</TooltipContent>
</Tooltip>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">

2
web-app/src/hooks/useModelProvider.ts
View File

@ -241,7 +241,7 @@ export const useModelProvider = create<ModelProviderState>()(
} }
// Migrate model settings // Migrate model settings
if (provider.models) { if (provider.models && provider.provider === 'llamacpp') {
provider.models.forEach((model) => { provider.models.forEach((model) => {
if (!model.settings) model.settings = {} if (!model.settings) model.settings = {}