Cache ทุกคำแปลของ Visual Novel Reader

เป็นวิธีแก้ไข Visual Novel Reader ให้สามารถ Cache คำแปลต่างๆ ที่แปลจาก Google Translator หรือ Bing Translator ได้ โดยตัว Visual Novel Reader นี้เป็น Open Source แต่ไม่มี Source Version Control อย่างพวก SVN หรือ Git (จริงๆ เข้าใจว่ามันใช้ Hg นะ มันคืออะไรไม่รู้เห็นตอน Update และเข้าใจว่าไม่เปิด public) ทำให้ไม่สามารถ pull request ได้ (ถึงทำได้ ก็ไม่ทำ code กาก 55+)

เป้าหมายที่อยากทำคือบางครั้งกลับมาเล่นเกมส์ซ้ำมันแปลไม่ได้ หรืออยากไป route อื่น แต่ข้อความมันซ้ำ ก็ไม่รู้จะต้องไปแปลอีกทำไม บางครั้งเน็ตกากก็รอไปเถอะ โดยปกติตัว Visual Novel Reader จะ Cache ไว้ประมาณ 10-20 คำล่าสุดอยู่แล้ว แต่ถ้าปิดโปรแกรมหาย เลยต้องปรับมันสักหน่อย

ข้อควรระวัง

  1. ไม่รับประกันผล เพราะถ้ามีความรู้ Programming ระดับนึงจะเห็นว่า ผมไปทำให้มัน Clear cache ไม่ได้ เพราะผมไม่ให้มันทำ
  2. ถ้า Ram น้อย อาจจะตายได้ ผมไม่รู้เหมือนกันว่ามันกินเท่าไหร่ แต่ผมกำหนดให้เก็บเรื่อยๆ ไม่มี clear ไม่มีตัด
  3. ผมเขียนให้ตังเองใช้ ดังนั้นขอไม่อธิบายเยอะนะครับ

ขั้นตอนการทำ

แก้ไฟล์ดังต่อไปนี้

  • Library\Frameworks\Sakura\py\apps\browser\managers\_trman.py
  • Library\Frameworks\Sakura\py\apps\reader\managers\_trman.py

(ถ้าเดาจากชื่อ แก้แค่อันล่างก็พอ ก็ได้)

หา class TranslationCache แล้วแทนที่ด้วย code ดังต่อไปนี้

ด้านล่างตรงนี้เป็นของเก่า ไม่ใช้แล้ว

เพิ่ม Code นี้ไปแถวๆส่วนที่เค้า import กัน

หา class TranslationCache แล้วแทนที่ด้วย code ดังต่อไปนี้

ปิด Visual Novel Reader เปิดใหม่ ก็ได้แล้ว ต่อไปมันก็จะ cache ตลอดแล้ว

วิธีทำให้เข้าสู่ระบบ WordPress ใน Domain และ SubDomain ในครั้งเดียว

เกริ่นปัญหา

ปัญหาของเรื่องนี้มาจากโพสนี้ครับ สรุปคือเค้าอยากได้ WordPress 2 ตัวที่ใช้ฐานข้อมูลผู้ใช้อันเดียวกัน และเข้าสู่ระบบที่นึง อีกที่จะเข้าสู่ระบบด้วย โดยหลังจากผมลองค้นหาดู พบว่าสามารถทำได้ แต่ทำได้ในระดับแค่ Sub Domain หรือ Sub Directory เท่านั้นนะครับ และ Database ต้องใช้ Database เดียวกัน (ผมเข้าใจว่าสามารถทำได้ถึงระดับที่อยู่คนละ Database แต่ต้องเป็นที่เดียวกันและใช้ Username/Password เหมือนกัน)

วิธีทำ

  1. ก่อนอื่นให้ลง WordPress ทั้ง 2 ที่แบบปกติให้เรียบร้อยก่อน (ถ้ามีแล้ว ข้ามไปครับ)
  2. ลง Plugins “WP-Orphanage Extended” ให้ WordPress ทั้ง 2 ตัว แล้วไปตั้งค่าใส่ prefix ให้เรียบร้อยครับ
  3. ทำการแก้ไข wp-config.php ของ WordPress ทุกตัวดังนี้ครับ
  4. ทดสอบได้เลยครับ

ความเห็นส่วนตัว

จริงๆคิดว่าถ้าจะทำแบบนี้น่าจะทำเว็บเดียวแล้วแยก Category ของบทความน่าจะดีกว่า แล้วปรับ Theme เอา โดยใช้ Template Hierarchy หรือ Condition Tags ช่วยก็จะได้ 2 ส่วนที่หน้าตาไม่เหมือนกัน แต่ข้อมูลเหมือนกันแล้ว (ช่วยได้ระดับนึงนะ) หรือไม่ก็แยก Post Type ไเลยก็ได้ครับ

WordPress ช้าเพราะ Really Simple CAPTCHA

อันนี้เอามาจากโพสนี้ ไม่ได้เจอเอง คิดว่าน่าจะแก้ได้แล้วเพราะเจ้าของโพสมากดไลค์ แต่ไม่แจ้งผล

really_simple_captcha_property

ปัญหาที่เกิดคือเค้าบอกว่าเว็บช้ามาก เพราะ Really Simple CAPTCHA และขนาดของ plugin ใหญ่มาก (พวก cache ภาพที่ gen แล้วต่างๆ) ตอนแรกผมไม่เชื่อเท่าไหร่ เพราะผมคิดว่ามันไม่น่าจะช้าได้จากตัวนี้ จนกระทั่ง เค้าใช้ P3 Profiler มาให้ดูจริงๆ ผมก็เลยไปลองไล่ดู Code

ผมเดาว่าสาเหตุนั้นมาจากตอน clean up พวกภาพที่หมดอายุต่างๆ ทำให้มันกิน resource จากตัวอย่างคือ loop อ่าน meta file 20000 กว่ารอบ เพื่อลบไฟล์ที่ไม่ใช้ (ยิ่งถ้าใช้พวก NFS นะ โคตรช้า)

Solution

  1. เปิดไฟล์ really-simple-captcha.php หา function cleanup ให้แก้ไขเป็นดังนี้

    (ปิดการทำงานของ clean up เพื่อไม่ให้เว็บช้า เราจะย้ายไปทำใน background แทน)
  2. ให้สร้างไฟล์ชื่อ cleanup.php ข้างๆ really-simple-captcha.php มีเนื้อความดังนี้

    (เป็นไฟล์สำหรับ clean up แบบ manual)
  3. สร้าง cronjob เพื่อสั่งให้ cleanup.php ทำงาน (หรือเข้ามาสั่งเองทุกวันก็ได้ แต่ถ้าสั่งช้า มันจะกินพื้นที่ HDD เยอะขึ้นเรื่อยๆ)

จบ เอาไปทดสอบได้เลยครับ

[บันทึก] R&D เทคนิคป้องกันการดูดรูปภาพจากเว็บ (ขโมยรูป)

สืบเนื่องมาจากโพสนี้ครับ คือ ณ วันที่เขียนบทความนี้ เว็บ www.Nekopost.net (ตอนเข้าต้องมี www. ทุกครั้งไม่งั้น ajax เค้าพัง) ใช้วิธีป้องกันการขโมยรูปโดยใช้วิธีเอารูปจริงๆ ไปใส่ในภาพที่มีพื้นหลังสีขวา และภาพใหม่นั้นขนาดใหญ่กว่าภาพเดิม โดยใส่แบบสุ่มตำแหน่ง แล้วใช้ JS+CSS แสดงเฉพาะส่วนที่เป็นภาพหลักตรงๆ ผลคือหมาไฟ (Firefox) ผมมีโอกาศเพี้ยนเวลาที่มันกิน RAM ไปเยอะแล้วไปอ่านการ์ตูน (หรืออาจจะเป็นเพราะผมมีนิสัยกด END รัวๆเพื่อให้มันโหลดภาพทั้งหมดมาก่อนแล้วค่อยไล่อ่านรึเปล่า) ดังนั้นผมเลยเสนอวิธีไป (จริงๆวิธีที่ 1 คิดได้ตั้งแต่วันแรกที่เห็นมันทำแล้วแหละครับ แต่ไม่ได้ proof เป็น code สักที เพราะผมอยากพยายามหาวิธีที่กันการคัดลอก และดีกว่าที่เค้าใช้อยู่ โดยเชื่อว่าวิธีที่เค้าใช้ไม่ได้ดีที่สุด)

วิธีที่ 1 ใช้อีกภาพเป็น Key แล้วใช้ XOR กับต้นฉบับ

อันนี้เป็นวิธีแรกที่ผมมี Code อยู่ที่นี่ครับ หรือ Download พร้อม Sample Data  ที่นี่ แนวคิดดังนี้

  1. สร้างภาพ Key ขึ้นมา เป็นภาพเล็กๆ สมมุติขนาด 64*64 px โดยแต่ละจุดสร้างจากการสุ่มสีขึ้นมารวมเป็นภาพมั่วๆ
  2. เอาแต่ละจุดของภาพต้นฉบับไป XOR กับภาพ Key ทีละสีเลย โดยใช้คุณสมบัติจาก
    ถ้า a XOR b = c แล้ว c XOR b = a
  3. ที่ Browser ใช้ Canvas ทำ Pixel Manipulation เพื่อทำการ XOR กลับมา
  4. แต่ถ้าสั่งแสดงที่ Canvas เลย ตัว Google Chrome มันเทพเกิน สามารถคลิกขวาที่ Canvas แล้ว Save As ได้ จึงต้องแปลงเป็น Data URI แล้วทำเป็น Background ให้ Div แทน

แต่เมื่อลองทำแล้ว เกิดปัญหาดังนี้

  1. Browser ต้องใหม่ระดับหนึ่ง (เพราะใช้ Canvas)
  2. มันกิน RAM มากๆ เวลาถอดรหัส อาจจะมากกว่าภาพใหญ่ของ Nekopost อีกต่างหาก
  3. ถ้าใช้กับ Mobile ที่ CPU ช้า อาจจะต้องรอนานกว่าภาพจะถอดรหัสเสร็จ (ระดับวินาที) และค่อนข้างกินแบตเตอรี่
  4. บน Tablet ผม (Samsung Galaxy Note 8) มีปัญหาว่า canvas เหมือนมันขี้เกียจทำบางจุด หรือประมวลผลผิดไม่รู้ทำให้มี Noise เป็นจุดสีๆเกิดขึ้นบนภาพ ทั้งๆที่บน PC ไม่เจอ

ดังนั้นแนวคิดนี้ผมเลยตกไป

วิธีที่ 2 สลับตำแหน่งของภาพ แนวคิดแบบตัวต่อจิ๊กซอว์

เป็นวิธีที่ 2 ที่ผมคิดมาแทนอันแรก ซึ่งตกไปในเรื่อง Performance และการใช้งานจริง วิธีนี้สามารถดู Code ได้ที่นี่  หรือ Download พร้อม Sample Data ที่นี่ แนวคิดดังนี้ครับ

  1. แบ่งภาพออกเป็น x คอลัมน์  y แถว โดย x ต้องหารความกว้างภาพลงตัว และ y ต้องหารความสูงภาพลงตัว (ถ้าไม่ลงตัวจะเกิดปัญหาภาพไม่ต่อกัน ดูไม่งามได้)
  2. สุ่มนำภาพแต่ละช่อง ไปวางมั่วๆบนภาพใหม่ แล้วสร้าง meta file บอกว่าเดิมนั้นแต่ละส่วนอยู่ตรงไหน
  3. เวลาแสดงก็อ่าน meta file มาสร้าง div ข้างในแทนแต่ละ block ให้แสดง background ของแต่ละช่องให้ถูกต้อง

ตัวอย่างภาพที่ผมทำ จะประมาณนี้

Before ShuffleBefore After ShuffleAfter

วิธีนี้หลังจากลองในเบื้องต้น พบว่าใช้ได้ OK เลย แต่มันมีปัญหานิดหน่อยใน Code ของผม คือมีส่วนที่ยุ่งเกี่ยวกับ DOM ที่ผมไม่ได้ Optimize อยู่ ดังนั้นถ้าแสดงภาพเยอะๆ จะทำให้เปิด Browser มาแล้วเหมือนค้าง หลังจากนั้นจะเร็วแล้วครับ

ผลจากวิธีที่ 2 สามารถลด RAM ได้มากกว่าวิธีที่ Nekopost ใช้ปัจจุบันเยอะมากครับ

memory_report

จากตาราง แสดงดังนี้

  1. PID 9532 เป็นวิธีจิ๊กซอว์ของผม
  2. PID 456 เป็นของ Nekopost
  3. PID 2756 เป็นภาพต้นฉบับจากเว็บคนแปลเลย (แต่ผมนั้นใช้ Adblock ทำการ block ส่วนของ social media กับ comment ทิ้ง เพื่อให้ขนาดใกล้เคียงนะครับ เหลือพวกภาพ Header กับโครงไว้)

ผลดังนี้ครับ

  • จะเห็นวิธีผมกิน RAM ใกล้เคียงกับขนาดต้นฉบับค่อนข้างมากครับ (เทียบ 9532 กับ 2756) แต่ถ้าเทียบแค่ภาพจริงๆ ต้นฉบับน่าจะน้อยกว่าผม
  • วิธีผมเมื่อเทียบกับ Nekopost ลด RAM เยอะมาก (จริงๆ Nekopost เพิ่ม RAM ที่ต้องใช้มากกว่า) จากเกือบ 400MB เหลือ 220MB (ทำไมภาพแค่ 23 ภาพมันแดก RAM เยอะจังวะ?)

บันทึกทำ RAPTOR ให้ RUN แบบ Command Line บน Linux ได้

แบบสำเร็จรูป

ดาวโหลดนี่ WineINW มัน เป็น .wine ให้เอาไปใส่ใน home folder ของ user ที run (ตัวนี้ยังไม่สามาร ใช้ /compile ได้ ถ้าอยากใช้ต้อง PATCH ก่อน ดูด้านล่งสุด)

วิธีใช้

  1. ให้ แตก wine_inw.tar.gz ไปไว้ที่ ~ (home directory)
  2. จบแลว แต่เพื่ทดสอบให้ลองสร้าง test.rap ให้สั่งปริ้นอะไรออกมาก็ได้ แลวสั่ง
    wine C:\\RAPTOR\\raptor.exe ./test.rap /run in.txt out.txt (หรือแบบนี้หว่าจำไม่ได้ wine C:\\RAPTOR\\raptor.exe ./test.rap /run < in.txt > out.txt ลองทำทั้ง 2 แบบแล้วกัน)
    จำเป็นต้องใช้ ./test.rap ไม่สามารถย่อเหลือแค่ test.rap ได้ เพราะมันจะ bug เหมือนมันไม่มองเป็น path ไรนี่แหละขี้เกียจดู 

วิธีทำแบบยาว

  1. ต้องแก้ Code โดยทำตามนี้ก่อน
  2. จากนั้นสามารถโหลด Code ตัวนี้ไป Compile เพื่อให้ได้ RAPTOR ที่สามารถใช้งานบน Pure CLI ได้
  3. หลังจาก Compile แล้ว ถ้าเป็นตาม code ผม เหมือนจะวางไฟล์ผิด ให้เอา raptor.exe ใน bin/Debug ไปวางทับของปกติ ถึงจะสามารถใช้ได้
  4. ต่อ มาเราต้องเตรียม Linux(ผมทำสอบบน ubuntu 12.04) โดยตอนนี้ต้องเป็น linux desktop เท่านั้น เพื่อให้สามารถลง .NET Framework และ Mono ได้
  5. ลง wine ( sudo apt-get install wine )
  6. หลัง จากนั้นให้ติดตั้ง .NET Framework(ถ้าจำไม่ผิดใช้ 2.0 กับ 4.0 แต่ถ้าไม่ลงก็อาจจะได้เหมือนกัน) และ Mono ผ่านทาง winetricks (ทางอื่นน่าจะได้ แต่แบบนี้สำหรับผมง่ายดี)
  7. กอปตัว RAPTOR ทั้งหมดมาวางใน ~/.wine/drive_c/ หรือที่อื่นก็ได้ตามสะดวกแหละ
  8. จากนั้นลองทดสอบตามด้านบนดู (ถ้าถูกต้อง มันจะไม่มี MsgBox หรือ GUI อะไรเด้งขึ้นมาทั้งนั้น)
  9. ถ้าทดสอบแล้วผ่าน ให้กอป ./wine ไปวางที่ home directory ของ user ที่จะใช้บน server ได้
  10. ติดตั้ง wine บน server

จบ

Patch สำหรับทำห้ใช้ /compile ได้

สามารถ Download ได้จากที่นี่ หรือเอาจากที่ compile ใหม่จากด้านบนก็ได้ โดยเอาไปวางทับใน ~/.wine/drive_c/RAPTOR/ จบ

วิธีใช้คือ สั่ง wine C:\\RAPTOR\\raptor.exe ./test.rap /compile จะได้ compiled.exe ออกมา(ขี้เกียจทำชื่อ dynamic เลย fix ชื่อนี้เลย 55)
สามารถสั่งให้ทำงานได้โดย wine ./compiled.exe 

เพิ่มเติม

เนื่องจากปกติ wine เปิด Debug ไว้ทำให้มันจะมีอะไรหลุดมาตอน run เป็นพรวนเลย สามารถเอาออกได้โดยการสั่ง WINEDEBUG=-all ไว้ด้านหน้า เช่น
WINEDEBUG=-all wine C:\\RAPTOR\\raptor.exe ./test.rap /run < in.txt > out.txt หรือ
WINEDEBUG=-all wine ./compiled.exe

ข้อมูลสำคัญที่จะเป็นน่าจะหมดแล้ว คราวหน้าเวลางมต่อจะได้ง่ายๆ 555