Membina alat terjemahan masa nyata berdasarkan JavaScript-tutorial js-php.cn

Membina alat terjemahan masa nyata berdasarkan JavaScript

WBOY

Lepaskan： 2023-08-09 19:22:45

asal

1606 orang telah melayarinya

Membina alat terjemahan masa nyata berdasarkan JavaScript

Pengenalan

Dengan permintaan yang semakin meningkat untuk globalisasi dan pertukaran dan pertukaran rentas sempadan yang kerap, alatan terjemahan masa nyata telah menjadi aplikasi yang sangat penting. Kami boleh memanfaatkan JavaScript dan beberapa API sedia ada untuk membina alat terjemahan masa nyata yang mudah tetapi berguna. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini berdasarkan JavaScript, dengan contoh kod.

Langkah Pelaksanaan

Langkah 1: Cipta Struktur HTML

Pertama, kita perlu mencipta struktur HTML ringkas untuk menempatkan alat terjemahan masa nyata kami. Berikut ialah contoh struktur HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时翻译工具</title>
</head>
<body>
    <h1>实时翻译工具</h1>
    <textarea id="source-textarea" placeholder="请输入要翻译的文本"></textarea>
    <textarea id="translated-textarea" readonly></textarea>
</body>
</html>

Salin selepas log masuk

Langkah 2: Tambah Gaya

Untuk mencantikkan alat terjemahan masa nyata kami, kami boleh menambah beberapa gaya CSS asas. Berikut ialah gaya contoh:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

textarea {
    width: 400px;
    height: 200px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Salin selepas log masuk

Langkah 3: Laksanakan fungsi terjemahan

Gunakan JavaScript dan API Terjemahan Google untuk melaksanakan fungsi terjemahan masa nyata. Mula-mula, tambah kod berikut di bahagian bawah halaman:

<script src="https://www.google.com/jsapi"></script>
<script>
    google.load("language", "1");
    google.setOnLoadCallback(initialize);

    function initialize() {
        var sourceTextarea = document.getElementById("source-textarea");
        var translatedTextarea = document.getElementById("translated-textarea");

        sourceTextarea.addEventListener("input", function() {
            var translatedText = translate(sourceTextarea.value);
            translatedTextarea.value = translatedText;
        });

        function translate(text) {
            var translation = "";
            var langDetection = google.language.detect(text, function(result) {
                var sourceLang = result.language;
                var targetLang = "en"; // 例如，将源语言设置为自动检测，将目标语言设置为英语

                google.language.translate(text, sourceLang, targetLang, function(result) {
                    if (result.translation) {
                        translation = result.translation;
                    }
                });
            });

            return translation;
        }
    }
</script>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan API Terjemahan Google untuk terjemahan. Kami mula-mula memuatkan pustaka JavaScript Google, kemudian memulakan alat terjemahan dan menambahkan pendengar acara input pada kotak teks sumber. Setiap kali pengguna memasukkan kandungan, acara ini akan dicetuskan dan fungsi terjemahan akan dipanggil untuk mendapatkan hasil terjemahan.

Kesimpulan

Dengan langkah mudah di atas, kami boleh membina alat terjemahan masa nyata berasaskan JavaScript. Pengguna boleh memasukkan teks untuk diterjemahkan dan ia akan diterjemahkan secara automatik ke dalam bahasa Inggeris atau bahasa sasaran lain melalui API Terjemahan Google. Alat terjemahan masa nyata ini boleh digunakan dengan mudah untuk komunikasi dan komunikasi merentas bahasa.

Sila ambil perhatian bahawa API Terjemahan Google digunakan dalam contoh kod dan langganan serta pengesahan yang sepadan mungkin diperlukan dalam penggunaan sebenar. Pada masa yang sama, untuk meningkatkan pengalaman pengguna, lebih banyak ciri dan pengoptimuman boleh ditambah. Walau bagaimanapun, contoh kod di atas boleh menjadi asas untuk anda mula membina alat terjemahan masa nyata.

Rujukan

Dokumentasi API Terjemahan Google - https://cloud.google.com/translate/docs/reference/

Atas ialah kandungan terperinci Membina alat terjemahan masa nyata berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!