const assert = require("assert");
|
const { kebabCase } = require("lodash");
|
|
Feature("Images' labels type matching");
|
|
const IMAGE =
|
"https://htx-pub.s3.us-east-1.amazonaws.com/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg";
|
|
const createConfig = ({ shapes = ["Rectangle"], props } = {}) => {
|
return `<View>
|
<Image name="image" value="$image" zoomControl="false" selectionControl="false"></Image>
|
${shapes
|
.map(
|
(shapeName) => `
|
<${shapeName} name="image${shapeName}" toName="image" ${props} />
|
<${shapeName}Labels name="image${shapeName}Labels" toName="image" allowEmpty="true" ${props}>
|
<Label value="${shapeName}Create"/>
|
<Label value="${shapeName}Append"/>
|
</${shapeName}Labels>
|
`,
|
)
|
.join("\n")}
|
<Labels name="imageLabels" toName="image" allowEmpty="true">
|
<Label value="Label"/>
|
</Labels>
|
</View>`;
|
};
|
|
const createShape = {
|
Rectangle: {
|
byBBox(x, y, width, height, opts = {}) {
|
return {
|
...opts,
|
action: "drawByDrag",
|
params: [x, y, width, height],
|
result: {
|
width,
|
height,
|
rotation: 0,
|
x,
|
y,
|
},
|
};
|
},
|
},
|
Ellipse: {
|
byBBox(x, y, width, height, opts = {}) {
|
return {
|
...opts,
|
action: "drawByDrag",
|
params: [x + width / 2, y + height / 2, width / 2, height / 2],
|
result: { radiusX: width / 2, radiusY: height / 2, rotation: 0, x: x + width / 2, y: y + height / 2 },
|
};
|
},
|
},
|
Polygon: {
|
byBBox(x, y, width, height, opts = {}) {
|
const points = [];
|
|
points.push([x, y]);
|
points.push([x + width, y]);
|
points.push([x + width, y + height]);
|
points.push([x, y + height]);
|
return {
|
...opts,
|
action: "drawByClickingPoints",
|
params: [[...points, points[0]]],
|
result: {
|
points,
|
closed: true,
|
},
|
};
|
},
|
},
|
KeyPoint: {
|
byBBox(x, y, width, height, opts = {}) {
|
return {
|
...opts,
|
action: "drawByClickingPoints",
|
params: [[[x + width / 2, y + height / 2]]],
|
result: {
|
x: x + width / 2,
|
y: y + height / 2,
|
width: 5,
|
},
|
};
|
},
|
},
|
Brush: {
|
byBBox(x, y, width, height, opts = {}) {
|
const points = [];
|
const startPoint = { x: x + 5, y: y + 5 };
|
const endPoint = { x: x + width - 5, y: y + height - 5 };
|
const rows = Math.ceil((endPoint.y - startPoint.y) / 10);
|
const step = (endPoint.y - startPoint.y) / rows;
|
|
for (let j = 0; j < rows; j++) {
|
const cY = startPoint.y + step * j;
|
|
points.push([startPoint.x, cY]);
|
points.push([endPoint.x, cY]);
|
}
|
return {
|
...opts,
|
action: "drawThroughPoints",
|
params: [points],
|
};
|
},
|
},
|
};
|
|
const DataStore = Data(Object.keys(createShape));
|
|
DataStore.Scenario(
|
"Preventing applying labels of mismatch types",
|
async ({ I, LabelStudio, AtImageView, AtOutliner, AtLabels, AtPanels, current }) => {
|
const shape = current;
|
const config = createConfig({
|
shapes: [shape],
|
props: 'strokewidth="5"',
|
});
|
|
const params = {
|
config,
|
data: { image: IMAGE },
|
};
|
const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);
|
|
I.amOnPage("/");
|
LabelStudio.init(params);
|
AtDetailsPanel.collapsePanel();
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
const canvasSize = await AtImageView.getCanvasSize();
|
const size = Math.min(canvasSize.width, canvasSize.height);
|
const offset = size * 0.05;
|
const toolSelectors = [
|
(shapeName, shapeIdx) => {
|
I.click(
|
locate(".lsf-toolbar")
|
.find(".lsf-tool")
|
.at(+shapeIdx + 1),
|
);
|
},
|
(_, shapeIdx) => {
|
I.click(AtLabels.locateLabel("blank").at(+shapeIdx + 1));
|
},
|
(shapeName) => {
|
AtLabels.clickLabel(`${shapeName}Create`);
|
},
|
];
|
|
for (const creator of Object.values(createShape[shape])) {
|
const regions = toolSelectors.map((selector, idx) => {
|
const x1 = (size / 3) * idx + offset;
|
const x2 = (size / 3) * (idx + 1) - offset;
|
const y1 = size / 3;
|
const y2 = (size / 3) * 2;
|
|
return creator(x1, y1, x2 - x1, y2 - y1, { shape });
|
});
|
|
const labelsCounter = (results, currentLabelName = "Label") => {
|
return results.reduce((counter, result) => {
|
const { type, value } = result;
|
|
return counter + (type.endsWith("labels") && value[type] && value[type].includes(currentLabelName));
|
}, 0);
|
};
|
|
const toolSelector = `[aria-label=${kebabCase(`${shape}-tool`)}]`;
|
|
LabelStudio.init(params);
|
LabelStudio.waitForObjectsReady();
|
AtOutliner.seeRegions(0);
|
I.click(toolSelector);
|
await AtImageView.lookForStage();
|
I.say(`${shape}: Drawing.`);
|
|
regions.forEach((region, idx) => {
|
toolSelectors[idx](shape, 0);
|
AtImageView[region.action](...region.params);
|
AtOutliner.seeRegions(idx + 1);
|
I.pressKey(["u"]);
|
});
|
|
I.click(toolSelector);
|
I.say(`${shape}: Labeling.`);
|
|
const currentLabelName = `${shape}Append`;
|
|
regions.forEach((region, idx) => {
|
AtOutliner.clickRegion(+idx + 1);
|
AtLabels.clickLabel(currentLabelName);
|
I.pressKey(["u"]);
|
});
|
|
const results1 = await LabelStudio.serialize();
|
|
assert.strictEqual(labelsCounter(results1, currentLabelName), 3, "Labels number don't match");
|
|
regions.forEach((region, idx) => {
|
I.say(`Click label ${idx}`);
|
AtOutliner.clickRegion(+idx + 1);
|
AtLabels.clickLabel("Label");
|
});
|
|
const results = await LabelStudio.serialize();
|
|
assert.strictEqual(labelsCounter(results, "Label"), 3, "Labels number don't match");
|
}
|
},
|
);
|
