CaptchaReactNeuron

Details

diff --git a/NeuralNetwork/NeuralNetwork.Model/Services/TextRecognisingService.cs b/NeuralNetwork/NeuralNetwork.Model/Services/TextRecognisingService.cs
index 177886a..1fc567a 100644
--- a/NeuralNetwork/NeuralNetwork.Model/Services/TextRecognisingService.cs
+++ b/NeuralNetwork/NeuralNetwork.Model/Services/TextRecognisingService.cs
@@ -52,14 +52,22 @@ namespace NeuralNetwork.Model.Services
 
             if (bitmap != null)
             {
-                bitmap = RemoveTransparency(bitmap);
+                bitmap = (RemoveTransparency(bitmap));
                 var collect = FindObjects(BitmapToFloatMatrixRgbQ(bitmap));
-                if (collect.Length == 1)
+                int res = 0; List<int> resArr = new List<int>();
+                foreach (var rect in collect)
                 {
-                    var floatArray = BitmapToFloatArrayRgbQ(InsertBitmap(new Bitmap(bitmap.Clone(collect.First(), bitmap.PixelFormat), new Size(20, 20)), 28, 28));
-                    var res = MNIST.GetNumber(floatArray);
-                    return res;
+                    var floatArray = BitmapToFloatArrayRgbQ(InsertBitmap(new Bitmap(bitmap.Clone(rect, bitmap.PixelFormat), new Size(20, 20)), 28, 28));
+                    resArr.Add(MNIST.GetNumber(floatArray));
                 }
+                resArr.Reverse();
+                int power = 1;
+                foreach (var r in resArr)
+                {
+                    res += r * power;
+                    power *= 10;
+                }
+                return res;
             }
 
             return -1;
@@ -76,13 +84,16 @@ namespace NeuralNetwork.Model.Services
                 }
                 if (bitmap != null)
                 {
-                    bitmap = RemoveTransparency(bitmap);
+                    bitmap = (RemoveTransparency(bitmap));
                     var collect = FindObjects(BitmapToFloatMatrixRgbQ(bitmap));
-                    if (collect.Length == 1)
+                    string strNumber = number.ToString();
+                    if (collect.Length != strNumber.Length)
+                        return -1;
+
+                    for (int i = 0; i < collect.Length; i++)
                     {
-                        var floatArray = BitmapToFloatArrayRgbQ(InsertBitmap(new Bitmap(bitmap.Clone(collect.First(), bitmap.PixelFormat), new Size(20, 20)), 28, 28));
-                        MNIST.WriteNumber(floatArray, number);
-                        return -2;
+                        var floatArray = BitmapToFloatArrayRgbQ(InsertBitmap(new Bitmap(bitmap.Clone(collect[i], bitmap.PixelFormat), new Size(20, 20)), 28, 28));
+                        MNIST.WriteNumber(floatArray, int.Parse(strNumber[i].ToString()));
                     }
                 }
             }
@@ -90,7 +101,7 @@ namespace NeuralNetwork.Model.Services
             {
 
             }
-            return -1;
+            return -2;
         }
     }
 }
diff --git a/NeuralNetwork/NeuralNetwork.UI.Web/Content/Site/Site.css b/NeuralNetwork/NeuralNetwork.UI.Web/Content/Site/Site.css
index 6ea5d8f..56c3afb 100644
--- a/NeuralNetwork/NeuralNetwork.UI.Web/Content/Site/Site.css
+++ b/NeuralNetwork/NeuralNetwork.UI.Web/Content/Site/Site.css
@@ -22,3 +22,118 @@ select,
 textarea {
     max-width: 280px;
 }
+
+input[type=range] {
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    width: 100%; /* Specific width is required for Firefox. */
+    background: transparent; /* Otherwise white in Chrome */
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+}
+
+input[type=range]:focus {
+    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    margin: 18px 0;
+    width: 100%;
+}
+
+input[type=range]:focus {
+    outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8.4px;
+    cursor: pointer;
+    animate: 0.2s;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    background: #3071a9;
+    border-radius: 1.3px;
+    border: 0.2px solid #010101;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    border: 1px solid #000000;
+    height: 16px;
+    width: 16px;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -4px;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #367ebd;
+}
+
+input[type=range]::-moz-range-track {
+    width: 100%;
+    height: 8.4px;
+    cursor: pointer;
+    animate: 0.2s;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    background: #3071a9;
+    border-radius: 1.3px;
+    border: 0.2px solid #010101;
+}
+
+input[type=range]::-moz-range-thumb {
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    border: 1px solid #000000;
+    height: 16px;
+    width: 16px;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
+}
+
+input[type=range]::-ms-track {
+    width: 100%;
+    height: 8.4px;
+    cursor: pointer;
+    animate: 0.2s;
+    background: transparent;
+    border-color: transparent;
+    border-width: 16px 0;
+    color: transparent;
+}
+
+input[type=range]::-ms-fill-lower {
+    background: #2a6495;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type=range]::-ms-fill-upper {
+    background: #3071a9;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type=range]::-ms-thumb {
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    border: 1px solid #000000;
+    height: 16px;
+    width: 16px;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
+}
+
+input[type=range]:focus::-ms-fill-lower {
+    background: #3071a9;
+}
+
+input[type=range]:focus::-ms-fill-upper {
+    background: #367ebd;
+}
diff --git a/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx b/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx
index 29b8dbd..5bb8224 100644
--- a/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx
+++ b/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx
@@ -9,7 +9,7 @@ class ReactAppPage extends React.Component {
             {
                 TextRecognising_Result: "",
                 TextRecognising_Learn: "",
-                sliderValue: 1,
+                sliderValue: 4,
                 inputURL: ""
             };
 
@@ -27,12 +27,19 @@ class ReactAppPage extends React.Component {
     componentDidMount() {
         this.canvas = new Canvas(this.refs.CanvasElem);
         this.canvas.Set_UserWrite(true);
+        this.canvas.ChangeThickness(this.state.sliderValue);
         this.canvas.PrintLine();
     }
 
     handleInputURLChange(event) {
         this.setState({ inputURL: event.target.value });
-        this.canvas.DrawImage(this.state.inputURL);
+        var image = new Image(500, 300);
+        image.crossOrigin = "anonymous";
+        var canv = this.canvas;
+        image.onload = function () {
+            canv.DrawImage(image, 500, 300);
+        };
+        image.src = event.target.value;
     }
 
     handleInputChange(event) {
@@ -96,7 +103,7 @@ class ReactAppPage extends React.Component {
 
                 <div className="input-group mb-3">
                     <div className="input-group-prepend">
-                        <span className="input-group-text" id="basic-addon1">Result:</span>
+                        <span className="input-group-text" id="basic-addon1">Распознано:</span>
                     </div>
                     <input type="text" readOnly="readonly" value={this.state.TextRecognising_Result} className="form-control" aria-describedby="basic-addon1" />
                 </div>
@@ -113,8 +120,12 @@ class ReactAppPage extends React.Component {
                     <input type="text" value={this.state.TextRecognising_Learn} className="form-control" onChange={this.handleInputChange} />
                 </div>
 
-                <div className="slidecontainer">
-                    <input type="range" min="1" max="10" step="0.5" value={this.state.sliderValue} className="slider" onChange={this.handleSliderChange} />
+
+                <div className="input-group mb-3">
+                    <div className="input-group-prepend">
+                        <span className="input-group-text" id="basic-addon1">Размер кисти</span>
+                    </div>
+                    <input type="range" id="range" min="1" max="10" step="0.5" value={this.state.sliderValue} className="slider ml-2" onChange={this.handleSliderChange} />
                 </div>
             </div>
         );
diff --git a/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Tools/Canvas.js b/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Tools/Canvas.js
index 1727c69..636dee8 100644
--- a/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Tools/Canvas.js
+++ b/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Tools/Canvas.js
@@ -59,9 +59,8 @@ class Canvas {
         return this.canvas.toDataURL(format);
     }
 
-    //Изменить толщину пера
+    //
     DrawImage(image, width, height) {
-
         this.context.drawImage(image, 0, 0, width, height);
     }