使用 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中文網其他相關文章！