กลับ
Web App
UI/UX
Marketing/SEO
Landing Page
Front end

GemiTrans AI Translator

AI APITailwindCSSHeroUINextJS16React19
GemiTrans AI Translator

GemiTrans AI Translator

การทำงานหลัก

GemiTrans เป็นเว็บแอปพลิเคชันแปลภาษาที่ขับเคลื่อนด้วย AI (Google Gemini) ออกแบบมาเพื่อการแปลแบบเรียลไทม์ที่รองรับการแปลหลายภาษาพร้อมกันในหน้าจอเดียว (สูงสุด 3 รูปแบบการแปล) จุดเด่นคือผู้ใช้สามารถปรับระดับ ความสุภาพ (Formality) และ วัตถุประสงค์ (Objective) ของคำแปลได้เพื่อให้ได้ผลลัพธ์ที่แม่นยำตามบริบทการใช้งาน

  • การแก้ปัญหา

  1. ความรวดเร็วและประสิทธิภาพ ลดความยุ่งยากในการสลับหน้าจอไปมาเพื่อแปลหลายภาษา โดยสามารถเปรียบเทียบผลลัพธ์แบบ Side-by-Side ได้ทันทีในคลิกเดียว

  2. บริบทและโทนของภาษา แก้ปัญหาคำแปลที่ "แข็ง" หรือไม่ตรงกับกาลเทศะ โดยการปรับระดับความสุภาพ (0-100) และระบุวัตถุประสงค์ (เช่น แปลแบบทั่วไป, เชิงเทคนิค, หรือเชิงกวี)

  3. การจัดเก็บข้อมูลอย่างเป็นระบบ มีระบบ Notebook (เครื่องมือเขียนโน้ต) และ ประวัติการแปล (History) ช่วยให้ผู้ใช้บันทึกและจัดการข้อมูลการแปลที่สำคัญได้ง่ายขึ้น

  4. การจัดการทรัพยากร มีระบบ Quota รายวัน (Token-based) เพื่อควบคุมปริมาณการใช้งาน AI และบริหารจัดการต้นทุนอย่างเป็นระบบ

Landing page

หน้าแรกที่ถูกออกแบบมาเพื่อนำเสนอฟีเจอร์เด่นของแอปพลิเคชัน มีหน้าตาที่ทันสมัยและใช้แอนิเมชัน (Framer Motion) เพื่อสร้างความน่าสนใจ โดยจะแนะนำจุดเด่นอย่างการแปลด้วย AI และการแปลหลายภาษาพร้อมกัน เพื่อกระตุ้นให้ผู้ใช้ใหม่เริ่มต้นใช้งานหรือศึกษาข้อมูลราคาและสิทธิประโยชน์

Log in & sign in

ระบบความปลอดภัยและการยืนยันตัวตนที่ทำงานผ่าน Firebase Authentication ผู้ใช้สามารถสมัครสมาชิกหรือเข้าสู่ระบบเพื่อเชื่อมต่อข้อมูลประวัติการแปล, คำที่บันทึกไว้ และสมุดโน้ต ให้เข้าถึงได้จากทุกอุปกรณ์ ระบบรองรับการตรวจสอบข้อมูลและการแจ้งเตือนข้อผิดพลาดที่ใช้งานง่าย

Main product

หัวใจหลักของแอปพลิเคชัน เป็นพื้นที่ทำงานที่ผู้ใช้สามารถพิมพ์ข้อความเพื่อแปลแบบเรียลไทม์ โดยมีฟีเจอร์สำคัญคือ

  1. Multi-Card UI แปลข้อความเป็นหลายภาษาพร้อมกันได้สูงสุด 3 ภาษา

  2. Customization ปรับระดับความสุภาพและกำหนดวัตถุประสงค์การแปลผ่าน AI

  3. Drag & Drop จัดลำดับการ์ดคำแปลใหม่ได้ตามต้องการเพื่อการเปรียบเทียบที่สะดวกขึ้น

  4. Action Tools คัดลอกข้อความ, ฟังเสียงอ่าน (TTS), หรือส่งข้อมูลไปยัง Notebook ได้ทันที

Setting

ศูนย์รวมการตั้งค่าส่วนบุคคลที่ช่วยให้ผู้ใช้จัดการการใช้งานได้ตามต้องการ เช่น การตั้งค่า ภาษาเริ่มต้น ที่ใช้บ่อย, การตรวจสอบ โควตาการใช้งานรายวัน (Token) ที่เหลืออยู่ (จัดการโดย Firebase) และการอัปเดตข้อมูลโปรไฟล์ เพื่อให้แอปพลิเคชันพร้อมใช้งานตามสไตล์ของแต่ละคน

Notebook

เครื่องมือช่วยจัดการข้อมูลที่มีระบบ Rich Text Editor (Tiptap) ผู้ใช้สามารถสร้าง แก้ไข และจัดการโน้ตของตนเองได้อย่างอิสระ โดยสามารถดึงผลการแปลจากหน้าหลักมาบันทึกต่อท้ายในโน้ตได้ทันที เหมาะสำหรับผู้ที่ต้องการรวบรวมข้อมูลหรือจดบันทึกเพื่อการศึกษาและการทำงานอย่างเป็นระบบ

Click here to visit https://gemitrans-d2d.vercel.app

Tech Stack

  • Frontend React 19, Tailwind CSS, HeroUI (Component Library), Framer Motion (Animations), Tiptap (Rich Text Editor), dnd-kit (Drag-and-Drop UI).

  • Backend Node.js (Serverless API), Google Generative AI (Gemini 1.5 Flash / 3.1 Flash-Lite).

  • Infrastructure Firebase (Authentication, Firestore Database, Hosting).

Share this project

Contact us

Location

Bangkok, Thailand

2024 — Present

Office hours

จันทร์ – ศุกร์: 9:00 – 18:00

09 AM — 06 PM

Follow us