schoenberg - think MINI:





neuronales Netz: einfaches Beispiel mit JavaScript

Lieber XING-Kontakt, vielen Dank für Ihren Besuch!

Maschinelles lernen „Machine Learning“ ist ein Teilbereich von künstlicher Intelligenz bzw. Artificial Intelligence (englisch). „Machine Learning“ bedeutet, dass Systeme selbständig Wissen aus Erfahrungen generieren können. Die Vorteile von Machine Learning liegen darin, dass solche Systeme nicht nur exakt übereinstimmende Daten erkennen, sondern mittels Muster und Gesetzmäßigkeiten auch unbekannte Daten, sowie auch größere Datenmengen verarbeiten und beurteilen können.

Bei der Umsetzung unterscheidet man zwischen symbolischen Systemen (induzierte Regeln) und subsymbolischen Systemen (implizites Wissen) wie neuronale Netze, die auch in der Praxis sehr häufig eingesetzt werden.

Dabei erfolgt das Erlernen aus Erfahrungen durch ein sogenanntes überwachtes Lernen bzw. supervised learning (englisch). Dabei erhält der Algorithmus unterschiedliche Eingabewerte (Input-Layer) und aufgrund der anfangs zufällig festgelegten Gewichte im Netz werden Ausgabewerte (Output-Layer) ermittelt (Forwardpropagation). Entspricht diese Ausgabe nicht dem korrekten Ergebnis, so wird entweder automatisch aufgrund Trainingsdaten bzw. von einem „Lehrer“ das errechnete Ergebnis korrigiert.

Der Algorithmus errechnet dann den Fehler und passt die Gewichtungen im neuronalen Netz an (Backpropagation). Ziel ist es die Gewichte im neuronalen Netz so einzustellen, dass der Output nach der Trainingsphase (unüberwachtes Lernen) möglichst immer ein korrektes Ergebnis ausgibt.

Darunter habe ich ein sehr vereinfachtes Beispiel mit JavaScript programmiert. Dabei wird (links) eine zufällig ausgewählte Farbe eingeblendet und mittels neuronalen Netz ermittelt das Script die Farbe als Wort z.B. Orange, … Aufgrund der anfangs zufällig festgesetzten Gewichtungen, sind diese errechneten Ausgabewerte oftmals falsch. Sie können dann zum Ausprobieren (rechts) auf das korrekte Wort klicken. Anschliessend passt das Skript dann die Gewichte im neuronalen Netz an. Nach mehreren solchen Wiederholungen sollte der errechnet Ausgabewerte immer öfter korrekt sein.

Da bei diesem sehr vereinfachten Beispielskript allerdings das Problem auftritt, dass es die Farben „Orange“ und „Blau“ aufgrund errechneter Ausgabewerte beinahe nicht unterscheiden kann, lassen sich daran auch wichtige Voraussetzungen erkennen. Und zwar muss zuerst eine geeignete Abbildungsvorschrift gefunden werden, sowie auch eine optimale Anzahl der sogenannten Hidden Neurons. Da ich in diesem vereinfachten Beispiel im Hidden-Layer 2 nur 4 Bereiche eingefügt habe (zur übersichtlicheren Darstellung), führt dies auch zu soeben erwähntem Problem (Blau <-> Orange).

Hinweis: als Schwellenwert für die Aktivierung der Sigmoidfunktion (Hidden-Layer 1, Farbe Blau) habe ich einen Farbanteil (Blau) von 80 eingestellt.

Unter dem folgenden Link habe ich ein 2-seitiges Ebook zu diesem Thema erstellt. Dieses können Sie hier downloaden .. Ebook „künstliche Intelligenz“.

und hier wie immer ein Glitze-Kleines-Bisschen Werbung :-(

schoenberg - think MINI


Tools, Software & Programme aufgrund DSGVO leider nicht mehr verfügbar !! Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank für Ihr Verständnis und Ihnen schöne Grüße,

Christian Schönberg (privater Blogartikel)

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter


SVG: skalierbare Vektorgrafiken in Webseiten einbinden

Lieber XING-Kontakt, vielen Dank für Ihren Besuch!

Die Bezeichnung SVG ist die Abkürzung von „Scalable Vector Graphics“ und bedeutet auf Deutsch skalierbare Vektorgrafik. Damit lassen sich Vektorgrafiken auch in den derzeit gängigsten Webbrowsern darstellen.

Auch Animationen können z.B. mit JavaScript sehr einfach umgesetzt werden. Grafische Elemente wie Kreis, Ellipse, Rechteck, Pfad, Linie, Texte, usw. dienen dabei als Grundelemente (grafische Primitive), die beliebig kombiniert werden können.

Zu den wesentlichen Vorteilen zählen die Möglichkeit zur größeren Darstellung von Grafiken möglichst ohne Qualitätseinbußen.

Es gibt dazu auch zahlreiche JavaScript Bibliotheken wie z.B. Velocity, SnapSVG, usw. Mit diesen können skalierbare Vektorgrafiken zumeist deutlich einfacher in Webseiten eingebunden, sowie auch animiert werden.

Da es aber auch schon einige solcher JavaScript Bibliotheken gegeben hat, die es mittlerweile nicht mehr gibt bzw. nicht mehr aktualisiert werden, kann es auch hierbei sinnvoll sein, die notwendigen Skripte für Animationen, usw. selbst zu erstellen.

Darunter habe ich ein einfaches Beispiel einer solchen selbst erstellten und animierten skalierbaren Vektorgrafik erstellt.

und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁

schoenberg - think MINI


Tools, Software & Programme aufgrund DSGVO leider nicht mehr verfügbar !! Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank für Ihr Verständnis und Ihnen schöne Grüße,

Christian Schönberg (privater Blogartikel)

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter


Chatbots: sich mit Roboter-Skripten unterhalten

Lieber XING-Kontakt, vielen Dank für Ihren Besuch!

Die Aufgabe von Chatbots besteht im wesentlichen darin, daß diese mittels ausgetauschter (Chat-)Texte die Probleme, Wünsche und Anliegen von Webseitenbesuchern (z.B. Interessenten, Kunden, ..) möglichst genau erkennen und verstehen sollten, um dem anderen (menschlichen) Chatteilnehmer eine optimale Lösung in Form von Informationen (Daten, Fakten, usw.) bzw. ausgelöster Vorgänge (z.B. Buchung eines Supporttermins, ..) anbieten zu können.

Motivgründe für die Entwicklung solcher Chatbots können z.B.: Kostenersparnisse (Personal, ..), Automatisierung, usw. sein.

Herausforderungen für den Chatbot stellen dabei zuerst das Verstehen der Probleme, Anliegen und Ziele des (menschlichen) Chatteilnehmers, also Herausfiltern und Interpretieren von Informationen aus den Chattexten, sowie auch die Notwendigkeit Erfahrungen für die Verbesserung des Kundennutzens zu ermöglichen (Lerneffekt, künstliche Intelligenz).

Für die Programmierung solcher Chatbots gibt es auch bereits zahlreiche Frameworks wie z.B. wit.ai (Facebook Bot Engine), Microsoft Bot Framework, usw.. Da diese zum Teil bereits relativ weit entwickelt sind, lassen sich eigene Anwendungen damit zumeist schneller entwickeln.

Wenn man aber möglichst unabhängig von Facebook, Microsoft, usw. bleiben möchte, lassen sich sich die dafür erforderliche Skripte auch selbst programmieren.

Darunter habe ich ein solches vereinfachtes Chatbot-Skript programmiert. Dabei können Sie ganze Sätze eingeben. Das Skript versucht aufgrund Ihrer eingegebenen Chattexte Ihr Anliegen zu ermitteln und sucht dann im Hintergrund z.B. in der Wikipedia nach möglichst passenden Informationen.

Obwohl ich in meinen Skripten noch unzählige Details, Schwachstellen und Fehler aus- und verbessern muss, können Sie mein vereinfachtes Chatbot-Skript darunter ausprobieren, in dem Sie Fragen, usw. eingeben.

und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁

schoenberg - think MINI


Tools, Software & Programme aufgrund DSGVO leider nicht mehr verfügbar !! Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank für Ihr Verständnis und Ihnen schöne Grüße,

Christian Schönberg (privater Blogartikel)

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter


PHP-Skript für Fotoeffekt (lässt Foto wie gemalt aussehen)

Lieber XING-Kontakt, vielen Dank für Ihren Besuch!

In der Kategorie „Foto editieren“ (Kategorie-Auswahl rechts) habe ich schon einige PHP-Skripte erstellt, die in ein beliebiges Foto einen jeweils bestimmten Fotoeffekt einfügen.

Darunter habe ich ein PHP-Skript erstellt, dass ein Foto so umwandelt, dass es annähernd wie gemalt aussieht. Auch die Pinselstriche lassen sich damit etwas erkennen.

Ausprobieren können Sie dieses PHP-Skript, in dem Sie ein Foto von Ihrem Rechner auswählen und auf einfügen (hochladen und bearbeiten) klicken. Das Einfügen des Fotoeffekts kann aber aufgrund der Rechnerzeit (Webserver) auch bis zu 30 sec. dauern. Außerdem ist die max. Dateigröße des Fotos auf 100 kB beschränkt.

Und hier noch ein kleiner selbst erstellter Werbeclip 🙁

 

und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁

schoenberg - think MINI


Tools, Software & Programme aufgrund DSGVO leider nicht mehr verfügbar !! Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank für Ihr Verständnis und Ihnen schöne Grüße,

Christian Schönberg (privater Blogartikel)

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter


Videos als HTML5-Animationen auf der Webseite einbinden

Lieber XING-Kontakt, vielen Dank für Ihren Besuch!

Wenn man ein Video in die eigene Webseite einbinden möchte, wird dazu sehr oft das H.264 (MP4) Format, sowie das Ogg Theora (OGG) Format (Open Source) verwendet.

Aber auch als erstellte HTML5-Animation lassen sich z.B. Animationsclips, usw. sehr einfach einbinden.

evtl. mögliche VORTEILE können sein:

– evtl. schnellere Ladezeit: da beim Starten nur die für die erste Szene benötigten Bilder geladen werden und alle anderen Bilder nachgeladen werden, während der Clip bereits läuft. Auch Audio Dateien brauchen so erst später nachgeladen zu werden.

Interaktion mit dem Webseitenbesucher: z.B. der Besucher könnte vorher gefragt werden, ob der MINI Cooper bei einer Straße nach rechts oder nach links abbiegen sollte (individuelle Story bzw. Interaktive Geschichte für den Besucher)

– der Besucher kann während des Videos, z.B. nach seinem Namen, usw. gefragt werden und dieser Besucher im danach folgenden Video persönlich angesprochen bzw. entsprechend darauf reagiert (z.B. bei Wohnort in Österreich auf eine andere Art als bei Wohnort in Deutschland) werden.

– sogenannte „Parallax scrolling Websites“ lassen sich damit sehr einfach umsetzen, da sich die Frames z.B. durch Scrollen mit der Mouse sehr einfach in beliebiger Geschwindigkeit vor– und auch zurückspielen lassen. Ein einfaches von mir selbst erstelltes Beispiel können Sie hier sehen 🙂

einzelne Bilder können nachträglich sehr einfach korrigiert oder verändert werden, ohne dann die ganze Videodatei (z.B. .mp4, .flv, usw.) neu erstellen zu müssen.

mögliche NACHTEILE können sein:

– nur für bestimmte Clips möglich bzw. sinnvoll, z.B. Animationsclips, Präsentationen, interaktive Erklärungsvideos, interaktive Supportvideos, usw.

– evtl. höherer Arbeitsaufwand für die Erstellung

sowie sonstige Nachteile bzw. mögliche Einschränkungen

Darunter habe ich ein einfaches Beispiel einer solchen selbst erstellten HTML5-Animation eingefügt. Die dafür notwendigen HTML- und JavaScript-Dateien habe ich mit dem von mir programmierten HTML-Animationstool unter diesem Link hier ansehen erstellt.

In diesem Beispiel können Sie auch im Feld rechts oben anstatt des „xxx“ eigene Zeichen eingeben. Diese von Ihnen eingegebenen Zeichen werden dann in der 1. Szene auf dem Autokennzeichen (hinten) des Mini Coopers eingefügt (Interaktion). Links oben wird außerdem immer die tatsächliche Uhrzeit (Stunden-, Minuten- und Sekundenzeiger) dargestellt. Auch die Audio-Dateien werden, wie oben bereits erwähnt, beim jeweils zugehörigen Frame abgespielt. Dazu müssen Sie allerdings zuvor rechts oben (an 2. Stelle) das Häckchen bei „Audio ?“ setzen.

 

 

und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁

schoenberg - think MINI


Tools, Software & Programme aufgrund DSGVO leider nicht mehr verfügbar !! Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank für Ihr Verständnis und Ihnen schöne Grüße,

Christian Schönberg (privater Blogartikel)

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter