Praktisches Beispiel für H5P und KI

Panorama-Tour mit H5P und KI gestalten


Es ist schon viel über H5P und erst recht über KI geschrieben und veröffentlicht worden. Heute möchten wir Ihnen das Zusammenspiel von H5P und KI an Hand einer 360°-Panorama-Tour vorstellen und das Zustandekommen erläutern. Für eine solche virtuelle Tour braucht man 360°-Panorama-Bilder und eine Umgebung, die Panorama-Touren möglich macht. Beides ist frei zugänglich. Damit kann man dann Webanwendungen wie diese erstellen. Hier muss der Nutzer durch zehn Welten wandern und in jeder dieser Welten eine Aufgabe zu Waldtieren lösen, um zu wissen, wie es weitergeht. Probieren Sie es gerne aus:

Mit dem online-Tool veröffentlicht: https://app.lumi.education/run/UQxs8f

Das selbe Beispiel offline exportiert und auf einen Webspace hochgeladen:

https://tiburski.de/Waldtiere_Panorama-Tour/Waldtiere-eineWanderungdurchdenWaldderWunder.html

Wie dieses Beispiel entstanden ist soll nun erklärt werden!


1. Das Hauptwerkzeug für die Panorama-Tour, welches wir für dieses Beispiele verwenden – ist der Lumi-H5P-Editor. Den gibt es als online-Tool [ https://app.lumi.education/ ] und auch als Programm zum Download.

Als H5P-Editor enthält Lumi auch das H5P-Werkzeug virtuelle Tour (360°) erstellen. Bevor es damit weitergeht braucht man jedoch ebendiese 360°-Panorama-Bilder. Auch dafür heben wir in unserm Blog bereits mehrere Wege erläutert, nicht zuletzt durch den Export von Panoramen aus CoSpaces heraus. Inzwischen gibt es – Dank KI – eine viele einfachere Lösung: Man lässt eine Künstliche Intelligenz (KI) diese Bilder generieren.

2. Das online-Tool SkyBox von BlockadeLabs: https://skybox.blockadelabs.com

Dieses Tool erlaubt die Generation von 360°-Panoramabildern durch Textbeschreibung. Dabei kann man sogar den gewünschten Stil auswählen und dann auch noch fertige Motive zu remixen:

Das kann man solange wiederholen, bis einem das Ergebnis gefällt. Das Ergebnis kann das gespeichert werden:

Mit diesem Tool habe ich 22 Panoramas erzeugt:

Erst eine Startwelt, dann zehn Wunder-Wald-Welten im Dream-Style, danach zehn Höllen-Welten (bizzar) und zum Schluss eine Ende-Welt für den Abspann.

Leider werden die Panoramen manchmal im relativ unbekannten Forma jfif heruntergeladen. Dann muss man die Dateien noch konvertieren. Da es aber sowieso ratsam ist, die Dateigröße herunterzurechnen kann das gleich in einem Ritt erledigt werden. Dazu verwenden wir die OpenSource-Freeware IrfanView. Mit diesem Programm können per Batch-Konvertierung gleich alle heruntergeladenen Bilder mit einem Rutsch sowohl konvertiert (Ausgabeformat jpg) und komprimiert (Bildgröße 4000x2000px) werden:

Batch-Konvertierung öffnen, dann …

die heruntergeladenen Dateien hinzufügen und …

die Einstellungen vornehmen …

Somit hat man alle Panorama-Bilder im geeigneten Format und einer angemessenen Datei-Größe vorliegen.

Als nächstes haben wir Bilder von zehn Waldtieren im Wald erzeugt. Dazu haben wir die Text-2-Picture-KI von Canva verwendet:

Im Gegensatz zu den meisten KI-Webseiten hat man bei Canva kein Credit-System und kann somit beliebig viele KI-Bilder erzeugen. Damit haben wir alles, was wir brauchen, um richtig loszulegen.

3. Die Panoramatour erstellen mit Lumi

Nachdem man in Lumi – egal ob on- oder offline – die virtuelle Tour als Werkzeug ausgewählt hat kann man loslegen, die Szenen zu erstellen …

Wir haben gleich alle 22 Szenen mit den Panorama-Bildern erstellt und sinnvolle Namen verteilt: Start, Wald 1-10, Hell 1-10 und Ende.

Jetzt kommt ein wenig Fleiß-Arbeit, die aber von Szene zu Szene einfacher geht!

Es muss jetzt für jede Szene der Inhalt eingefügt werden. Die Start-Szene erhält die Anleitung (Text-Werkzeug), Hilfe (Text-Werkzeug) und den Start-Link. Der Link führt zum Wald 1.

Die Szene Wald 1 bekommt ein Tier-Bild (Bild-Werkzeug) und eine Quiz-Frage (Single-Choise-Fragen) sowie 6 Portale (Zur Szene gehen-Werkzeug). Fünf der Portale werden mit Hell 1 verlinkt und nur ein Portal wird mit Wald 2 verlinkt. Welches Portal zu Wald 2 führt muss bei der richtigen Lösung der Quiz-Frage mitgeteilt werden.

.

Die Szene Hell 1 bekommt nur einen Kommentar (Text-Werkzeug), dass man hier falsch ist, und ein Portal Zurück (Zur Szene gehen-Werkzeug).

Das setzt man nun für die Szenen Wald 2-10 und Hell 2-10 so fort!

Die Ende-Szene kann jetzt beliebige Belohnungen enthalten – im einfachsten Falle einen positiven Kommentar (Text-Werkzeug) oder ev. einen Belohnung-Link etc.

Wir habe in der Ende-Szene auch noch die Credits (Text-Werkzeug) mit eingebaut, in der die Software, die wir verwendet haben mit aufgeführt sind. Somit sind die Informationen zum Urheberrecht einsehbar!

Auch die Möglichkeit zum Neustart (Zur Szene gehen-Werkzeug) kann man hier mit Einbauen…


Wir wünschen Ihnen nun viel Spaß beim Testen des Beispiels und erst recht viel Spaß und Erfolg bei der Umsetzung eigener Projekte zu H5P und KI!

Fragen und Hinweise – wie immer – gern an das Team des MPZ LKL in Borna.