brain-js.test-03-LSTM-math.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Brain JS - LSTM Math</title>
  5. <meta charset="utf-8" />
  6. <meta http-equiv="Content-Type"
  7. content="text/html; charset=utf-8" />
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0">
  10. <style>
  11. #network {
  12. background: #ccc;
  13. border: 1px solid red;
  14. width: 640px;
  15. height: 480px;
  16. }
  17. </style>
  18. <link rel="stylesheet" href="simple.min.css">
  19. </head>
  20. <body>
  21. <h1>Brain JS - LSTM Math</h1>
  22. <p>
  23. In this case, we test the math adding calcuation by LSTM model.
  24. </p>
  25. <h2>Test results</h2>
  26. <div id="input">
  27. <p>Input a math problem, like "1+2=" or "9+7=" in the below input box.</p>
  28. <input type="text"
  29. id="problem"></input>
  30. <button id="calcuate">Calculate</button>
  31. <button id="testall">Test all once</button>
  32. </div>
  33. <div id="output"></div>
  34. <h2>Network</h2>
  35. <div id="network"></div>
  36. </body>
  37. <script src="brain-browser.js"></script>
  38. <script type="text/javascript">
  39. const svg_config = {
  40. height: 480,
  41. width: 640,
  42. radius: 10,
  43. };
  44. // create a simple recurrent neural network
  45. const net = new brain.recurrent.LSTM();
  46. // used to build list below
  47. const mathProblemsSet = new Set();
  48. for (let i = 0; i < 10; i++) {
  49. for (let j = 0; j < 10; j++) {
  50. mathProblemsSet.add(`${i}+${j}=${i + j}`);
  51. mathProblemsSet.add(`${j}+${i}=${i + j}`);
  52. }
  53. }
  54. const mathProblems = Array.from(mathProblemsSet);
  55. console.log(mathProblems);
  56. net.train(mathProblems, { log: true, errorThresh: 0.03 });
  57. let errors = 0;
  58. document.getElementById("calcuate").onclick = () => {
  59. const input = document.getElementById("problem").value;
  60. const output = net.run(input)
  61. const predictedMathProblem = input + output;
  62. const error = mathProblems.indexOf(predictedMathProblem) <= -1 ? 1 : 0;
  63. errors += error;
  64. document.getElementById("output").innerHTML =
  65. `Output :${input}${output}` +
  66. `<br/>${error?'Error':'Correct'}, total error ${errors}`;
  67. };
  68. // Batch test for all problems
  69. document.getElementById("testall").onclick = () => {
  70. let results = 'Test all items:<br/><ul>';
  71. for (let i = 0; i < mathProblems.length; i++) {
  72. const input = mathProblems[i].split('=')[0] + '=';
  73. const output = net.run(input);
  74. const predictedMathProblem = input + output;
  75. const error = mathProblems.indexOf(predictedMathProblem) <= -1 ? 1 : 0;
  76. errors += error;
  77. results += '<li>';
  78. results += input + output;
  79. results += error ? ' - error' : '';
  80. results += '</li>';
  81. }
  82. results +='</ul>';
  83. results = `Batch test with ${errors} errors <br/>`+ results;
  84. document.getElementById("output").innerHTML = results;
  85. };
  86. document.getElementById("network").innerHTML = brain.utilities.toSVG(
  87. net,
  88. svg_config
  89. );
  90. </script>
  91. </html>