Add a view for similar images

1 files changed, 109 insertions, 6 deletions

diff --git a/public/gallery.js b/public/gallery.js
index 0967534..f18e4a9 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -8,6 +8,8 @@ function call(method, params) {
 	})
 }
 
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
 let BrowseModel = {
 	path: undefined,
 	subdirectories: [],
@@ -113,6 +115,8 @@ let Browse = {
 	},
 }
 
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
 let ViewModel = {
 	sha1: undefined,
 	width: 0,
@@ -121,10 +125,12 @@ let ViewModel = {
 	tags: {},
 
 	async reload(sha1) {
-		this.sha1 = sha1
-		this.width = this.height = 0
-		this.paths = []
-		this.tags = {}
+		if (this.sha1 !== sha1) {
+			this.sha1 = sha1
+			this.width = this.height = 0
+			this.paths = []
+			this.tags = {}
+		}
 
 		let resp = await call('info', {sha1: sha1})
 		this.width = resp.width
@@ -195,20 +201,117 @@ let View = {
 				: "No image.",
 		])
 		return m('.container', {}, [
-			m('.header', {}, "View"),
+			m('.header', {}, [
+				"View",
+				m(m.route.Link, {
+					href: `/similar/:key`,
+					params: {key: ViewModel.sha1},
+				}, "Similar")
+			]),
 			m('.body', {}, [view, m(ViewBar)]),
 		])
 	},
 }
 
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let SimilarModel = {
+	sha1: undefined,
+	info: {paths: []},
+	groups: {},
+
+	async reload(sha1) {
+		if (this.sha1 !== sha1) {
+			this.sha1 = sha1
+			this.info = {paths: []}
+			this.groups = {}
+		}
+
+		let resp = await call('similar', {sha1: sha1})
+		this.info = resp.info
+		this.groups = resp.groups
+	},
+}
+
+let SimilarThumbnail = {
+	view(vnode) {
+		const info = vnode.attrs.info
+		return m(m.route.Link, {href: `/view/${info.sha1}`},
+			m('img', {src: `/thumb/${info.sha1}`,
+				width: info.thumbW, height: info.thumbH}))
+	},
+}
+
+let SimilarGroup = {
+	view(vnode) {
+		const images = vnode.attrs.images
+		let result = [
+			m('h2', vnode.attrs.name),
+			images.map(info => m('.row', [
+				m(SimilarThumbnail, {info}),
+				m('ul', [
+					m('li', Math.round(info.pixelsRatio * 100) +
+						"% pixels of input image"),
+					info.paths.map(path =>
+						m('li', m(ViewBarPath, {path}))),
+				]),
+			]))
+		]
+		if (!images.length)
+			result.push("No matches.")
+		return result
+	},
+}
+
+let SimilarList = {
+	view(vnode) {
+		if (SimilarModel.sha1 === undefined ||
+			SimilarModel.info.paths.length == 0)
+			return "No image"
+
+		const info = SimilarModel.info
+		return m('.similar', {}, [
+			m('.row', [
+				m(SimilarThumbnail, {info}),
+				m('ul', info.paths.map(path =>
+					m('li', m(ViewBarPath, {path})))),
+			]),
+			Object.entries(SimilarModel.groups).map(([name, images]) =>
+				m(SimilarGroup, {name, images})),
+		])
+	},
+}
+
+let Similar = {
+	oninit(vnode) {
+		let sha1 = vnode.attrs.key || ""
+		SimilarModel.reload(sha1)
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m('.header', {}, [
+				"Similarity search",
+				m(m.route.Link, {
+					href: `/view/:key`,
+					params: {key: SimilarModel.sha1},
+				}, "View")
+			]),
+			m('.body', {}, m(SimilarList)),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
 window.addEventListener('load', () => {
 	m.route(document.body, "/browse/", {
 		// The path doesn't need to be escaped, perhaps change that (":key...").
 		"/browse/": Browse,
 		"/browse/:key": Browse,
 		"/view/:key": View,
+		"/similar/:key": Similar,
 
-		"/similar/:sha1": undefined,
 		"/tags": undefined,
 		"/tags/:space": undefined,
 		"/tags/:space/:tag": undefined,