846693b097
Features: - OpenAI Whisper for audio transcription - DeepL API for translation (30+ languages) - Multiple output formats: TXT, VTT, SRT - Flask Python API backend - PHP frontend with black/gold theme - Support for 350MB files - Generates both original and translated files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
160 lines
No EOL
7.5 KiB
PHP
160 lines
No EOL
7.5 KiB
PHP
<?php
|
|
require_once 'config.php';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Voice to Text</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.3/dist/purify.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<img src="V2T.svg" alt="Voice to Text" class="logo">
|
|
|
|
<div id="initialInstruction" class="initial-instruction">
|
|
Before we start, select output format and upload the Voice File (Max 350 Megabytes in size)
|
|
</div>
|
|
|
|
<div class="format-selection">
|
|
<label for="outputFormat">Output Format:</label>
|
|
<select id="outputFormat" name="outputFormat">
|
|
<option value="txt">Text Document</option>
|
|
<option value="vtt">VTT (WebVTT)</option>
|
|
<option value="srt">SRT (SubRip)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="translation-section">
|
|
<div class="translation-toggle">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="enableTranslation" name="enableTranslation">
|
|
<span class="toggle-text">Translate with DeepL</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="languageSelector" class="language-selector" style="display: none;">
|
|
<label for="targetLanguage">Translate to:</label>
|
|
<select id="targetLanguage" name="targetLanguage">
|
|
<option value="BG">Bulgarian</option>
|
|
<option value="CS">Czech</option>
|
|
<option value="DA">Danish</option>
|
|
<option value="DE">German</option>
|
|
<option value="EL">Greek</option>
|
|
<option value="EN-GB">English (British)</option>
|
|
<option value="EN-US" selected>English (American)</option>
|
|
<option value="ES">Spanish</option>
|
|
<option value="ET">Estonian</option>
|
|
<option value="FI">Finnish</option>
|
|
<option value="FR">French</option>
|
|
<option value="HU">Hungarian</option>
|
|
<option value="ID">Indonesian</option>
|
|
<option value="IT">Italian</option>
|
|
<option value="JA">Japanese</option>
|
|
<option value="KO">Korean</option>
|
|
<option value="LT">Lithuanian</option>
|
|
<option value="LV">Latvian</option>
|
|
<option value="NB">Norwegian (Bokmål)</option>
|
|
<option value="NL">Dutch</option>
|
|
<option value="PL">Polish</option>
|
|
<option value="PT-BR">Portuguese (Brazilian)</option>
|
|
<option value="PT-PT">Portuguese (European)</option>
|
|
<option value="RO">Romanian</option>
|
|
<option value="RU">Russian</option>
|
|
<option value="SK">Slovak</option>
|
|
<option value="SL">Slovenian</option>
|
|
<option value="SV">Swedish</option>
|
|
<option value="TR">Turkish</option>
|
|
<option value="UK">Ukrainian</option>
|
|
<option value="ZH">Chinese (simplified)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="file-upload-container">
|
|
<label for="fileUpload" class="file-upload-label">Upload Voice File</label>
|
|
<input type="file" id="fileUpload" name="voiceFile" hidden>
|
|
</div>
|
|
|
|
<div id="chatArea" class="chat-area"></div>
|
|
|
|
<button id="downloadButton" style="display: none;">Download Response</button>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Toggle language selector when translation is enabled/disabled
|
|
$('#enableTranslation').on('change', function() {
|
|
if ($(this).is(':checked')) {
|
|
$('#languageSelector').slideDown(300);
|
|
} else {
|
|
$('#languageSelector').slideUp(300);
|
|
}
|
|
});
|
|
|
|
$('#fileUpload').on('change', function() {
|
|
var file = this.files[0];
|
|
if (file) {
|
|
var formData = new FormData();
|
|
formData.append('voiceFile', file);
|
|
formData.append('outputFormat', $('#outputFormat').val());
|
|
formData.append('enableTranslation', $('#enableTranslation').is(':checked') ? '1' : '0');
|
|
formData.append('targetLanguage', $('#targetLanguage').val());
|
|
|
|
$('#chatArea').html('<div class="processing-container"><div class="processing-text">Processing audio file...</div><div class="progress-bar"><div class="progress-bar-fill"></div></div></div>');
|
|
|
|
$.ajax({
|
|
url: 'process.php',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
var data = JSON.parse(response);
|
|
if (data.success) {
|
|
if (data.fileUrl) {
|
|
var message = '<div class="message bot-message">Transcription complete!<br>';
|
|
message += '<a href="' + data.fileUrl + '" download>Download Original ' + data.format.toUpperCase() + ' file</a>';
|
|
|
|
if (data.translatedFileUrl) {
|
|
message += '<br><a href="' + data.translatedFileUrl + '" download>Download Translated ' + data.format.toUpperCase() + ' file</a>';
|
|
}
|
|
|
|
message += '</div>';
|
|
$('#chatArea').html(message);
|
|
} else {
|
|
$('#chatArea').html('<div class="message bot-message">' + data.response + '</div>');
|
|
$('#downloadButton').show();
|
|
}
|
|
} else {
|
|
$('#chatArea').html('<div class="message error-message">' + data.error + '</div>');
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#chatArea').html('<div class="message error-message">An error occurred while processing the file.</div>');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#downloadButton').on('click', function() {
|
|
var responseText = $('.bot-message').text();
|
|
var blob = new Blob([responseText], { type: 'text/plain' });
|
|
var url = URL.createObjectURL(blob);
|
|
|
|
var a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'voice_to_text_response.txt';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|