Building an Interactive Kids Story Generator with React Native and Hugging Face API

npx create-expo-app@latest KidsStoryApp cd KidsStoryApp 

import React, { useState } from "react"; import { View, Text, TouchableOpacity, StyleSheet, TextInput, Animated, ActivityIndicator, } from "react-native"; import useKeyboardOffsetHeight from "../hooks/useKeyboardOffsetHeight"; import { HUGGING_FACE_KEY } from "../env"; import { useRouter } from "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(); const router = useRouter(); const handleAgeRangeSelect = (r) => setSelectedAgeRange(r); const handleShowResult = () => { if (textInput.length > 5) { fetchStory(); } else { alert("Describe more..."); } }; async function fetchStory() { setIsLoading(true); // Start loading try { let message = `Write a simple story for kids about ${textInput} ${ selectedAgeRange ? "for age group " + selectedAgeRange : "" }, in plain words. Only provide the story content without any headings, titles, or extra information.`; // First request to get the story const response = await fetch( "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "meta-llama/Llama-3.2-3B-Instruct", messages: [ { role: "user", content: message, }, ], max_tokens: 500, }), } ); if (!response.ok) { throw new Error("Failed to fetch story"); } const data = await response.json(); const storyContent = data.choices[0].message.content; console.log("Generated Story:", message, storyContent); // Second request to summarize the story const summaryResponse = await fetch( "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "meta-llama/Llama-3.2-3B-Instruct", messages: [ { role: "user", content: `Summarize this story in a line: "${storyContent}"`, }, ], max_tokens: 30, }), } ); if (!summaryResponse.ok) { throw new Error("Failed to fetch summary"); } const summaryData = await summaryResponse.json(); const summaryContent = summaryData.choices[0].message.content; if (summaryContent) { router.push({ pathname: "/detail", params: { story: storyContent, summary: summaryContent }, }); } console.log("Story Summary:", summaryContent); setTextInput(""); // Clear input after successful fetch } catch (error) { console.error("Error fetching story or summary:", error); alert("Error fetching story or summary. Please try again later."); } finally { setIsLoading(false); // End loading } } return ( <Animated.ScrollView bounces={false} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" contentContainerStyle={styles.container} > <Text style={styles.header}>Select Age Range</Text>  <View style={styles.checkboxContainer}> {ageRanges.map((range, index) => ( <TouchableOpacity key={index} style={[ styles.checkbox, selectedAgeRange === range && styles.selectedCheckbox, ]} onPress={() => handleAgeRangeSelect(range)} > <Text style={styles.checkboxLabel}>{range}</Text>  </TouchableOpacity>  ))} </View>  <TextInput style={styles.textInput} placeholder="Make a story..." placeholderTextColor="#888" value={textInput} onChangeText={setTextInput} multiline /> {!keyboardOffsetHeight && ( <TouchableOpacity style={styles.showButton} onPress={handleShowResult} disabled={isLoading} // Disable button while loading > {isLoading ? ( <ActivityIndicator color="#fff" /> ) : ( <Text style={styles.showButtonText}>Show</Text>  )} </TouchableOpacity>  )} </Animated.ScrollView>  ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, alignItems: "center", backgroundColor: "#1c1c1c", }, header: { fontSize: 20, fontWeight: "bold", color: "#fff", marginVertical: 10, }, checkboxContainer: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", marginBottom: 20, }, checkbox: { width: 60, height: 60, borderRadius: 30, backgroundColor: "#333", alignItems: "center", justifyContent: "center", margin: 10, }, selectedCheckbox: { backgroundColor: "#1fb28a", }, checkboxLabel: { color: "#fff", fontSize: 14, fontWeight: "bold", }, textInput: { width: "100%", height: 150, backgroundColor: "#333", color: "#fff", borderRadius: 8, padding: 10, marginVertical: 20, fontSize: 16, }, showButton: { backgroundColor: "#1fb28a", borderRadius: 8, paddingVertical: 10, paddingHorizontal: 20, marginTop: 10, }, showButtonText: { color: "#fff", fontSize: 16, fontWeight: "bold", }, }); export default Home; 

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 } from "../env"; import Ionicons from "@expo/vector-icons/Ionicons"; 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); try { const response = await fetch("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", { method: "POST", headers: { Authorization: `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json" }, body: JSON.stringify ({ inputs: `Cartoonish ${summary}`, target_size: { width: 300, height: 300 } }), }); if (!response.ok) throw new Error(`Request failed: ${response.status}`); const blob = await response.blob(); const base64Data = await blobToBase64(blob); setImageUri(`data:image/jpeg;base64,${base64Data}`); } catch (error) { console.error("Error fetching image:", error); } finally { setLoading(false); } }; fetchImage(); }, []); const blobToBase64 = (blob) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result.split(",")[1]); reader.onerror = reject; reader.readAsDataURL(blob); }); }; return ( <ScrollView style={styles.container}> <TouchableOpacity onPress={() => router.back()}> <Ionicons name="arrow-back-circle-sharp" size={50} color="yellow" /> </TouchableOpacity>  {loading ? ( <ActivityIndicator size="large" color="#ffffff" /> ) : imageUri ? ( <Image source={{ uri: imageUri }} style={styles.image} />  ) : ( <Text style={styles.text}>No image generated yet.</Text>  )} <Text style={styles.header}>{story}</Text>  </ScrollView>  ); }; export default Detail; const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: "#1c1c1c" }, header: { fontSize: 24, color: "#ffffff", marginVertical: 16 }, text: { color: "#ffffff" }, image: { width: 300, height: 300, marginTop: 20, borderRadius: 10, alignSelf: "center" }, });