i18n คืออะไร ทำไมต้องทำให้ AI พูดได้หลายภาษา
การทำ i18n ย่อมาจาก Internationalization หมายความว่าเราทำให้แอปของเราสามารถแสดงข้อมูลเป็นภาษาต่างๆ ได้ เช่น ไทย อังกฤษ จีน ญี่ปุ่น สำหรับแอปสนทนา AI นั้น การทำให้บทสนทนารองรับหลายภาษาเป็นสิ่งสำคัญมาก เพราะผู้ใช้แต่ละคนถนัดคนละภาษา
ในบทความนี้เราจะมาเรียนรู้วิธีทำให้ AI ตอบเป็นภาษาที่ผู้ใช้ต้องการ โดยใช้
HolySheep AI ซึ่งมีราคาประหยัดมาก เช่น DeepSeek V3.2 ราคาเพียง $0.42 ต่อล้านตัวอักษร ซึ่งถูกกว่าบริการอื่นถึง 85% และรองรับการตอบสนองเร็วมาก ความหน่วงน้อยกว่า 50 มิลลิวินาที
เตรียมพร้อมก่อนเริ่ม
สิ่งที่ต้องมี:
- บัญชี HolySheep AI — สมัครที่นี่ รับเครดิตฟรีเมื่อลงทะเบียน
- โปรแกรมเขียนโค้ด แนะนำ Visual Studio Code
- ความรู้พื้นฐานการใช้คอมพิวเตอร์
เมื่อสมัครเสร็จแล้ว เราจะได้ API Key มาซึ่งเป็นรหัสลับสำหรับเรียกใช้บริการ ให้เก็บไว้อย่างดี
ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่
ให้สร้างโฟลเดอร์ใหม่ชื่อ "multilingual-chat" แล้วเปิดโฟลเดอร์นั้นใน Visual Studio Code
จากนั้นสร้างไฟล์ใหม่ชื่อ "index.html" แล้วเขียนโค้ดพื้นฐานดังนี้
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แชท AI หลายภาษา</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.chat-container {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.message {
padding: 10px 15px;
margin: 10px 0;
border-radius: 10px;
}
.user-message {
background: #007bff;
color: white;
margin-left: 20%;
}
.ai-message {
background: #e9ecef;
color: #333;
margin-right: 20%;
}
.controls {
margin: 15px 0;
display: flex;
gap: 10px;
}
select, button, input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #218838;
}
</style>
</head>
<body>
<h1>💬 แชท AI หลายภาษา</h1>
<div class="controls">
<label>เลือกภาษา:</label>
<select id="languageSelect">
<option value="th">ภาษาไทย</option>
<option value="en">English</option>
<option value="zh">中文</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
</select>
<button onclick="clearChat()">ล้างแชท</button>
</div>
<div class="chat-container" id="chatContainer">
<div class="ai-message">สวัสดีครับ! ยินดีต้อนรับ ฉันพูดได้หลายภาษา เลือกภาษาที่ต้องการได้เลย</div>
</div>
<br>
<div style="display: flex;">
<input type="text" id="userInput" placeholder="พิมพ์ข้อความ..." style="flex: 1;" onkeypress="if(event.key==='Enter')sendMessage()">
<button onclick="sendMessage()">ส่ง</button>
</div>
<script>
const API_KEY = 'YOUR_HOLYSHEEP_API_KEY';
const API_URL = 'https://api.holysheep.ai/v1/chat/completions';
let selectedLanguage = 'th';
document.getElementById('languageSelect').addEventListener('change', function() {
selectedLanguage = this.value;
});
async function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (!message) return;
addMessage(message, 'user');
input.value = '';
const loadingDiv = document.createElement('div');
loadingDiv.className = 'message ai-message';
loadingDiv.textContent = 'กำลังคิด...';
document.getElementById('chatContainer').appendChild(loadingDiv);
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + API_KEY
},
body: JSON.stringify({
model: 'deepseek-v3.2',
messages: [
{
role: 'system',
content: 'คุณคือผู้ช่วย AI ที่พูดได้หลายภาษา ตอบเป็นภาษา: ' + getLanguageName(selectedLanguage) + ' เท่านั้น'
},
{
role: 'user',
content: message
}
]
})
});
loadingDiv.remove();
if (!response.ok) {
throw new Error('เกิดข้อผิดพลาด: ' + response.status);
}
const data = await response.json();
const aiResponse = data.choices[0].message.content;
addMessage(aiResponse, 'ai');
} catch (error) {
loadingDiv.remove();
addMessage('ขอโทษครับ เกิดข้อผิดพลาด: ' + error.message, 'ai');
}
}
function getLanguageName(code) {
const names = {
'th': 'ภาษาไทย',
'en': 'English',
'zh': 'ภาษาจีน',
'ja': 'ภาษาญี่ปุ่น',
'ko': 'ภาษาเกาหลี'
};
return names[code] || 'ภาษาไทย';
}
function addMessage(text, type) {
const div = document.createElement('div');
div.className = 'message ' + (type === 'user' ? 'user-message' : 'ai-message');
div.textContent = text;
document.getElementById('chatContainer').appendChild(div);
document.getElementById('chatContainer').scrollTop = 99999;
}
function clearChat() {
document.getElementById('chatContainer').innerHTML =
'<div class="ai-message">ล้างแชทแล้วครับ พิมพ์ข้อความใหม่ได้เลย</div>';
}
</script>
</body>
</html>
ขั้นตอนที่ 2: ทดสอบการทำงาน
ให้เปิดไฟล์ index.html ในเบราว์เซอร์ จะเห็นหน้าจอแชทที่มีให้เลือกภาษา 5 ภาษา ได้แก่ ไทย อังกฤษ จีน ญี่ปุ่น เกาหลี
ขั้นตอนการทดสอบ:
- เลือกภาษาที่ต้องการจาก dropdown
- พิมพ์ข้อความในช่องข้อความ เช่น "ทักทายฉันหน่อย"
- กดปุ่มส่งหรือกด Enter
- AI จะตอบเป็นภาษาที่เราเลือกไว้
ขั้นตอนที่ 3: ปรับปรุงให้รองรับการสนทนาต่อเนื่อง
โค้ดข้างบนยังส่งข้อความได้ทีละข้อความ ต่อไปเราจะปรับปรุงให้ AI จำได้ว่าเราคุยกันมาแล้วอะไรบ้าง
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แชท AI หลายภาษา - สนทนาต่อเนื่อง</title>
<style>
* { box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 700px;
margin: 0 auto;
}
h1 {
color: white;
text-align: center;
margin-bottom: 20px;
}
.chat-box {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.message {
max-width: 80%;
padding: 12px 18px;
border-radius: 15px;
line-height: 1.5;
word-wrap: break-word;
}
.user {
align-self: flex-end;
background: #007bff;
color: white;
border-bottom-right-radius: 5px;
}
.ai {
align-self: flex-start;
background: #e9ecef;
color: #333;
border-bottom-left-radius: 5px;
}
.controls {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
select, input, button {
padding: 12px 15px;
border-radius: 8px;
border: none;
font-size: 14px;
}
select {
background: white;
flex: 1;
min-width: 150px;
}
input {
flex: 3;
border: 2px solid #ddd;
}
input:focus {
outline: none;
border-color: #667eea;
}
button.send-btn {
background: #28a745;
color: white;
cursor: pointer;
flex: 1;
min-width: 80px;
}
button.send-btn:hover {
background: #218838;
}
button.clear-btn {
background: #dc3545;
color: white;
}
button.clear-btn:hover {
background: #c82333;
}
.typing {
font-style: italic;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>🌐 แชท AI หลายภาษา</h1>
<div class="chat-box" id="chatBox">
<div class="message ai">
👋 สวัสดีครับ! ผมเป็น AI ที่พูดได้หลายภาษา
เลือกภาษาที่ต้องการ แล้วเริ่มสนทนาได้เลย
</div>
</div>
<div class="controls">
<select id="langSelect">
<option value="th">🇹🇭 ภาษาไทย</option>
<option value="en">🇺🇸 English</option>
<option value="zh">🇨🇳 中文</option>
<option value="ja">🇯🇵 日本語</option>
<option value="ko">🇰🇷 한국어</option>
</select>
<input type="text" id="msgInput" placeholder="พิมพ์ข้อความ..." autocomplete="off">
<button class="send-btn" onclick="sendMessage()">ส่ง</button>
<button class="clear-btn" onclick="clearHistory()">ล้าง</button>
</div>
</div>
<script>
const API_KEY = 'YOUR_HOLYSHEEP_API_KEY';
const API_URL = 'https://api.holysheep.ai/v1/chat/completions';
// เก็บประวัติการสนทนาไว้ใน Array
let conversationHistory = [];
// ภาษาที่รองรับพร้อมคำอธิบายสำหรับ AI
const languages = {
'th': { name: 'ภาษาไทย', instruction: 'ตอบเป็นภาษาไทยทั้งหมด' },
'en': { name: 'English', instruction: 'Respond in English only' },
'zh': { name: '中文', instruction: '请用中文回答' },
'ja': { name: '日本語', instruction: '日本語で答えてください' },
'ko': { name: '한국어', instruction: '한국어로 답해주세요' }
};
const langSelect = document.getElementById('langSelect');
const msgInput = document.getElementById('msgInput');
const chatBox = document.getElementById('chatBox');
langSelect.addEventListener('change', () => {
const lang = languages[langSelect.value];
addMessage(🔄 เปลี่ยนเป็น${lang.name}แล้ว, 'system');
});
msgInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
async function sendMessage() {
const text = msgInput.value.trim();
if (!text) return;
addMessage(text, 'user');
msgInput.value = '';
// เพิ่มข้อความ "กำลังพิมพ์..."
const typingDiv = document.createElement('div');
typingDiv.className = 'message ai typing';
typingDiv.textContent = 'กำลังคิด... ⏳';
chatBox.appendChild(typingDiv);
chatBox.scrollTop = chatBox.scrollHeight;
try {
// สร้าง System Message ตามภาษาที่เลือก
const currentLang = languages[langSelect.value];
const systemMessage = {
role: 'system',
content: `คุณคือผู้ช่วย AI ที่เป็นมิตร ${currentLang.instruction}
ตอบคำถามอย่างเป็นประโยชน์และให้ข้อมูลที่ถูกต้อง`
};
// แปลงประวัติการสนทนาเป็นรูปแบบ messages
const messages = [
systemMessage,
...conversationHistory,
{ role: 'user', content: text }
];
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + API_KEY
},
body: JSON.stringify({
model: 'deepseek-v3.2',
messages: messages
})
});
typingDiv.remove();
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error?.message || 'เกิดข้อผิดพลาด รหัส: ' + response.status);
}
const data = await response.json();
const aiReply = data.choices[0].message.content;
addMessage(aiReply, 'ai');
// เก็บประวัติการสนทนา (เก็บได้สูงสุด 20 ข้อความ)
conversationHistory.push({ role: 'user', content: text });
conversationHistory.push({ role: 'assistant', content: aiReply });
if (conversationHistory.length > 40) {
conversationHistory = conversationHistory.slice(-40);
}
} catch (error) {
typingDiv.remove();
addMessage('❌ เกิดข้อผิดพลาด: ' + error.message, 'error');
}
}
function addMessage(text, type) {
const div = document.createElement('div');
div.className = 'message ' + type;
div.textContent = text;
chatBox.appendChild(div);
chatBox.scrollTop = chatBox.scrollHeight;
}
function clearHistory() {
if (confirm('ต้องการล้างประวัติการสนทนาทั้งหมด?')) {
conversationHistory = [];
chatBox.innerHTML = `
<div class="message ai">
✅ ล้างประวัติแล้ว เริ่มสนทนาใหม่ได้เลย
</div>
`;
}
}
</script>
</body>
</html>
ขั้นตอนที่ 4: ทดสอบการสนทนาต่อเนื่อง
หลังจากบันทึกและเปิดไฟล์ใหม่ในเบราว์เซอร์ ให้ลองทดสอบดังนี้:
- พิมพ์ว่า "ฉันชื่อมาร์ค อายุ 25 ปี" แล้วส่ง
- ถามต่อว่า "ฉันอายุเท่าไหร่?"
- AI ควรจำได้ว่าคุณชื่อมาร์ค อายุ 25 ปี
- ลองเปลี่ยนภาษาเป็น English แล้วถามว่า "What is my name?"
นี่คือพลังของการเก็บ conversationHistory ที่ทำให้ AI จำบทสนทนาก่อนหน้าได้
ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข
กรณีที่ 1: แสดงข้อผิดพลาด CORS Policy
Access to fetch at 'https://api.holysheep.ai/v1/chat/completions'
from origin 'null' has been blocked by CORS policy
วิธีแก้ไข: ปัญหานี้เกิดจากการเปิดไฟล์ HTML โดยตรง (file://) ให้ใช้ Local Server แทน
# วิธีที่ 1: ใช้ Python (มีอยู่ในเครื่องแล้ว)
cd โฟลเดอร์ที่มีไฟล์
python -m http.server 8000
วิธีที่ 2: ใช้ Node.js (ถ้ามี)
npx serve .
หลังจากนั้นเปิด http://localhost:8000 หรือ http://localhost:3000
กรณีที่ 2: แสดงข้อผิดพลาด 401 Unauthorized
{"error":{"message":"Invalid API key","type":"invalid_request_error"}}
วิธีแก้ไข: API Key ไม่ถูกต้องหรือหมดอายุ ให้ตรวจสอบดังนี้
// ตรวจสอบว่า API Key ถูกต้อง
const API_KEY = 'YOUR_HOLYSHEEP_API_KEY'; // แทนที่ด้วย Key จริง
// วิธีตรวจสอบ API Key:
// 1. ไปที่ https://www.holysheep.ai/register
// 2. ดู API Key ในหน้า Dashboard
// 3. คัดลอกและวางแทน YOUR_HOLYSHEEP_API_KEY
// ห้ามมีช่องว่างหรือเครื่องหมาย " ติดกับ Key
กรณีที่ 3: AI ตอบเป็นภาษาที่ไม่ตรงกับที่เลือก
// ปัญหา: เลือกภาษาไทยแต่ AI ตอบเป็นอังกฤษ
// วิธีแก้ไข: เพิ่มความเฉพาะเจาะจงใน System Message
const currentLang = languages[langSelect.value];
const systemMessage = {
role: 'system',
content: `คุณคือผู้ช่วย AI
คุณต้องตอบเป็น${currentLang.name}เท่านั้น
ห้ามตอบเป็นภาษาอื่นเด็ดขาด
ถ้าผู้ใช้ถามเป็นภาษาอื่น ให้แปลคำถามเป็น${currentLang.name}แล้วตอบ`
};
กรณีที่ 4: ความหน่วงสูงหรือโหลดช้า
// ปัญหา: รอนานเกินไป (>3 วินาที)
// วิธีแก้ไข: เปลี่ยนโมเดลเป็นตัวที่เร็วกว่า
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + API_KEY
},
body: JSON.stringify({
model: 'deepseek-v3.2', // โมเดลเร็วและถูก
// model: 'gpt-4.1', // โมเดลฉลาดกว่าแต่แพงกว่า
messages: messages,
temperature: 0.7,
max_tokens: 500 // จำกัดความยาวคำตอบ
})
});
// HolySheep รองรับ:
// - deepseek-v3.2: $0.42/MTok (เร็วมาก <50ms)
// - gemini-2.5-flash: $2.50/MTok (เร็ว)
// - claude-sonnet-4.5: $15/MTok (ฉลาดมาก)
สรุป
ในบทความนี้เราได้เรียนรู้วิธีสร้างแอปสนทนา AI หลายภาษาที่ทำงานได้จริง โดยใช้หลักการ i18n กับการทำให้ API ตอบเป็นภาษาท้องถิ่น ซึ่งประกอบด้วย:
- ก
แหล่งข้อมูลที่เกี่ยวข้อง
บทความที่เกี่ยวข้อง