**Pre-requisite:** This task requires a discussion with back-end to agree on representation of "conflict" blocks in hOCR mode. Conflict block is a special type of Extraction Block where results of extraction are not certain and human intervention is nesessary. There is an implementation of working conflict block in the spike branch, however, it relies on the old approach with custom tags. Please first agree on how conflict data will be represented within hOCR and then feel free to adapt the solution from the spike. Conflict block must have several tabs: - 'council' - an oversight agent making deciaion which extraction value is more likely to be correct - a separate tab per each "model" with it's own results - each tab contains - results of extraction of this block by the specific model. meaning that all tabs show the same data different only in the conflicting area - comment/reasosning from the "model" on the content of the conflict - conflicting area might be any tag and potentially even a word - conflicting area must be visually highlighted User must be able to switch between tabs. User must be able to edit or accept data in the "council" tab as a correct one. Content of other tabs must be read-only. Version 1 implementation, should just handle "conflict" class included into an element: ```xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="ocr-system" content="rednote-hilab-dots-ocr"/> <meta name="ocr-capabilities" content="ocr_page ocr_carea ocr_par ocr_line"/> </head> <body> <div class="ocr_page" id="page_1" title="image 'page_1.png'; bbox 0 0 4375 6198; ppageno 0"> <div class="ocr_carea" id="block_1_1" title="bbox 83 120 123 125"> <p class="ocr_par" id="par_block_1_1" title="bbox 83 120 123 125"> <span class="ocr_line" id="line_block_1_1" title="bbox 83 120 123 125"> Dry mouth</span> </p> </div> <div class="ocr_carea" id="block_1_2" title="bbox 83 127 117 132"> <p class="ocr_par" id="par_block_1_2" title="bbox 83 127 117 132"> <span class="ocr_line" id="line_block_1_2" title="bbox 83 127 117 132"> Dry eyes</span> </p> </div> <div class="ocr_carea" id="block_1_3" title="bbox 83 135 121 139"> <p class="ocr_par" id="par_block_1_3" title="bbox 83 135 121 139"> <span class="ocr_line" id="line_block_1_3" title="bbox 83 135 121 139"> Headache</span> </p> </div> <div class="ocr_carea conflict" id="block_1_4" title="bbox 83 142 183 147"> <p class="ocr_par" id="par_block_1_4" title="bbox 83 142 183 147"> <span class="ocr_line" id="line_block_1_4" title="bbox 83 142 183 147"> Change in your sense of taste</span> </p> </div> </div> </body> </html> ``` In that case the last element should be rendered with a highlight based on the class.