User new APIs to get preview URL for display. (#13)

Author: kwokcb

flask/gpuopen/MaterialXGPUOpenApp.py

@@ -97,6 +97,7 @@ def handle_download_materialx(self, data):
         # Initialize the loader and fetch materials
         self.loader = gpuo.GPUOpenMaterialLoader()
         self.materials = self.loader.getMaterials()
+        self.loader.getRenders()
         self.material_names = self.loader.getMaterialNames()
 
         # Convert materials to JSON and get the count
@@ -159,10 +160,12 @@ def handle_extract_material(self, data):
                         self._emit_status_message(f'- Image file {file_name}')
                         image = item["data"]
                         image_base64 = self.loader.convertPilImageToBase64(image)
-                        return_data[file_name] = image_base64
+                        return_data[file_name] = image_base64                    
 
             if len(return_data) > 0:
-                return_list.append({'title': title, 'data': return_data})
+                url = self.loader.getMaterialPreviewURL(title)
+                self._emit_status_message(f'Preview URL: {url}')
+                return_list.append({'title': title, 'data': return_data, 'url': url})
 
         if len(return_list) == 0:
             self._emit_status_message('No materials extracted')

flask/gpuopen/static/js/MaterialXGPUOpenClient.js

@@ -92,6 +92,9 @@ export class MaterialX_GPUOpen_Client extends WebSocketClient
         const title = extractedData.title;
         console.log('Title:', title);
 
+        const preview_url = extractedData.url;
+        console.log('URL:', preview_url);
+
         const dataObj = extractedData.data;
         const imageDOM = document.getElementById('extracted_images');
         imageDOM.innerHTML = ''; // Clear existing images
@@ -103,6 +106,7 @@ export class MaterialX_GPUOpen_Client extends WebSocketClient
         // Optionally save zip of data to file.
         let save_extracted = document.getElementById('save_extracted').checked;
         let zip = save_extracted ? new JSZip() : null;
+        
         for (const key in dataObj) {
             if (key.endsWith('.mtlx')) {
                 this.extractedEditor.setValue(dataObj[key]);
@@ -157,6 +161,26 @@ export class MaterialX_GPUOpen_Client extends WebSocketClient
             }
         }
 
+        if (preview_url) {
+            // Create a container for the image and label
+            const imageContainer = document.createElement('div');
+            imageContainer.style.display = 'inline-block';
+            imageContainer.style.margin = '10px';
+            imageContainer.style.textAlign = 'center'; // Center the label under the image
+            
+            // Create the image element
+            const img = document.createElement('img');
+            img.src = preview_url;
+            img.width = 200;
+            img.alt = "";
+            
+            // Add the key as a tooltip
+            img.title = "Preview render"; 
+                    
+            imageContainer.appendChild(img);
+            imageDOM.appendChild(imageContainer);
+        }
+
         // Create the zip file asynchronously
         if (zip)
         {