Frontends/cnn/src/components/panels/InputImagePanel.tsx

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 />
              &nbsp;&nbsp;[0, 0, 0, 0, 0, 0, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 110, 190, 253, 70, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 191, 40, 0, 191, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 160, 0, 0, 120, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 127, 195, 210, 20, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 0, 0, 40, 173, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 75, 60, 20, 230, 0, 0],<br />
              &nbsp;&nbsp;[0, 0, 90, 230, 180, 35, 0, 0]<br />
              ]
            </div>
          </div>
        </div>
      </div>
    </PanelContainer>
  );
};

export default InputImagePanel;