OpenMined · cereallarceny · Sep 22, 2019 · Aug 2, 2019 · Aug 2, 2019 · Aug 2, 2019
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 node_modules
 coverage
 dist
+tmp
 .DS_Store
 yarn.lock
+.idea
diff --git a/README.md b/README.md
@@ -20,21 +20,22 @@ PySyft acts as the parent node, instructing child nodes \(Syft.js instances runn
 If you're using a package manage like NPM:
 
 ```text
-npm install --save syft.js @tensorflow/tfjs
+npm install --save syft.js @tensorflow/tfjs webrtc-adapter
 ```
 
 Or if Yarn is your cup of tea:
 
 ```text
-yarn add syft.js @tensorflow/tfjs
+yarn add syft.js @tensorflow/tfjs webrtc-adapter
 ```
 
-When using a package manager, TensorFlow.js will be automatically installed.
+When using a package manager, [TensorFlow.js](https://www.tensorflow.org/js) and the [WebRTC adapter](https://github.com/webrtc/adapter) will be automatically installed.
 
 If you're not using a package manager, you can also include Syft.js within a `<script>` tag:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2.5/dist/tf.min.js"></script>
+<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 <script src="https://unpkg.com/syft.js@latest"></script>
 ```
 

diff --git a/copy-examples.sh b/copy-examples.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+rm -rf ./tmp
+mkdir tmp
+
+for directory in $(find ./examples -type d -mindepth 1 -maxdepth 1); 
+do
+  directory="$directory/dist/"
+  name="$(cut -d'/' -f3 <<<$directory)"
+
+  rsync -avzh "$directory" "./tmp/$name"
+done
diff --git a/examples/basic-example/index.js b/examples/basic-example/index.js
diff --git a/examples/basic-example/webpack.config.js b/examples/basic-example/webpack.config.js
diff --git a/examples/basic-example/README.md → examples/with-grid/README.md b/examples/basic-example/README.md → examples/with-grid/README.md
@@ -1,4 +1,4 @@
-# syft.js Example
+# syft.js/grid.js Example
 
 In order to get this running, you simply need to run the following:
 

diff --git a/examples/with-grid/_helpers.js b/examples/with-grid/_helpers.js
@@ -0,0 +1,35 @@
+export const getQueryVariable = variable => {
+  const query = window.location.search.substring(1),
+    vars = query.split('&');
+
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split('=');
+
+    if (decodeURIComponent(pair[0]) === variable) {
+      return decodeURIComponent(pair[1]);
+    }
+  }
+
+  return null;
+};
+
+export const writeLinksToDOM = links => {
+  document.getElementById('participant-links').innerHTML = `
+    <ul>
+    ${links
+      .map(
+        (link, i) =>
+          `
+          <li>
+            <a href="${link}" target="_blank">Link for participant ${i + 1}</a>
+          </li>
+          `
+      )
+      .join('')}
+    </ul>
+  `;
+};
+
+export const writeIdentityToDOM = text => {
+  document.getElementById('identity').innerHTML = text;
+};
diff --git a/examples/with-grid/index.html b/examples/with-grid/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+
+    <style type="text/css">
+      body {
+        padding: 20px;
+      }
+
+      #logo {
+        width: 100px;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        margin-top: 0px;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      #participant-links ul {
+        margin: 0px;
+        padding: 0px;
+        list-style-type: none;
+      }
+
+      #participant-links li {
+        padding: 5px 0px;
+      }
+    </style>
+
+    <title>syft.js Example</title>
+  </head>
+  <body>
+    <img
+      src="https://www.openmined.org/static/media/logo-square-color.2b2fb62b.svg"
+      id="logo"
+      alt="OpenMined"
+    />
+    <h1>Millionaire's problem</h1>
+    <p id="explanation">
+      <i
+        >This is a demo using
+        <a href="https://github.com/OpenMined/syft.js" target="_blank"
+          >syft.js from OpenMined</a
+        >
+        to display secure multi-party computation in the browser. Please open
+        your Javascript console to see what's going on (instructions for
+        <a
+          href="https://developers.google.com/web/tools/chrome-devtools/open#console"
+          target="_blank"
+          >Chrome</a
+        >
+        and
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console"
+          target="_blank"
+          >Firefox</a
+        >)</i
+      >.
+    </p>
+    <input type="text" id="grid-instance" value="ws://localhost:3000" />
+    <button id="connect">Connect to Grid.js instance</button>
+    <div id="app">
+      <button id="disconnect">Disconnect</button>
+      <p id="identity"></p>
+      <div id="participant-links"></div>
+      <textarea
+        id="message"
+        placeholder="Type some message in here..."
+      ></textarea
+      ><br />
+      <button id="message-send">Send message</button>
+    </div>
+  </body>
+</html>
diff --git a/examples/with-grid/index.js b/examples/with-grid/index.js
@@ -0,0 +1,111 @@
+/*
+The following is a step-by-step explanation of what's going on below:
+
+1. Initiate syft.js and connect to grid.js
+2. Get the list of plans that this user is supposed to work on
+ - If there is no instanceId, grid.js will generate one for us
+ - If there is no scopeId, grid.js will generate a scope and make this user the creator
+ - Altogether, grid.js will send back this user's information, their list of plans, and the instanceId's of the other participants
+3. Links are created whereby other participants may join
+ - These links are to be shared with the other participants
+ - Note that each user will need to request their list of plans from the grid... they won't have access to another user's list of plans
+4. Create a direct peer-to-peer connection with the other participants
+ - This is done using WebRTC under the hood using a mesh network by which every peer has a private data connection to every other peer
+ - This is an asynchronous action, meaning that peers may come and go at any point
+ - The syft.js library is capable of handling connections, disconnections, and reconnections without issue
+*/
+
+// In the real world: import syft from 'syft.js';
+import syft from '../../src';
+import {
+  getQueryVariable,
+  writeIdentityToDOM,
+  writeLinksToDOM
+} from './_helpers';
+
+const gridInstance = document.getElementById('grid-instance');
+const connectButton = document.getElementById('connect');
+const disconnectButton = document.getElementById('disconnect');
+const appContainer = document.getElementById('app');
+const textarea = document.getElementById('message');
+const submitButton = document.getElementById('message-send');
+
+appContainer.style.display = 'none';
+
+connectButton.onclick = () => {
+  appContainer.style.display = 'block';
+  gridInstance.style.display = 'none';
+  connectButton.style.display = 'none';
+
+  startSyft(gridInstance.value);
+};
+
+const startSyft = url => {
+  const instanceId = getQueryVariable('instance_id');
+  const scopeId = getQueryVariable('scope_id');
+
+  // 1. Initiate syft.js and create socket connection
+  const mySyft = new syft({
+    verbose: true,
+    url,
+    instanceId,
+    scopeId,
+    protocolId: 'millionaire-problem'
+  });
+
+  submitButton.onclick = () => {
+    mySyft.sendToParticipants(textarea.value);
+
+    textarea.value = '';
+  };
+
+  disconnectButton.onclick = () => {
+    mySyft.disconnectFromParticipants();
+    mySyft.disconnectFromGrid();
+
+    appContainer.style.display = 'none';
+    gridInstance.style.display = 'block';
+    connectButton.style.display = 'block';
+  };
+
+  mySyft.onSocketStatus(async ({ connected }) => {
+    if (connected) {
+      // 2. Get the plans that are assigned to me
+      const plans = await mySyft.getPlans();
+
+      console.log('PLANS', plans);
+
+      // Write my identity to the screen - not required
+      writeIdentityToDOM(
+        `You are ${mySyft.role} "${mySyft.instanceId}" in scope "${mySyft.scopeId}"`
+      );
+
+      // Push the instanceId and scopeId onto the current URL if they aren't already there
+      // This isn't strictly necessary, but if a user is a creator of a scope (instead of a participant),
+      // then they won't be able to refresh and rejoin the scope they created
+      if (!instanceId && !scopeId) {
+        window.history.pushState(
+          {},
+          null,
+          `?instance_id=${mySyft.instanceId}&scope_id=${mySyft.scopeId}`
+        );
+      }
+
+      // 3. Create links for the other participants
+      if (mySyft.role === 'creator') {
+        writeLinksToDOM(
+          mySyft.participants.map(
+            id =>
+              `${window.location.origin +
+                window.location.pathname}?instance_id=${id}&scope_id=${
+                mySyft.scopeId
+              }`
+          )
+        );
+      }
+
+      // 4. Create a direct P2P connection with the other participants
+      mySyft.connectToParticipants();
+    }
+  });
+};