feat: re-skin using svelte + rollup

Using same template as the other experiments
googlecreativelab · Jun 25, 2021 · da4a158 · da4a158
1 parent 674a392
commit da4a158
Show file tree

Hide file tree

Showing 47 changed files with 18,150 additions and 0 deletions.
diff --git a/third_party/p5.sound.js b/third_party/p5.sound.js
diff --git a/web/.gitignore b/web/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+*.pyc
+.idea
+.pytest_cache
+env/
+.coverage
+htmlcov
+env/
+__pycache__/
+*.egg-info/
+node_modules/
+/public/build/
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "fui",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear"
+  },
+  "devDependencies": {
+    "@okrad/svelte-progressbar": "^1.11.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "node-sass": "^5.0.0",
+    "p5": "^1.3.1",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-scss": "^2.6.1",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0",
+    "svelte-preprocess": "^4.7.0",
+    "tf4micro-motion-kit": "https://github.com/googlecreativelab/tf4micro-motion-kit"
+  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0"
+  }
+}
diff --git a/web/public/favicon-32x32.png b/web/public/favicon-32x32.png
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
diff --git a/web/public/fonts/RobotoMono/RobotoMono-Bold.ttf b/web/public/fonts/RobotoMono/RobotoMono-Bold.ttf
diff --git a/web/public/fonts/RobotoMono/RobotoMono-Regular.ttf b/web/public/fonts/RobotoMono/RobotoMono-Regular.ttf
diff --git a/web/public/images/FUI_16x9.gif b/web/public/images/FUI_16x9.gif
diff --git a/web/public/images/left.gif b/web/public/images/left.gif
diff --git a/web/public/images/pluck.gif b/web/public/images/pluck.gif
diff --git a/web/public/images/poke.gif b/web/public/images/poke.gif
diff --git a/web/public/images/right.gif b/web/public/images/right.gif
diff --git a/web/public/images/twirl.gif b/web/public/images/twirl.gif
diff --git a/web/public/index.html b/web/public/index.html
@@ -0,0 +1,65 @@
+<!--====================================================================
+Copyright 2021 Google LLC
+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
+
+    https://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>
+
+    <script nonce="347fj326c">
+      if(!location.href.match(/.*\/$/)){
+        location.href += '/';
+      }
+    </script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KWBMPFFBQT"></script>
+    <script nonce="3958daj3m">
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+
+        gtag('config', 'G-KWBMPFFBQT', { anonymize_ip: true, referrer: document.referrer.split('?')[0] });
+    </script>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <meta name="twitter:title" content="FUI - Finger User Interface">
+    <meta property="og:image" content="https://experiments.withgoogle.com/finger-user-interface/view/images/FUI_16x9.gif">
+    <meta property="og:title" content="FUI" />
+    <meta property="og:description" content="Finger User Interface or FUI ( pronounced Foo-ey ) lets you control devices with the wave of a finger. Using an Arduino, an IMU sensor, and TensorFlow we customized a machine learning model to recognize 5 gestures that control the animation and sound on a webpage. This project is a part of a collection of experiments that shows the possibilities of building with TensorFlow Lite for Microcontrollers." />  
+
+    <title>FUI</title>
+
+    <link rel="stylesheet" href="./build/bundle.css" />
+
+    <script defer src="./build/bundle.js?cache-bust=4"></script>
+
+
+  </head>
+
+
+  <body>
+    <script
+      data-autoload-cookie-consent-bar="true"
+      data-autoload-cookie-consent-bar-intl-code=""
+      src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js"
+    ></script>
+  </body>
+</html>
diff --git a/web/public/model.tflite b/web/public/model.tflite
diff --git a/web/public/sounds/D1.wav b/web/public/sounds/D1.wav
diff --git a/web/public/sounds/D2.wav b/web/public/sounds/D2.wav
diff --git a/web/public/sounds/D3.wav b/web/public/sounds/D3.wav
diff --git a/web/public/sounds/D4.wav b/web/public/sounds/D4.wav
diff --git a/web/public/sounds/left.wav b/web/public/sounds/left.wav
diff --git a/web/public/sounds/pluck.wav b/web/public/sounds/pluck.wav
diff --git a/web/public/sounds/poke.wav b/web/public/sounds/poke.wav
diff --git a/web/public/sounds/right.wav b/web/public/sounds/right.wav
diff --git a/web/public/sounds/twirl.wav b/web/public/sounds/twirl.wav
diff --git a/web/rollup.config.js b/web/rollup.config.js
@@ -0,0 +1,82 @@
+/**
+ * rollup config based on generator: https://github.com/sveltejs/template/blob/master/rollup.config.js
+ */
+
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import preprocess from 'svelte-preprocess';
+import css from 'rollup-plugin-css-only';
+import scss from 'rollup-plugin-scss'
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: !production
+			},
+			preprocess: preprocess()
+		}),
+		scss(),
+		css({ output: 'bundle.css' }), // will output compiled styles to output.css
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('src'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -0,0 +1,50 @@
+<!--====================================================================
+Copyright 2021 Google LLC
+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
+
+    https://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. 
+========================================================================-->
+
+<script>
+  import { onMount } from "svelte";
+  import { onboardingStep } from "./store";
+
+  import FuiPanel from "./components/FuiPanel.svelte";
+
+  import SplashPanel from "./components/SplashPanel.svelte";
+  import Nav from "./components/Nav.svelte";
+
+  import deviceInfo from "./deviceInfo";
+  import NotSupportedBluetooth from "./components/NotSupportedBluetooth.svelte";
+  import NotSupportedMobile from "./components/NotSupportedMobile.svelte";
+
+  onMount(() => {
+  
+    document.addEventListener("keydown", (e) => {
+      const d = parseInt(e.key);
+      if (d <= 3 && d >= 0) {
+        $onboardingStep = d;
+      }
+    });
+  });
+</script>
+
+{#if !deviceInfo.isBluetoothSupported}
+  <NotSupportedBluetooth />
+  >
+{:else}
+  {#if !deviceInfo.isDesktop}
+    <NotSupportedMobile />
+  {/if}
+  <SplashPanel />
+  <FuiPanel />
+  <Nav />
+{/if}
diff --git a/web/src/components/ConnectButton.svelte b/web/src/components/ConnectButton.svelte
@@ -0,0 +1,78 @@
+<!--====================================================================
+Copyright 2021 Google LLC
+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
+
+    https://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. 
+========================================================================-->
+
+<script>
+  import { onMount } from "svelte";
+  import { isConnected, isModelTransferred, lastInference, transferProgress, onboardingStep } from "../store";
+
+  import connectButton from "tf4micro-motion-kit/web/button";
+
+  let containerEl;
+  let button;
+
+  $: if(button && $isConnected){
+    button.innerText = 'Transferring...';
+  }
+
+  $: if(button && $isModelTransferred){
+    button.innerText = 'Transferred!';
+    setTimeout(()=>{
+      button.innerText = 'Disconnect';
+    },1000)
+  }
+  
+  onMount(() => {
+    const modelConfig = {
+      model: "./model.tflite",
+      numClasses: 5,
+      threshold: 0.181,
+      numSamples: 25,
+      captureDelay: 30,
+      useMagnetometer: false,
+    };
+
+    button = connectButton(containerEl, {
+      ...modelConfig,
+      useMagnetometer: false,
+      onInference(data){
+        $lastInference = data;
+      },
+      onTransferProgress(p){
+        $transferProgress = p * 100;
+      },
+      onDisconnect() {
+        $isConnected = false;
+        $isModelTransferred = false;
+      },
+      onConnect() {
+        $isConnected = true;
+      },
+      onTransferCompleted() {
+        $isModelTransferred = true;
+        setTimeout(()=>{
+          $onboardingStep = 1;
+        }, 500)
+      },
+    });
+    
+    button.addEventListener("click", () => {
+      //soundManager.userInit();
+    });
+  });
+</script>
+
+<div bind:this={containerEl} class:inverted={$onboardingStep===0} />
+
+