주머니 속
통역기
스크린샷. 로컬에서 실행 중인 템플릿입니다.
- 모델
- ink-2, sonic-3.6
- 언어
- 영어, 스페인어, 프랑스어, 힌디어, 일본어 중 두 개
- 라이선스
- Apache-2.0
- 기술 스택
- Next.js 16React 19AI SDKWeb Audioshadcn/ui
- Cartesia 제품
- Ink 2Sonic 3.6
하는 일
화면이 둘로 나뉘어 각자 자기 언어로 대화를 읽으며, 두 사람 사이에 휴대폰을 눕혀 둘 때를 위해 한쪽 절반을 뒤집을 수 있습니다. 번역된 차례마다 아래에 작은 줄로 첫 번역 단어와 첫 오디오까지 걸린 시간을 보여 줍니다.
직접 실행하기
설치
Node 22.22 이상에서 아래 명령어를 실행하세요. pnpm도 쓸 수 있습니다. 아래 표를 보고
.env.local을 채우세요. 빠진 키가 있으면 페이지가 무엇인지 알려 줍니다.환경 변수 - CARTESIA_API_KEY
play.cartesia.ai/keys- LLM_MODEL
provider/model, 예를 들어openai/gpt-5.4-mini- OPENAI_API_KEY
LLM_MODEL이 openai/로 시작할 때- ANTHROPIC_API_KEY
LLM_MODEL이 anthropic/으로 시작할 때- AI_GATEWAY_API_KEY
- 그 밖의 제공업체
- APP_PASSWORD
- 로컬에서는 선택 사항. Vercel에서는 필수이며, none으로 두면 앱이 공개됨
- TRUST_PROXY
- 선택 사항. 자체 리버스 프록시 뒤에서는 1
대화 시작
npm run dev가 출력한 URL을 여세요. 두 언어를 고르고 Start talking을 누르세요. 그다음엔 번갈아 말하기만 하면 되고, 차례 사이에 누를 것은 없습니다. 휴대폰에서는 마이크에 HTTPS가 필요하니 배포하거나 cloudflared 같은 터널을 써서 시험해 보세요.
코딩 에이전트로 만들기
어디서 시작하고 무엇을 먼저 읽어야 하는지 코딩 에이전트에게 알려 주는 프롬프트입니다.
Build a two-person voice translation app with Cartesia. Start from https:/ and follow its AGENTS.md for the commands, files and rules. The server mints a 60 second access token with only the stt and tts grants. The browser streams the microphone to ink-2 on /stt/turns/websocket with @cartesia/cartesia-js, sends each turn to an AI SDK route that replies with the language code and the translation, and speaks it with sonic-3.6 over the TTS WebSocket. Keep the mute gate that sends silence to Ink 2 while Sonic plays. If I don't have a Cartesia API key yet, follow https:/ to get one.
작동 방식
이렇게 만든 이유
차례가 끝나기 전에 번역을 시작합니다
잠깐 쉬면 Ink 2가 말을 마쳤을 수도 있다는 이른 추측을 보내고, 페이지는 바로 번역을 시작합니다. 정말 말을 마쳤다면 그 번역을 씁니다. 계속 말하면 번역을 취소하고 문장 전체를 기다립니다.
누가 말했는지는 LLM이 알려 줍니다
Ink 2는 어떤 언어를 들었는지 알려 주지 않습니다. 그래서 번역 응답은 첫 줄에 언어 코드만 두고 시작합니다. 페이지는 그 코드로 음성과 화면의 어느 쪽에 보일지를 정합니다.
말하는 동안 앱이 스스로 음소거합니다
번역이 재생되는 동안 마이크는 Ink 2에 무음을 보냅니다. 그렇지 않으면 앱이 자기 목소리를 듣고 다시 번역하기를 끝없이 반복합니다.
원하는 대로 바꾸기
다른 음성 사용
언어별 음성은 lib/languages.ts에서 정합니다. Cartesia 음성 라이브러리에서 다른 음성을 고르거나, 본인 허락을 받아 만든 클론을 쓰세요.
번역 방식 바꾸기
lib/prompt.ts를 고치면 번역을 격식 있게도, 편하게도 만들 수 있습니다. 앱이 응답 첫 줄의 언어 코드를 읽고 음성을 고르므로, 그 줄은 그대로 두세요.
차례 감지 조정
차례가 끝나는 시점은 Ink 2가 정합니다. 더 오래 기다리거나 더 빨리 끊게 하려면, 앱이 음성 연결을 열 때 turn_end_timeout_ms를 설정하세요. 그 호출은 lib/audio/listener.ts에 있습니다.
자주 묻는 질문
Cartesia API 키는 안전한가요?
네. 키는 서버에만 있습니다. 브라우저는 60초 동안만 유효하고 음성 인식과 음성 합성에만 쓸 수 있는 토큰을 받습니다.
대화 내용은 어디로 가나요?
두 사람의 음성은 Cartesia로, 각 차례의 텍스트는 번역을 위해 LLM 제공업체로 갑니다. 시작하기 전에 상대에게 알려 주세요.
두 사람이 동시에 말할 수 있나요?
아니요. 마이크가 하나이고 차례도 한 번에 하나이니, 번역 재생이 끝날 때까지 기다리세요. Ink 2가 잠깐 쉰 것과 문장의 끝을 구분하므로, 차례 사이에 누를 것은 없습니다.
어떤 언어를 지원하나요?
영어, 스페인어, 프랑스어, 힌디어, 일본어 중 두 가지입니다. Ink 2가 알아듣는 언어가 이것들입니다. 다른 언어를 추가하려면 다른 음성 인식 모델이 필요합니다.
휴대폰에서 동작하나요?
레이아웃은 휴대폰을 먼저 생각하고 만들었습니다. 테스트는 데스크톱 Chrome에서 녹음된 목소리를 마이크로 써서 했고, 실제 휴대폰에서는 하지 않았습니다.
헤드폰이 필요한가요?
아니요. 앱은 말하는 동안과 그 뒤 0.35초 동안 자기 마이크를 음소거합니다. 시끄러운 곳에서는 주변 목소리 때문에 의도하지 않은 차례가 시작될 수 있습니다.
이 템플릿의 단계별 가이드가 있나요?
네. 레시피에서 코드를 따라가며 설명하고, README에서 설정, 환경 변수, 배포를 다루며, Ink 2 차례 이벤트 문서에서 Cartesia 쪽을 설명합니다.
쿡북 더 보기
오늘 시작하세요
전문가와 상담하세요.
팀원과 연결해 Cartesia가 세계적 수준의 음성 경험을 만드는 데 어떻게 도움이 되는지 알아보세요.
개발을 시작하세요.
API로 모델을 사용하고 몇 분 만에 음성 에이전트를 프로덕션에 배포하세요.