File size: 1,436 Bytes
b96b3a8 |
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 |
import React from 'react';
import InputImagePanel from './panels/InputImagePanel';
import ConvolutionPanel from './panels/ConvolutionPanel';
import ReLUPanel from './panels/ReLUPanel';
import PoolingPanel from './panels/PoolingPanel';
import DeepLayerPanel from './panels/DeepLayerPanel';
import FlatteningPanel from './panels/FlatteningPanel';
import BackpropagationPanel from './panels/BackpropagationPanel';
const CNNVisualizer: React.FC = () => {
return (
<div className="flex flex-col items-center w-full">
<header className="w-full py-8 px-4 text-center bg-gradient-to-r from-indigo-900 to-purple-900">
<h1 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
Convolutional Neural Network Visualized
</h1>
<p className="mt-4 text-lg text-blue-200 max-w-2xl mx-auto">
Explore how CNNs process images through multiple layers of abstraction
</p>
</header>
<main className="w-full max-w-6xl mx-auto">
<InputImagePanel />
<ConvolutionPanel />
<ReLUPanel />
<PoolingPanel />
<DeepLayerPanel />
<FlatteningPanel />
<BackpropagationPanel />
</main>
<footer className="w-full py-8 text-center text-gray-500 text-sm">
<p>© 2025 CNN Visualizer</p>
</footer>
</div>
);
};
export default CNNVisualizer; |