이 게시물에서는 Hugging Face의 강력한 AI 모델을 사용하여 프롬프트와 연령대를 기반으로 동화를 생성하는 React Native 앱을 구축하는 과정을 살펴보겠습니다. 이 앱을 통해 사용자는 프롬프트를 입력하고 연령대를 선택한 다음 스토리를 요약하는 만화 같은 이미지와 함께 맞춤 스토리를 볼 수 있습니다.
각 부분을 분해해보겠습니다!
Expo를 사용하여 새로운 React Native 프로젝트를 만드는 것부터 시작하세요.
npx create-expo-app@latest KidsStoryApp cd KidsStoryApp
손쉬운 탐색을 위해 앱에 Expo Router를 설정하고 아이콘이나 애니메이션과 같이 필요할 수 있는 추가 종속성을 설치하세요.
Home.js 파일에는 사용자가 연령대를 선택하고, 스토리 프롬프트를 입력하고, 버튼을 눌러 스토리를 생성할 수 있는 화면을 설정했습니다.
"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>
위 내용은 React Native 및 Hugging Face API를 사용하여 대화형 어린이 스토리 생성기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
