|
|
<!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"> |
|
|
|
|
|
</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"> |
|
|
|
|
|
<div class="row mb-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 |
|
|
|
|
|
|
|
|
<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;"> |
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/1200px-The_Night_Watch_-_HD.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/Titian_Bacchus_and_Ariadne.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/Van_Gogh_Cafeteras_bij_nacht.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/_The_School_of_Athens__by_Raffaello_Sanzio_da_Urbino.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/Giotto_-_Scrovegni_-_-31-_-_Kiss_of_Judas.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/Claude_Monet_Saint-Georges_majeur_au_crepuscule.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<img class="example-img rounded border" src="images/examples/The_Last_Supper_-_Leonardo_Da_Vinci_-_High_Resolution_32x16.jpg" alt="" height="300"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</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;"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
