我用 WorkBuddy + 艺术馆公开 API，做了一个按颜色搜画的工具

{
  "query": {
    "bool": {
      "must": [{"range": {"color.h": {"gte": 185, "lte": 235}}}],
      "filter": [
        {"exists": {"field": "image_id"}},
        {"exists": {"field": "color.h"}}
      ]
    }
  },
  "sort": [{"colorfulness": {"order": "desc"}}],
  "size": 24
}

{"bool": {"should": [
  {"range": {"color.h": {"gte": 335, "lte": 360}}},
  {"range": {"color.h": {"gte": 0, "lte": 25}}}
], "minimum_should_match": 1}}

用户拖动 HSL 滑块 -> 构建色彩查询 -> 调用 API -> 瀑布流展示匹配作品

const API_BASE = 'https://api.artic.edu/api/v1';
const FIELDS = 'id,title,artist_title,date_display,date_start,medium_display,' +
  'dimensions,credit_line,image_id,color,colorfulness,is_public_domain,' +
  'artwork_type_title,department_title,place_of_origin,thumbnail';

async function searchArtworks(reset) {
  const params = buildQuery(state.hue, state.sortBy, state.page, state.publicDomainOnly);
  const url = API_BASE + '/artworks/search?params=' +
    encodeURIComponent(JSON.stringify(params)) + '&fields=' + FIELDS + '&limit=24';
  const data = await (await fetch(url)).json();
  state.artworks = state.artworks.concat(data.data);
  renderGrid(reset);
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  var c = (1 - Math.abs(2 * l - 1)) * s;
  var x = c * (1 - Math.abs((h / 60) % 2 - 1));
  var m = l - c / 2;
  var r, g, b;
  if (h < 60)      { r=c; g=x; b=0; }
  else if (h < 120){ r=x; g=c; b=0; }
  else if (h < 180){ r=0; g=c; b=x; }
  else if (h < 240){ r=0; g=x; b=c; }
  else if (h < 300){ r=x; g=0; b=c; }
  else             { r=c; g=0; b=x; }
  return '#' + [r,g,b].map(v => Math.round((v+m)*255).toString(16).padStart(2,'0')).join('').toUpperCase();
}

var debounceTimer;
function debouncedSearch() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(function() { searchArtworks(true); }, 400);
}

.skeleton-img {
  background: linear-gradient(90deg, #f0eeec 25%, #e8e6e3 50%, #f0eeec 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

document.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT') return;
  if (e.key === 'ArrowLeft')  { state.hue = Math.max(0, state.hue - 5); ... }
  if (e.key === 'ArrowRight') { state.hue = Math.min(360, state.hue + 5); ... }
  if (e.key === 'r' || e.key === 'R') { document.getElementById('randomBtn').click(); }
});

https://www.artic.edu/iiif/2/{image_id}/full/{width},/0/default.jpg

class ArticHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        if self.path.startswith("/iiif/"):
            self._proxy_iiif()
            return
        super().do_GET()  # 其他请求走静态文件

    def _proxy_iiif(self):
        parts = self.path.split("/")
        image_id = parts[2]
        width = parts[3] if len(parts) > 3 else "843"
        iiif_url = f"https://www.artic.edu/iiif/2/{image_id}/full/{width},/0/default.jpg"

        # 缓存命中则直接返回
        cache_key = hashlib.md5(f"{image_id}_{width}".encode()).hexdigest()
        cache_path = os.path.join(CACHE_DIR, f"{cache_key}.jpg")
        if os.path.exists(cache_path):
            with open(cache_path, "rb") as f:
                self._send_image(f.read())
            return

        # 用 curl 发请求——curl 的 TLS 指纹能过 Cloudflare
        result = subprocess.run([
            "curl", "-s", "-L",
            "-H", f"AIC-User-Agent: {AIC_HEADER}",
            "-o", cache_path,
            iiif_url,
        ], capture_output=True, text=True, timeout=15)

function iiifUrl(imageId, width) {
  return '/iiif/' + imageId + '/' + (width || 400);
}
// <img src={iiifUrl(art.image_id, 400)} loading="lazy">

class ThreadingHTTPServer(socketserver.ThreadingMixIn, http.server.HTTPServer):
    daemon_threads = True
    request_queue_size = 50

# 每个 cache_key 有独立的锁，避免并发写同一文件
def get_cache_lock(key):
    with cache_locks_guard:
        if key not in cache_locks:
            cache_locks[key] = threading.Lock()
        return cache_locks[key]

python3 artic_server.py 8765
# Artic proxy server on http://localhost:8765

┌─────────────────────────────────────────┐
│  Hero 区：大图 + 展览标题 + 元信息       │
│  (作品数 / 跨度年代 / 艺术家数 / 部门数)  │
├──────────────────────────┬──────────────┤
│                          │  侧边栏       │
│  画廊区（3列瀑布流）       │  · 色彩面板   │
│  24件作品的卡片网格        │  · 时间轴     │
│                          │  · 艺术家排行  │
│                          │  · 部门分布   │
├──────────────────────────┴──────────────┤
│  音频导览（API 的 /sounds 端点）          │
├─────────────────────────────────────────┤
│  策展文本（API 的 /texts 端点）           │
└─────────────────────────────────────────┘

var results = await Promise.all([
  fetch(API + '/artworks/search?params=' + encodeURIComponent(JSON.stringify(artParams)) +
    '&fields=' + FIELDS + '&limit=24').then(r => r.json()),
  fetch(API + '/sounds/search?q=' + encodeURIComponent(q) + '&limit=5').then(r => r.json()),
  fetch(API + '/texts/search?q=' + encodeURIComponent(q) + '&limit=5').then(r => r.json())
]);

var colors = items.map(a => a.color).filter(c => c);
colors.sort((a, b) => (b.population || 0) - (a.population || 0));
var palette = colors.slice(0, 8);

var minD = Math.min.apply(null, dates);
var maxD = Math.max.apply(null, dates);
var range = maxD - minD || 1;
items.forEach(a => {
  var pct = ((a.date_start - minD) / range) * 100;
  // 在时间轴上 pct% 位置放一个圆点
});

function buildQuery(hue, sortBy, page, pdOnly) {
  const range = 25;
  let low = hue - range, high = hue + range;
  let rangeClauses = [];
  if (low < 0) {
    rangeClauses.push({range: {"color.h": {gte: low + 360, lte: 360}}});
    rangeClauses.push({range: {"color.h": {gte: 0, lte: high}}});
  } else if (high > 360) {
    rangeClauses.push({range: {"color.h": {gte: low, lte: 360}}});
    rangeClauses.push({range: {"color.h": {gte: 0, lte: high - 360}}});
  } else {
    rangeClauses.push({range: {"color.h": {gte: low, lte: high}}});
  }
  // ...
}