SparseZoo Table UI

.github/workflows/quality-check.yaml

@@ -5,7 +5,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: "⚙️ Install dependencies"
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - name: "⚙️ Install python dependencies"
         run: pip3 install .[dev]
+      - name: "⚙️ Install js dependencies"
+        run: yarn install
       - name: "🧹 Running quality checks"
         run: make quality

Makefile

@@ -4,6 +4,8 @@ BUILDDIR := $(PWD)
 PYCHECKDIRS := examples tests src utils scripts notebooks
 PYCHECKGLOBS := 'examples/**/*.py' 'scripts/**/*.py' 'src/**/*.py' 'tests/**/*.py' 'utils/**/*.py' setup.py
 DOCDIR := docs
+JSCHECKDIRS := src public
+JSCHECKGLOBS := 'public/**/*.html' 'public/**/*.js' 'public/**/*.css' 'src/**/*.html' 'src/**/*.jsx' 'tests/**/*.jsx'
 MDCHECKGLOBS := 'docs/**/*.md' 'docs/**/*.rst' 'examples/**/*.md' 'notebooks/**/*.md' 'scripts/**/*.md'
 MDCHECKFILES := CODE_OF_CONDUCT.md CONTRIBUTING.md DEVELOPING.md README.md
 SPARSEZOO_TEST_MODE := "true"
@@ -42,6 +44,8 @@ quality:
 	black --check $(PYCHECKDIRS);
 	isort --check-only $(PYCHECKDIRS);
 	flake8 $(PYCHECKDIRS);
+	@echo "Running js/jsx quality checks";
+	yarn prettier --check $(JSCHECKDIRS);
 
 # style the code according to accepted standards for the repo
 style:
@@ -50,6 +54,8 @@ style:
 	@echo "Running python styling";
 	black $(PYCHECKDIRS);
 	isort $(PYCHECKDIRS);
+	@echo "Running js/jsx styling";
+	yarn prettier --write $(JSCHECKDIRS);
 
 # run tests for the repo
 test:
@@ -68,6 +74,10 @@ docsupdate:
 
 # creates wheel file
 build:
+	@echo "Building UI";
+	yarn install;
+	yarn build;
+	@echo "Building python package";
 	python3 setup.py sdist bdist_wheel $(BUILD_ARGS)
 
 # clean package

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "sparsezoo",
+  "version": "0.2.0",
+  "private": true,
+  "repository": "git@github.com:neuralmagic/sparsezoo.git",
+  "author": "Neuralmagic, Inc.",
+  "license": "Apache",
+  "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@reduxjs/toolkit": "^1.5.1",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.0.3",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "react-transition-group": "^4.4.1",
+    "redux": "^4.0.5",
+    "universal-cookie": "^4.0.4"
+  },
+  "devDependencies": {
+    "prettier": "^2.2.1"
+  },
+  "scripts": {
+    "lint": "yarn prettier --write src/ui",
+    "start": "REACT_APP_SPARSEZOO_API_URL=$SPARSEZOO_API_URL react-scripts start",
+    "build": "NODE_ENV=production REACT_APP_SPARSEZOO_API_URL=$SPARSEZOO_API_URL && react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "prettier": {
+    "printWidth": 88,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "quoteProps": "as-needed",
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "always"
+  }
+}

public/index.html

@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/assets/favicon/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Tables for display SparseZoo models. Developed by Neural Magic."
+    />
+    <link
+      rel="apple-touch-icon"
+      href="%PUBLIC_URL%/assets/favicon/apple-touch-icon.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>SparseZoo Table</title>
+    <style>
+      #root {
+        position: absolute;
+        padding: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/manifest.json

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

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/index.jsx

@@ -0,0 +1,19 @@
+/*
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import render from "./ui";
+
+render();

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/ui/api/auth.jsx

@@ -0,0 +1,36 @@
+/*
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { API_ROOT, validateAPIResponseJSON } from "./utils";
+
+const PUBLIC_AUTH_TYPE = "public";
+
+/**
+ * API action for getting a public authentication token
+ * @returns {Promise<{token: String}>}
+ */
+export function requestPostAuth() {
+  const url = `${API_ROOT}/auth`;
+  return validateAPIResponseJSON(
+    fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ authentication_type: PUBLIC_AUTH_TYPE }),
+    })
+  );
+}

src/ui/api/index.jsx

@@ -0,0 +1,19 @@
+/*
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export * from "./auth";
+export * from "./models";
+export * from "./utils";

src/ui/api/models.jsx

@@ -0,0 +1,63 @@
+/*
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { API_ROOT, validateAPIResponseJSON } from "./utils";
+
+/**
+ * API action for searching for models in the model zoo
+ * @param {object} requestBody the requestBody
+ * @param {string} requestBody.domain the domain of the model search
+ * @param {string} requestBody.subdomain the subdomain of the model search
+ * @param {string} requestBody.token the token for the model search authentication
+ * @param {string} requestBody.page the page of search results to return
+ * @param {string} requestBody.page_legth the amount of search results to return
+ * @param {{
+ *  architecture: string,
+ *  sub_architecture: string,
+ *  repo: string,
+ *  framework: string,
+ *  dataset: string,
+ *  training_scheme: string,
+ *  sparse_name: string,
+ *  sparse_category: string,
+ *  sparse_target
+ * }} requestBody.queries the additional queries for the search result
+ * @returns {Promise<Array>}
+ */
+export function requestSearchModels({
+  domain,
+  subdomain,
+  token,
+  page = 1,
+  page_length = 20,
+  queries = {},
+}) {
+  let url = `${API_ROOT}/models/search/${domain}/${subdomain}?page=${page}&page_length=${page_length}`;
+  if (queries) {
+    for (const [key, value] of Object.entries(queries)) {
+      url = `${url}&${key}=${value}`;
+    }
+  }
+  return validateAPIResponseJSON(
+    fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "nm-token-header": token,
+      },
+    })
+  );
+}

src/ui/api/utils.jsx

@@ -0,0 +1,58 @@
+/*
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const API_ROOT =
+  process.env.REACT_APP_SPARSEZOO_API_URL || "https://api.neuralmagic.com";
+
+/***
+ * Utility function to validate and format a JSON response
+ * from the sparsify APIs.
+ *
+ * @param {Promise<any>} responsePromise
+ * @returns {Promise<any>}
+ */
+export function validateAPIResponseJSON(responsePromise) {
+  return responsePromise
+    .then((response) => {
+      if (response.data) {
+        // axios response
+        return Promise.resolve({
+          statusOk: response.statusText === "OK",
+          status: response.status,
+          body: response.data,
+        });
+      } else {
+        // fetch response
+        return response.json().then((data) => {
+          return {
+            statusOk: response.ok,
+            status: response.status,
+            body: data,
+          };
+        });
+      }
+    })
+    .then((data) => {
+      if (!data.statusOk) {
+        return Promise.reject(Error(data.body.error_message));
+      }
+
+      return data.body;
+    })
+    .catch((err) => {
+      return Promise.reject(err);
+    });
+}