So verwenden Sie React zur Implementierung einer Bilderkennungs-App

 const tf = erfordern('@tensorflow/tfjs-node')
const getData = erfordern('./data')

const TRAIN_DIR = '../Garbage-Klassifizierung/Zug'
const OUTPUT_DIR = '../outputDir'
const MOBILENET_URL = 'http://ai-sample.oss-cn-hangzhou.aliyuncs.com/pipcook/models/mobilenet/web_model/model.json'

const main = async () => {
  // Daten laden const { ds, classes} = await getData(TRAIN_DIR, OUTPUT_DIR)
  //Definieren Sie das Modell const mobilenet = await tf.loadLayersModel(MOBILENET_URL)
  mobilenet.summary()
  // Konsole.log(mobilenet.layers.map((l, i) => [l.name, i]))
  const Modell = tf.sequential()
  für (sei i = 0; i <= 86; i += 1) {
    const layer = mobilenet.layers[i]
    Schicht.trainierbar = falsch
    model.add(Ebene)
  }
  Modell.Hinzufügen(tf.layers.flatten())
  Modell.Hinzufügen(tf.layers.dense({
    Einheiten: 10,
    Aktivierung: 'relu'
  }))
  Modell.Hinzufügen(tf.layers.dense({
    Einheiten: Klassen.Länge,
    Aktivierung: 'softmax'
  }))
  // Trainingsmodell model.compile({
    Verlust: 'sparseCategoricalCrossentropy',
    Optimierer: tf.train.adam(),
    Metriken: ['acc']
  })
  warte auf model.fitDataset(ds, { epochs: 20 })
  warte auf Modell.Speichern(`file://${process.cwd()}/${OUTPUT_DIR}`)
}
hauptsächlich()

 const fs = erfordern('fs')
const tf = erfordern('@tensorflow/tfjs-node')

const img2x = (imgPath) => {
  const Puffer = fs.readFileSync(imgPath)
  returniere tf.tidy(() => {
    const imgTs = tf.node.decodeImage(neuer Uint8Array(Puffer))
    const imgTsResized = tf.image.resizeBilinear(imgTs, [224, 224])
    return imgTsResized.toFloat().sub(255/2).div(255/2).reshape([1, 224, 224, 3])
  })
}

const getData = async (trainDir, outputDir) => {
  const-Klassen = fs.readdirSync(trainDir)
  fs.writeFileSync(`${outputDir}/classes.json`, JSON.stringify(classes))

  const Daten = []
  classes.forEach((dir, dirIndex) => {
    fs.readdirSync(`${trainDir}/${dir}`)
      .filter(n => n.match(/jpg$/))
      .Scheibe(0, 10)
      .forEach(Dateiname => {
        console.log('lesen', Verzeichnis, Dateiname)
        const imgPath = `${trainDir}/${dir}/${filename}`
        data.push({ imgPath, dirIndex })
      })
  })

  tf.util.shuffle(Daten)

  const ds = tf.data.generator(Funktion* () {
    const count = Daten.Länge
    Konstante Batchgröße = 32
    für (lass start = 0; start < Anzahl; start += Batchgröße) {
      const end = Math.min(start + batchSize, anzahl)
      Ergebnis tf.tidy(() => {
        const-Eingaben = []
        Konstante Beschriftungen = []
        für (sei j = Start; j < Ende; j += 1) {
          const { imgPath, dirIndex } = data[j]
          const x = img2x(imgPath)
          inputs.push(x)
          labels.push(dirIndex)
        }
        const xs = tf.concat(Eingaben)
        const ys = tf.tensor(labels)
        Rückgabewert { xs, ys }
      })
    }
  })

  zurückkehren {
    ds,
    Klassen
  }
}

module.exports = getData

 importiere React, { PureComponent } von 'react'
importiere { Button, Fortschritt, Drehen, Leer } von 'antd'
importiere 'antd/dist/antd.css'
importiere * als tf von '@tensorflow/tfjs'
importiere { file2img, img2x } aus './utils'
importiere Intro aus „./intro“

const DATA_URL = "http://127.0.0.1:8080/"
Klasse App erweitert PureComponent {
  Zustand = {}
  asynchrone KomponenteDidMount() {
    dieses.Modell = warte auf tf.loadLayersModel(DATA_URL + '/model.json')
    // dieses.Modell.Zusammenfassung()
    dies.KLASSEN = warte auf Abruf (DATA_URL + '/classes.json').dann (res => res.json())
  }
  vorhersagen = async (Datei) => {
    const img = warte auf file2img(Datei).

    dies.setState({
      imgSrc: img.src,
      wird geladen: true
    })
    setzeTimeout(() => {
      const pred = tf.tidy(() => {
        const x = img2x(img)
        gib dieses.Modell.vorhersagen(x) zurück
      })

      const Ergebnisse = pred.arraySync()[0]
        .map((Punktzahl, i) => ({Punktzahl, Bezeichnung: diese.KLASSEN[i]}))
        .sort((a, b) => b.Punktzahl - a.Punktzahl)
      dies.setState({
        Ergebnisse,
        wird geladen: false
      })
    }, 0)
  }

  renderResult = (Element) => {
    const finalScore = Math.round(item.score * 100)
    zurückkehren (
      <tr Schlüssel={item.label}>
        <td style={{ width: 80, padding: '5px 0' }}>{item.label}</td>
        <td>
          <Fortschritt in Prozent={finalScore} Status={finalScore === 100 ? 'Erfolg' : 'normal'} />
        </td>
      </tr>
    )
  }

  rendern() {
    const { imgSrc, Ergebnisse, wird geladen } = dieser.Zustand
    const finalItem = Ergebnisse && {...Ergebnisse[0], ...Intro[Ergebnisse[0].Label]}

    zurückkehren (
      <div Stil={{padding: 20}}>
        <span
          Stil = {{ Farbe: '#cccccc', Textausrichtung: 'Mitte', Schriftgröße: 12, Anzeige: 'Block' }}
        >Die Erkennung ist möglicherweise nicht genau</span>
        <Schaltfläche
          Typ="primär"
          Größe="groß"
          Stil = {{Breite: '100%'}}
          beiKlick={() => this.upload.click()}
        >
          Bilderkennung auswählen</Button>
        <Eingabe
          Typ="Datei"
          beiÄnderung={e => diese.vorhersagen(e.target.files[0])}
          ref={el => {this.upload = el}}
          Stil={{ Anzeige: 'keine' }}
        />
        {
          !Ergebnisse && !imgSrc && <Empty style={{ marginTop: 40 }} />
        }
        {imgSrc && <div style={{ marginTop: 20, textAlign: 'center' }}>
          <img src={imgSrc} style={{ maxWidth: '100%' }} />
        </div>}
        {finalItem && <div style={{marginTop: 20}}>Erkennungsergebnis: </div>}
        {finalItem && <div style={{display: 'flex', alignItems: 'flex-start', marginTop: 20}}>
          <Bild
            src={finalItem.icon}
            Breite={120}
          />
          <div>
            <h2 Stil = {{Farbe: finalItem.color}}>
              {finalItem.label}
            </h2>
            <div Stil = {{Farbe: finalItem.color}}>
              {finalItem.intro}
            </div>
          </div>
        </div>}
        {
          wird geladen && <Spin size="large" style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 40 }} />
        }
        {Ergebnisse && <div style={{ marginTop: 20 }}>
          <Tabellenstil={{Breite: '100%'}}>
            <tbody>
              <tr>
                <td>Kategorie</td>
                <td>Übereinstimmungsgrad</td>
              </tr>
              {results.map(dieses.renderResult)}
            </tbody>
          </Tabelle>
        </div>}
      </div>
    )
  }
}

Standard-App exportieren

 <!DOCTYPE html>
<html>
  <Kopf>
    <title>Müllklassifizierung</title>
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
  </Kopf>
  <Text>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

 React von „react“ importieren
ReactDOM von „react-dom“ importieren
App aus „./App“ importieren

ReactDOM.render(<App />, document.querySelector('#app'))

 Standard exportieren {
  'Recyclingmaterial': {
    Symbol: „https://lajifenleiapp.com/static/svg/1_3F6BA8.svg“,
    Farbe: '#3f6ba8',
    Einleitung: „Damit sind Gegenstände gemeint, die im täglichen Leben oder bei Tätigkeiten, die Dienste für das tägliche Leben erbringen, anfallen, ihren ursprünglichen Gebrauchswert ganz oder teilweise verloren haben und recycelt und zu Produktionsrohstoffen verarbeitet oder sortiert und wiederverwendet werden können, darunter Altpapier, Kunststoffe, Glas, Metalle, Stoffe usw. '
  },
  'Gefährliche Abfälle': {
    Symbol: „https://lajifenleiapp.com/static/svg/2v_B43953.svg“,
    Farbe: '#b43953',
    Einleitung: „Bezieht sich auf Stoffe im Hausmüll, die der menschlichen Gesundheit oder der natürlichen Umwelt direkt oder potenziell schaden, darunter alte wiederaufladbare Batterien, alte Knopfzellen, alte Glühbirnen, weggeworfene Medikamente, Pestizid-Abfälle (Behälter), Farbabfälle (Behälter), Chemikalienabfälle für den täglichen Gebrauch, Quecksilberabfälle, alte Elektro- und Elektronikgeräte usw. '
  },
  'Küchenabfälle': {
    Symbol: „https://lajifenleiapp.com/static/svg/3v_48925B.svg“,
    Farbe: '#48925b',
    Einleitung: „Bezieht sich auf den organischen und verderblichen Abfall, der im täglichen Leben der Bewohner entsteht, einschließlich Gemüseblätter, Essensreste, Obstschalen, Eierschalen, Teesatz, Knochen usw.“ '
  },
  'Anderer Müll': {
    Symbol: „https://lajifenleiapp.com/static/svg/4_89918B.svg“,
    Farbe: '#89918b',
    Intro: „Daunter versteht man sonstigen Hausmüll, der gemischt, verunreinigt und schwer zu sortieren ist, ausgenommen Wertstoffe, Sondermüll und Küchenabfälle.“ '
  }
}

 importiere * als tf von '@tensorflow/tfjs'

export const file2img = async (f) => {
  gib ein neues Promise zurück(reslove => {
    const reader = neuer FileReader()
    reader.readAsDataURL(f)
    reader.onload = (e) => {
      const img = document.createElement('img')
      img.src = e.Ziel.Ergebnis
      Bildbreite = 224
      Bildhöhe = 224
      img.onload = () => { reslove(img) }
    }
  })
}

Exportfunktion img2x(imgEl) {
  returniere tf.tidy(() => {
    gibt tf.browser.fromPixels(imgEl) zurück
        .toFloat().sub(255/2).div(255/2)
        .reshape([1, 224, 224, 3])
  })
}