sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 15:38:55 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Create Basic Landing Page to Query Semantic Search and Render Results

Browse source 
- Allow viewing image results returned by Semantic Search.
  Until now there wasn't any interface within the app to view image
  search results. For text results, we at least had the emacs interface

- This should help with debugging issues with image search too
  For text the Swagger interface was good enough
This commit is contained in:
Debanjum Singh Solanky 2022-07-15 22:07:39 +04:00
parent 4e27ae0577
commit a6aef62a99
3 changed files with 89 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -6,4 +6,6 @@ tests/data/embeddings
src/.data
.vscode
*.gz
*.pt
*.pt
/src/interface/web/*.jpg
/src/interface/web/*.png

78
src/interface/web/index.html Normal file
View file

@ -0,0 +1,78 @@
<html lang="en">
<script>
function render_image(item) {
return `<a href="${item.entry}">
<img src="${item.entry}"
title="Effective Score: ${item.score}, Meta: ${item.metadata_score}, Image: ${item.image_score}"
class="image">
</a>`
}
function render_json(data) {
return `<pre id="json">${JSON.stringify(data, null, 2)}</pre>`
}
function search() {
query = document.getElementById("query").value;
type = document.getElementById("type").value;
console.log(query, type);
fetch(`/search?q=${query}&t=${type}`)
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById("results").innerHTML =
type == "image"
? data.map(render_image).join('')
: render_json(data);
});
}
</script>
<body>
<!--Add Text Box To Enter Query -->
<input id="query" type="text" placeholder="Search">
<!--Add Dropdown to Select Query Type.
Query Types can be: notes, ledger, images, music.
Set Default type to images-->
<select id="type">
<option value="image">Image</option>
<option value="notes">Notes</option>
<option value="ledger">Ledger</option>
<option value="music">Music</option>
</select>
<!--Add Button To Search -->
<button id="search" onclick="search()">Search</button>
<div id="results"></div>
</body>
<style>
body {
display: grid;
grid-template-columns: 1fr min(65ch, 100%) 1fr;
margin: 0px;
padding: 0px;
text-align: center;
}
body > * {
grid-column: 2;
margin: 10px;
}
#search {
border-radius: 5px;
border: 1px solid #ccc;
}
.image {
width: 20vw;
display: inline-grid;
border-radius: 10px;
border: 1px solid #ccc;
}
#json {
white-space: pre-wrap;
}
</style>
</html>

10
src/main.py
View file

@ -1,12 +1,12 @@
# Standard Packages
import sys, json, yaml
import sys, json, yaml, os
from typing import Optional
# External Packages
import uvicorn
import torch
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.responses import HTMLResponse, FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
@ -27,10 +27,16 @@ processor_config = ProcessorConfigModel()
config_file = ""
verbose = 0
app = FastAPI()
web_directory = f'src/interface/web/'
app.mount("/static", StaticFiles(directory=web_directory), name="static")
app.mount("/views", StaticFiles(directory="views"), name="views")
templates = Jinja2Templates(directory="views/")
@app.get("/", response_class=FileResponse)
def index():
return FileResponse(web_directory + "index.html")
@app.get('/ui', response_class=HTMLResponse)
def ui(request: Request):
return templates.TemplateResponse("config.html", context={'request': request})