File size: 20,157 Bytes
00d05c7 ad289d9 00d05c7 8b072c6 00d05c7 5aa11da 00d05c7 0976499 00d05c7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ArteFact</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="css/artefact-context.css" />
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="cursor: pointer;">
<img src="images/dark_logo.png" alt="ArteFact" height="64">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown me-3">
<a class="nav-link dropdown-toggle" href="#" id="modelDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
AI Model
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="modelDropdown" id="modelDropdownMenu">
<!-- Populated by JS -->
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid py-4 flex-grow-1">
<div class="row main-row">
<div class="col-md-9 d-flex justify-content-center align-items-center">
<div id="uploadedImageContainer" class="position-relative d-flex justify-content-center align-items-center text-white w-100 h-100">
<div id="gridOverlay"
class="position-absolute"
style="pointer-events:none; display:none; z-index:9;"></div>
<div id="gridHighlightOverlay"
class="position-absolute"
style="pointer-events:none; display:none; z-index:11;"></div>
<div id="landingContent" class="w-100 p-4">
<!-- Top row: Topics (left) and Creators (right) -->
<div class="row mb-4">
<!-- Topics section -->
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Select Topics</h5>
<div id="topicTags" class="d-flex flex-wrap gap-2"></div>
</div>
</div>
</div>
<!-- Creators section -->
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Search Creators</h5>
<input type="text" id="creatorSearch" class="form-control mb-2" placeholder="Search creators..." />
<div id="creatorSearchResults" class="list-group mb-2"></div>
<div id="creatorTags" class="d-flex flex-wrap gap-2"></div>
</div>
</div>
</div>
</div
<!-- Bottom section: Upload and Examples -->
<div class="card bg-dark bg-opacity-50 text-white">
<div class="card-body text-center">
<div class="mb-4">
<button id="uploadTrigger"
class="btn btn-outline-dark border-2 mb-3"
style="font-size:1.2rem; color:#000;">
<i class="bi bi-upload" style="font-size: 2rem;"></i><br>Upload an Image
</button>
<input type="file" id="imageUpload" accept="image/*" class="d-none">
</div>
<h4 class="mb-3">Or</h4>
<h5 class="mb-3">Select from one of the historical examples</h5>
<div id="exampleContainer">
<div class="example-scroll overflow-auto d-flex flex-row gap-3 px-2" style="max-width: 100%; white-space: nowrap;">
<!-- 1. The Night Watch -->
<img class="example-img rounded border" src="images/examples/1200px-The_Night_Watch_-_HD.jpg" alt="" height="300">
<!-- 2. Bacchus and Ariadne -->
<img class="example-img rounded border" src="images/examples/Titian_Bacchus_and_Ariadne.jpg" alt="" height="300">
<!-- 3. Café Terrace at Night -->
<img class="example-img rounded border" src="images/examples/Van_Gogh_Cafeteras_bij_nacht.jpg" alt="" height="300">
<!-- 4. The School of Athens -->
<img class="example-img rounded border" src="images/examples/_The_School_of_Athens__by_Raffaello_Sanzio_da_Urbino.jpg" alt="" height="300">
<!-- 5. Kiss of Judas -->
<img class="example-img rounded border" src="images/examples/Giotto_-_Scrovegni_-_-31-_-_Kiss_of_Judas.jpg" alt="" height="300">
<!-- 6. San Giorgio Maggiore at Dusk -->
<img class="example-img rounded border" src="images/examples/Claude_Monet_Saint-Georges_majeur_au_crepuscule.jpg" alt="" height="300">
<!-- 7. The Last Supper -->
<img class="example-img rounded border" src="images/examples/The_Last_Supper_-_Leonardo_Da_Vinci_-_High_Resolution_32x16.jpg" alt="" height="300">
<!-- 8. The Garden of Earthly Delights -->
<img class="example-img rounded border" src="images/examples/3794px-The_Garden_of_earthly_delights.jpg" alt="" height="300">
</div>
<div class="mt-3 text-center">
<button id="selectImageBtn" class="btn btn-light d-none">Select</button>
</div>
</div>
</div>
</div>
</div>
<img id="uploadedImage" src="" alt="Uploaded Image" draggable="false" class="img-fluid d-none position-absolute" style="max-height: 100%; max-width: 100%;">
<div id="imageTools" class="d-none position-absolute top-0 start-0 m-3 bg-white bg-opacity-75 p-2 rounded d-flex flex-column align-items-center">
<button id="cropToolBtn" class="btn btn-sm btn-outline-dark mb-2" title="Crop">
<i class="bi bi-crop"></i>
</button>
<button id="undoToolBtn" class="btn btn-sm btn-outline-dark mb-2" title="Undo">
<i class="bi bi-arrow-counterclockwise"></i>
</button>
<button id="rerunToolBtn" class="btn btn-sm btn-outline-dark" title="Rerun">
<i class="bi bi-arrow-repeat"></i>
</button>
<button id="gridToolBtn" class="btn btn-sm btn-outline-dark mt-2" title="Toggle Grid">
<i class="bi bi-grid-3x3-gap"></i>
</button>
</div>
</div>
</div>
<div class="col-md-3 bg-light overflow-auto d-none animate__animated animate__fadeInRight" style="height: 100%;">
<h3 class="mt-3">Sentences</h3>
<ul id="sentenceList" class="list-group list-group-flush">
<!-- List items will go here -->
</ul>
</div>
</div>
<div class="row mt-4 align-items-stretch">
<div class="col-12 col-md-4 d-none animate__animated animate__fadeInUp d-flex" id="imageHistoryWrapper">
<div class="bg-light border rounded shadow-sm p-3 mt-3 h-100 w-100">
<h5 class="mb-3">Image History</h5>
<div id="imageHistory" class="d-flex flex-row flex-wrap gap-3 overflow-auto" style="max-height: 200px;">
<!-- Cropped images will be appended here -->
</div>
</div>
</div>
<div class="col-12 col-md-4 d-none animate__animated animate__fadeInUp d-flex" id="selectedTopicsWrapper">
<div class="bg-light border rounded shadow-sm p-3 mt-3 h-100 w-100">
<h5 class="mb-3">Selected Topics</h5>
<div id="selectedTopicTags" class="d-flex flex-wrap gap-2"></div>
</div>
</div>
<div class="col-12 col-md-4 d-none animate__animated animate__fadeInUp d-flex" id="selectedCreatorsWrapper">
<div class="bg-light border rounded shadow-sm p-3 mt-3 h-100 w-100">
<h5 class="mb-3">Selected Creators</h5>
<input type="text" id="creatorPanelSearch" class="form-control mb-2" placeholder="Search creators..." />
<div id="creatorPanelResults" class="list-group mb-2"></div>
<div id="selectedCreatorTags" class="d-flex flex-wrap gap-2"></div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/artefact-context.js"></script>
<!-- Working Overlay -->
<div id="workingOverlay" class="d-none position-fixed top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center bg-dark bg-opacity-75 text-white" style="z-index: 1100;">
<div class="text-center">
<i class="bi bi-arrow-repeat text-white spin" style="font-size:4rem;"></i>
<h4 class="mt-2 loading-dots">
Loading<span>.</span><span>.</span><span>.</span>
</h4>
</div>
</div>
<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="toggleViewGrid">
<label class="form-check-label" for="toggleViewGrid">View Grid (7 × 7)</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- About Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-durham text-white">
<h4 class="modal-title" id="aboutModalLabel">
<i class="bi bi-info-circle me-2"></i>About ArteFact
</h4>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Purpose -->
<section class="mb-4">
<h5 class="text-primary mb-3"><i class="bi bi-magic me-2"></i>Purpose</h5>
<p class="lead">By automatically linking visual elements in artworks to scholarly descriptions, ArteFact's ambition is to empower researchers, students, and art enthusiasts to discover new connections and understand artworks in their broader academic context.</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-upload text-success me-2"></i><strong>Upload or select artwork images</strong> and find scholarly passages that describe similar visual elements</li>
<li class="mb-2"><i class="bi bi-search text-info me-2"></i><strong>Search by region</strong> - crop specific areas of paintings to find text about those visual details</li>
<li class="mb-2"><i class="bi bi-filter text-warning me-2"></i><strong>Filter results</strong> by art historical topics or specific creators</li>
<li class="mb-2"><i class="bi bi-book text-primary me-2"></i><strong>Access scholarly sources</strong> with full citations, DOI links, and BibTeX references</li>
</ul>
</section>
<!-- What powers the app -->
<section class="mb-4">
<h5 class="text-primary mb-3"><i class="bi bi-cpu me-2"></i>What Powers ArteFact?</h5>
<p><strong>ArtContext Research Pipeline:</strong> A computational system that automatically harvests and processes thousands of art history texts.</p>
<div class="row g-3">
<div class="col-md-6">
<div class="card border-light h-100">
<div class="card-body p-3">
<h6 class="card-title text-info">Data Collection</h6>
<small>Automatically gathers painter information from Wikidata and scholarly articles from OpenAlex database</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-light h-100">
<div class="card-body p-3">
<h6 class="card-title text-success">Text Processing</h6>
<small>Downloads academic PDFs, converts to text, and extracts meaningful sentences</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-light h-100">
<div class="card-body p-3">
<h6 class="card-title text-warning">AI Analysis</h6>
<small>Uses PaintingCLIP (a specialised art-focused AI model) to understand visual-textual connections</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-light h-100">
<div class="card-body p-3">
<h6 class="card-title text-danger">Smart Matching</h6>
<small>Tries to find the most relevant scholarly passages for any artwork image you provide</small>
</div>
</div>
</div>
</div>
</section>
<!-- App features -->
<section class="mb-4">
<h5 class="text-primary mb-3"><i class="bi bi-gear me-2"></i>App Features</h5>
<div class="row g-3">
<div class="col-md-6">
<h6 class="text-secondary"><i class="bi bi-images me-1"></i>Image Input</h6>
<ul class="small">
<li>Drag & drop upload</li>
<li>Choose from historical examples</li>
<li>Crop and edit images</li>
<li>Image history tracking</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-secondary"><i class="bi bi-grid-3x3 me-1"></i>Region Analysis</h6>
<ul class="small">
<li>7×7 grid overlay</li>
<li>Click-to-analyze specific areas</li>
<li>Visual feedback highlighting</li>
<li>Region-specific text retrieval</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-secondary"><i class="bi bi-funnel me-1"></i>Smart Filtering</h6>
<ul class="small">
<li>Topic-based filtering</li>
<li>Creator/artist selection</li>
<li>Model switching (CLIP vs PaintingCLIP)</li>
<li>Real-time result updating</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-secondary"><i class="bi bi-journal-text me-1"></i>Academic Tools</h6>
<ul class="small">
<li>Full citation information</li>
<li>Work image gallery</li>
<li>One-click BibTeX copying</li>
<li>DOI links to sources</li>
<li>Embedded document previews</li>
</ul>
</div>
</div>
</section>
<!-- About production -->
<section class="mb-4">
<h5 class="text-primary mb-3"><i class="bi bi-people me-2"></i>About This Project</h5>
<div class="bg-light p-3 rounded">
<p class="mb-2"><strong>Created by:</strong> <a href="https://www.linkedin.com/in/samuel-waugh-31903b1bb/" target="_blank">Samuel Waugh</a></p>
<p class="mb-2"><strong>Supervised by:</strong> <a href="https://stuart-james.com" target="_blank">Dr Stuart James</a>, Department of Computer Science, Durham University</p>
<p class="mb-2"><strong>Supported by:</strong> <a href="https://n8cir.org.uk/themes/internships/internships-2025/" target="_blank">N8 Centre of Excellence in Computationally Intensive Research (N8 CIR)</a></p>
<p class="mb-3"><strong>Purpose:</strong> This project was developed as part of the N8 CIR 2025 Internship programme to explore how AI can help bridge the gap between visual art and textual scholarship, making art historical research more accessible and discoverable.</p>
<div class="alert alert-info mb-0">
<small><i class="bi bi-lightbulb me-1"></i><strong>Why it matters:</strong> By automatically linking visual elements in artworks to scholarly descriptions, ArteFact's ambition is to empower researchers, students, and art enthusiasts to discover new connections and understand artworks in their broader academic context.</small>
</div>
</div>
</section>
<!-- Technical note -->
<section>
<h6 class="text-muted mb-2"><i class="bi bi-code-square me-1"></i>Technical Details</h6>
<p class="small text-muted">ArteFact uses PaintingCLIP, a fine-tuned version of OpenAI's CLIP model specialised for art historical content. The system processes over thousands of scholarly articles to create a comprehensive knowledge base of art historical descriptions.</p>
</section>
</div>
<div class="modal-footer">
<a href="paper/waugh2025artcontext.pdf" target="_blank" class="btn btn-outline-success btn-sm me-2">
<i class="bi bi-file-earmark-pdf me-1"></i>Download Research Paper
</a>
<a href="https://github.com/sammwaughh/artefact-context" target="_blank" class="btn btn-outline-primary btn-sm">
<i class="bi bi-github me-1"></i>View Source Code
</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="footer bg-durham text-white py-3 mt-4">
<div class="container-lg d-flex flex-column flex-md-row
justify-content-between align-items-center gap-2">
<!-- attribution -->
<div class="small">
ArteFact © 2025 <span class="d-none d-md-inline">·</span><br class="d-md-none">
<a href="https://www.linkedin.com/in/samuel-waugh-31903b1bb/" target="_blank" class="text-white">Samuel Waugh</a><br class="d-md-none">
<span class="d-none d-md-inline">·</span>
<a href="https://stuart-james.com" target="_blank" class="text-white">Dr Stuart James</a>
</div>
<!-- organisations -->
<div class="small text-md-center">
Durham University |
<a href="https://n8cir.org.uk/themes/internships/internships-2025/"
target="_blank">N8 CIR Internship 2025</a>
</div>
<!-- social / repo -->
<div>
<a href="paper/waugh2025artcontext.pdf"
class="text-white fs-5 me-3" target="_blank" aria-label="Research Paper">
<i class="bi bi-file-earmark-pdf"></i>
</a>
<a href="https://github.com/sammwaughh/artefact-context"
class="text-white fs-5 me-3" target="_blank" aria-label="GitHub">
<i class="bi bi-github"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
|