Offline version of the translator app

keeideas

Published: 24 Apr 2025 › Updated: 24 Apr 2025 Offline version of the translator app

Offline version of the translator app

Save the code below in a text editor, with a html extension.
e.g., translate.html

open in a web browser, and it should work.

This uses the Google translate API.

Prompt reversed engineered.

Create a single HTML file that works as a live speech translator.
It should:

Continuously listen to speech using the Web Speech API.

Let users choose the "From" and "To" languages using dropdowns with common language options like English, Japanese, Chinese, Danish, etc.

Translate speech in real time using Google Translate.

Show the most recent translation at the top.

Keep a running log of all spoken text and translated output.

Include buttons for "Start Recording", "Stop Recording", and "Download Transcript".

When "Start Recording" is clicked, change the button to say "Recording..." and make it red.

When "Stop Recording" is clicked, reset the button text and color.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Live Speech Translator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 20px;
      max-width: 900px;
      margin: auto;
    }

    h2 { margin-bottom: 10px; color: #333; }

    .lang-select, .controls { margin-bottom: 15px; }

    .output-section {
      background: #fff;
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 20px;
    }

    .current {
      font-weight: bold;
      font-size: 18px;
      background: #e3f2fd;
      border-left: 5px solid #2196F3;
      padding: 10px;
      margin-bottom: 10px;
    }

    .output-box {
      white-space: pre-wrap;
      font-family: monospace;
      background: #fafafa;
      height: 250px;
      overflow-y: auto;
      border-left: 5px solid #4CAF50;
      padding: 10px;
    }

    select, .button {
      padding: 10px;
      font-size: 16px;
      margin-right: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #startBtn.recording {
      background-color: #d32f2f;
      color: white;
    }
  </style>
</head>
<body>
  <h2>Live Speech Translator</h2>

  <div class="lang-select">
    <label><strong>From:</strong>
      <select id="fromLangSelect">
        <option value="en-US" selected>English</option>
        <option value="ja-JP">Japanese</option>
        <option value="zh-CN">Chinese (Simplified)</option>
        <option value="da-DK">Danish</option>
      </select>
    </label>
    <label><strong>To:</strong>
      <select id="toLangSelect">
        <option value="en">English</option>
        <option value="ja">Japanese</option>
        <option value="zh-CN">Chinese (Simplified)</option>
        <option value="da">Danish</option>
      </select>
    </label>
  </div>

  <div class="controls">
    <button class="button" id="startBtn" onclick="startRecording()">Start Recording</button>
    <button class="button" onclick="stopRecording()">Stop Recording</button>
    <button class="button" onclick="downloadTranscript()">Download Transcript</button>
  </div>

  <div class="output-section">
    <div class="current" id="currentTranslatedText">[Translated speech appears here]</div>
    <div class="output-box" id="fullTranscript"></div>
  </div>

  <script>
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.continuous = true;
    recognition.interimResults = false;

    const fromSelect = document.getElementById('fromLangSelect');
    const toSelect = document.getElementById('toLangSelect');
    const startBtn = document.getElementById('startBtn');
    const currentTranslatedText = document.getElementById('currentTranslatedText');
    const fullTranscript = document.getElementById('fullTranscript');

    let transcriptData = [];

    function startRecording() {
      const fromLang = fromSelect.value;
      recognition.lang = fromLang;
      recognition.start();
      startBtn.classList.add('recording');
      startBtn.textContent = "Recording...";
    }

    function stopRecording() {
      recognition.stop();
      startBtn.classList.remove('recording');
      startBtn.textContent = "Start Recording";
    }

    recognition.onresult = async function(event) {
      const last = event.results.length - 1;
      const text = event.results[last][0].transcript.trim();
      const fromLang = fromSelect.value;
      const toLang = toSelect.value;

      const translated = await translateText(text, fromLang, toLang);
      currentTranslatedText.textContent = translated;

      // ✅ Only show spoken + translated text (no metadata)
      const formatted = `${text}\n${translated}\n\n`;
      transcriptData.push(formatted);
      fullTranscript.textContent = transcriptData.join('');
    };

    recognition.onerror = function(e) {
      console.error("Speech recognition error:", e);
    };

    function translateText(text, from, to) {
      const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${from}&tl=${to}&dt=t&q=${encodeURIComponent(text)}`;
      return fetch(url)
        .then(res => res.json())
        .then(data => data[0].map(item => item[0]).join(' '))
        .catch(() => '[Translation Error]');
    }

    function downloadTranscript() {
      const blob = new Blob([transcriptData.join('')], { type: 'text/plain' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'transcript.txt';
      link.click();
    }
  </script>
</body>
</html>

Leave Offline version of the translator app to:

Written by keeideas

Best Posts From keeideas

We have not curated any of keeideas's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

Offline version of the translator app