chore: added instructlab dashboard

Signed-off-by: Evzen Gasta <[email protected]>
containers · Dec 12, 2024 · 1f48eb1 · 1f48eb1
1 parent 6f36a61
commit 1f48eb1
Show file tree

Hide file tree

Showing 11 changed files with 255 additions and 0 deletions.
diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
@@ -29,6 +29,7 @@ import { Messages } from '@shared/Messages';
 import GPUPromotion from '/@/lib/notification/GPUPromotion.svelte';
 import NewInstructLabSession from '/@/pages/NewInstructLabSession.svelte';
 import LocalServer from './pages/server-information/LocalServer.svelte';
+import AboutInstructLab from './pages/instruct-lab/AboutInstructLab.svelte';
 
 router.mode.hash();
 
@@ -97,6 +98,9 @@ onDestroy(() => {
         </Route>
         {#if experimentalTuning}
           <!-- Tune with InstructLab -->
+          <Route path="/aboutInstructLab">
+            <AboutInstructLab />
+          </Route>
           <Route path="/tune/*" firstmatch>
             <Route path="/start">
               <NewInstructLabSession />

diff --git a/packages/frontend/src/lib/Navigation.svelte b/packages/frontend/src/lib/Navigation.svelte
@@ -11,6 +11,7 @@ import {
   faHouse,
   faGear,
 } from '@fortawesome/free-solid-svg-icons';
+import MyInstructLabIcon from '/@/lib/icons/InstructLabIcon.svelte';
 import { SettingsNavItem } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { configuration } from '../stores/extensionConfiguration';
@@ -81,6 +82,11 @@ onDestroy(() => {
       <div class="pl-3 mt-2 ml-[4px]">
         <span class="text-[color:var(--pd-secondary-nav-header-text)]">TUNING</span>
       </div>
+      <SettingsNavItem
+        icon={MyInstructLabIcon}
+        title="About InstructLab"
+        selected={meta.url.startsWith('/aboutInstructLab')}
+        href="/aboutInstructLab" />
       <SettingsNavItem
         icon={faGaugeHigh}
         title="Tune with InstructLab"

diff --git a/packages/frontend/src/lib/icons/InstructLabIcon.svelte b/packages/frontend/src/lib/icons/InstructLabIcon.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+interface Props {
+  size?: string;
+}
+
+let { size = '40' }: Props = $props();
+</script>
+
+<div role="img">
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 110.32513 76.001793"
+    version="1.1"
+    id="svg1"
+    xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    ><defs id="defs1"></defs><g id="layer1" transform="translate(-36.723946,-99.124995)"
+      ><g id="g1"
+        ><path
+          class="cls-2"
+          d="m 93.726338,173.93094 c -8.913455,0 -17.555707,-4.00471 -22.536754,-10.44122 -12.194982,-15.75675 -10.314657,-45.29951 -6.427452,-48.85223 v 0 c 4.303048,-3.93241 15.512665,-13.08089 26.659004,-13.08995 h 0.0089 c 11.851464,0 23.259954,9.56433 26.469164,12.50235 3.98665,3.64312 8.16313,33.56558 -2.17865,49.37655 -4.30304,6.58114 -12.52946,10.5045 -21.994349,10.5045 z m -2.305202,-70.48498 v 0 c -10.477377,0 -21.234995,8.80497 -25.375323,12.59272 v 0 c -1.084802,0.9944 -2.748163,7.93713 -2.196722,18.23372 0.3616,6.67152 1.988802,19.19194 8.841134,28.05117 4.637526,5.98448 12.701221,9.70895 21.036113,9.70895 8.823052,0 16.452832,-3.60694 20.403312,-9.64568 10.5045,-16.05506 4.99009,-44.64862 2.486,-46.93576 C 104.41164,104.3138 94.250658,103.44596 91.421136,103.44596 Z"
+          id="path24"
+          style="fill:currentColor;stroke:currentColor;stroke-width:2.39169;stroke-dasharray:none;stroke-opacity:1"
+        ></path
+        ><path
+          id="ellipse28"
+          style="fill:currentColor;stroke-width:0px"
+          class="cls-1"
+          d="m 79.940316,146.08772 a 3.5436857,5.0443277 0 0 1 -3.543686,5.04433 3.5436857,5.0443277 0 0 1 -3.543686,-5.04433 3.5436857,5.0443277 0 0 1 3.543686,-5.04432 3.5436857,5.0443277 0 0 1 3.543686,5.04432 z"
+        ></path
+        ><path
+          class="cls-1"
+          d="m 76.396632,151.57497 c -2.205765,0 -3.995688,-2.45886 -3.995688,-5.48728 0,-3.02839 1.789923,-5.48729 3.995688,-5.48729 2.205763,0 3.995685,2.4589 3.995685,5.48729 0,3.02842 -1.789922,5.48728 -3.995685,5.48728 z m 0,-10.0796 c -1.708564,0 -3.100725,2.06113 -3.100725,4.59232 0,2.53123 1.392161,4.59235 3.100725,4.59235 1.708561,0 3.100722,-2.06112 3.100722,-4.59235 0,-2.53119 -1.392161,-4.59232 -3.100722,-4.59232 z"
+          id="path29"
+          style="fill:currentColor;stroke:currentColor;stroke-width:0px"></path
+        ><path
+          id="ellipse29"
+          style="fill:currentColor;stroke-width:0px"
+          class="cls-1"
+          d="m 113.09005,146.08772 a 3.5436857,5.0443277 0 0 1 -3.54368,5.04433 3.5436857,5.0443277 0 0 1 -3.54369,-5.04433 3.5436857,5.0443277 0 0 1 3.54369,-5.04432 3.5436857,5.0443277 0 0 1 3.54368,5.04432 z"
+        ></path
+        ><path
+          class="cls-1"
+          d="m 109.54636,151.57497 c -2.20576,0 -3.99568,-2.45886 -3.99568,-5.48728 0,-3.02839 1.78992,-5.48729 3.99568,-5.48729 2.20577,0 3.99569,2.4589 3.99569,5.48729 0,3.02842 -1.78992,5.48728 -3.99569,5.48728 z m 0,-10.0796 c -1.70856,0 -3.10072,2.06113 -3.10072,4.59232 0,2.53123 1.39216,4.59235 3.10072,4.59235 1.70857,0 3.10073,-2.06112 3.10073,-4.59235 0,-2.53119 -1.39216,-4.59232 -3.10073,-4.59232 z"
+          id="path30"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-2"
+          d="m 119.30054,155.63394 h -14.80755 c -3.03744,0 -5.405924,-2.2871 -5.903126,-5.69519 l -1.65432,-11.47177 c -0.189832,-1.34696 0.21696,-2.68491 1.16616,-3.77873 1.148082,-1.32889 2.919926,-2.1244 4.736966,-2.1244 h 19.78859 c 1.97073,0 4.04089,1.00342 5.16185,2.48599 0.80456,1.07575 1.05768,2.32329 0.71417,3.51657 l -3.31769,11.47177 c -1.33792,4.6285 -3.93241,5.59576 -5.87601,5.59576 z M 102.82963,134.0193 c -1.37408,0 -2.76624,0.62375 -3.634084,1.61814 -0.47008,0.5424 -0.994403,1.43737 -0.822642,2.61258 l 1.654326,11.47177 c 0.31639,2.21481 1.82608,4.44769 4.45673,4.44769 h 14.80754 c 2.09728,0 3.60696,-1.52778 4.48385,-4.54715 l 3.31768,-11.47177 c 0.27118,-0.94919 -0.10848,-1.7447 -0.47912,-2.23288 -0.84072,-1.12095 -2.48601,-1.90744 -3.99569,-1.90744 h -19.78859 z"
+          id="path31"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-2"
+          d="M 80.690636,155.63394 H 65.883093 c -1.943603,0 -4.547127,-0.96726 -5.876007,-5.59576 L 56.6894,138.56641 c -0.343522,-1.19328 -0.09041,-2.44082 0.714162,-3.51657 1.12096,-1.49159 3.191124,-2.48599 5.161848,-2.48599 h 19.788591 c 1.817041,0 3.579846,0.79551 4.736965,2.1244 0.949204,1.09382 1.356002,2.43177 1.166164,3.77873 l -1.654324,11.47177 c -0.488161,3.40809 -2.865684,5.69519 -5.903129,5.69519 z M 62.56541,134.0193 c -1.509685,0 -3.154965,0.78645 -3.995688,1.90744 -0.37064,0.49719 -0.759361,1.28365 -0.47912,2.23288 l 3.317685,11.47177 c 0.867842,3.01937 2.377524,4.54711 4.483846,4.54711 h 14.807544 c 2.639686,0 4.140327,-2.23288 4.456727,-4.44769 l 1.654325,-11.47177 c 0.171757,-1.17521 -0.352563,-2.07014 -0.822642,-2.61254 -0.867842,-1.00345 -2.260006,-1.61818 -3.634086,-1.61818 H 62.56541 Z"
+          id="path32"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-2"
+          d="m 86.711286,144.6865 -0.37064,-1.03058 c 0.126554,-0.0451 3.145925,-1.11189 6.427452,-1.11189 3.281523,0 6.300887,1.06669 6.427448,1.11189 l -0.37064,1.03058 c 0,0 -2.974164,-1.04865 -6.056808,-1.04865 -3.082645,0 -6.029691,1.0396 -6.056812,1.04865 z"
+          id="path33"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-2"
+          d="m 109.79948,128.36022 c -2.72104,0 -3.9776,-0.93112 -4.5652,-1.79896 -0.35257,-0.52433 -0.57857,-1.28369 -0.32544,-1.70856 v 0 c 0.55144,-0.94017 1.23848,-1.55487 2.05208,-1.84416 0.84976,-0.3075 1.86224,-0.0994 2.712,0.56048 0.82265,0.5876 2.52217,2.51311 2.88377,3.38096 0.10848,0.26206 0.0904,0.56051 -0.0542,0.81361 -0.14463,0.25318 -0.38872,0.41585 -0.66896,0.452 -0.75936,0.0994 -1.43736,0.14453 -2.03401,0.14453 z m 1.41025,-0.84973 z m -4.91777,-2.10633 c 0.0452,0.15375 0.17175,0.44294 0.50624,0.72318 0.55144,0.45199 1.68144,0.9221 3.99568,0.73226 -0.5424,-0.72321 -1.46448,-1.74473 -1.97976,-2.11538 -0.37064,-0.28017 -0.904,-0.51527 -1.356,-0.35257 -0.42488,0.15376 -0.8136,0.48818 -1.15712,1.01251 z m -0.11754,0.18997 z"
+          id="path34"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-2"
+          d="m 76.161591,128.36022 c -0.605682,0 -1.283681,-0.0451 -2.034005,-0.14453 v 0 c -0.280238,-0.0362 -0.52432,-0.19885 -0.668959,-0.45199 -0.144629,-0.24396 -0.162737,-0.55146 -0.05426,-0.81362 0.361599,-0.86784 2.061123,-2.79336 2.901843,-3.39904 0.831682,-0.64182 1.844163,-0.84071 2.693926,-0.5424 0.804561,0.28017 1.500642,0.90399 2.043042,1.84417 0.253109,0.42486 0.02699,1.18422 -0.32544,1.70855 -0.57856,0.86784 -1.835122,1.79896 -4.565208,1.79896 z m -0.985362,-1.50062 c 2.314242,0.18997 3.444247,-0.28016 3.995685,-0.73226 0.334495,-0.28017 0.461042,-0.56048 0.506242,-0.72318 -0.343522,-0.52433 -0.73224,-0.86784 -1.157123,-1.01251 -0.451999,-0.16263 -0.985359,0.0724 -1.337921,0.3345 -0.53336,0.37966 -1.455442,1.40119 -1.997843,2.13345 z"
+          id="path35"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-2"
+          d="m 93.039298,168.2719 c 0,0 -0.0452,0 -0.07233,0 -5.749449,-0.0451 -8.759772,-5.73137 -8.886333,-5.97546 l -1.699524,-3.28154 2.748167,2.46795 c 0,0 1.916481,1.6995 4.131283,1.74471 v 0 c 2.006884,0.0273 3.064567,-2.94704 3.073608,-2.97417 l 0.632799,-1.78991 0.6328,1.78991 c 0,0 1.075765,2.97417 3.037445,2.97417 0.0089,0 0.02699,0 0.03615,0 2.23288,-0.0451 4.113207,-1.72663 4.131287,-1.74471 l 2.712,-2.45889 -1.66336,3.26346 c -0.12655,0.24395 -3.109767,5.97543 -8.823054,5.97543 z m -5.857929,-4.07704 c 1.301762,1.33791 3.263445,2.712 5.794648,2.73008 2.558325,0.0171 4.529046,-1.38312 5.839848,-2.74816 -0.64184,0.22585 -1.346961,0.38872 -2.106322,0.39774 -1.826082,0.0543 -3.064564,-1.41024 -3.733526,-2.54927 -0.668962,1.13903 -1.898403,2.58545 -3.733525,2.54927 -0.732243,-0.0171 -1.428323,-0.17186 -2.052083,-0.38872 z"
+          id="path36"
+          style="fill:currentColor;stroke:currentColor;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+        ></path
+        ><path
+          class="cls-2"
+          d="m 116.44396,163.57456 c 0.83243,-0.99467 1.17647,-1.48142 2.00683,-2.57083 0.21696,0.0451 0.38872,0.0813 0.47912,0.10865 8.74857,2.67681 28.46915,-22.69354 28.11444,-29.9134 -0.18081,-3.6793 -3.40808,-7.39476 -6.81617,-11.32714 -1.22944,-1.4193 -2.49504,-2.87474 -3.59792,-4.32113 -1.37409,-1.79896 -2.54929,-3.67931 -3.57985,-5.34266 -1.9888,-3.20015 -3.56176,-5.73137 -5.87601,-6.68057 -0.89496,-0.37064 -1.83512,-0.56953 -2.78432,-0.59665 -4.84545,-0.14453 -8.5609,4.12224 -9.79938,5.74043 -5.12569,-3.95049 -14.01202,-9.546265 -23.169554,-9.546265 h -0.0089 c -8.217375,0 -16.362428,4.691785 -22.401156,9.329295 -1.383123,-1.74473 -5.008169,-5.65904 -9.627616,-5.53248 -0.9492,0.0273 -1.889363,0.22584 -2.784323,0.59662 -1.907443,0.77747 -3.173046,2.81146 -4.646569,5.15283 -0.904,1.44639 -1.934562,3.08264 -3.182084,4.55616 -0.913041,1.07575 -1.907444,2.18768 -2.865684,3.26343 -4.601367,5.16188 -8.940574,10.02538 -9.175615,14.69908 -0.280241,5.69519 10.712419,20.26772 18.82131,26.57764 3.832965,2.98319 6.870409,4.06799 9.293135,3.32674 0.433921,-0.13565 1.600081,-0.38872 2.901843,-0.67801 0.759362,1.30176 1.572963,2.52217 2.431764,3.65217 0.831682,1.09383 1.771845,2.13342 2.802406,3.10975 3.244384,0.36534 4.043683,1.1708 4.782165,1.09372 l 1.383247,1.78242 c -2.287124,-1.5097 -5.641065,-5.11719 -7.223068,-7.16024 -1.645283,-2.13345 -3.028404,-4.50194 -4.176486,-7.01506 l -0.42488,0.0905 c -1.808004,0.39777 -3.118807,0.67801 -3.787766,0.88592 -0.515282,0.16263 -2.214803,-0.20774 -5.270329,-2.58545 -8.081772,-6.29185 -17.266428,-19.75241 -17.112745,-22.86219 0.153683,-3.10978 4.348244,-7.81057 8.054651,-11.96897 0.976322,-1.09385 1.988802,-2.22386 2.928965,-3.33579 1.464482,-1.71757 2.585443,-3.49846 3.570805,-5.08046 0.840723,-1.33794 1.979765,-3.16403 2.567365,-3.40809 0.406799,-0.16263 0.804561,-0.25317 1.2204,-0.26206 2.431763,-0.0632 4.96297,2.48599 6.07489,3.91431 l 0.271183,3.64312 c 4.70081,-4.21262 15.268586,-12.42096 25.565161,-12.43002 10.640095,0 21.325395,8.127 25.845405,12.24924 0.19888,0.18075 0.4068,0.47007 0.61472,0.84072 l 0.31638,-4.31208 c 1.08481,-1.38315 3.65217,-3.97762 6.07489,-3.91434 0.41584,0.0102 0.8136,0.0994 1.22041,0.26206 0.98536,0.40679 2.41368,2.70295 3.78776,4.91775 1.0848,1.74474 2.31424,3.72451 3.82392,5.69523 1.18425,1.54585 2.49505,3.06457 3.76969,4.52904 2.76625,3.19113 5.63193,6.49074 5.74041,8.64226 0.15368,3.10975 -9.03097,16.57034 -17.12178,22.86219 -3.05553,2.37751 -4.74601,2.74816 -5.27033,2.58545 -0.3345,-0.0994 -0.87688,-0.21696 -2.08825,-0.45199 -0.8588,2.31423 -1.91648,4.50191 -3.21824,6.48168 -1.10288,1.68142 -2.47697,3.18207 -4.06801,4.47481 l -0.85526,1.74898 c 3.48592,-2.34287 5.44995,-4.45158 6.46901,-5.51636 z"
+          id="path40"
+          style="fill:currentColor;stroke-width:0px"></path
+        ><path
+          class="cls-1"
+          d="m 91.140895,152.40667 h 3.661204 c 3.299605,0 2.585446,1.76281 2.585446,3.95049 0,2.18767 -1.509685,3.95049 -3.380966,3.95049 h -2.079205 c -1.871281,0 -3.380963,-1.76282 -3.380963,-3.95049 0,-2.18768 -0.714161,-3.95049 2.585443,-3.95049 z"
+          id="path49"
+          style="fill:currentColor;stroke-width:0px"></path
+        ></g
+      ></g
+    ></svg>
+</div>
diff --git a/packages/frontend/src/lib/images/fineTunningLargeModelsWithInstructLab.png b/packages/frontend/src/lib/images/fineTunningLargeModelsWithInstructLab.png
diff --git a/...s/frontend/src/lib/images/howInstructLabsSyntheticDataGenerationEnhancesLLM.png b/...s/frontend/src/lib/images/howInstructLabsSyntheticDataGenerationEnhancesLLM.png
diff --git a/packages/frontend/src/lib/images/instructLabArchitectureImplementationOverview.png b/packages/frontend/src/lib/images/instructLabArchitectureImplementationOverview.png
diff --git a/packages/frontend/src/lib/images/instructLabDemocratizingAIModelsAtScale.png b/packages/frontend/src/lib/images/instructLabDemocratizingAIModelsAtScale.png
diff --git a/packages/frontend/src/lib/images/instructLabTitleImage.png b/packages/frontend/src/lib/images/instructLabTitleImage.png
diff --git a/packages/frontend/src/pages/instruct-lab/AboutInstructLab.svelte b/packages/frontend/src/pages/instruct-lab/AboutInstructLab.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { NavPage, Button, Link } from '@podman-desktop/ui-svelte';
+import { studioClient } from '/@/utils/client';
+import { router } from 'tinro';
+import fineTunningLargeModelsWithInstructLab from '/@/lib/images/fineTunningLargeModelsWithInstructLab.png';
+import instructLabDemocratizingAIModelsAtScale from '/@/lib/images/instructLabDemocratizingAIModelsAtScale.png';
+import instructLabArchitectureImplementationOverview from '/@/lib/images/instructLabArchitectureImplementationOverview.png';
+import howInstructLabsSyntheticDataGenerationEnhancesLLM from '/@/lib/images/howInstructLabsSyntheticDataGenerationEnhancesLLM.png';
+import instructlabTitleImage from '/@/lib/images/instructlabTitleImage.png';
+import AboutInstructLabDiscoverCard from './AboutInstructLabDiscoverCard.svelte';
+import AboutInstructLabExploreCard from './AboutInstructLabExploreCard.svelte';
+
+function start(): void {
+  router.goto('/tune/start');
+}
+
+const instructLabDocumentation = 'https://docs.instructlab.ai/';
+const instructLabHuggingFace = 'https://huggingface.co/instructlab';
+const instructLabSamples = '';
+
+async function openInstructLabDocumentation(): Promise<void> {
+  await studioClient.openURL(instructLabDocumentation);
+}
+
+async function openInstructLabHuggingFace(): Promise<void> {
+  await studioClient.openURL(instructLabHuggingFace);
+}
+
+async function openSamples(): Promise<void> {
+  await studioClient.openURL(instructLabSamples);
+}
+</script>
+
+<NavPage title="About InstructLab" searchEnabled={false}>
+  <div slot="additional-actions">
+    <Button icon={faPlusCircle} on:click={start}>Start Fine Tuning</Button>
+  </div>
+  <div slot="content" class="flex flex-col min-w-full min-h-full">
+    <div class="min-w-full min-h-full flex-1">
+      <div class="text-[var(--pd-details-body-text)] mt-4 px-5 space-y-5" aria-label="inner-content">
+        <div class="flex bg-[var(--pd-content-card-bg)] rounded-md p-5 gap-3 flex-row flex-nowrap items-center">
+          <img
+            src={instructlabTitleImage}
+            class="max-h-[100%] w-auto max-w-[20%] object-contain rounded-md self-start"
+            alt={`InstructLab`} />
+          <div class="flex flex-col flex-1 h-100% self-start gap-4">
+            <div
+              class="text-[var(--pd-content-card-text)] truncate text-ellipsis overflow-hidden whitespace-pre-line flex flex-col gap-4">
+              <div>
+                Here you can create an InstructLab session to improve trained models with specialized knowledge and
+                skill tuning. InstructLab is a model-agnostic open source AI project that facilitates contributions to
+                Large Language Models (LLMs).
+              </div>
+              <div>Start by trying one of our samples or bring your own knowledge and skills files.</div>
+            </div>
+            <div class="flex flex-row justify-start items-center gap-3 mt-2">
+              <Link on:click={openInstructLabDocumentation}>Access InstructLab documentation</Link>
+              <Link on:click={openInstructLabHuggingFace}>View InstructLab on HuggingFace</Link>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-1 flex-col pt-5">
+          <p class="text-xl text-[var(--pd-details-body-text)]">
+            Discover from available <Link on:click={openSamples} class="font-bold">SAMPLES</Link>
+          </p>
+          <div class="flex flex-col pt-5 grow">
+            <div class="grid grid-cols-3 gap-x-2">
+              <AboutInstructLabDiscoverCard title={'asdas'} link={'asd'} image={instructlabTitleImage} desc={'aaaa'} />
+              <AboutInstructLabDiscoverCard title={'asdas'} link={'asd'} image={instructlabTitleImage} desc={'aaaa'} />
+              <AboutInstructLabDiscoverCard title={'asdas'} link={'asd'} image={instructlabTitleImage} desc={'aaaa'} />
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-1 flex-col py-5">
+          <p class="text-xl text-[var(--pd-details-body-text)]">Explore articles and videos</p>
+          <div
+            class="rounded-md mt-5 bg-[var(--pd-content-card-bg)] grid grid-cols-[repeat(auto-fit,minmax(170px,1fr))] p-2">
+            <AboutInstructLabExploreCard
+              title="InstructLab: Democratizing AI Models at Scale"
+              link="https://www.ibm.com/training/course/instructlab-democratizing-ai-models-at-scale-DL01001G"
+              image={instructLabDemocratizingAIModelsAtScale} />
+            <AboutInstructLabExploreCard
+              title="Fine Tuning Large Language Models with InstructLab"
+              link="https://www.youtube.com/watch?v=pu3-PeBG0YU"
+              image={fineTunningLargeModelsWithInstructLab}
+              isVideo={true} />
+            <AboutInstructLabExploreCard
+              title="How InstructLab’s synthetic data generation enhances LLMs"
+              link="https://www.redhat.com/en/blog/how-instructlabs-synthetic-data-generation-enhances-llms"
+              image={howInstructLabsSyntheticDataGenerationEnhancesLLM} />
+            <AboutInstructLabExploreCard
+              title="InstructLab Architecture & Implementation Overview"
+              link="https://blog.instructlab.ai/2024/11/instructlab-architecture-implementation-overview/"
+              image={instructLabArchitectureImplementationOverview} />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</NavPage>
diff --git a/packages/frontend/src/pages/instruct-lab/AboutInstructLabDiscoverCard.svelte b/packages/frontend/src/pages/instruct-lab/AboutInstructLabDiscoverCard.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { Button } from '@podman-desktop/ui-svelte';
+import { studioClient } from '/@/utils/client';
+
+interface Props {
+  title: string;
+  desc: string;
+  link: string;
+  image: string;
+}
+
+let { title, desc, link, image }: Props = $props();
+
+async function openLink(): Promise<void> {
+  await studioClient.openURL(link);
+}
+</script>
+
+<div
+  class="flex flex-col items-center justify-top rounded-md text-white relative bg-cover bg-center h-[300px]"
+  style={`background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 80%), url(${image});`}>
+  <div class="text-lg font-bold mt-2">{title}</div>
+  <div class="text-sm my-2">{desc}</div>
+  <Button on:click={openLink}>Get started</Button>
+</div>
diff --git a/packages/frontend/src/pages/instruct-lab/AboutInstructLabExploreCard.svelte b/packages/frontend/src/pages/instruct-lab/AboutInstructLabExploreCard.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+import { Button } from '@podman-desktop/ui-svelte';
+import { studioClient } from '/@/utils/client';
+
+interface Props {
+  title?: string;
+  link: string;
+  image: string;
+  isVideo?: boolean;
+}
+
+let { title, link, image, isVideo = false }: Props = $props();
+
+async function openLink(): Promise<void> {
+  await studioClient.openURL(link);
+}
+</script>
+
+<div
+  class="flex flex-col gap-4 m-2 bg-[var(--pd-content-card-carousel-card-bg)] hover:bg-[var(--pd-content-card-carousel-card-hover-bg)] rounded-md items-center">
+  <img src={image} class="object-contain rounded-md w-full" alt={`${title} image`} />
+  {#if !isVideo}
+    <div class="text-[var(--pd-content-card-carousel-card-header-text)] text-center font-semibold">{title}</div>
+  {/if}
+  <Button on:click={openLink} class="self-center mb-2">{isVideo ? 'Watch' : 'Read more'}</Button>
+</div>