Merge branch 'README/demos' of github.com:multiparty/jiff into README…

…/demos
multiparty · May 7, 2024 · b212b21 · b212b21
2 parents ef3ff61 + 3cf56bf
commit b212b21
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 52 deletions.
diff --git a/demos/array-binary-search/README.md b/demos/array-binary-search/README.md
@@ -27,16 +27,16 @@ node demos/support/server.ts
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 

diff --git a/demos/array-bubble-sort/README.md b/demos/array-bubble-sort/README.md
@@ -22,16 +22,16 @@ node demos/support/server.ts
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 **3. Interpret the Result 🧐**

diff --git a/demos/array-concat/README.md b/demos/array-concat/README.md
@@ -27,16 +27,16 @@ node demos/support/server.ts
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 

diff --git a/demos/array-merge-sort/README.md b/demos/array-merge-sort/README.md
@@ -20,16 +20,16 @@ node demos/support/server.ts
 
 **2. Open from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 

diff --git a/demos/array-mpc-as-a-service/README.md b/demos/array-mpc-as-a-service/README.md
@@ -26,16 +26,16 @@ node demos/array-mpc-as-a-service/compute-party.js config.json
 
 **3. Open the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+ 1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+ 2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+ <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+ 3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+ <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 
@@ -73,6 +73,32 @@ The demo/test can be run from the command line without videos.
     <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/eeb84a82-d8ab-43b5-b66e-48966355a24e">
 </div>
 
+
+## There is something more... 📦
+The demo can be run without Cypress
+
+**1. Run the server & computation parties**
+
+```shell
+  node demos/array-mpc-as-a-service/server.js & echo $! > SERVER_PID
+  sleep 10
+  echo "Initiating three computational parties"
+  node demos/array-mpc-as-a-service/compute-party.js config.json &
+  node demos/array-mpc-as-a-service/compute-party.js config.json &
+  node demos/array-mpc-as-a-service/compute-party.js config.json 
+```
+
+**2. Experiment on a Browser**
+
+Visit http://localhost:8080/demos/array-mpc-as-a-service/client.html
+
+**3. Connect and Submit**
+
+<div align="center">
+<img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/946d64b0-0b51-445a-9104-d11fefa43a1c">
+</div>
+
+
 ## Code Structure ⌨️
 
 This Cypress-based demo adopts the web-worker system to emulate multiple threaded execution. 

diff --git a/demos/array-shell-sort/README.md b/demos/array-shell-sort/README.md
@@ -20,16 +20,16 @@ node demos/support/server.ts
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 
@@ -64,6 +64,25 @@ npx cypress run --config-file demos/cypress.config.ts --spec "demos/array-shell-
     <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/eeb84a82-d8ab-43b5-b66e-48966355a24e">
 </div>
 
+## There is something more... 📦
+The demo can be run without Cypress
+
+**1. Run the server in the same way**
+
+```shell
+node demos/support/server.ts
+```
+
+**2. Experiment on a Browser**
+
+Visit http://localhost:8080/demos/array-shell-sort/client.html
+
+**3. Connect and Submit**
+
+<div align="center">
+    <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/48caf1a9-b0ef-49d5-985c-111833f1413f">
+</div>
+
 ## Code Structure ⌨️
 
 This Cypress-based demo adopts the web-worker system to emulate multiple threaded execution. 

diff --git a/demos/array-shuffle/README.md b/demos/array-shuffle/README.md
@@ -17,16 +17,16 @@ node demos/support/server.ts
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 
@@ -61,6 +61,25 @@ npx cypress run --config-file demos/cypress.config.ts --spec "demos/array-shuffl
     <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/eeb84a82-d8ab-43b5-b66e-48966355a24e">
 </div>
 
+## There is something more... 📦
+The demo can be run without Cypress
+
+**1. Run the server in the same way**
+
+```shell
+node demos/support/server.ts
+```
+
+**2. Experiment on a Browser**
+
+Visit http://localhost:8080/demos/array-shuffle/client.html
+
+**3. Connect and Submit**
+
+<div align="center">
+<img width="50%" height="50%"  alt="image" src="https://github.com/multiparty/jiff/assets/62607343/60f2f581-dc83-445c-b985-ada509a03a62">
+</div>
+
 ## Code Structure ⌨️
 
 This Cypress-based demo adopts the web-worker system to emulate multiple threaded execution. 

diff --git a/demos/array-substring/README.md b/demos/array-substring/README.md
@@ -25,16 +25,16 @@ node demos/support/server.ts
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
-    <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
+<img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
-    
-    3) Click a demo protocol of your choice
+
+3) Click a demo protocol of your choice
 <div align="center">
-    <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
+<img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
 
 
@@ -69,6 +69,27 @@ npx cypress run --config-file demos/cypress.config.ts --spec "demos/array-substr
     <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/eeb84a82-d8ab-43b5-b66e-48966355a24e">
 </div>
 
+## There is something more... 📦
+The demo can be run without Cypress
+
+**1. Run the server in the same way**
+
+```shell
+node demos/support/server.ts
+```
+
+**2. Experiment on a Browser**
+
+Visit http://localhost:8080/demos/array-substring/client.html
+
+**3. Connect and Submit**
+
+<div align="center">
+<img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/0dee18f1-8bdc-4f06-90d0-0a9779bf5059">
+</div>
+
+> For this demo, participant 1 must submit a string, and participant 2 must submit a character to find in the P1's string.
+
 ## Code Structure ⌨️
 
 This Cypress-based demo adopts the web-worker system to emulate multiple threaded execution. 

diff --git a/demos/the-valentine-question/README.md b/demos/the-valentine-question/README.md
@@ -15,18 +15,18 @@ The implementation of this protocol is located in <a href="https://github.com/mu
 ```shell
 node demos/support/server.ts   
 ```
-> **⚠️Important:** You must run a fresh server every time. For example, if a test is paused at any point, it is required to terminate the server and restart it before running the rest of the demo.</I> 
+> **⚠️Important:** You must run a fresh server every time. For example, if a test is paused at any point, it is required to terminate the server and restart it before running the rest of the demo.
 
 **2. Run from the Cypress Test Runner 🎥 (with video demos)**
 
-    1) Run `npm run cypress:open` in CML
+1) Run `npm run cypress:open` in CML
 
-    2) Choose a browser (Chrome Recommended)
+2) Choose a browser (Chrome Recommended)
 <div align="center">
     <img width="40%" height="40%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/894b3f2d-4a8b-4368-a81b-4b94ae87cd3a">
 </div>
 
-    3) Click a demo protocol of your choice
+3) Click a demo protocol of your choice
 <div align="center">
     <img width="30%" height="30%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/9137615f-9aec-41ab-8880-cf8c5e6b72ce">
 </div>
@@ -61,6 +61,25 @@ npx cypress run --config-file demos/cypress.config.ts --spec "demos/the-valentin
         <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/eeb84a82-d8ab-43b5-b66e-48966355a24e">
     </div>
 
+## There is something more... 📦
+The demo can be run without Cypress
+
+**1. Run the server in the same way**
+
+```shell
+node demos/support/server.ts
+```
+
+**2. Experiment on a Browser**
+
+Visit http://localhost:8080/demos/the-valentine-question/client.html
+
+**3. Connect and Submit**
+
+<div align="center">
+   <img width="50%" height="50%" alt="image" src="https://github.com/multiparty/jiff/assets/62607343/afc7be2f-2aa5-4997-87ef-0f40aa465964">
+</div>
+
 ## Code Structure ⌨️
 
 This Cypress-based demo adopts the web-worker system to emulate multiple threaded execution.