camerin
/
portfolio
mirror of https://github.com/RaspberryProgramming/portfolio.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed Style and improved Performance

This commit is contained in:
Camerin 2022-01-08 13:07:57 -05:00
parent e7159f2bb2
commit f743d628d9
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Bai.js
View File

@ -7,7 +7,7 @@ import './css/Bai.css';
class Bai extends React.Component { 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"} classes = {0: "Blank", 1: "Not Blank"}
@ -16,23 +16,22 @@ class Bai extends React.Component {
document.title = "Blank AI"; document.title = "Blank AI";
} }
async fileUpload ({target}) { async fileUpload (target, predict) {
console.log(target);
const [file] = target.files; const [file] = target.files;
let image = document.getElementById("preview") let image = document.getElementById("preview")
if (file) { if (file) {
image.src = await URL.createObjectURL(file);
}
}
async imagePredict (model) { let imageBM = await createImageBitmap(file);
let image = document.getElementById("preview");
console.log(image.src); let prediction = await predict(imageBM);
if (image.src !== "") {
let prediction = await this.props.predict(image);
console.log(prediction[0]);
console.log(this.declassify(prediction[0])); console.log(this.declassify(prediction[0]));
image.src = await URL.createObjectURL(file);
image.classList.add('show');
} }
} }
@ -59,13 +58,14 @@ class Bai extends React.Component {
<div className="content"> <div className="content">
<h1>BAI Model Prediction</h1> <h1>BAI Model Prediction</h1>
<img id="preview" src="" alt="preview of predicted file" onLoad={()=>{this.imagePredict(this.props.model)}}/> <p className="prediction">{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}</p>
<input type='file' id="fileSubmit" onChange={this.fileUpload} /> <img id="preview" alt="preview of predicted file"/>
<input type='file' id="fileSubmit" onChange={({target}) => this.fileUpload(target, this.props.predict)} />
<button onClick={()=>{document.getElementById('fileSubmit').click();}}>Upload Image</button> <button onClick={()=>{document.getElementById('fileSubmit').click();}}>Upload Image</button>
<p className="prediction">{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}</p>
</div> </div>
); );

20
src/components/css/Bai.css
View File

@ -2,7 +2,7 @@
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
padding: 10%; padding: 10%;
} }
@ -22,9 +22,20 @@
} }
.Bai img { .Bai img {
width:0;
height:0;
overflow: hidden;
transition: height 1s;
}
.Bai img.show {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 50vw; height: 50vh;
width:max-content;
max-width: 50vw;
max-height: 50vh;
transition: height 2s;
} }
.Bai button { .Bai button {
@ -50,3 +61,8 @@
padding: 8px; padding: 8px;
font-size: 16px; font-size: 16px;
} }
.Bai .content {
display: flex;
flex-direction: column;
}