Add support for using cached python package data for GPUOpen since it's mostly static now.

Author: kwokcb

flask/gpuopen/MaterialXGPUOpenApp.py

@@ -5,6 +5,7 @@
 import argparse
 import sys
 from flask import Flask, render_template
+import json
 from flask_socketio import SocketIO, emit
 from materialxMaterials import GPUOpenLoader as gpuo
 have_mx = False
@@ -121,8 +122,16 @@ def handle_download_materialx(self, data):
         self.loader.getRenders()
         self.material_names = self.loader.getMaterialNames()
 
-        # Convert materials to JSON and get the count
-        materials_list = self.loader.getMaterialsAsJsonString()
+        # Convert materials to JSON and add preview URLs
+        materials_list = []
+        for mat_json in self.loader.getMaterialsAsJsonString():
+            mat_obj = json.loads(mat_json)
+            # Add preview URL for each result
+            for result in mat_obj.get('results', []):
+                title = result.get('title')
+                result['url'] = self.loader.getMaterialPreviewURL(title)
+            materials_list.append(json.dumps(mat_obj))
+        # Sort list by title
         self.material_count = len(self.material_names)
 
         # Emit a status message

flask/gpuopen/static/js/MaterialXGPUOpenClient.js

@@ -87,7 +87,49 @@ export class MaterialX_GPUOpen_Client extends WebSocketClient
             if (firstMaterial) {
                 this.populateForm(firstMaterial);
             }
-        }        
+
+            // Render preview images in gallery using preview URL from backend
+            const gallery = document.getElementById('material_gallery');
+            gallery.innerHTML = '';
+            for (const element of this.materialsList) {
+                let materials = JSON.parse(element).results;
+                // Sort by title
+                materials.sort((a, b) => a.title.localeCompare(b.title));
+                if (materials) {
+                    for (const material of materials) 
+                    {
+                        if (material.url) {
+                            const col = document.createElement('div');
+                            col.className = 'col-md-3 col-lg-2 mb-4';
+
+                            col.innerHTML = `
+                                <div class="card material-card" data-material-id="${material.id}">
+                                    <img src="${material.thumb_url}" class="card-img-top material-img" alt="${material.name}" onerror="this.src=${svgDataUrl}">
+                                    <div class="card-body">
+                                        <div class="card-title">${material.title}</div>
+                                    </div>
+                                </div>
+                            `;
+
+                            //col.querySelector('.card').addEventListener('click', () => showMaterialDetails(material));
+                            //materialsContainer.appendChild(col);
+
+                            /*const col = document.createElement('div');
+                            col.className = 'col-auto mb-2';
+                            col.innerHTML = `
+                                <div class="card" style="width: 8rem;">
+                                    <img src="${result.url}" class="card-img-top" alt="Preview">
+                                    <div class="card-body p-2">
+                                        <div class="card-title x-small">${result.title || 'Material'}</div>
+                                    </div>
+                                </div>
+                            `;*/
+                            gallery.appendChild(col);
+                        }
+                    }
+                }
+            }
+        }
     }
 
     handleMaterialXExtract(data) 

flask/gpuopen/templates/MaterialXGPUOpenApp.html

@@ -30,6 +30,21 @@
             border: solid thin lightskyblue;
             height: 50em;
         }
+        .material-card {
+            transition: transform 0.2s;
+            cursor: pointer;
+            height: 100%;
+        }
+
+        .material-card:hover {
+            transform: scale(1.03);
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+        }
+
+        .material-img {
+            height: 180px;
+            object-fit: cover;
+        }
     </style>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
@@ -52,6 +67,14 @@ <h2 id="title">GPUOpen MaterialX Inspector</h2>
             </div>  
         </div>
 
+        <!-- Gallery area for preview images -->
+        <div class="container mt-3 p-2 border border-prinary rounded-3" id="gallery_area" style="max-height: 500px; overflow-y: auto;">
+            <h5>Material Gallery</h5>
+            <div class="row" id="material_gallery">
+                <!-- Preview images will be inserted here -->
+            </div>
+        </div>
+
         <div class="container p-2 border border-primary rounded-3">
             <h4 class="mb-4">Materials List</h4>
             <select class="form-select mb-3" id="materialSelect">
@@ -163,14 +186,14 @@ <h4 class="mb-4">Material Details</h4>
     <script src="https://cdn.jsdelivr.net/npm/jszip@3.7.1/dist/jszip.min.js"></script>
     <script type="module">
 
-        import { MaterialX_GPUOpen_Client } from "{{ url_for('static', filename='js/MaterialXGPUOpenClient.js') }}";
+         import { MaterialX_GPUOpen_Client } from "{{ url_for('static', filename='js/MaterialXGPUOpenClient.js') }}";
 
-        document.addEventListener("DOMContentLoaded", () => {
-            document.body.setAttribute('data-bs-theme', 'dark');
+         document.addEventListener("DOMContentLoaded", () => {
+             document.body.setAttribute('data-bs-theme', 'dark');
 
-            // Instantiate the client
-            const client = new MaterialX_GPUOpen_Client("", "");
-        });
+             // Instantiate the client
+             const client = new MaterialX_GPUOpen_Client("", "");
+         });
     </script>
 </body>