Organize the benchmark toolkit (#3793)

DEV

Author: Linchenn

README.md

@@ -77,7 +77,7 @@ on NPM.
 
 ## Benchmarks
 
-[Benchmark tool](https://tensorflow.github.io/tfjs/e2e/benchmarks/index.html). Use this webpage tool to test the performance related metrics (speed, memory, power, etc) of TensorFlow.js models on your local device with CPU, WebGL or WASM backend. You can benchmark custom models following this [guide](https://github.com/tensorflow/tfjs/e2e/benchmarks/README.md).
+[Benchmark tool](https://tensorflow.github.io/tfjs/e2e/benchmarks/local-benchmark/index.html). Use this webpage tool to test the performance related metrics (speed, memory, power, etc) of TensorFlow.js models on your local device with CPU, WebGL or WASM backend. You can benchmark custom models following this [guide](https://github.com/tensorflow/tfjs/blob/master/e2e/benchmarks/local-benchmark/README.md).
 
 ## Getting started
 

e2e/benchmarks/SpecRunner.html

@@ -25,23 +25,18 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine-html.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/boot.js"></script>
 
-
-
   <script src="https://unpkg.com/@tensorflow/tfjs-core@latest/dist/tf-core.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-backend-cpu@latest/dist/tf-backend-cpu.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@latest/dist/tf-backend-webgl.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-layers@latest/dist/tf-layers.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-converter@latest/dist/tf-converter.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-backend-wasm@latest/dist/tf-backend-wasm.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
 
   <!-- include source files here... -->
   <script src="./benchmark_util.js"></script>
-  <script src="./index.js"></script>
 
   <!-- include spec files here... -->
   <script src="./benchmark_util_test.js"></script>
-  <script src="./index_test.js"></script>
 
 </head>
 

e2e/benchmarks/benchmark_util.js

@@ -15,6 +15,11 @@
  * =============================================================================
  */
 
+/**
+ * This tool depends on tf-core, tf-layers, tf-converter and the backends
+ * (tf-backend-cpu, tf-backend-webgl or tf-backend-wasm) that you would use.
+ */
+
 /**
  * Generates a random input for `model`, based on `model.inputs`. For
  * tf.GraphModel, `NamedTensorMap` input will be returned; otherwise,

e2e/benchmarks/benchmark_util_test.js

@@ -16,7 +16,7 @@
  */
 
 /**
- * The unit tests in this file can be run by opening `SpecRunner.html` in
+ * The unit tests in this file can be run by opening `./SpecRunner.html` in
  * browser.
  */
 

e2e/benchmarks/browserstack-benchmark/app_test.js

@@ -15,6 +15,11 @@
  * =============================================================================
  */
 
+/**
+ * The unit tests in this file can be run by opening `./SpecRunner.html` in
+ * browser.
+ */
+
 describe('benchmark multiple browsers', () => {
   const browsersList = [
     {

e2e/benchmarks/browserstack-benchmark/index_test.js

@@ -16,7 +16,7 @@
  */
 
 /**
- * The unit tests in this file can be run by opening `SpecRunner.html` in
+ * The unit tests in this file can be run by opening `./SpecRunner.html` in
  * browser.
  */
 

e2e/benchmarks/README.md renamed to e2e/benchmarks/local-benchmark/README.md

@@ -1,14 +1,14 @@
 # Benchmark custom models
 
-The `custom model` in the [benchmark tool](https://tensorflow.github.io/tfjs/e2e/benchmarks/index.html) currently only supports `tf.GraphModel` or `tf.LayersModel`.
+The `custom model` in the [benchmark tool](https://tensorflow.github.io/tfjs/e2e/benchmarks/local-benchmark/index.html) currently only supports `tf.GraphModel` or `tf.LayersModel`.
 
 If you want to benchmark models in other types or customize the inputs for model inference, you need to implement `load` and `predictFunc` methods, following this [example PR](https://github.com/tensorflow/tfjs/pull/3168/files).
 
 ## Models in local file system
 If you have a model in local file system, you can follow the steps below:
 1. Download [tfjs repository](https://github.com/tensorflow/tfjs.git).
-2. Put your `model.json` file and the weight files under the `tfjs/e2e/benchmarks/` folder.
-3. Under the `tfjs/e2e/benchmarks/` folder, run `npx http-server`.
+2. Put your `model.json` file and the weight files under the `tfjs/e2e/benchmarks/local-benchmark/` folder.
+3. Under the `tfjs/e2e/benchmarks/local-benchmark/` folder, run `npx http-server`.
 4. Open the browser go to `http://127.0.0.1:8080/`, this will open the benchmark tool. Then populate the `model.json` url to `modelUrl` under the custom model, which is `http://127.0.0.1:8080/model.json`.
 
 In addition, if the online tool is blocked by `CORS` problems when fetching the custom model, you can locally serve the model by the above steps to solve this problem.

e2e/benchmarks/local-benchmark/SpecRunner.html

@@ -0,0 +1,48 @@
+<!-- Copyright 2020 Google LLC. 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>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Test</title>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine.css">
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine-html.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/boot.js"></script>
+
+  <script src="https://unpkg.com/@tensorflow/tfjs-core@latest/dist/tf-core.js"></script>
+  <script src="https://unpkg.com/@tensorflow/tfjs-backend-cpu@latest/dist/tf-backend-cpu.js"></script>
+  <script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@latest/dist/tf-backend-webgl.js"></script>
+  <script src="https://unpkg.com/@tensorflow/tfjs-layers@latest/dist/tf-layers.js"></script>
+  <script src="https://unpkg.com/@tensorflow/tfjs-converter@latest/dist/tf-converter.js"></script>
+  <script src="https://unpkg.com/@tensorflow/tfjs-backend-wasm@latest/dist/tf-backend-wasm.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
+
+  <script src="../benchmark_util.js"></script>
+
+  <!-- include source files here... -->
+  <script src="./index.js"></script>
+
+  <!-- include spec files here... -->
+  <script src="./index_test.js"></script>
+
+</head>
+
+<body>
+</body>
+</html>

e2e/benchmarks/index.html renamed to e2e/benchmarks/local-benchmark/index.html

@@ -96,9 +96,9 @@ <h2>TensorFlow.js Model Benchmark</h2>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet@2"></script>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2"></script>
 
-  <script src="./model_config.js"></script>
+  <script src="../model_config.js"></script>
+  <script src="../benchmark_util.js"></script>
   <script src="./util.js"></script>
-  <script src="./benchmark_util.js"></script>
   <script src="./index.js"></script>
   <script>
     'use strict';