| <!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> |
