File size: 5,100 Bytes
2d7fc20 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BitCheck Audio Verification Test</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; line-height: 1.6; color: #333; }
.container { background: #f9f9f9; padding: 25px; border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
input[type="file"] { width: 100%; padding: 10px; background: white; border: 1px solid #ccc; border-radius: 4px; }
button { background: #2563eb; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold; transition: background 0.2s; }
button:hover { background: #1d4ed8; }
button:disabled { background: #9ca3af; cursor: not-allowed; }
#result { margin-top: 25px; background: #1f2937; color: #f8fafc; padding: 20px; border-radius: 6px; white-space: pre-wrap; font-family: "JetBrains Mono", Consolas, monospace; font-size: 14px; overflow-x: auto; display: none; }
.loading { display: none; margin-top: 15px; color: #4b5563; font-weight: 500; }
.header { margin-bottom: 30px; }
</style>
</head>
<body>
<div class="header">
<h1>BitCheck Audio API Tester</h1>
<p>Upload an audio or video file to test the AI verification model hosted on Hugging Face.</p>
</div>
<div class="container">
<form id="uploadForm">
<div class="form-group">
<label for="audioFile">Select Audio/Video File:</label>
<input type="file" id="audioFile" name="file" accept="audio/*,video/*" required>
</div>
<div class="form-group">
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" id="returnFeatures" name="return_features" value="true">
Include extracted raw features in response
</label>
</div>
<button type="submit" id="submitBtn">Verify Audio</button>
<div class="loading" id="loadingIndicator">⏳ Uploading and verifying... This may take a moment.</div>
</form>
<div id="result"></div>
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
e.preventDefault();
const fileInput = document.getElementById('audioFile');
const returnFeatures = document.getElementById('returnFeatures').checked;
const submitBtn = document.getElementById('submitBtn');
const loading = document.getElementById('loadingIndicator');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
alert('Please select a file first.');
return;
}
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('return_features', returnFeatures ? 'true' : 'false');
// Disable UI while processing
submitBtn.disabled = true;
loading.style.display = 'block';
resultDiv.style.display = 'none';
resultDiv.textContent = '';
try {
// Pointing to your deployed Hugging Face Space endpoint
const apiUrl = 'https://jaykay73-bitcheck-audio.hf.space/verify/audio';
const response = await fetch(apiUrl, {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
}
});
const contentType = response.headers.get("content-type");
if (contentType && contentType.indexOf("application/json") !== -1) {
const data = await response.json();
resultDiv.textContent = JSON.stringify(data, null, 2);
} else {
const textData = await response.text();
resultDiv.textContent = `Error: The server returned an HTML/Text page instead of JSON. This usually means the Space is not found, is still building, or is asleep.\n\nStatus: ${response.status}\n\nResponse preview:\n${textData.substring(0, 500)}`;
}
resultDiv.style.display = 'block';
} catch (error) {
resultDiv.textContent = 'Error: ' + error.message;
resultDiv.style.display = 'block';
} finally {
submitBtn.disabled = false;
loading.style.display = 'none';
}
});
</script>
</body>
</html>
|