updating spacing and links

microsoft · Sep 11, 2024 · f87621f · f87621f
1 parent 25da789
commit f87621f
Show file tree

Hide file tree

Showing 9 changed files with 548 additions and 519 deletions.
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -43,7 +43,7 @@ const config: Config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://aka.ms/eureka-ml-insights-blog',
         },
         theme: {
           customCss: './src/css/custom.css',
@@ -63,7 +63,7 @@ const config: Config = {
       },
       items: [
         {
-          href: 'https://www.microsoft.com/en-us/research/lab/ai-frontiers/?msockid=117853c4ea29677d3c4a4782eb9a6678',
+          href: 'https://aka.ms/eureka-ml-insights-blog',
           label: 'Blog', 
           position: 'right'
         },
@@ -79,7 +79,7 @@ const config: Config = {
       links: [
         {
           label: 'Blog',
-          href: 'https://www.microsoft.com/en-us/research/lab/ai-frontiers/?msockid=117853c4ea29677d3c4a4782eb9a6678',
+          href: 'https://aka.ms/eureka-ml-insights-blog',
         },
         {
           label: 'GitHub',

diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/src/components/types.ts b/website/src/components/types.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-export interface Config {
+export interface EurekaConfig {
     benchmarks: string[];
     models: ModelConfig[];
     model_families: string[];

diff --git a/website/src/pages/detailed_language_view.tsx b/website/src/pages/detailed_language_view.tsx
diff --git a/website/src/pages/executive_summary.tsx b/website/src/pages/executive_summary.tsx
@@ -96,9 +96,9 @@ const ExecutiveSummary = () => {
 
     const customExpandIcon = (props) => {  
       if (props.isActive) {  
-        return <MinusIcon className='inline-block' width={20} height={20}/>;  
+        return <MinusIcon className='inline-block' width={'4.5em'} height={'4.5em'} style={{paddingTop: '2.4em'}}/>;  
       }
-      return <PlusIcon className='inline-block' width={20} height={20} />;  
+      return <PlusIcon className='inline-block' width={'4.5em'} height={'4.5em'} style={{paddingTop: '2.4em'}}/>;  
     }  
 
     return (
@@ -122,7 +122,7 @@ const ExecutiveSummary = () => {
                     {languageItems.map(item => (  
                       <Collapse.Panel
                         key={item.key}
-                        header={<h4><span style={{paddingRight: '2em'}}>0{item.key}</span>{item.label}</h4>}
+                        header={<h4 style={{paddingTop: '1em'}}><span style={{paddingRight: '2em'}}>0{item.key}</span>{item.label}</h4>}
                       >
                         {item.children}  
                       </Collapse.Panel>  
@@ -140,7 +140,7 @@ const ExecutiveSummary = () => {
                     {multimodalItems.map(item => (  
                       <Collapse.Panel   
                         key={item.key}   
-                        header={<h4><span style={{paddingRight: '2em'}}>0{item.key}</span>{item.label}</h4>}
+                        header={<h4 style={{paddingTop: '1em'}}><span style={{paddingRight: '2em'}}>0{item.key}</span>{item.label}</h4>}
                       >
                         {item.children}  
                       </Collapse.Panel>  

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
@@ -7,14 +8,11 @@ import StatsBar from './stats_bar';
 import ExecutiveSummary from './executive_summary';
 import OverallVisualization from './overall_visualization';
 import SummaryTable from './summary_table';
-import React from 'react';
-import { Config } from '../components/types';
-import Column from 'antd/es/table/Column';
+import { EurekaConfig } from '../components/types';
 
 function HomepageHeader() {
   return (
-    <header className={styles.hero}>  
-      {/* <div className={styles.heroBackground}></div>   */}
+    <header className={styles.hero} style={{paddingTop: '2em', paddingBottom: '4em'}}>  
       <div className="container">  
         <div>
           <Row style={{ display: 'flex', alignItems: 'center' }}>
@@ -23,7 +21,7 @@ function HomepageHeader() {
           </Row>
         </div>
         <p className="hero__subtitle">Evaluating and Understanding Large Foundation Models</p> 
-        <p>Eureka is an open-source framework for standardizing evaluations of large foundation models, beyond single-score 
+        <p style={{fontSize: '1.3em'}}>Eureka is an open-source framework for standardizing evaluations of large foundation models, beyond single-score 
           reporting and rankings. We report in-depth evaluation and analysis of 12 state-of-the-art models across a collection 
           of language and multimodal benchmarks. These benchmarks test fundamental but overlooked capabilities that are still 
           challenging for even the most capable models.</p>
@@ -42,7 +40,7 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
-  const [config, setConfig] = React.useState<Config | null>(null);
+  const [config, setConfig] = React.useState<EurekaConfig | null>(null);
   React.useEffect(() => {  
         fetch('config.json')
        .then(response => response.json())
@@ -66,26 +64,15 @@ export default function Home(): JSX.Element {
         <div className={styles.splashSvg}></div>
         <div className="container" style={{position: 'relative'}}>
           <div className={styles.heroContent}>
-            <br/>
-            <br/>
             <HomepageHeader />
-            <br/>
-            <br/>
-            <br/>
             <StatsBar config={config}/>
-            <br/>
-            <br/>
-            <br/>
-            <br/>
           </div>
         </div>
       </div>
       <main>
         <section className={styles.features}>
           <div className="container">
             <OverallVisualization config={config}/>
-            <br/>
-            <br/>
             <ExecutiveSummary/>
             <br/>
             <SummaryTable config={config}/>

diff --git a/website/src/pages/overall_visualization.tsx b/website/src/pages/overall_visualization.tsx
@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
-import { CapabilityScores, ModelScore, ModelConfig, Config } from '../components/types';
+import { CapabilityScores, ModelScore, ModelConfig, EurekaConfig } from '../components/types';
 import Highcharts, { SeriesOptionsType } from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import HC_more from 'highcharts/highcharts-more';
-import { Button, Card, Col, Row } from 'antd';
+import { Col, Row } from 'antd';
 import Heading from '@theme/Heading';
-import Link from '@docusaurus/Link';
 
 HC_more(Highcharts); 
 
-const OverallVisualization = ({config}: {config: Config}) => {
+const OverallVisualization = ({config}: {config: EurekaConfig}) => {
     if (!config) {  
         // config is still null, probably still fetching data
         return <div>Loading...</div>;
@@ -19,6 +18,7 @@ const OverallVisualization = ({config}: {config: Config}) => {
     const [langOverallSeries, setLangOverallSeries] = useState<SeriesOptionsType[]>([]);
     const [multimodalCapabilties, setMultimodalCapabilties] = useState<CapabilityScores[]>([]);
     const [multimodalOverallSeries, setMultimodalOverallSeries] = useState<SeriesOptionsType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);  
 
     const parseResultCategory = (capabilities: CapabilityScores[], setCapabilityFunction, setSeriesFunction) => {
         setCapabilityFunction(capabilities);
@@ -31,17 +31,17 @@ const OverallVisualization = ({config}: {config: Config}) => {
                 modelScores[model.name].push(model.score); 
             });
         });
-        const langSeries = [];
+        const series = [];
         for (const key in modelScores) {
-            langSeries.push({
+            series.push({
                 name: key,
                 data: modelScores[key],
                 pointPlacement: 'on',
                 type: 'line',
-                color: config.models.find((d: ModelConfig) => d.model === key).color,
+                color: config?.models?.find((d: ModelConfig) => d.model === key)?.color || 'black',
             });
         }
-        setSeriesFunction(langSeries);
+        setSeriesFunction(series);
     };
 
     React.useEffect(() => {
@@ -50,14 +50,19 @@ const OverallVisualization = ({config}: {config: Config}) => {
                 .then(compiledResults => {
                     parseResultCategory(compiledResults.language.capabilities, setLanguageCapabilties, setLangOverallSeries);
                     parseResultCategory(compiledResults.multimodal.capabilities, setMultimodalCapabilties, setMultimodalOverallSeries);
-                });
+                    setIsLoading(false);
+                })
+                .catch(error => console.error('Error fetching compiled results:', error));
             }, []);
 
+    if (isLoading) {  
+        return <div>Loading...</div>;  
+    }  
     const languageChartOptions: Highcharts.Options = {
         title: {
             text: 'Language Performance',
             style: {
-                fontSize: '2.0em',
+                fontSize: '1.7em',
                 paddingbottom: '2em',
             },
         },
@@ -68,7 +73,7 @@ const OverallVisualization = ({config}: {config: Config}) => {
         },
         series: langOverallSeries,
         xAxis: {
-            categories: languageCapabilties.map(d => d.name),
+            categories: languageCapabilties?.map(d => d.name),
             tickmarkPlacement: 'on',
             labels: {
                 padding: 20,
@@ -98,7 +103,7 @@ const OverallVisualization = ({config}: {config: Config}) => {
         title: {
             text: 'Multimodal Performance',
             style: {
-                fontSize: '2.0em',
+                fontSize: '1.7em',
                 paddingbottom: '2em'
             }
         },
@@ -109,7 +114,7 @@ const OverallVisualization = ({config}: {config: Config}) => {
         },
         series: multimodalOverallSeries,
         xAxis: {
-            categories: multimodalCapabilties.map(d => d.name),
+            categories: multimodalCapabilties?.map(d => d.name),
             tickmarkPlacement: 'on',
             labels: {
                 padding: 20,
@@ -136,8 +141,8 @@ const OverallVisualization = ({config}: {config: Config}) => {
     };
 
     return (
-        <div style={{width: '100%'}}>
-            <Heading as="h2" className="hero__title" style={{textAlign: "center"}}>
+        <div style={{width: '100%', paddingBottom: '4em'}}>
+            <Heading as="h4" className="hero__title" style={{textAlign: "center", fontSize: '2.5em'}}>
                 Overall Performance 
             </Heading>
             <br/>