ElevenLabs, Streamlit 및 Claude를 사용하여 간단한 단어 맞춤법 앱 구축

생성적 목소리가 무엇을 할 수 있는지 아시나요? 그것들은 어떤 광대한 가능성을 열어주며, 얼마나 많은 영역이 그로부터 혜택을 받을 수 있습니까?

어쩌면 비디오 블로그나 책의 목소리를 내기 위한 앱이 필요할 수도 있습니다. 전문적인 음성 해설을 통해 게임 캐릭터에 생기를 불어넣고 싶을 수도 있습니다. 외국어 학습용 어플리케이션을 만들어 보면 어떨까요?

오늘 lablab.ai에서는 AI 음성 기술을 더 잘 알아가는 데 도움이 되는 튜토리얼을 준비했습니다! 뛰어들어보자!

소개

시장에 다양한 " 생성 AI " 도구가 등장하면서 소프트웨어 개발에 있어 가장 흥미로운 시기 중 하나입니다. 이름만 말하면 자기소개서 생성이요? 확인하다! 이메일 생성? 확인하다! 자동 코드 주석 생성? 확인하다! 코딩 및 소프트웨어 개발 외부에서도 사용 사례 가능성은 엄청납니다.

이제 다양한 이미지 생성 모델을 사용하여 텍스트 프롬프트로 이미지를 생성할 수 있습니다. 따라서 생성된 자산을 다양한 제품에 통합하는 것이 가능해졌습니다. 다음 질문은: 목소리는 어떻습니까? 지난 몇 년간의 사용자 경험 트렌드에서는 떠오르는 트렌드 중 하나로 '음성 명령'이 언급되었습니다.

우리가 만드는 소프트웨어가 음성을 기능 중 하나로 통합하는 것은 당연합니다. 그렇기 때문에 이 튜토리얼에서는 ElevenLabs가 간단한 앱에서 제공하는 " 음성 합성 " 기능을 선보일 것입니다. 이 기능은 임의의 단어를 생성하고 철자를 지정합니다. 이 Python 기반 앱용 UI를 구축하기 위해 데이터 과학 프로젝트를 공유하는 새로운 UI 라이브러리인 Streamlit을 사용합니다.

일레븐랩스 소개

ElevenLabs 는 음성 합성 솔루션을 제공하는 음성 기술 연구 회사입니다. 사용하기 쉬운 API를 통해 개발자는 AI를 사용하여 고품질 음성을 생성할 수 있습니다. 이는 방대한 양의 오디오북과 팟캐스트를 통해 훈련된 AI 모델을 통해 가능합니다. 훈련을 통해 AI는 음성 생성 시 예측 가능한 고품질 결과를 제공할 수 있습니다.

ElevenLabs가 제공해야 하는 두 가지 주요 기능이 있습니다. 첫 번째 기능은 VoiceLab입니다. 여기서 사용자는 녹음된 오디오 및/또는 기존의 미리 만들어진 음성에서 음성을 복제할 수 있고 성별, 연령, 민족 및 인종을 기반으로 음성을 "디자인"할 수도 있습니다. 사용자가 작업할 음성이 있으면 다음 기능인 음성 합성으로 넘어갈 수 있습니다. 여기서는 자신이 디자인한 음성을 사용하거나 미리 만들어진 음성을 사용하여 음성을 생성할 수 있습니다.

Anthropic의 Claude 모델 소개

Claude는 인공 지능 시스템의 상호 운용성, 견고성 및 안전성 향상에 중점을 둔 AI 연구 조직인 Anthropic 이 개발한 최신 AI 모델입니다.

Claude 모델은 인간과 유사한 반응을 생성하도록 설계되어 콘텐츠 제작, 법률, 고객 서비스에 이르기까지 광범위한 애플리케이션을 위한 강력한 도구입니다. 시중의 다른 AI 모델과 마찬가지로 Claude 도 다양한 범위의 인터넷 텍스트에 대한 교육을 받았습니다. 그러나 대부분의 AI 모델과 달리 "안전성"에 중점을 두어 사용자에게 "해롭다"거나 "진실하지 않다"고 간주되는 출력을 거부할 수 있습니다.

스트림릿 소개

Streamlit 은 개발자와 데이터 과학자가 시각적으로 매력적인 맞춤형 웹 앱을 쉽고 가능하게 만들고 공유할 수 있게 해주는 오픈 소스 Python 라이브러리입니다. 개발자는 Streamlit을 사용하여 몇 분 만에 모든 기능을 갖춘 데이터 과학 앱을 구축하고 배포할 수 있습니다. 이는 데이터 스크립트를 UI 구성 요소로 변환하는 데 사용할 수 있는 간단하고 직관적인 API를 통해 가능합니다.

전제 조건

• Streamlit을 사용한 Python 및 UI 개발 에 대한 기본 지식
• Anthropic API 에 대한 액세스
• ElevenLabs API 에 액세스

개요

1. Streamlit 프로젝트 초기화
2. Claude Model을 이용한 단어 생성 기능 추가
3. ElevenLabs API를 사용하여 음성 생성 기능 추가
4. 단어 생성기 앱 테스트

논의

이 튜토리얼에서는 최소한 4가지 단계를 거쳐야 합니다. 먼저 Streamlit을 사용하여 사용자 인터페이스를 개발하는 일반적인 느낌을 얻으려면 Streamlit 기반 프로젝트를 초기화해야 합니다.

다음으로 우리는 Claude 모델이 일반적으로 철자가 틀린 무작위 단어를 제공하도록 하는 엔지니어링 프롬프트부터 시작하여 더 많은 기능을 추가하기 시작합니다. 그런 다음 ElevenLabs 에서 제공하는 텍스트-음성 생성을 추가하여 다국어 모델이 단어를 철자하는 방법을 보여줍니다. 마지막으로 간단한 앱을 테스트하겠습니다.

Streamlit 프로젝트 초기화

코딩 작업을 시작해 보세요! 먼저 프로젝트에 대한 디렉터리를 만들고 입력해 보겠습니다!

 mkdir randomwords cd randomwords

다음으로 이 디렉토리를 Streamlit 프로젝트의 기초로 사용하겠습니다. Streamlit 프로젝트는 본질적으로 Python 프로젝트이기 때문에 Python 프로젝트를 초기화하려면 가상 환경 정의 및 활성화와 같은 몇 가지 단계를 수행해야 합니다.

 # Creating the virtual environment python -m venv env # Activate the virtual environment # On Linux/Mac source env/bin/activate # On Windows: .\env\Scripts\activate

활성화되면 터미널 출력에 다음과 같이 가상 환경(env)의 이름이 표시되어야 합니다.

다음으로, 이 프로젝트에 필요한 라이브러리를 설치할 차례입니다! pip 명령을 사용하여 streamlit , anthropic 및 elevenlabs 라이브러리를 설치해 보겠습니다. elevenlabs 함수 중 하나에서 Pydantic 관련 오류를 방지하기 위해 버전이 잠긴 pydantic 라이브러리도 설치합니다.

 pip install streamlit anthropic elevenlabs "pydantic==1.*"

모든 프로젝트 요구 사항이 해결되었으므로 이제 코딩 부분으로 들어가 보겠습니다. 프로젝트 디렉토리 내에 새 파일을 만듭니다. 이름을 randomwords_app.py 로 지정하겠습니다.

 touch randomwords_app.py

파일이 생성되면 즐겨 사용하는 코드 편집기나 IDE(통합 개발 환경)에서 파일을 열어 보겠습니다. 우선, 가능한 가장 간단한 부분인 제목과 캡션 텍스트로 간단한 앱을 만들어 보겠습니다.

 import streamlit as st st.title("Random Words Generator") st.text("Hello, this is a random words generator app")

프로젝트 초기화 부분을 마무리하기 위해 앱 실행을 테스트해 보겠습니다. 현재 작업 디렉터리가 여전히 프로젝트 내에 있고 가상 환경이 이미 활성화되어 있는지 확인하세요. 모든 것이 준비되면 streamlit run <app-name> 사용하여 앱을 실행합니다.

 streamlit run randomwords_app.py

앱은 기본 브라우저에서 자동으로 열립니다! 지금은 제목과 텍스트가 표시되어야 합니다. 다음으로 Anthropic의 Claude 모델을 사용하여 무작위 단어 생성 기능을 추가해 보겠습니다.

마지막으로 우리가 사용할 서비스, 즉 Anthropic의 Claude 모델과 ElevenLabs의 음성 합성 기능에 대한 API 키를 앱에 제공해야 합니다. 이러한 키는 민감한 것으로 간주되므로 안전하고 격리된 장소에 보관해야 합니다.

그러나 이번에는 .env 파일에 저장하지 않습니다. 이는 Streamlit이 환경 변수를 다르게 처리하기 때문입니다. 문서 에 따르면 .streamlit 디렉터리 내에 비밀 구성 파일을 생성해야 합니다. 프로젝트 내에 디렉터리를 만든 다음 파일을 만들 수 있습니다.

 mkdir .streamlit touch .streamlit/secrets.toml

우리가 만든 TOML 파일을 편집해 보겠습니다. TOML 파일은 일반적인 .env 파일과 다른 형식을 사용합니다.

 xi_api_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" claude_key = "sk-ant-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Claude Model을 이용한 단어 생성 기능 추가

이 단계에서는 임의의 단어를 생성하는 버튼, 생성된 단어를 표시하는 제목 요소 및 단어의 의미를 표시하는 하위 제목을 추가합니다. 그러나 웹 개발 경험을 바탕으로 저는 UI 요소가 컨테이너 내부에 배치되고 정렬되어야 한다고 굳게 믿습니다. 그래서 우리는 정확히 그렇게 할 것입니다.

필요한 라이브러리 가져오기

우선, 몇 가지 import 문을 추가해 보겠습니다. 우리는 무작위 단어를 생성하기 위해 anthropic 라이브러리를 가져올 것입니다.

 import streamlit as st import anthropic

그런 다음 UI 부분에 도달하기 전에 먼저 단어 생성 기능을 만들어 보겠습니다.

단어 생성 기능 정의

 def generate_word(): prompt = (f"{anthropic.HUMAN_PROMPT} Give me one non-English word that's commonly misspelled and the meaning. Please strictly follow the format! example: Word: Schadenfreude; Meaning: joy at other's expenses." f"{anthropic.AI_PROMPT} Word: Karaoke; Meaning: a form of entertainment where people sing popular songs over pre-recorded backing tracks." f"{anthropic.HUMAN_PROMPT} Great! just like that. Remember, only respond following the pattern.") c = anthropic.Anthropic(api_key=st.secrets["claude_key"]) resp = c.completions.create( prompt=f"{prompt} {anthropic.AI_PROMPT}", stop_sequences=[anthropic.HUMAN_PROMPT], model="claude-v1.3-100k", max_tokens_to_sample=900, ) print(resp.completion) return resp.completion

이 함수에서 가장 무거운 작업은 ** Anthropic의 Claude 모드 **l(고마워요, Claude ! 😉)가 수행합니다. 그러나 이 함수에서 우리가 할 일은 Claude가 정확한 형식을 일관되게 반환하도록 만드는 방법입니다. 따라서 Claude에게 "형식을 엄격히 따르도록" 지시하고 초기 프롬프트 뒤에 추가하여 예제 응답을 제공해야 합니다.

마지막으로 Claude에게 "패턴에 따라서만 응답해야 함을 기억하세요"라고 요청하여 계약을 준수하는지 확인합니다. 함수는 Claude 의 응답을 반환하여 종료됩니다.

다음으로 UI 편집으로 돌아가겠습니다!

UI 업데이트

 st.title("Random Words Generator") with st.container(): st.header("Random Word") random_word = st.subheader("-") word_meaning = st.text("Meaning: -") st.write("Click the `Generate` button to generate new word") if st.button("Generate"): result = generate_word() # Split the string on the semicolon split_string = result.split(";") # Split the first part on ": " to get the word word = split_string[0].split(": ")[1] # Split the second part on ": " to get the meaning meaning = split_string[1].split(": ")[1] print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}")

이번에는 내부에 몇 가지 요소가 포함된 컨테이너를 추가했습니다. 임의의 단어를 표시하기 위한 헤더, 하위 헤더 및 단어의 의미를 표시하는 텍스트 요소입니다. 또한 앱 사용 방법에 대한 힌트를 표시하는 텍스트와 그 아래에 있는 버튼도 있습니다.

Streamlit 에서는 버튼을 클릭할 때 True 반환하는 조건문을 사용하여 클릭 이벤트 핸들러를 선언할 수 있습니다. 이 코드에서는 생성된 단어와 의미를 반환하고 결과를 각각 단어와 의미에 대한 별도의 변수로 분할하는 generate_word() 함수를 호출합니다. 마지막으로 하위 헤더와 텍스트 요소를 업데이트하여 단어와 의미를 표시합니다.

최종 형태

코드를 다시 한 번 확인해 봅시다! 여기에는 import 문, 임의의 단어를 생성하는 함수, 하위 헤더가 포함된 업데이트된 UI, 텍스트 요소 및 generate_word() 함수를 호출하여 단어를 생성하는 버튼이 포함되어야 합니다.

 import streamlit as st import anthropic def generate_word(): prompt = (f"{anthropic.HUMAN_PROMPT} Give me one non-English word that's commonly misspelled and the meaning. Please strictly follow the format! example: Word: Schadenfreude; Meaning: joy at other's expenses." f"{anthropic.AI_PROMPT} Word: Karaoke; Meaning: a form of entertainment where people sing popular songs over pre-recorded backing tracks." f"{anthropic.HUMAN_PROMPT} Great! just like that. Remember, only respond following the pattern.") c = anthropic.Anthropic(api_key=st.secrets["claude_key"]) resp = c.completions.create( prompt=f"{prompt} {anthropic.AI_PROMPT}", stop_sequences=[anthropic.HUMAN_PROMPT], model="claude-v1.3-100k", max_tokens_to_sample=900, ) print(resp.completion) return resp.completion st.title("Random Words Generator") with st.container(): st.header("Random Word") random_word = st.subheader("-") word_meaning = st.text("Meaning: -") st.write("Click the `Generate` button to generate new word") if st.button("Generate"): result = generate_word() # Split the string on the semicolon split_string = result.split(";") # Split the first part on ": " to get the word word = split_string[0].split(": ")[1] # Split the second part on ": " to get the meaning meaning = split_string[1].split(": ")[1] print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}")

단어 생성 기능 테스트

동일한 명령으로 앱을 다시 한 번 실행해 보겠습니다. 이전에 앱을 실행한 적이 있는 경우 오른쪽 상단 메뉴를 클릭하고 " 재실행 "을 클릭하여 앱을 다시 실행할 수도 있습니다.

업데이트된 사용자 인터페이스가 표시되어야 합니다.

이제 Generate 버튼을 클릭해 보겠습니다!

Streamlit의 좋은 점 중 하나는 로딩을 처리하고 즉시 로딩 표시기를 제공한다는 것입니다. 오른쪽 상단에 표시기와 작업을 " 중지 "하는 옵션이 표시됩니다. 깔끔하죠?

몇 초 후에 결과가 UI에 표시됩니다.

완벽한! 앱은 Claude 모델에서 생성된 텍스트를 단어와 의미로 올바르게 분할했습니다. 그러나 예상한 형식에 따라 결과가 나오지 않으면 언제든지 Generate 버튼을 다시 클릭할 수 있습니다.

다음 단계는 음성 생성을 임의의 단어 생성기에 통합하는 이 앱의 주요 기능입니다. ElevenLabs에서 제공하는 API를 사용하여 오디오 파일을 생성하는 방법을 시연하는 것 외에도 이 단계에서는 ElevenLabs의 다국어 모델 기능을 시연하는 역할도 합니다.

ElevenLabs API를 사용하여 음성 생성 기능 추가

이 섹션의 첫 번째 단계는 아마도 짐작하셨겠지만 더 많은 import 문을 추가하는 것입니다! 이제 음성 생성 기능에 사용할 elevenlabs 의 일부 기능을 추가해 보겠습니다.

 import streamlit as st import anthropic ++ from elevenlabs import generate, set_api_key

다음으로 음성 생성을 처리하는 함수를 정의하겠습니다.

 def generate_speech(word): set_api_key(st.secrets['xi_api_key']) audio = generate( text=word, voice="Bella", model='eleven_multilingual_v1' ) return audio

Python 의 단순성과 가독성, 그리고 ElevenLabs의 사용하기 쉬운 API 덕분에 이 코드만 사용하여 음성을 생성할 수 있습니다! 이 함수는 음성을 생성하는 데 사용하는 임의의 단어를 받아들입니다. 또한 우리는 특히 다국어 모델인 "eleven_multilingual_v1" 모델을 사용합니다. 이는 외국어 및 일반적으로 철자가 틀린 단어의 철자와 발음을 보여주기 위한 사용 사례에 적합합니다! 마지막으로 이 튜토리얼에서는 ElevenLabs 에서 제공하는 사전 제작된 음성 중 하나인 " Bella " 음성을 사용합니다.

다음으로 생성된 음성을 재생하기 위해 오디오 플레이어를 추가하겠습니다.

 print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}") ++ speech = generate_speech(word) ++ st.audio(speech, format='audio/mpeg')

이전의 최신 코드 바로 아래에 생성된 음성을 저장하는 변수를 추가하고 Streamlit의 st.audio 함수에서 제공하는 오디오 플레이어를 사용하여 음성을 실행합니다. 이 시점에서 우리 앱은 예상대로 작동해야 하며 "읽을 수 있는" 임의의 단어가 있는 경우에만 오디오 플레이어를 표시해야 합니다.

어떻게 작동하는지 궁금하신가요? 저도요! 지금 앱을 테스트해 보세요!

단어 철자 기능 테스트

streamlit run 사용하여 앱을 다시 실행하거나 이미 실행 중인 경우 앱을 다시 실행해 보겠습니다. 지난번에 떠났을 때와 똑같아 보일 것입니다. 하지만 이번에는 "생성"버튼을 클릭해 봅시다!

놀라운! 이번에는 앱에 오디오 플레이어도 표시됩니다! 한번 플레이해 봅시다. 다중 언어 모델을 사용하면 생성된 음성은 단어의 원래 언어에 가까운 악센트와 억양을 사용해야 합니다. 예를 들어, "entrepreneur"는 프랑스어 억양으로 발음되어야 합니다.

결론

이 짧은 튜토리얼에서는 ElevenLabs 가 제공하는 음성 생성 기술의 기능을 살펴보았습니다. 다국어 모델을 사용하면 영어가 아닌 청취자를 위한 음성을 쉽게 생성할 수 있습니다. 우리의 사용 사례에서는 일반적으로 철자가 틀리는 영어가 아닌 단어를 발음하고 철자하는 올바른 방법을 찾는 데 도움이 되는 다국어 모델이 필요합니다.

수많은 아이디어로 미래를 창조하는 데 동참할 개발자를 초대합니다!

7월 28일 , lablab.ai는 ElevenLabs 모델을 사용하여 나만의 음성 AI 앱을 만들 수 있는 챌린지를 시작했습니다 ! (추가로 해커톤 기술과 직접 경쟁하지 않는 한, 대규모 언어 모델, 이미지 및 비디오 생성 모델 등과 같은 다른 AI 모델을 활용할 수 있습니다.)

*Your final submission should consist of a ready-to-play working prototype of your idea, a video pitch, and a presentation showcasing your solution.

여기에서 더 많은 튜토리얼을 찾을 수 있으며 다른 해커톤 에 참여하여 최첨단 기술을 구축할 수도 있습니다!

그리고 이 기사의 저자인 Septian Adi Nugraha 에게 큰 감사를 드립니다. 💚