Création d'un générateur d'histoires interactives pour enfants avec l'API React Native et Hugging Face

Dans cet article, nous expliquerons la création d'une application React Native qui génère des histoires pour enfants en fonction d'invites et de tranches d'âge, en utilisant les puissants modèles d'IA de Hugging Face. L'application permet aux utilisateurs de saisir une invite, de sélectionner une tranche d'âge, puis de voir une histoire personnalisée accompagnée d'une image caricaturale résumant l'histoire.

Caractéristiques

1. Génération d'histoires interactives : la saisie de l'utilisateur guide l'IA pour créer des histoires attrayantes pour enfants.
2. Résumé et visualisation : L'histoire est résumée et affichée à côté d'une image générée par l'IA.
3. Animation fluide de l'interface utilisateur : les animations adaptent l'interface utilisateur pour la saisie au clavier.
4. Navigation et style : utilisation d'Expo Router pour une navigation facile et des styles personnalisés pour une interface utilisateur attrayante.

Décomposons chaque partie !

---

Étape 1 : Configuration de l'API React Native et Hugging Face

Commencez par créer un nouveau projet React Native avec Expo :

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

Configurez Expo Router dans votre application pour une navigation facile et installez toutes les dépendances supplémentaires dont vous pourriez avoir besoin, comme des icônes ou des animations.

Étape 2 : Création de l'écran d'accueil du générateur d'histoires

Dans le fichier Home.js, nous avons configuré un écran sur lequel les utilisateurs peuvent sélectionner une tranche d'âge, saisir une invite d'histoire et appuyer sur un bouton pour générer une histoire.

Code Accueil.js

 importer React, { useEffect, useRef, useState } depuis "react" ;
importer {
  Voir,
  Texte,
  Opacité tactile,
  Feuille de style,
  Entrée de texte,
  Animé,
  Indicateur d'activité,
} de « réagir natif » ;
importer useKeyboardOffsetHeight depuis "../hooks/useKeyboardOffsetHeight" ;
importer { HUGGING_FACE_KEY } depuis "../env" ;
importer { useRouter } depuis "expo-router" ;

const Accueil = () => {
  const ageRanges = ["0-3", "4-6", "7-9"];
  const [selectedAgeRange, setSelectedAgeRange] = useState("0-3");
  const [textInput, setTextInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const clavierOffsetHeight = useKeyboardOffsetHeight();
  const animationValue = useRef(new Animated.Value(0)).current;
  const routeur = useRouter();

  useEffect(() => {
    Animé.timing(animatedValue, {
      toValue : clavierOffsetHeight ? -keyboardOffsetHeight * 0,5 : 0,
      durée : 500,
      useNativeDriver : vrai,
    }).commencer();
  }, [keyboardOffsetHeight]);

  const handleAgeRangeSelect = (plage) => setSelectedAgeRange(plage);

  const handleShowResult = () => {
    si (textInput.length > 5) {
      fetchStory();
    } autre {
      alert("Veuillez entrer un peu plus de détails.");
    }
  } ;

  fonction asynchrone fetchStory() {
    setIsLoading(true);
    essayer {
      let message = `Écrivez une histoire simple pour les enfants sur ${textInput} ${
        sélectionnéAgeRange ? "pour la tranche d'âge" selectedAgeRange : ""
      }, en termes simples. Fournissez uniquement le contenu de l'histoire sans titres, titres ou informations supplémentaires.`;

      réponse const = attendre la récupération (
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          méthode : "POST",
          en-têtes : {
            Autorisation : `Bearer ${HUGGING_FACE_KEY}`,
            "Content-Type": "application/json",
          },
          corps : JSON.stringify({
            modèle : "méta-llama/Llama-3.2-3B-Instruct",
            messages : [{ rôle : "utilisateur", contenu : message }],
            max_tokens : 500,
          }),
        }
      );

      if (!response.ok) throw new Error("Échec de la récupération de l'histoire");

      const data = attendre réponse.json();
      const storyContent = data.choices[0].message.content;

      // Résumer l'histoire
      const summaryResponse = wait fetch (
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          méthode : "POST",
          en-têtes : {
            Autorisation : `Bearer ${HUGGING_FACE_KEY}`,
            "Content-Type": "application/json",
          },
          corps : JSON.stringify({
            modèle : "méta-llama/Llama-3.2-3B-Instruct",
            messages : [
              { role : "user", content : `Résumez cette histoire en une ligne : "${storyContent}"` },
            ],
            max_tokens : 30,
          }),
        });

      if (!summaryResponse.ok) throw new Error("Échec de la récupération du résumé");

      const summaryData = wait summaryResponse.json();
      const summaryContent = summaryData.choices[0].message.content;

      routeur.push({
        chemin : "/détail",
        params : { histoire : storyContent, résumé : résuméContent },
      });
    } attraper (erreur) {
      console.error("Erreur lors de la récupération de l'histoire ou du résumé :", erreur);
      alert("Erreur lors de la récupération de l'histoire. Veuillez réessayer.");
    } enfin {
      setIsLoading(faux);
    }
  }

  retour (
    <Animated.ScrollView
      rebonds={faux}
      clavierShouldPersistTaps="handled"
      KeyboardDismissMode="en faisant glisser"
     >



<h3>
  
  
  Composants clés de Home.js
</h3>

<ul>
<li>
<strong>Saisie de texte et sélecteur d'âge</strong> : permet à l'utilisateur de sélectionner une tranche d'âge et de saisir une invite d'histoire.</li>
<li>
<strong>Récupérer l'histoire</strong> : fetchStory interagit avec l'API Hugging Face pour générer et résumer une histoire basée sur l'entrée.</li>
<li>
<strong>Navigation</strong> : si une histoire et un résumé sont récupérés avec succès, l'application accède à l'écran Détails pour afficher les résultats.</li>
</ul>


<hr>

<h3>
  
  
  Étape 3 : Affichage de l'histoire et de l'image sur l'écran de détail
</h3>

<p><img src="https://img.php.cn/upload/article/000/000/000/173252011696327.jpg" alt="Building an Interactive Kids Story Generator with React Native and Hugging Face API" /></p>

<p>L'écran Détails récupère l'histoire générée, la résume et affiche une image de dessin animé générée par l'IA liée à l'histoire.</p><h4>
  
  
  Code Détail.js
</h4>



<pre class="brush:php;toolbar:false">importer React, { useEffect, useState } depuis "react" ;
importer { StyleSheet, View, Text, TouchableOpacity, ActivityIndicator, Image, ScrollView } depuis « react-native » ;
importer { useLocalSearchParams, useRouter } depuis "expo-router" ;
importer { HUGGING_FACE_KEY } depuis "../env" ;
importer des Ionicons depuis "@expo/vector-icons/Ionicons" ;

const Détail = () => {
  const params = useLocalSearchParams();
  const { histoire, résumé } = paramètres ;
  const [imageUri, setImageUri] = useState(null);
  const [chargement, setLoading] = useState(false);
  const routeur = useRouter();

  useEffect(() => {
    const fetchImage = async () => {
      setLoading(true);
      essayer {
        const réponse = wait fetch("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", {
          méthode : "POST",
          en-têtes : { Autorisation : `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json" },
          corps : JSON.stringify

({ inputs : `Cartoonish ${summary}`, target_size : { width : 300, height : 300 } }),
        });

        if (!response.ok) lance une nouvelle erreur (`La demande a échoué : ${response.status}`);

        const blob = attendre la réponse.blob();
        const base64Data = attendre blobToBase64(blob);
        setImageUri(`data:image/jpeg;base64,${base64Data}`);
      } attraper (erreur) {
        console.error("Erreur lors de la récupération de l'image :", erreur);
      } enfin {
        setLoading(faux);
      }
    } ;

    récupérerImage();
  }, []);

  const blobToBase64 = (blob) => {
    renvoyer une nouvelle promesse ((résoudre, rejeter) => {
      const lecteur = nouveau FileReader();
      reader.onloadend = () => résoudre(reader.result.split(",")[1]);
      reader.onerror = rejeter ;
      lecteur.readAsDataURL(blob);
    });
  } ;

  retour (
    <Défilement>



<h3>
  
  
  Conclusion
</h3>

<p>Cette application est un excellent moyen de combiner les entrées des utilisateurs avec des modèles d'IA pour créer une expérience de narration dynamique. En utilisant React Native, l'API Hugging Face et Expo Router, nous avons créé une application de narration simple mais puissante qui peut divertir les enfants avec des histoires et des illustrations personnalisées.</p>


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!