Hugging Face's logo

Spaces:
horiyouta
/
Machine-Learning-RPG
Sleeping

App Files Community
Machine-Learning-RPG
File size: 7,845 Bytes 
0fd1185
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
861a629
0fd1185
 
 
 
 
861a629
 
 
 
 
 
 
 
0fd1185
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Machine Learning RPG</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body class="text-white">
    <div class="background-grid"></div>
    <div class="background-glow"></div>

    <!-- ★★★ タイトル画面を追加 ★★★ -->
    <div id="title-screen" class="fixed inset-0 z-50 flex flex-col justify-center items-center">
        <div class="title-logo">
            <h1 class="text-7xl font-bold tracking-widest">MACHINE LEARNING</h1><br>
            <h2 class="text-8xl font-bold tracking-wider text-glow-yellow">RPG</h2>
        </div>
        <button id="start-game-btn" class="btn btn-primary mt-12 text-2xl px-12 py-4">ゲームを始める</button>
        <p class="mt-8 text-cyan-300/60 font-mono">ニューラルネットワークを構築・訓練し、MNISTモンスターを倒せ！</p>
    </div>

    <!-- ★★★ ゲームコンテナを追加 ★★★ -->
    <div id="game-container" class="container mx-auto p-4 h-screen flex-col hidden">
        <header class="text-center mb-4 flex-shrink-0">
            <h1 class="text-5xl font-bold tracking-widest text-glow">Machine Learning RPG</h1>
            <p class="text-cyan-300/80 font-mono tracking-wider">ニューラルネットワークを構築・訓練し、MNISTモンスターを倒せ！</p>
        </header>

        <div class="flex-grow flex gap-4 min-h-0">
            <!-- 左: モデル構築エリア -->
            <aside class="w-1/4 glass-pane flex flex-col">
                <h2 class="section-title"><i class="fas fa-microchip mr-3"></i>あなたのモデル</h2>
                <div id="player-model-layers" class="flex-grow bg-black/20 rounded-lg p-2 space-y-2 overflow-y-auto min-h-0 relative">
                    <canvas id="layer-connections" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
                    <p class="text-gray-400 text-center p-4">インベントリからレイヤー（層）をここにドラッグ＆ドロップしてください。</p>
                </div>
                <div class="mt-4 text-center p-4">
                    <button id="battle-btn" class="btn btn-primary w-full" disabled>
                        <i class="fas fa-fist-raised"></i> バトル開始！
                    </button>
                    <button id="restart-btn" class="btn btn-secondary w-full mt-2 hidden">
                        <i class="fas fa-redo"></i> タイトルへ戻る
                    </button>
                </div>
            </aside>

            <!-- 中央: バトルエリア -->
            <main class="w-1/2 glass-pane p-4 flex flex-col items-center justify-between relative">
                <div class="w-full">
                    <h2 class="character-name text-red-400">ENEMY: MNIST_MONSTER</h2>
                    <div class="hp-bar-container">
                        <div id="enemy-hp-bar" class="hp-bar" style="width: 100%">100%</div>
                    </div>
                </div>
                <div id="enemy-area" class="text-center relative">
                    <div class="enemy-scanline"></div>
                    <div class="enemy-glitch-overlay"></div>
                    <p id="enemy-message" class="text-lg text-cyan-200">挑戦者を待っている...</p>
                    <img id="enemy-image" src="" alt="MNIST Monster" class="hidden w-48 h-48 rounded-lg mt-4 enemy-image-style">
                </div>
                <div class="w-full">
                    <h2 class="character-name text-green-400">PLAYER: AI_AGENT</h2>
                    <div class="hp-bar-container">
                        <div id="player-hp-bar" class="hp-bar" style="width: 100%">100%</div>
                    </div>
                </div>
                <div id="battle-log" class="absolute bottom-24 left-1/2 -translate-x-1/2 text-2xl font-bold text-center w-full text-glow-yellow"></div>
            </main>

            <!-- 右: アイテム（層）エリア -->
            <aside class="w-1/4 glass-pane flex flex-col">
                <h2 class="section-title"><i class="fas fa-cubes mr-3"></i>インベントリ</h2>
                <div id="layer-inventory" class="p-2 min-h-0 flex-grow overflow-y-auto"></div> 
                <div id="item-info-area" class="mt-4 h-64 glass-pane-inner flex-shrink-0 flex flex-col">
                    <div id="layer-description" class="text-sm text-gray-300 h-16 overflow-y-auto mb-2 p-2">
                        <p>アイテムをクリックまたはホバーすると、ここに説明が表示されます。</p>
                    </div>
                    <div id="preview-animation-area" class="flex-grow bg-black/30 rounded-lg relative overflow-hidden">
                        <div class="idle-particles"></div>
                    </div>
                </div>
            </aside>
        </div>

        <!-- 下: メッセージログエリア -->
        <footer id="message-log-area" class="flex-shrink-0 h-24 glass-pane mt-4 p-3 overflow-y-auto font-mono text-sm"></footer>
    </div>

    <!-- モーダル (変更なし) -->
    <div id="item-selection-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm flex-col justify-center items-center z-50 hidden">
        <h2 class="text-4xl font-bold mb-8 text-glow-yellow tracking-widest">報酬を選択せよ</h2>
        <div id="item-choices" class="flex gap-8"></div>
        <div id="choice-info-area" class="mt-8 w-3/4 h-64 glass-pane flex gap-4 p-4">
            <div id="choice-description" class="w-1/2 text-lg text-gray-300">
                <p>アイテムにカーソルを合わせるかタップすると、ここに説明が表示されます。</p>
            </div>
            <div id="choice-preview-area" class="w-1/2 bg-black/30 rounded-lg relative overflow-hidden">
                 <div class="idle-particles"></div>
            </div>
        </div>
        <!-- ★★★ ここから追加 ★★★ -->
        <div id="choice-selection-footer" class="mt-4 text-center opacity-0 transition-opacity duration-300">
            <button id="confirm-choice-btn" class="btn btn-primary text-xl px-10 py-3" disabled>
                <i class="fas fa-check-circle mr-2"></i> このアイテムにする
            </button>
            <!-- 選択されたアイテムのIDを保持するための非表示要素 -->
            <input type="hidden" id="selected-choice-id">
        </div>
    </div>
    <div id="animation-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm flex justify-center items-center z-50 hidden">
        <div id="visualization-area" class="w-[95%] h-[90%] glass-pane relative p-4 overflow-hidden">
            <div id="labels-container" class="absolute inset-x-0 top-0 h-24 pointer-events-none flex items-center"></div>
            <div id="prediction-result" class="absolute text-2xl font-bold right-8 top-8 opacity-0 transition-opacity duration-500"></div>
            <button id="close-modal-btn" class="absolute top-4 left-4 text-3xl text-gray-400 hover:text-white transition-colors">&times;</button>
        </div>
    </div>

    <!-- eel.jsの読み込みを削除 -->
    <script type="text/javascript" src="script.js"></script>
</body>

</html>