Offline version of the translator app
hive-150329·@keeideas·
0.000 HBDOffline 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>
```
👍