Aktuelles

Fresh, Fast und Forwardgerichtet

Hier berichten wir über unseren Unternehmensalltag, neue Entwicklungen im World Wide Web und den Nerdkram, der uns alle begeistert. 

Blogs

Erstellung von Inhalten mittels generativer KI

Vorstellung des Liferay OpenAI Content Wizards

Image by Freepik

Wir leben in einer aufregenden Zeit, in der die künstliche Intelligenz schon viele Aufgaben erleichtert.  So können Sie mittels generativer KI auch die Content-Erstellung erheblich vereinfachen. Ob Blog-Artikel, Produkt-Datensätze, FAQ- oder Foreneinträge – vieles ist mittlerweile unkompliziert durch Knopfdruck zu generieren und erleichtert ebenso den Alltag von Redakteuren wie Entwicklern. Man könnte denken, dass die Integration von künstlicher Intelligenz sehr komplex oder kostspielig ist. Das ist aber nicht zwingend der Fall.

In diesem Beitrag wollen wir aufzeigen, wie man den Liferay OpenAI Content Wizard im Handumdrehen in Projekte einbindet und damit verschiedenste Arten von Inhalten generiert – schnell, unkompliziert und ohne großen Aufwand. Der Liferay OpenAI Content Wizard, der über die headless-API in das System integriert wird, ist kostenlos als Download auf GitLab verfügbar.

So richten Sie den Open AI Content Wizard ein

Das Setup ist denkbar einfach:

Schritt 1: Node.js Installation

Sollte Node.js nochnicht installiert sein, so können Sie dies hier (https://nodejs.org/en/) tun.

Schritt 2: GitLab Repository klonen

https://github.com/weskempa-liferay/liferay-openai-demo-wizard

Schritt 3: In den Projekt-Ordner wechseln

cd liferay-openai-demo-wizard

Schritt 4: Requirements installieren

npm install

Schritt 5: Kopie der Umgebungsvariablen erstellen

cp .env.example .env

Schritt 6: Konfiguration vornehmen

API-Schlüssel zur .env-Datei hinzufügen und Server-Informationen eintragen

Schritt 7: Anwendung ausführen

npm run dev

Schritt 8: Deployment

Wenn der OpenAI Content Wizard lokal läuft, können Sie die erforderlichen Umgebungsvariablen setzen und Liferay anbinden.

OPENAI_API_KEY= <API-Schlüssel>
LIFERAY_PATH= <Server-URL, HTTP: oder HTTPS: z.B. http://localhost:8080, http://127.0.0.1:8080 oder https://webserver-lctexample-prd.lfr.cloud>
LIFERAY_ADMIN_EMAIL_ADDRESS= <Admin-Email>
LIFERAY_ADMIN_PASSWORD= <Admin-Passwort>

Sobald der Liferay OpenAI Content Wizard eingerichtet ist, sollte das Ganze auf dem Bildschirm so aussehen. Nun können Sie zwischen 16 verschiedenen Tasks, die mit Hilfe von OpenAI automatisiert wurden, wählen.


 

Die Macht der Künstlichen Intelligenz

Bevor wir uns die drei spannendsten Anwendungsfälle etwas genauer ansehen, wollen wir noch einmal von unseren persönlichen Erfahrungen mit generativer KI berichten und aufzeigen was künstliche Intelligenz alles leisten kann. Immer noch denken viele, dass mit künstlicher Intelligenz vor allem Blog-Artikel schnell generiert werden können. Dabei ist das Anwendungsgebiet so viel größer. Bei der Entwicklung unseres Portals JobMatchers haben wir die Erfahrung gemacht, dass sich mithilfe von generativer KI Inhalte und Daten, die für eine spezielle Ansicht optimiert sind, auch leicht restrukturieren oder in eine andere Form bringen lassen, die für eine andere Ansicht wiederum besser geeignet ist.

Ebenso können mit generativer künstlicher Intelligenz Inhalte für verschiedene Zielgruppen aufbereitet werden. Dies machen wir uns aktuell bspw. zunutze in Projekten, die darauf abzielen, die Barrierefreiheit von Webseiten zu verbessern. Hier herrscht aktuell ein großer Zeitdruck: Auch wenn noch nicht alle Unternehmen die neue Gesetzgebung im Blick haben, ist Barrierefreiheit mit dem Inkrafttreten des Barrierefreiheitstärkungsgesetzes  ab dem 28. Juni 2025 verpflichtend zu garantieren. So können die Texte einer Webseite, die für ein nicht beeinträchtigtes Publikum gedacht sind, durch den Einsatz von generativer künstlicher Intelligenz problemlos umformuliert werden, d.h. in eine leichte Sprache “übersetzt" werden, die für Menschen mit kognitiven Einschränkungen wesentlich leichter zugänglich ist. Gerade bei großen Webprojekten mit mehreren Tausend Seiten ist dies sehr hilfreich und wäre redaktionell nur sehr aufwändig zu erreichen. Genauso einfach können aber Inhalte auch klassisch in eine andere Sprache übersetzt werden. So kann die generative KI ebenfalls bei der Internationalisierung behilflich sein.

Doch was genau kann der Liferay OpenAI Content Wizard? Wir wollen nun drei Beispiele geben, wie das Tool die alltägliche Arbeit erleichtern kann.

Beispiel 1: Produktdaten generieren mittels künstlicher Intelligenz

Oft benötigen wir zur Entwicklung eines Onlineshops einen Produktdatensatz für Testzwecke und nicht immer sind Bestanddaten gegeben. Bei Startups fehlt dieser meist komplett und bei Unternehmen mit einem bestehenden Onlineshop sind die entsprechenden Daten nicht immer rechtzeitig für uns als Entwickler verfügbar oder für Testzwecke manchmal schlicht zu umfangreich. Mit Hilfe des Content Wizard und eines simplen OpenAI-Prompts kann ein solcher Datensatz mit allen gewünschten Produktdetails und Bildern im JSON-Format spontan erstellt werden. Hierzu müssen Sie die Produktwelt spezifizieren (Commerce Theme), ein paar Beispielbegriffe (Vocabulary Name) zur Feinabstimmung vorgeben, die Anzahl der Produktkategorien und Produkte pro Kategorie festlegen und zur Generierung der Produktbilder das AI-Modell (DALL·E-2 oder DALL·E-3) und den Stil (Image Style) bestimmen.


 

Bei Eingabe von "Portable Consumer Electronics" und "Tablet, Smartphone, Headphones" wird u.a. das folgende JSON zurück geliefert: 

[ 
      {
        "productName": "Tablet Pro Ultra",
        "price": "€899.99",
        "shortDescription": "The Tablet Pro Ultra is the pinnacle of portable technology, blending sleek design with uncompromising performance. Engineered for those who demand the best, it sets a new standard for tablets."
      },
      {
        "productName": "Tablet XT400",
        "price": "€149.99",
        "shortDescription": "The Tablet XT400 is a sleek and powerful device designed to enhance your mobile computing experience. With its lightweight and compact design, it's the perfect companion for professionals, students, and digital enthusiasts alike."
      },
      {
        "productName": "Flip Pad Mini",
        "price": "€459.99",
        "shortDescription": "The Flip Pad Mini is the ultimate companion for those seeking convenience and functionality in a compact package. Designed to fit seamlessly into your lifestyle, this sleek and stylish device offers a range of features to enhance your productivity and entertainment on the go."
      }
]

Natürlich sind alle Produktdaten frei erfunden, aber das ist nicht schlimm, denn diese sollen nur für Testzwecken herhalten. Es ist entscheidend, dass die zurückgegebene JSON-Struktur jedes Mal dieselbe ist, um die Daten ordnungsgemäß speichern zu können und etwaige Entwicklungsfehler zu erkennen. Um sicherzustellen, dass das zurückgegebene Ergebnis genau die richtige JSON-Struktur hat, bietet OpenAI "function calling" an. Bei einem API-Aufruf können Sie die Funktionen beschreiben und das Modell selbst entscheiden lassen, ob ein JSON-Objekt mit Argumenten zur Ausführung einer oder mehrerer Funktionen ausgegeben werden soll. Dabei ruft die Chat Completions API nicht die Funktion direkt auf; stattdessen generiert das Modell ein JSON, das dazu verwendet werden kann, um die Funktion im eigenen Code aufzurufen.

In unserem Fall mussten wir das Schema definieren, um zu beschreiben, was zurückgegeben werden muss. Im Folgenden finden Sie ein Beispiel für ein Produktschema, das in diesem Fall verwendet wird:

const productSchema = {
  "parameters": {
    "products": {
      "description": "An array of products within the suggested category",
      "items": {
        "properties": {
          "price": {
            "description": "Cost of this product in EUR",
            "type": "string"
          },
          "productName": {
            "description": "The name of a product that exists in the given category",
            "type": "string"
          },
          "shortDescription": {
            "description": "A short description of this product",
            "type": "string"
          }
        },
        "type": "object"
      },
      "required": [
        "productName",
        "shortDescription",
        "price"
      ],
      "type": "array"
    }
  },
  "type": "object"
}

Sobald die Daten von OpenAI zurückgegeben werden, können wir diese per API in Liferay hinterlegen. So sind Beispielprodukte schnell erstellt und wir sparen eine Menge Zeit. Das manuelle Einpflegen von Beispieldaten ist ungleich aufwändiger, vor allem wenn man auch die Produktbilder heraussuchen muss. An eine generative künstliche Intelligenz kann man diese Aufgabe hingegen abgeben und der Prozess der Beispieldatengenerierung dauert dann nur etwas länger, ca. 10 Sekunden pro Bild. 

Übrigens: Wer Bilder unabhängig von einem Produkt und dessen Eigenschaften erstellen will, z.B. zur Illustration eines Blogposts, kann dies auch unabhängig davon tun. Der Liferay OpenAI Content Wizard bietet hierzu eine "Images only"-Funktion. 

Beispiel 2: Bildgenerierung mittels künstlicher Intelligenz

Eine wirklich tolle Sache ist es, Bilder auf Basis einer Beschreibung zu generieren. Vorbei sind die Zeiten, in denen man lange nach einem passenden Foto für einen Blogbeitrag suchen und mitunter eine teure Lizenz erwerben musste. Nun ist das spontane erstellen von Bildern genauso simpel, wie die Verwendung von OpenAI zur Textgenerierung – liefern Sie einfach eine Beschreibung dessen, was Sie sehen möchten und wählen Sie den Bildgenerator aus, der verwendet werden soll. Von OpenAI werden aktuell zwei Modelle bereitgestellt. DALL·E-3 ist mit 0,04 Cent pro generiertem Bild etwas teurer, während DALL·E-2 mit 0,02 Cent zu Buche schlägt. Die Kosten halten sich also auf jeden Fall in Grenzen.

Bei der Verwendung von DALL·E-3 ist zu erkennen, dass sich die Darstellung von Personen erheblich verbessert hat. Komisch ineinander verwachsene Extremitäten oder bspw. Hände mit einer falschen Anzahl von Fingern treten wesentlich seltener auf und so ist bei genauerem Hinsehen nicht mehr sofort erkennbar, ob es sich um ein KI-generiertes Bild handelt. Bei der zusätzlichen Anwendung von bestimmten Filtern kann man kleinere Fehler noch besser verschleiern und zudem eine gewisse Kontinuität, d.h. eine einheitliche Bildsprache, gewährleisten. Die Möglichkeiten sind hier nahezu unbegrenzt. Als besonders geeignet erscheinen Zusätze wie "Vektorgrafik", "Fotorealismus", "Flat Design", "Pixelkunst" oder "Digitaler Impressionismus".


 

Beispiel 3: Objekte und Schemata erstellen mittels KI

Hinter dem Menüpunkt Objects verbirgt sich ein Low-Code-Ansatz zum Generieren von beliebigen Datenstrukturen. Auch dabei kann OpenAI helfen.  

Über die Benutzeroberfläche kann der erwünschte Datensatz je nach Bedarf spezifiziert werden. Der Nutzer beschreibt mit Worten zunächst (1) die Rolle, die OpenAI einnehmen soll z.B. "ein Assistent, der dafür verantwortlich ist eine Liste mit Daten zusammenzustellen" und definiert dann, (2) was genau gesucht wird im Feld "specific request to OpenAI". Z.B. eine Liste mit 30 klassischen Sportwagen, die schneller als 200 Km/h fahren können. Anschließend sind (3) der Liferay API-Endpunkt festzulegen, über den der Datensatz zu befüllen ist sowie (4) die Listenfelder und deren Format zu bestimmen, z.B. Hochgeschwindigkeit, PS und Gewicht. Alles ist ziemlich selbsterklärend.

Klickt man dann auf den Button "Generate Object Data" liefert der Liferay OpenAI Content Wizard folgende Liste zurück mit Custom Liferay Objects:

  1. Ferrari 250 GTO - 296 PS, 280 km/h, 880 kg

  2. Lamborghini Miura - 350 PS, 275 km/h, 1,200 kg

  3. Shelby Cobra 427 - 425 PS, 265 km/h, 1,150 kg

  4. Porsche 911 Carrera RS 2.7 - 210 PS, 245 km/h, 1,075 kg

  5. Aston Martin DB5 - 282 PS, 230 km/h, 1,430 kg

  6. Chevrolet Corvette Stingray C2 - 435 PS, 255 km/h, 1,450 kg

  7. Jaguar E-Type - 265 PS, 240 km/h, 1,200 kg

  8. Ford GT40 - 335 PS, 335 km/h, 1,130 kg

  9. BMW 3.0 CSL - 206 PS, 220 km/h, 1,220 kg

  10. Mercedes-Benz 300SL - 215 PS, 260 km/h, 1,295 kg

  11. Ferrari Daytona - 352 PS, 280 km/h, 1,250 kg

  12. Lamborghini Countach - 375 PS, 293 km/h, 1,490 kg

  13. Porsche 959 - 450 PS, 317 km/h, 1,450 kg

  14. Aston Martin DB4 GT Zagato - 314 PS, 250 km/h, 1,180 kg

  15. Chevrolet Camaro Z28 - 360 PS, 240 km/h, 1,500 kg

  16. Jaguar XKSS - 262 PS, 260 km/h, 950 kg

  17. Ford Mustang Shelby GT500 - 335 PS, 240 km/h, 1,400 kg

  18. BMW M1 - 277 PS, 262 km/h, 1,300 kg

  19. Mercedes-Benz 300SLR - 310 PS, 285 km/h, 1,200 kg

  20. Alfa Romeo Giulia TZ - 157 PS, 220 km/h, 750 kg

  21. Ferrari 365 GTB/4 "Daytona" - 352 PS, 280 km/h, 1,470 kg

  22. Lamborghini Espada - 325 PS, 245 km/h, 1,600 kg

  23. Porsche 904 Carrera GTS - 180 PS, 258 km/h, 660 kg

  24. Aston Martin V8 Vantage - 375 PS, 270 km/h, 1,750 kg

  25. Chevrolet Chevelle SS 454 - 450 PS, 220 km/h, 1,900 kg

  26. Jaguar XJ13 - 502 PS, 274 km/h, 998 kg

  27. Ford Capri RS3100 - 148 PS, 215 km/h, 1,025 kg

  28. BMW 507 - 150 PS, 220 km/h, 1,330 kg

  29. Mercedes-Benz 190SL - 105 PS, 172 km/h, 1,220 kg

  30. Alfa Romeo Montreal - 200 PS, 220 km/h, 1,470 kg


 


Abonnieren Sie uns

We spread the word!

Verpassen Sie keine Updates mehr! Lesen Sie unseren Blog auf Medium. Dort können Sie ebenfalls in unseren Posts stöbern und bleiben so immer auf dem neuesten Stand.

pic

Medium

Medium ist die führende Publishing-Plattform
im Internet und mit Apps für iOS und Android
auch komfortabel auf dem Telefon lesbar.

Medium

Medium ist die führende Publishing-Plattform
im Internet und mit Apps für iOS und Android
auch komfortabel auf dem Telefon lesbar.