環(huán)境準備

啟動?Easysearch?服務:

安裝?Python?依賴項:

啟動服務器:

后端功能實現(xiàn)

我們實現(xiàn)的主要功能是接收用戶上傳的圖片，然后將圖片進行處理和向量化，利用 Easysearch 進行圖像搜索，并將搜索結果渲染到模板頁面上展示給用戶。用戶可以通過訪問?/req?路由來上傳圖片，然后提交表單進行搜索。搜索結果將在模板頁面?search.html?中展示。

本次服務，我們主要使用的是?Flask?和?Easysearch?這兩個工具是?Flask?是一個流行的 Python Web 框架，它提供了簡單而靈活的方式來構建 Web 應用程序。而?Easysearch?是一個分布式的搜索引擎，它具有強大的全文搜索和分析功能，并支持使用?kNN 檢索?API 來進行向量查詢。結合這兩個工具，我們可以構建一個功能完善的圖像搜索服務。

首先，我們使用 Flask 框架創(chuàng)建一個應用程序實例，并定義幾個路由和視圖函數(shù)。其中，

/req 路由用于展示一個包含表單的頁面，用戶可以在該頁面上上傳圖像。/search?路由用于處理圖像搜索請求，并返回搜索結果。

在?/search?路由中，我們首先連接到?Easysearch?搜索引擎，然后獲取用戶上傳的圖像文件。接下來，我們對圖像進行處理和向量化，以便能夠在向量空間中進行相似度匹配。然后，我們構建一個查詢體，使用?Easysearch?的查詢語法來描述我們的搜索需求。通過調(diào)用?Easysearch?的 search 方法，我們可以執(zhí)行搜索操作，并獲取搜索結果。

在獲取到搜索結果后，我們從中提取需要的字段，并將結果傳遞給模板進行渲染。我們使用 Flask 提供的 render_template 函數(shù)，將搜索結果傳遞給一個名為?search.html?的 HTML 模板。該模板可以根據(jù)搜索結果動態(tài)生成頁面內(nèi)容，并將結果展示給用戶。

通過這個簡單而高效的圖像搜索服務，用戶可以方便地上傳圖像，系統(tǒng)將快速地在圖像庫中進行搜索，并返回與上傳圖像相似的結果。

前端頁面實現(xiàn)

目前需要實現(xiàn)的是一個即時搜索頁面的前端部分。思路非常明確，實現(xiàn)一個簡潔漂亮的頁面展示功能即可。一些基礎的內(nèi)容就簡單略過，我們下面重點描述思路以及實現(xiàn)。

首先，我們創(chuàng)建一個 HTML 文檔，并指定文檔類型為 HTML5。在文檔頭部，我們設置了頁面的標題為 "Easysearch Search Service"，以便清晰地表達頁面的用途。

接下來，我們使用 CSS 樣式定義了頁面的外觀和布局。在?<style>?樣式中我們設置了背景圖片、字體、邊距和陰影效果等，以提升頁面的美觀性和用戶體驗。

JavaScript 部分?，我們引入了 jQuery 庫和自定義的 JavaScript 文件。這些腳本將用于處理頁面的交互邏輯。通過 jQuery 庫，我們可以方便地處理表單的提交事件，實現(xiàn)異步請求和數(shù)據(jù)處理。當用戶提交表單時，將發(fā)送 AJAX 請求到指定的 URL，并將索引名稱和圖像文件作為請求的參數(shù)。在成功返回 AJAX 響應后，我們通過解析返回的 HTML 數(shù)據(jù)，提取出圖片和段落元素，并按照一定的格式進行組合。最后，將組合后的結果添加到結果容器中，以展示搜索結果。

前端 JavaScript 代碼

頁面主體部分?，我們將內(nèi)容包裹在一個名為 "container" 的?<div>?元素中。頁面包含一個標題和一個搜索表單。搜索表單包括一個文件選擇框用于選擇圖像文件。還有一個提交按鈕，當用戶點擊該按鈕時，將觸發(fā) JavaScript 代碼中的事件處理程序。

搜索結果部分?，我們使用一個?<div>?元素來顯示搜索結果的標題，并使用另一個?<div>?元素作為瀑布流容器，用于展示搜索結果的圖片和相關的段落。

代碼如下

最終結果如圖所示

搜索前

搜索后

總結

通過這個簡單的基于?Easysearch kNN 搜索服務網(wǎng)頁?，我們可以方便地上傳圖像文件，進行搜索操作，并以瀑布流的形式展示搜索結果。

項目 Github 地址：https://github.com/infinilabs/image-search-demo

關于 Easysearch

INFINI Easysearch 是一個分布式的近實時搜索與分析引擎，核心引擎基于開源的 Apache Lucene。Easysearch 的目標是提供一個輕量級的 Elasticsearch 可替代版本，并繼續(xù)完善和支持更多的企業(yè)級功能。與 Elasticsearch 相比，Easysearch 更關注在搜索業(yè)務場景的優(yōu)化和繼續(xù)保持其產(chǎn)品的簡潔與易用性。

官網(wǎng)文檔：https://www.infinilabs.com/docs/latest/easysearch

下載地址：https://www.infinilabs.com/download