Work on UI
This commit is contained in:
Claudio Maggioni (maggicl)
parent
3d201a52cf
commit
12e1344e23
1 changed files with 107 additions and 24 deletions
113
ui/index.html
113
ui/index.html
|
|
@ -3,54 +3,137 @@
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>FoamTree Quick Start</title>
|
<title>Image Search IR System - Claudio Maggioni</title>
|
||||||
<meta charset="utf-8" />
|
<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>
|
<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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="docs"></div>
|
<nav>
|
||||||
<div id="visualization" style="width: 800px; height: 600px"></div>
|
<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">
|
<template id="document">
|
||||||
<div class="document">
|
<div class="document" id="doc{{ id }}">
|
||||||
<img width="300" src="{{ url }}"/>
|
<img src="{{ url }}"/>
|
||||||
<h2>{{ title }}</h2>
|
<h2><a href="{{ site_url }}">{{ title }}</a></h2>
|
||||||
<h3>By {{ author }}</h3>
|
<h3>By {{ author }}</h3>
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
</div>
|
||||||
<script src="./carrotsearch.foamtree.js"></script>
|
<script src="./carrotsearch.foamtree.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const solr = "http://localhost:8983/solr/photo";
|
const solr = "http://localhost:8983/solr/photo";
|
||||||
window.addEventListener("load", async function() {
|
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 templateHTML = document.querySelector("#document").innerHTML;
|
||||||
let docs = document.querySelector("#docs");
|
let docs = document.querySelector("#docs");
|
||||||
let docMap = {}
|
let docMap = {}
|
||||||
|
|
||||||
const doc = (docData) => {
|
const doc = (docData) => {
|
||||||
docMap[docData.id] = docData;
|
docMap[docData.id] = docData;
|
||||||
|
console.log(templateHTML);
|
||||||
return templateHTML
|
return templateHTML
|
||||||
.replace("{{ title }}", docData.t_title)
|
.replaceAll("{{ id }}", docData.id)
|
||||||
.replace("{{ author }}", docData.t_author)
|
.replaceAll("{{ title }}", docData.t_title)
|
||||||
.replace("{{ description }}", docData.t_description)
|
.replaceAll("{{ author }}", docData.t_author)
|
||||||
.replace("{{ url }}", docData.img_url);
|
.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();
|
let body = await list.json();
|
||||||
console.log(body);
|
console.log(body);
|
||||||
docs.innerHTML = body.response.docs.map(doc).reduce((a, b) => a + b, "");
|
docs.innerHTML = body.response.docs.map(doc).reduce((a, b) => a + b, "");
|
||||||
|
|
||||||
let clusters = body.clusters.map(e => { return { label: e.labels[0], weight:
|
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 }; }) }; });
|
e.score, groups: e.docs.map(id => { return { id, label: docMap[id].t_title }; }) }; });
|
||||||
var foamtree = new CarrotSearchFoamTree({
|
|
||||||
|
if (foamtree === null) {
|
||||||
|
foamtree = new CarrotSearchFoamTree({
|
||||||
id: "visualization",
|
id: "visualization",
|
||||||
|
layout: "squarified",
|
||||||
|
groupLabelFontFamily: "Fira Sans",
|
||||||
dataObject: {
|
dataObject: {
|
||||||
groups: clusters
|
groups: clusters
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
foamtree.set({ dataObject: { groups: clusters }});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Reference in a new issue