128 lines
4.7 KiB
Plaintext
128 lines
4.7 KiB
Plaintext
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import AudioToText from "../../components/Tools/AudioToText"
|
|
---
|
|
|
|
<Layout title="Whisper CPP Light">
|
|
<AudioToText client:load />
|
|
</Layout>
|
|
<!-- <div class="container mx-auto px-4" id="stt-container">
|
|
<h1 class="text-2xl font-bold mb-4">Audio File to STT</h1>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="audioFile">
|
|
Upload Audio File (WAV format recommended)
|
|
</label>
|
|
<input
|
|
type="file"
|
|
id="audioFile"
|
|
accept="audio/*,.wav"
|
|
class="block w-full text-sm text-gray-500
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded-md file:border-0
|
|
file:text-sm file:font-semibold
|
|
file:bg-blue-50 file:text-blue-700
|
|
hover:file:bg-blue-100"
|
|
>
|
|
<p class="mt-1 text-sm text-gray-500">Supported formats: WAV, MP3, OGG, etc.</p>
|
|
</div>
|
|
|
|
<button
|
|
id="sendBtn"
|
|
disabled
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
Send to STT API
|
|
</button>
|
|
|
|
<div class="mt-6">
|
|
<h2 class="text-xl font-semibold mb-2">API Response</h2>
|
|
<div id="responseContainer" class="p-4 bg-gray-100 rounded-md min-h-20">
|
|
<p id="statusMessage" class="text-gray-600">No file uploaded yet</p>
|
|
<pre id="apiResponse" class="hidden mt-2 p-2 bg-white rounded overflow-auto"></pre>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- <script is:inline>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const audioFileInput = document.getElementById('audioFile');
|
|
const sendBtn = document.getElementById('sendBtn');
|
|
const statusMessage = document.getElementById('statusMessage');
|
|
const apiResponse = document.getElementById('apiResponse');
|
|
const responseContainer = document.getElementById('responseContainer');
|
|
|
|
// Enable send button when a file is selected
|
|
audioFileInput.addEventListener('change', () => {
|
|
if (audioFileInput.files.length > 0) {
|
|
sendBtn.disabled = false;
|
|
statusMessage.textContent = `File selected: ${audioFileInput.files[0].name}`;
|
|
} else {
|
|
sendBtn.disabled = true;
|
|
statusMessage.textContent = 'No file selected';
|
|
}
|
|
apiResponse.classList.add('hidden');
|
|
});
|
|
|
|
// Handle sending to STT API
|
|
sendBtn.addEventListener('click', async () => {
|
|
if (audioFileInput.files.length === 0) return;
|
|
|
|
const file = audioFileInput.files[0];
|
|
|
|
try {
|
|
// Show loading state
|
|
sendBtn.disabled = true;
|
|
sendBtn.textContent = 'Processing...';
|
|
statusMessage.textContent = `Sending ${file.name} to STT API...`;
|
|
apiResponse.classList.add('hidden');
|
|
responseContainer.classList.remove('bg-red-50', 'bg-green-50');
|
|
responseContainer.classList.add('bg-blue-50');
|
|
|
|
// Create FormData and append the file
|
|
const formData = new FormData();
|
|
formData.append('audio', file);
|
|
|
|
// Send to STT API
|
|
const response = await fetch('https://stt-41.siliconpin.com/stt', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
|
|
// Display results
|
|
apiResponse.textContent = JSON.stringify(result, null, 2);
|
|
apiResponse.classList.remove('hidden');
|
|
statusMessage.textContent = 'STT API Response:';
|
|
responseContainer.classList.remove('bg-blue-50');
|
|
responseContainer.classList.add('bg-green-50');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
statusMessage.textContent = `Error: ${error.message}`;
|
|
responseContainer.classList.remove('bg-blue-50');
|
|
responseContainer.classList.add('bg-red-50');
|
|
} finally {
|
|
sendBtn.disabled = false;
|
|
sendBtn.textContent = 'Send to STT API';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Additional styling if needed */
|
|
#stt-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
#apiResponse {
|
|
max-height: 300px;
|
|
}
|
|
</style> --> |