fix: reworked fine-tuning button and toggle in settings

Signed-off-by: Brian <[email protected]>

Author: bmahabirbu

packages/backend/package.json

@@ -55,7 +55,7 @@
           "type": "boolean",
           "default": false,
           "description": "Display InstructLab Tuning screens (experimental)",
-          "hidden": true
+          "hidden": false
         },
         "ai-lab.showGPUPromotion": {
           "type": "boolean",

packages/frontend/src/pages/instructlab/AboutInstructLab.svelte

@@ -10,6 +10,16 @@ import howInstructLabsSyntheticDataGenerationEnhancesLLM from '/@/lib/images/how
 import instructLabTitleImage from '/@/lib/images/instructLabTitleImage.png';
 import AboutInstructLabDiscoverCard from '../../lib/instructlab/AboutInstructLabDiscoverCard.svelte';
 import AboutInstructLabExploreCard from '../../lib/instructlab/AboutInstructLabExploreCard.svelte';
+import { configuration } from '/@/stores/extensionConfiguration';
+import { onMount } from 'svelte';
+
+let experimentalTuning = false;
+
+onMount(() => {
+  configuration.subscribe(val => {
+    experimentalTuning = val?.experimentalTuning ?? false;
+  });
+});
 
 function start(): void {
   router.goto('/tune/start');
@@ -19,6 +29,10 @@ const instructLabDocumentation = 'https://docs.instructlab.ai/';
 const instructLabHuggingFace = 'https://huggingface.co/instructlab';
 const instructLabSamples = '';
 
+async function enableFineTuning(): Promise<void> {
+  await studioClient.updateExtensionConfiguration({ experimentalTuning: true });
+}
+
 async function openInstructLabDocumentation(): Promise<void> {
   await studioClient.openURL(instructLabDocumentation);
 }
@@ -68,7 +82,11 @@ let cards: AboutInstructLabExploreCardInterface[] = [
 
 <NavPage title="About InstructLab" searchEnabled={false}>
   <div slot="additional-actions">
-    <Button icon={faPlusCircle} on:click={start}>Start Fine Tuning</Button>
+    {#if experimentalTuning}
+      <Button icon={faPlusCircle} on:click={start}>Start Fine Tuning</Button>
+    {:else}
+      <Button icon={faPlusCircle} on:click={enableFineTuning}>Enable Experimental Fine Tuning</Button>
+    {/if}
   </div>
   <div slot="content" class="flex flex-col min-w-full min-h-full">
     <div class="min-w-full min-h-full flex-1">