Added config to GUI

Author: oskip0906

README.md

@@ -102,7 +102,7 @@ For controlled rendering of 2 selected objects, navigate to the `render_single.s
 
 _This script is useful for **testing and fine-tuning** object placements before batch rendering._
 
-### **Adding AI-generated Backgrounds (EXTRA)**
+### **AI-generated Backgrounds (EXPERIMENTAL)**
 
 All the images rendered are just 2 objects on a white surface with a light grey "sky". If you would like to add a custom (more realistic) background to each image in your image output folder, you can navigate to the `generate_backgrounds.sh` script.
 
@@ -114,7 +114,7 @@ All the images rendered are just 2 objects on a white surface with a light grey
 
 _The goal is to enable comparisons between a fine-tuned spatial reasoning model's performance on the original dataset versus a version with more realistic backgrounds._
 
-## Web GUI Interface
+## Web GUI (NEW)
 
 FORG3D now includes a **web-based graphical user interface (GUI)** that provides an intuitive way to configure and execute rendering tasks without using command-line scripts. The GUI offers real-time output streaming, interactive forms, and process control capabilities.
 
@@ -126,6 +126,8 @@ The web interface provides three main modes:
 - **Multiple Renders**: Batch rendering interface for generating multiple image combinations  
 - **Background Generation**: AI-powered background generation using Stable Diffusion XL inpainting
 
+Additionally, the GUI allows you to **configure the `config.json` settings** directly through the web interface, eliminating the need to manually edit configuration files.
+
 ### Setup and Launch
 
 1. **Navigate to the GUI directory**:

gui/app.py

@@ -16,6 +16,8 @@
 SCRIPTS_DIR = os.path.join(os.path.dirname(__file__), "..", "scripts")
 # Path to the data directory for properties.json
 DATA_DIR = os.path.join(os.path.dirname(__file__), "..", "data", "objaverse")
+# Path to the config.json file
+CONFIG_PATH = os.path.join(os.path.dirname(__file__), "..", "src", "config.json")
 
 running_processes = {}
 
@@ -160,6 +162,58 @@ def get_objects():
     except Exception as e:
         return jsonify({"success": False, "error": str(e)}), 500
 
+@app.route('/api/config', methods=['GET'])
+def get_config():
+    """Get current configuration from config.json."""
+    try:
+        with open(CONFIG_PATH, 'r') as f:
+            config_data = json.load(f)
+        return jsonify({"success": True, "config": config_data})
+    except FileNotFoundError:
+        return jsonify({"success": False, "error": "Config file not found"}), 404
+    except json.JSONDecodeError:
+        return jsonify({"success": False, "error": "Invalid config file format"}), 500
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@app.route('/api/config', methods=['POST'])
+def update_config():
+    """Update configuration in config.json."""
+    try:
+        # Get the new config data from request
+        new_config = request.get_json()
+        
+        if not new_config:
+            return jsonify({"success": False, "error": "No configuration data provided"}), 400
+        
+        # Read current config to preserve any fields not being updated
+        try:
+            with open(CONFIG_PATH, 'r') as f:
+                current_config = json.load(f)
+        except FileNotFoundError:
+            current_config = {}
+        
+        customizable_fields = [
+            'properties_json', 'base_scene_blendfile', 'shape_dir', 'material_dir',
+            'output_image_dir', 'output_scene_dir', 'output_scene_file', 'masks_dir',
+            'enhanced_image_dir', 'use_gpu', 'width', 'height', 'render_tile_size'
+        ]
+        
+        for field in customizable_fields:
+            if field in new_config:
+                current_config[field] = new_config[field]
+        
+        # Write updated config back to file
+        with open(CONFIG_PATH, 'w') as f:
+            json.dump(current_config, f, indent=2)
+        
+        return jsonify({"success": True, "message": "Configuration updated successfully"})
+        
+    except json.JSONDecodeError:
+        return jsonify({"success": False, "error": "Invalid JSON data"}), 400
+    except Exception as e:
+        return jsonify({"success": False, "error": f"Error updating config: {str(e)}"}), 500
+
 @socketio.on('connect')
 def handle_connect():
     """Handle WebSocket connection."""

gui/static/script.js

@@ -1,3 +1,25 @@
+// Configuration field mapping
+const CONFIG_FIELDS = {
+    // File paths
+    'properties-json': 'properties_json',
+    'base-scene-blendfile': 'base_scene_blendfile', 
+    'output-scene-file': 'output_scene_file',
+    
+    // Directories
+    'shape-dir': 'shape_dir',
+    'material-dir': 'material_dir',
+    'output-image-dir': 'output_image_dir',
+    'output-scene-dir': 'output_scene_dir',
+    'masks-dir': 'masks_dir',
+    'enhanced-image-dir': 'enhanced_image_dir',
+    
+    // Rendering settings
+    'use-gpu': 'use_gpu',
+    'width': 'width',
+    'height': 'height',
+    'render-tile-size': 'render_tile_size'
+}
+
 // Object Selector Functionality
 let objectsData = {}
 let selectedObjects = {
@@ -25,6 +47,81 @@ async function initObjectSelectors() {
     }
 }
 
+// Configuration Management Functions
+async function loadConfiguration() {
+    try {
+        const response = await fetch('/api/config')
+        const data = await response.json()
+        
+        if (data.success) {
+            populateConfigurationForm(data.config)
+            appendOutput("\n✅ Configuration loaded successfully\n")
+        } else {
+            console.error('Failed to load configuration:', data.error)
+            appendOutput(`\n❌ Failed to load configuration: ${data.error}\n`)
+        }
+    } catch (error) {
+        console.error('Error fetching configuration:', error)
+        appendOutput(`\n❌ Error fetching configuration: ${error.message}\n`)
+    }
+}
+
+function populateConfigurationForm(config) {
+    // Iterate through all configured fields and populate them
+    Object.entries(CONFIG_FIELDS).forEach(([fieldId, configKey]) => {
+        const field = document.getElementById(fieldId)
+        if (field && config[configKey] !== undefined) {
+            if (field.type === 'checkbox') {
+                field.checked = config[configKey]
+            } else {
+                field.value = config[configKey]
+            }
+        }
+    })
+}
+
+async function saveConfiguration(formData) {
+    try {
+        // Convert form data to config object using the mapping
+        const configData = {}
+        
+        Object.entries(CONFIG_FIELDS).forEach(([fieldId, configKey]) => {
+            const formKey = fieldId.replace(/-/g, '_')
+            const value = formData[formKey]
+            
+            if (configKey === 'use_gpu') {
+                configData[configKey] = value === 'on'
+            } else if (value !== undefined && value !== '') {
+                if (['width', 'height', 'render_tile_size'].includes(configKey)) {
+                    configData[configKey] = parseInt(value)
+                } else {
+                    configData[configKey] = value
+                }
+            }
+        })
+        
+        const response = await fetch('/api/config', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(configData)
+        })
+        
+        const data = await response.json()
+        
+        if (data.success) {
+            appendOutput("✅ Configuration saved successfully\n")
+        } else {
+            console.error('Failed to save configuration:', data.error)
+            appendOutput(`❌ Failed to save configuration: ${data.error}\n`)
+        }
+    } catch (error) {
+        console.error('Error saving configuration:', error)
+        appendOutput(`❌ Error saving configuration: ${error.message}\n`)
+    }
+}
+
 function showObjectLoadError() {
     const singleToggle = document.getElementById('objects-single-toggle')
     const multipleToggle = document.getElementById('objects-multiple-toggle')
@@ -224,11 +321,14 @@ const renderForms = document.querySelectorAll(".render-form")
 const singleForm = document.getElementById("single-render-form")
 const multipleForm = document.getElementById("multiple-render-form")
 const backgroundForm = document.getElementById("background-generation-form")
+const configurationForm = document.getElementById("configuration-form")
 const outputDiv = document.getElementById("output")
 const outputStatus = document.getElementById("output-status")
 const singleSubmitBtn = document.getElementById("single-submit-btn")
 const multipleSubmitBtn = document.getElementById("multiple-submit-btn")
 const backgroundSubmitBtn = document.getElementById("background-submit-btn")
+
+const saveConfigBtn = document.getElementById("save-config-btn")
 const stopBtn = document.getElementById("stop-btn")
 
 // WebSocket connection
@@ -505,6 +605,27 @@ backgroundForm.addEventListener("submit", (e) => {
   }
 })
 
+// Configuration form event listeners
+configurationForm.addEventListener("submit", async (e) => {
+  e.preventDefault()
+  
+  const submitBtn = e.target.querySelector('button[type="submit"]')
+  const originalHTML = submitBtn.innerHTML
+  
+  // Show loading state
+  submitBtn.disabled = true
+  submitBtn.innerHTML = '<span class="loading"></span>Saving configuration...'
+  
+  const formData = new FormData(e.target)
+  const data = Object.fromEntries(formData.entries())
+  
+  await saveConfiguration(data)
+  
+  // Re-enable submit button
+  submitBtn.disabled = false
+  submitBtn.innerHTML = originalHTML
+})
+
 // Add input event listeners for real-time validation feedback
 document.querySelectorAll("input, select").forEach((field) => {
   field.addEventListener("input", () => {
@@ -558,6 +679,5 @@ stopBtn.addEventListener("click", () => {
 document.addEventListener('DOMContentLoaded', () => {
   initWebSocket()
   initObjectSelectors()
+  loadConfiguration()
 })
-
-console.log("🎬 Blender Render Control initialized successfully!")

gui/static/styles.css

@@ -146,7 +146,7 @@ body {
 
 .render-selector {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: .5rem;
     margin-bottom: 1rem
 }
@@ -497,7 +497,7 @@ body {
     }
 
     .render-selector {
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: .5rem
     }
 
@@ -532,10 +532,15 @@ body {
     }
 
     .main-layout {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 3fr 1fr;
         gap: .75rem
     }
 
+    .render-selector {
+        grid-template-columns: 1fr 1fr;
+        gap: .3rem
+    }
+
     .render-tab {
         padding: .3rem
     }