import React, { useState } from 'react'; import axios from 'axios'; import '../styles/TranslationApp.css'; import config from '../config/config'; function TranslationApp() { const [input, setInput] = useState(''); const [translation, setTranslation] = useState(''); const [isEngToChn, setIsEngToChn] = useState(true); const handleInputChange = async (e) => { const textarea = e.target; const value = textarea.value; setInput(value); textarea.style.height = "auto"; textarea.style.height = (textarea.scrollHeight) + "px"; const translatedText = await translateText(value); setTranslation(translatedText); }; const toggleTranslationDirection = () => { setIsEngToChn(!isEngToChn); setInput(''); setTranslation(''); } const translateText = async (text) => { try { let src, dst; // let src, dst; // const direction = isEngToChn ? "eng-to-chn" : "chn-to-eng"; if (isEngToChn){ src = 'en'; dst = 'zh' }else { src = 'zh'; dst = 'en' } const response = await axios.post(config.apiUrl, { msg: text, src: src, dst:dst }); if (response.data.trans_result && response.data.trans_result.length > 0) { return response.data.trans_result[0].dst; } else { console.error("Unexpected response structure:", response.data); return text; } } catch (error) { console.error("Error during translation:", error); return text; } }; return (

实时翻译

{isEngToChn ? "英文输入" : "中文输入"}