Navegant per un segle de teatre barceloní
L’Arenas Explorer és un explorador interactiu de grafs de coneixement construït sobre 564 negatius en placa de vidre fotografiats per Rafael Areñas entre 1909 i 1935. La col·lecció documenta actors, dramaturgs, teatres i companyies de l’escena cultural modernista de Barcelona —i fins ara era totalment invisible per als investigadors.
El projecte és el component pràctic del Treball de Final de Màster en Humanitats Digitals de @Sara Gálvez Torres a la Universitat Autònoma de Barcelona.
El Problema
Els catàlegs d’arxiu tradicionals tracten les fotografies com a objectes aïllats: qui hi apareix, quan es van fer. El que no poden representar és la xarxa. Una sola fotografia d’Areñas és la intersecció d’un actor, un dramaturg, un teatre i una companyia —relacions que existien però que eren estructuralment invisibles en els registres de catàleg plans.
La tesi de la Sara identifica això com a dispersió semàntica: la informació hi és, però tancada en files desconnectades. El repte era fer que aquestes connexions fossin explorables sense perdre la fidelitat de les dades històriques originals.
Graf de Coneixement
En lloc d’una base de dades relacional, vaig construir un Graf de Coneixement on cada entitat és un node i cada relació documentada és una aresta. Tres capes de metadades extretes mitjançant IA enriqueixen cada node de fotografia:
- Data estimada - un model de visió per ordinador prediu l’any de cada fotografia amb una puntuació de confiança.
- Detecció de vestuari - les peces de roba detectades s’indexen com a nodes separats, permetent consultes de moda de diferents èpoques.
- Transcripció HTR - les anotacions manuscrites al revers de cada placa s’extreuen mitjançant Reconeixement de Text Manuscrit (HTR) i s’enllacen a la imatge.
El resultat és un graf de 740 nodes i 4.120 arestes que permet als investigadors navegar per la col·lecció per actor, any, vestuari, teatre o paraula clau —simultàniament.
Decisions Tècniques
Disseny precalculat
Executar un algorisme de força en el navegador amb 740 nodes és lent. En el seu lloc, ForceAtlas2 executa 500 iteracions en el moment de la construcció sobre el fitxer GEXF d’origen i serialitza les coordenades finals dels nodes en un JSON estàtic. El client es carrega directament en la constel·lació resolta —cost zero de disseny en temps d’execució.
Renderitzat WebGL
El graf es renderitza mitjançant Sigma.js en un llenç WebGL. Cada node d’imatge mostra la fotografia real com una textura circular, permetent als investigadors veure el contingut visual de l’arxiu sense sortir de la vista del graf.
Proxy d’imatges
Les imatges d’origen resideixen als servidors de la Generalitat de Catalunya sota restriccions de CORS. Vaig implementar una ruta d’API de Next.js que fa de proxy de les sol·licituds d’imatges al servidor, servint-les de manera transparent al client sense exposar credencials.
Interfície
L’aplicació és una pantalla dividida: el graf ocupa tot el panell esquerre i el panell de detalls contextuals resideix a la dreta.
En fer clic a qualsevol node s’activa un fos encadenat que carrega la vista de detalls —fotografia completa, any predit amb la confiança del model, peces de roba detectades i una galeria de fotografies del mateix any. En fer clic a qualsevol element del panell de detalls, la càmera del graf es mou cap al node corresponent, mantenint el context espacial en tot moment.
Piló Tècnic
| Tecnologia | Propòsit |
|---|---|
| Next.js | Framework, rutes d’API, construcció estàtica |
| React + TypeScript | Interfície d’usuari i seguretat de tipus |
| Sigma.js | Renderitzat de grafs amb WebGL |
| Graphology | Model de dades de grafs i algorismes |
| graphology-layout-forceatlas2 | Disseny de nodes precalculat |
| TailwindCSS | Estils |
| Framer Motion | Transicions de panells i fosos |
| Sharp | Pipeline d’optimització de miniatures |
Resultats
- 564 fotografies en placa de vidre de 1909–1935 digitalitzades i connectades semànticament
- 740 nodes - fotografies, actors, dramaturgs, teatres, companyies, anys, peces de roba
- 4.120 arestes - relacions semàntiques explícites entre tots els tipus d’entitats
- 3 models d’IA - estimació de data, detecció de vestuari, transcripció HTR
- 0ms de cost de disseny en temps d’execució - totes les posicions s’han calculat prèviament en el moment de la construcció