PC & Mobile

Régression linéaire avec les classes Webpack et ES6

Régression linéaire avec les classes Webpack et ES6


Comme mentionné précédemment, Webpack nous exposera à la pointe du langage Javascript, tout en fournissant les outils de construction permettant de polyfill si nécessaire pour le navigateur. Pour commencer à utiliser notre environnement Webpack, configurez un dossier de projet et installez les dépendances requises:

# créer un répertoire de projet
mkdir tfjs-linear-reg
cd tfjs-linear-reg
# initie un nouveau package.json
filé init
#installer les dépendances tensorflow js et webpack
fil ajouter webpack webpack-cli
@ tensorflow / tfjs @ tensorflow / tfjs-vis
#installer les plugins babel
fils ajouter --dev babel-loader babel-polyfill
@ babel / core
@ babel / preset-env
@ babel / plugin-proposition-classe-propriete
  • le webpack-cli package nous donne un moyen de configurer Webpack à partir de la ligne de commande, que nous utiliserons pour construire le projet plus bas
  • @ tensorflow / tfjs fournir le cadre tensorflow lui-même, alors que @ tensorflow / tfjs-vis fournissez-nous une solution graphique superposée à votre application. Nous verrons plus loin en quoi consiste ce panneau, qui peut être agrandi et réduit avec ` et maximisé avec ~.
  • Nous allons insérer une extension de propriétés de classe et de polyfill de Babel pour transpiler la version finale vers ES5 et prendre en charge les propriétés de classe, respectivement.

Remarque: Babel est le compilateur Javascript le plus utilisé, ce qui nous permet d'utiliser «le code Javascript de la prochaine génération, aujourd'hui» selon leur slogan. Babel peut être utilisé en tant que paquet autonome, mais offre également une prise en charge plug-in pour les bundleurs d'applications comme Webpack - ce que nous allons utiliser. En savoir plus sur Babel sur leur site web.

package.json construire le script

Ajouter ce qui suit scénario à package.json, nous donnant un raccourci pour la compilation de notre projet:

// package.json{
"mode": "développement",
"scripts": {
"build": "webpack --config webpack.config.js"
},

...
}

Dans notre script de construction, nous exécutons la commande webpack, ainsi que le --config drapeau indiquant notre fichier de configuration webpack, webpack.config.js. Fonctionnement fil de construction dans le répertoire du projet va maintenant compiler notre projet.

Notez également que mode est assigné une valeur de développement. Cela crée une construction beaucoup plus verbeuse qui n’est pas optimisée comme un production build serait, cela peut être utile pour le dépannage post-build.

Explorons maintenant les exigences de la webpack.config.js, où sont définis nos plugins Babel et d’autres configurations de projet.

Remarque: Vous pouvez également créer un projet Webpack avec npx, en exécutant npx webpack.

Configuration de Webpack dans webpack.config.js

Visiter brièvement webpack.config.js, le module suivant constitue tout ce dont nous avons besoin pour Tensorflow JS:

const path = require ('path');module.exports = {
mode: 'développement',
entrée: ['babel-polyfill', './src/index.js'],
sortie: {
path: path.resolve (__ dirname, 'dist'),
nom du fichier: 'main.js'
},
module: {
règles:[[
{
test: /.js$/,
exclure: / (node_modules) /,
utilisation: {
chargeur: 'babel-loader',
options: {
préréglages: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
]
}
};

Nous avons inclus deux entrée points: l’un pour notre index d’applications et l’autre pour le paquet polyfill de Babel. Passons en revue les points clés ici:

  • Les entrées dans Webpack sont des fichiers qui servent de points de départ pour le processus de regroupement. Les modules et les actifs utilisés sont analysés de manière récursive (en fonction de règles) et inclus dans la version finale à partir de ces points d’entrée.
  • Notre répertoire de sortie est un dist / dossier assis dans notre dossier de projet. C'est une convention commune. Le chemin de sortie nécessite un chemin absolu, c'est pourquoi nous utilisons path.resolve ()
  • Module règles dicter ce qui est groupé et dans quelles conditions. Notre seule règle ici est d'inclure tous .js fichiers, que nous avons définis sous la tester champ comme une expression régulière. Chaque règle permet préréglages et plugins à définir - c’est l’emplacement où nos plugins babel sont inclus.

Une référence complète pour les configurations Webpack peut être trouvée sur leur site web.

Remarque: Il est commun d'avoir beaucoup plus de règles, y compris celles d'inclure des fichiers CSS, des fichiers images, etc. Pour garder les choses à nu, nous souhaitons uniquement regrouper ici nos fichiers Javascript pour les tests Tensorflow JS.

Structure de projet

Avec notre configuration maintenant en place, nous pouvons configurer la structure des dossiers du projet. Reportez-vous au projet final sur Github pour connaître la structure terminée et sa mise en œuvre. Les points à retenir sont:

  • Pour avoir un fichier index.html avec notre script de construction final, à dist / main.js, intégré
  • Avoir un src / répertoire avec notre index.js file - le point d'entrée de l'application
  • D'inclure un des modèles/ répertoire qui hébergera nos modèles Tensorflow JS:
dist /
src /
index.js
des modèles/
VehicleEfficiency.js
index.html
package.json
webpack.config.json
...

Maintenant que notre projet est prêt à fonctionner avec Tensorflow JS, passons à autre chose. VehicleEfficiency.js et examinez comment la classe est construite.

Efficacité du véhicule (ici sur Github) gère tous les aspects de notre modèle: collecte et formatage des données, création et formation du modèle et prédiction. Examinons quelques-unes des API Tensorflow JS et des principaux utilitaires Javascript utilisés dans cette classe.

Les propriétés de classe ont été utilisées pour stocker des valeurs de base, telles que l'URL de données brutes distantes, ainsi que certaines configurations de modèle et espaces réservés d'objets que notre modèle remplacera lors de son exécution.

Remarque: Javascript n'a pas d'implémentation finale pour les propriétés de classe privées. Si vous êtes préoccupé par l'accès accidentel à des propriétés qui ne devraient pas l'être, une implémentation de Typescript peut être une option préférable.

le tfvis propriété est un booléen qui bascule l'utilisation de la tfjs-vis package, qui affiche des outils graphiques pendant la formation de notre modèle.

classe VehicleEfficieny {
tfvis = true;
...
}

Dans nos méthodes de classe, cela équivaut simplement à une instruction if, où nous exécuterons notre tfvis fonctions si réglé à vrai:

// bascule les graphiques tfjs-vis avec this.tfvisif (this.tfvis) {      // générer des graphiques ici
tfvis.render.scatterplot (
...
)
}

tfvis.render.scatterplot () Ce n’est qu’un des outils d’analyse d’une collection impressionnante à consulter dans la documentation officielle de l’API de tfjs-vis. Avec tfvis défini sur true, des graphiques seront générés au cours de la formation du modèle et des prévisions générées, qui s'afficheront sur le côté droit de votre application, en superposant le contenu existant:

à quoi ressemble tfjs-vis dans le navigateur

tfjs-vis intègre une barre latérale pliable qui héberge notre analyse de modèle. Il consiste en une API riche permettant de générer une gamme de tableaux, de graphiques et d’outils d’analyse.

Remarque: Il est fort probable que vous voudrez tfvis courir tout le temps en mode développement. Vous voudrez peut-être vous référer au NODE_ENV variable d’environnement pour déterminer si elle doit être exécutée ou supprimée tfvis complètement au moment de la construction pour réduire la taille de bundle de votre application.

Rassembler des données

Dans getData (), une liste des détails de la voiture est extraite d’une URL distante en tant qu’objet JSON. Ces données contiennent quelques propriétés pour chaque voiture, mais nous ne sommes intéressés que par puissance et mpg. Par conséquent, après avoir récupéré la liste complète, nous utilisons Object.map () pour reconstruire un objet nettoyé avec seulement les deux propriétés. En outre, filtre() a également été appelé pour supprimer des entrées où mpg ou puissance sont manquantes:

// récupère les données
const carsDataReq = wait fetch (this.dataUrl);
const carsData = wait carsDataReq.json ();
^
formater le résultat en tant qu'objet JSON
// mapper les données pour créer un objet `nettoyé` stockant les mpg et les chevaux
const nettoyé = carsData.map (car => ({
mpg: car.Miles_per_Gallon,
puissance: voiture. Puissance,
}))
.filter (car => (car.mpg! = null && car.horsepower! = null));
^
Incluez uniquement les entrées pour lesquelles la puissance maximale et la puissance sont définies

Le nettoyage des données est une convention courante dans ML: la préparation des données est en général une tâche très lourde qui prend une ampleur exponentielle au fur et à mesure que votre jeu de données se développe. Assurer l'existence de valeurs est essentiel pour les modèles de formation, où une valeur manquante ou anormale pourrait fausser les prévisions.

Heureusement, l'ensemble de données fourni pour cet exemple a également été étiqueté pour nous. L’étiquetage des jeux de données est une autre tâche en soi: chaque caractéristique d’un modèle et chaque valeur doivent être étiquetées et formatées de manière cohérente. Cela peut équivaloir à étiqueter une gamme de traits du visage pour une bibliothèque d’images pour la reconnaissance faciale, ou une Efficacité du véhicule modèle où 1000 statistiques de voiture sont introduites dans le modèle.

Comme nous pouvons le voir ci-dessus, Javascript contient des fonctions utiles intégrées pour le reformatage, le filtrage et la mise en correspondance d'objets, ainsi que sa prise en charge des objets JSON.

Les API de données TensorflowJS nous donnent une idée de la richesse des méthodes utilisées pour collecter et stocker des données pour ML - bien que plonger dans ces méthodes soit pour un autre sujet de conversation. Le point important à retenir ici est que ces outils font de Javascript une solution idéale pour préparer une gamme variée de données pour la formation ML.

Créer le modèle

La création de modèle pour les tâches de régression linéaire est assez simple: nous adoptons un modèle séquentiel et alimentons nos données à travers deux couches.

Une couche est simplement une couche de calcul dans notre modèle, les données d'entrée étant nos données brutes, formatées en tenseurs. Chaque couche transforme ces données et produit le résultat dans le même tenseur. Dans un modèle séquentiel, les tenseurs traversent chaque couche, la couche précédente déterminant l'entrée de la suivante.

Concrètement, un modèle séquentiel est une configuration dans laquelle la sortie d'une couche correspond à l'entrée de la couche suivante. Aucune couche n'est ignorée et les données ne sont pas déplacées de manière dynamique vers d'autres branches de la couche.

Remarque: L'alternative à tf.sequential () est tf.model (), un modèle plus générique qui suppose moins d’hypothèses sur la manière dont les données circulent entre les couches.

Bien que cela puisse paraître complexe, la création du modèle est plutôt simple, et est définie dans createModel ():

// création d'un modèle séquentiel avec deux couchescreateModel () {      // instancier un modèle
modèle const = tf.sequential ();
// couche cachée
model.add (tf.layers.dense ({inputShape: [1], unités: 1, useBias: true}));
// couche de sortie
model.add (tf.layers.dense ({unités: 1, useBias: true}));

// assigner le modèle en tant que propriété de classe
this.model = model;
...
}

Caché les couches sont des couches intermédiaires avant la couche de sortie finale. Cette terminologie indique simplement que la sortie de cette couche sera transmise à la couche suivante en tant qu'entrée. le Sortie couche produit en revanche la valeur prédictive finale.

Décomposons cette syntaxe:

  • UNE dense couche dans les hôtes Tensorflow «pondération»: une matrice de nombres formés pour trouver la transformation idéale pour les données de tenseur entrantes. Plus un ensemble de données est vaste et volumineux, plus les poids deviennent "formés", et théoriquement en mesure de faire des prévisions plus précises.
  • des unités définit la taille de cette matrice de poids dans la couche. En fournissant une valeur de 1, nous configurons la couche pour qu’elle ait un poids pour chacune des entités en entrée des données. Dans notre cas, cela se traduit par 1 transformation en puissance contribution.
  • Avec des poids, un partialité est également généré et ajouté à ce résultat de transformation de pondération, fournissant un autre mécanisme permettant de générer des prévisions plus précises.
  • Le biais est vrai par défaut, donc le useBias l'argument n'est pas réellement nécessaire ci-dessus. Notre inputShape de [1] définit la dimensionnalité des données que nous transmettons dans la couche. Comme nous ne faisons que passer un entier, puissance, la inputShape est 1 dimension, d'où notre valeur de [1].

Nous constatons déjà que Tensorflow JS est très flexible dans la gamme d’arguments qu’il prend en charge dans le cadre du modèle, ce qui souligne à quel point le cadre est générique.

L'apprentissage automatique est très diversifié, allant de ses cas d'utilisation aux différentes structures de réseaux de neurones et aux opérations mathématiques qui leur sont appliquées. C’est ce qui ressort de l’approche de Tensorflow JS en matière de fourniture d’API flexibles et de ne pas trop présumer du type de problème que vous abordez. Cela peut être déroutant pour le nouveau venu, laissant une ambiguïté quant aux configurations à utiliser pour résoudre un problème, mais il n’ya pas de solution miracle à cela au-delà de l’étude de la documentation et de la familiarisation avec les solutions, ainsi que du raisonnement qui les sous-tend.

Remarque: Pour une API de niveau supérieur, ml5.js tente de fournir une API simplifiée pour travailler avec Tensorflow JS sans avoir à travailler avec des tenseurs. Le paquet manque actuellement de documentation et limite la diversité de Tensorflow JS, ce qui est sans doute la principale force du framework. Je ne pense donc pas que ce paquet change la donne à l’avenir. Comme mentionné précédemment dans l'article, fournir une implémentation Javascript à Tensorflow suffira à de nombreux développeurs pour accéder au framework.

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer