import argparse
import json
from pathlib import Path
from bs4 import BeautifulSoup
import cv2
import re
def main(args):
# --- Phase 1: Crop and Save All Images First ---
# 1. Load data
mapping_data = json.loads(args.mapping.read_text())
uied_data = json.loads(args.uied.read_text())
original_image = cv2.imread(str(args.original_image))
if original_image is None:
raise ValueError(f"Could not load the original image from {args.original_image}")
# Get image shapes to calculate a simple, global scaling factor
H_proc, W_proc, _ = uied_data['img_shape']
H_orig, W_orig, _ = original_image.shape
scale_x = W_orig / W_proc
scale_y = H_orig / H_proc
print(f"Using global scaling for cropping: scale_x={scale_x:.3f}, scale_y={scale_y:.3f}")
uied_boxes = {
comp['id']: (comp['column_min'], comp['row_min'], comp['width'], comp['height'])
for comp in uied_data['compos']
}
# 2. Create a directory for cropped images
crop_dir = args.output_html.parent / "cropped_images"
crop_dir.mkdir(exist_ok=True)
print(f"Saving cropped images to: {crop_dir.resolve()}")
# 3. Iterate through mappings and save cropped images to files
for region_id, region_data in mapping_data.items():
for placeholder_id, uied_id in region_data['mapping'].items():
if uied_id not in uied_boxes:
print(f"Warning: UIED ID {uied_id} from mapping not found. Skipping placeholder {placeholder_id}.")
continue
uied_bbox = uied_boxes[uied_id]
x_proc, y_proc, w_proc, h_proc = uied_bbox
x_tf = x_proc * scale_x
y_tf = y_proc * scale_y
w_tf = w_proc * scale_x
h_tf = h_proc * scale_y
x1, y1 = int(x_tf), int(y_tf)
x2, y2 = int(x_tf + w_tf), int(y_tf + h_tf)
h_img, w_img, _ = original_image.shape
x1, y1 = max(0, x1), max(0, y1)
x2, y2 = min(w_img, x2), min(h_img, y2)
cropped_img = original_image[y1:y2, x1:x2]
if cropped_img.size == 0:
print(f"Warning: Cropped image for {placeholder_id} is empty. Skipping.")
continue
output_path = crop_dir / f"{placeholder_id}.png"
cv2.imwrite(str(output_path), cropped_img)
# --- Phase 2: Use BeautifulSoup to Replace Placeholders by Order ---
print("\nStarting offline HTML processing with BeautifulSoup...")
html_content = args.gray_html.read_text()
soup = BeautifulSoup(html_content, 'html.parser')
# 1. Find all placeholder elements by their class, in document order.
placeholder_elements = soup.find_all(class_="bg-gray-400")
# 2. Get the placeholder IDs from the mapping file in the correct, sorted order.
def natural_sort_key(s):
return [int(text) if text.isdigit() else text.lower() for text in re.split('([0-9]+)', s)]
ordered_placeholder_ids = []
# Sort region IDs numerically to process them in order
for region_id in sorted(mapping_data.keys(), key=int):
region_mapping = mapping_data[region_id]['mapping']
# Sort the placeholder IDs within each region naturally (e.g., ph1, ph2, ph10)
sorted_ph_ids = sorted(region_mapping.keys(), key=natural_sort_key)
ordered_placeholder_ids.extend(sorted_ph_ids)
# 3. Check for count mismatches
if len(placeholder_elements) != len(ordered_placeholder_ids):
print(f"Warning: Mismatch in counts! Found {len(placeholder_elements)} gray boxes in HTML, but {len(ordered_placeholder_ids)} mappings.")
else:
print(f"Found {len(placeholder_elements)} gray boxes to replace.")
# 4. Iterate through both lists, create a proper
tag, and replace the placeholder.
for i, ph_element in enumerate(placeholder_elements):
if i >= len(ordered_placeholder_ids):
print(f"Warning: More gray boxes in HTML than mappings. Stopping at box {i+1}.")
break
ph_id = ordered_placeholder_ids[i]
relative_img_path = f"{crop_dir.name}/{ph_id}.png"
# --- Create a new
tag and replace the placeholder ---
# a. Get all classes from the original placeholder to preserve styling.
original_classes = ph_element.get('class', [])
if 'bg-gray-400' in original_classes:
original_classes.remove('bg-gray-400') # Remove the placeholder background
# b. Create the new
tag
img_tag = soup.new_tag("img", src=relative_img_path)
img_tag['class'] = original_classes
# c. Replace the placeholder with the new image tag.
ph_element.replace_with(img_tag)
# Save the modified HTML
args.output_html.write_text(str(soup))
print(f"\nSuccessfully replaced {min(len(placeholder_elements), len(ordered_placeholder_ids))} placeholders.")
print(f"Final HTML generated at {args.output_html.resolve()}")
if __name__ == "__main__":
parser = argparse.ArgumentParser(description="Replace placeholder divs in an HTML file with cropped images based on UIED mappings.")
parser.add_argument("--mapping", type=Path, required=False, help="Path to the mapping JSON file from mapping.py.")
parser.add_argument("--uied", type=Path, required=False, help="Path to the UIED JSON file.")
parser.add_argument("--original-image", type=Path, required=False, help="Path to the original screenshot image.")
parser.add_argument("--gray-html", type=Path, required=False, help="Path to the input HTML file with gray placeholders.")
parser.add_argument("--output-html", type=Path, required=False, help="Path to save the final, modified HTML file.")
parser.set_defaults(
mapping=Path('data/tmp/mapping_full_test1.json'),
uied=Path('data/tmp/ip/test1.json'),
original_image=Path('data/input/test1.png'),
gray_html=Path('data/output/test1_layout.html'),
output_html=Path('data/output/test1_layout_final.html')
)
args = parser.parse_args()
main(args)