diff --git a/src/components/Bai.js b/src/components/Bai.js index de52368..b8b44da 100644 --- a/src/components/Bai.js +++ b/src/components/Bai.js @@ -7,7 +7,7 @@ import './css/Bai.css'; class Bai extends React.Component { /** - * + * Blank AI - Artificial Intelligence designed to distinguish photos of blank vs. non-blank paper scans */ classes = {0: "Blank", 1: "Not Blank"} @@ -16,23 +16,22 @@ class Bai extends React.Component { document.title = "Blank AI"; } - async fileUpload ({target}) { - console.log(target); + async fileUpload (target, predict) { + const [file] = target.files; + let image = document.getElementById("preview") if (file) { - image.src = await URL.createObjectURL(file); - } - } - async imagePredict (model) { - let image = document.getElementById("preview"); - console.log(image.src); - if (image.src !== "") { - let prediction = await this.props.predict(image); - console.log(prediction[0]); + let imageBM = await createImageBitmap(file); + + let prediction = await predict(imageBM); + console.log(this.declassify(prediction[0])); + + image.src = await URL.createObjectURL(file); + image.classList.add('show'); } } @@ -58,14 +57,15 @@ class Bai extends React.Component { :(

BAI Model Prediction

- - preview of predicted file{this.imagePredict(this.props.model)}}/> - +

{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}

+ + preview of predicted file + + this.fileUpload(target, this.props.predict)} /> -

{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}

); diff --git a/src/components/css/Bai.css b/src/components/css/Bai.css index 364b4de..0f07eb5 100644 --- a/src/components/css/Bai.css +++ b/src/components/css/Bai.css @@ -2,7 +2,7 @@ color: white; display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; padding: 10%; } @@ -22,9 +22,20 @@ } .Bai img { + width:0; + height:0; + overflow: hidden; + transition: height 1s; +} + +.Bai img.show { margin-left: auto; margin-right: auto; - width: 50vw; + height: 50vh; + width:max-content; + max-width: 50vw; + max-height: 50vh; + transition: height 2s; } .Bai button { @@ -49,4 +60,9 @@ border-radius: 10px; padding: 8px; font-size: 16px; +} + +.Bai .content { + display: flex; + flex-direction: column; } \ No newline at end of file