TaylorFlow/index.html at master · Steve0929/TaylorFlow · GitHub

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
  </head>

  <body>
    <form>
      Texto:<br>
      <input type="text" id="texto" name="texto"><br>
      <button id="Button" type="button" onclick="pred()">Start</button>
      <p id="out"> out here </p>
    </form>
  </body>

</html>

<script>
var INPUT_LENGTH= 25;
var CHARS_TO_GENERATE = 250;
var DIVERSITY = 0.5;

var modelo;
var flag =false;
var char_indices = {"\n": 0, " ": 1, "!": 2, "\"": 3, "&": 4, "'": 5, "(": 6, ")": 7, ",": 8, "-": 9,
 ".": 10, "/": 11, "0": 12, "1": 13, "2": 14, "3": 15, "4": 16, "5": 17, "6": 18, "7": 19, "8": 20,
 "9": 21, ":": 22, ";": 23, "?": 24, "[": 25, "]": 26, "a": 27, "b": 28, "c": 29, "d": 30, "e": 31,
 "f": 32, "g": 33, "h": 34, "i": 35, "j": 36, "k": 37, "l": 38, "m": 39, "n": 40, "o": 41, "p": 42,
 "q": 43, "r": 44, "s": 45, "t": 46, "u": 47, "v": 48, "w": 49, "x": 50, "y": 51, "z": 52, "{": 53,
 "}": 54}

var indices_char = {"0": "\n", "1": " ", "2": "!", "3": "\"", "4": "'", "5": "(", "6": ")", "7": ",",
"8": "-", "9": ".", "10": "0", "11": "1", "12": "2", "13": "3", "14": "4", "15": "5", "16": "6","17":
"7", "18": "8", "19": "9", "20": ":", "21": ";", "22": "=", "23": "?", "24": "[", "25": "]", "26": "_",
"27": "a", "28": "b", "29": "c", "30": "d", "31": "e", "32": "f",
"33": "g", "34": "h", "35": "i", "36": "j", "37": "k", "38": "l", "39": "m", "40": "n", "41": "o",
"42": "p", "43": "q", "44": "r", "45": "s", "46": "t", "47": "u", "48": "v", "49": "w", "50": "x",
"51": "y", "52": "z", "53": "{", "54": "}"}

async function preload(){
document.getElementById("Button").disabled = true;
tf.loadModel('model_exported_30epochs/model.json').then((model) => {
   modelo = model;
   modelo.summary();
   document.getElementById("Button").disabled = false;
  //init();
 });
}
function draw(){
if(model!=null && !flag){
  flag=true;
  }
}

async function pred(){
var word = document.getElementById('texto').value;
for(var i =0;i<CHARS_TO_GENERATE;i++){
    const indexTensor = tf.tidy(() => {
    const input = this.convert(word);
    const prediction = modelo.predict(input).squeeze();
    return sample(prediction);
  })
  const index = await indexTensor.data();
  indexTensor.dispose();
  word += indices_char[index];
  document.getElementById('texto').innerHTML= word;
  console.log(word);
  await tf.nextFrame();
}

}


/**
 * Converts sentence to Tensor for feeding into model.
 */
function convert(sentence) {
  sentence = sentence.toLowerCase();
  sentence = sentence.split('').filter(x => x in char_indices).join('');
  if (sentence.length < INPUT_LENGTH) {
    sentence = sentence.padStart(INPUT_LENGTH);
  } else if (sentence.length > INPUT_LENGTH) {
    sentence = sentence.substring(sentence.length - INPUT_LENGTH);
  }
  const buffer = tf.buffer([1, INPUT_LENGTH, Object.keys(indices_char).length]);
  for (let i = 0; i < INPUT_LENGTH; i++) {
    let char = sentence.charAt(i)
    buffer.set(1, 0, i, char_indices[char]);
  }
  const input = buffer.toTensor();
  return input;
  }


 function sample(prediction) {
   return tf.tidy(() => {
     prediction = prediction.log();
     const diversity = tf.scalar(DIVERSITY);
     prediction = prediction.div(diversity);
     prediction = prediction.exp();
     prediction = prediction.div(prediction.sum());
     prediction = prediction.mul(tf.randomUniform(prediction.shape));
     return prediction.argMax();
   });
 }
</script>