openplatform-wrapper-spaces.html

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

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
        }

        iframe.visible {
            display: block;
        }
    </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">
        <iframe id="gradio-app" title="Dynamic Component Factory"></iframe>
    </div>

    <script>
        // OpenPlatform configuration
        const REQ_TOKEN = '1n9bkxk4qcxdiu0frs4oqbfvk3ikkbaulmt1xp8hk';
        const RES_TOKEN = '7nk3iw88wvj6hn95dxko1x4tl86pd8km801vp5p7v';

        // Gradio app URL - UPDATE THIS with your deployed Gradio app URL
        const GRADIO_APP_URL = 'https://devmanmikey-dynamic-comp-factory.hf.space';

        let userProfile = null;

        // Initialize OpenPlatform integration
        async function initOpenPlatform() {
            try {
                // Get OpenPlatform URL from query parameters
                const urlParams = new URLSearchParams(window.location.search);
                const openplatform = urlParams.get('openplatform');

                if (!openplatform) {
                    throw new Error('No OpenPlatform parameter found');
                }

                console.log('OpenPlatform URL:', openplatform);

                // Parse the token and signature
                const data = openplatform.split('~');
                if (data.length !== 2) {
                    throw new Error('Invalid OpenPlatform format');
                }

                const [tokenUrl, signature] = data;

                // Verify signature
                const expectedSignature = (tokenUrl + REQ_TOKEN).md5();
                if (expectedSignature !== signature) {
                    throw new Error('Invalid signature');
                }

                console.log('Signature verified');

                // Sign the response
                const responseSignature = (signature + RES_TOKEN).md5();

                // Get user profile
                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();
                console.log('User profile loaded:', userProfile);

                // Set iframe src and show it
                const iframe = document.getElementById('gradio-app');
                iframe.src = GRADIO_APP_URL;

                // Hide loading, show app
                document.getElementById('loading').style.display = 'none';
                iframe.classList.add('visible');

                // Store user info for the Gradio app
                window.openplatformUser = userProfile;

            } 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;
            }
        }

        // Send notification to OpenPlatform
        async function sendNotification(message, icon = 'ti ti-code', color = '#667eea') {
            if (!userProfile || !userProfile.notify) {
                console.warn('No notification endpoint available');
                return;
            }

            try {
                const notifyUrl = userProfile.notify;
                const signature = ((notifyUrl + REQ_TOKEN).md5() + RES_TOKEN).md5();

                const notification = {
                    body: message,
                    icon: icon,
                    color: color,
                    path: window.location.pathname
                };

                const response = await fetch(notifyUrl, {
                    method: 'POST',
                    headers: {
                        'x-token': signature,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(notification)
                });

                if (response.ok) {
                    console.log('Notification sent successfully');
                } else {
                    console.warn('Failed to send notification:', response.status);
                }

            } catch (error) {
                console.error('Error sending notification:', error);
            }
        }

        // Make functions available globally
        window.sendOpenPlatformNotification = sendNotification;
        window.getOpenPlatformUser = () => userProfile;

        // Initialize when DOM is ready
        document.addEventListener('DOMContentLoaded', initOpenPlatform);

        // Handle iframe communication
        window.addEventListener('message', function(event) {
            // Allow messages from the Gradio app domain
            if (event.origin !== new URL(GRADIO_APP_URL).origin) return;

            // Handle messages from the Gradio app
            if (event.data.type === 'openplatform-notification') {
                sendNotification(event.data.message, event.data.icon, event.data.color);
            }
        });
    </script>
</body>
</html>