gradio_html / index.html
mgokg's picture
Update index.html
419dc63 verified
raw
history blame
2.68 kB
Qwen2.5-Coder-32B with Hyperbolic API
erstelle eine gradio app mit einer cors komponente, spracheingabe und textausgabe. transkripiere die sprachufnahme zu text und geb ihn aus
examples
Qwen,Start!
Help me design an interface with a purple button that says 'Qwen, Start!'. When the button is clicked, display a countdown from 5 in a very large font for 5 seconds.
Spam with emojis!
Write code in a single HTML file: Capture the click event, place a random number of emojis at the click position, and add gravity and collision effects to each emoji.
TODO list
I want a TODO list that allows me to add tasks, delete tasks, and I would like the overall color theme to be purple.
setting
·
Mit Gradio erstellt logo
code
html
<!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>