DeepLearining

Facebook MMS 모델로 한국어 TTS 웹 서비스 개발하기

Pro.Dev 2025. 3. 8. 14:13
반응형

Facebook MMS 모델로 한국어 TTS 웹 서비스 개발하기

안녕하세요! 이번 글에서는 Facebook의 Massively Multilingual Speech (MMS) 프로젝트의 한국어 TTS 모델을 활용하여 텍스트를 자연스러운 한국어 음성으로 변환해주는 웹 서비스를 개발하는 방법을 알려드리겠습니다. 최신 LLM 기술과 허깅페이스의 모델을 활용하여 누구나 쉽게 따라할 수 있도록 설명해 드리겠습니다. 허깅페이스와 같은 AI 플랫폼에서 제공하는 최신 모델을 활용하면, 복잡한 딥러닝 모델을 직접 구현하지 않고도 고품질의 AI 서비스를 쉽게 개발할 수 있습니다.

 

서비스 시연 영상 확인하기~ : https://youtu.be/WL7Y5N-3qKs

프로젝트 개요

이 프로젝트는 텍스트를 입력하면 자연스러운 한국어 음성으로 변환해주는 웹 서비스입니다. 주요 기능은 다음과 같습니다:

  • 텍스트를 고품질 한국어 음성으로 변환
  • 생성된 음성 파일 다운로드 지원
  • 직관적인 사용자 인터페이스 제공

이 프로젝트는 FastAPI 백엔드와 Next.js 프론트엔드로 구성되어 있어 빠른 응답 속도와 사용자 친화적인 인터페이스를 제공합니다.

기술 스택

백엔드

  • 언어: Python 3.9+
  • 웹 프레임워크: FastAPI
  • TTS 모델: Facebook의 MMS-TTS 한국어 모델
  • 모델 통합: Hugging Face Transformers 라이브러리 (4.33 버전 이상)

프론트엔드

  • 프레임워크: Next.js
  • 스타일링: Tailwind CSS
  • 상태 관리: React 훅

1. 개발 환경 설정하기

필요한 도구들

  • Python 3.9 이상
  • Node.js 14 이상
  • npm 또는 yarn
  • Git

프로젝트 폴더 생성

mkdir tts-kor-app
cd tts-kor-app

2. 백엔드 개발하기

2.1 가상 환경 설정

python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

2.2 필요한 패키지 설치

먼저 requirements-api.txt 파일을 만들고 다음 내용을 추가합니다:

fastapi==0.95.1
uvicorn==0.22.0
transformers==4.33.0
torch==2.0.1
soundfile==0.12.1
python-multipart==0.0.6
pydantic==1.10.8

이제 패키지를 설치합니다:

pip install -r requirements-api.txt

2.3 API 서버 구현하기

api_server.py 파일을 생성하고 다음 코드를 작성합니다:

import os
import torch
import tempfile
import soundfile as sf
from fastapi import FastAPI, HTTPException, Request
from fastapi.responses import FileResponse
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from transformers import VitsModel, AutoTokenizer

# 저장 폴더 생성
os.makedirs("audio_files", exist_ok=True)

app = FastAPI(title="한국어 TTS API")

# CORS 설정
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 모델 및 토크나이저 로드
model_name = "facebook/mms-tts-kor"
model = VitsModel.from_pretrained(model_name)
tokenizer = AutoTokenizer.from_pretrained(model_name)

class TextInput(BaseModel):
    text: str

@app.post("/generate-audio")
async def generate_audio(input_data: TextInput):
    try:
        # 텍스트 토큰화
        inputs = tokenizer(input_data.text, return_tensors="pt")

        # 음성 생성
        with torch.no_grad():
            output = model(**inputs).waveform

        # 임시 파일로 저장
        output_numpy = output.squeeze().numpy()
        temp_file = tempfile.NamedTemporaryFile(delete=False, suffix=".wav", dir="audio_files")
        sf.write(temp_file.name, output_numpy, samplerate=16000)

        return FileResponse(temp_file.name, media_type="audio/wav")

    except Exception as e:
        print(f"Error: {str(e)}")
        raise HTTPException(status_code=500, detail=str(e))

@app.get("/")
async def root():
    return {"message": "한국어 TTS API가 정상적으로 실행 중입니다"}

if __name__ == "__main__":
    import uvicorn
    uvicorn.run("api_server:app", host="0.0.0.0", port=8000, reload=True)

2.4 서버 실행하기

python api_server.py

서버가 성공적으로 실행되면 http://localhost:8000에서 API가 실행됩니다.

3. 프론트엔드 개발하기

3.1 Next.js 프로젝트 생성

npx create-next-app@latest .

설치 과정에서 다음과 같이 답변하세요:

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • src/ directory: Yes
  • App Router: Yes

3.2 필요한 UI 라이브러리 설치하기

npm install @radix-ui/react-label @radix-ui/react-tabs

3.3 페이지 구현하기

src/app/page.tsx 파일을 열고 다음과 같이 작성합니다:

"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Home() {
  const [text, setText] = useState("");
  const [audioUrl, setAudioUrl] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [animateWave, setAnimateWave] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);

  // 음성파형 애니메이션을 위한 효과
  useEffect(() => {
    // 로딩 중일 때만 애니메이션 활성화
    setAnimateWave(isLoading);
  }, [isLoading]);

  const generateAudio = async () => {
    if (!text.trim()) {
      setError("텍스트를 입력해주세요");
      return;
    }

    setIsLoading(true);
    setError(null);
    setAudioUrl(null);

    try {
      const response = await fetch("http://localhost:8000/generate-audio", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ text }),
      });

      if (!response.ok) {
        throw new Error("음성 생성에 실패했습니다");
      }

      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      setAudioUrl(url);
    } catch (err) {
      setError("서버 연결에 문제가 있습니다");
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  const downloadAudio = () => {
    if (!audioUrl) return;

    const a = document.createElement("a");
    a.href = audioUrl;
    a.download = "tts_output.wav";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <div className="flex flex-col h-screen bg-[#f8fafc]">
      {/* 헤더 영역 */}
      <header className="bg-white border-b border-[#e2e8f0] sticky top-0 z-50">
        <div className="flex items-center justify-between px-6 py-3 max-w-7xl mx-auto">
          <div className="flex items-center gap-3">
            <div className="relative w-9 h-9 flex items-center justify-center">
              <div className="absolute inset-0 bg-[#4f46e5] opacity-10 rounded-xl"></div>
              <div className="absolute inset-0 bg-gradient-to-br from-[#4f46e5] to-[#818cf8] rounded-xl shadow-md"></div>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 relative z-10 text-white">
                <path d="M9 18V5l12-2v13"></path>
                <circle cx="6" cy="18" r="3"></circle>
                <circle cx="18" cy="16" r="3"></circle>
              </svg>
            </div>
            <h1 className="text-xl font-semibold bg-gradient-to-r from-[#4f46e5] to-[#818cf8] text-transparent bg-clip-text">한국어 TTS</h1>
          </div>
        </div>
      </header>

      {/* 메인 콘텐츠 영역 */}
      <main className="flex-1 overflow-auto p-6 bg-[#f8fafc]">
        <div className="max-w-3xl mx-auto space-y-8">
          {/* 메인 카드 */}
          <Card className="overflow-hidden border-[#e2e8f0] bg-white shadow-md rounded-xl">
            <CardHeader className="border-b border-[#e2e8f0] bg-white pb-4">
              <div className="flex items-center gap-2 mb-1">
                <div className="w-6 h-6 rounded-lg bg-gradient-to-r from-[#4f46e5] to-[#818cf8] flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-3.5 h-3.5">
                    <path d="M21 15V6"></path>
                    <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path>
                    <path d="M12 12H3"></path>
                    <path d="M16 6H3"></path>
                    <path d="M12 18H3"></path>
                  </svg>
                </div>
                <CardTitle className="text-lg font-semibold text-[#1e293b]">
                  한국어 텍스트를 음성으로 변환
                </CardTitle>
              </div>
              <CardDescription className="text-[#64748b] text-sm">
                AI가 자연스러운 음성으로 텍스트를 읽어줍니다
              </CardDescription>
            </CardHeader>

            <CardContent className="p-5">
              <Textarea
                placeholder="예시) 안녕하세요. 텍스트를 음성으로 변환해드립니다."
                value={text}
                onChange={(e) => setText(e.target.value)}
                className="min-h-[150px] resize-none border-[#e2e8f0] focus:border-[#4f46e5] focus:ring-[#4f46e5]/10 rounded-lg shadow-sm"
              />
              {error && (
                <div className="mt-3 p-3 bg-red-50 border-l-4 border-red-500 text-[#ef4444] rounded-r-md flex items-center gap-2 text-sm">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5">
                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                    <line x1="12" y1="9" x2="12" y2="13"></line>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                  </svg>
                  <p>{error}</p>
                </div>
              )}
            </CardContent>

            <CardFooter className="flex flex-col space-y-4 p-5 pt-0">
              {/* 음성 파형 애니메이션 */}
              <div className={`w-full h-12 flex items-center justify-center ${animateWave ? 'opacity-100' : 'opacity-0'} transition-opacity duration-500`}>
                <div className="flex items-end justify-center gap-[2px] h-8">
                  {[...Array(16)].map((_, i) => (
                    <div 
                      key={i} 
                      className={`w-1 rounded-full transition-all duration-150 ease-in-out ${animateWave ? 'animate-soundwave' : 'h-1'} ${i % 2 === 0 ? 'bg-[#4f46e5]' : 'bg-[#818cf8]'}`}
                      style={{ animationDelay: `${i * 0.05}s` }}
                    ></div>
                  ))}
                </div>
              </div>

              <Button 
                onClick={generateAudio} 
                className="w-full h-12 text-white bg-gradient-to-r from-[#4f46e5] to-[#818cf8] hover:from-[#4338ca] hover:to-[#6366f1] shadow-md flex items-center justify-center gap-2 rounded-lg transition-all"
                disabled={isLoading}
              >
                {isLoading ? (
                  <>
                    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span className="font-medium">음성 생성 중...</span>
                  </>
                ) : (
                  <>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5">
                      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                      <line x1="12" y1="19" x2="12" y2="23"></line>
                      <line x1="8" y1="23" x2="16" y2="23"></line>
                    </svg>
                    <span className="font-medium">음성 생성하기</span>
                  </>
                )}
              </Button>

              {audioUrl && (
                <div className="w-full space-y-4 animate-fadeIn pt-2">
                  <div className="bg-[#f8fafc] p-5 rounded-xl border border-[#e2e8f0] shadow-sm">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-8 h-8 rounded-full bg-[#4ade80]/20 flex items-center justify-center text-[#16a34a]">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                      </div>
                      <div>
                        <h3 className="font-medium text-[#0f172a]">음성 생성 완료</h3>
                        <p className="text-xs text-[#64748b]">고품질 AI 음성을 들어보세요</p>
                      </div>
                    </div>

                    <div className="group relative bg-white rounded-lg p-1.5 border border-[#e2e8f0] shadow-sm">
                      <audio controls className="w-full h-10 rounded-md focus:outline-none">
                        <source src={audioUrl} type="audio/wav" />
                        브라우저가 오디오 재생을 지원하지 않습니다.
                      </audio>
                    </div>
                  </div>

                  <Button 
                    onClick={downloadAudio} 
                    variant="outline"
                    className="w-full h-11 border-[#e2e8f0] hover:bg-[#f1f5f9] text-[#334155] hover:text-[#1e293b] flex items-center justify-center gap-2 font-medium rounded-lg"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7 10 12 15 17 10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    음성 다운로드
                  </Button>
                </div>
              )}
            </CardFooter>
          </Card>
        </div>
      </main>
    </div>
  );
}

3.4 애니메이션 CSS 추가하기

src/app/globals.css 파일에 다음 애니메이션 스타일을 추가합니다:

/* 물결 애니메이션 */
@keyframes soundwave {
  0%, 100% {
    height: 4px;
  }
  50% {
    height: 24px;
  }
}

.animate-soundwave {
  animation: soundwave 1s ease-in-out infinite;
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

3.5 프론트엔드 실행하기

npm run dev

브라우저에서 http://localhost:3000으로 접속하면 웹 애플리케이션을 볼 수 있습니다.

4. 테스트하기

서비스가 올바르게 작동하는지 테스트하기 위해 다음과 같은 샘플 텍스트를 입력해보세요:

  • "안녕하세요, 오늘 날씨가 정말 좋네요."
  • "이번 프로젝트의 목표는, 사용자 경험을 향상시키는 것입니다. 첫째, 인터페이스를 단순화하고, 둘째, 응답 시간을 최소화 하며, 마지막으로는 보안을 강화하는 것입니다."
  • "2023년 5월 15일에 BTS 콘서트가 열립니다. 아이폰 14 프로의 가격은 1,250,000원입니다."

5. 배포 준비하기

5.1 환경 변수 설정

프로덕션 환경에서는 환경 변수를 사용하여 API 엔드포인트를 구성하는 것이 좋습니다. .env.local 파일을 생성하고 다음과 같이 작성합니다:

NEXT_PUBLIC_API_URL=http://your-api-domain.com

그리고 프론트엔드 코드에서 fetch 부분을 수정합니다:

const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/generate-audio`, {
  // ... 기존 코드
});

5.2 프로덕션 빌드

프론트엔드:

npm run build

백엔드는 Gunicorn과 같은 WSGI 서버를 사용하여 배포하는 것이 좋습니다:

pip install gunicorn
gunicorn -w 4 -k uvicorn.workers.UvicornWorker api_server:app

6. 확장 아이디어

이 프로젝트를 더 발전시키기 위한 아이디어:

  1. 다양한 음성 스타일 지원: 다양한 목소리 톤, 속도, 감정을 선택할 수 있는 옵션 추가
  2. 긴 텍스트 지원: 단락이나 문서 전체를 음성으로 변환하는 기능
  3. API 키 인증: 보안 강화를 위한 API 키 인증 시스템 구현
  4. 음성 파일 형식 선택: WAV, MP3 등 다양한 형식으로 다운로드 지원
  5. 텍스트 편집 기능: 발음 교정, 강조 등을 위한 텍스트 편집 도구 추가
반응형

'DeepLearining' 카테고리의 다른 글

이 세가지를 모르면, 어디가서 RAG 해봤다고 하지 마세요!  (1) 2025.03.18
TheoremExplainAgent: Towards Multimodal Explanations for LLM Theorem Understanding  (0) 2025.02.28
GHOST 2.0: generative high-fidelity one shot transfer of heads  (0) 2025.02.28
Kanana: Compute-efficient Bilingual Language Model  (2) 2025.02.28
딥러닝 하드웨어 : GPU와 TPU란?  (0) 2025.02.24

'DeepLearining'의 다른글

  • 현재글Facebook MMS 모델로 한국어 TTS 웹 서비스 개발하기

관련글

티스토리툴바