Spustil jsem si lokální AI, které umí najít inteligentně v obrazu text a různé elementy jako tabulku, schéma, obrázky (u těch má pak instrukce je textově popsat). Pošlu mu v dávkovém zpracování pdf rozsekané na obrázky a můj program počká na odpověď. To vše ukládám do json formátu abych dokázal perfektně třídit data. Příklad jsonu:
Code:
{
"doc": {
"source_type": "magazine",
"magazine_title": "Amiga Bulletin",
"issue_date": "1/69",
"page_printed": "6"
},
"blocks": [
{
"block_id": "b1",
"type": "header",
"doc_kind": "header",
"region": "header",
"bbox": [
80,
98,
918,
118
],
"bbox_confidence": 0.95,
"reading_order": 1,
"text": "6 Amiga Bulletin 1/69 SPDR, box 39, 111 21, Praha 1, CSSR"
},
{
"block_id": "b2",
"type": "table",
"doc_kind": "spec",
"region": "full",
"bbox": [
138,
130,
860,
420
],
"bbox_confidence": 0.98,
"reading_order": 2,
"table": {
"kind": "spec",
"caption": "",
"columns": [
"Amiga 500",
"Atari 1040 STF"
],
"rows": [
[
"CPU/takt",
"MC 68000/7.15 MHz",
"MC 68000/8 MHz"
],
[
"koprocessory",
"ano",
"ne"
],
[
"paněť ROM",
"256 kB",
"192 kB"
],
[
"paněť RAM",
"512 kB",
"1 MB"
],
Samozřejmě není to tak triviální, že člověk řekne chatgpt, rekonstruuj json
úkol proněj si vyžádal následující zadání, které pak jde použíít na vícero stránek:Úkol:
Rekonstruuj vizuální vzhled stránky z poskytnutého JSONu (OCR / layout data) do HTML + CSS (+ případně JS) tak, aby výsledek vizuálně odpovídal tištěné stránce.
Zásadní požadavky (povinné):
- Respektuj bbox jako fyzický layout, ne jen reading_order.
- reading_order slouží pouze k logickému pořadí obsahu.
- Skutečné umístění bloků musí vycházet z bbox.
- Tabulky, obrázky a podobné prvky ber jako layoutové bariéry.
- Textový blok nikdy nesmí začít výš, než je skutečný spodní okraj tabulky/figury.
- Pokud se bbox textu a tabulky dostanou do konfliktu, text musí být posunut dolů.
- Nepracuj s pevnými výškami založenými jen na bbox.
- HTML vykreslení (fonty, padding, border, line-height) může změnit reálnou výšku prvků.
- Pokud je to potřeba, použij dvoufázový layout:
- fáze 1: vykresli tabulku / blok
- fáze 2: změř reálný spodní okraj (getBoundingClientRect) a podle něj posuň následující bloky
- Stránka nesmí obsah ořezávat.
- Nepoužívej fixní height + overflow:hidden, pokud není explicitně požadována simulace jedné fyzické stránky.
- Stránka se musí automaticky zvětšit podle obsahu, případně dopočítat min-height podle posledního bloku.
- HTML ber jako flexibilní render, ne DTP.
- Nepředpokládej, že top + height z bbox = skutečný vizuální konec bloku.
- Počítej s tím, že tabulka nebo text mohou být vyšší, než odpovídá bbox.
- Vizuální cíl má přednost před matematickou přesností bbox.
- Pokud je rozpor mezi „papírovým bboxem“ a tím, co HTML skutečně vykreslí, oprav layout tak, aby:
- se bloky nepřekrývaly
- nic nebylo uříznuté
- vizuál působil jako tištěná stránka
- Pokud je rozpor mezi „papírovým bboxem“ a tím, co HTML skutečně vykreslí, oprav layout tak, aby:
- Výstup:
- Dodej kompletní HTML soubor, který lze otevřít v prohlížeči.
- CSS má být součástí souboru.
- Pokud je použit JavaScript, vysvětli jednou větou proč (např. „měření skutečné výšky tabulky“).
Nepředpokládej nic implicitně – vše, co může v HTML selhat (výšky, přetečení, překryv), aktivně ošetři.
Přiložené soubory
teď to držím dvěmi prsty najednou a povolit budu moci až za pár minut 
.jpg "Boboo")
Vložit komentář: