Merge pull request #3 from instruct-lab/main

Test workflow

.github/workflows/nextjs.yml

@@ -0,0 +1,96 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main", "release"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Static HTML export with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    if: github.ref == 'refs/heads/release'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

next.config.js

@@ -1,12 +1,44 @@
 /** @type {import('next').NextConfig} */
+
+const path = require('path'); // eslint-disable-line @typescript-eslint/no-var-requires
+
 const nextConfig = {
   output: 'export',
   distDir: 'docs',
   reactStrictMode: true,
+
+  // GitHub pages
+  rewrites: () => [
+    {
+      source: '/website',
+      destination: '/',
+    },
+  ],
+
   compiler: {
     // Enables the styled-components SWC transform
     styledComponents: true,
   },
+
+  images: {
+    unoptimized: true,
+  },
+
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      // Exclude files in the public folder, as those are used directly as regular images
+      exclude: [path.join(__dirname, 'public')],
+      use: {
+        loader: '@svgr/webpack',
+        options: {
+          dimensions: false,
+        },
+      },
+    });
+
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -19,6 +19,7 @@
     "react-intersection-observer": "^9.8.1"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "20.11.26",
     "@types/react": "18.2.65",
     "@types/react-dom": "18.2.21",

src/components/HowItWorks/InfographicAnimation/constant.js → src/components/HowItWorks/InfographicAnimation/constant.ts

@@ -1,25 +1,25 @@
-const taxonomy_0 = '/assets/taxonomy/layer_0.svg';
-const taxonomy_0_1 = '/assets/taxonomy/layer_0_1.svg';
-const taxonomy_1 = '/assets/taxonomy/layer_1.svg';
-const taxonomy_1_1 = '/assets/taxonomy/layer_1_1.svg';
-const taxonomy_2 = '/assets/taxonomy/layer_2.svg';
-const taxonomy_2_0 = '/assets/taxonomy/layer_2_0.svg';
-const taxonomy_3 = '/assets/taxonomy/layer_3.svg';
-const taxonomy_3_0 = '/assets/taxonomy/layer_3_0.svg';
+import taxonomy_0 from './assets/taxonomy/layer_0.svg';
+import taxonomy_0_1 from './assets/taxonomy/layer_0_1.svg';
+import taxonomy_1 from './assets/taxonomy/layer_1.svg';
+import taxonomy_1_1 from './assets/taxonomy/layer_1_1.svg';
+import taxonomy_2 from './assets/taxonomy/layer_2.svg';
+import taxonomy_2_0 from './assets/taxonomy/layer_2_0.svg';
+import taxonomy_3 from './assets/taxonomy/layer_3.svg';
+import taxonomy_3_0 from './assets/taxonomy/layer_3_0.svg';
 
-const detectGap_0 = '/assets/detect-gap/layer_0.svg';
-const detectGap_1 = '/assets/detect-gap/layer_1.svg';
-const detectGap_2 = '/assets/detect-gap/layer_2.svg';
-const detectGap_4 = '/assets/detect-gap/layer_4.svg';
-const detectGap_5 = '/assets/detect-gap/layer_5.svg';
-const detectGap_6 = '/assets/detect-gap/layer_6.svg';
+import detectGap_0 from './assets/detect-gap/layer_0.svg';
+import detectGap_1 from './assets/detect-gap/layer_1.svg';
+import detectGap_2 from './assets/detect-gap/layer_2.svg';
+import detectGap_4 from './assets/detect-gap/layer_4.svg';
+import detectGap_5 from './assets/detect-gap/layer_5.svg';
+import detectGap_6 from './assets/detect-gap/layer_6.svg';
 
-const blockRed = '/assets/fine-tune/block_red.svg';
-const blockViolet = '/assets/fine-tune/block_v.svg';
+import blockRed from './assets/fine-tune/block_red.svg';
+import blockViolet from './assets/fine-tune/block_v.svg';
 
-const modelStack_0 = '/assets/model-stack/layer_0.svg';
-const modelStack_1 = '/assets/model-stack/layer_1.svg';
-const modelStack_2 = '/assets/model-stack/layer_2.svg';
+import modelStack_0 from './assets/model-stack/layer_0.svg';
+import modelStack_1 from './assets/model-stack/layer_1.svg';
+import modelStack_2 from './assets/model-stack/layer_2.svg';
 
 export const infographicList = {
   taxonomy: {

src/components/HowItWorks/InfographicAnimation/index.js → src/components/HowItWorks/InfographicAnimation/index.tsx

@@ -1,32 +1,39 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import { FC, Fragment, useEffect, useState } from 'react';
 import { infographicList } from './constant';
 
 import styles from './InfographicAnimation.module.scss';
 
+type Layer = any; // eslint-disable-line
+
 const getPos = (
   //get position of the layer
-  dir,
-  layer,
-  originalSize,
+  dir: string,
+  layer: Layer,
+  originalSize: number[],
   val = undefined,
 ) => {
   const idx = dir === 'top' ? 1 : 0;
   const pos = typeof val === 'number' ? val : layer.pos?.[idx] || 0;
   return pos === 0 ? '0' : `${(pos / originalSize[idx]) * 100}%`;
 };
 
-const LayerImg = ({ layer, size, originalSize, isAnimOn }) => {
+const LayerImg: FC<{
+  layer: Layer; // eslint-disable-line
+  size: number;
+  originalSize: number[];
+  isAnimOn: boolean;
+}> = ({ layer, size, originalSize, isAnimOn }) => {
   const [targetStyle, setTargetStyle] = useState({});
-  const [animList, setAnimList] = useState(null);
-  const layerImg = layer.img;
+  const [animList, setAnimList] = useState<any[] | null>(null); // eslint-disable-line
+  const Img = layer.img;
 
-  const resetAnimation = (left, top, width) => {
+  const resetAnimation = (left: string, top: string, width: string) => {
     setTargetStyle({ left: left, top: top, width: width });
     animList?.map(d => clearTimeout(d));
     setAnimList(null);
   };
 
-  const setAnimation = (left, top, width) => {
+  const setAnimation = (left: string, top: string, width: string) => {
     if (layer.animation) {
       setTargetStyle({
         ...layer.animation[0], //base style to create transition
@@ -85,19 +92,28 @@ const LayerImg = ({ layer, size, originalSize, isAnimOn }) => {
   }, [animList]);
 
   return (
-    <img
+    <Img
       alt=""
       className={`${styles.animLayer} ${
         isAnimOn && layer.class ? layer.class : ''
       }`}
-      src={layerImg}
       style={targetStyle}
     />
   );
 };
 
-const InfographicAnimation = ({ size, kind, isOn = true }) => {
-  const [animList, setAnimList] = useState(null);
+export type InfographicAnimationProps = {
+  size: number;
+  kind: keyof typeof infographicList;
+  isOn?: boolean;
+};
+
+const InfographicAnimation: FC<InfographicAnimationProps> = ({
+  size,
+  kind,
+  isOn = true,
+}) => {
+  const [animList, setAnimList] = useState<any>(null); // eslint-disable-line
   const [isAnimOn, setIsAnimOn] = useState(false);
   const [animWidth, setAnimWidth] = useState(size);
 
@@ -119,7 +135,7 @@ const InfographicAnimation = ({ size, kind, isOn = true }) => {
         setAnimWidth(size);
       }
 
-      setAnimList(() => ({ ...infographicList[kind] }));
+      setAnimList(() => ({ ...infographicList[kind] }) as any); // eslint-disable-line
       resetAnim();
     }
   }, [kind, size]);
@@ -146,7 +162,7 @@ const InfographicAnimation = ({ size, kind, isOn = true }) => {
           className={styles.animation}
           style={{ width: `${animWidth}px`, aspectRatio: animList.ratio }}
         >
-          {animList.layers.map((d, i) => (
+          {animList.layers.map((d: Layer, i: number) => (
             <Fragment key={`anim_${kind}_${i}`}>
               <LayerImg
                 layer={d}

src/components/HowItWorks/Slideshow.module.scss

@@ -101,7 +101,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
 
     .order {
       @include type-style("heading-05");
@@ -119,10 +119,6 @@
       word-break: auto-phrase;
       padding-right: 1rem;
       margin-right: auto;
-
-      @include breakpoint(xlg) {
-        max-width: 50%;
-      }
     }
   }
 

src/components/HowItWorks/Slideshow.tsx

@@ -15,7 +15,9 @@ import {
   useState,
 } from 'react';
 import DebugAnimationContext from './utils/DebugAnimationContext';
-import InfographicAnimation from './InfographicAnimation';
+import InfographicAnimation, {
+  InfographicAnimationProps,
+} from './InfographicAnimation';
 import classNames from 'classnames';
 
 import styles from './Slideshow.module.scss';
@@ -26,25 +28,45 @@ const steps = [
   {
     animationSize: 400,
     animationName: 'detect-gap',
-    description:
-      'Identifies skill and knowledge gaps in current model performance',
+    description: (
+      <>
+        Experiment locally, on a quantized version of the latest InstructLab
+        model, with adding new <strong>knowledge and skills</strong>
+      </>
+    ),
   },
   {
     animationSize: 450,
     animationName: 'taxonomy',
-    description: 'Define a taxonomy that describes a given gap',
+    description: (
+      <>
+        Once a synthetic data recipe is ready, submit a pull request to
+        contribute back to the InstructLab repository, which is organized in a
+        structured <strong>taxonomy</strong>
+      </>
+    ),
   },
   {
     animationSize: 320,
     animationName: 'synthetic-data',
-    description:
-      'Systematically generate synthetic data that covers all elements of the defined taxonomy',
+    description: (
+      <>
+        InstructLab uses the new recipes to systematically generate{' '}
+        <strong>synthetic data</strong> for the new capabilities - and this data
+        is released to the community
+      </>
+    ),
   },
   {
     animationSize: 400,
     animationName: 'fine-tune',
-    description:
-      'Fine-tune the model with the generated synthetic data to teach it the new skill',
+    description: (
+      <>
+        InstructLab <strong>merges</strong> the new skill back into the base
+        model by updating it using all synthetic data generated to date, and
+        releases a new model version to the community
+      </>
+    ),
   },
 ];
 
@@ -139,7 +161,7 @@ const Slideshow: FC<SlideshowProps> = () => {
         ) : null}
 
         <div className={styles.slideshow}>
-          <h2>How it works?</h2>
+          <h2>How it works</h2>
           <div className={styles.slideshow__slides}>
             <div className={styles.cardWrapper}>
               {steps.map((d, i) => (
@@ -153,7 +175,9 @@ const Slideshow: FC<SlideshowProps> = () => {
                   <div className={styles.animWrapper}>
                     <InfographicAnimation
                       size={d.animationSize}
-                      kind={d.animationName}
+                      kind={
+                        d.animationName as InfographicAnimationProps['kind']
+                      }
                       isOn={currentSlide === i}
                     />
                   </div>