TuaRai คืออะไร?

TuaRai (ตัวอะไร) คือเว็บแอปพลิเคชัน AI ที่ถ่ายรูปแล้วบอกว่า "ตัวอะไร?" — ระบุชื่อ หมวดหมู่ ระดับอันตราย พร้อมดึงข้อมูลละเอียดเป็นภาษาไทยจาก Wikipedia โดยอัตโนมัติ

รองรับสัตว์ แมลง พืช อาหาร ยานพาหนะ อาคาร เทคโนโลยี และสิ่งของทั่วไป — ทุกอย่างที่มีบทความใน Wikipedia

วัตถุประสงค์

  • สาธิตหลักการ Object Oriented Programming ด้วย Java
  • เชื่อมต่อ External API จริง (Google Vision, Wikipedia)
  • ใช้ MVC Architecture และ Service Layer Pattern
  • จัดเก็บข้อมูลด้วย JPA + SQLite
  • สร้าง Web Application ที่ใช้งานได้จริง
  • รองรับ Mobile ด้วย Responsive Design

HOW IT WORKS
การทำงานทีละขั้นตอน

1
ผู้ใช้ถ่ายภาพหรืออัปโหลด

ผู้ใช้เปิดกล้องผ่านหน้า Scanner หรืออัปโหลดรูปจากหน้า Upload JavaScript ใช้ MediaDevices API เข้าถึงกล้อง แล้ว encode ภาพเป็น Base64 ก่อนส่งไปยัง Server ด้วย HTTP POST

2
Spring Boot รับและประมวลผล

DetectionController รับ request จาก 3 endpoint: POST /scan (form upload), POST /api/detect (REST API), POST /api/detect/camera (base64 JSON) → ส่งต่อให้ AIService → ส่งภาพเป็น Base64 ไปยัง Google Cloud Vision API

ไม่บันทึกภาพลงดิสก์ — ภาพถูกแปลงเป็น data:image/jpeg;base64,... และเก็บใน database พร้อม JSON ผลลัพธ์เต็ม เพื่อลดการใช้พื้นที่และเพิ่มความปลอดภัย

3
Google Cloud Vision AI วิเคราะห์ภาพ

GoogleVisionApiClient ส่งภาพไปยัง Vision API พร้อมเปิดใช้ 3 Feature พร้อมกัน:

  • LABEL_DETECTION — ระบุ label ต่างๆ ในภาพ เช่น "Bird", "Feather", "Wing" พร้อม confidence score
  • OBJECT_LOCALIZATION — ระบุตำแหน่งวัตถุในภาพ เช่น "Bird at 0.3, 0.2"
  • WEB_DETECTION — ค้นหาชื่อเฉพาะจากรูปภาพที่คล้ายกันบนอินเทอร์เน็ต เช่น "Hummingbird", "Gallus gallus domesticus"

Vision API ส่งกลับ JSON ที่มี labels, objects, bestGuessLabels, webEntities, logos

4
DetectionService เลือกชื่อและชื่อวิทยาศาสตร์

DetectionService รับ JSON จาก Vision แล้วเลือกชื่อที่ดีที่สุด:

  • ใช้ bestGuessLabel ก่อน เพราะละเอียดที่สุด (เช่น "Hummingbird")
  • ข้ามชื่อที่ไม่เหมาะ เช่น "Proboscis", "Led-backlit Lcd Display"
  • Fallback ไปใช้ label แรก (score สูงสุด) หรือ webEntity
  • สกัด ชื่อวิทยาศาสตร์ (Binomial Nomenclature) จาก webEntities ด้วย method isScientificName() — ตรวจสอบรูปแบบ [A-Z][a-z]{3,} [a-z]{4,} เช่น "Chrysopelea ornata" และกรองคำสามัญออก เช่น "Green snake" ที่ไม่ใช่ชื่อวิทยาศาสตร์
  • ได้รายการ sciCandidates หลายตัว เพื่อใช้ fallback ถ้าบทความแรกเป็น stub
5
WikipediaService ดึงข้อมูลละเอียด

WikipediaService ค้นหาข้อมูลด้วยลำดับการค้นหาอัจฉริยะ:

  • ขั้นที่ 1 — ค้นหา Wikipedia ภาษาไทย ด้วยชื่อไทย / ชื่อสามัญ: ถ้าเจอได้ชื่อไทย + คำอธิบายภาษาไทยทันที
  • ขั้นที่ 2 — ค้นหาด้วย ชื่อวิทยาศาสตร์ จาก sciCandidates ใน Wikipedia ภาษาอังกฤษ (containsThai() guard — ไม่ค้น EN ด้วยคำภาษาไทย)
  • Stub Detection — ถ้าบทความสั้นกว่า 150 ตัวอักษร (isStubWiki()) จะลองชื่อวิทยาศาสตร์ถัดไปใน sciCandidates อัตโนมัติ
  • ดึง ชื่อไทย จากบทความ Wikipedia ภาษาไทย หรือ regex (Thai: ...) ในบทความอังกฤษ (extractThaiNameFromEnglish())
  • ดึง ชื่อวิทยาศาสตร์ ด้วย Regex [A-Z][a-z]{3,}\s[a-z]{4,} จากเนื้อหา เช่น "(Gallus gallus)"
  • ดึง หมวดหมู่ จาก description field ของ Wikipedia เช่น "species of bird" → Animal รองรับคำภาษาไทย (งู, แมลง ฯลฯ)
  • ดึง รูปภาพ thumbnail และ URL บทความ; URL ใช้ wikiEncode() แปลงเว้นวรรคเป็น _ (ไม่ใช่ +) ตาม Wikipedia REST API
6
แปลเป็นภาษาไทย (กรณีไม่มี Wikipedia ไทย)

ถ้าหา Wikipedia ภาษาไทยไม่เจอ prepareForTranslation() จะลบอักษรไทยและ script อื่นออกก่อน แล้วส่งไปแปล — ใช้ 3 API เรียงลำดับ:

  • 1. GTX (Google Translate unofficial) — endpoint translate.googleapis.com/translate_a/single?client=gtx ไม่ต้องใช้ API key, ไม่มี rate limit รายวัน — ใช้เป็นหลัก
  • 2. Google Translate API v2 — Fallback ถ้า GTX ล้มเหลว (ต้องการ API key)
  • 3. MyMemory Translation API — Fallback สุดท้าย (ฟรี 500 คำ/วัน) ใช้ UriComponentsBuilder encode ตัวคั่นภาษา en|then%7Cth เพื่อหลีกเลี่ยง URI exception
  • ถ้าข้อความยาวเกิน 450 ตัวอักษร — แบ่งเป็น chunk ขนาด 400 ตัวอักษร (translateInChunks())
7
บันทึกผลลัพธ์ลงฐานข้อมูล

HistoryService บันทึกข้อมูลการสแกนลงตาราง scan_history ใน SQLite ผ่าน Spring Data JPA และ Hibernate ORM — จัดเก็บชื่อสิ่ง, category, confidence, URL รูปภาพ, และ timestamp

8
แสดงผลด้วย Thymeleaf

Thymeleaf Template Engine render หน้า result.html แสดง: ชื่อไทย/อังกฤษ, emoji, หมวดหมู่, ระดับอันตราย, คำอธิบาย Wikipedia พร้อม thumbnail, ชื่อวิทยาศาสตร์, AI labels chart, และคำแนะนำ

TECH STACK
เทคโนโลยีที่ใช้

Backend
LanguageJava 17 LTS
FrameworkSpring Boot 3.2
MVCSpring MVC
ORMSpring Data JPA
DatabaseSQLite
BuildApache Maven
TemplateThymeleaf
HTTP ClientRestTemplate
JSONJackson
Frontend
MarkupHTML5
StylesCSS3
FrameworkBootstrap 5
ScriptsVanilla JS ES6+
CameraMediaDevices API
IconsFont Awesome 6
FontsOrbitron + Rajdhani
DesignCyberpunk Dark
ResponsiveMobile-First
External APIs
Vision AIGoogle Cloud Vision
FeaturesLabel, Object, Web
KnowledgeWikipedia REST API
Wiki QueryMediaWiki Action API
Translate 1GTX (Unofficial)
Translate 2Google Translate v2
Translate 3MyMemory API
ProxyIIS (port 80→8080)
DeployWindows Server 2025
Android App
LanguageKotlin
UIWebView
CameraCameraX API
NetworkOkHttp
Min SDKAndroid 7.0
TargetAndroid 14
UpdateAuto Check/Update

JAVA CLASSES
โครงสร้างคลาส Java

Controller
HomeController

จัดการ HTTP GET requests สำหรับทุกหน้า HTML (/, /scanner, /upload, /about, /download) และ APK version endpoint

Controller
DetectionController

3 endpoints: POST /scan (form upload → result.html), POST /api/detect (REST API ไฟล์), POST /api/detect/camera (REST API base64 JSON) — แปลงภาพเป็น base64 data URL ไม่บันทึกลงดิสก์

Service
AIService

ประสานงานหลัก: รับภาพ → เรียก GoogleVisionApiClient → ส่งผลให้ DetectionService → จัดการ StorageService และ HistoryService

Service
DetectionService

แปลง JSON จาก Vision API → เลือกชื่อที่ดีที่สุด → สกัด sciCandidates (ชื่อวิทยาศาสตร์) ด้วย isScientificName() → เรียก WikipediaService พร้อม stub fallback (isStubWiki()) → infer dangerLevel → สร้าง DetectionResult

Service
WikipediaService

ดึงข้อมูลจาก Wikipedia API (Thai/English) — มี containsThai() guard, wikiEncode() แปลง space→underscore, extractThaiNameFromEnglish() ดึงชื่อไทยจากบทความอังกฤษ, prepareForTranslation() ลบ script ต่างชาติก่อนแปล, แปลด้วย GTX → Google Translate → MyMemory

Service
HistoryService

บันทึกและดึงประวัติการสแกนจากฐานข้อมูล ใช้ ScanHistoryRepository ผ่าน Spring Data JPA

Service
StorageService

ให้บริการ utility สำหรับจัดการ path และ URL — ปัจจุบัน scan results ใช้ base64 data URL แทนการบันทึกไฟล์จริง เพื่อความปลอดภัยและประหยัดพื้นที่

API Client
GoogleVisionApiClient

ส่ง HTTP POST ไปยัง Google Cloud Vision API v1 พร้อม features ที่ต้องการ แปลง response JSON กลับมาเป็น Map

Model / Entity
ScanHistory

JPA Entity class แมปตาราง scan_history ใน SQLite เก็บข้อมูล: prediction, category, confidence, imageUrl (base64 data URL), scanTime, และ fullResultJson (JSON เต็มของ DetectionResult เพื่อ restore ผลลัพธ์ได้ครบถ้วน)

DTO
DetectionResult

Data Transfer Object ที่ส่งข้อมูลจาก Service ไป View — มี fields: nameEn, nameTh, category, dangerLevel, wikiSummaryTh, wikiSummaryEn, allLabels ฯลฯ

Repository
ScanHistoryRepository

Spring Data JPA Repository Interface — auto-generate SQL สำหรับ CRUD operations บนตาราง scan_history

Config / Util
AppConfig, WebConfig, ImageUtil

AppConfig: Spring Beans (RestTemplate, ObjectMapper) • WebConfig: Static resource mapping • ImageUtil: ประมวลผลรูปภาพ

OOP PRINCIPLES
หลักการ OOP ใน TuaRai

Encapsulation

ทุก class มี private fields เข้าถึงผ่าน getter/setter เช่น DetectionResult ซ่อน fields ทั้งหมด และ WikiInfo inner class ใน WikipediaService

Inheritance

Spring Component Hierarchy — @Controller, @Service, @Repository สืบทอด annotation behavior ScanHistoryRepository extends JpaRepository

Polymorphism

DetectionResult.success() และ DetectionResult.unknown() เป็น static factory methods ที่คืน object หลายรูปแบบ RestTemplate รองรับหลาย response type

Abstraction

Service Layer ซ่อนความซับซ้อนของ API — Controller ไม่ต้องรู้ว่า Vision API ทำงานยังไง, Wikipedia ค้นยังไง รู้แค่เรียก aiService.analyzeImage()

ARCHITECTURE
แผนผังสถาปัตยกรรมระบบ

Browser / App
ถ่ายภาพ + Base64
Spring Boot
DetectionController
Google Vision
Label + Web Detection
Wikipedia API
Thai + EN Info
SQLite
บันทึกประวัติ
Thymeleaf
แสดงผลลัพธ์

DEVELOPER
ผู้พัฒนา

Ekkapan Jantaen

6811680004
MIIC1224 Object Oriented Programming

พัฒนาระบบ TuaRai.AI เพื่อสาธิตหลักการ Object Oriented Programming โดยผสาน Google Vision AI, Wikipedia API, และ Spring Boot สร้างแอปพลิเคชันที่ใช้งานได้จริงบนมือถือและเว็บ