devmanmikey/dynamic-comp-factory-wrapper
0
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Dynamic Component Factory - OpenPlatform</title>
7 <script src="https://cdn.componentator.com/total4.js/4.0.0/total4.js"></script>
8 <style>
9 body {
10 margin: 0;
11 padding: 0;
12 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13 background: #f5f5f5;
14 overflow: hidden;
15 }
16
17 .loading {
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 height: 100vh;
22 flex-direction: column;
23 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24 color: white;
25 }
26
27 .loading-spinner {
28 width: 50px;
29 height: 50px;
30 border: 4px solid rgba(255,255,255,0.3);
31 border-top: 4px solid white;
32 border-radius: 50%;
33 animation: spin 1s linear infinite;
34 margin-bottom: 20px;
35 }
36
37 @keyframes spin {
38 0% { transform: rotate(0deg); }
39 100% { transform: rotate(360deg); }
40 }
41
42 .error {
43 display: flex;
44 align-items: center;
45 justify-content: center;
46 height: 100vh;
47 flex-direction: column;
48 background: #f8f9fa;
49 color: #dc3545;
50 text-align: center;
51 padding: 20px;
52 }
53
54 .app-container {
55 width: 100vw;
56 height: 100vh;
57 position: relative;
58 }
59
60 iframe {
61 width: 100%;
62 height: 100%;
63 border: none;
64 display: none;
65 }
66
67 iframe.visible {
68 display: block;
69 }
70 </style>
71</head>
72<body>
73 <div id="loading" class="loading">
74 <div class="loading-spinner"></div>
75 <h2>Dynamic Component Factory</h2>
76 <p>Loading OpenPlatform integration...</p>
77 </div>
78
79 <div id="error" class="error" style="display: none;">
80 <h2>Authentication Error</h2>
81 <p id="error-message">Unable to verify OpenPlatform credentials</p>
82 </div>
83
84 <div id="app-container" class="app-container">
85 <iframe id="gradio-app" title="Dynamic Component Factory"></iframe>
86 </div>
87
88 <script>
89 // OpenPlatform configuration
90 const REQ_TOKEN = '1n9bkxk4qcxdiu0frs4oqbfvk3ikkbaulmt1xp8hk';
91 const RES_TOKEN = '7nk3iw88wvj6hn95dxko1x4tl86pd8km801vp5p7v';
92
93 // Gradio app URL - UPDATE THIS with your deployed Gradio app URL
94 const GRADIO_APP_URL = 'https://devmanmikey-dynamic-comp-factory.hf.space';
95
96 let userProfile = null;
97
98 // Initialize OpenPlatform integration
99 async function initOpenPlatform() {
100 try {
101 // Get OpenPlatform URL from query parameters
102 const urlParams = new URLSearchParams(window.location.search);
103 const openplatform = urlParams.get('openplatform');
104
105 if (!openplatform) {
106 throw new Error('No OpenPlatform parameter found');
107 }
108
109 console.log('OpenPlatform URL:', openplatform);
110
111 // Parse the token and signature
112 const data = openplatform.split('~');
113 if (data.length !== 2) {
114 throw new Error('Invalid OpenPlatform format');
115 }
116
117 const [tokenUrl, signature] = data;
118
119 // Verify signature
120 const expectedSignature = (tokenUrl + REQ_TOKEN).md5();
121 if (expectedSignature !== signature) {
122 throw new Error('Invalid signature');
123 }
124
125 console.log('Signature verified');
126
127 // Sign the response
128 const responseSignature = (signature + RES_TOKEN).md5();
129
130 // Get user profile
131 const response = await fetch(tokenUrl, {
132 method: 'GET',
133 headers: {
134 'x-token': responseSignature,
135 'Content-Type': 'application/json'
136 }
137 });
138
139 if (!response.ok) {
140 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
141 }
142
143 userProfile = await response.json();
144 console.log('User profile loaded:', userProfile);
145
146 // Set iframe src and show it
147 const iframe = document.getElementById('gradio-app');
148 iframe.src = GRADIO_APP_URL;
149
150 // Hide loading, show app
151 document.getElementById('loading').style.display = 'none';
152 iframe.classList.add('visible');
153
154 // Store user info for the Gradio app
155 window.openplatformUser = userProfile;
156
157 } catch (error) {
158 console.error('OpenPlatform initialization error:', error);
159 document.getElementById('loading').style.display = 'none';
160 document.getElementById('error').style.display = 'flex';
161 document.getElementById('error-message').textContent = error.message;
162 }
163 }
164
165 // Send notification to OpenPlatform
166 async function sendNotification(message, icon = 'ti ti-code', color = '#667eea') {
167 if (!userProfile || !userProfile.notify) {
168 console.warn('No notification endpoint available');
169 return;
170 }
171
172 try {
173 const notifyUrl = userProfile.notify;
174 const signature = ((notifyUrl + REQ_TOKEN).md5() + RES_TOKEN).md5();
175
176 const notification = {
177 body: message,
178 icon: icon,
179 color: color,
180 path: window.location.pathname
181 };
182
183 const response = await fetch(notifyUrl, {
184 method: 'POST',
185 headers: {
186 'x-token': signature,
187 'Content-Type': 'application/json'
188 },
189 body: JSON.stringify(notification)
190 });
191
192 if (response.ok) {
193 console.log('Notification sent successfully');
194 } else {
195 console.warn('Failed to send notification:', response.status);
196 }
197
198 } catch (error) {
199 console.error('Error sending notification:', error);
200 }
201 }
202
203 // Make functions available globally
204 window.sendOpenPlatformNotification = sendNotification;
205 window.getOpenPlatformUser = () => userProfile;
206
207 // Initialize when DOM is ready
208 document.addEventListener('DOMContentLoaded', initOpenPlatform);
209
210 // Handle iframe communication
211 window.addEventListener('message', function(event) {
212 // Allow messages from the Gradio app domain
213 if (event.origin !== new URL(GRADIO_APP_URL).origin) return;
214
215 // Handle messages from the Gradio app
216 if (event.data.type === 'openplatform-notification') {
217 sendNotification(event.data.message, event.data.icon, event.data.color);
218 }
219 });
220 </script>
221</body>
222</html>
223