Spaces:
Running
Running
File size: 5,073 Bytes
674bcb3 94ad3da 0f62cae 674bcb3 0f62cae 674bcb3 0f62cae 674bcb3 0f62cae 674bcb3 40f2f07 674bcb3 a19a5e8 674bcb3 0f62cae 674bcb3 0f62cae 674bcb3 0f62cae ca0d494 674bcb3 0f62cae 674bcb3 0f62cae 40f2f07 0f62cae 674bcb3 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semibit Media Render</title>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main style="margin-top:100px" class="mdl-layout__content">
<div class="mdl-card mdl-shadow--6dp" style="max-width:80%; margin: 0 auto; padding: 16px;">
<h3 style="text-align: center;">Render Asset
Bundle</h3>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="file" id="fileInput" required>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" onclick="uploadFile()">
Upload
</button>
<p id="statusMessage" style="margin-top: 16px;"></p>
<h4>Job Status Subscription</h4>
<label for="jobId">Enter Job ID:</label>
<input type="text" id="jobId" name="jobId" required>
<button id="subscribeJob" type="button">Subscribe</button>
<h4>Job Status Updates</h4>
<p id="statusUpdates"></p>
</div>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
const fileInput = document.getElementById('fileInput');
const statusMessage = document.getElementById('statusMessage');
async function uploadFile() {
if (fileInput.files.length === 0) {
statusMessage.textContent = 'Please select a file.';
return;
}
const file = fileInput.files[0];
const apiUrl = "https://public.semibit.in/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzZW1pYml0IiwiaWF0IjoxNzQ5MDQ5NTg5LCJleHAiOjIwOTYyMDQ3ODksImF1ZCI6Ind3dy5zZW1pYml0LmluIiwic3ViIjoiYWRtaW5Ac2VtaWJpdC5pbiIsImlkIjoiMTJhMzdlODRkZCIsIm5hbWUiOiJzZW1pYml0IiwiZW1haWwiOiJhZG1pbkBzZW1pYml0LmluIiwiYXZhdGFyIjoiaHR0cHM6Ly93d3cuc2VtaWJpdC5pbi9sb2dvLnBuZyIsInBhdGgiOiJeKC90ZW1wKS9zZW1pYml0LW1lZGlhLy4qIiwic2NvcGUiOiJyZWFkLHdyaXRlIn0.dRIcmPxPBwaoOnZs0E6W-ftF-4ki-rdV1EUdrnu5Shw/temp/";
const uploadUrl = apiUrl + encodeURIComponent(file.name);
statusMessage.textContent = 'Uploading...';
try {
var response = await fetch(uploadUrl, {
method: 'PUT',
body: file,
headers: {
'Content-Type': file.type,
},
});
if (response.ok) {
statusMessage.textContent = 'File uploaded successfully! Triggering Render';
let renderUrl = window.location.origin + '/render?fileUrl=' + encodeURIComponent(uploadUrl)
response = await fetch(renderUrl);
if (response.ok) {
let jobId = response.statusText
document.getElementById('jobId').value = jobId
const subscriptionForm = document.getElementById('subscribeJob');
subscriptionForm.click()
response.text().then(t => {
let rep = JSON.parse(t)
statusMessage.innerHTML = 'Render completed succesfully.<br>' + t;
if (rep.url)
statusUpdates.innerHTML = `<a href="${rep.url}" style="color: green;">${rep.url}</a>`;
})
}
else
statusMessage.textContent = 'Render Failed ' + response.statusText;
} else {
statusMessage.textContent = 'Error uploading file: ' + response.statusText;
}
} catch (error) {
console.error('Error uploading file:', error);
statusMessage.textContent = 'Error uploading file: ' + error.message;
}
}
const socket = io();
const subscriptionForm = document.getElementById('subscribeJob');
subscriptionForm.addEventListener('click', (event) => {
event.preventDefault();
const jobId = document.getElementById('jobId').value;
socket.emit('subscribe_job', jobId);
});
const listItem = document.createElement('span');
listItem.textContent = `Connected`;
statusUpdates.appendChild(listItem);
socket.on('job_status', (data) => {
const statusUpdates = document.getElementById('statusUpdates');
let str = data.msg?.message
if (typeof str == "object")
str = JSON.stringify(str)
listItem.textContent = `${str}`;
});
var jobId = getParameterByName('job_id');
if (jobId) {
document.getElementById('jobId').value = jobId
const subscriptionForm = document.getElementById('subscribeJob');
subscriptionForm.click()
}
</script>
</body>
</html> |