React Native と Hugging Face API を使用したインタラクティブなキッズ ストーリー ジェネレーターの構築

この投稿では、Hugging Face の強力な AI モデルを使用して、プロンプトと年齢層に基づいて子供の物語を生成する React Native アプリの構築について説明します。このアプリでは、ユーザーがプロンプトを入力し、年齢層を選択すると、カスタム ストーリーとそのストーリーを要約した漫画のような画像が表示されます。

特徴

1. インタラクティブな物語の生成: ユーザーの入力により AI が魅力的な子供向けの物語を作成します。
2. 要約と視覚化: ストーリーが要約され、AI が生成した画像と並べて表示されます。
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 コード

import React, { useEffect, useRef, useState } from "react";
輸入 {
  ビュー、
  文章、
  タッチ可能な不透明度、
  スタイルシート、
  テキスト入力、
  アニメーション、
  アクティビティインジケーター、
「反応ネイティブ」から;
useKeyboardOffsetHeight から "../hooks/useKeyboardOffsetHeight" をインポートします。
「../env」から { HUGGING_FACE_KEY } をインポートします。
import { useRouter } from "expo-router";

const ホーム = () => {
  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 animeValue = useRef(new Animated.Value(0)).current;
  const ルーター = useRouter();

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue:keyboardOffsetHeight ? -keyboardOffsetHeight * 0.5 : 0、
      持続時間: 500、
      useNativeDriver: true、
    }）。始める（）;
  }, [keyboardOffsetHeight]);

  const handleAgeRangeSelect = (範囲) => setSelectedAgeRange(範囲);

  const handleShowResult = () => {
    if (textInput.length > 5) {
      fetchStory();
    } それ以外 {
      alert("もう少し詳しく入力してください。");
    }
  };

  非同期関数 fetchStory() {
    setIsLoading(true);
    試す {
      let message = `${textInput} ${ についての子供向けの簡単な物語を書いてください
        選択された年齢範囲? "年齢層 " selectedAgeRange : ""
      }、分かりやすく言えば。見出し、タイトル、追加情報を含まないストーリーのコンテンツのみを提供してください。`;

      const 応答 = fetch を待ちます(
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          メソッド: "POST"、
          ヘッダー: {
            権限: `ベアラー ${HUGGING_FACE_KEY}`、
            "コンテンツタイプ": "アプリケーション/json",
          }、
          本文: JSON.stringify({
            モデル: "メタ-ラマ/ラマ-3.2-3B-命令",
            メッセージ: [{ 役割: "ユーザー"、内容: メッセージ }]、
            max_tokens: 500、
          })、
        }
      );

      if (!response.ok) throw new Error("ストーリーの取得に失敗しました");

      const data = 応答を待ちます.json();
      const storyContent = data.choices[0].message.content;

      // 話を要約する
      const summaryResponse = await fetch(
        "https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions",
        {
          メソッド: "POST"、
          ヘッダー: {
            権限: `ベアラー ${HUGGING_FACE_KEY}`、
            "コンテンツタイプ": "アプリケーション/json",
          }、
          本文: JSON.stringify({
            モデル: "メタ-ラマ/ラマ-3.2-3B-命令",
            メッセージ: [
              { role: "user", content: `このストーリーを 1 行で要約します: "${storyContent}"` },
            ]、
            max_tokens: 30、
          })、
        });

      if (!summaryResponse.ok) throw new Error("概要の取得に失敗しました");

      const summaryData = await summaryResponse.json();
      const summaryContent = summaryData.choices[0].message.content;

      ルーター.push({
        パス名: "/detail",
        params: { ストーリー: storyContent、サマリー: summaryContent }、
      });
    } キャッチ (エラー) {
      console.error("ストーリーまたは概要の取得中にエラーが発生しました:", error);
      alert("ストーリーの取得中にエラーが発生しました。もう一度お試しください。");
    } ついに {
      setIsLoading(false);
    }
  }

  戻る （
    <Animated.ScrollView
      バウンス={false}
      キーボードShouldPersistTaps="処理済み"
      keyboardDismissMode="オンドラッグ"
     >



<h3>
  
  
  Home.js の主要コンポーネント
</h3>

<ul>
<li>
<strong>テキスト入力と年齢セレクター</strong>: ユーザーが年齢範囲を選択し、ストーリー プロンプトを入力できるようにします。</li>
<li>
<strong>ストーリーのフェッチ</strong>: fetchStory は Hugging Face API と対話し、入力に基づいてストーリーを生成および要約します。</li>
<li>
<strong>ナビゲーション</strong>: ストーリーと概要が正常に取得されると、アプリは詳細画面に移動して結果を表示します。</li>
</ul>


<hr>

<h3>
  
  
  ステップ3：詳細画面にストーリーと画像を表示する
</h3>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173252011696327.jpg"  class="lazy" alt="Building an Interactive Kids Story Generator with React Native and Hugging Face API" /></p>

<p>詳細画面では、生成されたストーリーを取得して要約し、ストーリーに関連する AI 生成の漫画画像が表示されます。</p><h4>
  
  
  Detail.js コード
</h4>



<pre class="brush:php;toolbar:false">import React, { useEffect, useState } from "react";
import { StyleSheet、View、Text、TouchableOpacity、ActivityIndi​​cator、Image、ScrollView } from "react-native";
import { useLocalSearchParams, useRouter } from "expo-router";
「../env」から { HUGGING_FACE_KEY } をインポートします。
「@expo/vector-icons/Ionicons」から Ionicons をインポートします。

const 詳細 = () => {
  const params = useLocalSearchParams();
  const { ストーリー、概要 } = params;
  const [imageUri, setImageUri] = useState(null);
  const [ロード中、setLoading] = useState(false);
  const ルーター = useRouter();

  useEffect(() => {
    const fetchImage = async () => {
      setLoading(true);
      試す {
        const response = await fetch("https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0", {
          メソッド: "POST"、
          headers: { Authorization: `Bearer ${HUGGING_FACE_KEY}`, "Content-Type": "application/json" },
          本文: JSON.stringify

({ 入力: `漫画 ${概要}`, target_size: { 幅: 300, 高さ: 300 } }),
        });

        if (!response.ok) throw new Error(`リクエストが失敗しました: ${response.status}`);

        const blob = 応答を待ちます。blob();
        constbase64Data = blobToBase64(blob)を待ちます;
        setImageUri(`data:image/jpeg;base64,${base64Data}`);
      } キャッチ (エラー) {
        console.error("画像取得エラー:", error);
      } ついに {
        setLoading(false);
      }
    };

    fetchImage();
  }、[]);

  const blobToBase64 = (blob) => {
    return new Promise((解決、拒否) => {
      const リーダー = 新しい FileReader();
      Reader.onloadend = () => solve(reader.result.split(",")[1]);
      Reader.onerror = 拒否;
      Reader.readAsDataURL(blob);
    });
  };

  戻る （
    <スクロールビュー>



<h3>
  
  
  まとめ
</h3>

<p>このアプリは、ユーザー入力と AI モデルを組み合わせて動的なストーリーテリング エクスペリエンスを作成する優れた方法です。 React Native、Hugging Face API、Expo Router を使用して、カスタムメイドのストーリーやイラストで子供たちを楽しませる、シンプルかつ強力なストーリーテリング アプリを作成しました。</p>


          

            
        

以上がReact Native と Hugging Face API を使用したインタラクティブなキッズ ストーリー ジェネレーターの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。