Spaces:
Sleeping
Sleeping
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Is this Audio Real or AI? Let's Detect!</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f0f2f5; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| .container { | |
| background-color: #fff; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| width: 90%; | |
| max-width: 500px; | |
| } | |
| h1 { | |
| color: #333; | |
| } | |
| p { | |
| color: #666; | |
| margin-bottom: 1.5rem; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; /* Aumentado o espaço */ | |
| } | |
| input[type="text"], input[type="file"] { | |
| padding: 0.75rem; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| font-size: 1rem; | |
| } | |
| button { | |
| padding: 0.75rem; | |
| border: none; | |
| border-radius: 4px; | |
| background-color: #007bff; | |
| color: #fff; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| .result-box { | |
| margin-top: 2rem; | |
| padding: 1rem; | |
| border: 1px dashed #007bff; | |
| border-radius: 4px; | |
| background-color: #eaf5ff; | |
| min-height: 50px; | |
| word-wrap: break-word; | |
| } | |
| .input-options { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>AI or Real Audio?</h1> | |
| <p>Select an input method: upload an audio/video file (MP3, MP4, WAV) or provide a URL from a platform like YouTube or Twitter.</p> | |
| <div class="input-options"> | |
| <label> | |
| <input type="radio" name="inputType" value="url" checked> URL | |
| </label> | |
| <label> | |
| <input type="radio" name="inputType" value="file"> File Upload | |
| </label> | |
| </div> | |
| <form id="classifyForm"> | |
| <div id="urlInputContainer"> | |
| <input type="text" id="url" placeholder="Example: https://www.youtube.com/watch?v=..."> | |
| </div> | |
| <div id="fileInputContainer" style="display: none;"> | |
| <input type="file" id="file" accept=".mp3,.mp4,.wav,.m4a"> | |
| </div> | |
| <button type="submit">Classify</button> | |
| </form> | |
| <div id="result" class="result-box"> | |
| Waiting for input... | |
| </div> | |
| </div> | |
| <script> | |
| const form = document.getElementById('classifyForm'); | |
| const urlInput = document.getElementById('url'); | |
| const fileInput = document.getElementById('file'); | |
| const resultBox = document.getElementById('result'); | |
| const urlInputContainer = document.getElementById('urlInputContainer'); | |
| const fileInputContainer = document.getElementById('fileInputContainer'); | |
| const inputTypeRadios = document.querySelectorAll('input[name="inputType"]'); | |
| inputTypeRadios.forEach(radio => { | |
| radio.addEventListener('change', (e) => { | |
| if (e.target.value === 'url') { | |
| urlInputContainer.style.display = 'block'; | |
| fileInputContainer.style.display = 'none'; | |
| } else { | |
| urlInputContainer.style.display = 'none'; | |
| fileInputContainer.style.display = 'block'; | |
| } | |
| }); | |
| }); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const selectedInputType = document.querySelector('input[name="inputType"]:checked').value; | |
| const formData = new FormData(); | |
| if (selectedInputType === 'url') { | |
| const url = urlInput.value; | |
| if (!url) { | |
| resultBox.textContent = 'Please, provide an URL.'; | |
| resultBox.style.color = 'red'; | |
| return; | |
| } | |
| formData.append('url', url); | |
| } else { | |
| const file = fileInput.files[0]; | |
| if (!file) { | |
| resultBox.textContent = 'Please, select a file.'; | |
| resultBox.style.color = 'red'; | |
| return; | |
| } | |
| formData.append('file', file); | |
| } | |
| resultBox.textContent = "Classifying..."; | |
| resultBox.style.color = '#007bff'; | |
| try { | |
| const response = await fetch('/api/classify', { | |
| method: 'POST', | |
| body: formData, // FormData é enviado sem o header 'Content-Type' | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| resultBox.textContent = `Result: ${data.label} (Probability: ${(data.probability * 100).toFixed(2)}%)`; | |
| resultBox.style.color = 'green'; | |
| } else { | |
| resultBox.textContent = `Error: ${data.detail || 'Not possible to classify audio.'}`; | |
| resultBox.style.color = 'red'; | |
| } | |
| } catch (error) { | |
| resultBox.textContent = `Conection error: ${error.message}`; | |
| resultBox.style.color = 'red'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |