Erstellen eines interaktiven Geschichtengenerators für Kinder mit React Native und Hugging Face API

In diesem Beitrag gehen wir Schritt für Schritt durch die Erstellung einer React Native-App, die mithilfe der leistungsstarken KI-Modelle von Hugging Face Kindergeschichten basierend auf Eingabeaufforderungen und Altersgruppen generiert. Mit der App können Benutzer eine Eingabeaufforderung eingeben, eine Altersgruppe auswählen und dann eine benutzerdefinierte Geschichte zusammen mit einem Cartoon-Bild sehen, das die Geschichte zusammenfasst.

Merkmale

1. Interaktive Geschichtenerstellung: Benutzereingaben leiten die KI an, fesselnde Kindergeschichten zu erstellen.
2. Zusammenfassung und Visualisierung: Die Geschichte wird zusammengefasst und neben einem KI-generierten Bild angezeigt.
3. Glatte UI-Animation: Animationen passen die UI für Tastatureingaben an.
4. Navigation und Styling: Verwenden Sie Expo Router für eine einfache Navigation und benutzerdefinierte Stile für eine attraktive Benutzeroberfläche.

Lassen Sie uns jeden Teil aufschlüsseln!

---

Schritt 1: Einrichten der React Native- und Hugging Face-API

Erstellen Sie zunächst ein neues React Native-Projekt mit Expo:

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

Richten Sie Expo Router in Ihrer App für eine einfache Navigation ein und installieren Sie alle zusätzlichen Abhängigkeiten, die Sie möglicherweise benötigen, wie Symbole oder Animationen.

Schritt 2: Erstellen des Story Generator-Startbildschirms

In der Home.js-Datei richten wir einen Bildschirm ein, auf dem Benutzer einen Altersbereich auswählen, eine Story-Eingabeaufforderung eingeben und eine Schaltfläche drücken können, um eine Story zu generieren.

Home.js-Code

import React, { useEffect, useRef, useState } from „react“;
importieren {
  Sicht,
  Text,
  TouchableOpacity,
  StyleSheet,
  Texteingabe,
  Animiert,
  Aktivitätsindikator,
} von „react-native“;
importiere useKeyboardOffsetHeight aus „../hooks/useKeyboardOffsetHeight“;
import { HUGGING_FACE_KEY } aus „../env“;
import { useRouter } von „expo-router“;

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

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: KeyboardOffsetHeight ? -keyboardOffsetHeight * 0,5 : 0,
      Dauer: 500,
      useNativeDriver: true,
    }).Start();
  }, [keyboardOffsetHeight]);

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

  const handleShowResult = () => {
    if (textInput.length > 5) {
      fetchStory();
    } anders {
      Alert("Bitte geben Sie etwas mehr Details ein.");
    }
  };

  asynchrone Funktion fetchStory() {
    setIsLoading(true);
    versuchen {
      let message = `Schreiben Sie eine einfache Geschichte für Kinder über ${textInput} ${
        selectedAgeRange ? „für Altersgruppe“ selectedAgeRange: „“
      }, in einfachen Worten. Geben Sie nur den Inhalt der Geschichte ohne Überschriften, Titel oder zusätzliche Informationen an.`;

      const Antwort = Warten auf Abruf(
        „https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions“,
        {
          Methode: „POST“,
          Überschriften: {
            Autorisierung: „Bearer ${HUGGING_FACE_KEY}“,
            „Content-Type“: „application/json“,
          },
          body: JSON.stringify({
            Modell: „meta-llama/Llama-3.2-3B-Instruct“,
            Nachrichten: [{ Rolle: „Benutzer“, Inhalt: Nachricht }],
            max_tokens: 500,
          }),
        }
      );

      if (!response.ok) throw new Error("Fehler beim Abrufen der Story");

      const data = Warten auf Antwort.json();
      const storyContent = data.choices[0].message.content;

      // Fassen Sie die Geschichte zusammen
      const summaryResponse = waiting fetch(
        „https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions“,
        {
          Methode: „POST“,
          Überschriften: {
            Autorisierung: „Bearer ${HUGGING_FACE_KEY}“,
            „Content-Type“: „application/json“,
          },
          body: JSON.stringify({
            Modell: „meta-llama/Llama-3.2-3B-Instruct“,
            Nachrichten: [
              { Rolle: „Benutzer“, Inhalt: „Diese Geschichte in einer Zeile zusammenfassen: „${storyContent}“` },
            ],
            max_tokens: 30,
          }),
        });

      if (!summaryResponse.ok) throw new Error("Zusammenfassung konnte nicht abgerufen werden");

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

      router.push({
        Pfadname: „/detail“,
        Parameter: { story: storyContent, summary: summaryContent },
      });
    } Catch (Fehler) {
      console.error("Fehler beim Abrufen der Story oder Zusammenfassung:", Fehler);
      Alert("Fehler beim Abrufen der Story. Bitte versuchen Sie es erneut.");
    } Endlich {
      setIsLoading(false);
    }
  }

  zurückkehren (
    <Animated.ScrollView
      bounces={false}
      keyboardShouldPersistTaps="handled"
      keyboardDismissMode="on-drag"
     >



<h3>
  
  
  Schlüsselkomponenten von Home.js
</h3>

<ul>
<li>
<strong>Texteingabe und Altersauswahl</strong>: Ermöglicht dem Benutzer die Auswahl eines Altersbereichs und die Eingabe einer Story-Eingabeaufforderung.</li>
<li>
<strong>Story abrufen</strong>: fetchStory interagiert mit der Hugging Face API, um basierend auf der Eingabe eine Story zu generieren und zusammenzufassen.</li>
<li>
<strong>Navigation</strong>: Wenn eine Story und eine Zusammenfassung erfolgreich abgerufen wurden, navigiert die App zum Detailbildschirm, um die Ergebnisse anzuzeigen.</li>
</ul>


<hr>

<h3>
  
  
  Schritt 3: Story und Bild auf dem Detailbildschirm anzeigen
</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>Der Detailbildschirm ruft die generierte Geschichte ab, fasst sie zusammen und zeigt ein KI-generiertes Cartoon-Bild an, das sich auf die Geschichte bezieht.</p><h4>
  
  
  Detail.js-Code
</h4>



<pre class="brush:php;toolbar:false">import React, { useEffect, useState } from „react“;
import { StyleSheet, View, Text, TouchableOpacity, ActivityIndicator, Image, ScrollView } from „react-native“;
import { useLocalSearchParams, useRouter } from „expo-router“;
import { HUGGING_FACE_KEY } aus „../env“;
Ionicons aus „@expo/vector-icons/Ionicons“ importieren;

const Detail = () => {
  const params = useLocalSearchParams();
  const { story, summary } = params;
  const [imageUri, setImageUri] = useState(null);
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const fetchImage = async () => {
      setLoading(true);
      versuchen {
        const Antwort = Warten auf fetch("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", {
          Methode: „POST“,
          headers: { Authorization: `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json" },
          Körper: JSON.stringify

({ Eingaben: „Cartoonish ${summary}“, target_size: { width: 300, height: 300 } }),
        });

        if (!response.ok) throw new Error(`Anfrage fehlgeschlagen: ${response.status}`);

        const blob = Warten auf Antwort.blob();
        const base64Data = waiting blobToBase64(blob);
        setImageUri(`data:image/jpeg;base64,${base64Data}`);
      } Catch (Fehler) {
        console.error("Fehler beim Abrufen des Bildes:", Fehler);
      } Endlich {
        setLoading(false);
      }
    };

    fetchImage();
  }, []);

  const blobToBase64 = (blob) => {
    neues Versprechen zurückgeben((auflösen, ablehnen) => {
      const reader = new FileReader();
      reader.onloadend = () => lösen(reader.result.split(",")[1]);
      reader.onerror = ablehnen;
      reader.readAsDataURL(blob);
    });
  };

  zurückkehren (
    <ScrollView>



<h3>
  
  
  Zusammenfassung
</h3>

<p>Diese App ist eine großartige Möglichkeit, Benutzereingaben mit KI-Modellen zu kombinieren, um ein dynamisches Storytelling-Erlebnis zu schaffen. Durch die Verwendung von React Native, Hugging Face API und Expo Router haben wir eine einfache, aber leistungsstarke Storytelling-App erstellt, die Kinder mit maßgeschneiderten Geschichten und Illustrationen unterhalten kann.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonErstellen eines interaktiven Geschichtengenerators für Kinder mit React Native und Hugging Face API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!