OCR_FontsSearchEngine
1.0.0
這是一篇圖像識別OCR技術、機器學習、以及簡易搜索引擎構建相關的技術Blog，是自己在做畢設的同時，每天不斷記錄研究成果和心得的地方。
OCR（Optical Character Recognition 光學字符識別）技術，是指電子設備（例如掃描儀或數碼相機）檢查紙上打印的字符，通過檢測暗、亮的模式確定其形狀，然後用字符識別方法將形狀翻譯成計算機文字的過程。
Tesseract的OCR引擎最先由HP實驗室於1985年開始研發，至1995年時已經成為OCR業內最準確的三款識別引擎之一。然而，HP不久便決定放棄OCR業務，Tesseract也從此塵封。 數年以後，HP意識到，與其將Tesseract束之高閣，不如貢獻給開源軟件業，讓其重煥新生－－2005年，Tesseract由美國內華達州信息技術研究所獲得，並求諸於Google對Tesseract進行改進、消除Bug、優化工作。 Tesseract目前已作為開源項目發佈在Google Project，其最新版本3.0已經支持中文OCR。
在這樣成熟的技術背景下，我很想利用這項OCR技術，再結合當下熱門的移動互聯網的開發技術和信息檢索技術，實現一個能將圖片中文字成功識別的移動Web搜索引擎，旨在為更多朋友能更加快捷、準確地從圖片中獲取想要的信息。
隨著互聯網的快速發展，大數據的到來，人們對數據和信息依賴程度越來越大。然而，如今的互聯網數據十分龐大，數據的準確性，和數據的合理分類一直存在著很大的問題，針對如此現狀，越來越多的人們期望在日常工作、生活中能找到更加便捷獲取準確數據的方式，能更加具有效率地找到自己所求信息的方式。同時，如今隨著智能手機的普及，越來越多的人們更習慣於用拍照這樣一種效率極高的方式，代替以前的抄寫，打字方式，去記錄生活、工作上需要記錄的數據。 由此啟發，想利用當下比較成熟的OCR（光學字符識別）技術，以及結合當下熱門的互聯網的開發技術和信息檢索技術，實現一個能將圖片語言字體成功識別的Web搜索引擎，旨在為更多朋友能通過拍照、截圖這樣便捷的方式，更加快捷、準確地從圖片中搜索、獲取到想要的信息。
後端的架構，主要分為三大模塊：OCR模塊、搜索引擎模塊、PHP消息中間件模塊。
``` shell
brew install tesseract
```
```shell
sudo xcodebuild -license
...
agree
```
``` shell
brew install tesseract
```
```shell
Usage:tesseract imagename outputbase [-l lang] [-psm pagesegmode] [configfile...]
pagesegmode values are:
0 = Orientation and script detection (OSD) only.
1 = Automatic page segmentation with OSD.
2 = Automatic page segmentation, but no OSD, or OCR
3 = Fully automatic page segmentation, but no OSD. (Default)
4 = Assume a single column of text of variable sizes.
5 = Assume a single uniform block of vertically aligned text.
6 = Assume a single uniform block of text.
7 = Treat the image as a single text line.
8 = Treat the image as a single word.
9 = Treat the image as a single word in a circle.
10 = Treat the image as a single character.
-l lang and/or -psm pagesegmode must occur before anyconfigfile.
```
其中：
tesseract imagename outputbase [-l lang] [-psm pagesegmode] [configfile...]表示tesseract 图片名输出文件名-l 字库文件-psm pagesegmode 配置文件。
例如： tesseract code.jpg result -l chi_sim -psm 7 nobatch
-l chi_sim表示用簡體中文字庫（需要下載中文字庫文件，解壓後，存放到tessdata目錄下去,字庫文件擴展名為.raineddata簡體中文字庫文件名為: chi_sim.traineddata ）。-psm 7表示告訴tesseract code.jpg圖片是一行文本這個參數可以減少識別錯誤率. 默認為3 。** 英文字體測試：**
** 中文字體測試：**
現在我們來建立字體語言庫以及字體語言樣本數據的訓練
**font_properties (new in 3.01)**
A new requirement for training in 3.01 is a font_properties file. The purpose of this file is to provide font style information that will appear in the output when the font is recognized. The font_properties file is a text file specified by the -F filename option to mftraining.
Each line of the font_properties file is formatted as follows:
<fontname> <italic> <bold> <fixed> <serif> <fraktur>
where <fontname> is a string naming the font (no spaces allowed!), and <italic>, <bold>, <fixed>, <serif> and <fraktur> are all simple 0 or 1 flags indicating whether the font has the named property.
When running mftraining, each .tr filename must match an entry in the font_properties file, or mftraining will abort. At some point, possibly before the release of 3.01, this matching requirement is likely to shift to the font name in the .tr file itself. The name of the .tr file may be either fontname.tr or [lang].[fontname].exp[num].tr.
**Example:**
font_properties file:
timesitalic 1 0 0 1 0
shapeclustering -F font_properties -U unicharset eng.timesitalic.exp0.tr
mftraining -F font_properties -U unicharset -O eng.unicharset eng.timesitalic.exp0.tr
Note that in 3.03, there is a default font_properties file, that covers 3000 fonts (not necessarily accurately) in training/langdata/font_properties.
**Clustering**
When the character features of all the training pages have been extracted, we need to cluster them to create the prototypes.
The character shape features can be clustered using the shapeclustering, mftraining and cntraining programs:
**shapeclustering (new in 3.02)**
shapeclustering should not be used except for the Indic languages.
shapeclustering -F font_properties -U unicharset lang.fontname.exp0.tr lang.fontname.exp1.tr ...
shapeclustering creates a master shape table by shape clustering and writes it to a file named shapetable.
**mftraining**
mftraining -F font_properties -U unicharset -O lang.unicharset lang.fontname.exp0.tr lang.fontname.exp1.tr ...
The -U file is the unicharset generated by unicharset_extractor above, and lang.unicharset is the output unicharset that will be given to combine_tessdata.
mftraining will output two other data files: inttemp (the shape prototypes) and pffmtable (the number of expected features for each character). In versions 3.00/3.01, a third file called Microfeat is also written by this program, but it is not used. Later versions don't produce this file.
NOTE: mftraining will produce a shapetable file if you didn't run shapeclustering. You must include this shapetable in your traineddata file, whether or not shapeclustering was used.
**cntraining**
cntraining lang.fontname.exp0.tr lang.fontname.exp1.tr ...
This will output the normproto data file (the character normalization sensitivity prototypes).
官方wiki
中文指導
Mac下，用Spotlight開啟Terminal
vi /etc/profile
這時按下鍵盤上字母i進入編輯模式，在終端下方輸入以下兩行命令：
export JAVA_HOME=/usr/lib/jvm/jdk1.8.0_77
export CLASSPATH=.:$JAVA_HOME/jre/lib/rt.jar:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$PATH:$JAVA_HOME/bin
然後按esc結束編輯，再輸入:wq!退出
source /etc/profile
java -version
出現java版本信息則證明安裝成功！
介紹：當一個代碼項目大了以後，每次重新編譯，打包，測試等都會變得非常複雜而且重複，因此c語言中有make腳本來幫助這些工作的批量完成。在Java 中應用是平台無關性的，當然不會用平台相關的make腳本來完成這些批處理任務了，ANT本身就是這樣一個流程腳本引擎，用於自動化調用程序完成項目的編譯，打包，測試等。除了基於JAVA是平台無關的外，腳本的格式是基於XML的，比make腳本來說還要好維護一些。
版本選用：apache-ant-1.9.6-bin.zip
下載地址：Ant官網
啟動安裝：
sudo sh
cd /usr/local/
chown YourUserName:staff apache-ant-1.9.6
ln -s apache-ant-1.9.6 ant
vi /etc/profile
這時按下鍵盤上字母i進入編輯模式，在終端下方輸入以下兩行命令：
export ANT_HOME=/usr/local/ant
export PATH=${PATH}:${ANT_HOME}/bin
然後按esc結束編輯，再輸入:wq!退出
source /etc/profile
ant -version
出現Apache Ant(TM) version 1.9.6 compiled on ... 這個顯示則證明安裝成功！
介紹：目前Nutch分為兩個大版本1.x和2.x，Apache分別對這兩個大版本進行獨立開發和維護。其中，1.x和2.x最大的不同點在於，1.x是基於hadoop的HDFS文件系統的，而2.x將數據的存儲層抽像出來，可以將數據保存在Hbase、MySQL等數據庫中。還有一點很重要，Nutch在1.2以及之前，都是作為一個完整的搜索引擎進行發布的，而從1.3開始，Nutch本身就主要只有爬蟲功能，若需要對抓取的數據建立索引並進行搜索，還要用到Solr全文檢索服務器。由於Nutch和Solr都是基於Lucene開發的，因此Nutch抓取的數據可以輕鬆地在Solr中建立索引。 Nutch官網可以下載到編譯好的1.x包，但2.x只提供源碼，需要自己編譯。 Nutch使用Ant來構建的，若自己編譯的話，需要安裝Ant來編譯源碼。對於如何選擇Nutch的版本，主要考慮一下以下問題：如果只需要抓取少量的網站，並對其建立索引，使用1.x和2.x都可以，甚至都可以使用單機的，而不需分佈式。但如果要抓取大量網站，甚至是全網爬行，那麼最好選擇1.x，並且採用分佈式，因為1.x是基於hadoop文件系統的，而hadoop又是專門為處理大數據而生。若抓取大量網站時採用2.x，可能會遇到一些性能問題，要是使用MySQL來存儲數據，網頁數據上百億時，性能將是一個噩夢。 Nutch1.x不同的版本變化也比較大，執行命令發生過較大改變，因此，建議初學者下載本教程對應的版本1.10，等到熟悉使用Nutch的時候，那些改變對你而言就沒太大影響了。 Nutch作為當今最流行的開源爬蟲之一，已被企業廣泛使用。 Nutch的插件機制使得開發者可以靈活地定製網頁抓取策略。 Nutch有著悠久的歷史，當今大名鼎鼎的Hadoop就是由Nutch發展而來。 Nutch不僅可以運行在單機模式下，還可以運行在分佈式模式下。 Nutch僅支持在Linux環境下工作，因此，在類Linux的OS X下可以直接使用。
版本選用：apache-nutch-1.10-src.zip
下載地址：Nutch官網
啟動安裝：
unzip apache-nutch-1.10-src.zip
cd apache-nutch-1.10
vi conf/nutch-default.xml
找到http.agent.name這個屬性，將其拷貝到conf/nutch-site.xml中，並修改value值不能為空，這裡自定義為為： HD nutch agent，不然後續抓取命令會報錯，修改後的nutch-site.xml如下：
<configuration>
<property>
<name>http.agent.name</name>
<value>myNutch</value>
<description>HTTP 'User-Agent' request header. MUST NOT be empty -
please set this to a single word uniquely related to your organization.
NOTE: You should also check other related properties:
http.robots.agents
http.agent.description
http.agent.url
http.agent.email
http.agent.version
and set their values appropriately.
</description>
</property>
</configuration>
http.agent.name這個屬性是用於標記爬蟲的，便於被爬的網站對其進行識別。
nutch-site.xml中配置的屬性會覆蓋nutch-default中的默認屬性，在這裡我們僅修改http.agent.name這個屬性，其它的不作改變。
到此，我們就配置好Nutch了，接著，在Nutch的主目錄使用以下命令對源碼進行編譯。
切換到Nutch主目錄下執行：
ant
首次編譯過程會耗費較多時間，因為需要下載較多的依賴包，具體時間根據實際網絡情況而定，快的話需要5-10分鐘，慢的話需要20分鐘以上。
編譯開始時會報如下警告：
Could not load definitions from resource org/sonar/ant/antlib.xml. It could not be found.
這個警告不影響編譯結果，因此可以忽略。
編譯過程中也有可能因為網絡問題而出現編譯失敗，只需要使用如下命令清除上次編譯結果（不會刪除已經下載好的依賴包）：
ant clean
在網絡較差的情況下，可能會重複上面兩步操作多次。
當出現如下類似信息時，也就意味著編譯成功了：
BUILD SUCCESSFUL
Total time: 1 minute 7 seconds
如下圖所示：
Nutch編譯成功之後，會在主目錄下生成一個runtime文件夾。其中包含deploy和local兩個子文件夾。 deploy用於分佈式抓取，而local用於本地單機抓取。本節內容先講解使用本地單機抓取，分佈式抓取放到後續教程。
進入local文件夾，再進入bin文件夾。這裡包含兩個腳本文件，一個是nutch，另一個是crawl。其中，nutch包含了所需的全部命令，而crawl主要用於一站式抓取。
如下圖所示：
unzip solr-4.10.4.zip
得到文件夾solr-4.10.4，將Nutch目錄下的runtime/local/conf/schema-solr4.xml拷貝到solr的配置文件目錄example/solr/collection1/conf下：
cp apache-nutch-1.10/runtime/local/conf/schema-solr4.xml solr-4.10.4/example/solr/collection1/conf
刪除solr原schema.xml文件：
rm –f solr-4.10.4/example/solr/collection1/conf/schema.xml
並註釋掉schema-solr4.xml中的
<copyField source="latLon" dest="location"/>
將schema-solr4.xml改名為schema.xml：
mv solr-4.10.4/example/solr/collection1/conf/ schema-solr4.xml solr-4.10.4/example/solr/collection1/conf/ schema.xml
到此，Solr就配置完畢了，進入solr-4.10.4/example目錄：
cd solr-4.10.4/example
啟動Solr：
此時就可以通過瀏覽器訪問8983端口，查看Solr的控制界面：
http://localhost:8983/solr
進入Nutch的主目錄，今後我們大部分執行命令的操作都是在Nutch主目錄完成的，而不是在Nutch的bin目錄裡，因為這樣可以更方便地執行一些複雜的命令。查看一站式抓取命令：
bin/crawl
bin/nutch
輸入以上兩個命令顯示了它們各自的使用方法，後面會詳細講解一部分常用的命令，如下圖所示：
查看crawl的使用方法：
-i|index用於告知nutch將抓取的結果添加到配置的索引器中。
-D用於配置傳遞給Nutch調用的參數，我們可以將索引器配置到這裡。
Seed Dir種子文件目錄，用於存放種子URL，即爬蟲初始抓取的URL。
Crawl Dir抓取數據的存放路徑。
Num Rounds循環抓取次數。
使用示例：
進入Nutch的runtime/local目錄，新建一個urls文件夾：
在urls文件夾中新建一個存放url的種子文件,seed.txt
向urls/seed.txt添加初始抓取的URL：http://www.163.com
開啟Solr服務，否則不能正常在Solr中建立索引
bin/crawl -i -D solr.server.url=http://localhost:8983/solr/ urls/ TestCrawl/ 2
這條命令中，-i告知爬蟲將抓取的內容添加到給定的索引中，solr.server.url=http://localhost:8983/solr/是Solr索引器的地址，urls/為種子URL文件路徑，TestCrawl為Nutch用於存儲抓取數據的文件夾（包含URL、抓取的內容等數據），這裡的參數2表示循環抓取兩次。
通過執行上面一條命令，就可以開始抓取網頁了。在瀏覽器中輸入http://:8983/solr，選擇collection1，就可以在裡面通過關鍵字搜索到已經建立索引的內容。這裡需要注意的是，爬蟲並沒有將指定URL的全部頁面抓取下來，查看抓取情況的具體方法請參考下面的分佈式抓取。
抓取成功後如下圖所示：
有的時候，一站式抓取並不能很好的滿足我們的需求，因此，這裡給大家介紹一下分佈式抓取的方法：分佈式抓取的實際抓取過程包含多個命令的，為了簡化操作，crawl把多個命令組合到一起提供給用戶使用的。如果要深入學習Nutch爬蟲技術，僅僅會使用crawl命令是不夠的，還需要對抓取的過程非常熟悉，這裡需要用到上一教程中seed.txt所保存的URL信息，還需刪除data/crawldb，data/linkdb和data/segments文件夾下的內容，因為我們要分步重新抓取數據。
執行crawl命令之後，會在Nutch的runtime/local下面生成一個TestCrawl文件夾，裡麵包含三個文件夾：crawldb、linkdb和segments。
crawldb：它包含Nutch所發現的所有URL，它包含了URL是否被抓取、何時被抓取的信息。
linkdb：它包含了Nutch所發現的crawldb中的URL所對應的全部鏈接，以及源URL和錨文本。
segments：裡麵包含多個以時間命名的segment文件夾，每個segment就是一個抓取單元，包含一系列的URL，每個segment又包含如下文件夾：
crawl_generate：待抓取的URL
crawl_fetch：每个URL的抓取状态
content：从每个URL抓取到的原始内容
parse_text：从每个URL解析得到的文本
parse_data：从每个URL解析得到的外链和元数据
crawl_parse：包含外链URL，用来更新crawldb
bin/nutch inject data/crawldb urls
為了抓取指定URL的頁面，我們需要先從數據庫（crawldb）裡生成一個抓取列表：
bin/nutch generate data/crawldb data/segments
generate命令執行之後，會生成一個待抓取頁面的列表，抓取列表存放在一個新建的segment路徑中。 segment的文件夾根據創建的時間進行命名（本教程文件夾名為201507151245）。
generate還有很多可選參數，讀者可以通過以下命令自行查看（其它命令的查看方法也一樣）：
bin/nutch generate
根據generate生成的抓取列表抓取網頁：
bin/nutch fetch data/segments/201507151245 #这里的201507151245为文件夹名，需要根据自己的情况进行更改，或者直接采用data/segments文件夹，这样的操作对segments文件夹下的所有子文件夹生效，后文同理。
bin/nutch parse data/segments/201507151245
根據抓取的結果更新數據庫：
bin/nutch updated data/crawldb –dir data/segments/201507151245
現在，數據庫裡包含所有初始頁面更新後的入口，以及從初始集合中新發現的頁面的新入口。
在建立索引之前，我們首先對所有的鏈接進行反轉，這樣我們才可以對頁面的來源錨文本進行索引。
bin/nutch invertlinks data/linkdb –dir data/segments/201507151245
啟動Solr服務，現在，我們對抓取到的資源建立索引：
bin/nutch index data/crawldb -linkdb data/linkdb -params solr.server.url=http://localhost:8983/solr -dir data/segments/201507151245
一旦建立了全文索引，它必須處理重複的URL，使得URL是唯一的：
bin/nutch dedup
這個命令基於簽名查找重複的URL，對重複的URL標記為STATUS_DB_DUPLICATE，Cleaning和Indexing任務將會根據標記刪除它們。
bin/nutch clean –D solr.server.url=http://192.168.1.11:8983/solr data/crawldb
從solr移除HTTP301、404以及重複的文檔。
到此為止，我們使用分步抓取的方式完成了所有抓取步驟，正常抓取的情況下，可以在http://localhost:8983/solr進行搜索了
用於讀取或者導出Nutch的抓取數據庫，通常用於查看數據庫的狀態信息，查看readdb的用法：
Usage: CrawlDbReader <crawldb> (-stats | -dump <out_dir> | -topN <nnnn> <out_dir> [<min>] | -url <url>)
<crawldb>directory name where crawldb is located
-stats [-sort] print overall statistics to System.out
[-sort]list status sorted by host
-dump <out_dir> [-format normal|csv|crawldb]dump the whole db to a text file in <out_dir>
[-format csv]dump in Csv format
[-format normal]dump in standard format (default option)
[-format crawldb]dump as CrawlDB
[-regex <expr>]filter records with expression
[-retry <num>]minimum retry count
[-status <status>]filter records by CrawlDatum status
-url <url>print information on <url> to System.out
-topN <nnnn> <out_dir> [<min>]dump top <nnnn> urls sorted by score to <out_dir>
[<min>]skip records with scores below this value.
This can significantly improve performance.
這裡的crawldb即為保存URL信息的數據庫，-stats表示查看統計狀態信息，-dump表示導出統計信息，url表示查看指定URL的信息，查看數據庫狀態信息：
得到的統計結果如下：
MacBook-Pro:local root# bin/nutch readdb TestCrawl/crawldb -stats
CrawlDb statistics start: TestCrawl/crawldb
Statistics for CrawlDb: TestCrawl/crawldb
TOTAL urls: 290
retry 0: 290
min score: 0.0
avg score: 0.017355172
max score: 1.929
status 1 (db_unfetched): 270
status 2 (db_fetched): 17
status 3 (db_gone): 2
status 4 (db_redir_temp): 1
CrawlDb statistics: done
TOTAL urls表示URL總數，retry表示重試次數，mins score為最低分數，max score為最高分數，status 1 (db_unfetched)為未抓取的數目，status 2 (db_fetched)為已抓取的數目。
readlinkdb用於導出全部URL和錨文本，查看用法：
Usage: LinkDbReader <linkdb> (-dump <out_dir> [-regex <regex>]) | -url <url>
-dump <out_dir>dump whole link db to a text file in <out_dir>
-regex <regex>restrict to url's matching expression
-url <url>print information about <url> to System.out
這裡的dump和url參數與readdb命令同理，導出數據：
bin/nutch readlinkdb data/linkdb -dump linkdb_dump
將數據導入到linkdb_dump這個文件夾中，查看導出的數據信息：
cat linkdb_dump /*
可以看到，導出的信息類似以下格式：
fromUrl: http://www.sanesee.com/article/step-by-step-nutch-introduction anchor: http://archive.apache.org/dist/nutch/
即記錄了來源URL。
readseg用於查看或導出segment裡面的數據，查看使用方法：
Usage: SegmentReader (-dump ... | -list ... | -get ...) [general options]
* General options:
-nocontentignore content directory
-nofetchignore crawl_fetch directory
-nogenerateignore crawl_generate directory
-noparseignore crawl_parse directory
-noparsedataignore parse_data directory
-noparsetextignore parse_text directory
* SegmentReader -dump <segment_dir> <output> [general options]
Dumps content of a <segment_dir> as a text file to <output>.
<segment_dir>name of the segment directory.
<output>name of the (non-existent) output directory.
* SegmentReader -list (<segment_dir1> ... | -dir <segments>) [general options]
List a synopsis of segments in specified directories, or all segments in
a directory <segments>, and print it on System.out
<segment_dir1> ...list of segment directories to process
-dir <segments>directory that contains multiple segments
* SegmentReader -get <segment_dir> <keyValue> [general options]
Get a specified record from a segment, and print it on System.out.
<segment_dir>name of the segment directory.
<keyValue>value of the key (url).
Note: put double-quotes around strings with spaces.
導出segment數據：
bin/nutch readseg -dump data/segments/20150715124521 segment_dump
將數據導入到segment_dump這個文件夾中，查看導出的數據信息：
cat segment_dump /*
可以看到，裡麵包含非常具體的網頁信息。
可以使用WAMP/MAMP，也可以用PHPStorm和其內置服務器。
具體操作可以參考：傳送門
打開終端，切換到你的工程路徑下：
composer require silex/silex twig/twig thiagoalessio/tesseract_ocr:dev-master因為使用了PHP的微型框架Silex Framework ，我們需要自己建立PHP源工程項目MVC（public，uploads，views）結構，如圖所示：
<?php
//如果是在WAMP等其他集成环境下，需要重新获取环境变量的PATH，不然无法调用Tesseract
$ path = getenv ( ' PATH ' );
putenv ( " PATH= $ path :/usr/local/bin " );
require __DIR__ . ' /../vendor/autoload.php ' ;
use Symfony Component HttpFoundation Request ;
$ app = new Silex Application ();
$ app -> register ( new Silex Provider TwigServiceProvider (), [
' twig.path ' => __DIR__ . ' /../views ' ,
]);
$ app [ ' debug ' ] = true ;
$ app -> get ( ' / ' , function () use ( $ app ) {
return $ app [ ' twig ' ]-> render ( ' index.twig ' );
});
$ app -> post ( ' / ' , function ( Request $ request ) use ( $ app ) {
//TODP
});
$ app -> run (); // Grab the uploaded file
$ file = $ request -> files -> get ( ' upload ' );
// Extract some information about the uploaded file
$ info = new SplFileInfo ( $ file -> getClientOriginalName ());
// 产生随机文件名来减少文件名冲突
$ filename = sprintf ( ' %d.%s ' , time (), $ info -> getExtension ());
// Copy the file
$ file -> move ( __DIR__ . ' /../uploads ' , $ filename );** 交互流程：**
1）用戶輸入主頁網站URL，進入首頁，享受服務，了解服務詳情。
2）用戶通過搜索框，上傳所需要的搜索圖片，並進行上傳前的預覽。
3）用戶確認上傳的圖片無誤後，點擊圖搜按鈕，進行圖片上傳和識別操作，因為這部分Server端計算量比較大，返回結果需要等待2-5秒鐘，所以給用戶呈現一個Loading頁。
4）圖像識別完成，Loading頁消失，進入識別結果預覽確認頁面。
5）用戶確認識別內容後，可以點擊搜索，進入搜索引擎模塊，獲取檢索結果。
視覺設計在產品組成中佔了極為重要的成分，它直接影響了使用者對於該產品最初的觀感、使用時的體驗以及最後留下的印像等等。甚至在許多時候，產品的成敗與否，往往就取決於成功的視覺設計經驗上。 針對這個畢設，我並沒有把它當成一個可以應付了事的系統，而是當成一個自己的產品去悉心創作，因此，我很注重這個系統的前端視覺設計，和用戶體驗。 全站選色，我選用了大眾比較認可的百度搜索引擎主題色，紅色和藍色，首頁背景採用紅藍過渡色，並調整了透明度，通過CSS代碼畫出，節約加載耗時的同時也給予用戶一個良好的視覺衝擊，同時對首頁的文字說明，增加了底部陰影，並採用微軟細黑字體，讓視覺感覺更有層次感，圖片搜索框以及預覽框，也是加重了陰影，對預覽字段的重要程度進行了不同的顏色和色度區分。讓用戶視覺上清爽，簡潔，能最快找到自己視覺所需信息，之後會經過一個簡單的loading頁面，這裡做了一個等待的圓圈漸變放大縮小動效，讓用戶對等待時間不感覺到煩躁，同時告訴用戶，系統後台正在進行計算運行，當跳轉到識別結果頁面時候，依然按照文案重要程度，對所有文字顏色和字號進行了視覺調整，讓用戶不用花費太多時間，篩選重要信息，兩個按鈕的排班和選色也更傾向於增加點擊慾望和點擊感，提示用戶可以進行下一步操作。最後的檢索結果頁面，我將它設計成了類似一本書目的篇章，每個列表根據搜索結果網頁標題、網頁摘要、收錄時間、權重進行了不同的排班和字號顏色調整，增加視覺衝擊感以及辨識度。讓用戶覺得和大眾搜索引擎有一些共同點，但其中又透露出一些自己的個性，給用戶熟悉又新奇的體驗感，而且還保留了清爽無廣告和多餘干擾信息的特點。並且，所有視覺設計結合了當下的響應式設計理念，同時在PC端和移動端下都具有良好的用戶體驗和視覺效果。
** 採用Twig進行模板編寫：**
前端體驗如下圖所示：
主要基於Bootstrap3.4，可以用XDK/phoneGap打包編譯成對應NA App，發佈到應用市場。 移動端體驗如下圖所示：
感謝大學四年所有的任課老師和所有幫助過我的同學們，是他們教會了我專業知識，通過近四年的學習和科研工作，不僅使我的知識結構和科研能力上了一個新的台階，更重要的是讓我融入了社會，給了我充分的實習經歷，讓我在大學本科就體驗到了很多研究生都無法體驗的互聯網公司工作經歷。彈指一揮間，大學四年已經接近了尾聲。當自己懷著忐忑不安的心情完成這篇畢業論文的時候，自己也從當年一個懵懂孩子變成了一個成熟青年，還是那句話——只有汗水不會欺騙你，最後，感謝電子科技大學，感謝大學所遇見的每一個人，也感謝自己四年的努力。
https://github.com/daijiale/OCR_FontsSearchEngine.
http://v.youku.com/v_show/id_XMTYzNDY2NDYxNg==.html.
