feat: add benchmark results web viewer (#833)

* web-ui initial commit

* updated .gitignore

* 1. code cleanup;
2. worked on the filtering;

* code cleanup

* code cleanup

* fixed null filter

* 1. code cleanup;
2. UI adjustments;

* worked on the UI (WIP)

* code cleanup

* code cleanup

* worked on the filters UI (WIP)

* code cleanup

* worked on the filters (WIP)

* code cleanup

* added benchmark filtering option;

* added backend filter

* 1. added logout functionality;
2. code cleanup

* code cleanup

* worked on the filters

* worked on the filtering

* worked on the filters

* make use of env variables for the firebase config

* - added error handling on the login page;
- added loading indicator on the benchmarks page;
- code cleanup;

* code cleanup

* Add GitHub action for web deployment (#831)

* Add GitHub action

* Add GitHub action

* Add GitHub action

* Add GitHub action

* Add GitHub action

* Temporary delete other GitHub workflows

* Use env for web-deploy-preview.yml

* Use env for Firebase settings

* Deploy to preview and live depend on branch

* Fix Markdown linter errors

* Revert "Temporary delete other GitHub workflows"

This reverts commit dea1c65.

* Update docs

* lint fixes, code format, code cleanup

* ci: update web deployment workflow (#834)

* Update web-deploy.yml

* Update README.md

* directories renaming

* updated github workflows for the react app

* Rename benchmarks_web_viewer to react in README.md

* code cleanup

* code cleanup

* fixed sonar issues

* Update name, description and logo

* Cleanup

---------

Co-authored-by: Anh <[email protected]>

.github/workflows/web-deploy.yml

@@ -0,0 +1,47 @@
+name: Web Deploy
+
+on:
+  push:
+    branches: [ master, submission-v* ]
+    paths: [ 'react/**' ]
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+    paths: [ 'react/**' ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Build website
+        env:
+          REACT_APP_FIREBASE_WEB_API_KEY: ${{ secrets.FIREBASE_WEB_API_KEY }}
+          REACT_APP_FIREBASE_WEB_AUTH_DOMAIN: ${{ secrets.FIREBASE_WEB_AUTH_DOMAIN }}
+          REACT_APP_FIREBASE_WEB_APP_ID: ${{ secrets.FIREBASE_WEB_APP_ID }}
+          REACT_APP_FIREBASE_WEB_MEASUREMENT_ID: ${{ secrets.FIREBASE_WEB_MEASUREMENT_ID }}
+          REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
+          REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
+          REACT_APP_FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
+          REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
+        run: |
+          cd ./react
+          yarn install --immutable --immutable-cache --check-cache
+          yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        name: Deploy to Firebase Hosting on Preview channel
+        if: github.ref != 'refs/heads/master'
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_MOBILE_APP_BUILD }}"
+          projectId: mobile-app-build-290400
+          entryPoint: "./react"
+          expires: 30d
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        name: Deploy to Firebase Hosting on Live channel
+        if: github.ref == 'refs/heads/master'
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_MOBILE_APP_BUILD }}"
+          projectId: mobile-app-build-290400
+          entryPoint: "./react"
+          channelId: live

.gitignore

@@ -22,7 +22,3 @@ __pycache__/
 *.log
 *.iml
 *.env
-
-*.g.dart
-*.gen.dart
-*.gen.h

README.md

@@ -49,7 +49,8 @@ frameworks contributed by the broader MLPerf community.
 
 * [datasets](./datasets) - Contains scripts to prepare test and calibration data used for accuracy evaluation and model quantization
 * [docs](./docs) - contains documentation
-* [flutter](./flutter) - Contains the Flutter (cross-platform) version of the app
+* [flutter](./flutter) - Contains the Flutter (iOS/Android/Windows) version of the app (for running the benchmarks on a certain device)
+* [react](./react) - Contains the React version of the app (for viewing the benchmark results on a website)
 * [mobile_back_apple](./mobile_back_apple) - Apple (Core ML) backend for iOS
 * [mobile_back_pixel](./mobile_back_pixel) - Google Pixel backend for Android
 * [mobile_back_qti](./mobile_back_qti) - QTI backend for Android

flutter/.gitignore

@@ -13,6 +13,9 @@ lib/firebase/firebase_options.gen.dart
 .pub-cache/
 .pub/
 /build/
+*.g.dart
+*.gen.dart
+*.gen.h
 
 # Web related
 lib/generated_plugin_registrant.dart

react/.gitignore

@@ -0,0 +1,30 @@
+
+# env
+firebase.env
+.firebaserc
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.firebase

react/README.md

@@ -0,0 +1,57 @@
+# Web App
+
+This directory contains the React web app for viewing the submitted benchmark results.
+
+## Update Firebase configuration
+
+You need to use your own Firebase project to run this web app.
+
+1. First create a `firebase.env`
+
+   ```shell
+   touch firebase.env
+   ```
+
+1. Then copy and paste this to the `firebase.env` file you just created.
+   Remember to update the dummy values with your Firebase project settings.
+
+   ```dotenv
+   export REACT_APP_FIREBASE_WEB_API_KEY=abc
+   export REACT_APP_FIREBASE_WEB_AUTH_DOMAIN=abc
+   export REACT_APP_FIREBASE_WEB_APP_ID=abc
+   export REACT_APP_FIREBASE_WEB_MEASUREMENT_ID=abc
+
+   export REACT_APP_FIREBASE_PROJECT_ID=abc
+   export REACT_APP_FIREBASE_MESSAGING_SENDER_ID=abc
+   export REACT_APP_FIREBASE_DATABASE_URL=abc
+   export REACT_APP_FIREBASE_STORAGE_BUCKET=abc
+   ```
+
+1. Import the env vars into your shell
+
+   ```shell
+   source firebase.env
+   ```
+
+## Run and deploy the app to Firebase Hosting
+
+To deploy the app using Firebase Hosting please
+visit [Get started with Firebase Hosting](https://firebase.google.com/docs/hosting/quickstart) for more
+information.
+
+You will need [Firebase CLI](https://firebase.google.com/docs/cli#install_the_firebase_cli) for the following commands.
+
+To run the web app locally:
+
+```shell
+yarn build
+firebase serve --only hosting --project <FIREBASE_PROJECT_ID>
+```
+
+To deploy the web app to Firebase Hosting
+
+```shell
+firebase deploy --only hosting --project <FIREBASE_PROJECT_ID>
+```
+
+To enable CORS: <https://firebase.google.com/docs/storage/web/download-files>

react/additional-declarations.d.ts

@@ -0,0 +1,8 @@
+declare module "*.svg" {
+  import React = require("react");
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+  const src: string;
+  export default src;
+}

react/cors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "origin": ["*"],
+    "method": ["GET"],
+    "maxAgeSeconds": 3600
+  }
+]

react/firebase.json

@@ -0,0 +1,23 @@
+{
+  "hosting": {
+    "public": "build",
+    "headers": [
+      {
+        "source": "**/*",
+        "headers": [
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          }
+        ]
+      }
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+  }
+}

react/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "ml-commons-results-viewer",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^3.3.2",
+    "@react-firebase/auth": "^0.2.10",
+    "@react-native-async-storage/async-storage": "^1.21.0",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@tanstack/query-async-storage-persister": "^5.12.1",
+    "@tanstack/react-query": "^5.12.2",
+    "@tanstack/react-query-devtools": "^5.13.3",
+    "@tanstack/react-query-persist-client": "^5.12.2",
+    "@tanstack/react-table": "^8.11.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.66",
+    "@types/ramda": "^0.29.9",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "axios": "^1.6.2",
+    "date-fns": "^2.30.0",
+    "firebase": "^10.7.0",
+    "framer-motion": "^10.16.12",
+    "ramda": "^0.29.1",
+    "react": "^18.2.0",
+    "react-date-picker": "^8.4.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
+    "react-icons": "^4.12.0",
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.20.0",
+    "react-scripts": "5.0.1",
+    "react-table": "^7.8.0",
+    "redux-persist": "^6.0.0",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "check-types": "tsc --pretty --noEmit",
+    "check-format": "prettier --check .",
+    "check-lint": "eslint . --ext ts --ext tsx --ext js",
+    "format": "prettier --write ."
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "ignorePatterns": [
+      "build"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "prettier": "^3.1.0"
+  }
+}

react/public/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Website for viewing benchmark results of MLPerf Mobile"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>MLPerf Mobile</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "MLPerf Mobile",
+  "name": "MLPerf Mobile",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

react/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}