klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Landing Page Look in General and Layout for Mobile

Browse Source 
- Ask for 6 Images to Fill Grid into 3x2 Layout
- Submit Form on Hitting Enter
This commit is contained in:
Debanjum Singh Solanky
2022-07-16 16:40:53 +04:00
parent cf207d6ebe
commit 47613cba1f
1 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/interface/web/index.html
View File

@@ -3,10 +3,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Semantic Search</title> <title>Semantic Search</title>
</head> </head>
<script> <script>
function render_image(item) { function render_image(item) {
return ` return `
<a href="${item.entry}"> <a href="${item.entry}" class="image-link">
<img id=${item.score} src="${item.entry}?${Math.random()}" <img id=${item.score} src="${item.entry}?${Math.random()}"
title="Effective Score: ${item.score}, Meta: ${item.metadata_score}, Image: ${item.image_score}" title="Effective Score: ${item.score}, Meta: ${item.metadata_score}, Image: ${item.image_score}"
class="image"> class="image">
@@ -21,7 +22,7 @@
query = document.getElementById("query").value; query = document.getElementById("query").value;
type = document.getElementById("type").value; type = document.getElementById("type").value;
console.log(query, type); console.log(query, type);
fetch(`/search?q=${query}&t=${type}`) fetch(`/search?q=${query}&t=${type}&n=6`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
console.log(data); console.log(data);
@@ -42,12 +43,19 @@
render_json(data); render_json(data);
}); });
} }
function search_on_enter(event) {
if (event.key == 'Enter') {
search();
}
}
</script> </script>
<body> <body>
<h1>Semantic Search</h1> <h1>Semantic Search</h1>
<!--Add Text Box To Enter Query --> <!--Add Text Box To Enter Query -->
<input id="query" type="text" placeholder="Search"> <input id="query" type="text" placeholder="Search" onkeydown=search_on_enter(event)>
<!--Add Dropdown to Select Query Type. <!--Add Dropdown to Select Query Type.
Query Types can be: notes, ledger, images, music. Query Types can be: notes, ledger, images, music.
@@ -61,31 +69,49 @@
<!--Add Button To Search --> <!--Add Button To Search -->
<button id="search" onclick="search()">Search</button> <button id="search" onclick="search()">Search</button>
<!--Add Button To Search --> <!--Add Button To Regenerate -->
<button id="regenerate" onclick="regenerate()">Regenerate</button> <button id="regenerate" onclick="regenerate()">Regenerate</button>
<!-- Section to Render Results -->
<div id="results"></div> <div id="results"></div>
</body> </body>
<style> <style>
body { body {
display: grid; display: grid;
grid-template-columns: 1fr min(65ch, 100%) 1fr; grid-template-columns: 1fr min(70vw, 100%) 1fr;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background: #eee;
color: #888;
text-align: center; text-align: center;
font-family: roboto, karma, segoe ui, sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 1.5em;
} }
body > * { body > * {
grid-column: 2; grid-column: 2;
padding: 10px;
margin: 10px; margin: 10px;
} }
h1 {
font-weight: 200;
color: #888;
}
button { button {
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#results {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.image-link {
place-self: center;
}
.image { .image {
width: 20vw; width: 20vw;
display: inline-grid;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }