Блог

Здравствуйте, я пытаюсь развернуть веб-приложение в Netlify. Он использует модель COCO SSD для распознавания объектов во внешнем интерфейсе, что является целенаправленным. Веб-приложение отлично работает на localhost, но после развертывания в Netlify я получаю эту ошибку:

 detector.js:47 TypeError: Cannot call a class as a function
    at r (classCallCheck.js:3)
    at new t (tensor.ts:266)
    at t.value (engine.ts:736)
    at i (tensor_ops_util.ts:75)
    at i (tensor.ts:55)
    at Module.p (io_utils.ts:223)
    at t.value (graph_model.ts:139)
    at t.<anonymous> (graph_model.ts:119)
    at c (runtime.js:63)
    at Generator._invoke (runtime.js:293)
  

У меня никогда раньше не было этой проблемы, и я нахожу это очень странным, это мой код для реализации модели COCO SSD и класса.

 import React from 'react';
import Lottie from 'react-lottie';
import * as cocoSsd from '@tensorflow-models/coco-ssd';
import '@tensorflow/tfjs';

class Detector extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
      list: ['person','laptop','scissors','mouse', 'spoon', 'keyboard',],
      isStopped: true,
    }
  } 
  videoRef = React.createRef();

  componentDidMount() {
    if (navigator.mediaDevices amp;amp; navigator.mediaDevices.getUserMedia) {
      //getting camera permission code removed for readability
      const modelPromise = cocoSsd.load();
      Promise.all([modelPromise, webCamPromise])
        .then(values => {
          this.detectFrame(this.videoRef.current, values[0]);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }

  detectFrame = (video, model) => {
    model.detect(video).then(predictions => {
      this.checkPredictions(predictions);
      requestAnimationFrame(() => {
        this.detectFrame(video, model);
      });
    });
  };

  checkPredictions = predictions => {
    predictions.forEach(prediction => {
      if(prediction.class === this.state.list[0]) {
        const tempL = this.state.list;
        const tempC = this.state.count   1;
        tempL.shift();
        this.setState({list: tempL, count: tempC, isStopped: false});
      }
    });
  };

  render() {
    return (
      <div>
        //removed for readability
      </div>
    );
  }
}

export default Detector;
  

Похоже, что webpack выбрано поле (встроенный файл) @tensorflow/tfjs в случае производственного режима, что приводит к возникновению проблемы.

Но мы можем указать это поле вручную, которое описывается здесьhttps://webpack.js.org/configuration/resolve/#resolvemainfields

Чтобы сделать это, вы просто переключаетесь на use, react-app-rewired где мы можем настроить webpack конфигурацию. Вот шаги:

• Установить

 npm i -D react-app-rewired
  

• Создайте файл конфигурации переопределения в корневом репозитории config-overrides.js со следующим содержимым:

 module.exports = function override(config, env) {
  if (process.env.NODE_ENV === 'production')
  {
    config.resolve.mainFields = ['main'];
  }
  return config;
}
  

• Переключитесь на использование react-app-rewired скрипта, заменив react-scripts команды:

 "scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  // ...  
},
  

Наконец, вы можете запустить npm build и предоставить свой встроенный контент для его тестирования. Вот и все!