Membina Penjana Cerita Kanak-Kanak Interaktif dengan React Native and Hugging Face API

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

import React, { useEffect, useRef, useState } daripada "react";
import {
  Lihat,
  teks,
  TouchableOpacity,
  Stylesheet,
  TextInput,
  animasi,
  Penunjuk Aktiviti,
} daripada "react-native";
import useKeyboardOffsetHeight daripada "../hooks/useKeyboardOffsetHeight";
import { HUGGING_FACE_KEY } daripada "../env";
import { useRouter } daripada "expo-router";

const Laman Utama = () => {
  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();
  const animatedValue = useRef(new Animated.Value(0)).semasa;
  penghala const = useRouter();

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: keyboardOffsetHeight ? -keyboardOffsetHeight * 0.5 : 0,
      tempoh: 500,
      useNativeDriver: benar,
    }).mula();
  }, [keyboardOffsetHeight]);

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

  const handleShowResult = () => {
    if (textInput.length > 5) {
      fetchStory();
    } lain {
      alert("Sila masukkan sedikit lagi butiran.");
    }
  };

  fungsi async fetchStory() {
    setIsLoading(true);
    cuba {
      let message = `Tulis cerita ringkas untuk kanak-kanak tentang ${textInput} ${
        selectedAgeRange ? "untuk kumpulan umur " selectedAgeRange : ""
      }, dalam perkataan mudah. Hanya sediakan kandungan cerita tanpa sebarang tajuk, tajuk atau maklumat tambahan.`;

      respons const = tunggu ambil(
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          kaedah: "POST",
          tajuk: {
            Keizinan: `Pembawa ${HUGGING_FACE_KEY}`,
            "Content-Type": "aplikasi/json",
          },
          badan: JSON.stringify({
            model: "meta-llama/Llama-3.2-3B-Instruct",
            mesej: [{ peranan: "pengguna", kandungan: mesej }],
            max_token: 500,
          }),
        }
      );

      jika (!response.ok) buang Ralat baharu("Gagal mengambil cerita");

      data const = menunggu respons.json();
      const storyContent = data.choices[0].message.content;

      // Ringkaskan cerita
      const summaryResponse = tunggu ambil(
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          kaedah: "POST",
          tajuk: {
            Keizinan: `Pembawa ${HUGGING_FACE_KEY}`,
            "Content-Type": "aplikasi/json",
          },
          badan: JSON.stringify({
            model: "meta-llama/Llama-3.2-3B-Instruct",
            mesej: [
              { peranan: "pengguna", kandungan: `Ringkaskan cerita ini dalam satu baris: "${storyContent}"` },
            ],
            max_token: 30,
          }),
        });

      jika (!summaryResponse.ok) buang Ralat baru("Gagal mengambil ringkasan");

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

      router.push({
        nama laluan: "/detail",
        params: { story: storyContent, summary: summaryContent },
      });
    } tangkap (ralat) {
      console.error("Ralat semasa mengambil cerita atau ringkasan:", ralat);
      alert("Ralat semasa mengambil cerita. Sila cuba lagi.");
    } akhirnya {
      setIsLoading(false);
    }
  }

  kembali (
    <Animated.ScrollView
      melantun={false}
      keyboardShouldPersistTaps="handled"
      keyboardDismissMode="on-drag"
     >



<h3>
  
  
  Komponen Utama Home.js
</h3>

<ul>
<li>
<strong>Input Teks dan Pemilih Umur</strong>: Membenarkan pengguna memilih julat umur dan memasukkan gesaan cerita.</li>
<li>
<strong>Ambil Cerita</strong>: fetchStory berinteraksi dengan API Wajah Memeluk untuk menjana dan meringkaskan cerita berdasarkan input.</li>
<li>
<strong>Navigasi</strong>: Jika cerita dan ringkasan berjaya diambil, apl itu menavigasi ke skrin Butiran untuk memaparkan hasilnya.</li>
</ul>


<hr>

<h3>
  
  
  Langkah 3: Memaparkan Cerita dan Imej pada Skrin Butiran
</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>Skrin Butiran mendapatkan semula cerita yang dijana, meringkaskannya dan memaparkan imej kartun yang dijana AI berkaitan dengan cerita itu.</p><h4>
  
  
  Kod Detail.js
</h4>



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

const Butiran = () => {
  const params = useLocalSearchParams();
  const {cerita, ringkasan } = params;
  const [imageUri, setImageUri] = useState(null);
  const [loading, setLoading] = useState(false);
  penghala const = useRouter();

  useEffect(() => {
    const fetchImage = async () => {
      setLoading(benar);
      cuba {
        respons const = tunggu ambil("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", {
          kaedah: "POST",
          pengepala: { Keizinan: `Pembawa ${HUGGING_FACE_KEY}`, "Content-Type": "application/json" },
          badan: JSON.stringify

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

        jika (!response.ok) buang Ralat baharu(`Permintaan gagal: ${response.status}`);

        const blob = tunggu respons.blob();
        const base64Data = tunggu blobToBase64(blob);
        setImageUri(`data:image/jpeg;base64,${base64Data}`);
      } tangkap (ralat) {
        console.error("Ralat mengambil imej:", ralat);
      } akhirnya {
        setLoading(false);
      }
    };

    fetchImage();
  }, []);

  const blobToBase64 = (blob) => {
    kembalikan Janji baharu((selesaikan, tolak) => {
      const reader = new FileReader();
      reader.onloadend = () => selesaikan(reader.result.split(",")[1]);
      reader.onerror = menolak;
      reader.readAsDataURL(gumpal);
    });
  };

  kembali (
    <Paparan Tatal>



<h3>
  
  
  Membungkus
</h3>

<p>Apl ini ialah cara terbaik untuk menggabungkan input pengguna dengan model AI untuk mencipta pengalaman bercerita yang dinamik. Dengan menggunakan React Native, Hugging Face API dan Expo Router, kami telah mencipta apl penceritaan yang ringkas tetapi berkuasa yang boleh menghiburkan kanak-kanak dengan cerita dan ilustrasi yang dibuat tersuai.</p>