Spaces:
Running
Running
File size: 1,954 Bytes
419dc63 365769f 419dc63 365769f 419dc63 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html>
<html>
<head>
<title>Gradio App</title>
<script src="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/gradio.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#app {
width: 80%;
max-width: 600px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
const app = new gradio.App({ cors: true });
function transcribeAudio(audio) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(audio);
reader.onloadend = () => {
const base64data = reader.result.split(',')[1]; // Encode audio to base64
fetch('/api/transcribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ audio: base64data })
})
.then(response => response.json())
.then(data => resolve(data.transcription))
.catch(error => reject('Error transcribing audio: ' + error));
};
});
}
app.launch(() => {
return [
gradio.Audio({ label: "Spracheingabe" }),
gradio.Textbox({ label: "Textausgabe" })
];
}, {
fn: transcribeAudio,
inputs: "audio",
outputs: "textbox",
title: "Sprachtranskription",
description: "Lade eine Audioaufnahme hoch oder spreche direkten Text ein."
});
</script>
</body>
</html>
|