File size: 3,034 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 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 |
import React from 'react';
import PanelContainer from '../ui/PanelContainer';
import GlowingBox from '../ui/GlowingBox';
import { Code, ImageIcon } from 'lucide-react';
const InputImagePanel: React.FC = () => {
return (
<PanelContainer
title="Input Image"
description="The CNN process begins with a raw input image. For our example, we'll use a handwritten digit '5'. The image is represented as a matrix of pixel values."
panelNumber={1}
>
<div className="flex flex-col md:flex-row gap-8 items-center justify-center">
<GlowingBox color="from-blue-500 to-cyan-500" className="flex-1">
<div className="relative" style={{height: '340px', aspectRatio: 1}}>
<img
src="https://i.pinimg.com/736x/9a/5b/c7/9a5bc759eb44df5554a902b210c89fa2.jpg"
alt="Handwritten digit 5"
className="w-full max-w-[300px] mx-auto rounded-lg border border-cyan-800/50"
style={{height: '340px', width: '340px'}}
/>
<div className="absolute inset-0 grid grid-cols-8 grid-rows-8 pointer-events-none opacity-30">
{Array(64).fill(0).map((_, index) => (
<div key={index} className="border border-cyan-400/20"></div>
))}
</div>
<div className="absolute top-2 left-2 flex items-center gap-2 bg-gray-900/70 p-2 rounded-lg border border-gray-700">
<ImageIcon size={16} className="text-cyan-400" />
<span className="text-xs text-cyan-400">Raw Input Image</span>
</div>
</div>
</GlowingBox>
<div className="flex-1 flex flex-col gap-4">
<h3 className="text-xl font-semibold text-gray-100">Digital Representation</h3>
<p className="text-gray-300 text-sm">
Computers see images as arrays of numbers. Each pixel is represented as a value between 0 (black) and 255 (white) for grayscale images.
</p>
<div className="mt-4 bg-gray-900 rounded-lg p-4 border border-gray-700">
<div className="flex items-center gap-2 mb-2">
<Code size={16} className="text-blue-400" />
<span className="text-xs text-blue-400">Matrix Representation</span>
</div>
<div className="text-xs font-mono text-gray-400 overflow-auto">
[<br />
[0, 0, 0, 0, 0, 0, 0, 0],<br />
[0, 0, 110, 190, 253, 70, 0, 0],<br />
[0, 0, 191, 40, 0, 191, 0, 0],<br />
[0, 0, 160, 0, 0, 120, 0, 0],<br />
[0, 0, 127, 195, 210, 20, 0, 0],<br />
[0, 0, 0, 0, 40, 173, 0, 0],<br />
[0, 0, 75, 60, 20, 230, 0, 0],<br />
[0, 0, 90, 230, 180, 35, 0, 0]<br />
]
</div>
</div>
</div>
</div>
</PanelContainer>
);
};
export default InputImagePanel; |