Ollama: JSON mode is dangerous, say it. Fixes #749

enricoros · Feb 4, 2025 · 42b00f4 · 42b00f4
1 parent 749c7ce
commit 42b00f4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/common/components/forms/FormSwitchControl.tsx b/src/common/components/forms/FormSwitchControl.tsx
@@ -10,7 +10,7 @@ import { FormLabelStart } from './FormLabelStart';
  */
 export function FormSwitchControl(props: {
   title: string | React.JSX.Element, description?: string | React.JSX.Element,
-  on?: string, off?: string, fullWidth?: boolean,
+  on?: React.ReactNode, off?: string, fullWidth?: boolean,
   checked: boolean, onChange: (on: boolean) => void,
   disabled?: boolean,
   tooltip?: React.ReactNode,

diff --git a/src/modules/llms/vendors/ollama/OllamaServiceSetup.tsx b/src/modules/llms/vendors/ollama/OllamaServiceSetup.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Button, FormControl, Typography } from '@mui/joy';
+import { Button, FormControl, Tooltip, Typography } from '@mui/joy';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 import type { DModelsServiceId } from '~/common/stores/llms/modelsservice.types';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
@@ -50,24 +51,31 @@ export function OllamaServiceSetup(props: { serviceId: DModelsServiceId }) {
       onChange={text => updateSettings({ ollamaHost: text })}
     />
 
+    <FormControl orientation='horizontal'>
+      <FormLabelStart title='Image Input' description='PNG only' />
+      <Typography level='body-sm'>
+        Images are well supported (e.g. try Llama3.2-vision). However only the PNG format is accepted by the Ollama API.
+        For attachments, use the &quot;Original&quot; format option.
+      </Typography>
+    </FormControl>
+
     <FormSwitchControl
-      title='JSON Output' on='Enabled' fullWidth
-      description={<Link level='body-sm' href='https://github.com/ollama/ollama/blob/main/docs/api.md#generate-a-chat-completion' target='_blank'>Information</Link>}
+      title='JSON mode'
+      on={<Typography level='title-sm' endDecorator={<WarningRoundedIcon sx={{ color: 'danger.solidBg' }} />}>Force JSON</Typography>}
+      off='Off (default)'
+      fullWidth
+      description={
+        <Tooltip arrow title='Models will output only JSON, including empty {} objects.'>
+          <Link level='body-sm' href='https://github.com/ollama/ollama/blob/main/docs/api.md#generate-a-chat-completion' target='_blank'>Information</Link>
+        </Tooltip>
+      }
       checked={ollamaJson}
       onChange={on => {
         updateSettings({ ollamaJson: on });
         refetch();
       }}
     />
 
-    <FormControl orientation='horizontal'>
-      <FormLabelStart title='Image Input' description='Information' />
-      <Typography level='body-xs'>
-        Images are well supported (e.g. try Llama3.2-vision). However only the PNG format is accepted by the Ollama API.
-        For attachments, use the &quot;Original&quot; format option.
-      </Typography>
-    </FormControl>
-
     <SetupFormRefetchButton
       refetch={refetch} disabled={!shallFetchSucceed || isFetching} loading={isFetching} error={isError}
       leftButton={