Fix some examples

yining1023 · Feb 4, 2024 · 7fd849d · 7fd849d
1 parent 02f1d81
commit 7fd849d
Show file tree

Hide file tree

Showing 44 changed files with 100,643 additions and 25,625 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ To run each examples, open your terminal, type in the following commands:
 ```
 $ git clone https://github.com/yining1023/machine-learning-for-the-web.git
 $ cd machine-learning-for-the-web
-$ python -m SimpleHTTPServer     # $ python -m http.server (if you are using python 3)
+$ python3 -m http.server
 ```
 
 Go to `localhost:8000` in your browser, you will see a directory list like this:

diff --git a/rnn/CharRNN_Interactive/index.html b/rnn/CharRNN_Interactive/index.html
@@ -6,8 +6,7 @@
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
-
+  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
   <style></style>
 </head>
 

diff --git a/rnn/CharRNN_Text/index.html b/rnn/CharRNN_Text/index.html
@@ -1,31 +1,42 @@
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>LSTM Text Generation Example</title>
 
-<head>
-  <meta charset="UTF-8">
-  <title>LSTM Text Generation Example</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+    <script
+      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
+      type="text/javascript"
+    ></script>
+  </head>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
-
-</head>
+  <body>
+    <h1>LSTM Text Generation Example</h1>
+    <h2>
+      This example uses a pre-trained model on a corpus of
+      <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a>
+    </h2>
+    <p>
+      seed text:
+      <input id="textInput" value="The meaning of life is" />
+    </p>
+    <p>
+      length:
+      <input id="lenSlider" type="range" min="10" max="500" value="100" />
+      <span id="length">100</span>
+    </p>
+    <p>
+      temperature:
+      <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span
+        id="temperature"
+        >0.5</span
+      >
+    </p>
+    <p id="status">Loading Model</p>
+    <button id="generate">generate</button>
+    <p id="result"></p>
 
-<body>
-  <h1>LSTM Text Generation Example</h1>
-  <h2>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></h2>
-  <p>seed text:
-    <input id="textInput" value="The meaning of life is"                      />
-  </p>
-  <p>length:
-    <input id="lenSlider" type="range" min="10" max="500" value="100"                     /> <span id="length">100</span></p>
-  <p>temperature:
-    <input id="tempSlider" type="range" min="0" max="1" step="0.01"                     /><span id="temperature">0.5</span></p>
-  <p id="status">Loading Model</p>
-  <button id="generate">generate</button>
-  <p id="result"></p>
-
-
-  <script src="sketch.js"></script>
-</body>
-
-</html>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/rnn/CharRNN_Text_Stateful/index.html b/rnn/CharRNN_Text_Stateful/index.html
@@ -1,41 +1,59 @@
 <html>
-
-<head>
-  <meta charset="UTF-8">
-  <title>Stateful CharRNN Text Generation Example using p5.js</title>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
-
-
-  <style></style>
-
-</head>
-
-<body>
-  <h1>Stateful CharRNN Text Generation Example using p5.js</h1>
-  <p>Instead of feeding every single character every frame to predict the next character, we feed only the last character, and instruct the CharRNN to remember its internal state.</p>
-  <p>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></p>
-  <p>seed text:
-    <input id="textInput" value="The sky was blue and "                      />
-  </p>
-  <p>temperature:
-    <input id="tempSlider" type="range" min="0" max="1" step="0.01"                     /><span id="temperature">0.5</span>
-  </p>
-  <p><button id="reset">Reset</button><button id="start">Start</button><button id="single">Single</button></p>
-  <p id="status">Loading Model</p>
-  <div id="canvasContainer"></div>
-
-  <p id="result"></p>
-
-  <hr />
-  <h2>Acknowledgements</h2>
-  <p>
-  This work was supported through a residency at the <a href="http://studioforcreativeinquiry.org/" target="_blank">Frank-Ratchye STUDIO for Creative Inquiry</a> at Carnegie Mellon University, Pittsburgh, October 2018, with additional support from the Sylvia and David Steiner Speaker Series.
-  </p>
-  <script src="sketch.js"></script>
-
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stateful CharRNN Text Generation Example using p5.js</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+    <script
+      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
+      type="text/javascript"
+    ></script>
+
+    <style></style>
+  </head>
+
+  <body>
+    <h1>Stateful CharRNN Text Generation Example using p5.js</h1>
+    <p>
+      Instead of feeding every single character every frame to predict the next
+      character, we feed only the last character, and instruct the CharRNN to
+      remember its internal state.
+    </p>
+    <p>
+      This example uses a pre-trained model on a corpus of
+      <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a>
+    </p>
+    <p>
+      seed text:
+      <input id="textInput" value="The sky was blue and " />
+    </p>
+    <p>
+      temperature:
+      <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span
+        id="temperature"
+        >0.5</span
+      >
+    </p>
+    <p>
+      <button id="reset">Reset</button><button id="start">Start</button
+      ><button id="single">Single</button>
+    </p>
+    <p id="status">Loading Model</p>
+    <div id="canvasContainer"></div>
+
+    <p id="result"></p>
+
+    <hr />
+    <h2>Acknowledgements</h2>
+    <p>
+      This work was supported through a residency at the
+      <a href="http://studioforcreativeinquiry.org/" target="_blank"
+        >Frank-Ratchye STUDIO for Creative Inquiry</a
+      >
+      at Carnegie Mellon University, Pittsburgh, October 2018, with additional
+      support from the Sylvia and David Steiner Speaker Series.
+    </p>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/rnn/SketchRNN_basic/index.html b/rnn/SketchRNN_basic/index.html
@@ -1,15 +1,18 @@
 <html>
   <head>
-    <meta charset="UTF-8" >
+    <meta charset="UTF-8" />
     <title>SketchRNN</title>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
+    <script
+      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
+      type="text/javascript"
+    ></script>
   </head>
 
   <body>
     <h1>SketchRNN</h1>
     <script src="sketch.js"></script>
   </body>
-</html>
+</html>
diff --git a/rnn/SketchRNN_interactive/index.html b/rnn/SketchRNN_interactive/index.html
@@ -1,11 +1,14 @@
 <html>
   <head>
-    <meta charset="UTF-8" >
+    <meta charset="UTF-8" />
     <title>SketchRNN</title>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
+    <script
+      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
+      type="text/javascript"
+    ></script>
   </head>
 
   <body>
@@ -14,4 +17,4 @@ <h1>SketchRNN</h1>
     <p><button id="clear">Clear</button></p>
     <script src="sketch.js"></script>
   </body>
-</html>
+</html>
diff --git a/text/CharRNN_Interactive/index.html b/text/CharRNN_Interactive/index.html
@@ -1,30 +1,40 @@
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Interactive CharRNN Text Generation Example using p5.js</title>
 
-<head>
-  <meta charset="UTF-8">
-  <title>Interactive CharRNN Text Generation Example using p5.js</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+    <script
+      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
+      type="text/javascript"
+    ></script>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
+    <style></style>
+  </head>
 
-  <style></style>
-</head>
+  <script src="sketch.js"></script>
 
-<script src="sketch.js"></script>
-
-<body>
+  <body>
     <h1>Interactive CharRNN Text Generation Example using p5.js</h1>
-    <h2>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></h2>
-  <textarea id="textInput" style="width: 300px; height: 50px;" placeholder="type here"></textarea>
-  <br /> length:
-  <input id="lenSlider" type="range" min="1" max="100" value="20"                     /> <span id="length">20</span>
-  <br /> temperature:
-  <input id="tempSlider" type="range" min="0" max="1" step="0.01"                     /><span id="temperature">0.5</span>
-  <p id="status">Loading Model</p>
-  <p id="result">
-    <span id="original"></span><span id="prediction"></span>
-  </p>
-</body>
-
-</html>
+    <h2>
+      This example uses a pre-trained model on a corpus of
+      <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a>
+    </h2>
+    <textarea
+      id="textInput"
+      style="width: 300px; height: 50px"
+      placeholder="type here"
+    ></textarea>
+    <br />
+    length: <input id="lenSlider" type="range" min="1" max="100" value="20" />
+    <span id="length">20</span> <br />
+    temperature:
+    <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span
+      id="temperature"
+      >0.5</span
+    >
+    <p id="status">Loading Model</p>
+    <p id="result"><span id="original"></span><span id="prediction"></span></p>
+  </body>
+</html>
diff --git a/text/CharRNN_Text/index.html b/text/CharRNN_Text/index.html
@@ -1,31 +1,42 @@
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>LSTM Text Generation Example</title>
 
-<head>
-  <meta charset="UTF-8">
-  <title>LSTM Text Generation Example</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+    <script
+      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
+      type="text/javascript"
+    ></script>
+  </head>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>
-
-</head>
+  <body>
+    <h1>LSTM Text Generation Example</h1>
+    <h2>
+      This example uses a pre-trained model on a corpus of
+      <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a>
+    </h2>
+    <p>
+      seed text:
+      <input id="textInput" value="The meaning of life is" />
+    </p>
+    <p>
+      length:
+      <input id="lenSlider" type="range" min="10" max="500" value="100" />
+      <span id="length">100</span>
+    </p>
+    <p>
+      temperature:
+      <input id="tempSlider" type="range" min="0" max="1" step="0.01" /><span
+        id="temperature"
+        >0.5</span
+      >
+    </p>
+    <p id="status">Loading Model</p>
+    <button id="generate">generate</button>
+    <p id="result"></p>
 
-<body>
-  <h1>LSTM Text Generation Example</h1>
-  <h2>This example uses a pre-trained model on a corpus of <a href="https://en.wikipedia.org/wiki/Virginia_Woolf">Virginia Woolf</a></h2>
-  <p>seed text:
-    <input id="textInput" value="The meaning of life is"                      />
-  </p>
-  <p>length:
-    <input id="lenSlider" type="range" min="10" max="500" value="100"                     /> <span id="length">100</span></p>
-  <p>temperature:
-    <input id="tempSlider" type="range" min="0" max="1" step="0.01"                     /><span id="temperature">0.5</span></p>
-  <p id="status">Loading Model</p>
-  <button id="generate">generate</button>
-  <p id="result"></p>
-
-
-  <script src="sketch.js"></script>
-</body>
-
-</html>
+    <script src="sketch.js"></script>
+  </body>
+</html>