Sprachgesteuerte Web-Visualisierungen mit Vue.js und Machine Learning

0
16

In diesem tutorial werden wir-pair-Mädchen Vue.js, three.js und LUIS (Kognitive Leistungen) zu erstellen, die eine sprachgesteuerte web-Visualisierung.

Aber zuerst, ein wenig Kontext

Warum benötigen wir verwenden Sie Spracherkennung? Welches problem könnte so etwas wie dies zu lösen?

Vor einer Weile war ich immer auf einen bus in Chicago. Der Busfahrer wollte mich nicht sehen, und Schloss die Tür auf mein Handgelenk. Als er begann zu gehen, hörte ich einen Knall in meinem Handgelenk, und er mußte schließlich anhalten, wie die anderen Passagiere begannen zu Schreien, aber nicht, bevor er Riss ein paar sehnen in meinem arm.

Ich war, sollte sich Zeit zu nehmen von der Arbeit, aber typisch für die Mitarbeiter des Museums in dieser Zeit, ich war auf Vertrag und hatte echt keine Krankenversicherung. Ich habe nicht viel zu beginnen mit der Einnahme Zeit Weg war nicht gerade eine option für mich. Ich war durch die Schmerzen. Und, schließlich, die Gesundheit der mein Handgelenk begann verschlechtert. Es wurde wirklich schmerzhaft, auch Zähneputzen. Voice-to-text war nicht der allgegenwärtigen Technologie, die es heute ist, und das beste Werkzeug, dann war Dragon. Es funktionierte OK, aber war ziemlich frustrierend zu lernen und ich hatte immer noch meine Hände ziemlich Häufig, weil es oft Fehler aus. Das war vor 10 Jahren, so bin ich sicher, dass bestimmte tech hat sich deutlich verbessert seitdem. Mein Handgelenk hat sich auch deutlich verbessert in dieser Zeit.

Die ganze Erfahrung hat mich mit großem Interesse in der Stimme-gesteuerte Technologien. Was können wir tun, wenn wir kontrollieren können, das Verhalten der web -, zu unseren Gunsten, nur durch sprechen? Für ein experiment, beschloss ich, LUIS, was ist ein machine-learning-basierten Dienst zu erstellen natürlicher Sprache durch den Einsatz von custom-Modellen, die kontinuierlich verbessern können. Wir können diese für apps, bots und IoT-Geräten. Diese Weise, können wir eine Visualisierung, die eine Antwort auf jede Stimme — und es kann sich verbessern, indem Sie lernen auf dem Weg.

GitHub Repo

Live-Demo

Hier ein Blick aus der Vogelperspektive auf das, was wir bauen:

Einrichten LUIS

Wir erhalten einen kostenlosen Test-account für Azure und dann gehen Sie zu der portal. Wir wählen die Kognitiven Leistungen.

Nach der Ernte Neu → AI/Machine Learning, wählen Sie “Sprache Verstehen” (oder LUIS).

Dann werden wir herausgreifen unsere Namen und Ressource-Gruppe.

Wir sammeln unsere Schlüssel aus dem nächsten Bildschirm und dann den Kopf über die LUIS-dashboard

Es ist eigentlich wirklich Spaß zu trainieren, diese Maschinen! Wir richten eine neue Anwendung, und erstellen Sie einige Absichten, die Ergebnisse, die wir auslösen möchten, basierend auf einer bestimmten Bedingung. Hier ist die Probe von dieser demo:

Sie können feststellen, dass wir ein Namensschema hier. Wir tun dies, so dass es leichter zu kategorisieren, die Absichten. Wir gehen, um die erste Zahl aus der emotion und hören Sie dann die Intensität, also die ursprünglichen Absichten vorangestellt entweder App (diese sind in Erster Linie in der App.vue-Komponente) oder Intensität.

Wenn wir Tauchen in jede Besondere Absicht, sehen wir, wie das Modell trainiert wird. Wir haben einige ähnliche Sätze, die bedeuten in etwa das gleiche:

Sie können sehen, wir haben eine Menge von Synonymen für das training, aber wir haben auch die “Train” – Taste bis oben, wenn wir bereit sind, beginnen Sie mit dem training des Modells. Wir auf diesen button klicken, erhalten Sie eine Erfolgsmeldung, und dann sind wir bereit, Sie zu veröffentlichen. 😀

Einrichten Vue

Erstellen wir eine ziemlich standard Vue.js Anwendung über die Vue-CLI. Zuerst starten wir:

vue erstellen Sie drei-vue-Muster
# wählen Sie dann Manuell…

Vue CLI v3.0.0

? Bitte wählen Sie eine Voreinstellung:
Standard (babel, eslint)
“Wählen Sie manuell features

# Wählen Sie dann die PWA-feature und die anderen mit der Leertaste
? Bitte wählen Sie ein preset: wählen Sie Manuell features
? Überprüfen Sie die Eigenschaften für Ihr Projekt benötigt werden:
◉ Babel
◯ Typoskript
◯ Progressive Web App (PWA) Unterstützung
◯ Router
◉ Vuex
◉ CSS Pre-Prozessoren
◉ Linter / Formatter
◯ Unit-Tests
◯ E2E-Tests

? Wählen Sie eine linter / formatter-config:
ESLint mit der Fehler-Prävention nur
ESLint + Airbnb config
“ESLint + Standard config
ESLint + Schöner

? Pick zusätzlichen lint Funktionen: (Drücken Sie die <space> zum auswählen eines Umschalten alle, die ich auf Auswahl umkehren)
“◉ Fusseln auf speichern
◯ Flusen und fixieren Sie Sie auf übernehmen

Erfolgreich erstellte Projekt drei-vue-Muster.
Erste Schritte mit den folgenden Befehlen:

$ cd drei-vue-Muster
$ Garn dienen

Das wird spin up, ein server für uns und bieten eine typische Vue willkommen-Bildschirm. Wir werden auch hinzufügen, einige Abhängigkeiten zu unserer Anwendung: three.js, Sinus-Wellen, und axios. three.js wird uns helfen, den WebGL-Visualisierung. Sinus-Wellen gibt uns eine schöne Leinwand Abstraktion für den Lader. axios wird es uns ermöglichen, eine wirklich schöne HTTP-client, so können wir telefonieren an LUIS für die Analyse.

Garn fügen Sie drei Sinus-Wellen axios

Die Einrichtung unserer Vuex-Shop

Nun haben wir ein funktionierendes Modell, let ‘ s go get es mit der axios und bringen es in unsere Vuex-Shop. Dann können wir die Verbreitung der Informationen an die verschiedenen Komponenten.

In Staat, wir speichern, was wir brauchen werden:

Status: {
Vorsatz: ‘None’,
Intensität: ‘None’,
Punktzahl: 0,
uiState: “Leerlauf”,
zoom: 3,
counter: 0,
},

Vorsatz und Intensität speichert die App, Intensität und Absichten, beziehungsweise. Die Partitur speichern, die unser Vertrauen (was ist ein score von 0 bis 100 gemessen wird, wie gut das Modell denkt, es kann eine Rangfolge für die Eingabe).

Für die uiState, haben wir drei verschiedene Zustände:

  • Leerlauf – warten auf die Eingabe des Benutzers
  • hören – hören Sie die Benutzer-Eingabe
  • Holen – erste user-Daten aus der API

Sowohl zoom und Zähler sind das, was wir verwenden werden, um die Daten zu aktualisieren Visualisierung.

Nun, in den Aktionen, wir werden die uiState (eine mutation) zu Holen, und wir werden einen Aufruf an die API mit der axios mit dem generierten Schlüssel erhielten wir bei der Einrichtung LUIS.

getUnderstanding({ Begehen }, äußerung) {
commit(‘setUiState’, ‘Holen’)
const url = `https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/4aba2274-c5df-4b0d-8ff7-57658254d042`

https: axios({
method: ‘get’,
url
params”: {
verbose: true,
timezoneOffset: 0,
f: äußerung
},
Header: {
‘Content-Type’: ‘application/json’,
‘Ocp-Apim-Abonnement-Schlüssel’: ‘XXXXXXXXXXXXXXXXXXX’
}
})

Dann, sobald wir das getan haben, können wir die top-scoring-Vorsatz und speichern es in unserem Staat.

Wir müssen auch einige Mutationen, die wir verwenden können, um den Status zu ändern. Wir verwenden diese in unsere Aktionen. In der kommenden Vue 3.0 wird dieser gestrafft werden, da Mutationen entfernt werden.

newIntent: (Staat, { intent score }) => {
if (intent.enthält(‘Intensität’)) {
Zustand.Intensität = Vorsatz
if (intent.enthält(‘Mehr’)) {
Zustand.counter++
} else if (intent.enthält (“Weniger”)) {
Zustand.counter–
}
} else {
Zustand.Vorsatz = Absicht
}
Zustand.score = Partitur
},
setUiState: (Zustand, status) => {
Zustand.uiState = status
},
setIntent: (Zustand, status) => {
Zustand.Vorsatz = status
},

Dies ist alles ziemlich einfach. Wir sind auf der Durchreise, damit wir aktualisieren können Sie für jedes vorkommen — mit Ausnahme der Intensität, die inkrementiert den Zähler nach oben und unten, entsprechend. Wir verwenden, dass die Zähler in den nächsten Abschnitt zum aktualisieren der Visualisierung.

.dann(({ data }) => {
console.log(‘axios Ergebnis’, Daten)
wenn (altMaps.hasOwnProperty (“Daten.Abfrage)) {
commit(‘newIntent’, {
Vorsatz: altMaps[Daten.Abfrage],
Punktzahl: 1
})
} else {
commit(‘newIntent’, Daten.topScoringIntent)
}
commit(‘setUiState’, ‘idle’)
commit(‘setZoom’)
})
.catch(err => {
console.error(‘axios Fehler”, err)
})

In dieser Handlung, die wir Begehen, die Mutationen gingen wir einfach vorbei oder melden einen Fehler, wenn etwas schief geht.

Die Art und Weise, dass die Logik funktioniert, der Benutzer tun, die ursprüngliche Aufnahme zu sagen, wie Sie sich gerade fühlen. Sie werden den Knopf drücken, um kick it all off. Die Visualisierung wird angezeigt und an diesem Punkt, die app wird ständig hören für den Benutzer zu sagen, weniger oder mehr Steuern, die zurückgegeben Visualisierung. Lassen Sie uns den rest der app.

App einrichten

Im App.vue, wir zeigen zwei verschiedene Komponenten für die Mitte der Seite, je nachdem, ob oder nicht, wir haben bereits unsere Stimmung.

<app-recordintent v-if=”intent === ‘None'” />
<app-recordintensity v-if=”intent !== ‘None'” :emotion=”Vorsatz” />

Diese beiden Informationen für die Zuschauer sowie eine Sinuswellen-Komponente, während die Benutzeroberfläche ist in einem Wartezustand.

Die Basis der Anwendung ist, wo der Visualisierung angezeigt werden. Es wird sich zeigen, mit verschiedenen Requisiten, je nach Stimmung. Hier sind zwei Beispiele:

<app-Basis
v-if=”intent === ‘Aufgeregt'”
:t-config.a=”1″
:t-config.b=”200″
/>
<app-Basis
v-if=”intent === ‘Nervös'”
:t-config.a=”1″
:color=”0xff0000″
:Drahtmodell=”true”
:Regenbogen=”false”
:emissive=”true”
/>

Aufbau der Daten-Visualisierung

Ich wollte mit Kaleidoskop-wie Bilder für die Visualisierung und, nach einigem suchen, fand dieses repo. Die Weise, die es funktioniert, ist, dass eine Form verwandelt sich in Raum und dieser bricht das Bild auseinander und zeigen Stücke wie ein Kaleidoskop. Nun, das klingt genial, weil (yay!) die Arbeit ist getan, nicht wahr?

Leider nicht.

Es gab eine Reihe von wichtigen änderungen, die getan werden musste, um diese Arbeit zu machen, und es endete als eine Herkulesaufgabe, auch wenn sich der visuelle Ausdruck erscheint ähnlich wie das original.

  • Aufgrund der Tatsache, dass wir brauchen würde, um den Abriss der Visualisierung, wenn wir beschlossen, es zu ändern, ich hatte zu konvertieren, den vorhandenen code zu verwenden bufferArrays, die mehr Leistung bietet, für diesen Zweck.
  • Der ursprüngliche code war ein großes Stück, so dass ich brach einige der Funktionen in kleinere Methoden auf die Komponente, um es einfacher zu Lesen und zu verwalten.
  • Weil wir möchten, aktualisieren Sie die Dinge on the fly, ich hatte zu speichern einige Elemente, wie Daten in der Komponente, und schließlich, wie Requisiten, die er erhalten würde von den Eltern. Ich habe auch enthalten einige nette Voreinstellungen (aufgeregt ist, was alle die Standardeinstellungen Aussehen).
  • Wir verwenden den Indikator aus der Vuex Staat zur Aktualisierung der Abstand der Kamera die Platzierung relativ zu dem Objekt, so dass wir sehen können, die mehr oder weniger von es und so wird es mehr und weniger Komplex.

Um das zu ändern die Weise, die es sieht, nach den Konfigurationen, erstellen wir einige Requisiten:

Requisiten: {
numAxes: {
Typ: Number,
Standard: 12,
erforderlich: false
},

tConfig: {
default() {
return {
a: 2,
b: 3,
c: 100,
d: 3
}
},
erforderlich: false
}
},

Verwenden wir diese, wenn wir die Formen erstellt:

createShapes() {
diese.bufferCamera.position.z=.shapeZoom

if (dies.torusKnot !== null) {
diese.torusKnot.material.dispose()
diese.torusKnot.geometrie.dispose()
diese.bufferScene.entfernen(dies.torusKnot)
}

var Form = new DREI.TorusKnotGeometry(
diese.tConfig.a,
diese.tConfig.b,
diese.tConfig.c,
diese.tConfig.d
),
material

diese.torusKnot = new DREI.Mesh(Form, material)
diese.torusKnot.material.needsUpdate = true

diese.bufferScene.hinzufügen(dies.torusKnot)
},

Wie wir bereits erwähnt, dies ist nun aufgeteilt in seine eigene Methode. Wir kreieren auch eine andere Methode, die startet die animation, die wird auch neu gestartet werden, Wann immer es updates. Die animation macht die Verwendung von requestAnimationFrame:

animieren() {
diese.storeRAF = requestAnimationFrame(this.animieren)

diese.bufferScene.rotation.x += 0.01
diese.bufferScene.rotation.y += 0.02

diese.renderer.render(
diese.bufferScene,
diese.bufferCamera,
diese.bufferTexture
)
diese.renderer.Rendern(dies.Szene, dieser.Kamera)
},

Wir erstellen eine berechnete Eigenschaft, die man als shapeZoom, die zurückkehren wird der zoom aus dem store. Wenn Sie sich erinnern, diese wird aktualisiert, sobald der Benutzer die voice verändert die Intensität.

berechnet: {
shapeZoom() {
return this.$store.Zustand.zoom
}
},

Wir können Sie dann einen watcher zu sehen, wenn der zoom-level verändert und das Abbrechen der animation, erstellen Sie die Formen, und starten Sie die animation.

watch: {
shapeZoom() {
diese.createShapes()
cancelAnimationFrame(dies.storeRAF)
diese.animieren()
}
},

Daten, die wir auch lagern einige Dinge, die wir brauchen, die für die Instanziierung der three.js Szene — vor allem machen Sie sicher, dass die Kamera genau zentriert.

Daten() {
return {
bufferScene: neue DREI.Szene(),
bufferCamera: neue DREI.PerspectiveCamera(75, 800 / 800, 0.1, 1000),
bufferTexture: neue DREI.WebGLRenderTarget(800, 800, {
minFilter: DREI.LinearMipMapLinearFilter,
magFilter: DREI.LinearFilter,
antialias: true
}),
Kamera: neue DREI.OrthographicCamera(
Fenster.innerWidth / -2,
Fenster.innerWidth / 2,
Fenster.innerHeight / 2,
Fenster.innerHeight / -2,
0.1,
1000
),

Es gibt mehr zu dieser demo, wenn Sie möchten, erkunden Sie die repo-oder es selbst einrichten und sich mit Ihren eigenen Parametern. Die init-Methode das tut, was Sie denken, es könnte: er initialisiert die ganze Visualisierung. Ich habe kommentiert, eine Menge der wichtigsten Teile, wenn man guckt in den Quelltext. Es gibt auch eine andere Methode, die updates die geometrie, das heißt — Sie uessed es — updateGeometry. Sie können feststellen, eine Menge von vars gab es auch. Das ist, weil es ist üblich das wiederverwenden von Variablen, die in dieser Art der Visualisierung. Wir kicken alles ab durch den Aufruf dieser.init() in the mounted() lifecycle-Haken.

  • Hier ist das repo-wenn Sie möchten, spielen mit dem code
  • Sie können Ihr eigenes Modell, indem Sie eine Kostenlose Azure-Konto
  • Sie werden auch prüfen wollen, LUIS (Kognitive Leistungen)

Es ist ziemlich lustig zu sehen, wie weit können Sie bekommen, Dinge zu schaffen für das web, die nicht unbedingt jeder hand, die Bewegung zu kontrollieren. Es eröffnet eine Menge Möglichkeiten!