highlight diagram differences

[VladimirAlexiev]

https://utf13-reports.ucaiug.io/18v00-18v01/comparison-report.html shows two diagrams, but it's not easy to see the differences between them:

I asked ChatGPT

Human: read the following two diagrams and make a new one that highlights the differences between them

• https://utf13-reports.ucaiug.io/18v00-18v01/Images-baseline/EAID_FB07D92D_5F4D_4fdc_AD82_2376FAF51037.jpg
• https://utf13-reports.ucaiug.io/18v00-18v01/Images-destination/EAID_FB07D92D_5F4D_4fdc_AD82_2376FAF51037.jpg

ChatGPT: I apologize, but I don't have access to the specific diagrams you've referenced. To assist you effectively, could you please provide more details about the diagrams or describe the differences you'd like to highlight?

Human: ok, here are the diagrams as images: first the baseline, and then the destination.

ChatGPT:

• Key Observations: New Element Added: The Part303 class is present in the destination diagram but absent in the baseline.
  Absolutely correct
• No Other Changes: Relationships and other elements appear identical.
• Highlighted Differences in PlantUML: ...

(Maybe because earlier in the same conversation I asked it to reverse-engineer an image into a PlantUML diagram)

Human: don't give me plantuml code, instead generate a diagram copy that uses red for deletions, green for additions

ChatGPT:

from PIL import Image, ImageDraw, ImageFont

# Load the baseline and destination images
baseline_path = "/mnt/data/file-MwFcNcNDScUwC4egFk6D4S"
destination_path = "/mnt/data/file-TLeecjECVwExNXxWqj7j3A"

baseline = Image.open(baseline_path)
destination = Image.open(destination_path)

# Create a new image to highlight differences
width, height = baseline.size
comparison_image = Image.new("RGB", (width, height), "white")
comparison_image.paste(baseline, (0, 0))

# Draw overlays for differences (e.g., add Part303 in green)
draw = ImageDraw.Draw(comparison_image)
font = None

try:
    # Load a default font
    font = ImageFont.truetype("arial.ttf", 14)
except IOError:
    # Use a basic font if default isn't available
    font = ImageFont.load_default()

# Add a green label for additions in the destination image
draw.rectangle([(width - 150, height - 100), (width - 20, height - 50)], outline="green", width=3)
draw.text((width - 145, height - 90), "Part303", fill="green", font=font)

# Save the comparison image to view differences
output_path = "/mnt/data/comparison_highlighted.png"
comparison_image.save(output_path)

output_path

The code couldn't work because it cannot locate the uploaded image in its sandbox environment
FileNotFoundError: [Errno 2] No such file or directory: '/mnt/data/file-MwFcNcNDScUwC4egFk6D4S'

But maybe the code is basically correct?

[VladimirAlexiev]

Maybe a better approach is to rely that the diagrams are very stable, and then use a library like ImageMagick to:

• Find the differing pixels
• Find bounding boxes of added vs removed pixels
• Highlight added with green background, and removed with red background

Of course, this is a naive approach, it won't work if some text was changed on an arrow; and for added/removed arrows we need to look for non-horizontal/vertical bounding boxes.

[VladimirAlexiev]

Copied from https://discord.com/channels/1316467343341256775/1316718414244478989.
I asked ChatGPT to generate PlantUML for this diagram:

It seemed to grok the text and structure, but the resulting diagram is disappointing:
It is too poor and has hallucinations:

BTW, PlantUML embeds the puml source code in the PNG. So even if I hadn't given the link to the source, one can get it from the PNG.