Dify 国际化配置：多语言界面支持完整攻略

ในโปรเจกต์ล่าสุดที่ผมทำงานกับ Dify ซึ่งเป็นแพลตฟอร์ม LLM Application ยอดนิยม พบปัญหาที่ทำให้เสียเวลาหลายชั่วโมงกว่าจะแก้ได้ นั่นคือเมื่อต้องการสร้างแชทบอทที่รองรับผู้ใช้หลายภาษา ระบบแสดงผลภาษาอังกฤษตลอดแม้ว่าจะตั้งค่า locale เป็นภาษาจีนหรือญี่ปุ่นแล้ว สถานการณ์นี้เกิดจากการตั้งค่า i18n ที่ไม่ถูกต้องและขาดการกำหนด fallback language ทำให้แอปพลิเคชันไม่สามารถโหลดไฟล์แปลที่เหมาะสมได้

Dify คืออะไรและทำไมต้องทำ Internationalization

Dify เป็นแพลตฟอร์ม Open Source สำหรับสร้าง LLM Application ที่รองรับการทำงานหลายรูปแบบ ไม่ว่าจะเป็น Chatbot, AI Agent หรือ Workflow Automation การทำ Internationalization (i18n) จะช่วยให้แอปพลิเคชันของคุณเข้าถึงผู้ใช้ทั่วโลกได้มากขึ้น โดยรองรับการแสดงผล Interface เป็นภาษาท้องถิ่น การจัดการวันที่ เวลา และสกุลเงินให้ถูกต้องตามมาตรฐานสากล รวมถึงการปรับทิศทางข้อความสำหรับภาษาที่เขียนจากขวาไปซ้าย

การตั้งค่า Multi-language ใน Dify

1. การติดตั้งและ Configuration

ขั้นตอนแรกคือการตั้งค่า environment variables สำหรับระบบ Internationalization ในไฟล์ .env ของ Dify

# Dify Internationalization Configuration
กำหนดภาษาเริ่มต้นของระบบ
DEFAULT_LANGUAGE=th

รายการภาษาที่รองรับ
SUPPORTED_LANGS=en,zh,ja,ko,th,vi,id,ms

ภาษาสำรองเมื่อไม่พบ key ในไฟล์แปล
FALLBACK_LANGUAGE=en

เปิดใช้งาน Auto-detection จาก Browser
AUTO_DETECT_LANGUAGE=true

เปิดใช้งาน RTL Support สำหรับภาษาอารบิกและฮีบรู
RTL_SUPPORT=true

2. การสร้าง Translation Files

สร้างโครงสร้างโฟลเดอร์สำหรับเก็บไฟล์แปลใน Dify โดยต้องจัดเรียงตามมาตรฐาน i18n

# โครงสร้างโฟลเดอร์สำหรับ Translation Files
dify/
└── web/
    └── i18n/
        ├── lang/
        │   ├── en.json          # ภาษาอังกฤษ (Base)
        │   ├── th.json          # ภาษาไทย
        │   ├── zh.json          # ภาษาจีนตัวย่อ
        │   ├── zh-TW.json       # ภาษาจีนตัวเต็ม
        │   ├── ja.json          # ภาษาญี่ปุ่น
        │   └── ko.json          # ภาษาเกาหลี
        └── index.ts             # Export translations

3. ตัวอย่างโค้ดการใช้งาน i18n กับ HolySheep AI

ผมใช้ HolySheep AI เป็น API Gateway สำหรับโปรเจกต์ Dify เพราะราคาประหยัดมากเหมาะกับการพัฒนาและ Production ระบบมีความเร็วต่ำกว่า 50ms รองรับ WeChat และ Alipay พร้อมเครดิตฟรีเมื่อลงทะเบียน คุณสามารถ สมัครที่นี่ เพื่อเริ่มใช้งานได้เลย

import fetch from 'node-fetch';

// HolySheep AI Configuration
const HOLYSHEEP_CONFIG = {
    base_url: 'https://api.holysheep.ai/v1',
    api_key: 'YOUR_HOLYSHEEP_API_KEY'
};

// ราคา HolySheep AI 2026 (per 1M Tokens)
const PRICING = {
    'gpt-4.1': 8.00,           // $8.00/M tokens
    'claude-sonnet-4.5': 15.00, // $15.00/M tokens
    'gemini-2.5-flash': 2.50,   // $2.50/M tokens
    'deepseek-v3.2': 0.42       // $0.42/M tokens (ประหยัด 85%+)
};

// Multi-language prompt templates
const PROMPT_TEMPLATES = {
    th: {
        system: 'คุณเป็นผู้ช่วย AI ที่ตอบสนองเป็นภาษาไทยอย่างเป็นธรรมชาติ',
        greeting: 'สวัสดีครับ/ค่ะ มีอะไรให้ช่วยไหม?'
    },
    en: {
        system: 'You are an AI assistant responding in natural English',
        greeting: 'Hello! How can I help you today?'
    },
    zh: {
        system: '你是一個用自然中文回覆的AI助手',
        greeting: '你好！請問有什麼可以幫助你的嗎？'
    },
    ja: {
        system: 'あなたは自然な日本語で応答するAIアシスタントです',
        greeting: 'こんにちは！何かお手伝いできることはありますか？'
    }
};

// ฟังก์ชันส่งข้อความพร้อมกับ multi-language support
async function sendChatMessage(messages, language = 'en') {
    const template = PROMPT_TEMPLATES[language] || PROMPT_TEMPLATES['en'];
    
    const systemMessage = {
        role: 'system',
        content: template.system
    };
    
    const fullMessages = [systemMessage, ...messages];
    
    const response = await fetch(${HOLYSHEEP_CONFIG.base_url}/chat/completions, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': Bearer ${HOLYSHEEP_CONFIG.api_key}
        },
        body: JSON.stringify({
            model: 'gpt-4.1',
            messages: fullMessages,
            temperature: 0.7,
            max_tokens: 2000
        })
    });
    
    if (!response.ok) {
        const errorData = await response.json();
        throw new Error(API Error: ${response.status} - ${errorData.error?.message || 'Unknown error'});
    }
    
    const data = await response.json();
    return {
        content: data.choices[0].message.content,
        model: data.model,
        usage: data.usage,
        cost: calculateCost(data.usage.total_tokens, 'gpt-4.1')
    };
}

// คำนวณค่าใช้จ่าย
function calculateCost(tokens, model) {
    const pricePerMillion = PRICING[model] || 8.00;
    return ((tokens / 1000000) * pricePerMillion).toFixed(4);
}

// ตัวอย่างการใช้งาน
(async () => {
    try {
        const messages = [
            { role: 'user', content: 'อธิบายเกี่ยวกับ Dify' }
        ];
        
        const result = await sendChatMessage(messages, 'th');
        console.log('Response:', result.content);
        console.log('Cost:', $${result.cost});
        console.log('Latency:', result.latency, 'ms');
    } catch (error) {
        console.error('Error:', error.message);
    }
})();

4. การ Implement i18n ใน Frontend

// i18n-manager.ts - ระบบจัดการภาษาสำหรับ Dify Interface

interface TranslationStrings {
    [key: string]: {
        [lang: string]: string;
    };
}

class I18nManager {
    private currentLang: string = 'en';
    private translations: TranslationStrings;
    private fallbackLang: string = 'en';
    
    constructor() {
        this.translations = this.loadTranslations();
        this.initLanguageFromBrowser();
    }
    
    private loadTranslations(): TranslationStrings {
        return {
            // Navigation
            'nav.home': { en: 'Home', th: 'หน้าแรก', zh: '首页', ja: 'ホーム' },
            'nav.chat': { en: 'Chat', th: 'แชท', zh: '聊天', ja: 'チャット' },
            'nav.settings': { en: 'Settings', th: 'ตั้งค่า', zh: '设置', ja: '設定' },
            
            // Common actions
            'action.send': { en: 'Send', th: 'ส่ง', zh: '发送', ja: '送信' },
            'action.cancel': { en: 'Cancel', th: 'ยกเลิก', zh: '取消', ja: 'キャンセル' },
            'action.save': { en: 'Save', th: 'บันทึก', zh: '保存', ja: '保存' },
            
            // Error messages
            'error.connection': { en: 'Connection error', th: 'เกิดข้อผิดพลาดในการเชื่อมต่อ', zh: '连接错误', ja: '接続エラー' },
            'error.timeout': { en: 'Request timeout', th: 'คำขอหมดเวลา', zh: '请求超时', ja: 'リクエストタイムアウト' },
            'error.api_key': { en: 'Invalid API key', th: 'API Key ไม่ถูกต้อง', zh: 'API密钥无效', ja: 'APIキーが無効です' },
            
            // Dify specific
            'dify.model.select': { en: 'Select Model', th: 'เลือกโมเดล', zh: '选择模型', ja: 'モデルを選択' },
            'dify.workflow.run': { en: 'Run Workflow', th: 'รัน Workflow', zh: '运行工作流', ja: 'ワークフローを実行' },
            'dify.prompt.template': { en: 'Prompt Template', th: 'แม่แบบ Prompt', zh: '提示词模板', ja: 'プロンプトテンプレート' }
        };
    }
    
    private initLanguageFromBrowser(): void {
        const browserLang = navigator.language.split('-')[0];
        const supportedLangs = ['en', 'th', 'zh', 'ja', 'ko'];
        
        if (supportedLangs.includes(browserLang)) {
            this.currentLang = browserLang;
        }
        
        // ตรวจสอบ localStorage สำหรับ user preference
        const savedLang = localStorage.getItem('dify_language');
        if (savedLang && supportedLangs.includes(savedLang)) {
            this.currentLang = savedLang;
        }
    }
    
    public t(key: string, params?: Record): string {
        const translation = this.translations[key];
        
        if (!translation) {
            console.warn(Translation missing for key: ${key});
            return key;
        }
        
        let text = translation[this.currentLang] || translation[this.fallbackLang] || key;
        
        // แทนที่ parameters
        if (params) {
            Object.entries(params).forEach(([paramKey, value]) => {
                text = text.replace(new RegExp({{${paramKey}}}, 'g'), value);
            });
        }
        
        return text;
    }
    
    public setLanguage(lang: string): void {
        if (['en', 'th', 'zh', 'ja', 'ko'].includes(lang)) {
            this.currentLang = lang;
            localStorage.setItem('dify_language', lang);
            document.documentElement.lang = lang;
            this.emitLanguageChange();
        }
    }
    
    public getCurrentLanguage(): string {
        return this.currentLang;
    }
    
    public getSupportedLanguages(): string[] {
        return ['en', 'th', 'zh', 'ja', 'ko'];
    }
    
    private emitLanguageChange(): void {
        window.dispatchEvent(new CustomEvent('languageChanged', {
            detail: { language: this.currentLang }
        }));
    }
}

// Singleton instance
export const i18n = new I18nManager();

5. React Component สำหรับ Language Switcher

import React, { useState, useEffect } from 'react';
import { i18n } from './i18n-manager';

const LanguageSwitcher: React.FC = () => {
    const [currentLang, setCurrentLang] = useState(i18n.getCurrentLanguage());
    
    const languages = [
        { code: 'en', name: 'English', flag: '🇺🇸' },
        { code: 'th', name: 'ภาษาไทย', flag: '🇹🇭' },
        { code: 'zh', name: '中文', flag: '🇨🇳' },
        { code: 'ja', name: '日本語', flag: '🇯🇵' },
        { code: 'ko', name: '한국어', flag: '🇰🇷' }
    ];
    
    useEffect(() => {
        const handleLanguageChange = (e: CustomEvent) => {
            setCurrentLang(e.detail.language);
        };
        
        window.addEventListener('languageChanged', handleLanguageChange as EventListener);
        return () => {
            window.removeEventListener('languageChanged', handleLanguageChange as EventListener);
        };
    }, []);
    
    const handleChange = (langCode: string) => {
        i18n.setLanguage(langCode);
        setCurrentLang(langCode);
    };
    
    return (
        <div className="language-switcher">
            <label className="language-label">
                {i18n.t('settings.language')}
            </label>
            <div className="language-options">
                {languages.map(lang => (
                    <button
                        key={lang.code}
                        className={lang-btn ${currentLang === lang.code ? 'active' : ''}}
                        onClick={() => handleChange(lang.code)}
                        title={lang.name}
                    >
                        <span className="flag">{lang.flag}</span>
                        <span className="lang-name">{lang.name}</span>
                    </button>
                ))}
            </div>
        </div>
    );
};

// Component สำหรับแชทบอทที่รองรับหลายภาษา
const MultiLanguageChat: React.FC = () => {
    const [message, setMessage] = useState('');
    const [responses, setResponses] = useState<Array<{role: string, content: string}>>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    
    const currentLang = i18n.getCurrentLanguage();
    
    const handleSend = async () => {
        if (!message.trim()) return;
        
        setIsLoading(true);
        setError(null);
        
        const userMessage = { role: 'user', content: message };
        setResponses(prev => [...prev, userMessage]);
        setMessage('');
        
        try {
            const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'
                },
                body: JSON.stringify({
                    model: 'gpt-4.1',
                    messages: [
                        { role: 'system', content: Respond in ${currentLang} language. },
                        ...responses,
                        userMessage
                    ]
                })
            });
            
            if (!response.ok) {
                throw new Error(HTTP ${response.status}: ${response.statusText});
            }
            
            const data = await response.json();
            setResponses(prev => [...prev, {
                role: 'assistant',
                content: data.choices[0].message.content
            }]);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'Unknown error occurred');
        } finally {
            setIsLoading(false);
        }
    };
    
    return (
        <div className="chat-container">
            <div className="chat-header">
                <h3>{i18n.t('nav.chat')}</h3>
                <LanguageSwitcher />
            </div>
            
            <div className="chat-messages">
                {responses.map((msg, idx) => (
                    <div key={idx} className={message ${msg.role}}>
                        {msg.content}
                    </div>
                ))}
                {isLoading && <div className="loading">...</div>}
                {error && <div className="error">{error}</div>}
            </div>
            
            <div className="chat-input">
                <input
                    type="text"
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    placeholder={i18n.t('chat.placeholder')}
                    onKeyPress={(e) => e.key === 'Enter' && handleSend()}
                />
                <button onClick={handleSend} disabled={isLoading}>
                    {i18n.t('action.send')}
                </button>
            </div>
        </div>
    );
};

export default MultiLanguageChat;

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

กรณีที่ 1: Translation Key ไม่พบ (Key Not Found)

// ❌ วิธีที่ผิด - ไม่มี fallback
const template = translations[key]; // Error: Cannot read property 'en' of undefined

// ✅ วิธีที่ถูกต้อง - มี fallback
const template = translations[key] || { en: key, th: key, zh: key, ja: key };
const text = template[currentLang] || template['en'] || key;

กรณีที่ 2: Locale Detection ผิดพลาด

// ❌ วิธีที่ผิด - ไม่ตรวจสอบ supported languages
const browserLang = navigator.language; // "th-TH" ไม่ match กับ "th"

// ✅ วิธีที่ถูกต้อง - Extract base language และ validate
const browserLang = navigator.language.split('-')[0];
const supportedLangs = ['en', 'th', 'zh', 'ja', 'ko', 'vi', 'id', 'ms'];
if (!supportedLangs.includes(browserLang)) {
    browserLang = 'en'; // Fallback to English
}

กรณีที่ 3: API Timeout และ Rate Limiting

// ❌ วิธีที่ผิด - ไม่มี retry logic
const response = await fetch(url, { method: 'POST', ... });

// ✅ วิธีที่ถูกต้อง - มี exponential backoff retry
async function fetchWithRetry(url: string, options: RequestInit, maxRetries = 3) {
    for (let attempt = 0; attempt < maxRetries; attempt++) {
        try {
            const response = await fetch(url, {
                ...options,
                signal: AbortSignal.timeout(30000) // 30 second timeout
            });
            
            if (response.status === 429) {
                // Rate limited - wait and retry
                const retryAfter = parseInt(response.headers.get('Retry-After') || '5');
                await new Promise(r => setTimeout(r, retryAfter * 1000));
                continue;
            }
            
            return response;
        } catch (error) {
            if (attempt === maxRetries - 1) throw error;
            
            // Exponential backoff: 1s, 2s, 4s
            await new Promise(r => setTimeout(r, Math.pow(2, attempt) * 1000));
        }
    }
}

// ใช้งาน
const response = await fetchWithRetry(
    'https://api.holysheep.ai/v1/chat/completions',
    {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer YOUR_HOLYSHEEP_API_KEY'
        },
        body: JSON.stringify({ model: 'gpt-4.1', messages })
    }
);

Best Practices สำหรับ Dify i18n

• ใช้ Key ที่มีความหมาย: ตั้งชื่อ translation key ให้สื่อความหมาย เช่น "error.connection.timeout" แทน "e1"
• จัดกลุ่ม Translation: แบ่งตาม module เช่น common.*, chat.*, settings.* จะทำให้หา key ได้ง่าย
• Test ทุกภาษา: ตรวจสอบว่าข้อความไม่ตัดขอบเมื่อแปลเป็นภาษาต่างๆ โดยเฉพาะภาษาเยอรมันที่มักยาวกว่าภาษาอื่น
• เตรียม Budget: การทำ i18n ต้องใช้ API calls มากขึ้น ควรใช้ HolySheep AI ที่มีราคาประหยัด เช่น DeepSeek V3.2 เพียง $0.42 ต่อล้าน tokens

สรุป

การทำ Internationalization สำหรับ Dify ไม่ใช่เรื่องยากหากเข้าใจหลักการพื้นฐานของ i18n ซึ่งประกอบด้วยการตั้งค่า environment variables ที่ถูกต้อง การจัดเก็บ translation files อย่างเป็นระบบ การ implement fallback logic และการจัดการ error cases ที่อาจเกิดขึ้น สำหรับการใช้งานจริงใน Production ผมแนะนำให้ใช้ HolySheep AI เป็น API Provider เพราะมีความเร็วต่ำกว่า 50ms รองรับหลายโมเดลทั้ง GPT-4.1, Claude Sonnet 4.5, Gemini 2.5 Flash และ DeepSeek V3.2 พร้อมราคาที่ประหยัดมากกว่า 85% เมื่อเทียบกับบริการอื่น

👉 สมัคร HolySheep AI — รับเครดิตฟรีเมื่อลงทะเบียน