背景
我如何在花園裡瀏覽?
設計
建築學
我們如何找到您的數據之間的連接?
渲染
數據在哪裡?
指示
未來
致謝
一個數字花園的想法一直對我非常著迷。本月早些時候,我開始想知道我們如何將我們的數字花園不僅僅是頁面上的文字呈現?我們如何使其互動並在瀏覽您的數字足跡方面創造體驗?我們如何使我們的數字花園感覺像是一個真正的數字花園。
Flora是探索這一點的實驗。
啟動Flora時,在開始時在教程中詳細說明了這一點 - 請參考。
在設計上定居花了數週的實驗。我希望能夠創建一種圖形的感覺,以查看我的花園中的數據。挑戰是創造直觀但在技術上可行的東西(在一小段時間內)。這就是為什麼我定居於與“森林”隔離的“父樹”上,這些“森林”都是對父母的最相關數據的原因。 

注意最初,父母只是我的家庭網站,森林由與我關心的主題最相似的數據組成。這些不是人工挑選的。稍後再詳細介紹!
完整的地圖是使用出色的Mapeditor工具完全從頭開始設計的。
瓷磚集和地圖都在map文件夾下完全可用,因此您可以完全播放它以使其自己。
有關我們如何渲染地圖並添加遊戲邏輯的更多詳細信息,請參閱“渲染”部分。
Flora使用Pixi TileMap插件(用於快速的TiLemap渲染),並在前端上使用Poseidon和Pixi(為了幫助渲染)編寫。它使用自定義的語義和全文搜索算法來在我的數字足跡中找到數據之間的連接。這有助於我們找到與任何特定數據或特定關鍵字的局部和詞法相似的相關內容(您可能已經註意到的內容,我個人在第一個屏幕上為我個人加載了幾個重要內容,例如初創企業,社區,附帶項目等)。有關此算法的工作原理,請參見下面。
我喜歡稱此步驟生成“按需圖形”。我的大多數數據都不存在於包含雙向鏈接的工具中 - 我的大多數數據都散佈在一系列鏈接,註釋,保存的文章等上。試圖在數據中找到任何超鏈接(我保存為文本)幾乎是不可能的。取而代之的是,我構建了Flora,以便我們可以做其他事情 - 我們可以使用自定義的語義和全文搜索算法來找到最相關的數據。
這採用了幾種形式。給定特定的數據記錄,我們可以通過這種方式找到該數據記錄的其他最相關的數據記錄,以模仿雙向鏈接。
我們還可以給出特定的查詢或單詞,找到與該特定查詢最相關的數據記錄 - 這是您可能在演示視頻中的第一個負載上註意到的,或者如果您嘗試過(帶有單詞build , community , startups , side projects等)。因此,我們可以使用強大的搜索算法生成“按需圖形”,其中包含兩個值得注意的組件。
搜索算法的語義部分包括使用單詞嵌入,它們是高維向量的單詞嵌入,它們編碼與單詞相關的各種信息(例如,King一詞的向量可能具有與男性,統治者等相關的一些信息)。這些構建的方式是我們可以在這些向量上操作的方式(即添加它們,平均減去它們)並保持有關結果的某種信息結構。
這意味著對於任何數據,我們都可以平均所有單詞來創建文檔向量,該文檔向量只是一個試圖編碼/總結數據信息的單個向量。這樣做的方法不僅僅是平均所有嵌入單詞,但要實現這一目標的方法還要復雜,有意義,但是對於該項目的目的而言,這足夠簡單,可以實現並相對效果。
一旦我們擁有用於數據的文檔向量,我們就可以使用餘弦相似性找到這兩個文檔向量的相似之處(因此,任何兩個數據的主題是多麼相似)。
我使用Facebook創意共享的預先訓練的單詞插件許可的FastText Word嵌入數據集。具體來說,我使用了在此處找到的Wikipedia 2017 UMBC Webbase語料庫中培訓的數據中的50k單詞。實際的數據集包含約100萬個令牌,但我只是剪輯並使用第一個50k,以便我的服務器可以處理它。我可以將其更改或將來將其交換,我之所以選擇它,是因為它具有最小的文件大小。
搜索的文本組件構建了每個數據的TF-IDF向量,該數據是存儲文檔中所有單詞的令牌頻率的向量。由於文檔可能具有不同的詞彙,因此這些TF-IDF矢量使用整個語料庫的詞彙,因此文檔中未出現的任何單詞對於向量中的關聯位置都有0。
一旦我們擁有兩個單詞的TF-IDF向量,我們就可以再次使用餘弦相似性來找到這些TF-IDF向量的相似之處(因此,對於任何兩個數據,使用的單詞是如何相似的)。
將這一切結合在一起,我們的“自定義得分”對於我的佔地面積與另一個數據的相似性是如何的,只是文本搜索餘弦相似性和語義搜索餘弦相似性的平均值。
當我們為任何數據“沿兔子孔”“沿兔子孔”時,我們會計算足跡中初始數據和所有其他數據之間的分數,並使用這些分數對N最相關的分數進行排名,然後我們將其返回前端。
還記得我怎麼說與某些單詞相關的第一批樹木沒有被人工挑選嗎?好吧,這是因為我們使用語義搜索找到最接近這些單詞的單詞嵌入的文檔!
Flora使用Pixi進行渲染和Pixi TileMap插件來渲染地圖。請注意,我不會詳細介紹這些框架的工作原理,但是它們抽象了很多渲染,我們可以通過WebGL利用html帆布的後備,而在沒有可用的情況下就可以通過WebGL進行優勢。他們很棒!
就我們在植物群中的地圖而言,沒有實施淘汰(我嘗試了一下,但無法使其從JSON文件中順利進行,這是我加載地圖的方式,喜歡一些指針!) - 相反,整個地圖是從導出的JSON地圖中加載的,我們顯示了地圖的小窗口/相機。
Flora將所有瓷磚都保持在我們整個地圖的2D網格中。這也是它實現其碰撞檢測系統的方式。請注意,Sprite不會“物理移動”,而是,我們圍繞精靈旋轉地圖以給人以運動的幻覺。我們還保留一些指針,以跟踪當前的可見窗口,這些窗口在整個屏幕上的“移動”時在gameloop中偏移了。我們使用tilset.json文件,該文件是我們從MapEditor導出的瓷磚集來為每個瓷磚的任何相關信息加載,以確定瓷磚是否是樹,不應讓用戶通過它移動(例如房屋的磚塊)等並在我們的遊戲循環中正確響應。
Flora在Apollo的數據上運行並倒立索引。如果您想能夠將其用於自己的數據,則需要以Apollo數據的格式提供可用的數據(Apollo的Readme中的詳細信息)或更改後端上的加載步驟以適應您的數據格式。
models和corpus文件夾go run cmd/flora.go啟動服務器127.0.0.1:8992上運行,並且應該創建一個recordVectors.json