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

npx create-expo-app@latest KidsStoryApp
cd KidsStoryApp

从“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、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>