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

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

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>