cssynth 0.7.0

cssynth compiles flat 400×300 pictures into short HTML/CSS for CSSBattle-style code golf.

Try it in the browser: https://fmindstormer.github.io/cssynth/demo/ compiles your own picture locally with Pyodide.

What's new: comparing whole programs

The greedy search commits to the shape that fixes the most pixels at each step, so two circles stacked on an oval used to become one tall box plus patches. The re-search now compares finished programs:

• A color whose region falls into parts is redrawn with one shape per part. Examples are two stacked circles or a cloud of discs. The program is finished and kept only if it scores better. 2024-02-27 went from 706 characters to 200 (human: 481).
• The three best results are re-searched, not only the best, in parallel when there are several processes. A result that starts a little worse sometimes ends much better: the sunburst (2024-03-01) went from 935 characters to 460. --research 1 restores the old behavior.
• Shorter inset: it drops lengths that CSS repeats (inset:100px) without breaking a padding that elements share.

What the numbers establish

On the 66 development-set targets, rendered in Chromium:

	0.6.0	0.7.0
Shorter than the human solution	56 / 66	60 / 66
Total characters	23,329	21,175
At ≥ 99% pixel match	66 / 66	66 / 66

These are the targets the compiler was developed on. The human baseline is readable code from two public repositories, minified but not golfed. It is a baseline, not a leaderboard.

On a fresh held-out set (48 targets from six structural families, compiled once and never inspected), 0.7.0 solves the same 43 targets as 0.6.0's search. On those it writes 12.1% less code (95% interval: 1.4% to 22.7% less). It takes 1.7 times the CPU; giving 0.6.0's search that much time as more starts changes nothing. Details are in the README.

Cost: a compile takes 1.5 to 3 times the CPU of 0.6.0, depending on the picture. With several processes (the CLI uses all cores by default), the extra re-searches run in parallel, so wall time grows much less.

Install from this release

This version is not on PyPI. Install the wheel attached here:

pip install cssynth-0.7.0-py3-none-any.whl
cssynth target.png

Files

File	Contents
cssynth-0.7.0-py3-none-any.whl, cssynth-0.7.0.tar.gz	the package
cssynth-0.7.0-examples.zip	six example targets (MIT, from OmPreetham/cssbattle) and the demo's three saved results
cssynth-0.7.0-benchmark.zip	results.json and ablation.json: cssynth's outputs and scores on the 66 development-set targets
SHA256SUMS	checksums for all of the above

The demo's re-search checkbox still re-searches one result, which keeps the browser fast. Its three saved results were compiled without re-search. The demo's live "estimated match" comes from cssynth's internal rasterizer; benchmark scores come from Chromium renders. The browser build uses greedy box-shadow grouping instead of OR-Tools.

cssynth 0.6.0

cssynth compiles flat 400×300 pictures into short HTML/CSS for CSSBattle-style code golf.

Try it in the browser: https://fmindstormer.github.io/cssynth/demo/ shows three saved results at once, compiles your own picture locally with Pyodide, and lets you cancel, retry and download the generated HTML.

Install from this release

This version is not on PyPI. Install the wheel attached here:

pip install cssynth-0.6.0-py3-none-any.whl
cssynth target.png

Files

File	Contents
cssynth-0.6.0-py3-none-any.whl, cssynth-0.6.0.tar.gz	the package
cssynth-0.6.0-examples.zip	six example targets (MIT, from OmPreetham/cssbattle) and the demo's three saved results
cssynth-0.6.0-benchmark.zip	results.json and ablation.json: cssynth's outputs and scores on the 66 development-set targets
SHA256SUMS	checksums for all of the above

What the numbers establish

On the 66 development-set targets, the targets the compiler was developed on, cssynth's code is shorter than the human solution on 56, and all 66 render at a 99%+ pixel match in Chromium. The human baseline is readable code from two public repositories, minified but not golfed. It is a baseline, not a leaderboard. Results on held-out targets are in the README.

The demo's live "estimated match" comes from cssynth's internal rasterizer; benchmark scores come from Chromium renders. The browser build uses greedy box-shadow grouping instead of OR-Tools.