Files
  • index.html
  • data
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!--
 Copyright (c) 2018 ml5

 This software is released under the MIT License.
 https://opensource.org/licenses/MIT
-->

<html>

<head>
  <meta charset="UTF-8">
  <title>Interactive LSTM Text Generation Example using p5.js</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script>

  <style>
  #original {
    background-color: #EEE;
    padding: 4px 0px 4px 4px
  }

  #prediction {
    background-color: #CCC;
    padding: 4px 0px 4px 0px
  }

  </style>
</head>

<script src="script.js"></script>

<body>
    <h1>Interactive LSTM 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>
result
console