enhancement: add label experimental for optimize setting

web-app/src/containers/ModelSetting.tsx

@@ -24,47 +24,47 @@
 }
 
 export function ModelSetting({
   model,
   provider,
   smallIcon,
 }: ModelSettingProps) {
   const { updateProvider } = useModelProvider()
   const { t } = useTranslation()
   const serviceHub = useServiceHub()
 
   const [isPlanning, setIsPlanning] = useState(false)
 
   // Create a debounced version of stopModel that waits 500ms after the last call
   const debouncedStopModel = debounce((modelId: string) => {
     serviceHub.models().stopModel(modelId)
   }, 500)
 
   const handlePlanModelLoad = async () => {
     if (provider.provider !== 'llamacpp') {
       console.warn('planModelLoad is only available for llamacpp provider')
       return
     }
     setIsPlanning(true)
     try {
       // Read the model config to get the actual model path
       const modelConfig = await serviceHub.app().readYaml<{
         model_path: string
       }>(`llamacpp/models/${model.id}/model.yml`)
 
       if (modelConfig && modelConfig.model_path) {
         const result = await serviceHub
           .models()
           .planModelLoad(modelConfig.model_path)
 
         // Apply the recommended settings to the model sequentially to avoid race conditions
         const settingsToUpdate: Array<{
           key: string
           value: number | boolean
         }> = []
 
         if (model.settings?.ngl && result.gpuLayers !== undefined) {
           settingsToUpdate.push({ key: 'ngl', value: result.gpuLayers })
         }
 
         if (model.settings?.ctx_len && result.maxContextLength !== undefined) {
           settingsToUpdate.push({
@@ -242,11 +242,18 @@
           {provider.provider === 'llamacpp' && (
             <div className="pb-4 border-b border-main-view-fg/10 my-4">
               <div>
-                <h3 className="font-medium mb-1">Optimize Settings</h3>
-                <p className="text-main-view-fg/70 text-xs mb-3">
-                  Analyze your system and model, then apply optimal loading
-                  settings automatically
-                </p>
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium">Optimize Settings</h3>
+                    <div className="text-xs bg-main-view-fg/10 border border-main-view-fg/20 text-main-view-fg/70 rounded-full py-0.5 px-2">
+                      <span>{t('mcp-servers:experimental')}</span>
+                    </div>
+                  </div>
+                  <p className="text-main-view-fg/70 text-xs mb-3">
+                    Analyze your system and model, then apply optimal loading
+                    settings automatically
+                  </p>
+                </div>
                 <Button
                   onClick={handlePlanModelLoad}
                   disabled={isPlanning}