Skip to content

Commit 39e8032

Browse files
seveibarseveibar
committed
updates and fixes for mmgc1-cpp
1 parent b6ca5ce commit 39e8032

File tree

8 files changed

+91
-48
lines changed

8 files changed

+91
-48
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@semantic-release/git": "^9.0.0",
1111
"get-image-data": "^3.0.1",
1212
"material-survey": "^1.0.34",
13-
"mmgc1-cpp": "^1.0.6",
13+
"mmgc1-cpp": "^1.0.22",
1414
"moment": "^2.23.0",
1515
"react-full-screen": "^0.2.4",
1616
"react-hotkeys": "^2.0.0",

‎src/Annotator/reducers/general-reducer.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,11 @@ export default (state: MainLayoutState, action: Action) => {
306306
}
307307
}
308308

309+
let defaultRegion = undefined
310+
if (activeImage) {
311+
defaultRegion = activeImage.regions.slice(-1)[0].cls
312+
}
313+
309314
switch (state.selectedTool) {
310315
case "create-point": {
311316
state = saveToHistory(state, "Create Point")
@@ -317,6 +322,7 @@ export default (state: MainLayoutState, action: Action) => {
317322
editingLabels: true,
318323
color: getRandomColor(),
319324
id: getRandomId(),
325+
cls: defaultRegion,
320326
}
321327
break
322328
}

‎src/FullImageSegmentationAnnotator/index.story.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from "react"
44

55
import { storiesOf } from "@storybook/react"
66
import { action } from "@storybook/addon-actions"
7-
import exampleImage from "../ImageCanvas/seves_desk.story.jpg"
7+
import orange from "./orange.story.png"
88

99
import FullImageSegmentationAnnotator from "./"
1010

@@ -14,7 +14,26 @@ storiesOf("FullImageSegmentationAnnotator", module).add("Basic", () => (
1414
images={[
1515
{
1616
name: "Seve's Desk",
17-
src: "https://a.allegroimg.com/s128/113a6e/09d2c0ed4f278610e555c95b1d50/Rama-BIANCHI-OLTRE-XR4-DISC-carbon-Vision-ACR-51cm-Dedykowany-a-do-kolarstwo-szosowe",
17+
// src:
18+
// "https://a.allegroimg.com/s128/113a6e/09d2c0ed4f278610e555c95b1d50/Rama-BIANCHI-OLTRE-XR4-DISC-carbon-Vision-ACR-51cm-Dedykowany-a-do-kolarstwo-szosowe",
19+
// src: "https://i.imgur.com/Dv5lkQZ.png",
20+
src: orange,
21+
regions: [
22+
[0, 100, 125],
23+
[0, 100, 150],
24+
[1, 40, 280],
25+
[1, 10, 10],
26+
[1, 240, 300],
27+
].map(([cls, y, x], i) => ({
28+
cls: ["cat", "dog"][cls],
29+
color: "hsl(162,100%,50%)",
30+
editingLabels: false,
31+
highlighted: false,
32+
id: "a" + i,
33+
type: "point",
34+
x: x / 320,
35+
y: y / 249,
36+
})),
1837
},
1938
]}
2039
onExit={action("onExit")}

‎src/FullImageSegmentationAnnotator/orange.story.png‎

106 KB
Loading

‎src/ImageMask/index.js‎

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,70 @@
22

33
import React, { useState, useEffect, useMemo, useRef } from "react"
44

5-
import mmgc from "mmgc1-cpp"
6-
7-
console.log(mmgc)
5+
import MMGC_INIT from "mmgc1-cpp"
86

97
export default ({
108
classPoints,
119
regionClsList,
1210
imageSrc,
1311
imagePosition,
1412
opacity = 0.5,
15-
zIndex = 999,
13+
zIndex = 2,
1614
position = "absolute",
1715
}) => {
16+
if (!window.mmgc) window.mmgc = MMGC_INIT()
17+
const mmgc = window.mmgc
1818
const [canvasRef, setCanvasRef] = useState(null)
19-
20-
const lastTimeMMGCRun = useRef(0);
19+
20+
const lastTimeMMGCRun = useRef(0)
2121
const superPixelsGenerated = useRef(false)
2222
const [sampleImageData, setSampleImageData] = useState()
23-
23+
2424
useEffect(() => {
25-
if (!imageSrc) return;
26-
const canvas = document.querySelector("canvas");
27-
const ctx = canvas.getContext("2d");
28-
29-
const image = new Image();
30-
image.src = imageSrc;
25+
if (!imageSrc) return
26+
const canvas = document.createElement("canvas")
27+
const ctx = canvas.getContext("2d")
28+
29+
const image = new Image()
30+
image.src = imageSrc
3131
image.onload = () => {
3232
ctx.width = image.naturalWidth
3333
ctx.height = image.naturalHeight
34-
ctx.drawImage(image, 0, 0);
35-
const imageData = ctx.getImageData(0, 0, image.naturalWidth, image.naturalHeight)
36-
superPixelsGenerated.current = false;
34+
ctx.drawImage(image, 0, 0)
35+
const imageData = ctx.getImageData(
36+
0,
37+
0,
38+
image.naturalWidth,
39+
image.naturalHeight
40+
)
41+
superPixelsGenerated.current = false
3742
setSampleImageData(imageData)
3843
}
3944
}, [imageSrc])
40-
4145

4246
useEffect(() => {
4347
if (!canvasRef) return
4448
if (!sampleImageData) return
49+
if (classPoints.filter((cp) => cp.cls).length < 3) return
4550
if (!mmgc.setImage) return
4651
// NEEDS DEBOUNCE
4752
if (Date.now() < lastTimeMMGCRun.current + 500) return
4853
lastTimeMMGCRun.current = Date.now()
4954
const context = canvasRef.getContext("2d")
50-
55+
5156
console.log("got the sample image data and ready to mmgc!")
52-
57+
5358
if (!superPixelsGenerated.current) {
5459
console.log("generating super pixels...")
55-
mmgc.setImage(sampleImageData.data, sampleImageData.width, sampleImageData.height);
60+
mmgc.setImage(
61+
sampleImageData.data,
62+
sampleImageData.width,
63+
sampleImageData.height
64+
)
5665
mmgc.computeSuperPixels()
5766
superPixelsGenerated.current = true
5867
}
59-
68+
6069
// mmgc.setClassColor(0, 0xffffffff)
6170
// mmgc.setClassColor(1, 0x00000000)
6271
console.log("generating mask...")
@@ -66,45 +75,49 @@ export default ({
6675
if (classPoint.x < 0) continue
6776
///etc...
6877
console.log(
69-
regionClsList.indexOf(classPoint.cls), Math.floor(
70-
classPoint.y * sampleImageData.height
71-
), Math.floor(classPoint.x * sampleImageData.width
72-
)
78+
regionClsList.indexOf(classPoint.cls),
79+
Math.floor(classPoint.y * sampleImageData.height),
80+
Math.floor(classPoint.x * sampleImageData.width)
81+
)
82+
mmgc.addClassPoint(
83+
regionClsList.indexOf(classPoint.cls),
84+
Math.floor(classPoint.y * sampleImageData.height),
85+
Math.floor(classPoint.x * sampleImageData.width)
7386
)
74-
mmgc.addClassPoint(regionClsList.indexOf(classPoint.cls), Math.floor(
75-
classPoint.y * sampleImageData.height
76-
), Math.floor(classPoint.x * sampleImageData.width
77-
))
7887
}
7988
// mmgc.addClassPoint(0, 100, 125)
8089
// mmgc.addClassPoint(1, 10, 10)
8190
// mmgc.addClassPoint(1, 240, 300)
8291
mmgc.computeMasks()
8392
const maskAddress = mmgc.getColoredMask()
84-
const cppImDataUint8 = new Uint8Array(
93+
const cppImDataUint8 = new Uint8ClampedArray(
8594
mmgc.HEAPU8.buffer,
8695
maskAddress,
8796
sampleImageData.data.length
8897
// sampleImageData.width * sampleImageData.height * 4
8998
)
90-
const clampedArray = Uint8ClampedArray.from(cppImDataUint8)
91-
92-
window.uint8Arrays = (window.uint8Arrays || []).concat([cppImDataUint8])
93-
94-
const maskImageData = new ImageData(clampedArray, sampleImageData.width, sampleImageData.height)
99+
const maskImageData = new ImageData(
100+
cppImDataUint8,
101+
sampleImageData.width,
102+
sampleImageData.height
103+
)
95104

96105
// for (const i = 0; i < cppImDataUint8.length;i++){
97106
// sampleImageData.data[i] = cppImDataUint8[i]
98107
// }
99-
console.log(maskImageData.data)
100-
context.clearRect(0,0,sampleImageData.width, sampleImageData.height)
108+
context.clearRect(0, 0, sampleImageData.width, sampleImageData.height)
101109
context.putImageData(maskImageData, 0, 0)
102-
}, [canvasRef, sampleImageData, JSON.stringify(classPoints.map(c => [c.x, c.y, c.cls]))])
110+
}, [
111+
canvasRef,
112+
sampleImageData,
113+
JSON.stringify(classPoints.map((c) => [c.x, c.y, c.cls])),
114+
])
103115

104116
const style = useMemo(() => {
105117
let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
106118
let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
107119
return {
120+
// imageRendering: "pixelated",
108121
left: imagePosition.topLeft.x,
109122
top: imagePosition.topLeft.y,
110123
width: isNaN(width) ? 0 : width,
@@ -123,7 +136,7 @@ export default ({
123136
position,
124137
opacity,
125138
])
126-
139+
127140
return (
128141
<canvas
129142
style={style}

‎src/ImageMask/index.story.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ for (let ri = 0; ri < width; ri++) {
2323
const imageData = new ImageData(uint8Array, width, width)
2424

2525
storiesOf("ImageMask", module)
26-
.add("Basic", () => <ImageMask imagePosition={{topLeft: {x: 0, y: 0}}} />)
26+
.add("Basic", () => (
27+
<ImageMask
28+
imagePosition={{ topLeft: { x: 0, y: 0 }, bottomRight: { x: 10, y: 10 } }}
29+
/>
30+
))
2731
.add("Changing", () => {
2832
const [version, incVersion] = useReducer((state) => state + 1, 0)
2933

@@ -38,5 +42,5 @@ storiesOf("ImageMask", module)
3842
incVersion()
3943
}, 500)
4044
}, [])
41-
return <ImageMask maskVersion={version} imageData={imageData} />
45+
return <ImageMask />
4246
})

‎src/VideoOrImageCanvasBackground/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export default ({
9797
let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
9898
let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
9999
return {
100+
imageRendering: "pixelated",
100101
left: imagePosition.topLeft.x,
101102
top: imagePosition.topLeft.y,
102103
width: isNaN(width) ? 0 : width,

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10820,10 +10820,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
1082010820
dependencies:
1082110821
minimist "0.0.8"
1082210822

10823-
mmgc1-cpp@^1.0.6:
10824-
version "1.0.6"
10825-
resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.6.tgz#4c3623e984ebf2db8c543e961ac8793f5eb5dcd1"
10826-
integrity sha512-lSvSxKCmdudBlZWf7DT6Op09wh5yn6ugd/M0695Jfw4Bka63HhEgESz9K5KVA1/u0AumnPbHV1ZOuSqySY5WGw==
10823+
mmgc1-cpp@^1.0.22:
10824+
version "1.0.22"
10825+
resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.22.tgz#b5b0e9ef94e15d3f4d63b0dd3017e26404d539bd"
10826+
integrity sha512-2gglsbH9dwHo4wHm/RRyKmgFSjYnyZ7xkN38KpiYUjMhje0qxOPb4VS1W1tcCkp4ywJfHsTafvp1krEWQRDqKg==
1082710827

1082810828
moment@^2.23.0:
1082910829
version "2.24.0"

0 commit comments

Comments
 (0)