API tools faq
paste
Advertisement
Guest User

Brain_AI

a guest
Oct 31st, 2018
319
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.47 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!