Accessibility (#20)

* updating results to be out of 100

* updating logo and accessibility tags

* minor formatting

* fixing zoom bug

* removing dev release path

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: ["main", "jluey/website"]
+    branches: ["main"]
     # Review gh actions docs if you want to further define triggers, paths, etc
     # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
 

utils/eval_report_parsing.py

@@ -3,9 +3,8 @@
 import re
 
 # Usage instructions (internal use only):
-# TODO: Should this be checked into somewhere else?
-# 1. Download the "reports" folder from blob storage and extract it to a local directory
-# 2. Point release_directory_path to the release directory inside of the extracted "reports" folder
+# 1. Download the "release" folder from blob storage and extract it to a local directory
+# 2. Point release_directory_path to the release directory
 # 3. Run 'python utils/eval_report_parsing.py'
 # 4. The compiled results will be written to 'website/static/compiled_results.json'
 
@@ -50,7 +49,7 @@ def coallate_results(release_directory_path, config):
                         with open(file_path, 'r') as f:
                             file_contents = f.read()
                             scores = json.loads(file_contents)
-                            if(name == "Object Detection"):
+                            if(name == 'Object Detection (AP50)'):
                                 scores = scores[0]
                             for metric in capability["metric"]:
                                 scores = scores[metric]
@@ -69,7 +68,7 @@ def coallate_results(release_directory_path, config):
                     model = "GPT-4-1106-Preview"
                 model_scores.append({   
                     "name": model,
-                    "score": sum / num
+                    "score": sum  * 100.0 / num
                 })
         data[modality]["capabilities"].append({
             "name": name,
@@ -82,7 +81,7 @@ def coallate_results(release_directory_path, config):
         json.dump(data, f, indent=2)
 
 # Example usage
-release_directory_path = 'C:\\Users\\jluey\\Downloads\\reports\\release'
+release_directory_path = '\\release'
 config_path = 'website\\static\\config.json'
 
 coallate_results(release_directory_path, json.load(open(config_path)))

website/src/components/HomepageFeatures/overall_visualization.tsx

@@ -85,7 +85,6 @@ const OverallVisualization = ({config}: {config: EurekaConfig}) => {
             categories: languageCapabilties?.map(d => d.name),
             tickmarkPlacement: 'on',
             labels: {
-                padding: 20,
                 style: {
                     fontSize: '1em'
                 }
@@ -95,7 +94,7 @@ const OverallVisualization = ({config}: {config: EurekaConfig}) => {
             gridLineInterpolation: 'polygon',
             lineWidth: 0,  
             min: 0,
-            max: 1,
+            max: 100,
         },
         legend: {
             align: 'center',
@@ -126,7 +125,6 @@ const OverallVisualization = ({config}: {config: EurekaConfig}) => {
             categories: multimodalCapabilties?.map(d => d.name),
             tickmarkPlacement: 'on',
             labels: {
-                padding: 20,
                 style: {
                     fontSize: '1em',
                 }
@@ -136,7 +134,7 @@ const OverallVisualization = ({config}: {config: EurekaConfig}) => {
             gridLineInterpolation: 'polygon',
             lineWidth: 0,  
             min: 0,
-            max: 1,
+            max: 100,
         },
         legend: {
             align: 'center',
@@ -156,12 +154,16 @@ const OverallVisualization = ({config}: {config: EurekaConfig}) => {
             </Heading>
             <br/>
             <div style={{width: '100%'}}>
-                <Row justify="space-between">
-                    <Col xs={24} md={12}>
-                        <HighchartsReact highcharts={Highcharts} options={languageChartOptions} />
+                <Row justify="space-between" style={{display: 'flex', justifyContent: 'center'}}>
+                    <Col xs={24} md={12} style={{ minWidth: '40em'}}>
+                    <div style={{ width: '90%', margin: '0 auto'}}>
+                        <HighchartsReact highcharts={Highcharts} options={languageChartOptions}/>
+                        </div>
                     </Col>
-                    <Col xs={24} md={12}>
-                        <HighchartsReact highcharts={Highcharts} options={multimodalChartOptions} />
+                    <Col xs={24} md={12} style={{ minWidth: '40em'}}>
+                    <div style={{ width: '90%', margin: '0 auto'}}>
+                        <HighchartsReact highcharts={Highcharts} options={multimodalChartOptions}/>
+                        </div>
                     </Col>
                 </Row>
             </div>

website/src/components/HomepageFeatures/stats_bar.tsx

@@ -15,7 +15,7 @@ const statsIcon: React.CSSProperties = {
 }; 
 
 const statsLabel: React.CSSProperties = {
-    color: 'grey', 
+    color: '#727272', 
     fontSize: '1.5em', 
     marginBottom: '0'
 }
@@ -29,7 +29,7 @@ const StatsBar = ({config}: {config: EurekaConfig}) => {
   return (
     <div style={{paddingBottom: '4em'}}>
         <Card>  
-            <Row align='middle' > 
+            <Row align='top' > 
                 <Col span={4} >  
                     <p style={statsHeader}>{config.model_families?.length}</p>  
                     <p style={statsLabel}>Model Families</p>
@@ -47,11 +47,11 @@ const StatsBar = ({config}: {config: EurekaConfig}) => {
                     <p style={statsLabel}>Capabilities</p>
                 </Col>  
                 <Col span={4} >  
-                    <div style={statsIcon}><img src='img/language.svg' alt="Language Tasks"/></div>
+                    <div style={statsIcon}><img src='img/language.svg' alt=""/></div>
                     <p style={statsLabel}>Language tasks</p>
                 </Col>  
                 <Col span={4} >  
-                    <div style={statsIcon}><img src='img/multimodal.svg' alt="Language Tasks"/></div>
+                    <div style={statsIcon}><img src='img/multimodal.svg' alt=""/></div>
                     <p style={statsLabel}>Multimodal tasks</p>
                 </Col>
             </Row>  

website/src/components/HomepageFeatures/summary_table.tsx

@@ -1,8 +1,6 @@
-import React, { Children, useState } from 'react';
-import { CapabilityScores, ModelScore, ModelConfig, EurekaConfig } from '../components/types';
-import Highcharts, { SeriesOptionsType } from 'highcharts';
-import { Layout, Table, CollapseProps, Collapse } from 'antd';
-import Title from 'antd/es/skeleton/Title';
+import React, { useState } from 'react';
+import { CapabilityScores, ModelScore, EurekaConfig } from '../components/types';
+import { Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 
 const SummaryTable = ({config}: {config: EurekaConfig}) => {

website/src/pages/index.tsx

@@ -16,11 +16,11 @@ function HomepageHeader() {
       <div className="container">  
         <div>
           <Row style={{ display: 'flex', alignItems: 'center' }}>
-            <Col style={{paddingRight: '1.8em', paddingBottom: '.9em'}}><img src="img/eureka_logo.png" alt="Eureka Logo" style={{objectFit:'cover', height: '5em'}}/></Col>
+            <Col style={{paddingRight: '1.8em', paddingBottom: '.9em'}}><img src="img/eureka_logo.png" alt="" style={{objectFit:'cover', height: '5em'}}/></Col>
             <Col><Heading as="h1" className="hero__title">Eureka ML Insights</Heading></Col>
           </Row>
         </div>
-        <p className="hero__subtitle">Evaluating and Understanding Large Foundation Models</p> 
+        <h2>Evaluating and Understanding Large Foundation Models</h2> 
         <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 
@@ -31,7 +31,7 @@ function HomepageHeader() {
         </Button>
         <Button shape='round' className={`${styles.buttons}`} href={'https://github.com/microsoft/eureka-ml-insights'} style={{outline: "black"}}>
           <strong>Github</strong>
-          <img src='img/link_icon.svg' alt="External Link to Github"/>
+          <img src='img/link_icon.svg' alt=""/>
         </Button>
       </div>
     </header>