Mit StoryPixAI war es mein Ziel, eine interaktive Webanwendung zu erstellen, die es den Nutzern ermöglicht, Kindergeschichten zu generieren, die durch Bilder ergänzt werden, die von Modellen der künstlichen Intelligenz erstellt wurden. Um dies zu realisieren, habe ich mehrere AWS-Dienste wie Lambda, API Gateway, DynamoDB, S3 und Cognito für die Authentifizierung verwendet. Der Infrastrukturcode wird mit Terraform verwaltet und die Bereitstellung ist über GitLab CI automatisiert. In diesem Beitrag enthülle ich die Hintergründe dieses spannenden Projekts, von technologischen Entscheidungen bis hin zu den Herausforderungen, denen ich begegnet bin.

Einleitung

Als erfahrener Cloud-Infrastruktur- und DevOps-Architekt war ich immer von neuen Technologien und ihrem Potenzial, unseren Alltag zu verändern, fasziniert. Das Aufkommen der generativen KI weckte eine wachsende Neugier in mir, und ich verspürte den Drang, in dieses aufstrebende Universum einzutauchen.

So entstand StoryPixAI, ein persönliches Projekt, das es mir ermöglichte, die grenzenlosen Möglichkeiten der KI zu erkunden, um personalisierte Geschichten und magische Illustrationen für Kinder zu erstellen. Dieses Projekt war für mich die Gelegenheit, in die Rolle eines Full-Stack-Entwicklers, eines Prompt Engineers, eines Product Owners und sogar eines UX/UI-Designers zu schlüpfen und meine Leidenschaft für Technologie mit meinen Lieben zu teilen.

In diesem Blogbeitrag werde ich meine technologischen Entscheidungen und die bewältigten Herausforderungen während dieses aufregenden Abenteuers teilen.

Aber zuerst ein kleiner Vorgeschmack!

Um Ihnen einen Eindruck von den Möglichkeiten von StoryPixAI zu geben, hier einige automatisch generierte Geschichten in mehreren Sprachen.
Jede Geschichte ist mit Illustrationen versehen, die das Erzählen für Kinder noch fesselnder machen:

KI im Dienste der Kreativität: Ein Experimentierweg

Mein Abenteuer mit StoryPixAI begann mit einem einfachen Proof of Concept (PoC): eine Lambda-Funktion, die mit OpenAI interagierte, um Text zu generieren, und mit DALL-E, um Bilder zu erstellen. Dieser erste Erfolg ermutigte mich, weiter zu gehen und andere KI-Modelle über Bedrock von AWS zu erkunden.

GPT-4 und GPT-4-o: Agile Erzähler

Von Beginn des Projekts an war GPT-4 von OpenAI die naheliegende Wahl für die Textgenerierung. Seine Fähigkeit, die Nuancen der natürlichen Sprache zu verstehen und kohärente sowie kreative Erzählungen zu erstellen, ermöglichte es mir, fesselnde Geschichten zu schreiben, die auf das Alter und die Interessen der Kinder abgestimmt sind. Ich konnte mit verschiedenen Schreibstilen experimentieren, von Märchen über Weltraumabenteuer bis hin zu Tiergeschichten und fantastischen Erzählungen.

Als GPT-4-0 eingeführt wurde, integrierte ich dieses neue Modell schnell in StoryPixAI. Ich war beeindruckt von der gesteigerten Generationsgeschwindigkeit, die die Wartezeit für die Generierung erheblich verkürzte, und von der deutlichen Verbesserung der Qualität der generierten Geschichten, die noch flüssiger, kohärenter und einfallsreicher waren. GPT-4-0 ist somit zu einem wichtigen Vorteil für StoryPixAI geworden und bietet eine schnellere und angenehmere Benutzererfahrung.

DALL-E 3: der Standard-Illustrator

Während die Textgenerierungsmodelle zufriedenstellende Ergebnisse lieferten, erwies sich die Wahl des Bildgenerierungstools als entscheidender. Nach vielen Versuchen setzte sich DALL-E 3 als das Referenzmodell für StoryPixAI durch. Seine Fähigkeit, originelle, detaillierte und perfekt auf die von GPT-4 generierten Geschichten abgestimmte Illustrationen zu erstellen, war ein entscheidender Faktor für den Erfolg des Projekts.

Bedrock von AWS: das Tor zur Experimentation

Um mich nicht auf OpenAI zu beschränken, habe ich Bedrock von AWS genutzt, um leicht andere generative KI-Modelle in StoryPixAI zu integrieren. Diese Plattform ermöglichte es mir, Claude von Anthropic und Mistral für die Textgenerierung und Stable Diffusion für die Bildgenerierung zu testen.

Auch wenn diese Modelle interessante Ergebnisse lieferten, entschied ich mich schließlich, mich auf GPT-4 und GPT-4-0 wegen ihrer Geschwindigkeit und der Qualität der Textgenerierung und auf DALL-E 3 wegen seiner Fähigkeit zu konzentrieren, perfekt auf die Geschichten abgestimmte Illustrationen zu erstellen. Es ist wichtig zu beachten, dass die Eingabeaufforderung zur Bildgenerierung zum großen Teil vom Textmodell selbst erstellt wird, was eine Kohärenz zwischen Erzählung und Illustration gewährleistet.

Die Herausforderung der asynchronen API und DynamoDB

Nachdem das PoC validiert war, begann ich mit der Erstellung einer API, um StoryPixAI über eine Webschnittstelle zugänglich zu machen. An diesem Punkt stieß ich auf meine erste große Herausforderung: die Timeout-Beschränkung von API Gateway. Um diese Einschränkung zu umgehen und die Generierung längerer und komplexerer Geschichten zu ermöglichen, musste ich eine asynchrone Architektur einführen.

Amazon DynamoDB kam dabei ins Spiel. Ich nutzte diese NoSQL-Datenbank, um die laufenden Aufträge zur Geschichtengenerierung sowie deren Ergebnisse nach Abschluss zu speichern. Dank dieses Ansatzes konnte die API sofort eine Antwort an den Benutzer zurücksenden, der den Status seiner Anfrage prüfen und die generierte Geschichte abrufen konnte, sobald sie fertig war.

CORS und die Benutzeroberfläche: Hindernisse überwinden

Die Implementierung der Webschnittstelle stellte ebenfalls Herausforderungen dar. Ich musste mich mit den Feinheiten von CORS (Cross-Origin Resource Sharing) vertraut machen, um meiner Frontend-Anwendung die Kommunikation mit der API zu ermöglichen. Ich widmete auch Zeit der Verbesserung der Benutzererfahrung, indem ich Funktionen wie die Auswahl der KI-Modelle und Bildstile hinzufügte.

Das Prompting: eine Kunst, die es zu beherrschen gilt

Während der gesamten Entwicklung von StoryPixAI habe ich meine Fähigkeiten im Prompting verfeinert, der Kunst, die richtigen Anfragen zu stellen, um die KI-Modelle zu leiten. Ich lernte, meine Eingabeaufforderungen je nach den verwendeten Modellen, den Parametern der Geschichte und den Erwartungen der Benutzer anzupassen. Dieser Schritt war entscheidend, um qualitativ hochwertige Ergebnisse zu erzielen und eine zufriedenstellende Benutzererfahrung sicherzustellen.

Eine robuste und automatisierte Infrastruktur auf AWS

StoryPixAI basiert auf einer serverlosen Infrastruktur, die auf Amazon Web Services (AWS) gehostet wird und die ideale Kombination aus Flexibilität, Skalierbarkeit und Kostenoptimierung bietet. Diese Architektur, die vollständig mit Terraform und GitLab CI/CD automatisiert ist, ermöglicht eine schnelle und zuverlässige Bereitstellung der Anwendung.

Die AWS-Dienste im Herzen von StoryPixAI

alt text

Die Architektur von StoryPixAI basiert auf den folgenden AWS-Diensten: * Amazon S3 (Simple Storage Service): Speicherung der statischen Dateien der Website (HTML, CSS, JavaScript) und der generierten Geschichten sowie deren zugehörigen Illustrationen.

  • Amazon CloudFront: Ein Content Delivery Network (CDN), das die Verteilung von StoryPixAI-Inhalten an Nutzer weltweit beschleunigt, indem es sie an geografisch nahegelegenen Standorten zwischenspeichert.
  • Amazon API Gateway: Das sichere Eingangstor der Anwendung. Es verwaltet Benutzeranfragen, authentifiziert sie über Amazon Cognito und leitet sie an die passenden Lambda-Funktionen weiter.
  • AWS Lambda: Serverlose Funktionen, die das Herzstück von StoryPixAI sind. Sie orchestrieren die Erstellung von Geschichten, die Bildgenerierung, das Management asynchroner Aufgaben und die Interaktion mit DynamoDB und anderen AWS-Diensten.
  • Amazon DynamoDB: Eine flexible und performante NoSQL-Datenbank, die wesentliche Informationen zum Betrieb der Anwendung speichert.
  • Amazon Cognito: Ein Dienst zur Verwaltung von Identitäten und Zugriffsrechten, der die Anwendung sichert, indem er Benutzern das Anmelden ermöglicht und deren Berechtigungen kontrolliert. Er stellt sicher, dass nur authentifizierte Benutzer auf die Funktionen zur Geschichtengenerierung zugreifen können.
  • Amazon Bedrock: Eine Plattform, die den Zugang und die Nutzung von generativen KI-Modellen verschiedener Anbieter wie Anthropic (Claude) und Stability AI (Stable Diffusion) vereinfacht. Bedrock ermöglicht es, diese Modelle einfach in die Anwendung zu integrieren, ohne deren zugrundeliegende Infrastruktur verwalten zu müssen.
  • Andere AWS-Dienste: StoryPixAI nutzt auch andere AWS-Dienste wie IAM (Identity and Access Management) zur feingranularen Verwaltung von Zugriffsrechten auf Ressourcen, CloudWatch zur Überwachung und Protokollierung (wichtig für Debugging und Leistungsanalyse) und Systems Manager Parameter Store (SSM Parameter Store) zur Speicherung sensibler Informationen wie API-Schlüssel, was die Sicherheit der Anwendung gewährleistet.

Terraform: Automatisierung für die Infrastruktur

Um diese komplexe Infrastruktur zu verwalten, habe ich mich für Terraform entschieden, ein Tool für Infrastructure as Code (IaC), das es ermöglicht, die Infrastruktur in deklarativem Code zu beschreiben. Mit Terraform konnte ich die Erstellung, Änderung und Zerstörung von AWS-Ressourcen automatisieren und so eine konsistente, reproduzierbare und leicht zu verwaltende Umgebung sicherstellen. Dies vereinfacht den Bereitstellungsprozess erheblich und reduziert das Risiko menschlicher Fehler.

GitLab CI/CD: Reibungslose und unkomplizierte Bereitstellungen

Um eine kontinuierliche und zuverlässige Bereitstellung von StoryPixAI zu gewährleisten, habe ich eine CI/CD-Pipeline (Continuous Integration / Continuous Deployment) auf GitLab eingerichtet. Diese Pipeline automatisiert die Tests, den Aufbau und die Bereitstellung der Anwendung bei jeder Änderung des Quellcodes, wodurch Fehler schnell erkannt und behoben werden können und neue Funktionen sicher bereitgestellt werden. Dieser Ansatz stellt sicher, dass die Anwendung immer auf dem neuesten Stand ist und minimiert Ausfallzeiten.

Diese Kombination aus AWS, Terraform und GitLab CI/CD hat mir ermöglicht, eine robuste, skalierbare und leicht zu wartende Infrastruktur zu schaffen, sodass ich mehr Zeit habe, mich auf die kreativen Aspekte des Projekts und die Verbesserung der Benutzererfahrung zu konzentrieren.

Gesamte Architektur des Projekts StoryPixAI

Bevor wir in den Code eintauchen, hier ein Überblick über die Architektur der Anwendung:

  1. Statische Website auf S3: Eine statische Website, die auf einem S3-Bucket gehostet wird und über CloudFront für eine globale Verteilung zugänglich ist.
  2. API Gateway: Stellt Endpunkte für die Geschichtengenerierung und Statusüberprüfung bereit.
  3. Lambda-Funktionen:
    • StoryPixAI.py: Generiert die Geschichte und die zugehörigen Bilder.
    • status_checker.py: Überprüft den Status der Generierung in DynamoDB.
  4. DynamoDB: Speichert den Status der Generierungsaufgaben.
  5. S3 : Speichert die generierten Bilder und die resultierenden HTML-Seiten.
  6. Cognito : Verwaltet die Benutzerauthentifizierung, um die API abzusichern.

Lambda-Funktion StoryPixAI.py

Allgemeiner Überblick

Die Funktion StoryPixAI.py ist das Herzstück der Anwendung. Sie ist verantwortlich für:

  • Generieren einer Geschichte basierend auf einer Benutzereingabe.
  • Erstellen detaillierter Anweisungen zur Anleitung des KI-Modells bei der Geschichtenerstellung.
  • Extrahieren von Zusammenfassungen für jede Szene oder Schlüsselereignis der Geschichte.
  • Generieren von Bildern, die diesen Zusammenfassungen entsprechen.
  • Kombinieren von Text und Bildern zu einer HTML-Seite.
  • Speichern des Ergebnisses in S3 und Aktualisieren des Status in DynamoDB.

Code-Aufschlüsselung

Importe und Initiale Konfiguration

import json
import boto3
import base64
import os
import re
from datetime import datetime
from openai import OpenAI
import logging

# Configuration du logger
logger = logging.getLogger()
logger.setLevel(logging.INFO)

generate_images = False
region_name = os.getenv("AWS_REGION", "us-east-1")

# Création d'un client SSM
ssm = boto3.client("ssm", region_name=region_name)

# Obtention de la clé API OpenAI depuis le SSM
parameter = ssm.get_parameter(Name="/openaikey", WithDecryption=True)

In diesem Abschnitt importiere ich die notwendigen Module, konfiguriere den Logger zum Debuggen und erfasse den OpenAI API-Schlüssel, der im AWS Systems Manager Parameter Store (SSM) gespeichert ist. Dies dient dazu, den Schlüssel sicher zu verwahren und nicht im Klartext im Code zu speichern.

Hilfsfunktionen

Korrektur der Tags
def correct_resume_tags(text):
    # Corrige les balises 'résumé', 'resume', 'titre' et leurs variantes en 'resume' et 'titre' respectivement dans le texte généré.

Diese Funktion stellt sicher, dass die verwendeten Tags zur Abgrenzung der Zusammenfassungen und Titel einheitlich sind. Dies ist entscheidend für die korrekte Extraktion der Zusammenfassungen später.

Extraktion der Zusammenfassungen
def extract_summaries(text):
    # Extrait les résumés du texte en utilisant des balises spécifiques.

Sie verwendet reguläre Ausdrücke, um die Textabschnitte zu extrahieren, die durch [resume] und [end_resume] abgegrenzt sind. Diese Zusammenfassungen dienen als Eingabeaufforderungen für die Bildgenerierung.

Generierung der Anweisungen für die Bilder
def generate_image_instructions(prompt, style, language):
    # Génère les instructions pour la création d'images.

Diese Funktion formatiert die Eingabeaufforderung so, dass sie das Bildgenerierungsmodell mit Stil und Sprache anleitet.

Aktualisierung von DynamoDB
def update_dynamodb(request_id, status, result_url=None):
    # Met à jour une entrée dans la table DynamoDB avec l'ID de la requête, le statut et l'URL du résultat.

Sie aktualisiert die Tabelle TaskStatus, um den Status der Generierung zu verfolgen, was für die Funktion status_checker.py wichtig ist.

Eingehende Analyse von generate_story_instructions

Die Funktion generate_story_instructions ist das Herzstück des Projekts. Sie generiert eine Reihe detaillierter Anweisungen, die an das KI-Modell weitergegeben werden, um die Geschichtenerstellung zu leiten.

def generate_story_instructions(prompt, language):
    """
    Génère les instructions pour créer une histoire captivante pour enfants.

    Args:
        prompt (str): Texte source pour inspirer l'histoire.
        language (str): Langue de l'histoire.

    Returns:
        str: Instructions formatées pour la génération de l'histoire.
    """
    language_description = get_language_description(language)
    return f"""
    Crée une histoire unique de 1000 à 1500 mots, captivante et riche en descriptions visuelles pour enfants uniquement dans la langue "{language_description}", inspirée par : "{prompt}". Cette histoire doit mêler aventure, magie, et enseigner des valeurs importantes telles que l'amitié, le courage, la persévérance, l'empathie, et la gentillesse.

    L'histoire peut aborder des thèmes comme : l'amitié entre un enfant humain et un animal merveilleux, la découverte d'un monde magique caché, un long voyage vers une contrée enchantée, un enfant qui découvre qu'il/elle possède des pouvoirs magiques spéciaux et doit apprendre à les maîtriser, une quête pour sauver une créature légendaire en danger, un voyage à travers des royaumes féeriques pour briser un sortilège ancien, une aventure sous-marine dans un monde marin peuplé de sirènes et de créatures fantastiques, une mission pour réunir des objets magiques dispersés afin d'empêcher un grand cataclysme, une compétition amicale entre enfants dotés de capacités extraordinaires dans une école de sorcellerie, etc.
    L'histoire peut également explorer : l'acceptation de soi à travers un personnage unique comme un enfant métamorphe, la découverte d'une ancienne civilisation perdue et de ses secrets, une épopée pour retrouver des parents disparus dans un monde parallèle, une lutte contre les forces des ténèbres menaçant d'engloutir un royaume enchanté, etc.
    N'hésites pas à combiner plusieurs de ces idées pour créer une trame narrative riche et captivante. Tu peux aussi t'inspirer de contes ou légendes traditionnels et leur donner un nouvel éclairage fantastique adapté aux enfants.
    Raconte l'histoire au présent pour une immersion maximale.

    Instructions spécifiques :
    - Utilise des phrases courtes et simples, adaptées pour des enfants de moins de 10 ans.
    - Intègre des dialogues dynamiques et réalistes pour rendre l'histoire vivante.
    - Choisis des mots simples pour une meilleure compréhension par de jeunes lecteurs.
    - Crée des personnages diversifiés en termes d'âge, de genre, d'origine ethnique et de capacités. Assure-toi que l'apparence des personnages (cheveux, yeux, taille, etc.) est précisée au niveau du résumé si jamais ils doivent y apparaître pour être cohérent avec le texte de l'histoire.
    - Attribue des traits de personnalité uniques, des intérêts, des peurs et des rêves à chaque personnage pour une caractérisation approfondie.
    - Développe les personnages et leurs relations tout au long de l'histoire en montrant leurs interactions, leurs moments de partage et leur évolution.
    - Crée des conflits émotionnels et intellectuels, au-delà des défis physiques.
    - Décris en détail les défis physiques et les actions des personnages pour les surmonter. Par exemple, lorsqu'ils traversent la forêt, mentionne les branches qui les gênent, les racines sur lesquelles ils trébuchent, la végétation dense qu'ils doivent écarter. Montre leur fatigue, leurs efforts pour avancer, les émotions qu'ils ressentent face à ces difficultés.
    - Fais échouer les personnages principaux à un moment donné. Montre comment ils gèrent cet échec et essaient à nouveau. Décris en détail leurs sentiments de doute, de frustration ou de découragement, et comment ils puisent dans leur détermination et leur amitié pour surmonter cet obstacle. Assure-toi que l'échec est significatif et impacte réellement la progression de l'histoire.
    - Crée des conflits entre les personnages principaux, ou entre les personnages principaux et les personnages secondaires.
    - Ajoute des rebondissements et des défis supplémentaires pour maintenir l'intérêt des jeunes lecteurs. Décris en détail la réaction des personnages face à ces rebondissements, leurs émotions, leurs doutes et leurs efforts pour s'adapter à la nouvelle situation.
    - Résous les conflits de manière créative et non violente, en mettant l'accent sur le pouvoir de la communication et de la coopération.
    - Développe les antagonistes en leur donnant des motivations claires, des traits de personnalité distincts et des capacités redoutables qui les rendent réellement menaçants pour les héros. Décris en détail leurs actions pour contrecarrer ou mettre en échec les héros à plusieurs reprises au cours de l'histoire. Montre comment leur présence et leurs actions sèment le doute, la peur ou le découragement chez les héros avant qu'ils ne parviennent à les surmonter.
    - Assure-toi que le récit comporte une structure narrative claire avec une introduction captivante, de l'action, des conflits, et une résolution.
    - Ajoute un objectif clair pour les personnages à atteindre et un accomplissement significatif à la fin de l'histoire.
    - Inclue des moments de réflexion ou d'émotion pour permettre aux lecteurs de se connecter aux personnages et à leurs aventures.
    - Varie les interactions entre les personnages pour éviter les répétitions et maintenir l'intérêt.
    - Maintiens un bon rythme dans l'histoire en alternant des scènes d'action, de réflexion et d'émotion. Ajoute des éléments de suspense pour maintenir l'intérêt des jeunes lecteurs.
    - Utilise abondamment des descriptions visuelles riches en couleurs, en textures et en formes pour stimuler l'imagination des enfants et créer un monde immersif.
    - Inclue des descriptions sensorielles pour enrichir l'expérience narrative (sons, odeurs, textures).
    - Chaque personnage doit avoir une motivation claire et des traits de caractère distincts.
    - Assure-toi que chaque chapitre se termine par un cliffhanger ou une question ouverte pour maintenir l'intérêt des lecteurs.
    - Ajoute des éléments éducatifs subtils (faits scientifiques, connaissances culturelles) pour enrichir l'histoire sans alourdir le récit.
    - Enrichis les descriptions sensorielles pour permettre aux lecteurs de vraiment "voir", "entendre" et "ressentir" l'environnement des personnages.
    - Personnalise l'histoire avec des noms ou des éléments familiers pour une connexion émotionnelle plus forte.
    - Intègre des questions de réflexion et d'interaction pour engager les enfants.
    - Ajoute des éléments d'humour et des jeux de mots pour rendre l'histoire amusante.
    - Utilise des illustrations mentales vives et détaillées pour stimuler l'imagination.
    - Intègre une leçon morale ou un message éducatif de manière naturelle dans le récit.
    - Intègre des messages positifs et encourageants dans tes histoires, comme l'importance de croire en soi, de poursuivre ses rêves et de surmonter les obstacles.
    - Ajoute des éléments d'humour et de légèreté dans tes histoires pour les rendre plus amusantes et agréables à lire pour les enfants.
    - Intègre des éléments éducatifs dans tes histoires de manière subtile et ludique, comme des métaphores pour enseigner des concepts scientifiques ou des voyages dans différents pays pour enseigner la géographie et les cultures.
    - Ajoute des éléments interactifs dans tes histoires, comme des questions aux enfants, des choix qui influencent l'histoire, ou des petits défis ou jeux à réaliser.

    Ajoute des difficultés et des obstacles significatifs pour rendre l'histoire plus engageante et permettre aux héros de montrer leur courage et leur ingéniosité :
    - Développe les antagonistes en leur donnant des motivations claires, des traits de personnalité distincts et des capacités redoutables qui les rendent réellement menaçants pour les héros. Décris en détail leurs actions pour contrecarrer ou mettre en échec les héros à plusieurs reprises au cours de l'histoire. Montre comment leur présence et leurs actions sèment le doute, la peur ou le découragement chez les héros avant qu'ils ne parviennent à les surmonter.
    - Décris chaque affrontement au niveau quasi "temps réel", avec les actions, réactions, émotions, blessures, etc. détaillées pas à pas, presque comme si on y assistait. Intègre des éléments de surprise, de retournements inattendus au cours de ces affrontements pour augmenter le suspense. Montre comment les capacités et l'ingéniosité des antagonistes poussent les héros dans leurs derniers retranchements.
    - Lorsque les héros échouent, prends le temps de décrire en détail leurs émotions négatives (déception, frustration, colère, tristesse, etc.) et leurs doutes intérieurs. Montre qu'ils remettent en question leur capacité à poursuivre leur quête à la suite de ces échecs cuisants. Fais en sorte qu'ils aient besoin d'un véritable déclic intérieur, motivé par l'amitié ou leurs valeurs, pour se relever et persévérer. Montre comment cela impacte leurs relations entre eux (reproches, disputes, tensions, ou au contraire un élan de solidarité).
    - Décris les affrontements physiques ou psychologiques étape par étape, en montrant les actions, réactions et émotions ressenties de part et d'autre. N'hésite pas à inclure des blessures, de la souffrance ou de la peur pour les héros lors de ces affrontements acharnés. Fais en sorte que la victoire des héros ne soit jamais acquise d'avance et nécessite des sacrifices ou des prises de risque de leur part.
    - Crée des situations où les héros doivent collaborer et utiliser leurs compétences spécifiques pour réussir.
    - Intègre des moments de doute ou de découragement pour montrer la persévérance des héros. Décris leurs luttes internes et comment ils trouvent la force de continuer. Fais en sorte que les héros aient besoin d'un véritable déclic intérieur, motivé par l'amitié ou leurs valeurs, pour se relever et persévérer.
    - Ajoute des moments où l'amitié ou la confiance entre les héros est mise à rude épreuve par les difficultés rencontrées. Montre comment ils doivent surmonter leurs doutes, leur colère ou leur rancune les uns envers les autres pour rester soudés. Décris leurs prises de conscience, leurs excuses et leur cheminement pour renouer des liens forts malgré l'adversité.
    - Place les héros dans des situations où ils doivent faire un choix difficile qui aura des conséquences douloureuses (abandonner un compagnon, renoncer à un rêve, etc.). Montre leur dilemme intérieur, leur déchirement avant de faire ce choix douloureux pour un plus grand bien. N'aie pas peur d'inclure des pertes, des renoncements ou des traumatismes marquants issus de ces choix cornéliens.
    - Fais en sorte que les personnages apprennent et grandissent à travers les difficultés qu'ils rencontrent.
    - Ajoute des rebondissements inattendus qui changent la direction de l'histoire et maintiennent l'intérêt des lecteurs. Décris en détail la réaction des personnages face à ces rebondissements, leurs émotions, leurs doutes et leurs efforts pour s'adapter à la nouvelle situation.
    - Fais en sorte que les antagonistes infligent de véritables blessures physiques et/ou psychologiques aux héros au cours des affrontements. Décris ces blessures, la douleur ressentie, l'impact sur leur moral et leurs capacités à avancer. Montre leur résolution, leur courage pour continuer malgré ces handicaps.
    - Assure-toi que chaque défi est pertinent pour l'histoire et contribue au développement des personnages.
    - Décris en détail chaque énigme ou défi rencontré par les personnages. Par exemple, si les enfants doivent résoudre des énigmes chantées par les vents, précise le contenu de ces énigmes et la manière dont les enfants trouvent les réponses grâce à leur persévérance ou à l'aide de personnages secondaires.
    - Lorsque les personnages surmontent un obstacle, montre le processus complet de leurs tentatives, incluant les échecs et les efforts qu'ils font avant de réussir. Par exemple, détaille comment ils essaient plusieurs méthodes pour résoudre une énigme ou surmonter un défi avant de finalement trouver la solution.
    - Intègre des dialogues et des interactions entre les personnages et les gardiens ou les antagonistes qui posent des défis. Par exemple, si un enfant des vents protège un objet précieux, décris la conversation où il teste la patience des héros et les réactions des enfants face à ce test.
    - Ajoute des descriptions des émotions et des pensées des personnages lorsqu'ils font face à des épreuves difficiles, montrant leur détermination, leurs doutes, et comment ils surmontent ces sentiments pour réussir.
    - Assure-toi que chaque défi est clairement expliqué avec des indices et des solutions logiques que les enfants peuvent comprendre et suivre. Par exemple, spécifie les indices que les héros utilisent pour résoudre les énigmes et comment ces indices les mènent à la solution.


    IMPORTANT : Ne traduisez ni modifiez pas les balises suivantes :
    [titre]Ton titre ici[end_titre] (balises de titre)
    [resume] et [end_resume] (balises de résumé)
    N'ajoutez aucune autre balise que celles spécifiées ci-dessus.

    Voici comment structurer les descriptions visuelles inspirées par : "{prompt}" :
    - Commence chaque description avec la balise [resume] et finis avec la balise [end_resume]. Ne traduisez ni modifiez pas ces balises.
    - Les descriptions doivent se concentrer exclusivement sur les éléments visuels sans inclure d'actions ou de dialogues des personnages.
    - Chaque élément clé mentionné dans le prompt initial doit être décrit de manière unique et détaillée.
    - Ne mentionne chaque élément (personnage, animal, lieu, objet clé) qu'une seule fois dans les descriptions visuelles. Une fois qu'un élément a été décrit, ne le mentionne plus dans les descriptions suivantes, même indirectement.
    - Utilise des descriptions riches en couleurs, en textures et en formes pour stimuler l'imagination visuelle.
    - Inclue des éléments fantastiques, magiques ou surréalistes pour rendre les scènes plus intéressantes et mémorables.
    - Veille à ce que chaque description soit suffisamment détaillée pour permettre la création d'une illustration complète.

    Exemple de structure de descriptions visuelles (ces exemples sont seulement pour référence, ne les utilisez pas tels quels dans l'histoire) :
    [resume]Un koala super sympa avec une fourrure douce et grise, des yeux pétillants et un sourire amical. Il est assis sur une branche d'eucalyptus, grignotant des feuilles et observant son environnement avec curiosité.[end_resume]
    [resume]Un escargot très méchant avec une coquille noire et luisante, et des yeux perçants qui semblent voir à travers tout. Il se déplace lentement mais de manière menaçante, laissant derrière lui une traînée de bave visqueuse.[end_resume]
    [resume]Un arbre magique avec des feuilles d'un bleu profond qui brillent comme des étoiles. Des oiseaux de toutes les couleurs chantent autour des branches, ajoutant une mélodie enchantée à l'atmosphère mystique.[end_resume]

    Assure-toi que chaque description visuelle est riche, détaillée et entièrement nouvelle, sans aucune répétition d'éléments précédents. Évite d'utiliser les exemples fournis ci-dessus et crée des descriptions fraîches pour chaque scène.

    La conclusion de l'histoire doit renforcer les thèmes de l'aventure et de l'amitié avec une touche plus percutante, et être accompagnée d'une dernière description visuelle marquante.
    [resume]Visualise le chemin de retour à travers un paysage unique et magique, différent pour chaque histoire. Par exemple, un pont arc-en-ciel, un sentier lumineux sous une pluie d'étoiles filantes, des pas dans le sable avec un soleil couchant, etc. Assure-toi que la description finale est riche en détails visuels et évoque une atmosphère enchantée et inoubliable.[end_resume]

    Pour varier les débuts d'histoire et éviter la répétition, choisis parmi les exemples suivants, ou laisse libre cours à ton imagination :
    - Une classe à l'école, un voyage en famille, une fête d'anniversaire, une visite chez les grands-parents, un jour de pluie où les enfants jouent à l'intérieur, une sortie en nature, etc.
    - La découverte d'un livre magique, une rencontre inattendue avec un personnage mystérieux, un rêve étrange qui devient réalité, un message secret trouvé dans une bouteille, un animal parlant qui apparaît soudainement, etc.
    - Des personnages principaux différents : une fratrie, des amis, un enfant et son grand-parent, un groupe de camarades de classe, etc.
    - Des lieux de départ variés : une maison en ville, une cabane dans les bois, un appartement au bord de la mer, une ferme, une école, etc.
    - Déclencheur de l'aventure variés aussi : un portail vers un monde magique, un objet mystérieux trouvé dans le grenier, un événement étrange comme une éclipse ou une étoile filante, un animal parlant qui a besoin d'aide, un visiteur de l'espace, etc.

    Cette structure aide à créer un récit harmonieux et visuellement riche, propice à l'illustration et captivant pour les enfants.
    Attention, je te rappelle la langue cible de l'histoire : "{language_description}"
    """

Konstruktion der Eingabeaufforderung

Die Eingabeaufforderung ist darauf ausgelegt, dem KI-Modell alle notwendigen Informationen bereitzustellen, um eine kohärente, erzieherische und kinderfreundliche Geschichte zu generieren.

  • Sprache : Der Parameter language_description ermöglicht es, die Sprache der Geschichte festzulegen, wodurch sichergestellt wird, dass der erzeugte Text in der gewünschten Sprache ist.

  • Thema : Die Benutzereingabe wird in die Anweisungen integriert, um als Grundlage für die Geschichte zu dienen.

  • Länge : Ein Bereich von 1000 bis 1500 Wörtern ist spezifiziert, um die Länge der Geschichte zu steuern.

  • Schlüsselelemente : Die Anweisungen fördern die Einbeziehung von Elementen wie Abenteuer, Magie und wichtigen erzieherischen Werten.

Detaillierte Anweisungen

Die Anweisungen, die dem Modell gegeben werden, sind extrem detailliert, um die Generierung präzise zu leiten.

Hier ist eine Analyse der verschiedenen Teile der Eingabeaufforderung:

  1. Narrative Struktur : Vom Modell wird verlangt, die Geschichte mit einem fesselnden Anfang, einer reichhaltigen Entwicklung und einem zufriedenstellenden Abschluss zu strukturieren.

  2. Visuelle Beschreibungen : Die Geschichte sollte reich an visuellen Beschreibungen sein, um die Fantasie der Kinder anzuregen.

  3. Charaktere : Die Entwicklung liebenswerter Charaktere mit ausgeprägten Persönlichkeiten wird gefördert.

  4. Spezifische Tags : Tags wie [titel]... [end_titel] und [resume]... [end_resume] werden verwendet, um Titel und visuelle Beschreibungen abzugrenzen.

  5. Fantastische Elemente : Das Modell wird ermutigt, magische oder fantastische Elemente einzubauen, um die Geschichte attraktiver zu machen.

  6. Erzieherische Werte : Die Geschichte soll wichtige Werte vermitteln.

Rolle der Tags

Die Tags spielen eine entscheidende Rolle in der späteren Verarbeitung des generierten Textes.

  • [titel]… [end_titel] : Umrahmt den Titel der Geschichte. Dies ermöglicht die einfache Extraktion zur angemessenen Anzeige in der Benutzeroberfläche.

  • [resume]… [end_resume] : Umschließt detaillierte visuelle Beschreibungen von Schlüsselszenen der Geschichte. Diese Zusammenfassungen werden als Prompts für die Bildgenerierung verwendet.

Verarbeitung nach der Generierung

Nachdem das KI-Modell die Geschichte unter Beachtung dieser Anweisungen generiert hat, führt der Code die folgenden Schritte aus:

  1. Korrektur der Tags: Die Funktion correct_resume_tags stellt sicher, dass alle Tags korrekt formatiert sind, um die Extraktion zu ermöglichen.

  2. Extraktion der Zusammenfassungen: Die Funktion extract_summaries verwendet die Tags [resume] und [end_resume], um die visuellen Beschreibungen zu extrahieren.

  3. Bildgenerierung: Jede Zusammenfassung wird an die Funktion generate_image übergeben, um ein entsprechendes Bild zu erstellen.

  4. Erstellung des HTML-Inhalts: Der Text der Geschichte und die generierten Bilder werden kombiniert, um eine vollständige HTML-Seite zu erstellen.

Einfluss auf die Generierung

Durch Bereitstellung dieser detaillierten Anweisungen wird das Modell geführt, um:

  • Das Format einzuhalten: Durch die Verwendung der angegebenen Tags, produziert das Modell einen strukturierten Text, der eine automatisierte Verarbeitung erleichtert.

  • Geeigneten Inhalt zu generieren: Die Einschränkungen hinsichtlich Sprache, Stil und Themen stellen sicher, dass die Geschichte für das Zielpublikum geeignet ist.

  • Die Bildgenerierung zu erleichtern: Durch die Extraktion präziser visueller Beschreibungen erhält man hochwertige Prompts für die Bildgenerierung.

Verwaltung der Tags durch das Modell

Das Modell wird explizit angewiesen, die Tags nicht zu übersetzen oder zu ändern. Dies ist unerlässlich, damit die Tags intakt bleiben und für die Nachbearbeitung verwendet werden können. Die Anweisungen betonen diesen Punkt, um zu verhindern, dass das Modell, das möglicherweise versucht, den gesamten Text zu paraphrasieren oder zu übersetzen, die Tags verändert.

Generierung der Geschichte

Sobald die detaillierten Anweisungen durch die Funktion generate_story_instructions erzeugt wurden, besteht der nächste Schritt darin, diese Anweisungen an das KI-Modell weiterzugeben, damit es die Geschichte erstellt.

def generate_story(prompt, model_type, model_id, language, api_key=None, region_name="us-east-1"):
    instruction = generate_story_instructions(prompt, language)

    if model_type == "openai":
        client = OpenAI(api_key=api_key)
        try:
            response = client.chat.completions.create(
                model=model_id,
                messages=[
                    {
                        "role": "system",
                        "content": "Vous êtes un assistant AI expert des histoires pour enfant.",
                    },
                    {"role": "user", "content": instruction},
                ],
            )
            first_choice_message = response.choices[0].message
            return first_choice_message.content
        except Exception as e:
            return f"Une erreur est survenue : {e}"

    # Gestion des autres modèles (Mistral, Anthropic, Meta) via Amazon Bedrock

Interaktion mit dem OpenAI-Modell

  • OpenAI-Client : Ich instanziiere einen OpenAI-Client unter Verwendung des zuvor abgerufenen API-Schlüssels.

  • Prompting : Das Modell erhält eine Reihe von Nachrichten:

    • Eine Systemnachricht, die besagt, dass der Assistent ein Experte für Kindergeschichten ist.
    • Die Benutzernachricht, die die generierten detaillierten Anweisungen enthält.
  • Antwort des Modells : Das Modell generiert eine Geschichte basierend auf den bereitgestellten Anweisungen.

Fehlerbehandlung

Wenn eine Ausnahme bei der API-Anfrage an OpenAI auftritt, wird sie abgefangen und eine Fehlermeldung zurückgegeben.

Extraktion der Zusammenfassungen und Tags

Nach der Generierung der Geschichte besteht der nächste Schritt darin, die visuellen Beschreibungen unter Verwendung der angegebenen Tags zu extrahieren.

def correct_resume_tags(text):
    # Corrige les balises 'résumé', 'resume', 'titre' et leurs variantes en 'resume' et 'titre' respectivement dans le texte généré.

def extract_summaries(text):
    pattern = r"\[resume\](.*?)\[end_resume\]"
    summaries = re.findall(pattern, text, re.DOTALL)
    return summaries

Korrektur der Tags

Das Modell kann manchmal die Tags leicht verändern (zum Beispiel Akzente hinzufügen). Die Funktion correct_resume_tags stellt sicher, dass alle Tags einheitlich und korrekt formatiert sind.

Extraktion der Zusammenfassungen

Die Funktion extract_summaries verwendet einen regulären Ausdruck, um alle Vorkommen von Text zwischen den Tags [resume] und [end_resume] zu finden. Diese Zusammenfassungen sind die detaillierten visuellen Beschreibungen, die zur Bildgenerierung verwendet werden.

Bildgenerierung

Sobald die Zusammenfassungen extrahiert sind, wird jede Zusammenfassung verwendet, um ein entsprechendes Bild zu generieren.

def generate_image_for_each_summary(summaries, model, bucket_name, seed, style, size, quality, language):
    images_urls = []
    for summary in summaries:
        image_data = generate_image(summary, model, seed, style, size, quality, language)
        if image_data is not None:
            image_url = upload_to_s3(image_data, bucket_name)
            images_urls.append(image_url)
        else:
            images_urls.append("")
    return images_urls

Funktion generate_image

Die Funktion generate_image ruft die API des Bildgenerierungsmodells (zum Beispiel OpenAI DALL·E) auf, um ein Bild aus der Zusammenfassung zu erstellen.

def generate_image(prompt, model, seed, style, size, quality, language):
    width, height = extract_dimensions(size)

    if model == "openai":
        client = OpenAI(api_key=parameter["Parameter"]["Value"])
        adjusted_prompt = generate_image_instructions(prompt, style, language)

        try:
            response = client.images.generate(
                prompt=adjusted_prompt,
                model=os.environ.get("OPENAI_IMAGE_MODEL"),
                n=1,
                size=size,
                response_format="b64_json",
                quality=quality,
                user="user_id",
            )
            image_data = response.data[0].b64_json
            return image_data
        except Exception as e:
            logger.error(f"Error generating image with OpenAI: {str(e)}", exc_info=True)
            return None

    # Gestion des autres modèles (Titan, Stable Diffusion) via Amazon Bedrock

Generierung der Anweisungen für die Bilder Die Funktion generate_image_instructions passt die Zusammenfassung an, um ein geeignetes Prompt für die Bildgenerierung zu erstellen.

def generate_image_instructions(prompt, style, language):
    language_description = get_language_description(language)
    return f"""
    Génère un dessin pour enfant dans le style "{style}" basé sur cette description en langue "{language_description}" : {prompt}.
    La scène doit être purement visuelle, sans aucun texte, et conçue pour éveiller l'émerveillement chez les jeunes spectateurs.
    """
  • Stil: Der vom Benutzer angegebene Stil (z. B. “Aquarell”, “Cartoon”) wird in das Prompt aufgenommen, um die Darstellung des Bildes zu beeinflussen.

  • Sprache: Die Beschreibung wird an die gewählte Sprache angepasst, was dem Modell helfen kann, kulturelle Nuancen zu verstehen.

  • Klare Anweisungen: Die Angabe, dass die Szene rein visuell sein soll, verhindert, dass das Modell Text oder unerwünschte Elemente in das Bild einfügt.

Interaktion mit der OpenAI-API für Bilder

  • API-Aufruf: Die Funktion client.images.generate wird verwendet, um das Bild zu generieren.

  • Wichtige Parameter:

    • Prompt: Das angepasste Prompt wird an die API übergeben.
    • Modell: Das spezifizierte Bildgenerierungsmodell.
    • Größe: Die Größe des Bildes (z. B. “1024x1024”).
    • Qualität: Die Bildqualität (Standard, HD).
    • Antwortformat: Die Bilder werden in base64 zurückgegeben, um die Speicherung und Handhabung zu erleichtern.

Fehlerbehandlung

Fehler bei der Bildgenerierung werden erfasst und protokolliert, um Probleme diagnostizieren zu können.

Erstellung des HTML-Inhalts

Nach der Generierung der zu den extrahierten Zusammenfassungen passenden Bilder besteht der nächste Schritt darin, den Text der Geschichte und die Bilder in einem für den Benutzer präsentierbaren Format zusammenzustellen. Dies geschieht durch die Erstellung eines strukturierten HTML-Inhalts, der auf der Website angezeigt wird.

def create_html_with_images(text_data, images_urls, generate_images=True):
    """
    Crée un contenu HTML en intégrant le texte et les images générées.
    """
    # Extraction du titre
    title_match = re.search(r"\[titre\](.*?)\[end_titre\]", text_data)
    if title_match is not None:
        title = title_match.group(1)
        text_data = text_data.replace(title_match.group(0), "")
    else:
        title = "Histoire Générée par l'IA"

    # Initialisation du contenu HTML
    html_content = """
    <html>
    <head>
        <title>Histoire générée par l'IA</title>
        <meta charset='UTF-8'>
        <style>
            /* Styles CSS pour une présentation agréable */
            body { font-family: Arial, sans-serif; margin: 20px; }
            .title { text-align: center; font-size: 2em; margin-bottom: 20px; }
            .center { text-align: center; }
            img { max-width: 100%; height: auto; margin: 20px 0; }
            p { text-align: justify; line-height: 1.6; }
        </style>
    </head>
    <body>
    """
    html_content += f'<div class="title">{title}</div>\n'

    # Séparation du texte en segments basés sur les résumés
    summaries = extract_summaries(text_data)
    segments = re.split(r"\[resume\].*?\[end_resume\]", text_data, flags=re.DOTALL)

    # Assemblage du texte et des images
    for i, segment in enumerate(segments):
        formatted_segment = segment.strip().replace("\n", "<br>")
        html_content += f"<p>{formatted_segment}</p>\n"
        if generate_images and i < len(images_urls) and images_urls[i]:
            image_url = images_urls[i]
            html_content += f'<div class="center"><img src="{image_url}" alt="Image générée"></div>\n'

    html_content += "</body></html>"
    return html_content

Detaillierte Erklärung

  1. Titel-Extraktion:

    • Verwendet einen regulären Ausdruck, um den Text zwischen den Tags [titre] und [end_titre] zu finden.
    • Entfernt die Tags nach der Extraktion aus dem Haupttext.
    • Wenn kein Titel gefunden wird, wird ein Standardtitel verwendet.
  2. HTML-Initialisierung:

    • Der HTML-Inhalt beginnt mit den Tags <html>, <head> und <body>.
    • CSS-Stile sind enthalten, um die Darstellung zu verbessern (Typografie, Ränder, Ausrichtungen).
  3. Text-Aufteilung:

    • Der Text wird in Segmente unterteilt, indem die Tags [resume] und [end_resume] verwendet werden.
    • Die Segmente repräsentieren die Teile der Geschichte ohne die Zusammenfassungen.
  4. Zusammenfügung:

    • Jeder Textabschnitt wird in einen Absatz <p> eingefügt.
    • Wenn die Bildgenerierung aktiviert ist und ein entsprechendes Bild vorhanden ist, wird das Bild nach dem Absatz eingefügt.
    • Die Bilder werden zentriert und an die Bildschirmgröße angepasst, um ein besseres Benutzererlebnis zu gewährleisten.
  5. Abschluss:

    • Die Schlusstags </body> und </html> werden hinzugefügt, um das HTML-Dokument abzuschließen.

Warum Dieser Ansatz?

  • Ausrichtung von Text und Bildern: Durch das Einfügen der Bilder nach den entsprechenden Textabschnitten wird die Geschichte visuell bereichert, was besonders wichtig für Kinder ist.

  • Flexibilität: Wenn der Benutzer sich entscheidet, keine Bilder zu generieren, behandelt der Code diesen Fall, indem nur der Text eingefügt wird.

  • Barrierefreiheit: Durch die Verwendung semantischer Tags und geeigneter Stile ist der Inhalt auf verschiedenen Geräten (Computer, Tablets, Smartphones) zugänglich.

Upload auf S3 und Statusaktualisierung

Nachdem der HTML-Inhalt generiert wurde, muss er dem Benutzer zugänglich gemacht werden. Dies geschieht durch das Hochladen der Datei in einen S3-Bucket, der für die Bereitstellung statischer Websites konfiguriert ist.

def upload_to_s3(content, bucket_name, content_type="image/jpeg"):
    """
    Télécharge le contenu sur S3 et retourne l'URL publique.
    """
    s3_client = boto3.client("s3")
    timestamp = datetime.now().strftime("%Y%m%d%H%M%S")
    if content_type == "image/jpeg":
        file_name = f"generated_images/{timestamp}.jpg"
        content_to_upload = base64.b64decode(content)
    else:
        file_name = f"generated_content/{timestamp}.html"
        content_to_upload = content.encode("utf-8")
        content_type = "text/html; charset=utf-8"

    try:
        s3_client.put_object(
            Bucket=bucket_name,
            Key=file_name,
            Body=content_to_upload,
            ContentType=content_type,
            ACL='public-read'
        )
        return f"https://{os.environ['CLOUDFRONT_DOMAIN']}/{file_name}"
    except Exception as e:
        logger.error(f"Error uploading content to S3: {e}", exc_info=True)
        raise

Technische Details

  • Dateibenennung:

    • Die Dateien werden mit einem Zeitstempel benannt, um die Einzigartigkeit zu gewährleisten.
    • Die Bilder werden im Ordner generated_images/ und die HTML-Dateien im Ordner generated_content/ gespeichert.
  • Upload auf S3:

    • Verwendung des S3-Clients von boto3, um mit dem Dienst zu interagieren.
    • Der Inhalt wird je nach Typ (Bild oder Text) kodiert oder dekodiert.
    • Der Parameter ACL='public-read' macht die Datei öffentlich zugänglich. - URL-Konstruktion:
    • Die öffentliche URL wird unter Verwendung der konfigurierten CloudFront-Domain erstellt, was eine schnelle und sichere Verteilung des Inhalts ermöglicht.
  • Ausnahmebehandlung:

    • Bei einem Fehler beim Herunterladen wird die Ausnahme protokolliert und ausgelöst, damit sie vom lambda_handler behandelt werden kann.

Hauptfunktion lambda_handler

Die Funktion lambda_handler ist der Einstiegspunkt der Lambda-Funktion. Sie orchestriert alle zuvor beschriebenen Schritte.

def lambda_handler(event, context):
    """
    Point d'entrée de la fonction Lambda.
    """
    try:
        # Récupération des données de la requête
        request_id = event.get("requestId")
        body = json.loads(event.get("body", "{}"))
        prompt = body.get("text", "Texte par défaut")
        # Récupération des autres paramètres (modèles, langue, etc.)

        # Mise à jour du statut dans DynamoDB
        update_dynamodb(request_id, "Processing")

        # Génération de l'histoire
        text_data = generate_story(prompt, story_generation_model, model_id, language, api_key)

        # Correction des balises et extraction des résumés
        text_data = correct_resume_tags(text_data)
        summaries = extract_summaries(text_data)

        # Génération des images
        images_urls = []
        if generate_images and summaries:
            images_urls = generate_image_for_each_summary(
                summaries, image_generation_model, bucket_name, seed, style_with_spaces, size, quality, language
            )

        # Création du contenu HTML
        html_content = create_html_with_images(text_data, images_urls, generate_images)

        # Upload du contenu sur S3
        result_url = upload_to_s3(html_content, bucket_name, content_type="text/html")

        # Mise à jour du statut avec le lien du résultat
        update_dynamodb(request_id, "link", result_url)

        # Retour de la réponse HTTP
        return {
            "isBase64Encoded": False,
            "statusCode": 200,
            "headers": {"Content-Type": "application/json"},
            "body": json.dumps({"requestId": request_id, "resultUrl": result_url}),
        }

    except Exception as e:
        logger.error(f"Erreur lors de l'exécution de la fonction lambda: {str(e)}", exc_info=True)
        update_dynamodb(request_id, "Failed")
        return {
            "statusCode": 500,
            "body": json.dumps({"message": "Internal server error"}),
            "headers": {"Content-Type": "application/json"},
        }

Erklärung

  • Anfragenverarbeitung:

    • Holt die erforderlichen Informationen aus dem empfangenen Ereignis (Event).
    • Die Anfrageparameter umfassen den Prompt, die ausgewählten Modelle, die Sprache usw.
  • Statusaktualisierung:

    • Vor Beginn der Verarbeitung wird der Status in DynamoDB auf “Processing” gesetzt.
  • Geschichtenerstellung:

    • Aufruf von generate_story mit den entsprechenden Parametern.
  • Extraktion und Verarbeitung:

    • Die Tags werden korrigiert und die Zusammenfassungen zur Bilderstellung extrahiert.
  • Bilderstellung:

    • Wenn die Bilderstellung aktiviert ist, werden die entsprechenden Bilder generiert und die URLs gesammelt.
  • Erstellung des HTML-Inhalts:

    • Text und Bilder werden kombiniert, um den endgültigen HTML-Inhalt zu erstellen.
  • Upload auf S3:

    • Der HTML-Inhalt wird auf S3 hochgeladen und die Ergebnis-URL wird erhalten.
  • Abschließende Statusaktualisierung:

    • Der Status wird in DynamoDB auf “link” mit der Ergebnis-URL aktualisiert.
  • Rückgabe der Antwort:

    • Die Antwort enthält die requestId und die Ergebnis-URL, sodass der Client den Status überprüfen oder direkt auf den Inhalt zugreifen kann.
  • Ausnahmebehandlung:

    • Bei einem Fehler wird der Status auf “Failed” gesetzt und eine HTTP 500-Antwort zurückgegeben.

Lambda-Funktion status_checker.py

Allgemeine Übersicht

Die Funktion status_checker.py ermöglicht es Benutzern, den Status ihrer Anforderung zur Geschichtenerstellung zu überprüfen. Sie fragt DynamoDB ab, um den aktuellen Status und, falls verfügbar, die Ergebnis-URL abzurufen.

Codeanalyse

import boto3
import json
from botocore.exceptions import ClientError

def lambda_handler(event, context):
    """
    Fonction Lambda pour vérifier le statut d'une demande.
    """
    # Initialisation de DynamoDB
    dynamodb = boto3.resource("dynamodb")
    table = dynamodb.Table("TaskStatus")

    # Définition des en-têtes HTTP
    headers = {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
    }

    # Récupération du requestId depuis les paramètres de la requête
    query_params = event.get("queryStringParameters")
    if not query_params or "requestId" not in query_params:
        return {
            "statusCode": 400,
            "body": json.dumps({"message": "Missing requestId"}),
            "headers": headers,
        }

    request_id = query_params["requestId"]
    try:
        # Récupération de l'élément dans DynamoDB
        response = table.get_item(Key={"requestId": request_id})
        if "Item" in response:
            item = response["Item"]
            return {
                "statusCode": 200,
                "body": json.dumps(
                    {
                        "status": item.get("status", "Unknown"),
                        "resultUrl": item.get("resultUrl", ""),
                    }
                ),
                "headers": headers,
            }
        else:
            return {
                "statusCode": 404,
                "body": json.dumps({"message": "Request ID not found"}),
                "headers": headers,
            }
    except ClientError as e:
        return {
            "statusCode": 500,
            "body": json.dumps({"message": str(e)}),
            "headers": headers,
        }

Details

  • Wiederherstellung der requestId:

    • Die requestId ist entscheidend, um die spezifische Anforderung des Benutzers zu identifizieren.
  • Abfrage von DynamoDB:

    • Die Funktion versucht, das Element zu der requestId abzurufen.
    • Wenn das Element existiert, werden der Status und die resultUrl extrahiert.
  • Erstellung der Antwort:

    • Wenn der Status verfügbar ist, wird er zusammen mit der Ergebnis-URL zurückgegeben.
    • Wenn das Element nicht gefunden wird, wird ein Fehler 404 zurückgegeben.
    • Bei einem Fehler bei der Abfrage der Datenbank wird ein Fehler 500 mit einer entsprechenden Nachricht zurückgegeben.
  • HTTP-Header:

    • Die Header sind definiert, um CORS-Anfragen von der Website zu ermöglichen.

Integration mit API Gateway

Konfiguration der Endpunkte

Das API Gateway stellt zwei Hauptendpunkte zur Verfügung, um mit den Lambda-Funktionen zu interagieren:

  1. /generate-image:

    • Methode: POST
    • Beschreibung: Ermöglicht Benutzern, die Erstellung einer Geschichte und gegebenenfalls der zugehörigen Bilder zu starten.
    • Integration: Verbunden mit der Lambda-Funktion StoryPixAI.py.
  2. /check-status:

    • Methode: GET
    • Beschreibung: Ermöglicht Benutzern, den Status ihrer Anfrage durch Bereitstellung der requestId zu überprüfen.
    • Integration: Verbunden mit der Lambda-Funktion status_checker.py.

Authentifizierung mit Cognito

Um die API zu schützen und den Zugriff auf Ressourcen zu kontrollieren, habe ich Amazon Cognito integriert.

  • User Pool:

    • Verwalten die Anmeldeinformationen der Benutzer.
    • Ermöglicht die Registrierung, Anmeldung und Verwaltung der Benutzer.
  • Authorizer:

    • Konfiguriert im API Gateway zur Überprüfung der von Cognito ausgestellten JWT-Tokens.
    • Stellt sicher, dass nur authentifizierte Anfragen auf die geschützten Endpunkte zugreifen können. - Integration auf API Gateway:
    • Die Endpoints /generate-image und /check-status sind durch den Cognito Authorizer geschützt.
    • Die Kunden müssen das Authentifizierungstoken in die Header ihrer Anfragen einfügen (Authorization).

Statische Website auf S3 und Interaktion mit der API

Seitenstruktur

Die statische Website dient als Benutzeroberfläche für die Anwendung.

  • index.html:

    • Enthält das Formular, in dem Benutzer den Prompt eingeben, die Erstellungsoptionen auswählen und ihre Anfrage absenden können.
    • Enthält die erforderlichen Skripte für die Interaktion mit der API und das Management der Authentifizierung.
  • storypixai.js:

    • Enthält den JavaScript-Code zur Verwaltung der Interaktionen mit der API.
    • Verwalte die Authentifizierung mit Cognito, das Absenden des Formulars, die Statusüberwachung und die Anzeige der Ergebnisse.

Benutzerablauf

  1. Anmeldung:

    • Der Benutzer meldet sich über das integrierte Anmeldeformular an.
    • Die Informationen werden über Cognito überprüft.
  2. Anfrageeinreichung:

    • Der Benutzer füllt das Formular mit dem Prompt und den gewünschten Optionen aus.
    • Beim Einreichen wird eine POST-Anfrage an den Endpoint /generate-image mit den Daten gesendet.
  3. Asynchrone Verarbeitung:

    • Die API gibt sofort eine requestId zurück.
    • Die Generierungsverarbeitung erfolgt im Hintergrund.
  4. Statusüberprüfung:

    • Die Website fragt periodisch den Endpoint /check-status ab, indem sie die requestId bereitstellt.
    • Sobald der Status “link” empfangen wird, wird die URL des Ergebnisses dem Benutzer angezeigt.
  5. Ergebnisanzeige:

    • Der Benutzer kann auf den Link klicken, um auf die generierte Geschichte mit den Bildern zuzugreifen.

Verwaltung von Anfragen und Antworten

  • Authentifizierte Anfragen:

    • Alle Anfragen an die API beinhalten das Authentifizierungstoken.
    • Das Token wird von dem im Web enthaltenen SDK von Cognito verwaltet.
  • Statusverwaltung:

    • Die möglichen Status sind “Processing”, “link”, “Failed”.
    • Die Website passt ihre Oberfläche je nach empfangenem Status an (z.B. Anzeige eines Spinners, Fehlermeldung, Link zum Ergebnis).

Interaktionen zwischen den Komponenten

Hier ist, wie die verschiedenen Komponenten interagieren:

  • Website ↔️ API Gateway:

    • Die Website sendet Anfragen an die von API Gateway exponierten Endpoints.
    • Authentifizierungstoken werden hinzugefügt, um die Anfragen zu sichern.
  • API Gateway ↔️ Lambda-Funktionen:

    • API Gateway ruft die entsprechenden Lambda-Funktionen basierend auf den eingehenden Anfragen auf.
  • Lambda-Funktionen ↔️ DynamoDB:

    • Die Lambda-Funktionen StoryPixAI.py und status_checker.py interagieren mit DynamoDB, um den Status der Anfragen zu aktualisieren und abzurufen.
  • Lambda-Funktion ↔️ S3:

    • Die Funktion StoryPixAI.py lädt die generierten Bilder und den HTML-Inhalt auf S3 hoch.
  • CloudFront ↔️ S3:

    • CloudFront wird verwendet, um den auf S3 gespeicherten Inhalt schnell und sicher zu verteilen.
    • Die den Benutzern bereitgestellten URLs verweisen auf die CloudFront-Domain.
  • Benutzer ↔️ Website:

    • Der Benutzer interagiert mit der Website, um Anfragen einzureichen und die Ergebnisse anzuzeigen.

Beispiel eines Logauszugs in Cloudwatch nach einer Anfrage

Hier ist ein Beispiel für einen Logauszug nach einer Anfrage, damit Sie das rohe Datenformat sehen können:

[INFO]	2024-07-22T19:13:49.764Z	4ec7d759-2fd2-49ca-b929-4f4d12629c73	Texte généré par l'ia : [titre]Tom et Zoé à l'aventure ![end_titre]

Une belle matinée de printemps, Tom et Zoé se retrouvent chez leur grand-mère pour les vacances. Tom a des cheveux bruns et ébouriffés, des yeux verts pétillants et une tache de rousseur sur le nez. Zoé, elle, a de longs cheveux blonds tressés, des yeux bleus comme le ciel et toujours un sourire aux lèvres.

Ce jour-là, alors qu'ils jouent dans le jardin, ils découvrent quelque chose d'étrange près du vieux puits. "Regarde, Zoé, cette lumière étrange !", s'exclame Tom.

"On dirait un passage secret...", murmure Zoé avec fascination. Ils se regardent, surexcités par la perspective d'une aventure. Ils s'approchent prudemment et tombent sur un escalier en colimaçon menant sous terre. Sans hésiter, ils commencent à descendre.

L'escalier les mène à une forêt lumineuse où les arbres sont couverts de feuilles dorées et où des fleurs scintillent de toutes les couleurs de l'arc-en-ciel. Le sol est tapissé de mousse douce et le chant mélodieux des oiseaux résonne autour d'eux.

[resume]Un arbre gigantesque au centre de la clairière, avec des racines enchevêtrées formant des arches naturelles. Ses feuilles changent de couleur au gré du vent, passant du vert émeraude au violet profond. Autour de ses branches, des lucioles dansent et éclairent l'atmosphère d'une lumière douce et féerique.[end_resume]

Alors qu'ils explorent les environs émerveillés, un petit renard roux avec une touffe blanche sur la queue surgit devant eux. "Bonjour, je m'appelle Félix. Êtes-vous perdus ?"

"Non, pas vraiment. Nous cherchons simplement à explorer !" répondent-ils en chœur.

"Alors, vous êtes au bon endroit. Mais attention, quelque chose de précieux est en danger ici. Un méga escargot vole toutes les salades du jardin magique et il faut l'arrêter ! Voulez-vous m'aider ?" demande Félix.

Tom et Zoé, enthousiastes devant cette mission, acceptent sans hésiter.

Félix les guide à travers des sentiers sinueux, où les branches des arbres semblent former des arches protectrices au-dessus de leurs têtes. La route devient de plus en plus difficile à mesure qu'ils s'enfoncent dans la forêt.

[resume]Une rivière cristalline aux eaux claires comme le verre, dans laquelle nagent des poissons multicolores. Les rives sont bordées de galets ronds et lisses, et des nénuphars aux fleurs roses flottent doucement à la surface.[end_resume]

"

Regardez là-bas, derrière ce buisson," chuchote Félix, en pointant une direction. Derrière les plantes, ils aperçoivent une trace de bave visqueuse brillamment éclairée.

"Ça doit être l'escargot," murmure Tom.

Ils suivent la piste de bave jusqu'à une clairière où ils tombent face à face avec le méga escargot. Il est énorme, avec une coquille noire et luisante et des yeux perçants qui semblent voir à travers tout.

"Je suis le protecteur de ces salades !" s'exclame l'escargot d'une voix grondante. "Elles m'appartiennent toutes !"

[resume]Le méga escargot est si grand que sa coquille ressemble à une petite montagne arrondie. Elle est noire avec des motifs argentés en spirale qui brillent sous le soleil. Ses antennes sont longues et frémissent à chaque mouvement. Il laisse derrière lui une traînée de bave qui scintille comme des cristaux de glace.[end_resume]

"Mais ces salades nourrissent tout le monde ici," réplique Zoé courageusement. "Il faut partager !"

L'escargot se met à rire et glisse vers eux lentement mais de manière menaçante. Tom et Zoé échangent un regard, ils savent qu'ils doivent utiliser leur intelligence et leur courage pour résoudre ce problème.

"Il y a sans doute un moyen de convaincre l'escargot !" dit Félix. "Utilisons la magie de cette forêt pour lui montrer une meilleure voie."

Zoé, qui découvre soudain qu'elle possède un pouvoir magique, ferme les yeux et se concentre. Elle sent une énergie chaude circuler en elle. Elle lève la main et des lianes lumineuses surgissent du sol, s'enroulant doucement autour de l'escargot sans lui faire de mal.

"Je vais créer un jardin immense juste pour toi," annonce Zoé, "mais tu devras promettre de partager avec tout le monde ici."

L'escargot, touché par la bonté de Zoé, hésite puis accepte. "Je ne savais pas que j'avais blessé autant de monde. Merci de me montrer un autre chemin."

Les lianes lumineuses dessinent alors un magnifique jardin rempli de salades et d'autres délices pour l'escargot. Cependant, le jardin ne s’ouvre que s’il appelle les autres créatures pour partager.

[resume]Un jardin magnifique avec des salades immenses, leurs feuilles vert tendre et croquantes. Des carottes orange vif et des courgettes vertes s'y mêlent, baignant dans une lumière dorée. Des papillons aux ailes irisées volent autour, ajoutant une touche de magie à ce lieu merveilleux.[end_resume]

En voyant cela, l'escargot laisse échapper une larme de reconnaissance et appelle instantanément les animaux de la forêt pour voir le miracle. Les habitants de la forêt acclament Tom et Zoé. Un énorme festin est organisé en leur honneur.

"Merci d'avoir sauvé notre jardin et notre amitié !" s'exclame Félix avec émotion.

Puis, ils se disent au revoir et, guidés par Félix, Tom et Zoé retrouvent le chemin de la maison. Au moment de passer le portail magique, ils se retournent une dernière fois pour admirer le spectacle enchanteur.

[resume]Un pont arc-en-ciel scintillant traverse le ciel, connectant la forêt magique à leur monde. Les couleurs brisées de l'arc iridescent se mélangent sous leurs regards émerveillés, illuminant la verdure environnante sous une lumière douce et chaleureuse. Chaque pas sur le pont résonne d'une mélodie cristalline.[end_resume]

Ils reprennent leur place dans le jardin de leur grand-mère, main dans la main, renforcés par cette aventure. "Tom, tu penses qu'on reverra Félix ?" demande Zoé rêveusement.

"J'espère bien ! Et qui sait quelle nouvelle aventure nous attend !" répond Tom en souriant.

La journée se termine sous le ciel étoilé, et leur amitié est plus forte que jamais, une étoile brillante dans l'univers de leurs rêves et de leurs aventures.

Les défis et les épreuves leur ont appris des valeurs précieuses : l'amitié, le partage, la persévérance, et surtout, la gentillesse.

Et c'est ainsi que Tom et Zoé grandissent, un peu plus chaque jour, devenant eux-mêmes des héros dans leurs cœurs d'enfants.

[resume]Des étoiles filantes traversent un ciel de velours noir, chaque trainée lumineuse ajoutant une touche de mystère à la nuit. Sur le chemin du retour, chaque pas dans le sable semble faire briller les grains comme des diamants sous la douce lumière de la lune. Une douce brise apporte l'odeur salée de la mer, ponctuée par le murmure des vagues au loin.[end_resume]

Fin.

Kontinuierliche Integration mit GitLab CI/CD

Um eine reibungslose Entwicklung und Bereitstellung von StoryPixAI zu gewährleisten, habe ich eine kontinuierliche Integrations- (CI) und kontinuierliche Bereitstellungspipeline (CD) mit GitLab CI/CD eingerichtet. Diese Konfiguration automatisiert die Build- und Bereitstellungsprozesse und stellt so die Qualität und Zuverlässigkeit des Codes bei jeder Änderung sicher.

Pipeline-Konfiguration

Die Pipeline ist in der Datei .gitlab-ci.yml im Stammverzeichnis des Projekts definiert. Hier ist ein Überblick über ihre Struktur:

stages:
  - Pré-requis optionel
  - Vérifications
  - Déploiements
  - Management
  - Suppressions

variables:
  TERRAFORM_VERSION: "1.5.7-*"
  TF_VAR_region: $AWS_DEFAULT_REGION
``` Diese Konfiguration definiert die verschiedenen Schritte der Pipeline und die globalen Variablen, die im CI/CD-Prozess verwendet werden.

### Haupt-Jobs

Die Pipeline umfasst mehrere Schlüssel-Jobs:

1. **Terraform-Prüfung**:
   ```yaml
   Terraform-Prüfung:
     stage: Prüfungen
     when: manual
     script:
       - /bin/bash -c "source export.sh && terraform_plan"

Dieser Job führt terraform plan aus, um die geplanten Infrastrukturänderungen zu prüfen, ohne sie anzuwenden.

  1. Terraform-Bereitstellung:

    Terraform-Bereitstellung:
      stage: Bereitstellungen
      when: manual
      dependencies:
        - Terraform-Prüfung
      script:
        - /bin/bash -c "source export.sh && terraform_apply"
    

    Nach der Überprüfung wendet dieser Job die Infrastrukturänderungen an, indem terraform apply ausgeführt wird.

  2. Terraform-Löschung:

    Terraform-Löschung:
      stage: Löschungen
      when: manual
      script:
        - /bin/bash -c "source export.sh && terraform_destroy"
    

    Dieser Job ermöglicht es, die Infrastruktur bei Bedarf zu löschen, indem terraform destroy ausgeführt wird.

  3. Verwaltung der OpenAI-Schlüssel:

    OpenAI-Schlüssel - Hinzufügen:
      stage: Optionale Vorbedingungen
      when: manual
      script:
        - |
          KEYS_FOUND=false
          if [ -n "$OPENAI_KEY" ]; then
            /bin/bash -c "source export.sh && manage_openai_key put $OPENAI_KEY"
            KEYS_FOUND=true
          fi     
          if [ "$KEYS_FOUND" = false ]; then
            echo "Kein Schlüssel gefunden."
            exit 1
          fi      
    
    OpenAI-Schlüssel - Löschen:
      stage: Löschungen
      when: manual
      script:
        - /bin/bash -c "source export.sh && manage_openai_key delete"
    

    Diese Jobs verwalten das sichere Hinzufügen und Löschen der OpenAI-API-Schlüssel im AWS Parameter Store.

Ausführungsumgebung

Jeder Job wird in einem Docker-Container basierend auf Ubuntu 22.04 ausgeführt, mit installiertem Terraform und AWS CLI:

.terraform_template: &terraform_template
  image:
    name: ubuntu:22.04
  before_script:
    - apt-get update
    - apt-get install -y gnupg software-properties-common curl
    - curl -fsSL https://apt.releases.hashicorp.com/gpg | gpg --dearmor -o /usr/share/keyrings/hashicorp-archive-keyring.gpg
    - echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com $(grep 'VERSION_CODENAME' /etc/os-release | cut -d'=' -f2) main" | tee /etc/apt/sources.list.d/hashicorp.list
    - apt-get update
    - apt-get install -y terraform=${TERRAFORM_VERSION} python3-pip bash jq zip
    - pip3 install awscli >> /dev/null

Vorteile dieses CI/CD-Ansatzes

  1. Automatisierung: Jede Codeänderung löst automatisch die Pipeline aus und stellt sicher, dass Überprüfungen und Bereitstellungen konsistent durchgeführt werden.

  2. Manuelle Kontrolle: Kritische Schritte wie Bereitstellung und Löschung sind im manuellen Modus (when: manual) konfiguriert, was eine zusätzliche Kontrolle vor der Ausführung bietet.

  3. Sichere Verwaltung von Geheimnissen: Die Integration mit AWS Parameter Store für die Verwaltung der API-Schlüssel gewährleistet einen sicheren Umgang mit sensiblen Informationen.

  4. Flexibilität: Die Struktur in Stages ermöglicht eine geordnete und logische Ausführung der verschiedenen Pipeline-Schritte.

  5. Reproduzierbarkeit: Die Verwendung einer standardisierten Docker-Umgebung garantiert, dass Builds und Tests auf verschiedenen Systemen reproduzierbar sind.

Diese CI/CD-Konfiguration ermöglicht nicht nur die Automatisierung der Bereitstellung von StoryPixAI, sondern auch die Aufrechterhaltung eines hohen Qualitäts- und Zuverlässigkeitsniveaus während des gesamten Entwicklungszyklus.

Fazit

StoryPixAI war mehr als nur ein technisches Projekt. Es war ein echtes Abenteuer in der Welt der generativen KI, das es mir ermöglichte, meine Leidenschaft für Technologie mit dem Wunsch zu verbinden, magische Geschichten für meine Kinder zu schaffen.

Dieses Projekt bot mir die Gelegenheit, verschiedene Facetten der KI zu erkunden, von der Gestaltung einer intuitiven Benutzeroberfläche über die Beherrschung des Prompting bis hin zur Einrichtung einer robusten Cloud-Infrastruktur mit AWS und Terraform. Jede Phase war eine Quelle des Lernens und konfrontierte mich mit herausfordernden technischen Problemen, die mich zwangen, meine Fähigkeiten im Full-Stack-Entwicklung und DevOps zu erweitern.

Ich hoffe, dieser Blog-Beitrag hat Ihnen einen Einblick in die spannenden Hintergründe dieses Abenteuers gegeben.

Schlüsselpunkte

  • Detaillierte Anweisungen:

    • Klare und strukturierte Prompts ermöglichen es, konsistente und qualitativ hochwertige Ergebnisse von den KI-Modellen zu erhalten. - Modulare Architektur :
    • Jede Komponente (Website, API Gateway, Lambda, DynamoDB, S3, Cognito) spielt eine spezifische Rolle, was die Wartung und Weiterentwicklung des Systems erleichtert.
  • Sicherheit und Skalierbarkeit :

    • Die Nutzung von verwalteten AWS-Diensten gewährleistet eine robuste Sicherheit und die Fähigkeit, sich einer steigenden Nachfrage anzupassen.

Projektlink : StoryPixAI

Dieses Dokument wurde von der Version fr in die Sprache de mit dem Modell gpt-4o übersetzt. Für weitere Informationen über den Übersetzungsprozess, besuchen Sie https://gitlab.com/jls42/ai-powered-markdown-translator.