ウェブカメラと AI を用いたカラーパレットの抽出

git clone https://github.com/griddbnet/Blogs.git --branch color-extraction

cd color-detection-openai
cd apps
npm install

OPENAI_API_KEY=sk-proj-secret
VITE_APP_URL=http://localhost:3000

npm run start:build

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js
nvm install 16

# verifies the right Node.js version is in the environment
node -v # should print `v16.20.2`

# verifies the right NPM version is in the environment
npm -v # should print `8.19.4``

sudo systemctl status gridstore

sudo systemctl start gridstore

OPENAI_API_KEY=sk-proj-secret

const initializeWebcam = () => {
    navigator.mediaDevices.getUserMedia({
            video: true
        })
        .then(stream => {
            videoRef.current.srcObject = stream
        })
        .catch(error => {
            console.error('getUserMedia error:', error)
        })
}

const captureImage = () => {
    const context = canvasRef.current.getContext('2d')
    context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height)

    const base64Image = canvasRef.current.toDataURL('image/jpeg')
    processImage(base64Image)
}

app.post('/process-image', async (req, res) => {
    const {
        image
    } = req.body

    if (!image) {
        return res.status(400).json({
            error: 'No image provided'
        })
    }
    // eslint-disable-next-line no-undef
    const result = await getColorAnalysis(image)
    res.json(result.choices[0])
})

async function getColorAnalysis(base64Image) {
    const response = await openai.chat.completions.create({
        model: "gpt-4o-mini-2024-07-18",
        messages: [{
                role: "system",
                content: systemPrompt
            },
            {
                role: "user",
                content: [{
                        type: "image_url",
                        image_url: {
                            url: base64Image
                        }
                    },
                    {
                        type: "text",
                        text: userPrompt
                    }
                ]
            }
        ],
        temperature: 0.51,
        max_tokens: 3000,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
    });

    return response;
}

const userPrompt = "Extract the seven most prominent colors from the provided image. Use color clustering techniques to identify and present these colors in Hex values. Answer with the raw array values ONLY. DO NOT FORMAT IT.";

const systemPrompt = `You are an AI specialized in colorimetry, the science and technology of color detection and measurement. You possess deep knowledge of the principles of color science, including color spaces, color matching functions, and the use of devices such as spectrophotometers and colorimeters. You provide accurate and detailed analyses of color properties, offer solutions for color consistency issues, and assist in applications ranging from imaging and printing to manufacturing and display technologies. Use your expertise to answer questions, solve problems, and provide color detection and measurement guidance.`;

['#2A2C9B', '#F08A7D', '#8E5DB2', '#E8A1A3', '#4D3B9E', '#7F3C8F', '#B57AB3']

export async function saveData({ image, genColors }) {
    const id = generateRandomID()
    const picture = Buffer(image)
    const colors = String(genColors)

    const packetInfo = [parseInt(id), picture, colors]
    const saveStatus = await GridDB.insert(packetInfo, collectionDb)
    return saveStatus
}

app.post('/process-image', async (req, res) => {
    const { image } = req.body

    if (!image) {
        return res.status(400).json({ error: 'No image provided' })
    }

    // eslint-disable-next-line no-undef
    const result = await getColorAnalysis(image)
    const colorsArray = result.choices[0].message.content

    // save data to the database
    const saveStatus = await saveData(image, colorsArray)
    console.log(saveStatus)

    res.json(result.choices[0])
})

// WebcamContainer.js
const WebcamContainer = ({ onColorsExtracted }) => {

   const captureImage = () => {
      const context = canvasRef.current.getContext('2d')
      context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height)

      const base64Image = canvasRef.current.toDataURL('image/jpeg')
      processImage(base64Image)
    }
    // code processing here

    return (
        <div id="webcam-container">
            <video id="webcam" ref={videoRef} autoPlay playsInline width="640" height="480"></video>
            <canvas id="canvas" ref={canvasRef} width="640" height="480" style={{ display: 'none' }}></canvas>
            <button id="capture" onClick={captureImage}>Capture</button>
            <button id="switch-camera" onClick={switchCamera}>Switch Camera</button>
        </div>
    )
}
export default WebcamContainer

// eslint-disable-next-line react/prop-types
const ColorRectangles = ({ colors }) => {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 700 100"
            className="mx-auto">
            {colors.map((color, index) => (
                <rect
                    key={index}
                    x={index * 100}
                    y="0"
                    width="100"
                    height="100"
                    fill={color}></rect>
            ))}
        </svg>
    )
}

export default ColorRectangles

['#4B8B3B', '#C4B600', '#7D7D7D', '#E3D4A0', '#2E2E2E', '#F6F1D3', '#A6A6A6']

/**
 * Extracting the buffer data
 * Assume the result data name is jsonData 
 */
const bufferData = jsonData[0][1].data;

// Converting buffer data to Uint8Array object
const uint8Array = new Uint8Array(bufferData);

// Converting Uint8Array to UTF-8 string
const utf8String = new TextDecoder('utf-8').decode(uint8Array);

console.log(utf8String);

http://localhost:3000/delete/8900

sudo su gsadm

gs_sh

gs[public]> showcontainer
gs[public]> select * from ColorPalettes;
1 results (38ms)
gs[public]> delete from ColorPalettes where id=6609;