Как эффективно преобразовать данные макета JSON, представляющие ограничительные ящики и текстовое содержание в структурн ⇐ Html

[Anonymous]

Я создавал проект создания дизайна веб -страницы с изображения этой страницы. Большая часть приложения для этой цели использует ИИ, но я не использую их. Я пошел на полный необработанный подход с компьютерным зрением. Я обнаружил текст из изображения, используя Tesseract с помощью его Bboxes (ограничивающие коробки - пространственные данные, такие как {x0, y0, x1, y1} - здесь {x0, y0} - это верхний левый пиксельный кудун, а {x1, y1} - правый нижний), я затем нашел на текст из изображения, используемые соблевые алгоритмельфмы. Это не идеально, но работало до здесь, я организовал эти данные в соответствующей иерархии родительских детей в качестве данных 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>
Сначала я организовал их с помощью позиции, которая работает, но я не могу двигаться вперед с этим. Никто, использующий изображение в HTML -конвертор, не хочет, чтобы их HTML были тегами Div и P на одном и том же уровне, расположенном внутри одного родительского DIV, используя абсолютное право позиции. То, что я пытался сделать, это сначала договориться об этом в порядке, как мы, люди, проектируют компонент. Я попытался придумать метод заказа, в котором основная идея заключается в том, что мы находим компоненты с наименьшим X0, а другие с наименьшим Y0, которые более меньше Y и X соответственно. Затем я сравниваю Y1 из того, что с наименьшим Y0 и Y0, с самым маленьким x0, чтобы увидеть, что имеет больше приоритета, и выбираю его. Основываясь на этом, я устроил детей рекурсивно. Затем я использовал еще одну функцию, чтобы дать ему направление макета, так как, если у ребенка есть x0 больше, чем предыдущий ребенок, чтобы он был в ряду столбца (для расположения на основе гибки). Затем я написал функцию GenerateCode. Я предоставлю эти функции ниже < /p>
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.bbox.x0 >= primaryNode.bbox.x1) {
children.layoutDirection = "row";
} else {
children.layoutDirection = "column";
}
primaryNode = children;
}

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.layoutDirection === "row") {
maxPrevHeight = Math.max(maxPrevHeight, children.bbox.y1);
row += wrapper(
children,
generateCode(children, children.bbox.y1, children.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 function I came up with is not gonna work as intended as it will result in wrong margin arrangement. Sorry for being an amateur at this
I just want a way I can make arrange the data as a proper html which is about 70-80% accurate and easily configurable. There has to be a solution. You know those drag-and-drop page builder's (like wix). They make a proper design from drag-and-drop creations. They must be using position data of each components a user places and then somehow makes a working page out of it.

Подробнее здесь: https://stackoverflow.com/questions/796 ... s-and-text