Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Audio Conversion Form</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 20px; | |
| } | |
| form { | |
| max-width: 600px; | |
| margin: auto; | |
| padding: 20px; | |
| border: 1px solid #ccc; | |
| border-radius: 10px; | |
| background-color: #f9f9f9; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| } | |
| input, select { | |
| width: 100%; | |
| margin-bottom: 15px; | |
| padding: 8px; | |
| box-sizing: border-box; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #007BFF; | |
| color: #fff; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| background-color: #ccc; | |
| } | |
| .error { | |
| color: red; | |
| font-size: 0.9em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Audio Conversion Form</h1> | |
| <p>Fill in the form below to convert your audio files. Please ensure all inputs are valid.</p> | |
| <form id="conversionForm" enctype="multipart/form-data"> | |
| <label for="source">Source File (Required):</label> | |
| <input type="file" id="source" name="source" accept=".wav,.mp3" required> | |
| <span id="sourceError" class="error"></span> | |
| <label for="target">Target File (Required):</label> | |
| <input type="file" id="target" name="target" accept=".wav,.mp3" required> | |
| <span id="targetError" class="error"></span> | |
| <label for="diffusion_steps">Diffusion Steps (Integer, Required):</label> | |
| <input type="number" id="diffusion_steps" name="diffusion_steps" min="1" step="1" value="25" required> | |
| <span id="stepsError" class="error"></span> | |
| <label for="length_adjust">Length Adjust (Float, Optional):</label> | |
| <input type="number" id="length_adjust" name="length_adjust" step="0.01" value="1" required> | |
| <label for="inference_cfg_rate">Inference CFG Rate (Float, Optional):</label> | |
| <input type="number" id="inference_cfg_rate" name="inference_cfg_rate" step="0.01" value="0.7" required> | |
| <label for="f0_condition">F0 Condition (Yes/No):</label> | |
| <select id="f0_condition" name="f0_condition" required> | |
| <option value="true">Yes</option> | |
| <option value="false" seleced>No</option> | |
| </select> | |
| <label for="auto_f0_adjust">Auto F0 Adjust (Yes/No):</label> | |
| <select id="auto_f0_adjust" name="auto_f0_adjust" required> | |
| <option value="true" seleced>Yes</option> | |
| <option value="false">No</option> | |
| </select> | |
| <label for="pitch_shift">Pitch Shift (Integer, Optional):</label> | |
| <input type="number" id="pitch_shift" name="pitch_shift" step="1" value="0" required> | |
| <button type="submit">Convert</button> | |
| </form> | |
| <p id="outputMessage"></p> | |
| <audio id="resultAudio" controls style="display:none;"></audio> | |
| <script> | |
| document.getElementById('conversionForm').addEventListener('submit', async (event) => { | |
| event.preventDefault(); // Prevent form submission | |
| const form = event.target; | |
| const formData = new FormData(form); | |
| // Reset error messages | |
| document.querySelectorAll('.error').forEach(el => el.textContent = ''); | |
| // Validate inputs | |
| let isValid = true; | |
| if (!formData.get('source')) { | |
| document.getElementById('sourceError').textContent = 'Source file is required.'; | |
| isValid = false; | |
| } | |
| if (!formData.get('target')) { | |
| document.getElementById('targetError').textContent = 'Target file is required.'; | |
| isValid = false; | |
| } | |
| if (!isValid) return; | |
| try { | |
| // Disable the button to prevent multiple submissions | |
| form.querySelector('button').disabled = true; | |
| const response = await fetch('https://soiz-seed-vc-api.hf.space/convert', { | |
| method: 'POST', | |
| body: formData, | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`Server error: ${response.statusText}`); | |
| } | |
| // Handle the response | |
| const blob = await response.blob(); | |
| const audioURL = URL.createObjectURL(blob); | |
| const resultAudio = document.getElementById('resultAudio'); | |
| resultAudio.src = audioURL; | |
| resultAudio.style.display = 'block'; | |
| document.getElementById('outputMessage').textContent = 'Conversion successful! Listen to the result below.'; | |
| } catch (error) { | |
| console.error(error); | |
| document.getElementById('outputMessage').textContent = `Error: ${error.message}`; | |
| } finally { | |
| form.querySelector('button').disabled = false; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |