Spaces:

devmanmikey
/

dynamic-comp-factory-wrapper

Running

App Files Files Community

devmanmikey commited on 9 days ago

Commit

286f233

verified ·

1 Parent(s): 86e8fee

Update index.html

Browse files

Files changed (1) hide show

index.html +94 -216

index.html CHANGED Viewed

@@ -1,223 +1,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>
-    <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://dc.inspiraus.work';
-        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 = CryptoJS.MD5(tokenUrl + REQ_TOKEN).toString();
-                if (expectedSignature !== signature) {
-                    throw new Error('Invalid signature');
-                }
-                console.log('Signature verified');
-                // Sign the response
-                const responseSignature = CryptoJS.MD5(signature + RES_TOKEN).toString();
-                // 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 = CryptoJS.MD5((notifyUrl + REQ_TOKEN) + RES_TOKEN).toString();
-                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>

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