Spaces:

devmanmikey
/

dynamic-comp-factory-wrapper

Running

App Files Files Community

devmanmikey commited on 10 days ago

Commit

35d45e9

verified ·

1 Parent(s): e960cb8

Upload 2 files

Browse files

Files changed (2) hide show

README_spaces.md +29 -0
openplatform-wrapper-spaces.html +222 -0

README_spaces.md ADDED Viewed

	@@ -0,0 +1,29 @@

+---
+title: Dynamic Component Factory - OpenPlatform Wrapper
+emoji: 🌍
+colorFrom: red
+colorTo: blue
+sdk: static
+sdk_version: 1.0.0
+app_file: openplatform-wrapper-spaces.html
+pinned: false
+license: apache-2.0
+---
+# Dynamic Component Factory - OpenPlatform Wrapper
+Static HTML wrapper for OpenPlatform integration with the Dynamic Component Factory Gradio app.
+## Setup Instructions
+1. **Gradio App URL**: Already configured to point to `https://devmanmikey-dynamic-comp-factory.hf.space`
+2. **Deploy to Hugging Face Spaces**: Push this repository to a new Space
+3. **Configure OpenPlatform**: Use the Space URL as your OpenPlatform app URL
+## Features
+- OpenPlatform authentication with MD5 signature verification
+- User profile fetching and management
+- Iframe communication with the Gradio app
+- Notification system integration
+- Responsive design with loading states

openplatform-wrapper-spaces.html ADDED Viewed

	@@ -0,0 +1,222 @@

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