File size: 4,597 Bytes
86e8fee 286f233 86e8fee 286f233 86e8fee 286f233 86e8fee 286f233 | 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 | <!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>
<!-- Add Gradio embed 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">
<!-- Replace iframe with gradio-app -->
<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;
// Show the app
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> |