From fbf9ca848b0b5207c987ada9d98c37db45089a82 Mon Sep 17 00:00:00 2001 From: Connor Leech Date: Tue, 19 Mar 2024 13:29:09 -0400 Subject: [PATCH 1/4] updates to copy --- src/components/HowItWorks/Slideshow.tsx | 9 +++++---- src/components/Leadspace/Leadspace.tsx | 3 +-- src/components/ReleaseCycle/ReleaseCycle.tsx | 7 ++++--- src/components/StartExperimenting/StartExperimenting.tsx | 8 ++++---- src/styles/globals.scss | 1 + 5 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/HowItWorks/Slideshow.tsx b/src/components/HowItWorks/Slideshow.tsx index ac90671..7b015c8 100644 --- a/src/components/HowItWorks/Slideshow.tsx +++ b/src/components/HowItWorks/Slideshow.tsx @@ -27,24 +27,25 @@ const steps = [ animationSize: 400, animationName: 'detect-gap', description: - 'Identifies skill and knowledge gaps in current model performance', + 'Experiment locally, on a quantized version of the latest InstructLab model, with adding new knowledge and skills.', }, { 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 taxonomy.', }, { animationSize: 320, animationName: 'synthetic-data', description: - 'Systematically generate synthetic data that covers all elements of the defined taxonomy', + 'InstructLab uses the new recipes to systematically generate synthetic data 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', + 'InstructLab merges 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.', }, ]; diff --git a/src/components/Leadspace/Leadspace.tsx b/src/components/Leadspace/Leadspace.tsx index 17cf9cb..a0d3239 100644 --- a/src/components/Leadspace/Leadspace.tsx +++ b/src/components/Leadspace/Leadspace.tsx @@ -27,8 +27,7 @@ const Leadspace: FC = ({ >

InstructLab

- InstructLab is an open source project designed to change how LLMs are - developed + An new community-based approach to build truly open-source LLMs

diff --git a/src/components/ReleaseCycle/ReleaseCycle.tsx b/src/components/ReleaseCycle/ReleaseCycle.tsx index 10a9b00..0a7d723 100644 --- a/src/components/ReleaseCycle/ReleaseCycle.tsx +++ b/src/components/ReleaseCycle/ReleaseCycle.tsx @@ -19,9 +19,10 @@ const ReleaseCycle: FC = () => ( >

Weekly release cycle for models and data

- Each week, the InstructLab model will be updated with the latest - contributions and shared on Hugging Face. All synthetic data generated - by the project to date will also be made available. + Each week, the InstructLab model will be updated with the latest contributions of skills and knowledge from the community, resulting in a new state of the art model. +

+

+ Each latest version will be shared on Hugging Face, and all synthetic data generated by the project to date will also be made available.

= ({ onCtaClicked }) => ( >

Join the community

- Downloading the CLI and experimenting with new skills and knowledge is - a great way to get involved. You can also contribute synthetic data - directly. + Downloading the Lab CLI and experimenting with adding new skills and + knowledge is a great way to get started. You can also get involved by + contributing new skills, knowledge, or synthetic data directly.

diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 2cc651b..cc6550a 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -55,6 +55,7 @@ h2 { p { @include type-style('heading-03', true); + margin-bottom: 24px; } .cds--btn { From 67f22a0e483763dfc29b6ac8828dea69b26512c5 Mon Sep 17 00:00:00 2001 From: Connor Leech Date: Tue, 19 Mar 2024 13:42:06 -0400 Subject: [PATCH 2/4] removing ? --- src/components/HowItWorks/Slideshow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HowItWorks/Slideshow.tsx b/src/components/HowItWorks/Slideshow.tsx index 7b015c8..fe49910 100644 --- a/src/components/HowItWorks/Slideshow.tsx +++ b/src/components/HowItWorks/Slideshow.tsx @@ -140,7 +140,7 @@ const Slideshow: FC = () => { ) : null}
-

How it works?

+

How it works

{steps.map((d, i) => ( From c4e4673c131db460d68bfd507af8c12738bb3cc9 Mon Sep 17 00:00:00 2001 From: Stanislav Pelak Date: Wed, 20 Mar 2024 11:26:08 +0100 Subject: [PATCH 3/4] Release cycle diagram refactored --- .../graphics/ReleaseCycleDiagram.module.scss | 78 +++++++++ .../graphics/ReleaseCycleDiagram.tsx | 159 +++++++++--------- 2 files changed, 153 insertions(+), 84 deletions(-) diff --git a/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.module.scss b/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.module.scss index 31a949e..662b6ef 100644 --- a/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.module.scss +++ b/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.module.scss @@ -1,3 +1,6 @@ +@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/type' as *; + .releaseCycleDiagram { position: relative; display: flex; @@ -5,4 +8,79 @@ height: 100%; align-items: center; justify-content: center; + + .labelsWrapper { + align-items: center; + position: absolute; + height: 100%; + width: 100%; + max-width: 559px; + display: flex; + } + .labels { + position: absolute; + aspect-ratio: 559/446; + width: 100%; + + > div { + position: absolute; + } + + .title { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 210%; + } + + .img1 { + top: 22%; + left: 50%; + transform: translateX(-50%); + max-width: 40%; + text-align: center; + } + + .img2 { + top: 103%; + right: 11.5%; + max-width: 40%; + text-align: center; + transform: translateX(50%); + } + + .img3 { + top: 103%; + left: 11.5%; + max-width: 40%; + text-align: center; + transform: translateX(-50%); + } + + .arrow1 { + top: 40%; + right: -4%; + transform: rotate(90deg); + max-width: 40%; + text-align: center; + } + + .arrow2 { + bottom: 17%; + left: 50%; + transform: translateX(-50%); + max-width: 40%; + text-align: center; + } + + .arrow3 { + top: 40%; + left: -8%; + transform: rotate(-90deg); + max-width: 40%; + text-align: center; + } + } } \ No newline at end of file diff --git a/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.tsx b/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.tsx index 80b31fd..f42702a 100644 --- a/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.tsx +++ b/src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.tsx @@ -1,13 +1,19 @@ 'use client'; import { cubicBezier, motion, useInView } from 'framer-motion'; -import { FC, useCallback, useMemo, useRef } from 'react'; +import { FC, useCallback, useMemo, useRef, useState } from 'react'; import styles from './ReleaseCycleDiagram.module.scss'; +import { useResizeObserver } from '@react-hookz/web'; const ReleaseCycleDiagram: FC = () => { const wrapperRef = useRef(null); const isInView = useInView(wrapperRef, { once: true }); + const [baseFontSize, setBaseFontSize] = useState(16); + + useResizeObserver(wrapperRef, entry => { + setBaseFontSize(entry.contentRect.width / 35); + }); const animationPhases: Record = useMemo( () => ({ @@ -61,227 +67,212 @@ const ReleaseCycleDiagram: FC = () => { return (
+
+
+ InstructLab + + Experiment with adding skills on a local model + + + Submit perfected skills to InstructLab project + + + InstructLab project updates main model + + + New skills recipes + + + Approved skills + + + + New SoTA model version + +
+
+ {/* Arrow 1 */} {/* Arrow 2 */} + - {/* Arrow 3 */} - {/* InstructLab */} - - - {/* Line 1 label */} - - - {/* Line 2 label */} - - - {/* Line 3 label */} - - - {/* Img1 */} + {/* Img 1 */} - - - + + + - {/* Img1 label */} - - {/* Img2 */} + {/* Img 2 */} - + - {/* Img2 label */} - - {/* Img3 */} + {/* Img 3 */} - + - {/* Img3 label */} - From e4ef25f820666c1878be3912f78ba40ba68aeef8 Mon Sep 17 00:00:00 2001 From: Stanislav Pelak Date: Wed, 20 Mar 2024 11:32:12 +0100 Subject: [PATCH 4/4] Slideshow copy & styling --- .../HowItWorks/Slideshow.module.scss | 6 +--- src/components/HowItWorks/Slideshow.tsx | 35 ++++++++++++++----- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/components/HowItWorks/Slideshow.module.scss b/src/components/HowItWorks/Slideshow.module.scss index 98c28ff..fd109d1 100644 --- a/src/components/HowItWorks/Slideshow.module.scss +++ b/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%; - } } } diff --git a/src/components/HowItWorks/Slideshow.tsx b/src/components/HowItWorks/Slideshow.tsx index fe49910..3542aaf 100644 --- a/src/components/HowItWorks/Slideshow.tsx +++ b/src/components/HowItWorks/Slideshow.tsx @@ -26,26 +26,45 @@ const steps = [ { animationSize: 400, animationName: 'detect-gap', - description: - 'Experiment locally, on a quantized version of the latest InstructLab model, with adding new knowledge and skills.', + description: ( + <> + Experiment locally, on a quantized version of the latest InstructLab + model, with adding new knowledge and skills + + ), }, { animationSize: 450, animationName: 'taxonomy', - 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 taxonomy.', + 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 taxonomy + + ), }, { animationSize: 320, animationName: 'synthetic-data', - description: - 'InstructLab uses the new recipes to systematically generate synthetic data for the new capabilities - and this data is released to the community.', + description: ( + <> + InstructLab uses the new recipes to systematically generate{' '} + synthetic data for the new capabilities - and this data + is released to the community + + ), }, { animationSize: 400, animationName: 'fine-tune', - description: - 'InstructLab merges 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.', + description: ( + <> + InstructLab merges 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 + + ), }, ];