Prettify Render of Markdown results on Web Interface

## Details
- We were previously just wrapping results from /search API into a pre formatted div field. This was not easy to read
- Use [markdown-it](https://github.com/markdown-it/markdown-it) to render markdown results from Khoj `/search` API as proper HTML

Closes #43

src/interface/web/index.html

@@ -3,7 +3,8 @@
         <meta charset="utf-8">
         <title>Khoj</title>
     </head>
-    <script type="text/javascript" src="static/org.js"></script>
+    <script type="text/javascript" src="static/assets/org.js"></script>
+    <script type="text/javascript" src="static/assets/markdown-it.js"></script>
 
     <script>
         function render_image(item) {
@@ -25,8 +26,17 @@
             return orgHTMLDocument.toString();
         }
 
+        function render_markdown(query, data) {
+            var md = window.markdownit();
+            return md.render(`# Query: ${query}\n` + data.map(function (item) {
+                return `${item.entry}`
+            }).join("\n"));
+        }
+
         function render_json(data, query, type) {
-            if (type === "org") {
+            if (type === "markdown") {
+                return render_markdown(query, data);
+            } else if (type === "org") {
                 return render_org(query, data);
             } else if (type === "image") {
                 return data.map(render_image).join('');
@@ -160,7 +170,12 @@
             white-space: pre-wrap;
         }
 
-        #results-org {
+        #results-markdown {
+            text-align: left;
+            white-space: pre-line;
+        }
+
+         #results-org {
             text-align: left;
             white-space: pre-line;
         }

src/main.py

@@ -117,7 +117,7 @@ def search(q: str, n: Optional[int] = 5, t: Optional[SearchType] = None, r: Opti
         # query images
         query_start = time.time()
         hits = image_search.query(user_query, results_count, model.image_search)
-        output_directory = f'{os.getcwd()}/{web_directory}'
+        output_directory = f'{os.getcwd()}/{web_directory}/images'
         query_end = time.time()
 
         # collate and return results
@@ -126,7 +126,7 @@ def search(q: str, n: Optional[int] = 5, t: Optional[SearchType] = None, r: Opti
             hits,
             image_names=model.image_search.image_names,
             output_directory=output_directory,
-            static_files_url='/static',
+            image_files_url='/static/images',
             count=results_count)
         collate_end = time.time()
 

src/search_type/image_search.py

@@ -181,7 +181,7 @@ def render_results(hits, image_names, image_directory, count):
             img.show()
 
 
-def collate_results(hits, image_names, output_directory, static_files_url, count=5):
+def collate_results(hits, image_names, output_directory, image_files_url, count=5):
     results = []
 
     for index, hit in enumerate(hits[:count]):
@@ -195,7 +195,7 @@ def collate_results(hits, image_names, output_directory, static_files_url, count
 
         # Add the image metadata to the results
         results += [{
-            "entry": f'{static_files_url}/{target_image_name}',
+            "entry": f'{image_files_url}/{target_image_name}',
             "score": f"{hit['score']:.3f}",
             "image_score": f"{hit['image_score']:.3f}",
             "metadata_score": f"{hit['metadata_score']:.3f}",

tests/test_image_search.py

@@ -45,7 +45,7 @@ def test_image_search(content_config: ContentConfig, search_config: SearchConfig
             hits,
             model.image_search.image_names,
             output_directory=output_directory,
-            static_files_url='/static',
+            image_files_url='/static/images',
             count=1)
 
         actual_image = Image.open(output_directory.joinpath(Path(results[0]["entry"]).name))