Work on UI
This commit is contained in:
Claudio Maggioni (maggicl)
parent
3d201a52cf
commit
12e1344e23
1 changed files with 107 additions and 24 deletions
131
ui/index.html
131
ui/index.html
|
|
@ -3,54 +3,137 @@
|
|||
|
||||
<html>
|
||||
<head>
|
||||
<title>FoamTree Quick Start</title>
|
||||
<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>
|
||||
.document { float: left }
|
||||
* { 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>
|
||||
<div id="docs"></div>
|
||||
<div id="visualization" style="width: 800px; height: 600px"></div>
|
||||
<template id="document">
|
||||
<div class="document">
|
||||
<img width="300" src="{{ url }}"/>
|
||||
<h2>{{ title }}</h2>
|
||||
<h3>By {{ author }}</h3>
|
||||
{{ description }}
|
||||
<nav>
|
||||
<div class="title">
|
||||
<h1>Image Search IR System - By Claudio Maggioni</h1>
|
||||
</div>
|
||||
</template>
|
||||
<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";
|
||||
window.addEventListener("load", async function() {
|
||||
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
|
||||
.replace("{{ title }}", docData.t_title)
|
||||
.replace("{{ author }}", docData.t_author)
|
||||
.replace("{{ description }}", docData.t_description)
|
||||
.replace("{{ url }}", docData.img_url);
|
||||
.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=" + escape(prompt("query")));
|
||||
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 }; }) }; });
|
||||
var foamtree = new CarrotSearchFoamTree({
|
||||
id: "visualization",
|
||||
dataObject: {
|
||||
groups: clusters
|
||||
}
|
||||
});
|
||||
|
||||
if (foamtree === null) {
|
||||
foamtree = new CarrotSearchFoamTree({
|
||||
id: "visualization",
|
||||
layout: "squarified",
|
||||
groupLabelFontFamily: "Fira Sans",
|
||||
dataObject: {
|
||||
groups: clusters
|
||||
}
|
||||
});
|
||||
} else {
|
||||
foamtree.set({ dataObject: { groups: clusters }});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Reference in a new issue