在这篇文章中，我们将逐步构建一个 React Native 应用程序，该应用程序使用 Hugging Face 强大的 AI 模型根据提示和年龄范围生成儿童故事。该应用程序允许用户输入提示，选择年龄范围，然后查看自定义故事以及总结故事的卡通图像。
让我们分解每个部分！
首先使用 Expo 创建一个新的 React Native 项目：
npx create-expo-app@latest KidsStoryApp cd KidsStoryApp
在您的应用中设置 Expo Router 以便于导航，并安装您可能需要的任何其他依赖项，例如图标或动画。
在 Home.js 文件中，我们设置了一个屏幕，用户可以在其中选择年龄范围、输入故事提示，然后按按钮生成故事。
从“react”导入React, { useEffect, useRef, useState };
进口 {
看法，
文本，
可触摸不透明度，
样式表，
文本输入，
动画,
活动指示器，
来自“react-native”；
从“../hooks/useKeyboardOffsetHeight”导入useKeyboardOffsetHeight；
从“../env”导入{HUGGING_FACE_KEY}；
从“expo-router”导入{useRouter}；
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 animatedValue = useRef(new Animated.Value(0)).current;
const 路由器 = useRouter();
useEffect(() => {
动画.timing(animatedValue, {
toValue：键盘偏移高度？ -键盘偏移高度 * 0.5 : 0,
持续时间：500，
使用NativeDriver：正确，
}）。开始（）;
}, [键盘偏移高度]);
const handleAgeRangeSelect = (范围) => setSelectedAgeRange(范围);
const handleShowResult = () =>; {
if (textInput.length > 5) {
获取故事（）；
} 别的 {
Alert("请输入更多详细信息。");
}
};
异步函数 fetchStory() {
setIsLoading(true);
尝试 {
let message = `为孩子们写一个关于 ${textInput} ${ 的简单故事
选择的年龄范围？ “针对年龄段” selectedAgeRange : “”
}，用简单的话来说。仅提供故事内容，不含任何标题、标题或额外信息。`;
常量响应 = 等待获取（
“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 data = 等待response.json();
const StoryContent = data.choices[0].message.content;
// 总结一下故事
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”，
消息：[
{ role: "user", content: `用一行总结这个故事："${storyContent}"` },
],
最大令牌数：30，
}),
}）；
if (!summaryResponse.ok) throw new Error("无法获取摘要");
constsummaryData = 等待summaryResponse.json();
const 摘要内容 = 摘要Data.choices[0].message.content;
路由器.push({
路径名：“/详细信息”，
参数：{ 故事：storyContent，摘要：summaryContent }，
});
} 捕获（错误）{
console.error("获取故事或摘要时出错：", error);
Alert("获取故事时出错。请重试。");
} 最后 {
setIsLoading(假);
}
}
返回 （
<h3>
Home.js 的关键组件
</h3>
详细信息屏幕检索生成的故事，对其进行总结，并显示人工智能生成的与故事相关的卡通图像。
从“react”导入React, { useEffect, useState };
从“react-native”导入 { StyleSheet、View、Text、TouchableOpacity、ActivityIndicator、Image、ScrollView }；
从“expo-router”导入{useLocalSearchParams，useRouter}；
从“../env”导入{HUGGING_FACE_KEY}；
从“@expo/vector-icons/Ionicons”导入 Ionicons；
const 详细信息 = () => {
const params = useLocalSearchParams();
const { 故事，摘要 } = 参数；
const [imageUri, setImageUri] = useState(null);
const [正在加载，setLoading] = useState(false);
const 路由器 = useRouter();
useEffect(() => {
const fetchImage = async () =>; {
设置加载（真）；
尝试 {
const 响应 = 等待 fetch("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", {
方法：“POST”，
headers: { 授权: `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(`数据：图像/jpeg;base64，${base64Data}`);
} 捕获（错误）{
console.error("获取图像时出错：", error);
} 最后 {
设置加载（假）；
}
};
获取图像（）；
}, []);
const blobToBase64 = (blob) =>; {
返回新的 Promise((解决, 拒绝) => {
const reader = new FileReader();
reader.onloadend = () =>;解决（reader.result.split（“，”）[1]）；
reader.onerror = 拒绝；
reader.readAsDataURL(blob);
});
};
返回 （
<h3>
总结
</h3>
<p>这个应用程序是将用户输入与人工智能模型相结合以创建动态讲故事体验的好方法。通过使用 React Native、Hugging Face API 和 Expo Router，我们创建了一个简单但功能强大的讲故事应用程序，可以通过定制的故事和插图来娱乐孩子们。</p>
以上是使用 React Native 和 Hugging Face API 构建交互式儿童故事生成器的详细内容。更多信息请关注PHP中文网其他相关文章！
