Как преобразовать данные макета JSON в структурно точное представление HTML? [закрыто] ⇐ Javascript

[Anonymous]

Я создавал проект создания дизайна веб -страницы с изображения этой страницы.
Большая часть приложения для этой цели использует ИИ, но я не использую их.

я пришел к полному необработанному подходу с компьютерным зрением.
Я обнаружил текст из изображения, используя Tesseract с его Bboxes (ограничивающие коробки превращаются в пространственные данные, такие как {x0, y0, x1, y1} , где {x0, y0} код в верхней левой координат и {x1/y1 IS> Code> IS> Code> y. Справа),
Я затем вкол в тексту из изображения, использовал алгоритм sobel для обнаружения краев и нашел их Bbobes. Это не идеально, но работало до здесь, я организовал эти данные в соответствующей иерархии родительских детей в качестве данных JSON. Теперь мне нужно организовать эти данные только как html.

Код: Выделить всё

[
{
"element": "div",
"text": "",
"bbox": { "x0": 0, "y0": 0, "x1": 1459, "y1": 1091 },
"color": "",
"bgColor": { "r": 0, "g": 0, "b": 0, "a": 0 },
"children": [
{
"element": "div",
"text": "",
"bbox": { "x0": 13, "y0": 13, "x1": 1447, "y1": 869 },
"color": "",
"bgColor": { "r": 255, "g": 255, "b": 255, "a": 255 },
"children": [
{
"element": "p",
"text": "24\" Infinora",
"bbox": { "x0": 591, "y0": 29, "x1": 865, "y1": 72 },
"color": { "r": 0, "g": 0, "b": 0, "a": 255 },
"bgColor": "",
"children": [
{
"element": "p",
"text": "4",
"bbox": { "x0": 739, "y0": 30, "x1": 749, "y1": 39 },
"color": { "r": 255, "g": 255, "b": 255, "a": 255 },
"bgColor": "",
"children": []
}
]
},
{
"element": "div",
"text": "",
"bbox": { "x0": 598, "y0": 55, "x1": 632, "y1": 94 },
"color": "",
"bgColor": { "r": 107, "g": 107, "b": 107, "a": 255 },
"children": []
},
....
< /code>
 Проблема: < /strong>

Сначала я организовал их, используя позицию, которая работает, но я не могу двигаться вперед с этим. Никто, использующий изображение для HTML Convertor, не хочет, чтобы их HTML был множественным  

и теги на одном и том же уровне, расположенном внутри одного родителя, используя позицию: абсолютный , верно? Компонент.

Я попытался придумать метод упорядочения, в котором основная идея заключается в том, что мы находим компоненты с наименьшим x0 и другой с наименьшим Y0 , которые более меньше y и x соответственно. из того, что с наименьшим Y0 и y0 из того, что с наименьшим x0 , чтобы увидеть, что имеет больше приоритета, и выберите его. Основываясь на этом, я организовал рекурсивно детей. JSON DATA.

Код: Выделить всё

function sortChildrenByDirection(contourTreeNode) {
if (!contourTreeNode.children || contourTreeNode.children.length === 0) {
return;
}

contourTreeNode.children.sort((a, b) => {
const aBox = a.bbox;
const bBox = b.bbox;

const lowestY0 = Math.min(aBox.y0, bBox.y0);
const isATopmost = aBox.y0 === lowestY0;
const isBTopmost = bBox.y0 === lowestY0;

const lowestX0 = Math.min(aBox.x0, bBox.x0);
const isALeftmost = aBox.x0 === lowestX0;
const isBLeftmost = bBox.x0 === lowestX0;

if (aBox.y0 === bBox.y0 && aBox.x0 === bBox.x0) {
return 0;
}

if (isATopmost && isALeftmost && !(isBTopmost && isBLeftmost)) {
return -1;
}
if (isBTopmost && isBLeftmost && !(isATopmost && isALeftmost)) {
return 1;
}

if (isATopmost && isBLeftmost) {
if (aBox.y1 < bBox.y0) {
return -1;
}
else if (bBox.x1 < aBox.x0) {
return 1;
}
else {
return aBox.y0 - bBox.y0;
}
}

if (isBTopmost && isALeftmost) {
if (bBox.y1 < aBox.y0) {
return 1;
}
else if (aBox.x1 < bBox.x0) {
return -1;
}
else {
return aBox.y0 - bBox.y0;
}
}

if (aBox.y0 === bBox.y0) {
return aBox.x0 - bBox.x0;
}

if (aBox.x0 === bBox.x0) {
return aBox.y0 - bBox.y0;
}

const yDiff = aBox.y0 - bBox.y0;
if (Math.abs(yDiff) > 10) {
return yDiff;
} else {
return aBox.x0 - bBox.x0;
}
});

contourTreeNode.children.forEach(sortChildrenByDirection);
}
< /code>
function determineAlignment(node) {
let children = node.children;

let primaryNode = children[0];
if (primaryNode) primaryNode.layoutDirection = "column";
for (let i = 1; i < children.length; ++i) {
if (children[i].bbox.x0 >= primaryNode.bbox.x1) {
children[i].layoutDirection = "row";
} else {
children[i].layoutDirection = "column";
}
primaryNode = children[i];
}

node.children.forEach(determineAlignment);
}
< /code>
function generateCode(node, prevTop = 0, prevLeft = 0) {
if (node.children.length < 1) return "";
const children = node.children;
let columns = ``;
let maxPrevHeight = children[0].bbox.y1;

let row = `${wrapper(
children[0],
generateCode(children[0], children[0].bbox.y1, children[0].bbox.x1),
"element",
prevLeft,
prevTop
)}`;

for (let i = 1; i < children.length; ++i) {
if (children[i].layoutDirection === "row") {
maxPrevHeight = Math.max(maxPrevHeight, children[i].bbox.y1);
row += wrapper(
children[i],
generateCode(children[i], children[i].bbox.y1, children[i].bbox.x1),
"element",
children[i - 1].bbox.x1,
children[0].bbox.y0
);
} else {
let rowEnd = wrapper(row, null, "flex", null, null);
columns += rowEnd;
row = `${wrapper(
children[i],
generateCode(children[i], children[i].bbox.y1, children[i].bbox.x1),
"element",
prevLeft,
maxPrevHeight
)}`;
}
}

if (row) {
columns += wrapper(row, null, "flex", null, null);
}

return wrapper(columns, null, "cover", null, null);
}

function wrapper(parent, child, type, prevX, topY) {
if (type == "cover") {
return `${parent}\n`;
} else if (type === "flex") {
return `${parent}\n`;
} else if (type === "element") {
return `${child || parent.text || ''}
`;
}
}
< /code>
First of all the arrangement method I came up with was a failure and didn't work on many cases. Even if it was successfull, the above generateCode()

Функция, которую я придумал, не будет работать так, как это задумано, так как это приведет к неправильной марже. Извините за то, что был любителем в этом < /p>
ожидаемый результат: < /strong>

Я просто хочу, чтобы я мог организовать данные как правильный HTML, который является точным 70-80% и легко настраивается. Там должно быть решение. Вы знаете эти строители страниц перетаскивания (например, Wix). Они делают правильный дизайн из творений перетаскивания. Они должны использовать данные о позиции каждого компонента, которые пользователь помещает, а затем каким -то образом делает из нее рабочую страницу.

Подробнее здесь: https://stackoverflow.com/questions/796 ... esentation