Advertisement
Guest User

Brain_AI

a guest
Oct 31st, 2018
297
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.47 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Brain</title>
  6.  
  7.     <script src="brain.js-master/browser.min.js"></script>
  8.  
  9.     <style>
  10.         body {
  11.             background-color: #fff;
  12.             font-family: Trebuchet MS, sans-serif;
  13.         }
  14.  
  15.         body *{
  16.             user-select: none;
  17.         }
  18.  
  19.         @keyframes click{
  20.             0%{ background: #f0f0f0;}
  21.             100%{ background: #d0d0d0;}
  22.         }
  23.  
  24.         #canv {
  25.             position: absolute;
  26.             top: 0;right: 0;bottom: 0;left: 0;
  27.             margin: auto;
  28.             background-color: white;
  29.             box-shadow: 0 2.5px 10px #ddd;
  30.             border-radius: 5px;
  31.         }
  32.         #buttons{
  33.             display: block;
  34.             position: fixed;
  35.             width: max-content;
  36.             height: max-content;
  37.             padding: 15px;
  38.             margin: 5px;
  39.             background: #fff;
  40.             border-radius: 10px;
  41.             box-shadow: 0 2.5px 7.5px #ddd;
  42.             top: 50px;
  43.             right: 50px;
  44.             text-align: center;
  45.         }
  46.         .button{
  47.             display: block;
  48.             position: relative;
  49.             width: 150px;
  50.             height: 20px;
  51.             line-height: 20px;
  52.             vertical-align: middle;
  53.             text-align: center;
  54.             margin: 5px auto;
  55.             border-radius: 7.5px;
  56.             box-shadow: 0 2.5px 5px #f0f0f0;
  57.             padding: 5px 15px;
  58.             transition: 0.25s ease;
  59.             font-size: 18px;
  60.             cursor: pointer;
  61.         }
  62.         .button:hover{
  63.             background: #f0f0f0;
  64.             box-shadow: 0 2.5px 12.5px #ddd;
  65.         }
  66.         .hr{
  67.             display: block;
  68.             position: relative;
  69.             width: 90%;
  70.             padding: 1.5px;
  71.             margin: 10px auto;
  72.             background: #ddd;
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77.    
  78.     <canvas id="canv" style="display: block;">Ваш браузер устарел, обновитесь.</canvas>
  79.  
  80.     <script>
  81.         function DCanvas(el)
  82.         {
  83.             const ctx = el.getContext('2d');
  84.             const pixel = 20;
  85.  
  86.             let is_mouse_down = false;
  87.  
  88.             canv.width = 750;
  89.             canv.height = 750;
  90.  
  91.             this.drawLine = function(x1, y1, x2, y2, color = 'gray') {
  92.                 ctx.beginPath();
  93.                 ctx.strokeStyle = color;
  94.                 ctx.lineJoin = 'miter';
  95.                 ctx.lineWidth = 1;
  96.                 ctx.moveTo(x1, y1);
  97.                 ctx.lineTo(x2, y2);
  98.                 ctx.stroke();
  99.             }
  100.  
  101.             this.drawCell = function(x, y, w, h) {
  102.                 ctx.fillStyle = 'blue';
  103.                 ctx.strokeStyle = 'blue';
  104.                 ctx.lineJoin = 'miter';
  105.                 ctx.lineWidth = 1;
  106.                 ctx.rect(x, y, w, h);
  107.                 ctx.fill();
  108.             }
  109.  
  110.             this.clear = function() {
  111.                 ctx.clearRect(0, 0, canv.width, canv.height);
  112.             }
  113.  
  114.             this.drawGrid = function() {
  115.                 const w = canv.width;
  116.                 const h = canv.height;
  117.                 const p = w / pixel;
  118.  
  119.                 const xStep = w / p;
  120.                 const yStep = h / p;
  121.  
  122.                 for( let x = 0; x < w; x += xStep )
  123.                 {
  124.                     this.drawLine(x, 0, x, h);
  125.                 }
  126.  
  127.                 for( let y = 0; y < h; y += yStep )
  128.                 {
  129.                     this.drawLine(0, y, w, y);
  130.                 }
  131.             }
  132.  
  133.             this.drawImage = function(image){
  134.                 const w = canv.width;
  135.                 const h = canv.height;
  136.                 ctx.drawImage(image, 0, 0, w, h);
  137.             }
  138.  
  139.             this.calculate = function(draw = false) {
  140.                 const w = canv.width;
  141.                 const h = canv.height;
  142.                 const p = w / pixel;
  143.  
  144.                 const xStep = w / p;
  145.                 const yStep = h / p;
  146.  
  147.                 const vector = [];
  148.                 let __draw = [];
  149.  
  150.                 for( let x = 0; x < w; x += xStep )
  151.                 {
  152.                     for( let y = 0; y < h; y += yStep )
  153.                     {
  154.                         const data = ctx.getImageData(x, y, xStep, yStep);
  155.  
  156.                         let nonEmptyPixelsCount = 0;
  157.                         for( i = 0; i < data.data.length; i += 10 )
  158.                         {
  159.                             const isEmpty = data.data[i] === 0;
  160.  
  161.                             if( !isEmpty )
  162.                             {
  163.                                 nonEmptyPixelsCount += 1;
  164.                             }
  165.                         }
  166.  
  167.                         if( nonEmptyPixelsCount > 1 && draw )
  168.                         {
  169.                             __draw.push([x, y, xStep, yStep]);
  170.                         }
  171.  
  172.                         vector.push(nonEmptyPixelsCount > 1 ? 1 : 0);
  173.                     }
  174.                 }
  175.  
  176.                 if( draw )
  177.                 {
  178.                     this.clear();
  179.                     this.drawGrid();
  180.  
  181.                     for( _d in __draw )
  182.                     {
  183.                         this.drawCell( __draw[_d][0], __draw[_d][1], __draw[_d][2], __draw[_d][3] );
  184.                     }
  185.                 }
  186.  
  187.                 return vector;
  188.             }
  189.  
  190.             el.addEventListener('mousedown', function(e) {
  191.                 is_mouse_down = true;
  192.                 ctx.beginPath();
  193.             })
  194.  
  195.             el.addEventListener('mouseup', function(e) {
  196.                 is_mouse_down = false;
  197.             })
  198.  
  199.             el.addEventListener('mousemove', function(e) {
  200.                 if( is_mouse_down )
  201.                 {
  202.                     ctx.fillStyle = 'red';
  203.                     ctx.strokeStyle = 'red';
  204.                     ctx.lineWidth = pixel;
  205.  
  206.                     ctx.lineTo(e.offsetX, e.offsetY);
  207.                     ctx.stroke();
  208.  
  209.                     ctx.beginPath();
  210.                     ctx.arc(e.offsetX, e.offsetY, pixel / 2, 0, Math.PI * 2);
  211.                     ctx.fill();
  212.  
  213.                     ctx.beginPath();
  214.                     ctx.moveTo(e.offsetX, e.offsetY);
  215.                 }
  216.             })
  217.         }
  218.  
  219.         let vector = [];
  220.         let net = null;
  221.         let last_object = localStorage.lo;
  222.  
  223.         // var file = new FileReader("txt/json_td.txt");
  224.         // file.readAsText(file);
  225.         // var json_td = file.readln();
  226.  
  227.         // let train_data = json_td ? JSON.parse(json_td) : [];
  228.         let train_data = [];
  229.  
  230.  
  231.         const d = new DCanvas(document.getElementById('canv'));
  232.  
  233.  
  234.         var buttons = document.getElementsByClassName('button');
  235.         function action(e){
  236.             if( e == 'clear' )
  237.             {
  238.                 d.clear();
  239.             }
  240.  
  241.             if( e == 'add' )
  242.             {
  243.                 vector = d.calculate(true);
  244.                
  245.                 let new_object = prompt('Add', last_object).toLowerCase();
  246.                 //train
  247.                 last_object = new_object;
  248.                 if(new_object)
  249.                     train_data.push({
  250.                         input: vector,
  251.                         output: {[new_object]: 1}
  252.                     });
  253.             }
  254.  
  255.             if( e == 'rec' )
  256.             {
  257.                 net = new brain.NeuralNetwork();
  258.                 net.train(train_data, {log: true});
  259.                 vector = d.calculate()
  260.  
  261.                 const result = brain.likely(vector, net);
  262.                 if(!confirm(result)){
  263.                     let true_object = prompt('What was it?').toLowerCase();
  264.                     if(true_object)
  265.                         train_data.push({
  266.                             input: vector,
  267.                             output: {[true_object]: 1}
  268.                         });
  269.                     last_object = true_object;
  270.                 }
  271.             }
  272.         }
  273.  
  274.         window.onbeforeunload = function(event){
  275.             // var file = new File("txt/json_td.txt");
  276.             // var td = JSON.stringify(train_data);
  277.  
  278.             // file.open("w");
  279.             // file.write(td);
  280.             // file.close();
  281.             localStorage.lo = last_object;
  282.         };
  283.         window.onload = function(){
  284.             // console.log(JSON.stringify(localStorage.td));
  285.         };
  286.     </script>
  287.     <div id="buttons">
  288.         <div class="button" onclick="action('clear');">Clear</div>
  289.         <div class="button" onclick="action('add')">Add</div>
  290.         <div class="hr"></div>
  291.         <div class="button" onclick="document.getElementById('img_file').click()">Add image</div>
  292.         <input type="file" style="display: none;" id="img_file" accept="image/png, image/jpg, image/gif" onchange="var img = new Image();
  293.                     img.onload = function(){ d.drawImage(img);}
  294.                     img.src = window.URL.createObjectURL(this.files[0]);
  295.                     ">
  296.         <div class="hr"></div>
  297.         <div class="button" onclick="action('rec')">Recognize</div>
  298.     </div>
  299. </body>
  300. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement