Бұл жазба автоматты түрде аударылған. Бастапқы тіл: Орысша
Цифрлық дәуірде мәтінді сөйлеуге түрлендіру (Text-To-Speech, TTS) сұранысқа ие бола бастады. Бұл, әсіресе, мемлекеттік қазақ тілін де, орыс тілін де қолдауды қамтамасыз ету маңызды Қазақстан сияқты көптілді елдер үшін өзекті. Бұл мақалада біз OpenAI API және Next көмегімен заманауи TTS веб-қосымшасын құру процесін қарастырамыз.js.
OpenAI Speech API бірнеше негізгі артықшылықтарды ұсынады:
- Табиғи дыбыспен сөйлеу синтезінің Жоғары сапасы
- Қазақ және орыс тілдерін қоса алғанда, көптілді қолдау
- Дауыстардың әртүрлілігі (6 түрлі нұсқа)
- Жылдамдық пен Шығыс форматының икемді параметрлері
- REST API арқылы қарапайым интеграция
Біздің қосымшамыз заманауи технологиялар стегіне негізделген:
- Next.серверді көрсету үшін App Router көмегімен js 15
- Қауіпсіздік үшін TypeScript
- Сәндеуге арналған Tailwind CSS
- Күйді басқаруға арналған React Hooks
- Next.сұрауларды өңдеуге арналған JS API Routes
- Speech API интеграциясы үшін OpenAI SDK
- Қателерді өңдеу және деректерді тексеру
Қосымша әртүрлі тілдердегі мәтіндермен жұмыс істейді, бұл Қазақстан үшін ерекше маңызды:
/ / Қазақ мәтінін өңдеу мысалы
const kazakhText = " Сәлеметсіз бе! Бұл қазақ
тіліндегі нәтиже." ;
const russianText = " Сәлем! Бұл мәтін
орыс тілінде." ;Пайдаланушылар 6 түрлі OpenAI дауысын таңдай алады:
- Alloy-бейтарап дауыс
- Эхо-ер адамның дауысы
- Fable-британдық акцентпен
- Onyx-глубок терең дауысы
- Nova - әйел дауысы
- Shimmer-жұмсақ әйел дауысы
Біздің қосымшаның бірегей ерекшелігі-интонация мен сөйлеу мәнерін теңшеу мүмкіндігі:
const intonationMap = {
'excited': 'Speak with excitement and enthusiasm: ',
'calm': 'Speak calmly and peacefully: ',
'serious': 'Speak seriously and formally: ',
// ... басқа опциялар
};Сұраныстарды өңдеудің негізгі логикасы / api/TTS/route.ts:
export async function POST(request: NextRequest) {
const { text, voice, speed, format, model, intonation, speechStyle, apiKey } = await request.json();
// Деректерді тексеру
if (!apiKey || !text) {
return NextResponse.json ({ қате: 'деректер жеткіліксіз'}, { күй: 400 });
}
// Жақсартылған өнеркәсіптік өнімді құру
let enhancedText = text;
if (intonation !== 'neutral') {
enhancedText = intonationMap[intonation] + text;
}
// Аудио құру
const mp3 = await openai.audio.speech.create({
model: model || 'tts-1',
voice: voice || 'alloy',
input: enhancedText,
speed: speed || 1.0,
response_format: format || 'mp3',
});
return new NextResponse(Buffer.from(await mp3.arrayBuffer()));
}Интерфейс React компоненттері мен Tailwind CSS көмегімен жасалған:
export default function Home() {
const [text, setText] = useState('');
const [voice, setVoice] = useState('alloy');
const [speed, setSpeed] = useState(1.0);
// ... басқа жағдайлар
const handleGenerate = async () => {
const response = await fetch('/api/tts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, voice, speed, format, model, intonation, speechStyle, apiKey })
});
if (response.ok) {
const audioBlob = await response.blob();
const url = URL.createObjectURL(audioBlob);
setAudioUrl(url);
}
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
{/*UI компоненттері */}
</div>
);
}Ешқашан сақтамау маңызды API кілттер кодта:
/ / ❌ Қате
const apiKey = 'sk-proj-...';
// ✅ Дұрыс
const [apiKey, setApiKey] = useState('');Барлық кіріс деректері тексерілуі керек:
if (!apiKey) {
return NextResponse.json ({ error: 'API кілті қажет'}, { status: 400 });
}
if (!text) {
return NextResponse.json ({ қате: 'Мәтін міндетті'}, { күй: 400 });
}Әр түрлі қателерді өңдеу қарастырылған:
try {
const mp3 = await openai.audio.speech.create({...});
// ...
} catch (error: any) {
console.error('TTS Error:', error);
return NextResponse.json(
{ error: error.message / / 'аудио жасау кезінде қате'},
{ status: 500 }
);
}Next.turbopack көмегімен js 15 жылдам құрастыруды және ыстық қайта жүктеуді қамтамасыз етеді.
Аудио файлдар тек Пайдаланушының сұранысы бойынша жасалады.
Браузер автоматты түрде жасалған аудио файлдарды кэштейді.
Бір команданың қарапайым орналастыруы:
npm run build
# Git интеграциясы арқылы автоматты депляцияnpm run build
npm start- 1.Айтылымды дәлірек бақылау үшін ssml қолдауы
- 2.Ұзын мәтіндерге арналған пакеттік өңдеу
- 3.Тарихты сақтау үшін мәліметтер базасымен Интеграция
- 4.Пайдаланушының аутентификациясы
- 5.Қосымша тілдерді қолдау
OpenAI API көмегімен заманауи TTS қосымшасын құру заманауи веб-технологиялардың күшін көрсетеді. Келесі Комбинациясы.js, TypeScript және OpenAI Speech API сізге аз күш жұмсай отырып, жоғары сапалы қосымшалар жасауға мүмкіндік береді.
Мұндай шешімдердің цифрландыруға және Қазақстан сияқты көптілді елдер үшін өзекті болып табылатын ұлттық тілдердегі контенттің қолжетімділігіне ықпал ететіні ерекше маңызды.
Жоба заманауи веб-дамудың ең жақсы тәжірибелерін көрсетеді: типтік қауіпсіздік, компоненттік архитектура, API қауіпсіздігі және пайдаланушыға ыңғайлы интерфейс.
Жобаның толық бастапқы коды GitHub сайтында егжей-тегжейлі құжаттамамен және орналастыру нұсқауларымен қол жетімді.
https://github.com/AubakirovArman/ttskazakh
!
В эпоху цифровых технологий преобразование текста в речь (Text-to-Speech, TTS) становится все более востребованным. Особенно актуально это для многоязычных стран, таких как Казахстан, где важно обеспечить поддержку как государственного казахского языка, так и русского. В этой статье мы рассмотрим процесс создания современного веб-приложения для TTS с использованием OpenAI API и Next.js.
OpenAI Speech API предлагает несколько ключевых преимуществ:
- Высокое качество синтеза речи с естественным звучанием
- Многоязычная поддержка, включая казахский и русский языки
- Разнообразие голосов (6 различных вариантов)
- Гибкие настройки скорости и формата вывода
- Простая интеграция через REST API
Наше приложение построено на современном стеке технологий:
- Next.js 15 с App Router для серверного рендеринга
- TypeScript для типобезопасности
- Tailwind CSS для стилизации
- React Hooks для управления состоянием
- Next.js API Routes для обработки запросов
- OpenAI SDK для интеграции с Speech API
- Обработка ошибок и валидация данных
Приложение работает с текстами на различных языках, что особенно важно для Казахстана:
// Пример обработки казахского текста
const kazakhText = "Сәлеметсіз бе! Бұл қазақ
тіліндегі мәтін." ;
const russianText = "Привет! Это текст на
русском языке." ;Пользователи могут выбирать из 6 различных голосов OpenAI:
- Alloy - нейтральный голос
- Echo - мужской голос
- Fable - с британским акцентом
- Onyx - глубокий мужской голос
- Nova - женский голос
- Shimmer - мягкий женский голос
Уникальная особенность нашего приложения - возможность настройки интонации и стиля речи:
const intonationMap = {
'excited': 'Speak with excitement and enthusiasm: ',
'calm': 'Speak calmly and peacefully: ',
'serious': 'Speak seriously and formally: ',
// ... другие варианты
};Основная логика обработки запросов находится в /api/tts/route.ts:
export async function POST(request: NextRequest) {
const { text, voice, speed, format, model, intonation, speechStyle, apiKey } = await request.json();
// Валидация данных
if (!apiKey || !text) {
return NextResponse.json({ error: 'Недостаточно данных' }, { status: 400 });
}
// Создание улучшенного промпта
let enhancedText = text;
if (intonation !== 'neutral') {
enhancedText = intonationMap[intonation] + text;
}
// Генерация аудио
const mp3 = await openai.audio.speech.create({
model: model || 'tts-1',
voice: voice || 'alloy',
input: enhancedText,
speed: speed || 1.0,
response_format: format || 'mp3',
});
return new NextResponse(Buffer.from(await mp3.arrayBuffer()));
}Интерфейс построен с использованием React компонентов и Tailwind CSS:
export default function Home() {
const [text, setText] = useState('');
const [voice, setVoice] = useState('alloy');
const [speed, setSpeed] = useState(1.0);
// ... другие состояния
const handleGenerate = async () => {
const response = await fetch('/api/tts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, voice, speed, format, model, intonation, speechStyle, apiKey })
});
if (response.ok) {
const audioBlob = await response.blob();
const url = URL.createObjectURL(audioBlob);
setAudioUrl(url);
}
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
{/* UI компоненты */}
</div>
);
}Важно никогда не хранить API ключи в коде:
// ❌ Неправильно
const apiKey = 'sk-proj-...';
// ✅ Правильно
const [apiKey, setApiKey] = useState('');Все входящие данные должны проверяться:
if (!apiKey) {
return NextResponse.json({ error: 'API ключ обязателен' }, { status: 400 });
}
if (!text) {
return NextResponse.json({ error: 'Текст обязателен' }, { status: 400 });
}Предусмотрена обработка различных типов ошибок:
try {
const mp3 = await openai.audio.speech.create({...});
// ...
} catch (error: any) {
console.error('TTS Error:', error);
return NextResponse.json(
{ error: error.message || 'Ошибка при генерации аудио' },
{ status: 500 }
);
}Next.js 15 с Turbopack обеспечивает быструю сборку и горячую перезагрузку.
Аудио файлы создаются только по запросу пользователя.
Браузер автоматически кэширует сгенерированные аудио файлы.
Простое развертывание одной командой:
npm run build
# Автоматический деплой через Git интеграциюnpm run build
npm start- 1.Поддержка SSML для более точного контроля произношения
- 2.Пакетная обработка для длинных текстов
- 3.Интеграция с базой данных для сохранения истории
- 4.Аутентификация пользователей
- 5.Поддержка дополнительных языков
Создание современного TTS приложения с OpenAI API демонстрирует мощь современных веб-технологий. Комбинация Next.js, TypeScript и OpenAI Speech API позволяет создавать высококачественные приложения с минимальными усилиями.
Особенно важно, что такие решения способствуют цифровизации и доступности контента на национальных языках, что актуально для многоязычных стран как Казахстан.
Проект демонстрирует лучшие практики современной веб-разработки: типобезопасность, компонентную архитектуру, безопасность API и удобный пользовательский интерфейс.
Полный исходный код проекта доступен на GitHub с подробной документацией и инструкциями по развертыванию.
https://github.com/AubakirovArman/ttskazakh
!
Бөлісу
