Offline version of the translator app

18 days ago (Edited)

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>

proofofbrain

0.000

0 comments