"> 제목 "> 제목 "> 
<head>
  <!-- HTML Meta Tags -->
  <meta charset="UTF-8" />
  <title> 제목 </title>
  <meta
    name="description"   content=" 설명 "   />
  <meta name="keywords" content="키워드, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <!-- Open Graph / Facebook -->
  <meta   property="og:title"   content="제목 "  />
  <meta  property="og:description" content=" 설명, 양파고, Yang Phago, 노션, 양파고 노션  "  />
  <meta property="og:image" content="대표 이미지" />
  <meta property="og:url" content="페이지 주소" />
  <meta property="og:type" content="website" />
</head>

<aside> 💡

</aside>

이미지에서 벡터로의 변환 시뮬레이션 | Claude

클로드3로 구현한 실습용 사이트

image.png

import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";

const ImageToVectorSimulation = () => {
  const [gridSize, setGridSize] = useState(5);
  const [pixelValues, setPixelValues] = useState([]);
  const canvasRef = useRef(null);

  useEffect(() => {
    initializePixelValues();
  }, [gridSize]);

  const initializePixelValues = () => {
    const newPixelValues = Array(gridSize * gridSize).fill(0);
    setPixelValues(newPixelValues);
  };

  const handlePixelClick = (index) => {
    const newPixelValues = [...pixelValues];
    newPixelValues[index] = newPixelValues[index] === 0 ? 255 : 0;
    setPixelValues(newPixelValues);
  };

  const drawGrid = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const cellSize = canvas.width / gridSize;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    pixelValues.forEach((value, index) => {
      const x = (index % gridSize) * cellSize;
      const y = Math.floor(index / gridSize) * cellSize;

      ctx.fillStyle = `rgb(${value}, ${value}, ${value})`;
      ctx.fillRect(x, y, cellSize, cellSize);

      ctx.strokeStyle = '#ccc';
      ctx.strokeRect(x, y, cellSize, cellSize);
    });
  };

  useEffect(() => {
    drawGrid();
  }, [pixelValues, gridSize]);

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>이미지에서 벡터로의 변환 시뮬레이션</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <p className="mb-2">그리드 크기: {gridSize}x{gridSize}</p>
          <Slider
            value={[gridSize]}
            onValueChange={([newSize]) => setGridSize(newSize)}
            min={3}
            max={10}
            step={1}
          />
        </div>

        <div className="flex justify-center">
          <canvas
            ref={canvasRef}
            width={300}
            height={300}
            onClick={(e) => {
              const rect = canvasRef.current.getBoundingClientRect();
              const x = e.clientX - rect.left;
              const y = e.clientY - rect.top;
              const cellSize = 300 / gridSize;
              const index = Math.floor(y / cellSize) * gridSize + Math.floor(x / cellSize);
              handlePixelClick(index);
            }}
            style={{ cursor: 'pointer' }}
          />
        </div>

        <div>
          <p className="mb-2">벡터 표현:</p>
          <div className="bg-gray-100 p-2 rounded overflow-x-auto">
            [{pixelValues.join(', ')}]
          </div>
        </div>

        <div>
          <p className="mb-2">설명:</p>
          <p>
            이 시뮬레이션은 간단한 흑백 이미지가 어떻게 벡터로 변환되는지 보여줍니다. 각 픽셀은 0(검은색)
            또는 255(흰색) 값을 가집니다. 그리드의 각 셀을 클릭하여 픽셀 값을 변경할 수 있습니다. 
            이미지의 모든 픽셀 값은 1차원 벡터로 표현됩니다.
          </p>
        </div>
      </CardContent>
    </Card>
  );
};

export default ImageToVectorSimulation;