import React, { useState } from 'react';
import { ChromePicker } from 'react-color';

function DepthMapVisualizer(props) {
  const { depthMap } = props;

  const [colors, setColors] = useState([
    { r: 0, g: 0, b: 255 },
    { r: 0, g: 255, b: 0 },
    { r: 255, g: 255, b: 0 },
    { r: 255, g: 0, b: 0 }
  ]);

  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const [currentColor, setCurrentColor] = useState({ r: 0, g: 0, b: 255 });

  const getColor = (depth) => {
    if (depth < 0.25) {
      return `rgb(0, ${Math.floor(depth * 1020)}, 255)`;
    } else if (depth < 0.5) {
      return `rgb(0, 255, ${Math.floor(1020 - depth * 1020)})`;
    } else if (depth < 0.75) {
      return `rgb(${Math.floor(depth * 1020) - 255}, 255, 0)`;
    } else {
      return `rgb(255, ${Math.floor(1020 - depth * 1020)}, 0)`;
    }
  };

  const normalizeDepthMap = (depthMap) => {
    const height = depthMap.length;
    const width = depthMap[0].length;

    let maxDepth = Number.MIN_VALUE;
    let minDepth = Number.MAX_VALUE;

    for (let i = 0; i < height; i++) {
      for (let j = 0; j < width; j++) {
        maxDepth = Math.max(maxDepth, depthMap[i][j]);
        minDepth = Math.min(minDepth, depthMap[i][j]);
      }
    }

    let depthRange = maxDepth - minDepth;

    let normalizedDepthMap = [];

    for (let i = 0; i < height; i++) {
      let row = [];
      for (let j = 0; j < width; j++) {
        let depth = (depthMap[i][j] - minDepth) / depthRange;
        let color = getColor(depth);
        row.push(color);
      }
      normalizedDepthMap.push(row);
    }

    return normalizedDepthMap;
  };

  const handleColorMapSelection = (newColor) => {
    let newColors = [...colors];
    newColors.push(newColor.rgb);
    setColors(newColors);
    setDisplayColorPicker(false);
  };

  let normalizedDepthMap = normalizeDepthMap(depthMap);
  let height = normalizedDepthMap.length;
  let width = normalizedDepthMap[0].length;

  let colorBar = colors.map((color, index) => {
    return (
      <div key={color-${index}} style={{ backgroundColor: `rgb(${color.r},${color.g},${color.b})`, height: '20px', width: `${100 / colors.length}%` }}>
        <div style={{ textAlign: 'center' }}>{index}</div>
      </div>
    );
  });

  let imageRows = normalizedDepthMap.map((row, rowIndex) => {
    let imageCells = row.map((color, cellIndex) => {
      return (
        <td key={cell-${rowIndex}-${cellIndex}} style={{ backgroundColor: color,</tr>
);
});

let imageTable = (
<table>
<tbody>
{imageRows}
</tbody>
</table>
);

return (
<div>
<div style={{ display: ‘flex’, alignItems: ‘center’ }}>
<div style={{ marginRight: ‘10px’ }}>Depth</div>
{colorBar}
</div>
<div>
{imageTable}
</div>
<button onClick={handleColorMapSelection}>Select Color Map</button>
</div>
);
}

export default DepthMapVisualizer;

This code is a React component that takes a 2D array representing a depth map and visualizes it as a table where each pixel is colored based on its depth value. The component normalizes the depth values and maps them to a color using the getColor() function. The color map used for normalization can be modified by the user through a color picker accessed by clicking the “Select Color Map” button. The current color map is displayed as a color bar above the depth map.

The component uses React hooks, specifically useState(), to manage state variables for the current color map (colors), whether the color picker is displayed (displayColorPicker), and the currently selected color (currentColor).

The component first normalizes the depth map using the normalizeDepthMap() function, which calculates the minimum and maximum depth values in the map and maps them to the minimum and maximum values of the color map.

The normalized depth map is then used to generate an HTML table where each cell is colored based on its normalized depth value using the getColor() function. The color bar above the table displays the colors in the current color map, with the index of each color displayed in the center of its corresponding cell.
นำเข้าปฏิกิริยา { useState } จาก 'ปฏิกิริยา'; นำเข้า { ChromePicker } จาก 'ปฏิกิริยาสี'; ฟังก์ชั่น DepthMapVisualizer (อุปกรณ์ประกอบฉาก) { const { deepMap } = อุปกรณ์ประกอบฉาก; const [สี, setColors] = useState ([ { r: 0, g: 0, b: 255 }, { r: 0, g: 255, b: 0 }, { r: 255, g: 255, b: 0 }, { r: 255, ก: 0, ข: 0 } ]); const [displayColorPicker, setDisplayColorPicker] = useState (เท็จ); const [currentColor, setCurrentColor] = useState ({ r: 0, g: 0, b: 255 }); const getColor = (ความลึก) => { ถ้า (ความลึก < 0.25) { return `rgb(0, ${Math.floor(ความลึก * 1,020)}, 255)`; } else if (ความลึก < 0.5) { return `rgb(0, 255, ${Math.floor(1020 - deep * 1020)})`; } else if (ความลึก < 0.75) { return `rgb(${Math.floor(deep * 1020) - 255}, 255, 0)`; } else { กลับ `rgb(255, ${Math.floor(1020 - ความลึก * 1020)}, 0)`; } }; const NormalizeDepthMap = (DeepMap) => { const height = deepMap.length; ความกว้าง const = ความลึกMap[0].ความยาว; ให้ maxDepth = Number.MIN_VALUE; ให้ minDepth = Number.MAX_VALUE; สำหรับ (ให้ i = 0; i <ความสูง; i++) { สำหรับ (ให้ j = 0; j < width; j++) { maxDepth = Math.max(maxDepth, deepMap[i][j]); minDepth = Math.min(minDepth, deepMap[i][j]); } } ให้ deepRange = maxDepth - minDepth; ให้ NormalizedDepthMap = []; สำหรับ (ให้ i = 0; i <ความสูง; i++) { ให้แถว = []; สำหรับ (ให้ j = 0; j <ความกว้าง; j++) { ให้ความลึก = (ความลึกMap[i][j] - minDepth) / deepRange; ให้ color = getColor(ความลึก); แถว.push(สี); } } NormalizedDepthMap.push(แถว); } ส่งคืน NormalizedDepthMap; }; const handleColorMapSelection = (newColor) => { ให้ newColors = [...colors]; newColors.push (newColor.rgb); setColors (สีใหม่); setDisplayColorPicker (เท็จ); }; ให้ NormalizedDepthMap = NormalizeDepthMap(DeepthMap); ให้ความสูง = NormalizedDepthMap.length; ให้ width = NormalizedDepthMap[0].length; ให้ colorBar = colours.map((color, index) => { return ( <div key={color-${index}} style={{ backgroundColor: `rgb(${color.r},${color.g },${color.b})`, ความสูง: '20px', ความกว้าง: `${100 / colours.length}%` }}> <div style={{ textAlign: 'center' }}>{index} </div> </div> ); }); ให้ imageRows = NormalizedDepthMap.map((row, rowIndex) => { la imageCells = row.map((color, cellIndex) => { return ( <td key={cell-${rowIndex}-${cellIndex}} สไตล์ ={{ backgroundColor: color,</tr> ); }); ให้ imageTable = ( <table> <tbody> {imageRows} </tbody> </table> ); return ( <div> <div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ marginRight: '10px' }}>ความลึก</div> {colorBar} </div> <div> {imageTable} </div> <button onClick={handleColorMapSelection}>Select Color Map</button> </div> ); } ส่งออก DepthMapVisualizer เริ่มต้น; รหัสนี้เป็นองค์ประกอบ React ที่ใช้อาร์เรย์ 2D แทนแผนที่ความลึกและแสดงภาพเป็นตารางที่แต่ละพิกเซล เป็นสีตามค่าความลึก ส่วนประกอบ ปรับค่าความลึกให้เป็นมาตรฐานและแม็ปกับสีโดยใช้ฟังก์ชัน getColor() ผู้ใช้สามารถแก้ไขได้ด้วยการคลิก "เลือกสี" โดยใช้ฟังก์ชัน getColor() ปุ่มแผนที่” แผนที่สีปัจจุบันจะแสดงเป็นแถบสีเหนือแผนที่ความลึก ส่วนประกอบใช้ React hooks โดยเฉพาะ useState() เพื่อจัดการตัวแปรสถานะสำหรับแผนผังสีปัจจุบัน (สี) ไม่ว่าตัวเลือกสีจะแสดงขึ้น (displayColorPicker) และสีที่เลือกในปัจจุบัน (currentColor) ส่วนประกอบจะปรับแผนที่ความลึกให้เป็นมาตรฐานในขั้นแรกโดยใช้ฟังก์ชัน NormalizeDepthMap() ซึ่งจะคำนวณค่าความลึกต่ำสุดและสูงสุดในแผนที่ และแมปค่าเหล่านั้นกับค่าต่ำสุดและสูงสุดของแผนผังสี จากนั้นแผนที่ความลึกที่เป็นมาตรฐานจะถูกนำมาใช้เพื่อสร้างตาราง HTML โดยแต่ละเซลล์จะถูกระบายสีตามค่าความลึกที่เป็นมาตรฐานโดยใช้ฟังก์ชัน getColor() แถบสีเหนือตารางจะแสดงสีในแผนผังสีปัจจุบัน โดยดัชนีของแต่ละสีจะแสดงที่กึ่งกลางของเซลล์ที่เกี่ยวข้อง
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence