Commit 7c11e8ad authored by Tomas Rokos's avatar Tomas Rokos

Improve styling, standardize data testing, improve the simple dnn

parent 355cf8f8
This diff is collapsed.
......@@ -5,7 +5,7 @@ from audio_classification.preprocess import preprocess_sample
class BaseClassifier(ABC):
MFCC_LEN = 1296
MFCC_LEN = 1290
def __init__(
self,
......
......@@ -4,6 +4,7 @@ import numpy as np
def split_mfcc(mfcc, frame_length):
hop_length = frame_length // 2
mfcc_len = mfcc.shape[1]
if mfcc_len < frame_length:
raise Exception('Audio file too short')
if mfcc_len == frame_length:
......
from keras import models, layers
import pandas as pd
import numpy as np
import os
from audio_classification.classifier.base_classifier import BaseClassifier
from audio_classification.util.transform import decode_genre
class DNNSimpleClassifier(BaseClassifier):
MODEL_PATH = os.path.join('models', 'simple_dnn', 'model.h5')
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.model = model = models.Sequential()
......@@ -21,22 +24,14 @@ class DNNSimpleClassifier(BaseClassifier):
metrics=['accuracy'])
def load(self):
self.model = models.load_model('audio_classification/dnn_simple_classifier/saved_model')
@staticmethod
def __transform_mfcc(mfcc):
return pd.DataFrame(mfcc.T.mean(axis=0)).T
self.model = models.load_model(self.MODEL_PATH)
def classify(self, mfcc):
mfcc = self.__transform_mfcc(mfcc)
mfcc = np.expand_dims(mfcc, axis=0)
mfcc = np.expand_dims(mfcc, axis=3)
res = self.model.predict_classes(mfcc)
return decode_genre(res[0])
def fit(self, X, y, validation_data):
history = self.model.fit(X, y, epochs=100, batch_size=16, validation_data=validation_data)
self.model.save('audio_classification/dnn_simple_classifier/saved_model')
return history
class DNNSimpleClassifierFactory:
@staticmethod
......
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
#uploader {
......@@ -21,4 +24,41 @@ body {
.uppy-Dashboard-poweredBy {
display: none !important;
}
.results {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
width: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.results thead tr {
background-color: #009879;
color: #ffffff;
}
.results th,
.results td {
text-align: left;
padding: 12px 15px;
}
.results tbody tr {
border-bottom: 1px solid #dddddd;
}
.results tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.results tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.results tbody tr.active-row {
font-weight: bold;
color: #009879;
}
\ No newline at end of file
......@@ -27,31 +27,13 @@ const uppy = new Uppy({
method: 'POST',
endpoint: 'http://localhost:4666/classify',
fieldName: 'file'
})
// const onFileClick = (evt: MouseEvent): void => {
// const file = evt.currentTarget as Element;
// const fileId = file.getAttribute('id');
// if (fileId) {
// console.log(fileId);
// }
// }
// const reloadEventListeners = (): void => {
// // @ts-ignore
// const files = Array.from(document.getElementsByClassName('uppy-Dashboard-Item'));
//
// files.forEach(file => {
// file.removeEventListener('click', onFileClick);
// file.addEventListener('click', onFileClick)
// })
// }
});
uppy.on('file-added', (file) => {
uppy.getFiles()
.filter(oldFile => file.id != oldFile.id)
.forEach((oldFile) => uppy.removeFile(oldFile.id))
})
});
uppy.on('upload-success', (file, response) => {
const resElement = document.getElementById('result');
......@@ -61,8 +43,8 @@ uppy.on('upload-success', (file, response) => {
const body = response.body as APIResponse;
uppy.setFileState(file.id, {preview: base64tosrc(body.soundwave)})
ReactDOM.render(<Result response={body} file={URL.createObjectURL(file.data)}/>, resElement);
})
});
uppy.on('complete', (result) => {
const id = uppy.getFiles()[0].id;
})
\ No newline at end of file
});
\ No newline at end of file
......@@ -31,12 +31,22 @@ const Result: React.FC<ResultProps> = ({response, file}) => {
<source src={file}/>
</audio>
<img src={base64tosrc(response.soundwave)} alt="Sound wave"/>
{response.classification.map(({name, genre}) => (
<div key={name}>
<h1>{name}</h1>
<p>{genre}</p>
</div>
))}
<table className="results">
<thead>
<tr>
<th>Model</th>
<th>Predikovaný žánr</th>
</tr>
</thead>
<tbody>
{response.classification.map(({name, genre}) => (
<tr key={name}>
<td>{name}</td>
<td>{genre}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
......
This diff is collapsed.
......@@ -224,8 +224,8 @@ var e,t;function r(e){if(void 0===e)throw new ReferenceError("this hasn't been i
},{"./cjs/react-dom.production.min.js":"i0Gi"}],"u7YK":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.base64tosrc=void 0;var e=function(e){return"data:image/jpg;base64,"+e};exports.base64tosrc=e;
},{}],"TwpU":[function(require,module,exports) {
"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),r=this&&this.__importStar||function(r){if(r&&r.__esModule)return r;var n={};if(null!=r)for(var u in r)"default"!==u&&Object.prototype.hasOwnProperty.call(r,u)&&e(n,r,u);return t(n,r),n};Object.defineProperty(exports,"__esModule",{value:!0});var n=r(require("react")),u=require("./utils"),a=function(e){var t=e.response,r=e.file,a=n.useRef();return n.useEffect(function(){a.current.pause(),a.current.load()},[r]),n.default.createElement("div",null,n.default.createElement("h1",null,t.filename),n.default.createElement("audio",{controls:!0,style:{width:"100%"},ref:a},n.default.createElement("source",{src:r})),n.default.createElement("img",{src:u.base64tosrc(t.soundwave),alt:"Sound wave"}),t.classification.map(function(e){var t=e.name,r=e.genre;return n.default.createElement("div",{key:t},n.default.createElement("h1",null,t),n.default.createElement("p",null,r))}))};exports.default=a;
"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,l,r){void 0===r&&(r=l),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[l]}})}:function(e,t,l,r){void 0===r&&(r=l),e[r]=t[l]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),l=this&&this.__importStar||function(l){if(l&&l.__esModule)return l;var r={};if(null!=l)for(var n in l)"default"!==n&&Object.prototype.hasOwnProperty.call(l,n)&&e(r,l,n);return t(r,l),r};Object.defineProperty(exports,"__esModule",{value:!0});var r=l(require("react")),n=require("./utils"),a=function(e){var t=e.response,l=e.file,a=r.useRef();return r.useEffect(function(){a.current.pause(),a.current.load()},[l]),r.default.createElement("div",null,r.default.createElement("h1",null,t.filename),r.default.createElement("audio",{controls:!0,style:{width:"100%"},ref:a},r.default.createElement("source",{src:l})),r.default.createElement("img",{src:n.base64tosrc(t.soundwave),alt:"Sound wave"}),r.default.createElement("table",{className:"results"},r.default.createElement("thead",null,r.default.createElement("tr",null,r.default.createElement("th",null,"Model"),r.default.createElement("th",null,"Predikovaný žánr"))),r.default.createElement("tbody",null,t.classification.map(function(e){var t=e.name,l=e.genre;return r.default.createElement("tr",{key:t},r.default.createElement("td",null,t),r.default.createElement("td",null,l))}))))};exports.default=a;
},{"react":"SAdv","./utils":"u7YK"}],"zo2T":[function(require,module,exports) {
"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),require("./index.css"),require("@uppy/core/dist/style.min.css"),require("@uppy/dashboard/dist/style.css");var t=require("@uppy/core"),r=e(require("@uppy/dashboard")),i=e(require("@uppy/xhr-upload")),u=e(require("react-dom")),s=e(require("react")),l=e(require("./ts/Result")),d=require("./ts/utils"),o=new t.Uppy({debug:!0,allowMultipleUploads:!0,autoProceed:!0,restrictions:{allowedFileTypes:[".wav"]}}).use(r.default,{inline:!0,target:"#uploader",height:"100%",width:"100%",theme:"light"}).use(i.default,{method:"POST",endpoint:"http://localhost:4666/classify",fieldName:"file"});o.on("file-added",function(e){o.getFiles().filter(function(t){return e.id!=t.id}).forEach(function(e){return o.removeFile(e.id)})}),o.on("upload-success",function(e,t){var r=document.getElementById("result");if(!r)throw"No res element!";var i=t.body;o.setFileState(e.id,{preview:d.base64tosrc(i.soundwave)}),u.default.render(s.default.createElement(l.default,{response:i,file:URL.createObjectURL(e.data)}),r)}),o.on("complete",function(e){o.getFiles()[0].id});
},{"./index.css":"vKFU","@uppy/core/dist/style.min.css":"vKFU","@uppy/dashboard/dist/style.css":"vKFU","@uppy/core":"Fa4j","@uppy/dashboard":"fMd0","@uppy/xhr-upload":"hnV8","react-dom":"CSY6","react":"SAdv","./ts/Result":"TwpU","./ts/utils":"u7YK"}]},{},["zo2T"], null)
//# sourceMappingURL=/frontend.6af4dc52.js.map
\ No newline at end of file
//# sourceMappingURL=/frontend.579ede47.js.map
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
<html lang="en"><head><title>Audio classification</title><link rel="stylesheet" href="/frontend.56c3c255.css"></head><body> <div class="container"> <h1>Audio Genre Classificator</h1> <div id="uploader" class="dropzone"></div> <div id="result"></div> </div> <script src="/frontend.6af4dc52.js"></script> </body></html>
\ No newline at end of file
<html lang="en"><head><title>Audio classification</title><link rel="stylesheet" href="/frontend.eb98ae28.css"></head><body> <div class="container"> <h1>Audio Genre Classificator</h1> <div id="uploader" class="dropzone"></div> <div id="result"></div> </div> <script src="/frontend.579ede47.js"></script> </body></html>
\ No newline at end of file
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
#uploader {
......@@ -22,6 +25,43 @@ body {
.uppy-Dashboard-poweredBy {
display: none !important;
}
.results {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
width: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.results thead tr {
background-color: #009879;
color: #ffffff;
}
.results th,
.results td {
text-align: left;
padding: 12px 15px;
}
.results tbody tr {
border-bottom: 1px solid #dddddd;
}
.results tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.results tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.results tbody tr.active-row {
font-weight: bold;
color: #009879;
}
.uppy-Root{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;position:relative;color:#333}.uppy-Root *,.uppy-Root :after,.uppy-Root :before{box-sizing:inherit}.uppy-Root [hidden]{display:none}.uppy-u-reset{-webkit-appearance:none;line-height:1;padding:0;color:inherit;-webkit-backface-visibility:visible;backface-visibility:visible;background:none;border:none;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;box-shadow:none;clear:none;cursor:auto;display:inline;empty-cells:show;float:none;font-family:inherit;font-size:inherit;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;z-index:auto}.uppy-c-textInput{border:1px solid #ddd;border-radius:4px;font-size:14px;line-height:1.5;padding:6px 8px;background-color:#fff}.uppy-size--md .uppy-c-textInput{padding:8px 10px}.uppy-c-textInput:focus{border-color:rgba(34,117,215,.6);outline:none;box-shadow:0 0 0 3px rgba(34,117,215,.15)}[data-uppy-theme=dark] .uppy-c-textInput{background-color:#333;border-color:#333;color:#eaeaea}[data-uppy-theme=dark] .uppy-c-textInput:focus{border-color:#525252;box-shadow:none}.uppy-c-icon{max-width:100%;max-height:100%;fill:currentColor;display:inline-block;overflow:hidden}.uppy-c-btn{display:inline-block;text-align:center;white-space:nowrap;vertical-align:middle;font-family:inherit;font-size:16px;line-height:1;font-weight:500;transition-property:background-color,color;transition-duration:.3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.uppy-c-btn:not(:disabled):not(.disabled){cursor:pointer}.uppy-c-btn::-moz-focus-inner{border:0}.uppy-c-btn-primary{font-size:14px;padding:10px 18px;border-radius:4px;background-color:#2275d7;color:#fff}.uppy-c-btn-primary:hover{background-color:#1b5dab}.uppy-c-btn-primary:focus{outline:none;box-shadow:0 0 0 3px rgba(34,117,215,.4)}.uppy-size--md .uppy-c-btn-primary{padding:13px 22px}[data-uppy-theme=dark] .uppy-c-btn-primary{color:#eaeaea}[data-uppy-theme=dark] .uppy-c-btn-primary:focus{outline:none}[data-uppy-theme=dark] .uppy-c-btn-primary::-moz-focus-inner{border:0}[data-uppy-theme=dark] .uppy-c-btn-primary:focus{box-shadow:0 0 0 2px rgba(170,225,255,.85)}.uppy-c-btn-link{font-size:14px;line-height:1;padding:10px 15px;border-radius:4px;background-color:transparent;color:#525252}.uppy-c-btn-link:hover{color:#333}.uppy-c-btn-link:focus{outline:none;box-shadow:0 0 0 3px rgba(34,117,215,.25)}.uppy-size--md .uppy-c-btn-link{padding:13px 18px}[data-uppy-theme=dark] .uppy-c-btn-link{color:#eaeaea}[data-uppy-theme=dark] .uppy-c-btn-link:focus{outline:none}[data-uppy-theme=dark] .uppy-c-btn-link::-moz-focus-inner{border:0}[data-uppy-theme=dark] .uppy-c-btn-link:focus{box-shadow:0 0 0 2px rgba(170,225,255,.85)}[data-uppy-theme=dark] .uppy-c-btn-link:hover{color:#939393}.uppy-c-btn--small{font-size:.9em;padding:7px 16px;border-radius:2px}.uppy-size--md .uppy-c-btn--small{padding:8px 10px;border-radius:2px}
.uppy-Informer {
position: absolute;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -44751,13 +44751,15 @@ var Result = function Result(_ref) {
})), react_1.default.createElement("img", {
src: utils_1.base64tosrc(response.soundwave),
alt: "Sound wave"
}), response.classification.map(function (_ref2) {
}), react_1.default.createElement("table", {
className: "results"
}, react_1.default.createElement("thead", null, react_1.default.createElement("tr", null, react_1.default.createElement("th", null, "Model"), react_1.default.createElement("th", null, "Predikovan\xFD \u017E\xE1nr"))), react_1.default.createElement("tbody", null, response.classification.map(function (_ref2) {
var name = _ref2.name,
genre = _ref2.genre;
return react_1.default.createElement("div", {
return react_1.default.createElement("tr", {
key: name
}, react_1.default.createElement("h1", null, name), react_1.default.createElement("p", null, genre));
}));
}, react_1.default.createElement("td", null, name), react_1.default.createElement("td", null, genre));
}))));
};
exports.default = Result;
......@@ -44811,23 +44813,7 @@ var uppy = new core_1.Uppy({
method: 'POST',
endpoint: 'http://localhost:4666/classify',
fieldName: 'file'
}); // const onFileClick = (evt: MouseEvent): void => {
// const file = evt.currentTarget as Element;
// const fileId = file.getAttribute('id');
// if (fileId) {
// console.log(fileId);
// }
// }
// const reloadEventListeners = (): void => {
// // @ts-ignore
// const files = Array.from(document.getElementsByClassName('uppy-Dashboard-Item'));
//
// files.forEach(file => {
// file.removeEventListener('click', onFileClick);
// file.addEventListener('click', onFileClick)
// })
// }
});
uppy.on('file-added', function (file) {
uppy.getFiles().filter(function (oldFile) {
return file.id != oldFile.id;
......@@ -44882,7 +44868,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54267" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "63411" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment