Skip to content

Commit 6fc49cb

Browse files
seveibarseveibar
committed
full segmentation working reliably
1 parent 39e8032 commit 6fc49cb

File tree

5 files changed

+86
-77
lines changed

5 files changed

+86
-77
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.22",
13+
"mmgc1-cpp": "^1.0.24",
1414
"moment": "^2.23.0",
1515
"react-full-screen": "^0.2.4",
1616
"react-hotkeys": "^2.0.0",

‎src/FullImageSegmentationAnnotator/index.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,6 @@
22
import React from "react"
33
import Annotator from "../Annotator"
44

5-
6-
const [width, height] = [200, 200]
7-
8-
export default ({ onExit, images }) => {
9-
return (
10-
<Annotator
11-
regionClsList={["cat", "dog"]}
12-
images={images}
13-
onExit={onExit}
14-
fullImageSegmentationMode={true}
15-
/>
16-
)
5+
export default (props) => {
6+
return <Annotator {...props} fullImageSegmentationMode={true} />
177
}

‎src/FullImageSegmentationAnnotator/index.story.js‎

Lines changed: 64 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,67 @@ import orange from "./orange.story.png"
88

99
import FullImageSegmentationAnnotator from "./"
1010

11-
storiesOf("FullImageSegmentationAnnotator", module).add("Basic", () => (
12-
<div style={{ width: "100vw", height: "100vh" }}>
13-
<FullImageSegmentationAnnotator
14-
images={[
15-
{
16-
name: "Seve's Desk",
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-
})),
37-
},
38-
]}
39-
onExit={action("onExit")}
40-
/>
41-
</div>
42-
))
11+
storiesOf("FullImageSegmentationAnnotator", module)
12+
.add("Orange 2 Class", () => (
13+
<div style={{ width: "100vw", height: "100vh" }}>
14+
<FullImageSegmentationAnnotator
15+
images={[
16+
{
17+
name: "Seve's Desk",
18+
// src:
19+
// "https://a.allegroimg.com/s128/113a6e/09d2c0ed4f278610e555c95b1d50/Rama-BIANCHI-OLTRE-XR4-DISC-carbon-Vision-ACR-51cm-Dedykowany-a-do-kolarstwo-szosowe",
20+
// src: "https://i.imgur.com/Dv5lkQZ.png",
21+
src: orange,
22+
regions: [
23+
[0, 100, 125],
24+
[0, 100, 150],
25+
[1, 40, 280],
26+
[1, 10, 10],
27+
[1, 240, 300],
28+
].map(([cls, y, x], i) => ({
29+
cls: ["fg", "bg"][cls],
30+
color: "hsl(162,100%,50%)",
31+
editingLabels: false,
32+
highlighted: false,
33+
id: "a" + i,
34+
type: "point",
35+
x: x / 320,
36+
y: y / 249,
37+
})),
38+
},
39+
]}
40+
regionClsList={["fg", "bg"]}
41+
onExit={action("onExit")}
42+
/>
43+
</div>
44+
))
45+
.add("Orange 3 Class", () => (
46+
<div style={{ width: "100vw", height: "100vh" }}>
47+
<FullImageSegmentationAnnotator
48+
images={[
49+
{
50+
name: "Seve's Desk",
51+
src: orange,
52+
regions: [
53+
[0, 100, 125],
54+
[0, 100, 150],
55+
[1, 40, 280],
56+
[1, 10, 10],
57+
[1, 240, 300],
58+
].map(([cls, y, x], i) => ({
59+
cls: ["orange", "bg", "hand"][cls],
60+
color: "hsl(162,100%,50%)",
61+
editingLabels: false,
62+
highlighted: false,
63+
id: "a" + i,
64+
type: "point",
65+
x: x / 320,
66+
y: y / 249,
67+
})),
68+
},
69+
]}
70+
regionClsList={["orange", "bg", "hand"]}
71+
onExit={action("onExit")}
72+
/>
73+
</div>
74+
))

‎src/ImageMask/index.js‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,11 @@ export default ({
2727
const ctx = canvas.getContext("2d")
2828

2929
const image = new Image()
30+
image.crossOrigin = "anonymous"
3031
image.src = imageSrc
3132
image.onload = () => {
32-
ctx.width = image.naturalWidth
33-
ctx.height = image.naturalHeight
33+
canvas.width = image.naturalWidth
34+
canvas.height = image.naturalHeight
3435
ctx.drawImage(image, 0, 0)
3536
const imageData = ctx.getImageData(
3637
0,
@@ -47,47 +48,36 @@ export default ({
4748
if (!canvasRef) return
4849
if (!sampleImageData) return
4950
if (classPoints.filter((cp) => cp.cls).length < 3) return
50-
if (!mmgc.setImage) return
51+
if (!mmgc.setImageSize) return
5152
// NEEDS DEBOUNCE
5253
if (Date.now() < lastTimeMMGCRun.current + 500) return
5354
lastTimeMMGCRun.current = Date.now()
5455
const context = canvasRef.getContext("2d")
5556

56-
console.log("got the sample image data and ready to mmgc!")
57-
5857
if (!superPixelsGenerated.current) {
59-
console.log("generating super pixels...")
60-
mmgc.setImage(
61-
sampleImageData.data,
62-
sampleImageData.width,
63-
sampleImageData.height
64-
)
58+
superPixelsGenerated.current = "processing"
59+
mmgc.setImageSize(sampleImageData.width, sampleImageData.height)
60+
const imageAddress = mmgc.getImageAddr()
61+
mmgc.HEAPU8.set(sampleImageData.data, imageAddress)
6562
mmgc.computeSuperPixels()
66-
superPixelsGenerated.current = true
63+
superPixelsGenerated.current = "done"
6764
}
65+
if (superPixelsGenerated.current !== "done") return
6866

69-
// mmgc.setClassColor(0, 0xffffffff)
70-
// mmgc.setClassColor(1, 0x00000000)
71-
console.log("generating mask...")
67+
mmgc.setClassColor(0, 0xff0000ff)
68+
mmgc.setClassColor(1, 0xffff00ff)
69+
mmgc.setClassColor(2, 0xff00ffff)
70+
// mmgc.setVerboseMode(true)
7271
mmgc.clearClassPoints()
7372
for (const classPoint of classPoints) {
7473
if (!classPoint.cls) continue
7574
if (classPoint.x < 0) continue
76-
///etc...
77-
console.log(
78-
regionClsList.indexOf(classPoint.cls),
79-
Math.floor(classPoint.y * sampleImageData.height),
80-
Math.floor(classPoint.x * sampleImageData.width)
81-
)
8275
mmgc.addClassPoint(
8376
regionClsList.indexOf(classPoint.cls),
8477
Math.floor(classPoint.y * sampleImageData.height),
8578
Math.floor(classPoint.x * sampleImageData.width)
8679
)
8780
}
88-
// mmgc.addClassPoint(0, 100, 125)
89-
// mmgc.addClassPoint(1, 10, 10)
90-
// mmgc.addClassPoint(1, 240, 300)
9181
mmgc.computeMasks()
9282
const maskAddress = mmgc.getColoredMask()
9383
const cppImDataUint8 = new Uint8ClampedArray(
@@ -102,9 +92,6 @@ export default ({
10292
sampleImageData.height
10393
)
10494

105-
// for (const i = 0; i < cppImDataUint8.length;i++){
106-
// sampleImageData.data[i] = cppImDataUint8[i]
107-
// }
10895
context.clearRect(0, 0, sampleImageData.width, sampleImageData.height)
10996
context.putImageData(maskImageData, 0, 0)
11097
}, [
@@ -117,7 +104,7 @@ export default ({
117104
let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
118105
let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
119106
return {
120-
// imageRendering: "pixelated",
107+
imageRendering: "pixelated",
121108
left: imagePosition.topLeft.x,
122109
top: imagePosition.topLeft.y,
123110
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.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==
10823+
mmgc1-cpp@^1.0.24:
10824+
version "1.0.24"
10825+
resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.24.tgz#37354150355486a10f304aa72dc9716ad4032d0a"
10826+
integrity sha512-vj19i2gpa9rT+byptCX6Qqb2h8BpQqAAOXhVJXM527KKiU1YDG6fv83DQ9RSRPJTX7RGPYKtb0mwJkPm8pomIA==
1082710827

1082810828
moment@^2.23.0:
1082910829
version "2.24.0"

0 commit comments

Comments
 (0)