feat: 放大标注区域
This commit is contained in:
maxmon
parent
3af5ddebc5
commit
132880715c
|
|
@ -116,7 +116,7 @@ export default ({
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.point-box {
|
.point-box {
|
||||||
width: 300px;
|
width: 400px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,339 @@
|
||||||
|
<template>
|
||||||
|
<div class="anno-img-box">
|
||||||
|
<div class="seg-box">
|
||||||
|
<img class="anno-img" id="anno-img" @click="addSeg($event)" :src="`data:image/jpeg;base64,${fileContent}`" @dragstart="$event.preventDefault()" @contextmenu="$event.preventDefault()">
|
||||||
|
<div v-for="annoDetail in annoDetails" :seg="annoDetail" :key="`${annoDetail.segs[0][0]}_${annoDetail.segs[0][1]}`" :style="{
|
||||||
|
left: annoDetail.segs[0][0]*100 + '%',
|
||||||
|
top: annoDetail.segs[0][1]*100 + '%',
|
||||||
|
backgroundColor: types[annoDetail.type]?types[annoDetail.type].color:'#f00',
|
||||||
|
}" class="seg" @contextmenu="$event.preventDefault();delSeg(annoDetail, true)" @touchstart="$event.preventDefault();delSeg(annoDetail, false)" @mouseover="overSeg($event, annoDetail)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import npyjs from 'npyjs'
|
||||||
|
import { InferenceSession, Tensor } from 'onnxruntime-web'
|
||||||
|
|
||||||
|
const ort = require('onnxruntime-web')
|
||||||
|
|
||||||
|
console.log(ort)
|
||||||
|
// console.log(npyjs)
|
||||||
|
|
||||||
|
// const IMAGE_PATH = '/assets/data/dogs.jpg'
|
||||||
|
const IMAGE_EMBEDDING = '/assets/data/dogs_embedding.npy'
|
||||||
|
// const MODEL_DIR = '/assets/data/sam_onnx_quantized_example.onnx'
|
||||||
|
const MODEL_DIR = './sam_onnx_quantized_example.onnx'
|
||||||
|
let model = null
|
||||||
|
async function getModel () {
|
||||||
|
console.log(InferenceSession, MODEL_DIR)
|
||||||
|
model = await InferenceSession.create(MODEL_DIR)
|
||||||
|
console.log('model', model)
|
||||||
|
// go()
|
||||||
|
}
|
||||||
|
getModel()
|
||||||
|
|
||||||
|
// Use a Canvas element to produce an image from ImageData
|
||||||
|
function imageDataToImage (imageData) {
|
||||||
|
const canvas = imageDataToCanvas(imageData)
|
||||||
|
const image = new Image()
|
||||||
|
image.src = canvas.toDataURL()
|
||||||
|
return image
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert the onnx model mask prediction to ImageData
|
||||||
|
function arrayToImageData (input, width, height) {
|
||||||
|
const [r, g, b, a] = [0, 114, 189, 255] // the masks's blue color
|
||||||
|
const arr = new Uint8ClampedArray(4 * width * height).fill(0)
|
||||||
|
for (let i = 0; i < input.length; i++) {
|
||||||
|
// Threshold the onnx model mask prediction at 0.0
|
||||||
|
// This is equivalent to thresholding the mask using predictor.model.mask_threshold
|
||||||
|
// in python
|
||||||
|
if (input[i] > 0.0) {
|
||||||
|
arr[4 * i + 0] = r
|
||||||
|
arr[4 * i + 1] = g
|
||||||
|
arr[4 * i + 2] = b
|
||||||
|
arr[4 * i + 3] = a
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return new ImageData(arr, height, width)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Canvas elements can be created from ImageData
|
||||||
|
function imageDataToCanvas (imageData) {
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
canvas.width = imageData.width
|
||||||
|
canvas.height = imageData.height
|
||||||
|
ctx.putImageData(imageData, 0, 0)
|
||||||
|
return canvas
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert the onnx model mask output to an HTMLImageElement
|
||||||
|
export function onnxMaskToImage (input, width, height) {
|
||||||
|
return imageDataToImage(arrayToImageData(input, width, height))
|
||||||
|
}
|
||||||
|
// async function go () {
|
||||||
|
// let n = 0
|
||||||
|
// const pointCoords = new Float32Array(2 * (n + 1))
|
||||||
|
// const pointLabels = new Float32Array(n + 1)
|
||||||
|
|
||||||
|
// // Add in the extra point/label when only clicks and no box
|
||||||
|
// // The extra point is at (0, 0) with label -1
|
||||||
|
// pointCoords[2 * n] = 0.0
|
||||||
|
// pointCoords[2 * n + 1] = 0.0
|
||||||
|
// pointLabels[n] = -1.0
|
||||||
|
|
||||||
|
// const feeds = {
|
||||||
|
// image_embeddings: new Tensor('float32', [
|
||||||
|
// 256,
|
||||||
|
// 64,
|
||||||
|
// 64
|
||||||
|
// ]),
|
||||||
|
// point_coords: new Tensor('float32', pointCoords, [1, n + 1, 2]),
|
||||||
|
// point_labels: new Tensor('float32', pointLabels, [1, n + 1]),
|
||||||
|
// orig_im_size: new Tensor('float32', [
|
||||||
|
// 256,
|
||||||
|
// 256
|
||||||
|
// ]),
|
||||||
|
// mask_input: new Tensor(
|
||||||
|
// 'float32',
|
||||||
|
// new Float32Array(256 * 256),
|
||||||
|
// [1, 1, 256, 256]
|
||||||
|
// ),
|
||||||
|
// has_mask_input: new Tensor('float32', [0])
|
||||||
|
// }
|
||||||
|
// const results = await model.run(feeds)
|
||||||
|
// const output = results[model.outputNames[0]]
|
||||||
|
// // The predicted mask returned from the ONNX model is an array which is
|
||||||
|
// // rendered as an HTML image using onnxMaskToImage() from maskUtils.tsx.
|
||||||
|
// let img = onnxMaskToImage(output.data, output.dims[2], output.dims[3])
|
||||||
|
// console.log(img)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Decode a Numpy file into a tensor.
|
||||||
|
const loadNpyTensor = async (tensorFile, dType) => {
|
||||||
|
// let npLoader = new npyjs()
|
||||||
|
// const npArray = await npLoader.load(tensorFile)
|
||||||
|
// const tensor = new ort.Tensor(dType, npArray.data, npArray.shape)
|
||||||
|
// return tensor
|
||||||
|
}
|
||||||
|
// Load the Segment Anything pre-computed embedding
|
||||||
|
Promise.resolve(loadNpyTensor(IMAGE_EMBEDDING, 'float32')).then(
|
||||||
|
(embedding) => console.log(embedding)
|
||||||
|
)
|
||||||
|
|
||||||
|
// Run the ONNX model every time clicks has changed
|
||||||
|
const modelData = ({ clicks, tensor, modelScale }) => {
|
||||||
|
const imageEmbedding = tensor
|
||||||
|
let pointCoords
|
||||||
|
let pointLabels
|
||||||
|
let pointCoordsTensor
|
||||||
|
let pointLabelsTensor
|
||||||
|
|
||||||
|
// Check there are input click prompts
|
||||||
|
if (clicks) {
|
||||||
|
let n = clicks.length
|
||||||
|
|
||||||
|
// If there is no box input, a single padding point with
|
||||||
|
// label -1 and coordinates (0.0, 0.0) should be concatenated
|
||||||
|
// so initialize the array to support (n + 1) points.
|
||||||
|
pointCoords = new Float32Array(2 * (n + 1))
|
||||||
|
pointLabels = new Float32Array(n + 1)
|
||||||
|
|
||||||
|
// Add clicks and scale to what SAM expects
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
pointCoords[2 * i] = clicks[i].x * modelScale.samScale
|
||||||
|
pointCoords[2 * i + 1] = clicks[i].y * modelScale.samScale
|
||||||
|
pointLabels[i] = clicks[i].clickType
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add in the extra point/label when only clicks and no box
|
||||||
|
// The extra point is at (0, 0) with label -1
|
||||||
|
pointCoords[2 * n] = 0.0
|
||||||
|
pointCoords[2 * n + 1] = 0.0
|
||||||
|
pointLabels[n] = -1.0
|
||||||
|
|
||||||
|
// Create the tensor
|
||||||
|
pointCoordsTensor = new Tensor('float32', pointCoords, [1, n + 1, 2])
|
||||||
|
pointLabelsTensor = new Tensor('float32', pointLabels, [1, n + 1])
|
||||||
|
}
|
||||||
|
const imageSizeTensor = new Tensor('float32', [
|
||||||
|
modelScale.height,
|
||||||
|
modelScale.width
|
||||||
|
])
|
||||||
|
|
||||||
|
if (pointCoordsTensor === undefined || pointLabelsTensor === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// There is no previous mask, so default to an empty tensor
|
||||||
|
const maskInput = new Tensor(
|
||||||
|
'float32',
|
||||||
|
new Float32Array(256 * 256),
|
||||||
|
[1, 1, 256, 256]
|
||||||
|
)
|
||||||
|
// There is no previous mask, so default to 0
|
||||||
|
const hasMaskInput = new Tensor('float32', [0])
|
||||||
|
|
||||||
|
return {
|
||||||
|
image_embeddings: imageEmbedding,
|
||||||
|
point_coords: pointCoordsTensor,
|
||||||
|
point_labels: pointLabelsTensor,
|
||||||
|
orig_im_size: imageSizeTensor,
|
||||||
|
mask_input: maskInput,
|
||||||
|
has_mask_input: hasMaskInput
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(modelData)
|
||||||
|
|
||||||
|
// const runONNX = async () => {
|
||||||
|
// try {
|
||||||
|
// if (
|
||||||
|
// model === null ||
|
||||||
|
// clicks === null ||
|
||||||
|
// tensor === null ||
|
||||||
|
// modelScale === null
|
||||||
|
// ) {
|
||||||
|
// return
|
||||||
|
// } else {
|
||||||
|
// // Preapre the model input in the correct format for SAM.
|
||||||
|
// // The modelData function is from onnxModelAPI.tsx.
|
||||||
|
// const feeds = modelData({
|
||||||
|
// clicks,
|
||||||
|
// tensor,
|
||||||
|
// modelScale,
|
||||||
|
// })
|
||||||
|
// if (feeds === undefined) return
|
||||||
|
// // Run the SAM ONNX model with the feeds returned from modelData()
|
||||||
|
// const results = await model.run(feeds)
|
||||||
|
// const output = results[model.outputNames[0]]
|
||||||
|
// // The predicted mask returned from the ONNX model is an array which is
|
||||||
|
// // rendered as an HTML image using onnxMaskToImage() from maskUtils.tsx.
|
||||||
|
// setMaskImg(onnxMaskToImage(output.data, output.dims[2], output.dims[3]))
|
||||||
|
// }
|
||||||
|
// } catch (e) {
|
||||||
|
// console.log(e)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
export default ({
|
||||||
|
name: 'CVSeg',
|
||||||
|
props: {
|
||||||
|
fileContent: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
annoDetails: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
nowType: {
|
||||||
|
type: String,
|
||||||
|
default: '1234',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
types: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
save: {
|
||||||
|
type: Function,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
segs: [],
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
log (...args) {
|
||||||
|
console.log(args)
|
||||||
|
},
|
||||||
|
addSeg (ev) {
|
||||||
|
ev.preventDefault()
|
||||||
|
if (!this.nowType) {
|
||||||
|
alert('请先选择标注类型')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const tar = ev.target
|
||||||
|
const newSeg = [ev.offsetX / tar.offsetWidth, ev.offsetY / tar.offsetHeight]
|
||||||
|
// this.segs.push(newSeg)
|
||||||
|
// console.log(this.segs)
|
||||||
|
this.annoDetails.push({
|
||||||
|
segs: [newSeg],
|
||||||
|
type: this.nowType
|
||||||
|
})
|
||||||
|
this.save()
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
delSeg (annoDetail, isForce) {
|
||||||
|
if (!isForce) {
|
||||||
|
// 非强制删除，就判定下当前类型是否一致，不一致就不删除
|
||||||
|
if (this.nowType !== annoDetail.type) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const idx = this.annoDetails.indexOf(annoDetail)
|
||||||
|
console.log(annoDetail, this.segs)
|
||||||
|
this.annoDetails.splice(idx, 1)
|
||||||
|
this.save()
|
||||||
|
},
|
||||||
|
overSeg (ev, seg) {
|
||||||
|
if (ev.which === 3) {
|
||||||
|
this.delSeg(seg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
annoDetails: {
|
||||||
|
handler (val) {
|
||||||
|
// const annoImg = document.getElementById('anno-img')
|
||||||
|
// annoImg.src = val
|
||||||
|
// console.log(annoImg.width)
|
||||||
|
// this.width = annoImg.width
|
||||||
|
// this.height = annoImg.height
|
||||||
|
console.log(val)
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.anno-img-box {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.anno-img {
|
||||||
|
width: 100%;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.seg-box {
|
||||||
|
width: 400px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.seg {
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f00;
|
||||||
|
}
|
||||||
|
.seg:hover {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue