pvaneck
commented
3 years ago In the getTopKClasses function, can you do add a console.log(values.length);? The error you see typically indicates that the class that corresponds to the index is undefined. This generally happens when there is a mismatch between the lengths of the output softmax array and the number of possible classes. So, the value you should see for console.log(values.length); should be 38 assuming the app is loading the correct model and the model was trained properly so that the output shape is 38.
KudzayiKing
HI! I made a plant leaf diseases classification using transfer learning MobileNet, i saved my model as h5 the converted it into .js, in the app i changed classes.js to fit the SoftMax of my model which was 38 classes, When I run the app it does not show the classes , it jus shows the probabilities , but interestingly when i put classes.js with ImageNet classes , classes appear in app .where a I going wrong ? I have attaches files below . @pvaneck @xgqfrms @autumnblue @joshpitzalis @jdhiro @keithort @Diaver
const INDEXEDDB_DB = 'tensorflowjs'; const INDEXEDDB_STORE = 'model_info_store'; const INDEXEDDB_KEY = 'web-model';
/**
@extends React.Component */ export default class Classify extends Component {
constructor(props) { super(props);
this.webcam = null; this.model = null; this.modelLastUpdated = null;
this.state = { modelLoaded: false, filename: '', isModelLoading: false, isClassifying: false, predictions: [], photoSettingsOpen: true, modelUpdateAvailable: false, showModelUpdateAlert: false, showModelUpdateSuccess: false, isDownloadingModel: false }; }
async componentDidMount() { if (('indexedDB' in window)) { try { this.model = await tf.loadLayersModel('indexeddb://' + INDEXEDDB_KEY);
} // If error here, assume that the object store doesn't exist and the model currently isn't // saved in IndexedDB. catch (error) { console.log('Not found in IndexedDB. Loading and saving...'); console.log(error); this.model = await tf.loadLayersModel(MODEL_PATH); await this.model.save('indexeddb://' + INDEXEDDB_KEY); } } // If no IndexedDB, then just download like normal. else { console.warn('IndexedDB not supported.'); this.model = await tf.loadLayersModel(MODEL_PATH); }
this.setState({ modelLoaded: true }); this.initWebcam();
// Warm up model. let prediction = tf.tidy(() => this.model.predict(tf.zeros([1, IMAGE_SIZE, IMAGE_SIZE, 3]))); prediction.dispose(); }
async componentWillUnmount() { if (this.webcam) { this.webcam.stop(); }
// Attempt to dispose of the model. try { this.model.dispose(); } catch (e) { // Assume model is not loaded or already disposed. } }
initWebcam = async () => { try { this.webcam = await tf.data.webcam( this.refs.webcam, {resizeWidth: CANVAS_SIZE, resizeHeight: CANVAS_SIZE, facingMode: 'environment'} ); } catch (e) { this.refs.noWebcam.style.display = 'block'; } }
startWebcam = async () => { if (this.webcam) { this.webcam.start(); } }
stopWebcam = async () => { if (this.webcam) { this.webcam.stop(); } }
getModelInfo = async () => { await fetch(
${config.API_ENDPOINT}/model_info, { method: 'GET', }) .then(async (response) => { await response.json().then((data) => { this.modelLastUpdated = data.last_updated; }) .catch((err) => { console.log('Unable to get parse model info.'); }); }) .catch((err) => { console.log('Unable to get model info'); }); }updateModel = async () => { // Get the latest model from the server and refresh the one saved in IndexedDB. console.log('Updating the model: ' + INDEXEDDB_KEY); this.setState({ isDownloadingModel: true }); this.model = await tf.loadLayersModel(MODEL_PATH); await this.model.save('indexeddb://' + INDEXEDDB_KEY); this.setState({ isDownloadingModel: false, modelUpdateAvailable: false, showModelUpdateAlert: false, showModelUpdateSuccess: true }); }
classifyLocalImage = async () => { this.setState({ isClassifying: true });
const croppedCanvas = this.refs.cropper.getCroppedCanvas(); const image = tf.tidy( () => tf.browser.fromPixels(croppedCanvas).toFloat());
// Process and resize image before passing in to model. const imageData = await this.processImage(image); const resizedImage = tf.image.resizeBilinear(imageData, [IMAGE_SIZE, IMAGE_SIZE]);
const logits = this.model.predict(resizedImage); const probabilities = await logits.data(); const preds = await this.getTopKClasses(probabilities, TOPK_PREDICTIONS);
this.setState({ predictions: preds, isClassifying: false, photoSettingsOpen: !this.state.photoSettingsOpen });
// Draw thumbnail to UI. const context = this.refs.canvas.getContext('2d'); const ratioX = CANVAS_SIZE / croppedCanvas.width; const ratioY = CANVAS_SIZE / croppedCanvas.height; const ratio = Math.min(ratioX, ratioY); context.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); context.drawImage(croppedCanvas, 0, 0, croppedCanvas.width ratio, croppedCanvas.height ratio);
// Dispose of tensors we are finished with. image.dispose(); imageData.dispose(); resizedImage.dispose(); logits.dispose(); }
classifyWebcamImage = async () => { this.setState({ isClassifying: true });
const imageCapture = await this.webcam.capture();
const resized = tf.image.resizeBilinear(imageCapture, [IMAGE_SIZE, IMAGE_SIZE]); const imageData = await this.processImage(resized); const logits = this.model.predict(imageData); const probabilities = await logits.data(); const preds = await this.getTopKClasses(probabilities, TOPK_PREDICTIONS);
this.setState({ predictions: preds, isClassifying: false, photoSettingsOpen: !this.state.photoSettingsOpen });
// Draw thumbnail to UI. const tensorData = tf.tidy(() => imageCapture.toFloat().div(255)); await tf.browser.toPixels(tensorData, this.refs.canvas);
// Dispose of tensors we are finished with. resized.dispose(); imageCapture.dispose(); imageData.dispose(); logits.dispose(); tensorData.dispose(); }
processImage = async (image) => { return tf.tidy(() => image.expandDims(0).toFloat().div(127).sub(1)); }
/**
const topClassesAndProbs = []; for (let i = 0; i < topkIndices.length; i++) { topClassesAndProbs.push({ className: MODEL_CLASSES[topkIndices[i]], probability: (topkValues[i] * 100).toFixed(2) }); } return topClassesAndProbs; }
handlePanelClick = event => { 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 }); } }
handleTabSelect = activeKey => { switch(activeKey) { case 'camera': this.startWebcam(); break; case 'localfile': this.setState({filename: null, file: null}); this.stopWebcam(); break; default: } }
render() { return (
Please use a device with a camera, or upload an image instead.
Predictions
); } }`
classes.js `/ eslint-disable / // Theses classes should correspond to the softmax output of your model.
export const MODEL_CLASSES = { 0: 'Apple_Apple_scab', 1: 'Apple_Blackrot', 2: 'AppleCedar_applerust', 3: 'Applehealthy', 4: 'Blueberryhealthy', 5: 'Cherry(includingsour)Powderymildew', 6: 'Cherry(including_sour)healthy', 7: 'Corn(maize)_Cercospora_leaf_spot Gray_leafspot', 8: 'Corn(maize)_Commonrust', 9: 'Corn(maize)_Northern_LeafBlight', 10: 'Corn(maize)healthy', 11: 'GrapeBlack_rot', 12: 'GrapeEsca(BlackMeasles)', 13: 'GrapeLeafblight(Isariopsis_Leaf_Spot)', 14: 'Grapehealthy', 15: 'OrangeHaunglongbing_(Citrus_greening)', 16: 'Peach_Bacterial_spot', 17: 'Peach_healthy', 18: 'Pepper,bellBacterial_spot', 19: 'Pepper,bellhealthy', 20: 'Potato_Early_blight', 21: 'Potato_Lateblight', 22: 'Potatohealthy', 23: 'Raspberry_healthy', 24: 'Soybeanhealthy', 25: 'SquashPowdery_mildew', 26: 'Strawberry_Leaf_scorch', 27: 'Strawberry__healthy', 28: 'TomatoBacterial_spot', 29: 'Tomato_Early_blight', 30: 'Tomato_Lateblight', 31: 'TomatoLeaf_Mold', 32: 'Tomato___Septoria_leafspot', 33: 'TomatoSpider_mites Two-spotted_spider_mite', 34: 'Tomato_Target_Spot', 35: 'Tomato___Tomato_Yellow_Leaf_CurlVirus', 36: 'TomatoTomato_mosaic_virus', 37: 'Tomato___healthy' }; `