Spaces:
Running
Running
| <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> |