Comparison Engine

Flask server is running

Comparison

Comparison Engine refactored from AIlab-UI-Diff using Object-Oriented Programming.

Setup

  • install dependencies using poetry lock and poetry install
  • create .env file with API_KEY
  • run the virtual environment using poetry shell
  • run the Flask server with python app.py
  • go to frontend folder and install dependencies using npm install
  • run the Node server with node server.js
  • go to http://localhost:3000/compare
  • select test case to compare
  • run the comparison engine
  • wait a few seconds
  • select elements to display

On the next run, you can launch the comparison engine using ./run_servers.sh
Give it execute permissions using chmod +x run_servers.sh

Endpoints

Backend (Flask)

  • / [GET]: docs
  • /api/compare [POST]: json payload (diffs without DOM trees)
  • /api/compare/preprocess [POST]: preprocess DOM trees
  • /api/compare/detailed [POST]: detailed DOM trees
  • /api/compare/layout [POST]: layout DOM trees

Frontend (Node)

  • /compare [GET]: selection tool
  • /compare [POST]: rendered results

The Flask server is launched on port 8001
The Node server is launched on port 3000

Request

The request must be in JSON format (keys provided below).
In case of a missing URL for the DOM files, the algorithm will be changed to pixel.
You can pass data to the engine in 3 ways.

  1. Provide the comparison ID and environment:
  1. Send test case containing required keys:
    (test_case_name and comparison_mode are optional)

The options for "algorithm" are "PIXEL", "DOM-ELEMENT", and "AI-MODEL".

Comparison using "AI-MODEL" will do pixel comparison as preprocessing. So if the results from "AI-MODEL" look wierd, try "PIXEL" to see the diffs before model detection.

For branch UIDIFF-114, "DOM-ELEMENT" is not recommended. Bugs may exist.

  1. Send a file (directly or via URL) containing a test case list and choose one in /compare.

Response

The response is in JSON format (keys provided below).
By default, there is no elements dictionary.
DOM elements are provided on separate endpoints.

Diffs

All elements are converted into detailed_diffs.
This is necessary to display elements in the comparison-view.
detailed_diffs and layout_diffs share the same format as the following example: