React Native 및 Hugging Face API를 사용하여 대화형 어린이 스토리 생성기 구축

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

"react"에서 React, { useEffect, useRef, useState }를 가져옵니다.
수입 {
  보다,
  텍스트,
  터치 가능불투명도,
  스타일시트,
  텍스트 입력,
  생기 있는,
  활동표시기,
} "반응 네이티브"에서;
"../hooks/useKeyboardOffsetHeight"에서 useKeyboardOffsetHeight를 가져옵니다.
"../env"에서 { HUGGING_FACE_KEY } 가져오기;
"expo-router"에서 import { useRouter };

const 홈 = () => {
  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 animationValue = useRef(new Animated.Value(0)).current;
  const 라우터 = useRouter();

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: 키보드오프셋높이 ? -keyboardOffsetHeight * 0.5 : 0,
      지속시간: 500,
      useNativeDriver: 사실,
    }).시작();
  }, [keyboardOffsetHeight]);

  const handlerAgeRangeSelect = (범위) => setSelectedAgeRange(범위);

  const handlerShowResult = () => {
    if (textInput.length > 5) {
      페치스토리();
    } 또 다른 {
      Alert("좀 더 자세히 입력해주세요.");
    }
  };

  비동기 함수 fetchStory() {
    setIsLoading(true);
    노력하다 {
      let message = `${textInput} ${에 관한 아이들을 위한 간단한 이야기를 써 보세요.
        선택 연령 범위 ? "연령대 " selectedAgeRange : ""
      }, 일반 단어로. 제목, 제목, 추가 정보 없이 스토리 콘텐츠만 제공하세요.`;

      const 응답 = 가져오기를 기다립니다(
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          메소드: "POST",
          헤더: {
            승인: `전달자 ${HUGGING_FACE_KEY}`,
            "콘텐츠 유형": "응용 프로그램/json",
          },
          본문: JSON.stringify({
            모델: "meta-llama/Llama-3.2-3B-Instruct",
            메시지: [{ 역할: "사용자", 콘텐츠: 메시지 }],
            최대 토큰: 500,
          }),
        }
      );

      if (!response.ok) throw new Error("스토리를 가져오지 못했습니다");

      const 데이터 = response.json()을 기다립니다;
      const storyContent = data.choices[0].message.content;

      // 스토리 요약
      const summaryResponse = 가져오기를 기다립니다(
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          메소드: "POST",
          헤더: {
            승인: `전달자 ${HUGGING_FACE_KEY}`,
            "콘텐츠 유형": "응용 프로그램/json",
          },
          본문: JSON.stringify({
            모델: "meta-llama/Llama-3.2-3B-Instruct",
            메시지: [
              { 역할: "user", content: `이 스토리를 한 줄로 요약하세요: "${storyContent}"` },
            ],
            최대_토큰: 30,
          }),
        });

      if (!summaryResponse.ok) throw new Error("요약을 가져오지 못했습니다.");

      const summaryData = summaryResponse.json()을 기다립니다.
      const summaryContent = summaryData.choices[0].message.content;

      라우터.푸시({
        경로명: "/detail",
        params: { 스토리: storyContent, 요약: summaryContent },
      });
    } 잡기(오류) {
      console.error("스토리 또는 요약을 가져오는 중 오류가 발생했습니다:", error);
      Alert("스토리를 가져오는 중 오류가 발생했습니다. 다시 시도해 주세요.");
    } 마지막으로 {
      setIsLoading(false);
    }
  }

  반품 (
    <Animated.ScrollView
      반송={false}
      키보드ShouldPersistTaps="처리됨"
      키보드DismissMode="온-드래그"
     >



<h3>
  
  
  Home.js의 주요 구성 요소
</h3>

<ul>
<li>
<strong>텍스트 입력 및 연령 선택기</strong>: 사용자가 연령대를 선택하고 스토리 프롬프트를 입력할 수 있습니다.</li>
<li>
<strong>Fetch Story</strong>: fetchStory는 Hugging Face API와 상호작용하여 입력을 기반으로 스토리를 생성하고 요약합니다.</li>
<li>
<strong>탐색</strong>: 스토리와 요약을 성공적으로 가져오면 앱이 세부정보 화면으로 이동하여 결과를 표시합니다.</li>
</ul>


<hr>

<h3>
  
  
  3단계: 상세 화면에 스토리 및 이미지 표시
</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>상세화면에서는 생성된 스토리를 가져와서 요약하고, 스토리와 관련된 AI가 생성한 만화 이미지를 보여줍니다.</p><h4>
  
  
  Detail.js 코드
</h4>



<pre class="brush:php;toolbar:false">"react"에서 React, { useEffect, useState }를 가져옵니다.
import { StyleSheet, View, Text, TouchableOpacity, ActivityIndicator, Image, ScrollView } from "react-native";
"expo-router"에서 import { useLocalSearchParams, useRouter };
"../env"에서 { HUGGING_FACE_KEY } 가져오기;
"@expo/Vector-icons/Ionicons"에서 Ionicons를 가져옵니다.

const 세부정보 = () => {
  const params = useLocalSearchParams();
  const { 스토리, 요약 } = params;
  const [imageUri, setImageUri] = useState(null);
  const [loading, setLoading] = useState(false);
  const 라우터 = useRouter();

  useEffect(() => {
    const fetchImage = 비동기() => {
      setLoading(true);
      노력하다 {
        const 응답 = fetch("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", {
          메소드: "POST",
          헤더: { 승인: `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json" },
          본문: JSON.stringify

({ 입력: `만화적인 ${summary}`, target_size: { 너비: 300, 높이: 300 } }),
        });

        if (!response.ok) throw new Error(`요청 실패: ${response.status}`);

        const blob = 응답을 기다립니다.blob();
        const base64Data = blobToBase64(blob)을 기다립니다;
        setImageUri(`data:image/jpeg;base64,${base64Data}`);
      } 잡기(오류) {
        console.error("이미지 가져오기 오류:", error);
      } 마지막으로 {
        setLoading(false);
      }
    };

    가져오기이미지();
  }, []);

  const blobToBase64 = (blob) => {
    return new Promise((해결, 거부) => {
      const reader = 새로운 FileReader();
      reader.onloadend = () => 해결(reader.result.split(",")[1]);
      reader.onerror = 거부;
      reader.readAsDataURL(blob);
    });
  };

  반품 (
    <스크롤뷰>



<h3>
  
  
  마무리
</h3>

<p>이 앱은 사용자 입력과 AI 모델을 결합하여 역동적인 스토리텔링 경험을 만드는 훌륭한 방법입니다. React Native, Hugging Face API 및 Expo Router를 사용하여 맞춤형 스토리와 일러스트레이션으로 아이들에게 즐거움을 선사할 수 있는 간단하면서도 강력한 스토리텔링 앱을 만들었습니다.</p>