# Artwork collection

54 artworks across two versions: 14 store/item categories, 14 app illustrations,
18 Tamil Nadu district banners, and 8 state banners. Browse `artwork.html`.
These are illustrations, not additional product photographs. Existing product
catalogs and their third-party image attribution remain unchanged.

## Coverage

- Categories: supermarket, bakery, electronics, restaurant, fruits, vegetables,
  dairy and eggs, rice and pulses, personal care, household supplies, stationery, fashion, pharmacy, and sports and fitness.
- Apps: Sense Daily, Sense POS (web/mobile), Sense Fresh (billing/kitchen/customer),
  Clay Handyman, E-receipt, TapPay, Scanner, SenseUI Terminal, Shadow Escape,
  and a reusable Revenue Dashboard illustration. Version 2 adds Sense Daily order
  success, empty cart, and store location illustrations plus Sense POS cloud sync.
- Districts: Coimbatore, Chennai, Madurai, Thanjavur, The Nilgiris, Kanyakumari,
  Tiruppur, Erode, Salem, Tiruchirappalli, Tenkasi, Dharmapuri,
  Tirunelveli, Krishnagiri, Vellore, Dindigul, Kanchipuram, and Ramanathapuram.
- States: Tamil Nadu, Kerala, Karnataka, Rajasthan, Andhra Pradesh, Gujarat, Telangana, and Maharashtra.

This release does not cover every Indian district or state. District artwork
uses stylized landmarks or local industries; it is not an exact architectural
record. All backgrounds are white, not transparent. Text is baked into banners;
the greeting and place name are also accessible through the image alt/name.

## Use in apps

After deploying this branch to your CDN, fetch `/artwork.json`. Its `items` each
provide `id`, `name`, `kind`, `state`, `alt`, `master`, `path`, and `variants`
(path, width, height). Paths are relative to the CDN origin. `path` selects
350px for square artwork or 750px for wide location banners.

```js
const base = 'https://sense-cdn.pages.dev/';
const { items } = await fetch(new URL('artwork.json', base)).then(r => r.json());
const banner = items.find(i => i.id === 'district-coimbatore');
image.src = new URL(banner.path, base).href;
image.alt = banner.alt;
image.srcset = banner.variants.map(v => `${new URL(v.path, base)} ${v.width}w`).join(', ');
image.sizes = '(max-width: 750px) 100vw, 750px';
```

Keep banner aspect ratio using `width:100%; height:auto; object-fit:contain`.
Do not crop banners into square product cards. Square variants are 64, 128,
256, 350 and 700 pixels. Banner variants are 750×250 and 1500×500.
Full-resolution WebP masters preserve the generated canvas dimensions.

## Rebuild and extend

Install Pillow, then run `python3 scripts/build_artwork.py`.
The builder reads `artwork-sources.json`, uses committed WebP masters, and
rebuilds all variants and `artwork.json` without an API key or network access.
The source manifest records provenance. Version 1 includes generation prompts.
Version 2 uses artwork supplied by the repository owner.

New artwork belongs under `artwork/v2/` (or another new version) rather than
overwriting immutable cached v1 URLs. Add the new master entry to
`artwork-sources.json`, rebuild, visually inspect, and deploy.

The updated `scripts/deploy.sh` includes the artwork directory, catalog,
gallery and this guide. Committing or opening a PR does not itself prove the
Cloudflare site has deployed. Verify an artwork URL after deployment.