63 | {pageEnabled['LandingPage'] ? changeActiveWindow('CreatePage')} /> : null}
64 | {pageEnabled['CreatePage'] ? changeActiveWindow('NNPage')} getKey={uniqueKeyGenerator}/> : null}
65 | {pageEnabled['NNPage'] ?
67 |
61 |
62 |
68 |
69 | )
70 | }
--------------------------------------------------------------------------------
/frontend/src/components/CreateNN.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 |
3 | import styles from '../scss/components/create.module.scss'
4 |
5 | import uploadsvg from './upload.svg'
6 |
7 | export default function CreatePage({ changeNNStruct, handlePageTransition, getKey }) {
8 |
9 | function handleSubmitClick(){
10 |
11 |
12 |
13 | handlePageTransition();
14 | }
15 |
16 |
17 | const moment = useRef(0);
18 | const learningRate = useRef(0);
19 | const layers = useRef([]);
20 | const terminatingError = useRef(0);
21 |
22 |
23 | return (
24 |
25 |
45 | )
46 | }
47 |
48 | function SetupInput({ name, text, placeholder, width, maxLimit = 5 }) {
49 | return (
50 |
26 |
44 |
27 |
28 |
29 |
30 |
43 |
31 |
42 |
32 |
35 | LET'S GO!
51 |
54 | )
55 | }
56 |
57 | function LayersInput({ getKey }) {
58 | function SetupInputLocal({ name, text, placeholder }) {
59 | return (
60 | {text}
52 | 53 |
61 |
66 | )
67 | }
68 |
69 | function HiddenLayer({ data_key, placeholder, handleAddingLayer, handleDeletingLayer
70 | }) {
71 | function HiddenLayerButtons() {
72 | const [isVisible, setVisibility] = useState(true)
73 |
74 | return (
75 |
62 |
64 |
65 | {text}
63 | setVisibility(false)} onMouseLeave={() => setVisibility(true)} className={styles.hiddenLayer_buttons}>
76 |
79 | )
80 | }
81 |
82 | return (
83 | handleAddingLayer(data_key)} hidden={isVisible}>
77 | handleDeletingLayer(data_key)} hidden={isVisible}>
78 |
84 |
85 |
86 |
88 | )
89 | }
90 |
91 | function createHiddenLayerElement() {
92 | let newKey = getKey()
93 |
94 | let element =
95 |
96 |
149 |
156 | )
157 | }
158 |
159 | function TrainingInput() {
160 | const [fileName, setFileName] = useState('')
161 |
162 | return (
163 | Layers
150 |
152 | {hiddenLayers.map(element => element.value)}
153 |
154 |
164 |
172 | setFileName(e.target.files[0].name)} />
173 |
174 | )
175 | }
--------------------------------------------------------------------------------
/frontend/src/components/Landing.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import styles from '../scss/components/landing.module.scss'
4 |
5 | export default function LandingPage({ handlePageTransition }) {
6 | return (
7 |
8 |
23 | )
24 | }
--------------------------------------------------------------------------------
/frontend/src/components/NeuralNetwork.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef } from "react";
2 |
3 | import * as NNApi from "./NeuralNetworkFunctions"
4 |
5 | import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
6 |
7 | import styles from '../scss/components/neuralnetwork.module.scss'
8 | import uploadsvg from './upload.svg'
9 | import startsvg from './start.svg'
10 | import stopsvg from './stop.svg'
11 |
12 |
13 | export default function NeuralNetwork() {
14 |
15 | //#region Variables
16 | const NNId = useRef('');
17 | const interval = useRef('');
18 |
19 | const moment = useRef(0.5);
20 | const learningRate = useRef(0.1);
21 | const struct = useRef('784 26+ 16 10');
22 | const terminatingError = useRef(0.00011);
23 |
24 | const [startDisabled, setStartDisabled] = useState(false);
25 | const [stopDisabled, setStopDisabled] = useState(false);
26 | const [continueDisabled, setContinueDisabled] = useState(true);
27 | const [deleteDisabled, setDeleteDisabled] = useState(false);
28 | const [NNstate, setNNstate] = useState(null);
29 | //#endregion
30 |
31 |
32 | async function startNN() {
33 | try {
34 | const data = await NNApi.startNN({ moment: moment.current.value, learningRate: learningRate.current.value, struct: struct.current.value, terminatingError: terminatingError.current.value })
35 |
36 | NNId.current = data
37 |
38 | getNNState()
39 | interval.current = setInterval(() => {
40 | getNNState()
41 | }, 5000)
42 |
43 | setStartDisabled(true)
44 | setContinueDisabled(true)
45 | setStopDisabled(false)
46 | setDeleteDisabled(false)
47 |
48 | console.log('NN created with ID ' + data)
49 | }
50 | catch (err) {
51 | console.log(err)
52 | }
53 | }
54 |
55 | async function stopNN() {
56 | try {
57 | const response = await NNApi.stopNN(NNId.current)
58 |
59 | clearInterval(interval.current)
60 |
61 | setStopDisabled(true)
62 | setContinueDisabled(false)
63 |
64 | console.log('process ' + NNId.current + ' stopped with code ' + response)
65 | }
66 | catch (err) {
67 | console.log(err)
68 | }
69 | }
70 |
71 | async function continueNN() {
72 | try {
73 | const response = await NNApi.continueNN(NNId.current)
74 |
75 | getNNState()
76 | interval.current = setInterval(() => {
77 | getNNState()
78 | }, 5000)
79 |
80 | setContinueDisabled(true)
81 | setStopDisabled(false)
82 |
83 | console.log('process ' + NNId.current + ' continued with code ' + response)
84 | }
85 | catch (err) {
86 | console.log(err)
87 | }
88 | }
89 |
90 | async function deleteNN() {
91 | try {
92 | const response = await NNApi.deleteNN(NNId.current)
93 |
94 | const state = { trainingSets: 0, iteration: 0, errorSum: 0, sw: "" }
95 |
96 | clearInterval(interval.current)
97 |
98 | setStopDisabled(true)
99 | setDeleteDisabled(true)
100 | setStartDisabled(false)
101 | setContinueDisabled(true)
102 | setNNstate(state)
103 |
104 | console.log('process ' + NNId.current + ' deleted with code ' + response)
105 | }
106 | catch (err) {
107 | console.log(err)
108 | }
109 | }
110 |
111 | async function getNNState() {
112 | const data = await NNApi.getNNState(NNId.current)
113 |
114 | setNNstate(data)
115 |
116 | console.log(data)
117 | }
118 |
119 | const data = [
120 | { time: '0:00', mistake: 79 },
121 | { time: '0:05', mistake: 77 },
122 | { time: '0:10', mistake: 70 },
123 | { time: '0:15', mistake: 64 },
124 | { time: '0:20', mistake: 67 },
125 | { time: '0:25', mistake: 64 },
126 | { time: '0:30', mistake: 64 },
127 | { time: '0:35', mistake: 62 },
128 | { time: '0:40', mistake: 60 },
129 | ]
130 |
131 |
132 | return (
133 |
9 |
16 |
10 |
15 |
11 |
14 | CREATE
12 |NEURAL NETWORK
13 |
17 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt consectetur inventore velit repellat dicta! Suscipit placeat cumque odit hic numquam officiis enim inventore commodi, dolorum minima aliquam dolore itaque maiores. Officia molestiae, libero magnam quasi eveniet voluptas incidunt voluptates error nesciunt molestias suscipit est iste sint consequatur porro, minima culpa? Inventore possimus dolore nostrum nisi mollitia ab laudantium sapiente repudiandae soluta facilis sit aliquam distinctio amet libero corporis, cum voluptate. Deleniti illum non ipsam reiciendis natus rerum tempore minima, impedit quis earum neque sit obcaecati ratione atque quam perspiciatis ab id molestias accusantium soluta libero. Doloribus fugit illum ullam officia.
18 |
19 |
20 |
21 | All rights reserved
22 |
134 |
135 |
7 | ,
9 | document.getElementById('root')
10 | );
--------------------------------------------------------------------------------
/frontend/src/scss/app.scss:
--------------------------------------------------------------------------------
1 | @import url(//db.onlinewebfonts.com/c/f2ecc6ef740fcf60de095b0b087dd58d?family=OCR+A+Extended);
2 |
3 | body {
4 | font-family: "OCR A Extended", sans-serif;
5 |
6 | background-color: #0085d4;
7 | color: white;
8 |
9 | font-size: 28px;
10 |
11 | margin: 0;
12 | padding: 0;
13 | }
14 |
15 | ::selection {
16 | background-color: rgba(163, 4, 4, 0.753);
17 | color: white;
18 | }
19 |
20 | * {
21 | font-size: 14px;
22 | text-align: center;
23 | }
24 |
25 | .container {
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | p {
31 | margin: 0;
32 | }
--------------------------------------------------------------------------------
/frontend/src/scss/components/create.module.scss:
--------------------------------------------------------------------------------
1 | @import "general.scss";
2 |
3 | .container {
4 | input[type="text"] {
5 | border-radius: 5px;
6 | border: #707070 solid 1px;
7 | background-color: #ececec;
8 |
9 | width: 52px;
10 | height: 30px;
11 |
12 | font-size: 18px;
13 | }
14 | input[type="text"]:hover {
15 | border: #0085d4 solid 1px;
16 | }
17 | input[type="text"]:focus {
18 | outline: 0;
19 | border: #026199 solid 1px;
20 | }
21 | input[type="text"]::placeholder {
22 | font-size: 15px;
23 | opacity: 0.8;
24 | }
25 |
26 | .header {
27 | height: 70px;
28 | width: 100%;
29 |
30 | display: flex;
31 | flex-direction: row;
32 |
33 | align-items: center;
34 | justify-content: center;
35 |
36 | input {
37 | width: 35%;
38 | height: 45%;
39 |
40 | border-radius: 50px;
41 | border: none;
42 |
43 | padding: 5px 30px;
44 |
45 | font-size: 28px;
46 | text-align: left;
47 |
48 | color: #707070;
49 | &:focus {
50 | outline: none;
51 | }
52 | &::placeholder {
53 | font-size: 20px;
54 | }
55 | }
56 | }
57 |
58 | .main {
59 | width: 100%;
60 | height: calc(100% - 70px);
61 |
62 | display: flex;
63 | flex-direction: column;
64 |
65 | align-items: center;
66 | justify-content: center;
67 |
68 | background-color: white;
69 |
70 | * {
71 | color: #707070;
72 |
73 | font-weight: 600;
74 | font-size: 20px;
75 | }
76 | }
77 |
78 | .setup_container {
79 | height: fit-content;
80 | width: fit-content;
81 |
82 | display: flex;
83 | flex-direction: column;
84 |
85 | align-items: center;
86 | justify-content: center;
87 | }
88 |
89 | .row {
90 | position: relative;
91 |
92 | display: flex;
93 | flex-direction: row;
94 |
95 | align-items: center;
96 |
97 | margin-bottom: 50px;
98 | }
99 |
100 | .imputnumber_container {
101 | position: relative;
102 |
103 | display: flex;
104 | align-items: center;
105 |
106 | margin: 0 50px;
107 |
108 | > p {
109 | margin-right: 20px;
110 | }
111 |
112 | .absolute {
113 | position: absolute;
114 | top: -20px;
115 | width: 100%;
116 |
117 | p {
118 | margin: auto;
119 | font-size: 16px;
120 | }
121 | }
122 | }
123 |
124 | .layers_container {
125 | .hiddenlayers_container {
126 | display: flex;
127 | flex-direction: row;
128 | position: relative;
129 |
130 | input[type="text"] {
131 | position: relative;
132 | z-index: 2;
133 | }
134 |
135 | .hiddenlayer_element {
136 | position: relative;
137 | margin: 0 10px;
138 |
139 | .hiddenLayer_buttons {
140 | position: absolute;
141 | top: calc(-100% - 5px);
142 |
143 | height: calc(100% + 75px);
144 | width: 100%;
145 |
146 | display: flex;
147 | flex-direction: column;
148 |
149 | align-items: center;
150 | justify-content: space-between;
151 |
152 | .plus {
153 | width: 30px;
154 | height: 30px;
155 | background-color: #dbdbdb;
156 | border-radius: 100%;
157 | position: relative;
158 |
159 | cursor: pointer;
160 |
161 | &::before {
162 | content: "+";
163 | font-size: 30px;
164 | display: block;
165 | position: absolute;
166 | left: 6px;
167 | bottom: 0px;
168 | }
169 | }
170 | .minus {
171 | width: 30px;
172 | height: 30px;
173 | background-color: #dbdbdb;
174 | border-radius: 100%;
175 | position: relative;
176 |
177 | cursor: pointer;
178 |
179 | &::before {
180 | content: "-";
181 | font-size: 30px;
182 | display: block;
183 | position: absolute;
184 | left: 6px;
185 | bottom: 0px;
186 | }
187 | }
188 | }
189 | }
190 | }
191 | }
192 |
193 | .inputfile_container {
194 | margin: 50px 0;
195 |
196 | .inputfile {
197 | margin: 20px 0 0 0;
198 |
199 | display: flex;
200 | align-items: center;
201 | flex-direction: row-reverse;
202 |
203 | cursor: pointer;
204 |
205 | .upload_img {
206 | border-radius: 100%;
207 |
208 | background-color: #0085d4;
209 | width: 60px;
210 | height: 60px;
211 |
212 | display: flex;
213 | align-items: center;
214 | justify-content: center;
215 |
216 | margin-left: 30px;
217 | }
218 | }
219 | }
220 | }
221 |
222 | .bluebutton_palette {
223 | margin-top: 50px;
224 | }
225 |
--------------------------------------------------------------------------------
/frontend/src/scss/components/general.scss:
--------------------------------------------------------------------------------
1 | .button {
2 | border-radius: 50px;
3 |
4 | display: flex;
5 | flex-direction: column;
6 | background: white;
7 |
8 | align-items: center;
9 | justify-content: center;
10 |
11 | user-select: none;
12 |
13 | cursor: pointer;
14 |
15 | transition: 0.25s ease;
16 |
17 | * {
18 | margin: 0;
19 |
20 | color: blue;
21 | font-weight: 900;
22 |
23 | text-align: center;
24 | }
25 | }
26 | .button:hover {
27 | background: rgb(216, 216, 216);
28 | transform: scale(1.02);
29 | }
30 | .button:active{
31 | transform: scale(0.98);
32 | }
33 |
34 | .fullpage_container {
35 | width: 100vw;
36 | max-width: 100%;
37 | height: 100vh;
38 | max-height: 100%;
39 |
40 | margin: 0;
41 | padding: 0;
42 | }
43 |
44 | .bluebutton_palette {
45 | width: 70%;
46 | height: 50px;
47 | background-color: #0085d4;
48 |
49 | color: white;
50 |
51 | * {
52 | color: white;
53 | }
54 | }
55 | .bluebutton_palette:hover {
56 | background: #006caa;
57 | }
--------------------------------------------------------------------------------
/frontend/src/scss/components/landing.module.scss:
--------------------------------------------------------------------------------
1 | @import "general.scss";
2 |
3 | .button_create {
4 | height: 100px;
5 | width: calc(40% + 20px);
6 |
7 | .create {
8 | margin-top: 5px;
9 | height: 50%;
10 |
11 | font-size: 46px;
12 | }
13 |
14 | .neuralnetwork {
15 | margin-top: 5px;
16 |
17 | letter-spacing: 3px;
18 | }
19 | }
20 |
21 | .container_text {
22 | font-size: 28px;
23 |
24 | width: 80%;
25 | margin: 0 auto 100px auto;
26 |
27 | text-align: left;
28 | }
29 |
30 | .flex_container {
31 | width: 100%;
32 | height: 100%;
33 |
34 | display: flex;
35 | flex-direction: column;
36 |
37 | align-items: center;
38 | justify-content: center;
39 | }
40 |
--------------------------------------------------------------------------------
/frontend/src/scss/components/neuralnetwork.module.scss:
--------------------------------------------------------------------------------
1 | @import "general.scss";
2 |
3 | .fullpage_container {
4 | display: flex;
5 | flex-direction: column;
6 | }
7 |
8 | .grid {
9 | display: grid;
10 | grid-template-columns: 1fr 600px;
11 |
12 | width: 100%;
13 |
14 | align-items: center;
15 | justify-items: center;
16 |
17 | * {
18 | text-align: start;
19 | }
20 | }
21 |
22 | .column {
23 | display: flex;
24 | flex-direction: column;
25 |
26 | margin-left: 5%;
27 |
28 | p {
29 | * {
30 | font-size: 20px;
31 | line-height: 40px;
32 | }
33 | }
34 | }
35 |
36 | .name_container {
37 | height: 7.5%;
38 |
39 | display: flex;
40 | align-items: center;
41 | justify-content: center;
42 | > p {
43 | font-size: 26px;
44 | font-weight: 600;
45 | }
46 | }
47 |
48 | .center_container {
49 | display: flex;
50 | flex-direction: row;
51 | align-items: center;
52 |
53 | background-color: white;
54 | color: #707070;
55 |
56 | height: 85%;
57 | width: 100%;
58 | }
59 |
60 | .button_container{
61 | display: flex;
62 | flex-direction: row;
63 |
64 | justify-content: space-between;
65 | width: 100%;
66 | }
67 |
68 | .svgbuttons{
69 | display: flex;
70 | flex-direction: row;
71 | }
72 | .svg_container {
73 | border-radius: 100%;
74 |
75 | background-color: #0085d4;
76 | width: 60px;
77 | height: 60px;
78 |
79 | margin-right: 10px;
80 |
81 | display: flex;
82 | align-items: center;
83 | justify-content: center;
84 |
85 | * {
86 | height: 30px;
87 | width: 30px;
88 | }
89 | }
90 |
91 | .disabled {
92 | opacity: 0.5;
93 | }
94 | .enabled {
95 | cursor: pointer;
96 | }
97 |
98 | .bluebutton_palette {
99 | display: flex;
100 | flex-direction: row;
101 |
102 | height: 60px;
103 | width: 170px;
104 | padding: 0 20px;
105 |
106 | justify-content: space-between;
107 |
108 | * {
109 | font-size: 20px;
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
136 |
138 | My Neural Network
137 |
139 |
186 | )
187 | }
--------------------------------------------------------------------------------
/frontend/src/components/NeuralNetworkFunctions.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | // #region API URLs
4 | const urlStartNN = "http://localhost:7071/api/StartNN"
5 | const urlStopNN = "http://localhost:7071/api/StopNN"
6 | const urlContinueNN = "http://localhost:7071/api/ContinueNN"
7 | const urlGetNNState = "http://localhost:7071/api/GetNNState"
8 | const urlTestNN = "http://localhost:7071/api/TestNN"
9 | const urlDeleteNN = "http://localhost:7071/api/DeleteNN"
10 | // #endregion
11 |
12 |
13 | export async function startNN(NNStructObj) {
14 | const { moment, learningRate, struct, terminatingError } = NNStructObj
15 |
16 | let NNStruct = {
17 | MomentTemp: moment === "" ? 0 : moment,
18 | LearningRateTemp: learningRate === "" ? 0 : learningRate,
19 | NeuronsAndLayers: struct === "" ? "" : struct,
20 | TerminatingErrorProcents: terminatingError === "" ? 0 : terminatingError
21 | }
22 |
23 | console.log(NNStruct)
24 |
25 | const requestOptions = {
26 | method: 'POST',
27 | headers: { 'Content-Type': 'application/json' },
28 | body: JSON.stringify(NNStruct)
29 | }
30 |
31 |
32 | try {
33 | const response = await fetch(urlStartNN, requestOptions)
34 | if (!response.ok) throw new Error('Problem in response with message: ' + response)
35 |
36 | const data = await response.json();
37 | return data
38 | }
39 | catch (err) {
40 | throw new Error('Exited with error: ' + err)
41 | }
42 | }
43 |
44 | export async function stopNN(NNId) {
45 | const requestOptions = {
46 | method: 'POST',
47 | headers: { 'Content-Type': 'application/json' },
48 | body: JSON.stringify(NNId)
49 | }
50 |
51 |
52 | try {
53 | const response = await fetch(urlStopNN, requestOptions)
54 | if (!response.ok) throw new Error('Problem in response with message: ' + response)
55 |
56 | const data = response.json()
57 | return data
58 | }
59 | catch (err) {
60 | throw new Error('Exited with error: ' + err)
61 | }
62 | }
63 |
64 | export async function continueNN(NNId) {
65 | const requestOptions = {
66 | method: 'POST',
67 | headers: {
68 | 'Content-Type': 'application/json',
69 | 'Accept': 'application/json'
70 | },
71 | body: JSON.stringify(NNId)
72 | }
73 |
74 |
75 | try {
76 | const response = await fetch(urlContinueNN, requestOptions)
77 | if (!response.ok) throw new Error('Problem in response with message: ' + response)
78 |
79 | const data = await response.json();
80 | return data
81 | }
82 | catch (err) {
83 | throw new Error('Exited with error: ' + err)
84 | }
85 | }
86 |
87 | export async function deleteNN(NNId) {
88 | const requestOptions = {
89 | method: 'POST',
90 | headers: {
91 | 'Content-Type': 'application/json',
92 | 'Accept': 'application/json'
93 | },
94 | body: JSON.stringify(NNId)
95 | }
96 |
97 |
98 | try {
99 | const response = await fetch(urlDeleteNN, requestOptions)
100 | if (!response.ok) throw new Error('Problem in response with message: ' + response)
101 |
102 | const data = await response.json();
103 | return data
104 | }
105 | catch (err) {
106 | throw new Error('Exited with error: ' + err)
107 | }
108 | }
109 |
110 | export async function getNNState(NNId) {
111 | const requestOptions = {
112 | method: 'POST',
113 | headers: {
114 | 'Content-Type': 'application/json',
115 | 'Accept': 'application/json'
116 | },
117 | body: JSON.stringify(NNId)
118 | }
119 |
120 |
121 | try {
122 | const response = await fetch(urlGetNNState, requestOptions)
123 | if (!response.ok) throw new Error('Problem in response with message: ' + response)
124 |
125 | const data = await response.json();
126 | return data
127 | }
128 | catch (err) {
129 | throw new Error('Exited with error: ' + err)
130 | }
131 | }
--------------------------------------------------------------------------------
/frontend/src/components/start.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/frontend/src/components/stop.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/frontend/src/components/upload.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 |
140 |
185 |
141 |
154 |
155 | 142 | 143 |
144 |145 | 146 |
147 |148 | 149 |
150 |151 | 152 |
153 |
156 |
184 |
157 |
163 |
169 |
170 |
171 |
183 |
172 |
182 |
173 | 
174 |
175 | 
180 |
181 |
176 | 
177 |
178 |
179 | Download