Merge pull request #99 from oslabs-beta/austin-CSS2

feat: added Winston prof pic, 3rd demo with MLflow screenshot, styling fixes

Author: yiqunzheng

mlflow-site/public/assets/mlflow-ui-screenshot-new.png

@@ -5,10 +5,12 @@ const Demo = () => {
   const demoCardHeaders = [
     'Manage experiments',
     'Complete workflow',
+    'Visualize results in the MLflow UI'
   ];
   const demoCardBlurbs = [
     'Create experiments with MLflow.js.  Using built-in workflows, manage complex operations easily.',
     'Use MLflow.js to support a full ML project with TensorFlow.js.  Log hyperparameters and key metrics during each training step.  Evaluate model performance and register succesful models.',
+    'Once the run completes, the MLflow UI provides powerful visualization tools to analyze experiments.  Compare training and testing metrics across different runs to track performance patterns, or create custom charts that combine any logged hyperparameters and metrics to identify optimal model configurations'
   ];
   const demoCardVideos = [
     'https://player.vimeo.com/video/1023585657',

mlflow-site/public/assets/winstonpfp.png

@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 const DemoCard = ({
   header,
   blurb,
@@ -8,29 +10,48 @@ const DemoCard = ({
   header: string;
   video: string;
 }) => {
-  return (
-    <div className="demoCard">
-      <div style={{ padding: '56.25% 0 0 0', position: 'relative' }}>
-        <iframe
-          src={video}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-          }}
-          allow="autoplay; fullscreen; picture-in-picture"
-          allowFullScreen
-          title="Vimeo Video Player"
-        />
+  if (video !== undefined) {
+    return (
+      <div className="demoCard">
+        <div style={{ padding: '56.25% 0 0 0', position: 'relative'}}>
+          <iframe
+            className="vimeoPlayer"
+            src={video}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowFullScreen
+            title="Vimeo Video Player"
+          />
+        </div>
+        <div className="demoCardText">
+          <div className="demoCardHeader">{header}</div>
+          <div className="demoCardInfo">{blurb}</div>
+        </div>
       </div>
-      <div className="demoCardText">
-        <div className="demoCardHeader">{header}</div>
-        <div className="demoCardInfo">{blurb}</div>
+    );
+  }
+  else {
+    return (
+      <div className="demoCard" id="MLflow-ui-screenshot">
+        <Image
+          src={'/assets/mlflow-ui-screenshot-new.png'}
+          width={1089}
+          height={845}
+          alt='MLflow UI'
+        ></Image>
+        <div className="demoCardText">
+          <div className="demoCardHeader">{header}</div>
+          <div className="demoCardInfo">{blurb}</div>
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
 };
 
 export default DemoCard;

mlflow-site/src/app/components/Demo.tsx

@@ -8,8 +8,8 @@ const NavBar = () => {
       <div className='navBarMlflow'>
         <Image
           src={'/assets/MLflow-js-logo.png'}
-          width={100}
-          height={32}
+          width={965}
+          height={289}
           alt='G'
           className='mlflow-logo'
         />

mlflow-site/src/app/components/DemoCard.tsx

@@ -30,7 +30,7 @@ const Team = () => {
       name: 'Winston Ludlam',
       github: 'https://github.com/winjolu/',
       linkedIn: 'https://www.linkedin.com/in/wjludlam/',
-      pfp: '',
+      pfp: '/assets/winstonpfp.png',
     },
   ];
 

mlflow-site/src/app/components/NavBar.tsx

@@ -164,6 +164,7 @@ body {
   grid-row: 3;
   width: 100%;
   height: 100%;
+  text-align: center;
 }
 
 .team {
@@ -309,6 +310,7 @@ body {
 @media (max-width: 1000px) {
   .demoCardText {
     margin-top: 0.8rem;
+    margin-bottom: 4rem;
   }
 }
 
@@ -327,6 +329,14 @@ body {
   grid-template-rows: min-content;
 }
 
+.vimeoPlayer {
+  margin-top: -35px;
+}
+
+#MLflow-ui-screenshot {
+  margin-bottom: 10rem;
+}
+
 .teamHead {
   font-size: clamp(1.35rem, 5.9805vw, 2.376rem);
 }