[electron-react] 漫畫修圖軟體 - MangaPrettier 0.1.0 release

之前為了學React做了一個阿克西斯教傳教網站:
https://axiscult.zmcx16.moe/

再來是有想法想玩electron + react, 也剛好可以繼續練習React, 至於要做什麼side project來練功, 就想到自己手邊有不少漫畫因為掃描的畫質太差或曝光沒調好, 或是影像本身的對比太低, 導致看的眼睛很痛苦, 而photoshop要做批次處理又有點麻煩, 而且應該不少人對影像處理都不熟(我自己也是, 有開始想慢慢學些基礎知識...), 就想說來做個漫畫修圖的工具軟體好了~。

決定好目標之後, 再來就是該怎麼設計了。 程式架構方面決定照慣例以主程式(python) + GUI (electron + react), 畢竟python做影像處理很方便阿。 規劃好之後決定先玩下photoshop, 看一下那些功能是適合拿來做漫畫修圖的, 摸了一下心得如下:

1. 色階:

最基礎的photoshop影像處理功能, 調整影像明暗度非常有用, 不過因為找不到有library有提供這個功能, 所以就自己google演算法跟別人C++的實作寫了一個python版了, 參考資源如下:

   1. Algorithm for adjustment of image levels
   2. C++图像处理 -- 图像色阶调整


2. 影像增強 (對比/色度/明度/銳利度):

python的PIL有ImageEnhance這個功能, 直接使用就好, 超方便XD


3. 混合模式:

在玩photoshop時, 發現混合模式中有兩個很適合做漫畫修圖:

    1. 色彩增值: 對比度太低的漫畫用這個可以加強對比度, 只調對比的情況會比較單調, 個人覺得還不錯用。

    2. 柔光: 有些老漫畫掃描的品質曝光很低, 可是單純加亮度會整個變亮導致對比又不明顯, 變成得先加亮度在加對比才行, 不過如果用柔光一打下去就同時有這兩個功能, 對老漫畫來說很好用。

Python也有現成的混合模式Library可以用, 開心XDD


4. 曲線:

photoshop最常用的功能, 效果比起單純改色階更豐富, 可是要做這塊感覺我得花不少功夫刻UI, 所以先放生, 以後有閒在做...。


主程式搞定之後再來就是GUI了, 不過沒想到GUI這次踩的雷比我想的多得多, 條列如下:


1. zerorpc不穩斷線問題: 因為這次不像以往那樣簡單使用zerorpc, 得及時拿到影像處理後的預覽圖才行, 結果就踩到這個雷, 更詳細的過程有寫在這篇:

python與node.js RPC溝通 - 淺談zerorpc的一些坑

2. React hook domain knowledge 嚴重不足: 自己只買了React一本教學書, 結果那本是教React舊的語法(React class), 而現在React主打新的語法開發(React function), 這塊目前就是一樣邊寫邊查資料, 沒有一個系統性的學習, 所以踩雷程度比我想像的多不少, 雖然最後幾乎都有辦法克服, 不過也不知道自己這樣寫到底行不行, 得找個時間進行系統性的學習才行, 不然寫再多都覺得自己不會React... = =

3. 從python回傳預覽影像的速度有點慢, 不能改了即可見, 量測了一下python如果是跑色階處理的話, 以一般圖片大小來說大概100多ms就解決了, 而混合模式就會比較久, 可能會接近一秒, 再加上rpc請求跟回來的時間, 以及瀏覽器render的時間, 變成其實會讓user有感的等待時間, 這問題要解決的話, 只能core module跟GUI用同樣的語言開發並且在同個process, 等於如果要解決這個問題我得用javascript去做影像處理, 實作上面那些影像處理的方法再用html5的canvas畫出來...

恩...., 完全不想做, 畢竟是做功德的軟體, 預覽圖等一下下應該沒關係吧, 我又不是真的要做個photoshop出來, 就維持原架構吧XD


這樣跌跌撞撞下來, 最後還是勉強寫出個能用的東西了, demo如下:

Demo1

Demo1 - 柔光處理

Demo2

Demo2 - 色階

Demo3

Demo3 - 混合模式 + 影像增值

再來其實還有不少工作需要做:

1. 影像輸出格式: 目前是默認輸出png, 理想上至少也要再支持jpeg, 不過這樣GUI也要加個互動式窗給使用者選擇, 現在想先出第一版之後再補上。 (FGO活動開始了, 那邊重要XDD)

2. code quality: 目前就是先把功能寫完, 還沒有針對quality跟performance的部分作調整, 這部分之後有空再慢慢搞了~。

3. 學習影像處理的基礎知識: 目前的做法都是photoshop的功能摸一摸把看起來能用的功能加上去, 不過其實這樣很虛, 應該有其他更好 or 更適用的方法, 這塊就是真的得一步一腳印學影像處理的domain knowledge了...。


另外還有件在意的事, NPM真的是肥滋滋的怪物, 我也才用幾個library, 結果那個dependency可怕的要死, electron-builder包出來的未壓縮package竟然400多MB, 壓縮後也有100MB左右, 這個包到一堆用不到東西的問題會有改善的一天嗎....?

麻...總之先休息個幾天, 之後再來慢慢做其他預定事項吧~。


功能:

1. 色階
2. 影像增強
   • 對比增強
   • 亮度增強
   • 色度增強
   • 銳度增強
3. 混合模式
   • 色彩增值
   • 柔光

程式原始碼: 
https://github.com/zmcx16/MangaPrettier

應用程式位址:
https://github.com/zmcx16/MangaPrettier/releases/tag/0.1.0

• Windows - Windows 10
• Linux - Ubuntu 16.04+

Note. 這個工具主要是提供給像我一樣有類似需求的人使用的, 請注意轉檔就意味著資訊
的破壞, 麻煩有需要的人自行使用就好, 不要散布修改過的檔案, 畢竟實體書掃描是以專
業的技術做最大資訊的保留, 要分享也請麻煩以最完整的資訊傳遞分享給他人使用。


P.S. 最後題外話一下, 如果有人有推薦React Hook好的學習教材(拜託中文為主), 或是有推薦的影像處理學習的好教材, 再麻煩分享一下 :)  感恩~~~。

MahoMangaDownloaderVer10.9更新

今天有使用者回報無限動漫有個漫畫新增還是會新增到舊版的網址導致不能下載, 看了下問題是因為少考慮到一個網站給的參數造成, 補上檢查後應該就沒問題了~。


Ver10.9 更新內容:

• 修復無限動漫部分漫畫無法下載問題

下載器Demo圖:

介紹:
https://project.zmcx16.moe/?page=mahomangadownloader


環境需求

• .Net framework 4.5.2或以上的版本
• Visual C++ 2013 (只能安裝2013版, 其他版本不行)

簡單除錯:

1. 如果下載失敗, 麻煩先用瀏覽器測試看資源是否存活。
2. 如果能正常用瀏覽器瀏覽, 麻煩先查看LogFiles資料夾內的log檔案看錯誤訊息為何。
3. 回報問題時, 麻煩提供有問題的網址以及log內容, 這樣我才有辦法測試找問題原因。

檔案位址:
https://drive.google.com/open?id=1vFsj2fzEvuqWWFEJdUeIMYhNiHOO9iw2

32位元版本:
https://drive.google.com/open?id=1ppSLuu0YJ2p_8_V1zcCw5OSWWEX_XnRv

解壓密碼:zmcx16



免責聲明:
******************
MahoMangaDownloader僅作為學術研究使用,禁止利用本程式行非法用途。

[追加更新] MahoMangaDownloaderVer10.8更新 [含Ver10.7]

後來測試了幾部無限動漫的漫畫, 發現有機率會載到重複頁數, 因為現在幾乎沒在用無限動漫所以都沒發現到...。 這種不一定會出現的問題最討厭了, 要預防解決只能寫壓力測試, 可是現在支援的網站那麼多,  目前方針是我自己沒在用 + 沒人回報的話就不修了...。 不過這樣也好就是, 畢竟連我自己都不用, 又沒人回報的話, 那我修了也沒意義吧XD


Ver10.8 更新內容:

• 修復無限動漫有機率下載到重複頁數問題

介紹:
https://project.zmcx16.moe/?page=mahomangadownloader


檔案位址:
https://drive.google.com/open?id=1Abxnc4hi88iIRtlPRrPMGEa3AvLMAtwJ

32位元版本:
https://drive.google.com/open?id=1QKRXpbtuDK0PaYfzsbcV7nBiE6JF8QC9


解壓密碼:zmcx16



<-----我是Ver10.7分隔線----->



修復了幾個這周末收到的問題回報, 感覺無限動漫就是一段時間做一次小改版, 而dm5則是一樣很難搞, 除了一般閱覽模式還有單頁模式, 單頁模式的漫畫我基本上很少有機會看到, 所以像那種特定頁數造成parser failed的問題真的只能看一個解一個了...。

Ver10.7 更新內容:

• 修復無限動漫(www.comicbus.com)網頁改版導致下載器下載失敗問題 (P.S. 已經加入的下載清單網址是舊版的就算更新後也無法下載, 必須把舊清單砍掉重新加入才行)
• 修復dm5特定單頁模式漫畫下載器對特定頁parser失敗導致無法下載問題
• 改善dm5單頁模式漫畫下載速度

下載器Demo圖:

介紹:
https://project.zmcx16.moe/?page=mahomangadownloader


環境需求

• .Net framework 4.5.2或以上的版本
• Visual C++ 2013 (只能安裝2013版, 其他版本不行)

簡單除錯:

1. 如果下載失敗, 麻煩先用瀏覽器測試看資源是否存活。
2. 如果能正常用瀏覽器瀏覽, 麻煩先查看LogFiles資料夾內的log檔案看錯誤訊息為何。
3. 回報問題時, 麻煩提供有問題的網址以及log內容, 這樣我才有辦法測試找問題原因。

檔案位址:
https://drive.google.com/open?id=1IComwwv168fiOQj7qdI5NorbvTG6F2XF

32位元版本:
https://drive.google.com/open?id=17HTM41-zZZgfTAztE8CHUbgI09A9E7nO

解壓密碼:zmcx16



免責聲明:
******************
MahoMangaDownloader僅作為學術研究使用,禁止利用本程式行非法用途。

MahoMangaDownloaderVer10.6更新

這兩天有使用者反應dm5無法下載, 因為我自己測試是可以正常下載的, 在無法reproduce的情況下只能麻煩回報的使用者幫忙一起找原因, 給了一個debug版的程式把接收到的網站資料倒出來之後, 發現不同環境下dm5網站會回傳不同空格 & 縮排的網頁內容, 所以我寫的parser才會抓不到正確資料, 針對另一種版本的內容優化parser後再請使用者測試就沒問題了, 基本上這種問題我也沒辦法reproduce, 只能靠使用者回報問題一起找原因..., 非常感謝遇到問題的人願意幫忙回報 & 測試 :)

Ver10.6 更新內容:

• 修復特定環境下dm5無法下載問題

下載器Demo圖:

介紹:
https://project.zmcx16.moe/?page=mahomangadownloader


環境需求

• .Net framework 4.5.2或以上的版本
• Visual C++ 2013 (只能安裝2013版, 其他版本不行)

簡單除錯:

1. 如果下載失敗, 麻煩先用瀏覽器測試看資源是否存活。
2. 如果能正常用瀏覽器瀏覽, 麻煩先查看LogFiles資料夾內的log檔案看錯誤訊息為何。
3. 回報問題時, 麻煩提供有問題的網址以及log內容, 這樣我才有辦法測試找問題原因。

檔案位址:
https://drive.google.com/open?id=1XeNKtJm5IKaPchJMKGQEXsTJBlHEfVlO

32位元版本:
https://drive.google.com/open?id=1OUoHuyrXboZeTL2WtWqQX-ozk0xT6TtI

解壓密碼:zmcx16



免責聲明:
******************
MahoMangaDownloader僅作為學術研究使用,禁止利用本程式行非法用途。

MahoMangaDownloaderVer10.5更新

今天有使用者詢問是否可新增支援hanscan.com網站, 看了一下這網站幾乎不少生肉, 剛好我追的不少作品出版社都斷頭不代理了, 只能先啃啃生肉了...。另外google一下hanascan有不少版型一模一樣的類似網站, 有的update時間一樣快有的落差很大, 這邊也先新增loveheaven當備用, 畢竟版型一樣代表我不用多花力氣重寫parser, 剛好也一起加進去。

另外可以的話也希望大家使用下載器盡量以試看為主, 能力所及的部分還是盡量用購買支持作者, 沒辦法的話至少也盡量推廣喜歡的作品給其他人讓作品擴散出去, 作者賺到錢後才有辦法繼續產出更棒的作品回饋讀者們!!!

Ver10.5 更新內容:

• 新增支援https://hanascan.com/網站
• 新增支援https://loveheaven.net/網站

下載器Demo圖:

介紹:
https://project.zmcx16.moe/?page=mahomangadownloader


環境需求

• .Net framework 4.5.2或以上的版本
• Visual C++ 2013 (只能安裝2013版, 其他版本不行)

簡單除錯:

1. 如果下載失敗, 麻煩先用瀏覽器測試看資源是否存活。
2. 如果能正常用瀏覽器瀏覽, 麻煩先查看LogFiles資料夾內的log檔案看錯誤訊息為何。
3. 回報問題時, 麻煩提供有問題的網址以及log內容, 這樣我才有辦法測試找問題原因。

檔案位址:
https://drive.google.com/open?id=1pIX8JRAwcBUPuHxkJnBuPB4ER72L0P2l

32位元版本:
https://drive.google.com/open?id=1Zvw0WaNh-NE_jly8a_G8EdyszumCRujL

解壓密碼:zmcx16



免責聲明:
******************
MahoMangaDownloader僅作為學術研究使用,禁止利用本程式行非法用途。

python與node.js RPC溝通 - 淺談zerorpc的一些坑

這一年玩Electron有做了幾個side project, 程式都是python(主功能) + electron (javacript, UI)架構:

1. ChaldeaStockObservatory - 美股交易輔助工具
2. PhotoMosaic-Artifact - 製作蒙太奇照片工具

ChaldeaStockObservatory是python作為RPC server端, UI會定時RPC到core server請求追蹤的股價以及條件策略; 而PhotoMosaic-Artifact則相反, 當UI端設定好要轉換的圖片以及相關素材後, 會啟動RPC server並叫起python程序執行工作, python端程序會持續送目前的進度狀態給UI端的RPC server。

因為都是很簡單的小應用, RPC溝通方面也不用太講究, 所以當初是選最簡單易用的zerorpc作為RPC溝通機制, 不過最近再做新的side project, POC階段卻踩到了zerorpc不少雷:

1. 每次發RPC remote call到執行完回來會花5秒的時間才回來。
2. 要是server端的remote function執行超過10秒, client端會跳Error: Lost remote after 10000ms的Error。
3. 用node.js的child_process跑python並執行python script, zerorpc server有機會掛掉。
   

因為這次想做的東西不像之前那樣簡單溝通就好, 必須讓UI跟core程序能即時溝通回饋給使用者顯示, 所以會需要即時反應core程序的結果, 所以才踩到上述的雷..., 以下是踩雷的分析結果:

1. 每次發RPC remote call到執行完回來會花5秒的時間才回來:

這原因是因為zerorpc的rpc溝通是以ZeroMQ為基底, 而zeromq的架構有個heaerbeat機制, 這個heartbeat機制可以確保目前的MQ server跟client目前是可連接的, 而zerorpc有個config heartbeatInterval預設是5秒, 每5秒才會檢查一次是否有message回來, 基本上有兩個方法可解:

1. heartbeatInterval調小:
   只要將這個值調小就可以讓RPC call更早回來, 不過會更容易踩到其他雷, 這個等下會提到。
   
2. 額外開個thread定期幫你做heartbeat動作:
   你可以不改heartbeatInterval, 直接多開一個thread定時幫你送heartbeat, 這樣rpc call就會在heartbeat後一併回來, 只要你的heartbeat thread開越快, 你的rpc call就會越及時。

 2. 要是server端的remote function執行超過10秒, client端會跳Error: Lost remote after 10000ms的Error:

前面提到zerorpc的heartbeatInterval預設是5秒, 而zerorpc也有自己的timeout機制, 而除了既有的timeout以外, heartbeat也有自己的timeout (_heartbeatExpirationTime), 這個值並沒有config化, 它是直接hardcode heartbeatInterval的兩倍 (10秒), 只要你的rpc function執行超過10秒, 就會跳這個error出來, 所以如果你的rpc function的工作是CPU bound類型, 那就很容易就碰到這個error, 而如果你之前為了加快rpc call回來的時間把heartbeatInterval調小, 那也會很容易踩到這個雷。 至於解決方法有以下:

1. 把heartbeat設成none, 不啟動heartbeat功能(不推), 基本上最好不要, 因為一但沒有heartbeat機制, 會造成你沒辦法區分到底是rpc掛了, 還是你的rpc function還在跑, 這樣後續的error handling會超難處理。
   
2. 把heartbeat改成超長, 這樣_heartbeatExpirationTime也會跟著超長, 而heartbeat太慢的問題可以靠(1.2)的另開heartbeat thread解決, 不過這方法也不推, 因為這樣當rpc掛掉的時候, 你會超長時間才看到error, 判斷到error以及handle的時間會被拉更遠。
   
3. 直接改zerorpc的code, 把zerorpc channel的_heartbeatExpirationTime直接改成你要的數字, 不過也超級不推, 因為除了有上述(2.2)的問題外, 你之後要update library也都會被洗掉, 你要額外花effort去maintain它會非常累。
   
4. 拆解你的長時間rpc function, 讓它定時做gevent.sleep(0), 這樣zerorpc就會有餘裕做heartbeat。 這方法其實超級瞎(有點像你在UI thread跑CPU bound的工作, 然後為了不讓使用者感覺UI hang所以不時的讓它處理UI工作, 那幹嘛不多開個thread做CPU bound的工作就好了...), 也是非常的不推薦。
   
5. 依照zerorpc的特性設計自己的rpc function, rpc function不論是CPU bound還是IO bound, 本來就不該處理花太長時間的工作, 所以就是得自己根據需求設定rpc function, 不花資源快速的工作就照舊用它的sync rpc function, 而長時間的工作如果要簡單做就自己做個task queue開thread去處理, client端打完rpc call會拿到的task id, 在定時去query看什麼時候任務完成在把結果取回來; 而複雜做的話就是做成micro service, 你的rpc server只做dispatch task, 所有其他任務都是由其他對應的process去負責完成。

講那麼多其實真正的解法就是只有(5), (1~4)基本上你拿來幹一定之後一堆雷, 我自己也是簡單做成async task去執行花時間的工作。

3. 用node.js的child_process跑python並執行python script, zerorpc server有機會掛掉:

我自己在開發環境測試時, 用node.js的child_process.spawn()運行python script作為子程序, 如果remote rpc call太頻繁(100ms 以下), 會有機率造成Server端異常, client會再也無法RPC到server, 只能重啟server process, 這問題最玄的是如果不用node.js的child_process運行python而是直接開另一個terminal run python, 或是用node.js的child_process直接運行pyInstaller build好的exe, 就可以正常運行不管打再快都沒問題..., 這個我還真的是黑人問號...., 完全沒任何sense, 可是既然測試結果是發佈版不會有任何問題, 那我也不想花時間繼續找原因了, 畢竟發佈版不會有問題啊...(催眠自己)。

在來聊聊為什麼踩了上面那麼多雷還要繼續用zerorpc, 其實nodejs跟python rpc溝通還有不少library, 像是Thrift (Facebook開發, 現在由Apache軟體基金會接手), gRPC (Google), etc...。 最主要原因在於上述這兩個library都必須開rpc function interface spec, 在用他們的tool編譯成對應軟體的library才能使用, 而zerorpc則是不需要做這些直接支援動態rpc function, 這樣我想加個rpc function就不需要寫spec, 編譯, import library這些動作(當然這些可以用script自動化, 可是寫這個script又要花時間...), 另外一個理由就是不甘心吧, 想找出為什麼只有我踩到這麼多雷的原因, 可是真的去找後認真說zerorpc的文件超少, 官方網站(https://www.zerorpc.io/)提供的Document竟然是PyCon的Video以及Note..., 所以其實真的要找原因只能去啃zeromq的資料, 明明是為了簡單使用rpc才摸zerorpc, 實際上操作真的超簡單, 可是拆地雷竟然得去看zeromq的資料..., 這世界也太變態了吧!!

這次的分享大概就到這裏, 希望能幫到未來想用zerorpc去做python與node.js RPC溝通的人(還是反過來變成勸世文?), 最後照慣例分享目前正在填坑的動畫圖, 這就是每文一貼吧! (為了這個發文的動力大概佔了9成有XD)

最近開始填エロマンガ先生的動畫坑, 會填這坑是因為OP跟ED那時看了超香, 根本把宅宅的喜好通通包進去了, 沒想到拖到現在才入坑, 不過也完全不辜負我的期待, 動畫做超讚!!

附上歡樂的OP & ED XD