нужно чтобы можно было добавлять конечные точки в каждой ветви, в которых будет определено конечное косметическое средство как результат прохождения по всему дереву алгоритма - доработай программу:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Конструктор алгоритма косметического средства</title>
<style>
    body {font-family: Arial, sans-serif; margin: 20px;}
    h2 {margin-top: 0;}
    #controls {margin-bottom: 14px;}
    #controls input {padding: 4px;}
    #controls button {padding: 6px 10px; margin-right: 4px;}
    
    ul, li {list-style: none; margin: 0; padding-left: 20px;}
    .node>.label {cursor: pointer; user-select: none; padding: 2px 4px; display: inline-block;}
    .selected>.label {background: #c2dbff;}
    
    .node>.label::before {content: "▶"; display: inline-block; width: 1em; color: #555;}
    .node.open>.label::before {content: "▼";}
    .node.leaf>.label::before {content: "•"; color: #999;}
    .node ul {display: none;}
    .node.open>ul {display: block;}
</style>
</head>
<body>
<h2>Конструктор алгоритма определения косметического средства</h2>

<div id="controls">
    <input type="text" id="nodeText" placeholder="Текст узла">
    <button id="addRoot">Добавить корневой узел</button>
    <button id="addChild" disabled>Добавить дочерний узел</button>
    <button id="deleteNode" disabled>Удалить узел</button>
    <button id="saveTree">Сохранить JSON</button>
    <input type="file" id="loadFile" accept=".json" style="margin-left: 10px;">
</div>

<div id="treeContainer"></div>

<script>
let treeData = [];
let selectedNodeId = null;
let idCounter = 0;

function renderTree() {
    const container = document.getElementById('treeContainer');
    container.innerHTML = '';
    treeData.forEach(node => container.appendChild(createNodeElement(node)));
}

function createNodeElement(node) {
    const li = document.createElement('li');
    li.className = node.children.length ? 'node' : 'node leaf';
    li.dataset.id = node.id;
    
    const label = document.createElement('span');
    label.className = 'label';
    label.textContent = node.text;
    li.appendChild(label);
    
    label.onclick = e => {
        e.stopPropagation();
        
        // Выделение узла
        document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
        li.classList.add('selected');
        selectedNodeId = node.id;
        document.getElementById('addChild').disabled = false;
        document.getElementById('deleteNode').disabled = false;
        
        // Разворачивание/сворачивание
        if (node.children.length) {
            li.classList.toggle('open');
        }
    };
    
    label.ondblclick = e => {
        e.stopPropagation();
        const newText = prompt('Изменить текст узла:', node.text);
        if (newText && newText.trim()) {
            node.text = newText.trim();
            renderTree();
        }
    };
    
    if (node.children.length) {
        const ul = document.createElement('ul');
        node.children.forEach(child => ul.appendChild(createNodeElement(child)));
        li.appendChild(ul);
        li.classList.add('open');
    }
    
    return li;
}

function findNode(arr, id) {
    for (const node of arr) {
        if (node.id === id) return node;
        const found = findNode(node.children, id);
        if (found) return found;
    }
    return null;
}

function deleteNode(arr, id) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === id) {
            arr.splice(i, 1);
            return true;
        }
        if (deleteNode(arr[i].children, id)) return true;
    }
    return false;
}

document.getElementById('addRoot').onclick = () => {
    const text = document.getElementById('nodeText').value.trim();
    if (!text) return alert('Введите текст узла');
    
    treeData.push({
        id: ++idCounter,
        text: text,
        children: []
    });
    
    document.getElementById('nodeText').value = '';
    renderTree();
};

document.getElementById('addChild').onclick = () => {
    const text = document.getElementById('nodeText').value.trim();
    if (!text) return alert('Введите текст узла');
    if (!selectedNodeId) return;
    
    const parent = findNode(treeData, selectedNodeId);
    if (parent) {
        parent.children.push({
            id: ++idCounter,
            text: text,
            children: []
        });
        document.getElementById('nodeText').value = '';
        renderTree();
    }
};

document.getElementById('deleteNode').onclick = () => {
    if (!selectedNodeId) return;
    if (!confirm('Удалить выбранный узел и все его подветки?')) return;
    
    deleteNode(treeData, selectedNodeId);
    selectedNodeId = null;
    document.getElementById('addChild').disabled = true;
    document.getElementById('deleteNode').disabled = true;
    renderTree();
};

document.getElementById('saveTree').onclick = () => {
    const blob = new Blob([JSON.stringify(treeData, null, 2)], {type: 'application/json'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'cosmetic_algorithm.json';
    a.click();
};

document.getElementById('loadFile').onchange = e => {
    const file = e.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = event => {
        try {
            treeData = JSON.parse(event.target.result);
            idCounter = Math.max(...getAllIds(treeData), 0);
            selectedNodeId = null;
            document.getElementById('addChild').disabled = true;
            document.getElementById('deleteNode').disabled = true;
            renderTree();
        } catch (err) {
            alert('Ошибка чтения файла');
        }
    };
    reader.readAsText(file);
};

function getAllIds(arr) {
    let ids = [];
    for (const node of arr) {
        ids.push(node.id);
        ids = ids.concat(getAllIds(node.children));
    }
    return ids;
}

// Пример начального дерева
treeData = [
    {
        id: ++idCounter,
        text: "Содержит воду",
        children: [
            {id: ++idCounter, text: "Содержит гелеобразователь", children: []},
            {id: ++idCounter, text: "Не содержит гелеобразователь", children: []}
        ]
    },
    {
        id: ++idCounter,
        text: "Содержит эмоленты",
        children: []
    }
];

renderTree();
</script>
</body>
</html>