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

Dalam siaran ini, kami akan meneruskan pembinaan apl React Native yang menjana cerita kanak-kanak berdasarkan gesaan dan julat umur, menggunakan model AI berkuasa Hugging Face. Apl ini membenarkan pengguna memasukkan gesaan, memilih lingkungan umur, dan kemudian melihat cerita tersuai bersama-sama dengan imej kartun yang meringkaskan cerita itu.

Ciri-ciri

1. Penjanaan Cerita Interaktif: Input pengguna membimbing AI untuk mencipta cerita kanak-kanak yang menarik.
2. Ringkasan dan Visualisasi: Cerita diringkaskan dan dipaparkan bersama imej yang dijana AI.
3. Animasi UI Lancar: Animasi menyesuaikan UI untuk input papan kekunci.
4. Navigasi dan Penggayaan: Menggunakan Penghala Ekspo untuk navigasi mudah dan gaya tersuai untuk UI yang menarik.

Mari pecahkan setiap bahagian!

---

Langkah 1: Menyediakan API Asli React dan Memeluk Wajah

Mulakan dengan mencipta projek React Native baharu dengan Ekspo:

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

Sediakan Penghala Ekspo dalam apl anda untuk navigasi mudah dan pasang sebarang kebergantungan tambahan yang anda perlukan, seperti ikon atau animasi.

Langkah 2: Mencipta Skrin Utama Penjana Cerita

Dalam fail Home.js, kami menyediakan skrin yang membolehkan pengguna memilih lingkungan umur, memasukkan gesaan cerita dan tekan butang untuk menjana cerita.

Kod Home.js

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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173252011696327.jpg"  class="lazy" 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>


          

            
        

Atas ialah kandungan terperinci Membina Penjana Cerita Kanak-Kanak Interaktif dengan React Native and Hugging Face API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!