Spaces:
Running
Running
File size: 5,298 Bytes
8ae4519 43381cc 8ae4519 43381cc 8ae4519 43381cc 8ae4519 43381cc 8ae4519 43381cc 8ae4519 43381cc 8ae4519 43381cc |
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<!DOCTYPE html>
<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> |