|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Dynamic Component Factory - OpenPlatform</title> |
|
|
<script src="https://cdn.componentator.com/total4.js/4.0.0/total4.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> |
|
|
|
|
|
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.1.4/gradio.js"></script> |
|
|
<style> |
|
|
body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f5f5f5; overflow:hidden; } |
|
|
.loading { display:flex; align-items:center; justify-content:center; height:100vh; flex-direction:column; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; } |
|
|
.loading-spinner { width:50px; height:50px; border:4px solid rgba(255,255,255,0.3); border-top:4px solid white; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:20px; } |
|
|
@keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } |
|
|
.error { display:flex; align-items:center; justify-content:center; height:100vh; flex-direction:column; background:#f8f9fa; color:#dc3545; text-align:center; padding:20px; } |
|
|
.app-container { width:100vw; height:100vh; position:relative; display:none; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="loading" class="loading"> |
|
|
<div class="loading-spinner"></div> |
|
|
<h2>Dynamic Component Factory</h2> |
|
|
<p>Loading OpenPlatform integration...</p> |
|
|
</div> |
|
|
|
|
|
<div id="error" class="error" style="display:none;"> |
|
|
<h2>Authentication Error</h2> |
|
|
<p id="error-message">Unable to verify OpenPlatform credentials</p> |
|
|
</div> |
|
|
|
|
|
<div id="app-container" class="app-container"> |
|
|
|
|
|
<gradio-app |
|
|
id="gradio-app" |
|
|
space="devmanmikey/dynamic-comp-factory" |
|
|
theme="default" |
|
|
style="width:100%; height:100vh;"> |
|
|
</gradio-app> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const REQ_TOKEN = '1n9bkxk4qcxdiu0frs4oqbfvk3ikkbaulmt1xp8hk'; |
|
|
const RES_TOKEN = '7nk3iw88wvj6hn95dxko1x4tl86pd8km801vp5p7v'; |
|
|
let userProfile = null; |
|
|
|
|
|
async function initOpenPlatform() { |
|
|
try { |
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
const openplatform = urlParams.get('openplatform'); |
|
|
if (!openplatform) throw new Error('No OpenPlatform parameter found'); |
|
|
|
|
|
const data = openplatform.split('~'); |
|
|
if (data.length !== 2) throw new Error('Invalid OpenPlatform format'); |
|
|
const [tokenUrl, signature] = data; |
|
|
|
|
|
const expectedSignature = CryptoJS.MD5(tokenUrl + REQ_TOKEN).toString(); |
|
|
if (expectedSignature !== signature) throw new Error('Invalid signature'); |
|
|
|
|
|
const responseSignature = CryptoJS.MD5(signature + RES_TOKEN).toString(); |
|
|
const response = await fetch(tokenUrl, { |
|
|
method: 'GET', |
|
|
headers: { 'x-token': responseSignature, 'Content-Type': 'application/json' } |
|
|
}); |
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`); |
|
|
|
|
|
userProfile = await response.json(); |
|
|
window.openplatformUser = userProfile; |
|
|
|
|
|
|
|
|
document.getElementById('loading').style.display = 'none'; |
|
|
document.getElementById('app-container').style.display = 'block'; |
|
|
|
|
|
} catch (error) { |
|
|
console.error('OpenPlatform initialization error:', error); |
|
|
document.getElementById('loading').style.display = 'none'; |
|
|
document.getElementById('error').style.display = 'flex'; |
|
|
document.getElementById('error-message').textContent = error.message; |
|
|
} |
|
|
} |
|
|
|
|
|
async function sendNotification(message, icon = 'ti ti-code', color = '#667eea') { |
|
|
if (!userProfile || !userProfile.notify) return; |
|
|
try { |
|
|
const notifyUrl = userProfile.notify; |
|
|
const signature = CryptoJS.MD5((notifyUrl + REQ_TOKEN) + RES_TOKEN).toString(); |
|
|
const notification = { body: message, icon, color, path: window.location.pathname }; |
|
|
await fetch(notifyUrl, { |
|
|
method: 'POST', |
|
|
headers: { 'x-token': signature, 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(notification) |
|
|
}); |
|
|
} catch (err) { console.error('Error sending notification:', err); } |
|
|
} |
|
|
|
|
|
window.sendOpenPlatformNotification = sendNotification; |
|
|
window.getOpenPlatformUser = () => userProfile; |
|
|
document.addEventListener('DOMContentLoaded', initOpenPlatform); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
