Hugging Face's logo

Spaces:
Msk7000
/
cnn_pooling
Running

App Files Community
cnn_pooling
File size: 16,564 Bytes
5f1ba93
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17b9b3d
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CNN 演算パズル：Pooling & Flatten</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
        body { font-family: 'Noto Sans JP', sans-serif; }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        // --- アイコンコンポーネント (SVG直接埋め込み) ---
        const Layers = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>
        );
        const Maximize2 = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
        );
        const MoveRight = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 8L22 12L18 16"/><path d="M2 12H22"/></svg>
        );
        const Layout = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
        );
        const Info = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        );
        const CheckCircle2 = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
        );
        const XCircle = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
        );
        const ChevronRight = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m9 18 6-6-6-6"/></svg>
        );
        const ChevronLeft = ({className}) => (
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m15 18-6-6 6-6"/></svg>
        );

        const App = () => {
            const [activeTab, setActiveTab] = React.useState('pooling');
            const [poolingMode, setPoolingMode] = React.useState('max');
            const [step, setStep] = React.useState(0);
            const [userInput, setUserInput] = React.useState('');
            const [feedback, setFeedback] = React.useState(null);
            const [score, setScore] = React.useState(0);

            const poolingInput = [
                [12, 20, 30, 0], [8, 12, 2, 15], [34, 70, 37, 4], [112, 100, 25, 12]
            ];
            const flattenInput = [
                [1, 0, 1], [0, 1, 0], [1, 1, 0]
            ];

            const getCorrectPoolingValue = (s) => {
                const r = Math.floor(s / 2) * 2;
                const c = (s % 2) * 2;
                const values = [poolingInput[r][c], poolingInput[r][c + 1], poolingInput[r + 1][c], poolingInput[r + 1][c + 1]];
                if (poolingMode === 'max') return Math.max(...values);
                return values.reduce((a, b) => a + b) / 4;
            };

            const getCorrectFlattenValue = (s) => flattenInput.flat()[s];

            const handleCheck = () => {
                const correctValue = activeTab === 'pooling' ? getCorrectPoolingValue(step) : getCorrectFlattenValue(step);
                if (parseFloat(userInput) === correctValue) {
                    setFeedback('correct');
                    setScore(s => s + 1);
                } else {
                    setFeedback('wrong');
                }
            };

            const nextStep = () => {
                const maxSteps = activeTab === 'pooling' ? 4 : 9;
                setStep((prev) => (prev + 1) % maxSteps);
                setUserInput('');
                setFeedback(null);
            };

            const resetGame = (tab) => {
                setActiveTab(tab);
                setStep(0);
                setUserInput('');
                setFeedback(null);
            };

            const renderPoolingGrid = () => {
                const targetRow = Math.floor(step / 2) * 2;
                const targetCol = (step % 2) * 2;
                return (
                    <div className="grid grid-cols-4 gap-2 bg-slate-100 p-2 rounded-lg border-4 border-slate-200">
                        {poolingInput.flat().map((val, i) => {
                            const r = Math.floor(i / 4), c = i % 4;
                            const isTarget = r >= targetRow && r < targetRow + 2 && c >= targetCol && c < targetCol + 2;
                            return <div key={i} className={`w-12 h-12 md:w-16 md:h-16 flex items-center justify-center font-bold rounded shadow-sm transition-all ${isTarget ? 'bg-amber-400 text-amber-900 ring-4 ring-white scale-105 z-10' : 'bg-white text-slate-400 opacity-50'}`}>{val}</div>
                        })}
                    </div>
                );
            };

            const renderFlattenGrid = () => (
                <div className="grid grid-cols-3 gap-2 bg-slate-100 p-2 rounded-lg border-4 border-slate-200">
                    {flattenInput.flat().map((val, i) => (
                        <div key={i} className={`w-12 h-12 md:w-16 md:h-16 flex items-center justify-center font-bold rounded shadow-sm transition-all ${i === step ? 'bg-indigo-500 text-white ring-4 ring-white scale-105 z-10' : 'bg-white text-slate-300'}`}>{val}</div>
                    ))}
                </div>
            );

            return (
                <div className="min-h-screen bg-slate-50 p-4 md:p-8 text-slate-800">
                    <div className="max-w-2xl mx-auto space-y-6 text-center">
                        <header>
                            <h1 className="text-3xl font-bold text-indigo-900 mb-2">CNN 演算パズル：Pooling & Flatten</h1>
                            <p className="text-slate-600">データの圧縮と並べ替えを体験しましょう</p>
                        </header>

                        {/* タブ */}
                        <div className="flex justify-center bg-white p-1 rounded-2xl shadow-sm border border-slate-200 inline-flex overflow-hidden">
                            <button onClick={() => resetGame('pooling')} className={`px-4 md:px-8 py-3 rounded-xl font-bold transition-all flex items-center gap-2 ${activeTab === 'pooling' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-500 hover:bg-slate-50'}`}><Maximize2 className="w-5 h-5" /> Pooling</button>
                            <button onClick={() => resetGame('flatten')} className={`px-4 md:px-8 py-3 rounded-xl font-bold transition-all flex items-center gap-2 ${activeTab === 'flatten' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-500 hover:bg-slate-50'}`}><Layers className="w-5 h-5" /> Flatten</button>
                        </div>

                        {/* 説明・設定カード */}
                        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                            <h2 className="text-lg font-semibold mb-4 flex items-center justify-center gap-2"><Info className="w-5 h-5 text-indigo-600" /> {activeTab === 'pooling' ? 'プーリング設定' : 'フラット化とは'}</h2>
                            {activeTab === 'pooling' ? (
                                <div className="space-y-4">
                                    <div className="flex p-1 bg-slate-100 rounded-lg max-w-xs mx-auto">
                                        <button onClick={() => { setPoolingMode('max'); setFeedback(null); setUserInput(''); }} className={`flex-1 py-2 text-sm font-bold rounded-md transition-all ${poolingMode === 'max' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-500'}`}>Max</button>
                                        <button onClick={() => { setPoolingMode('avg'); setFeedback(null); setUserInput(''); }} className={`flex-1 py-2 text-sm font-bold rounded-md transition-all ${poolingMode === 'avg' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-500'}`}>Avg</button>
                                    </div>
                                    <p className="text-xs text-slate-500">{poolingMode === 'max' ? '領域内の最大値を抽出します。' : '領域内の平均値を計算します。'}</p>
                                </div>
                            ) : (
                                <p className="text-sm text-slate-600 leading-relaxed">2次元のデータを1次元（1列）に変換します。左上から順番に並べます。</p>
                            )}
                        </div>

                        {/* 演習エリア */}
                        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col items-center">
                            <div className="w-full flex justify-between items-center mb-6">
                                <h2 className="font-bold text-slate-800">演算シミュレート</h2>
                                <div className="text-sm font-medium text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">Score: {score}</div>
                            </div>
                            <div className="mb-6">{activeTab === 'pooling' ? renderPoolingGrid() : renderFlattenGrid()}</div>
                            
                            <div className="w-full max-w-xs space-y-4">
                                <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
                                    <div className="flex gap-2">
                                        <input type="number" step="0.1" value={userInput} onChange={(e) => setUserInput(e.target.value)} className="flex-1 px-4 py-3 text-2xl font-bold text-center rounded-xl border-2 border-indigo-200 focus:border-indigo-500 outline-none" placeholder="?" />
                                        <button onClick={handleCheck} disabled={userInput === '' || feedback === 'correct'} className="bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 text-white px-6 py-2 rounded-xl font-bold">判定</button>
                                    </div>
                                    {feedback === 'correct' && <div className="mt-4 text-green-600 font-bold animate-bounce">✓ 正解！</div>}
                                    {feedback === 'wrong' && <div className="mt-4 text-red-500 font-bold">✗ 計算ミスかな？</div>}
                                </div>
                                <div className="flex gap-2">
                                    <button onClick={() => setStep(s => (s - 1 + (activeTab === 'pooling' ? 4 : 9)) % (activeTab === 'pooling' ? 4 : 9))} className="flex-1 py-3 border border-slate-200 rounded-xl hover:bg-slate-50 text-slate-500 flex items-center justify-center gap-1 font-medium"><ChevronLeft className="w-4 h-4"/>戻る</button>
                                    <button onClick={nextStep} className="flex-1 py-3 bg-slate-800 text-white rounded-xl hover:bg-slate-900 flex items-center justify-center gap-1 font-medium">次へ <ChevronRight className="w-4 h-4"/></button>
                                </div>
                            </div>

                            {/* 出力イメージ */}
                            <div className="mt-12 w-full border-t border-slate-100 pt-8 flex flex-col items-center">
                                <h3 className="text-[10px] font-bold text-slate-400 mb-6 uppercase tracking-widest text-center">Output Structure</h3>
                                <div className="flex justify-center">
                                    {activeTab === 'pooling' ? (
                                        <div className="grid grid-cols-2 gap-4">
                                            {Array.from({ length: 4 }).map((_, i) => {
                                                const isDone = i < step || (i === step && feedback === 'correct');
                                                const val = getCorrectPoolingValue(i);
                                                return <div key={i} className={`w-16 h-16 md:w-20 md:h-20 border-2 rounded-2xl flex items-center justify-center text-lg font-mono transition-all ${isDone ? 'bg-indigo-50 border-indigo-500 text-indigo-700 shadow-lg' : 'bg-transparent border-dashed border-slate-200 text-transparent'}`}>{isDone ? val : ''}</div>
                                            })}
                                        </div>
                                    ) : (
                                        <div className="flex flex-wrap justify-center gap-2 max-w-md">
                                            {Array.from({ length: 9 }).map((_, i) => {
                                                const isDone = i < step || (i === step && feedback === 'correct');
                                                const val = getCorrectFlattenValue(i);
                                                return <div key={i} className={`w-10 h-10 md:w-12 md:h-12 border-2 rounded flex items-center justify-center text-sm font-mono transition-all ${isDone ? 'bg-emerald-50 border-emerald-500 text-emerald-700 shadow-md' : 'bg-transparent border-dashed border-slate-200 text-transparent'}`}>{isDone ? val : ''}</div>
                                            })}
                                        </div>
                                    )}
                                </div>
                                <div className="mt-6">
                                    {activeTab === 'pooling' ? (
                                        <div className="inline-flex items-center gap-2 bg-amber-50 text-amber-700 px-4 py-2 rounded-full text-xs font-bold"><Layout className="w-4 h-4" /> 情報を圧縮しました！</div>
                                    ) : (
                                        <div className="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 px-4 py-2 rounded-full text-xs font-bold"><Layers className="w-4 h-4" /> 1次元形式になりました！</div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>