From b47d55a51248ad87cec138af18e3fad878374ccb Mon Sep 17 00:00:00 2001
From: Don Garrett <dgarrett@acm.org>
Date: Mon, 25 Aug 2025 21:20:20 -0500
Subject: [PATCH] Initial working STL viewer in HTML.

---
 static/index.html | 322 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 322 insertions(+)
 create mode 100644 static/index.html

diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..ff9acd8
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mushroom STL Viewer</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 20px;
+        }
+        
+        .controls {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        
+        .control-row {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        
+        label {
+            font-weight: bold;
+            color: #555;
+        }
+        
+        input, select {
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        
+        button:hover {
+            background: #0056b3;
+        }
+        
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        
+        #viewer {
+            width: 100%;
+            height: 600px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .status {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+        
+        .error {
+            color: #dc3545;
+            background: #f8d7da;
+            padding: 15px;
+            border-radius: 4px;
+            margin: 20px 0;
+            border: 1px solid #f5c6cb;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Mushroom STL Viewer</h1>
+        
+        <div class="controls">
+            <div class="control-row">
+                <div class="control-group">
+                    <label for="stalk_h">Stalk Height:</label>
+                    <input type="number" id="stalk_h" value="66" step="1" min="1" max="200">
+                </div>
+                <div class="control-group">
+                    <label for="stalk_r">Stalk Radius:</label>
+                    <input type="number" id="stalk_r" value="5" step="0.1" min="0.1" max="20">
+                </div>
+                <div class="control-group">
+                    <label for="cap_h">Cap Height:</label>
+                    <input type="number" id="cap_h" value="34" step="1" min="1" max="100">
+                </div>
+                <div class="control-group">
+                    <label for="cap_r">Cap Radius:</label>
+                    <input type="number" id="cap_r" value="50" step="1" min="1" max="100">
+                </div>
+                <div class="control-group">
+                    <label for="cap_style">Cap Style:</label>
+                    <select id="cap_style">
+                        <option value="Dome">Dome</option>
+                        <option value="Flat">Flat</option>
+                        <option value="Concave">Concave</option>
+                    </select>
+                </div>
+                <button id="generateBtn" onclick="generateMushroom()">Generate Mushroom</button>
+            </div>
+        </div>
+        
+        <div id="viewer">
+            <div class="status">Click "Generate Mushroom" to create and view your 3D model</div>
+        </div>
+    </div>
+
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
+            "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
+        }
+    }
+    </script>
+
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        import { STLLoader } from 'three/addons/loaders/STLLoader.js';
+
+        let scene, camera, renderer, controls, currentMesh;
+        let isLoading = false;
+
+        function initViewer() {
+            const viewer = document.getElementById('viewer');
+            
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xf8f9fa);
+            
+            camera = new THREE.PerspectiveCamera(75, viewer.clientWidth / viewer.clientHeight, 0.1, 1000);
+            camera.position.set(100, 100, 100);
+            
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(viewer.clientWidth, viewer.clientHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            
+            controls = new OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            
+            const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
+            scene.add(ambientLight);
+            
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(100, 100, 50);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
+            directionalLight.shadow.mapSize.height = 2048;
+            scene.add(directionalLight);
+            
+            const pointLight = new THREE.PointLight(0xffffff, 0.3);
+            pointLight.position.set(-50, 50, 50);
+            scene.add(pointLight);
+            
+            viewer.innerHTML = '';
+            viewer.appendChild(renderer.domElement);
+            
+            window.addEventListener('resize', onWindowResize);
+            
+            animate();
+        }
+
+        function onWindowResize() {
+            const viewer = document.getElementById('viewer');
+            camera.aspect = viewer.clientWidth / viewer.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(viewer.clientWidth, viewer.clientHeight);
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        }
+
+        async function generateMushroom() {
+            if (isLoading) return;
+            
+            isLoading = true;
+            const btn = document.getElementById('generateBtn');
+            btn.disabled = true;
+            btn.textContent = 'Generating...';
+            
+            const errorDiv = document.querySelector('.error');
+            if (errorDiv) errorDiv.remove();
+            
+            const params = new URLSearchParams({
+                stalk_h: document.getElementById('stalk_h').value,
+                stalk_r: document.getElementById('stalk_r').value,
+                cap_h: document.getElementById('cap_h').value,
+                cap_r: document.getElementById('cap_r').value,
+                cap_style: document.getElementById('cap_style').value
+            });
+            
+            try {
+                const response = await fetch(`/generate?${params}`, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'model/x.stl-binary'
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+
+                const arrayBuffer = await response.arrayBuffer();
+                loadSTLFromBuffer(arrayBuffer);
+                
+            } catch (error) {
+                console.error('Error generating mushroom:', error);
+                showError(`Failed to generate mushroom: ${error.message}`);
+            } finally {
+                isLoading = false;
+                btn.disabled = false;
+                btn.textContent = 'Generate Mushroom';
+            }
+        }
+
+        function loadSTLFromBuffer(buffer) {
+            try {
+                const loader = new STLLoader();
+                const geometry = loader.parse(buffer);
+                
+                if (currentMesh) {
+                    scene.remove(currentMesh);
+                    currentMesh.geometry.dispose();
+                    currentMesh.material.dispose();
+                }
+                
+                geometry.computeBoundingBox();
+                geometry.computeVertexNormals();
+                
+                const material = new THREE.MeshPhongMaterial({ 
+                    color: 0x8B4513,
+                    shininess: 30,
+                    specular: 0x222222
+                });
+                
+                currentMesh = new THREE.Mesh(geometry, material);
+                currentMesh.castShadow = true;
+                currentMesh.receiveShadow = true;
+                
+                const box = geometry.boundingBox;
+                const center = new THREE.Vector3();
+                box.getCenter(center);
+                currentMesh.position.sub(center);
+                
+                scene.add(currentMesh);
+                
+                const size = new THREE.Vector3();
+                box.getSize(size);
+                const maxDim = Math.max(size.x, size.y, size.z);
+                const distance = maxDim * 1.5;
+                
+                controls.reset();
+                camera.position.set(distance, distance * 0.7, distance);
+                controls.target.set(0, 0, 0);
+                controls.update();
+                
+            } catch (error) {
+                console.error('Error loading STL:', error);
+                showError(`Failed to load STL file: ${error.message}`);
+            }
+        }
+
+        function showError(message) {
+            const container = document.querySelector('.container');
+            const existingError = document.querySelector('.error');
+            if (existingError) existingError.remove();
+            
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error';
+            errorDiv.textContent = message;
+            container.insertBefore(errorDiv, document.getElementById('viewer'));
+        }
+
+        // Make functions available globally
+        window.generateMushroom = generateMushroom;
+
+        // Initialize the viewer when the page loads
+        window.addEventListener('load', initViewer);
+    </script>
+</body>
+</html>
\ No newline at end of file