140 lines
3.7 KiB
HTML
140 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<!-- vim: set ts=2 sw=2 et tw=80: -->
|
|
|
|
<html>
|
|
<head>
|
|
<title>Image Search IR System - Claudio Maggioni</title>
|
|
<meta charset="utf-8" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { font-size: 14px; }
|
|
body {
|
|
font-family: 'Fira Sans', sans-serif;
|
|
margin: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
max-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
nav { flex: 0 0; }
|
|
main { flex: 1; display: flex; flex-grow: 1; min-height: 0 }
|
|
#visualization {
|
|
width: 15rem;
|
|
padding: .25rem;
|
|
border-radius: .125rem;
|
|
margin-right: .5rem;
|
|
background: #AAA;
|
|
}
|
|
#docs {
|
|
flex-grow: 1;
|
|
flex: 2;
|
|
display: grid;
|
|
grid-template-columns: repeat(4,1fr);
|
|
overflow-y: scroll;
|
|
}
|
|
.title {
|
|
background: #333;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
.title h1 { margin: 0; font-size: 1.4rem; }
|
|
.searchbox {
|
|
padding: 1em;
|
|
background: #666;
|
|
}
|
|
.searchbox input {
|
|
width: calc(100% - 2em);
|
|
}
|
|
.document {
|
|
float: left;
|
|
margin: .25rem;
|
|
background: #CCC;
|
|
border-radius: .125rem;
|
|
}
|
|
.document img { width: calc(100% - 1rem); }
|
|
.document h2 { font-size: 1.2rem; }
|
|
.document h3 { font-size: 1.1rem; }
|
|
.document img { margin: .5rem .5rem 0 .5rem; }
|
|
.document h2, .document h3, .document p { margin: .25rem; };
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<nav>
|
|
<div class="title">
|
|
<h1>Image Search IR System - By Claudio Maggioni</h1>
|
|
</div>
|
|
<div class="searchbox">
|
|
<form id="form">
|
|
<input type="text" id="q" placeholder="Search..."/>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<div id="visualization"></div>
|
|
<div id="docs">
|
|
<div style="grid-column: 1 / 5; text-align: center; padding: 2em;
|
|
background: #CCC;">
|
|
Input your query in the search box above and then press Enter.
|
|
Result clustering will appear on the left sidebar.
|
|
</div>
|
|
</div>
|
|
<template id="document">
|
|
<div class="document" id="doc{{ id }}">
|
|
<img src="{{ url }}"/>
|
|
<h2><a href="{{ site_url }}">{{ title }}</a></h2>
|
|
<h3>By {{ author }}</h3>
|
|
{{ description }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<script src="./carrotsearch.foamtree.js"></script>
|
|
<script>
|
|
const solr = "http://localhost:8983/solr/photo";
|
|
const q = document.querySelector("#q");
|
|
let foamtree = null;
|
|
|
|
document.querySelector("#form").addEventListener("submit", async function(e) {
|
|
e.preventDefault();
|
|
let templateHTML = document.querySelector("#document").innerHTML;
|
|
let docs = document.querySelector("#docs");
|
|
let docMap = {}
|
|
|
|
const doc = (docData) => {
|
|
docMap[docData.id] = docData;
|
|
console.log(templateHTML);
|
|
return templateHTML
|
|
.replaceAll("{{ id }}", docData.id)
|
|
.replaceAll("{{ title }}", docData.t_title)
|
|
.replaceAll("{{ author }}", docData.t_author)
|
|
.replaceAll("{{ description }}", docData.t_description)
|
|
.replaceAll("{{ url }}", docData.img_url)
|
|
.replaceAll("{{ site_url }}", "#");
|
|
};
|
|
|
|
let list = await fetch(solr + "/clustering?q=" + q.value);
|
|
let body = await list.json();
|
|
console.log(body);
|
|
docs.innerHTML = body.response.docs.map(doc).reduce((a, b) => a + b, "");
|
|
|
|
let clusters = body.clusters.map(e => { return { label: e.labels[0], weight:
|
|
e.score, groups: e.docs.map(id => { return { id, label: docMap[id].t_title }; }) }; });
|
|
|
|
if (foamtree === null) {
|
|
foamtree = new CarrotSearchFoamTree({
|
|
id: "visualization",
|
|
layout: "squarified",
|
|
groupLabelFontFamily: "Fira Sans",
|
|
dataObject: {
|
|
groups: clusters
|
|
}
|
|
});
|
|
} else {
|
|
foamtree.set({ dataObject: { groups: clusters }});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>`
|