使用 React Native 和 Hugging Face API 构建交互式儿童故事生成器

在这篇文章中，我们将逐步构建一个 React Native 应用程序，该应用程序使用 Hugging Face 强大的 AI 模型根据提示和年龄范围生成儿童故事。该应用程序允许用户输入提示，选择年龄范围，然后查看自定义故事以及总结故事的卡通图像。

特征

1. 交互式故事生成：用户输入指导人工智能创建引人入胜的儿童故事。
2. 摘要和可视化：故事被摘要并与人工智能生成的图像一起显示。
3. 平滑的 UI 动画：动画使 UI 适应键盘输入。
4. 导航和样式：使用 Expo Router 轻松导航并自定义样式，打造有吸引力的 UI。

让我们分解每个部分！

---

第 1 步：设置 React Native 和 Hugging Face API

首先使用 Expo 创建一个新的 React Native 项目：

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

在您的应用中设置 Expo Router 以便于导航，并安装您可能需要的任何其他依赖项，例如图标或动画。

第 2 步：创建故事生成器主屏幕

在 Home.js 文件中，我们设置了一个屏幕，用户可以在其中选择年龄范围、输入故事提示，然后按按钮生成故事。

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>

• 文本输入和年龄选择器：允许用户选择年龄范围并输入故事提示。
• Fetch Story：fetchStory 与 Hugging Face API 交互，根据输入生成和总结故事。
• 导航：如果成功获取故事和摘要，应用程序将导航到详细信息屏幕以显示结果。

---

步骤 3：在详细信息屏幕上显示故事和图像

详细信息屏幕检索生成的故事，对其进行总结，并显示人工智能生成的与故事相关的卡通图像。

Detail.js 代码

从“react”导入React, { useEffect, useState };
从“react-native”导入 { StyleSheet、View、Text、TouchableOpacity、ActivityIndi​​cator、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中文网其他相关文章！