From 9a65fea5d64b5047b2167b353b02f933045f32f6 Mon Sep 17 00:00:00 2001 From: williamli-15 Date: Mon, 22 Jul 2024 06:38:08 -0400 Subject: [PATCH] revert --- src/App.js | 1 - src/components/LoadButton.js | 17 +--- src/pages/Classify.css | 4 + src/pages/Classify.js | 177 ++++++----------------------------- 4 files changed, 37 insertions(+), 162 deletions(-) diff --git a/src/App.js b/src/App.js index 2ca4467..eaade5c 100644 --- a/src/App.js +++ b/src/App.js @@ -61,7 +61,6 @@ class App extends Component { - ); } diff --git a/src/components/LoadButton.js b/src/components/LoadButton.js index 6e1a4dc..c364f22 100644 --- a/src/components/LoadButton.js +++ b/src/components/LoadButton.js @@ -4,25 +4,17 @@ import { Button, Spinner } from 'react-bootstrap'; /** * This produces a button that will have a loading animation while the isLoading property is true. */ -const LoadButton = ({ +export default ({ isLoading, text, loadingText, className = '', disabled = false, - onClick, ...props -}) => ( +}) => -); - -export default LoadButton; + ; \ No newline at end of file diff --git a/src/pages/Classify.css b/src/pages/Classify.css index 1c63e33..6e51abe 100644 --- a/src/pages/Classify.css +++ b/src/pages/Classify.css @@ -105,3 +105,7 @@ font-size: 36px; font-weight: 600; } + +.hidden { + display: none; +} diff --git a/src/pages/Classify.js b/src/pages/Classify.js index a9178d1..bc62212 100644 --- a/src/pages/Classify.js +++ b/src/pages/Classify.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment, createRef } from 'react'; +import React, { Component, Fragment } from 'react'; import { Alert, Button, Collapse, Container, Form, Spinner, ListGroup, Tabs, Tab } from 'react-bootstrap'; @@ -13,11 +13,10 @@ import './Classify.css'; import 'cropperjs/dist/cropper.css'; -const MODEL_PATH = `${process.env.PUBLIC_URL}/model/model.json`; +const MODEL_PATH = '/model/model.json'; const IMAGE_SIZE = 224; const CANVAS_SIZE = 224; -const TOPK_PREDICTIONS = 3; -const PROBABILITY_THRESHOLD = 11; // Example threshold, meaning 11% +const TOPK_PREDICTIONS = 5; const INDEXEDDB_DB = 'tensorflowjs'; const INDEXEDDB_STORE = 'model_info_store'; @@ -31,7 +30,6 @@ export default class Classify extends Component { constructor(props) { super(props); - this.fileInputRef = React.createRef(); // Create a ref this.webcam = null; this.model = null; @@ -40,7 +38,6 @@ export default class Classify extends Component { this.state = { modelLoaded: false, filename: '', - photoTaken: false, // Add this to manage the visibility isModelLoading: false, isClassifying: false, predictions: [], @@ -52,7 +49,7 @@ export default class Classify extends Component { }; } - async componentDidMount() { + async componentDidMount() { if (('indexedDB' in window)) { try { this.model = await tf.loadLayersModel('indexeddb://' + INDEXEDDB_KEY); @@ -129,7 +126,7 @@ export default class Classify extends Component { ); } catch (e) { - // this.refs.noWebcam.style.display = 'block'; + this.refs.noWebcam.style.display = 'block'; } } @@ -277,18 +274,14 @@ export default class Classify extends Component { } handlePanelClick = event => { - // this.setState({ photoSettingsOpen: !this.state.photoSettingsOpen }); - this.setState(prevState => ({ - photoSettingsOpen: prevState.photoTaken ? !prevState.photoSettingsOpen : false - })); + this.setState({ photoSettingsOpen: !this.state.photoSettingsOpen }); } handleFileChange = event => { if (event.target.files && event.target.files.length > 0) { this.setState({ file: URL.createObjectURL(event.target.files[0]), - filename: event.target.files[0].name, - photoTaken: true // Set this to true when a photo is taken + filename: event.target.files[0].name }); } } @@ -306,96 +299,8 @@ export default class Classify extends Component { } } - handleCameraClick = () => { - if (this.fileInputRef.current) { - this.fileInputRef.current.click(); // Programmatically click the file input - } - } - - handleListGroupItemClick = (categoryName) => { - // Get the canvas and convert to data URL - const canvas = this.refs.canvas; - const imageDataUrl = canvas.toDataURL('image/png'); - - // Pass the category name and the image data URL to Frame3 via routing - this.props.history.push({ - pathname: '/frame3', - state: { - selectedCategory: categoryName, - imageDataUrl: imageDataUrl // Pass this data URL - } - }); - } - - handleSearchClick = () => { - // Implement or call search functionality - console.log('Search button clicked'); - } - render() { return ( -
-
-

Request Services from the City of Boston

- - {!this.state.photoTaken && this.state.modelLoaded && ( -
-
-
- -
-

Use your camera to report an issue.

-
-
-
- -
-

Search our library of available services

-
-
- )} -
- - -
{ !this.state.modelLoaded && @@ -411,11 +316,11 @@ export default class Classify extends Component { - +
{ this.state.modelUpdateAvailable && this.state.showModelUpdateAlert && @@ -461,9 +366,9 @@ export default class Classify extends Component { } - {/* */} - {/* + +
No camera found.
@@ -486,20 +391,17 @@ export default class Classify extends Component { loadingText="Classifying..." />
-
*/} - {/* */} + + - {/*
*/} - {/* - {this.state.filename ? this.state.filename : ''} - */} - Retake + Select Image File
+ + {this.state.filename ? this.state.filename : 'Browse...'} +
{ this.state.file && @@ -510,9 +412,7 @@ export default class Classify extends Component { src={this.state.file} style={{height: 400, width: '100%'}} guides={true} - // aspectRatio={1 / 1} - aspectRatio={null} // Set this to `null` if you don't want a fixed aspect ratio - autoCropArea={1} // This ensures the crop box initializes to cover the entire image + aspectRatio={1 / 1} viewMode={2} />
@@ -529,45 +429,28 @@ export default class Classify extends Component {
} - {/* */} - {/* */} + +
{ this.state.predictions.length > 0 &&
- {/*

Predictions

*/} +

Predictions

-
-

Are you reporting one of the following?

-

- {this.state.predictions - .filter(category => category.probability >= PROBABILITY_THRESHOLD) - .map((category) => { - return ( - this.handleListGroupItemClick(category.className)} // Pass the category name - style={{ cursor: 'pointer' }} // Optionally add a pointer cursor to improve UX - > - {category.className} {category.probability}% - - ); - })} + {this.state.predictions.map((category) => { + return ( + + {category.className} {category.probability}% + ); + })} -
-
-

- Something else? Search our service library -

} } - - ); } -} +} \ No newline at end of file