Mobile

통역 앱

keyjinssss 2025. 3. 9. 09:25
반응형

 

 


📌 번역 기능 추가하기 (Google Translate API 사용)

 

번역을 추가하려면, Google Translate API를 사용해서 변환된 텍스트를 원하는 언어로 번역하면 돼.

 

🛠 Google Translate API 키 받기 (필요)

1. Google Cloud Console에서 Google Cloud Translation API를 활성화

2. API 키를 발급받아 프로젝트에서 사용

 


🚀 React Native에서 번역 추가한 코드 (STT + 번역 + TTS)

import React, { useState } from "react";
import { Button, Text, View } from "react-native";
import Voice from "@react-native-voice/voice";
import Tts from "react-native-tts";

// Google Translate API 호출 함수
const translateText = async (text, targetLang = "ko") => {
  const API_KEY = "YOUR_GOOGLE_TRANSLATE_API_KEY"; // 여기에 API 키 입력
  const url = `https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`;

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      q: text, // 번역할 원본 텍스트
      target: targetLang, // 번역할 대상 언어 (예: "ko"는 한국어)
    }),
  });

  const result = await response.json();
  return result.data.translations[0].translatedText;
};

export default function App() {
  const [text, setText] = useState("");
  const [translatedText, setTranslatedText] = useState("");

  // 음성 입력 (Speech-to-Text)
  const startListening = async () => {
    Voice.onSpeechResults = async (event) => {
      const originalText = event.value[0]; // 음성 → 텍스트 변환
      setText(originalText);

      // 번역 수행
      const translated = await translateText(originalText, "ko");
      setTranslatedText(translated);
    };

    await Voice.start("en-US"); // 영어로 음성 인식 시작
  };

  // 번역된 텍스트 음성 출력 (Text-to-Speech)
  const speak = () => {
    Tts.speak(translatedText, { language: "ko-KR" }); // 한국어로 읽기
  };

  return (
    
      
      원본: {text}
      번역: {translatedText}
      
    
  );
}

 

 


🔗 코드 설명

 

1️⃣ Voice.start("en-US") → 영어로 음성을 입력받음 (STT)

2️⃣ translateText(originalText, "ko") → 영어 → 한국어 번역 수행

3️⃣ Tts.speak(translatedText, { language: "ko-KR" }) → 한국어로 음성 출력 (TTS)

 

반응형

'Mobile' 카테고리의 다른 글

expo 전역/ 로컬  (0) 2025.02.24
Expo CLI 설치를 전역에?  (0) 2025.02.24
React 개발자 도구 사용  (0) 2025.02.24
React 개발자 도구 사용  (0) 2025.02.24
[RN] Pressable  (0) 2025.02.23