Offline version of the translator app

2 months 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

1 comments

@hivebuzz 74

28 days ago

Congratulations @keeideas! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

	You distributed more than 1500 upvotes. Your next target is to reach 1750 upvotes.

_{You can view your badges on your board and compare yourself to others in the Ranking}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

Check out our last posts:

	Our Hive Power Delegations to the May PUM Winners
	Feedback from the June Hive Power Up Day
	Hive Power Up Month Challenge - May 2025 Winners List

0.000