D-ID Agents: “Streaming KI-Avatare” (24/7) über JS-Snippet auf eigener Webseite einbinden

Veröffentlicht am 10. April 202410. April 2024 von Matthias Kindt

Avatare auf der Grundlage von Künstlicher Intelligenz sind beliebte Anwendungen, um zum Beispiel Themen zu präsentieren, ohne dass ein Mensch vor die Kamera treten muss. In der Regel werden solche KI-Avatare im Rahmen von Tools wie D-ID oder HeyGen auf deren Plattform mit Textinput generiert und dann als Video (MP4) heruntergeladen. Aber wie lassen sich solche Begleiter eigentlich 24/7 auf einer Webseite einbinden, um etwa einen stetigen Support zu gewährleisten?

Agents von D-ID

D-ID ist ein israelisches Startup mit Firmensitz in Tel Aviv und ist schon seit einiger Zeit erfolgreich mit KI-Avataren am Markt. Als User lassen sich auf der Plattform Instant-Avatare auswählen, die von D-ID vorgefertigt sind und auch ein Upload von eigenen Bildern für eine potenzielle Animation ist möglich. Solche Images können etwa über Bilder-KIs wie DALL-E3 erzeugt werden. Zusätzlich wird auch das Feature der DI-D Agents angeboten, die sich als Streaming Avatare (Live) über die eigene Homepage (WordPress…) z.B. in Footer oder Header in Frontend und Backend einbinden lassen.

Eine kurze Anleitung:

1) Account bei D-ID erstellen
2) Avatar auswählen. Instant oder Bild-Upload
3) Avatar einstellen bezüglich Sprache, Stil und Datengrundlage
4) Chat-Settings setzen wie etwa “Starter Question”
5) Embed-Code als JavaScript generieren. Vorab Domain eingeben
7) JavaScript in WordPress-Plugin einfügen. Vorab Plugin installieren
8) Mit KI-Avatar auf eigener Webseite live chatten, im Frontend & Backend. Auf Kosten achten!

Im oberen Screenshots ist die Auswahl eines Instant-Avatars zu sehen. Im Vorfeld links in der Navigation im Menü auf Agents klicken. Dieses Feature befindet sich übrigens noch in der Beta-Phase. Unten rechts geht es mit “Next” weiter, aber die Funktionen lassen sich auch oben in den Tabs ändern. Die Oberfläche ist sehr übersichtlich gehalten.

Nun gebt Ihr Eurem Avatar noch einen Namen, wählt die Sprache aus und die zugehörige Stimme. Ich habe mich für den Namen “Laila” entschieden, die Sprache “Deutsch” gewählt und als Stimme “Katja” eingestellt. Im Anschluss dann die passenden Dokumente wie PDFs hochladen, auf deren Basis der Avatar dann Informationen ausgibt. Wir kennen dies schon von den GPTs von OpenAI, wo User Uploads tätigen können, um den Custom Bot bezüglich einer themenspezifischen Kommunikation einzustellen.

Ganz unten im Feld Instruction lässt sich festlegen, welchen Kommunikationsstil Eurer Avatar pflegen soll. Eher freundlich gehoben oder voll und ganz auf den einfachen Support ausgerichtet. Da gibt es verschiedene Einstellungsmöglichkeiten, wie wir dies auch bei den Custom Instructions von ChatGPT kennen.

Zum Schluss noch die Chat-Settings tätigen, damit Euer Avatar auch die passende Begrüßung ausspricht. Hier lassen sich “Welcome Messages” und “Starter Questions” festlegen. Dann unten rechts auf “Save Changes” klicken und schon ist Euer erster Avatar auf der Grundlage von Künstlicher Intelligenz fertig und möchte auch gerne angesprochen werden.

Kommunikation mit Avatar: Achtet auf die Kosten!

Links in der Navigation bei D-ID habt Ihr neben den klassischen Credits im Rahmen von KI-Avataren auf der Grundlage eines fertigen Videos, auch die Übersicht der Free agent sessions, die ihr jederzeit mittels Upgrade erweitern könnt. Wie bei der API-Nutzung von Large Language Models wie ChatGPT oder Claude, fallen auch hier Kosten an, die sich am Output des Agents im Rahmen von 1 Session = 5 Messages orientieren. Ihr könnt links in der Navigation bei “Free agent sessions left” sehen, wie viele Sessions Ihr aufgebracht habt.

What are Agent sessions?
An Agent session includes up to 5 messages from an agent. The next message onwards counts as a new session. More information about Agents is available. Quelle: D-ID

Leider habe ich in den Einstellungen keine Möglichkeit gesehen, die Kosten hinsichtlich eines Limits zu deckeln, damit diese nicht ungewollt von einem externen User komplett aufgebraucht werden. Generell halte ich Kostenlimits im Rahmen von solchen KI-Anwendungen, bei denen de facto jeder Prompt Geld kostet, für mehr als sinnvoll bzw. essentiell. Zum Beispiel ein maximales Tages- oder auch Stundenlimit von Anfragen wäre interessant.

Technischer Hintergrund: Kommunikation von 3 Servern (möglich)

Kurz zum (möglichen) technischen Background: Auch die D-ID Agents dürften über ein großes Sprachmodell via Programmierschnittstelle (API) wie etwa GPT angeschlossen sein. Also liefe die gesamte Kommunikation in diesem Beispiel über Euren Server (Mein Server: Gunzenhausen/Bayern), den Server von D-ID in Tel Aviv (Israel) und den Server von OpenAI in San Francisco (USA). Es wären somit in Echtzeit 3 unterschiedliche Server in 3 unterschiedlichen Ländern involviert und das alles rasend schnell! Jedoch ist diese Annahme mit GPT als spekulativ zu betrachten und soll vor allem als Beispiel dienen!

Chat über D-ID mit Kollegen teilen

Ihr könnt ebenfalls mit Eurem erstellten KI-Avatar auch auf der Plattform von D-ID chatten oder z.B. einen Arbeitskollegen oder Freund zur Konversation mit dem “AI-Buddy” einladen. Die Kosten sind die gleichen, wie bei einem Webseiten-Embed. Nicht jeder verfügt über die Kenntnisse zum Aufbau und Betrieb einer Homepage und daher könnte dies eine gute Alternative sein, um auch erstmal zu testen, wie denn die virtuellen Assistenten so ankommen. Nutzt dafür oben rechts den Share-Button und den Link zum Teilen. Dann ist eurer AI Avatar öffentlich zugänglich.

Direkt in D-ID mit Avatar chatten. Dies kostet schon Credits!

Embed-Code generieren

Nun kommen wir zum Einbetten des Avatars auf Eure Webseite, damit dieser potenziell 24/7-Support geben kann oder Ähnliches. Geht dazu sauf die Agent-Übersicht und fahrt mit der Maus über den gewünschten Avatar rüber. Nun erscheinen rechts oben drei schwarze Punkte, dort draufklicken und im Anschluss auf Manage Embed. Es öffnet sich das Fenster, wie unten im Screenshot sichtbar. Tragt in das passende Feld Eure Domain in dieser Form “https://www.unidigital.news” ein und bestätigt dies über Add URL. Ganz automatisch wird danach das JavaScript unten drunter mit Ausrichtung auf die oben eingegebene Internetseite ausgegeben. Für andere Webseiten ist dies unbrauchbar. Übrigens verrät sich die Programmiersprache ganz am Ende des Codes mit der Bezeichnung </script>. Dieses JavaScript passt nur in Anwendungen, die dies auch umsetzen können. Wenn Ihr den Snippet in einen klassischen “WordPress-HTML-Block” kopiert, dann passiert einfach gar nichts. Hab es schon getestet. Warten hilft nicht 😉

Um den Code zu kopieren, nutzt gerne den Button Copy und schon ist das Script in der Zwischenablage und kann etwa mit dem Shortcut Strg + V (Tastatur) fix eingefügt werden. Aber natürlich auch ganz klassisch mit der Maus (Rechtsklick…).

Da der Code schließlich auch irgendwo hin muss, wenden wir uns nun der Nutzung eines WordPress-Plugins zu, um die Implementierung möglichst “nervenschonend” durchzuführen. Ja, über WordPress lässt sich JavaScript auch ohne ein Plugin, etwa über die functions.php und wp-config.php einbinden, aber davon rate ich in diesem Beitrag hier ab. Klar, für einen WP-Profi, der ganz genau arbeitet, ist dies natürlich kein Problem, aber ansonsten geht lieber den einfachen Weg. Falsche Eingaben in den oben genannten Dateien führen nämlich im Worst Case zum Ausfall der kompletten Webseite und dies kann sehr fix z.B. über eine simple Klammer zu viel/zu wenig passieren. I.d.R. kommt Ihr dann nur über einen FTP-Zugang, also direkt über Euren Server, mit zugehörigen Login-Daten (User, Passwort, Port-Nr.) wieder rein und habt über das Root-Verzeichnis Zugriff auf die einzelnen Dateien, die Ihr dann manuell wieder korrigieren könnt. Also bitte Vorsicht mit dieser Variante.

WordPress-Plugin “Simple Custom CSS und JS” nutzen

WordPress-Plugins dienen als kleine Helferlein, um bestimmte Aufgaben auch ohne das manuelle Coding seitens eines Administrators durchführen zu können. Das Plugin intern im Backend suchen, installieren und aktivieren oder etwa via wordpress.org herunterladen und direkt auf der WordPress-Seite wieder hochladen und dort dann aktivieren. Dies sind immer die Vorgänge im Umgang mit solchen Erweiterungen, von denen es in den WordPress-Welten zig Tausende mit zum Teil mehreren Millionen Installationen pro Plugin gibt.

Im Folgenden wird das Plugin Simple Custom CCS and JS verwendet. Der obere Screenshot zeigt die Unterseite https://wordpress.org/plugins/custom-css-js, wo Ihr das Programm kostenfrei downloaden könnt. Die interne Suche im Backend ist aber einfacher und auch zu empfehlen. Links in der Navigation auf “Plugins” und “Neue Plugins hinzufügen” klicken und dort dann die Bezeichnung der Erweiterung eingeben. Unser Plugin kommt übrigens auf über 600 000 Installationen, was stets ein gutes Zeichen ist. Richtet Euch bei der Auswahl generell an dieser Kennziffer, da lässt sich generell nicht viel falsch machen. Nachdem das Plugin installiert und auch aktiviert wurde, taucht links in der Navigation der Reiter “Simple Custom….” auf und im Anschluss wird dann JavaScript hinzufügen ausgewählt.

Achtet darauf und wählt nicht etwa CSS aus, da sonst gar nichts passiert. Nun erscheint wie im oberen Screenshot ein neues Fenster mit Titel und Feld zum Eintragen des Codes. Ich habe den Titel “Agent D-ID” gewählt und dann den Snippet wie oben beschrieben einfach per Copy & Paste eingefügt. Rechts in der Navi lässt sich u.a. noch festlegen, wo der Avatar auftauchen soll, also im Footer (unten) oder Header (oben). Den Vorgang dann immer über den Button rechts “Aktualisieren” bestätigen und schon erscheint der Avatar auf Eurer Homepage und ist bereit für das erste Gespräch.

Im oberen Screenshot ist der KI-Avatar rechts unten sichtbar und kann per Klick größer gemacht werden. Nun taucht auch das Feld für die Nachrichten auf, in das die Prompts eingetragen werden. Mit Enter bestätigen und dan beginnt nach kurzem “überlegen” die Konversation mit dem AI-Support. Der KI-Buddy begleitet Euch nun über Eure gesamte Webseite hinweg, also beim Hoch- und Runterscrollen und kann jederzeit fix angesprochen werden.

Avatar im Frontend & Backend

Taucht der Avatar ganz normal für alle User sichtbar auf der Homepage auf, dann spricht man vom Frontend. So kann jeder Nutzer mit der Künstlichen Intelligenz kommunizieren, wodurch auch jeder potenziell über die eigenen Eingaben Kosten verursachtt. Im unteren Screenshot erscheint also der KI-Avatar “Laila” im Frontend der Webseite.

Aber über das Plugin “Simple Custom CSS & JS” lässt sich rechts in der Navigation auch festlegen, dass dieser ausschließlich im Backend auftaucht, um z.B. ganz gezielt bei der Erstellung einer Homepage zu unterstützen. Nur der Administrator sieht den “KI-Support” und steht während der Arbeit etwa im Rahmen des Webdesigns in stetigem Austausch. Natürlich muss die Datengrundlage über D-ID dementsprechend angepasst werden, also dahingehend, dass z.B. der Avatar mit Designvorlagen und/oder zugehörigen Codes “gefüttert” wird und so bei Euch im WordPress-Backend als ““Design-Experte” auftreten und fortan themenspezifisch beraten kann. Eventuell ließen sich so einfache Fehler vermeiden oder es werden kreative Prozesse effizienter angestoßen. Es gäbe vielfältige Möglichkeiten für den Einsatz. Unten rechts in der Abbildung taucht der KI-Avatar im Backend-Bereich auf.

Fazit: KI & Webentwicklung “rockt”!

Aus meiner Sicht lohnt es sich definitiv, sich ganz allgemein mit KI-Avataren als Video-Download (MP4), aber auch ganz speziell als Webseiten-Embed (24/7) via JavaScript zu beschäftigen. Es gäbe zahlreiche Einsatzmöglichkeiten im Rahmen des Supports, etwa für Studierende oder generell Hochschulbeteiligte. Der 24/7-Avatar Syntea der IU Hochschule gibt schon mal eindrucksvoll vor, in welche Richtung sich diese Technologie langfristig bewegen könnte.

Zudem zeigt wieder einmal WordPress seine Stärken, nun auch im Umgang mit Künstlicher Intelligenz bzw. der Einbindung geeigneter Tools. Hier trifft also Webentwicklung auf KI und das macht mehr als Sinn, da nun jeder User auf der eigenen Homepage, ohne das Schreiben einer einzigen Zeile Code, einen KI-Avatar anbieten kann und dies sehr zeiteffizient. Übrigens ist WordPress mit Abstand das beliebteste Custom-Management-System mit einem weltweiten Marktanteil von über 40 % unter allen Homepages überhaupt. WordPress-Skills werden also immer wichtiger, da in Zukunft auch der Kern, also WordPress Core zunehmend auf Künstliche Intelligenz umgestellt wird.