【初心者向け】Hugging Face Spaces 簡単無料WEBツール・ゲーム制作 -Spaceを作成し公開する-

pip install gradio

import gradio as gr
import random

# 1. 九九の読み仮名データ (辞書)
KUKU_YOMI = {
    1: {1: "いんいちが いち", 2: "いんにが に", 3: "いんさんが さん", 4: "いんしが し", 5: "いんごが ご", 6: "いんろくが ろく", 7: "いんしちが しち", 8: "いんぱちが はち", 9: "いんくが く"},
    2: {1: "にいちが に", 2: "ににんが し", 3: "にさんが ろく", 4: "にしが はち", 5: "にご じゅう", 6: "にろく じゅうに", 7: "にしち じゅうし", 8: "にはち じゅうろく", 9: "にく じゅうはち"},
    3: {1: "さんいちが さん", 2: "さんにが ろく", 3: "さざんが く", 4: "さんし じゅうに", 5: "さんご じゅうご", 6: "さぶろく じゅうはち", 7: "さんしち にじゅういち", 8: "さんぱ にじゅうし", 9: "さんく にじゅうしち"},
    4: {1: "しいちが し", 2: "しにが はち", 3: "しさん じゅうに", 4: "しし じゅうろく", 5: "しご にじゅう", 6: "しろく にじゅうし", 7: "ししち にじゅうはち", 8: "しは さんじゅうに", 9: "しく さんじゅうろく"},
    5: {1: "ごいちが ご", 2: "ごに じゅう", 3: "ごさん じゅうご", 4: "ごし にじゅう", 5: "ごご にじゅうご", 6: "ごろく さんじゅう", 7: "ごしち さんじゅうご", 8: "ごは しじゅう", 9: "ごっく しじゅうご"},
    6: {1: "ろくいちが ろく", 2: "ろくに じゅうに", 3: "ろくさん じゅうはち", 4: "ろくし にじゅうし", 5: "ろくご さんじゅう", 6: "ろくろく さんじゅうろく", 7: "ろくしち しじゅうに", 8: "ろくは しじゅうはち", 9: "ろっく ごじゅうし"},
    7: {1: "しちいちが しち", 2: "しちに じゅうし", 3: "しちさん にじゅういち", 4: "しちし にじゅうはち", 5: "しちご さんじゅうご", 6: "しちろく しじゅうに", 7: "しちしち しじゅうく", 8: "しちは ごじゅうろく", 9: "しちく ろくじゅうさん"},
    8: {1: "はちいちが はち", 2: "はちに じゅうろく", 3: "はちさん にじゅうし", 4: "はちし さんじゅうに", 5: "はちご しじゅう", 6: "はちろく しじゅうはち", 7: "はちしち ごじゅうろく", 8: "はっぱ ろくじゅうし", 9: "はっく しちじゅうに"},
    9: {1: "くいちが く", 2: "くに じゅうはち", 3: "くさん にじゅうしち", 4: "くし さんじゅうろく", 5: "くご しじゅうご", 6: "くろく ごじゅうし", 7: "くしち ろくじゅうさん", 8: "くは しちじゅうに", 9: "くく はちじゅういち"},
}


# 2. ロジック（Python関数）

def new_question(mode):
    """
    新しい問題を生成する。
    mode（"ランダム", "1の段" など）に応じて出題内容を変える。
    """
    yomi_text = "" # 読み仮名（デフォルトは空）
    
    if mode == "ランダム":
        a = random.randint(1, 9)
        b = random.randint(1, 9)
    else:
        # "Xの段" から X を取り出す
        a = int(mode.split('の')[0]) 
        b = random.randint(1, 9)
        
        # 読み仮名データを取得 (例: "さざんが く")
        full_reading = KUKU_YOMI[a][b] 
        
        # 読み仮名を " " で分割し、解答部分を "？？" に置き換える
        # rsplit(' ', 1) で「最後のスペース」だけで分割 (例: ['さざんが', 'く'])
        parts = full_reading.rsplit(' ', 1) 
        reading_prefix = parts[0]           # (例: "さざんが")
        
        yomi_text = f"### {reading_prefix} ？？" # (例: "### さざんが ？？")

    correct_answer = a * b
    question_text = f"## {a} x {b} は？"
    
    # [読み仮名, 問題文, 答え(Stateへ), 現在モード(Stateへ), 結果クリア, 入力欄クリア]
    # 戻り値は、outputsで指定したコンポーネントに順番に渡される
    return yomi_text, question_text, correct_answer, mode, "", None

def check_answer(user_answer, secret_answer):
    """
    答えを判定する
    """
    if user_answer is None:
        return "こたえをいれてね！"
        
    if int(user_answer) == secret_answer:
        return "## せいかい！すごい！ "
    else:
        return f"## おしい... ほんとうは {secret_answer} でした"

# 3. GradioのUIを構築 (gr.Blocks)
with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("#  九九(くく) れんしゅうアプリ ")

    # 重要な裏方（State）
    secret = gr.State() # 答えを記憶
    current_mode_state = gr.State("ランダム") # 現在のモードを記憶

    # UIコンポーネント
    with gr.Row():
        mode_radio = gr.Radio(
            choices=["ランダム", "1の段", "2の段", "3の段", "4の段", "5の段", "6の段", "7の段", "8の段", "9の段"],
            value="ランダム",
            label="れんしゅうモードを えらんでね"
        )
    
    # 読み仮名表示エリア
    yomi_display = gr.Markdown(value="")
    
    # 問題文表示エリア
    question_display = gr.Markdown(value="...") 

    with gr.Row():
        user_input = gr.Number(label="こたえは？", step=1)

    with gr.Row():
        check_button = gr.Button("こたえあわせ", variant="primary")
        next_button = gr.Button("つぎのもんだい")

    # 判定結果表示エリア
    result_output = gr.Markdown()

    # 4. イベントと関数を接続
    # (このイベント接続も変更なし)

    # (A) ページ読み込み時
    demo.load(
        fn=new_question,
        inputs=[current_mode_state],
        outputs=[yomi_display, question_display, secret, current_mode_state, result_output, user_input]
    )

    # (B) モード選択(Radio)が変更された時
    mode_radio.change(
        fn=new_question,
        inputs=[mode_radio],
        outputs=[yomi_display, question_display, secret, current_mode_state, result_output, user_input]
    )

    # (C) "こたえあわせ"ボタンがクリックされた時
    check_button.click(
        fn=check_answer,
        inputs=[user_input, secret], 
        outputs=[result_output]     
    )

    # (D) "つぎのもんだい"ボタンがクリックされた時
    next_button.click(
        fn=new_question,
        inputs=[current_mode_state],
        outputs=[yomi_display, question_display, secret, current_mode_state, result_output, user_input]
    )

# アプリを起動
demo.launch()