Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,207 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #333;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 30px;
+    color: white;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.built-with {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.built-with a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-top: 20px;
+}
+
+.view-section {
+    background: white;
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.view-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.view-header h2 {
+    color: #667eea;
+    font-size: 1.5rem;
+}
+
+.slice-info {
+    background: #f0f0f0;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-weight: bold;
+    color: #667eea;
+}
+
+.controls {
+    margin-bottom: 20px;
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    gap: 15px;
+}
+
+.control-group label {
+    font-weight: 600;
+    min-width: 150px;
+    color: #555;
+}
+
+.control-group input[type="range"] {
+    flex: 1;
+    height: 6px;
+    background: #ddd;
+    border-radius: 3px;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.control-group input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    background: #667eea;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.control-group input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.control-group span {
+    font-weight: 600;
+    color: #667eea;
+    min-width: 40px;
+}
+
+#canvas3d {
+    width: 100%;
+    height: 400px;
+    border: 2px solid #667eea;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#sliceCanvas {
+    width: 100%;
+    height: 400px;
+    border: 2px solid #764ba2;
+    border-radius: 10px;
+    background: #000;
+}
+
+.export-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 25px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.export-btn:hover {
+    transform: translateY(-2px);
+}
+
+.export-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 30px;
+    background: #f0f0f0;
+    border-radius: 15px;
+    overflow: hidden;
+    position: relative;
+    margin-top: 15px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: 600;
+    color: #333;
+}
+
+.hidden {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+    
+    .control-group {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .control-group label {
+        min-width: auto;
+    }
+}

assets/js/main.js

@@ -0,0 +1,446 @@
+// Global variables
+let scene, camera, renderer, controls;
+let model, cuttingPlaneMesh;
+let rotationSlider, autoRotateCheckbox, cuttingPlaneSlider;
+let sliceCanvas, sliceCtx;
+let isRecording = false;
+let mediaRecorder;
+let recordedChunks = [];
+let animationId;
+let sliceData = [];
+
+// Initialize Three.js scene
+function init3DScene() {
+    const container = document.getElementById('canvas3d');
+    
+    // Scene setup
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x1a1a2e);
+    
+    // Camera setup
+    camera = new THREE.PerspectiveCamera(
+        75,
+        container.clientWidth / container.clientHeight,
+        0.1,
+        1000
+    );
+    camera.position.set(0, 0, 100);
+    
+    // Renderer setup
+    renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    renderer.localClippingEnabled = true;
+    container.appendChild(renderer.domElement);
+    
+    // Controls
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+    scene.add(ambientLight);
+    
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(10, 10, 10);
+    scene.add(directionalLight);
+    
+    // Create 3D model (composite sphere with inner structures)
+    createCompositeModel();
+    
+    // Create cutting plane visualization
+    createCuttingPlane();
+    
+    // Event listeners
+    setupEventListeners();
+    
+    // Initialize slice canvas
+    initSliceCanvas();
+    
+    // Start render loop
+    animate();
+}
+
+// Create a composite 3D model
+function createCompositeModel() {
+    // Main outer shell
+    const outerGeometry = new THREE.SphereGeometry(30, 32, 32);
+    const outerMaterial = new THREE.MeshPhongMaterial({
+        color: 0x4a90e2,
+        transparent: true,
+        opacity: 0.7,
+        side: THREE.DoubleSide
+    });
+    
+    model = new THREE.Mesh(outerGeometry, outerMaterial);
+    model.name = 'compositeModel';
+    scene.add(model);
+    
+    // Inner structures
+    const innerGeometry1 = new THREE.SphereGeometry(15, 16, 16);
+    const innerMaterial1 = new THREE.MeshPhongMaterial({
+        color: 0x7ed321,
+        transparent: true,
+        opacity: 0.8
+    });
+    const innerSphere1 = new THREE.Mesh(innerGeometry1, innerMaterial1);
+    innerSphere1.position.set(5, 5, -5);
+    model.add(innerSphere1);
+    
+    const innerGeometry2 = new THREE.BoxGeometry(15, 15, 15);
+    const innerMaterial2 = new THREE.MeshPhongMaterial({
+        color: 0xf5a623,
+        transparent: true,
+        opacity: 0.8
+    });
+    const innerBox = new THREE.Mesh(innerGeometry2, innerMaterial2);
+    innerBox.position.set(-8, -3, 8);
+    innerBox.rotation.set(0.5, 0.3, 0.7);
+    model.add(innerBox);
+    
+    // Additional small structures for complexity
+    for (let i = 0; i < 5; i++) {
+        const smallGeometry = new THREE.SphereGeometry(3 + Math.random() * 5, 8, 8);
+        const smallMaterial = new THREE.MeshPhongMaterial({
+            color: new THREE.Color().setHSL(0.5 + Math.random() * 0.3, 0.8, 0.6),
+            transparent: true,
+            opacity: 0.9
+        });
+        const smallSphere = new THREE.Mesh(smallGeometry, smallMaterial);
+        smallSphere.position.set(
+            (Math.random() - 0.5) * 40,
+            (Math.random() - 0.5) * 40,
+            (Math.random() - 0.5) * 40
+        );
+        model.add(smallSphere);
+    }
+    
+    // Update slice data for all z positions
+    updateSliceData();
+}
+
+// Generate slice data for 2D view
+function updateSliceData() {
+    sliceData = [];
+    const resolution = parseInt(document.getElementById('sliceResolution').value);
+    const totalSlices = 100;
+    
+    for (let z = 0; z < totalSlices; z++) {
+        const zPos = (z - totalSlices / 2) / (totalSlices / 100);
+        const sliceArray = [];
+        
+        for (let y = 0; y < resolution; y++) {
+            const row = [];
+            for (let x = 0; x < resolution; x++) {
+                // Convert canvas coordinates to 3D space
+                const xPos = (x - resolution / 2) / (resolution / 100);
+                const yPos = (y - resolution / 2) / (resolution / 100);
+                
+                // Calculate density based on distance from center for outer sphere
+                const distanceFromCenter = Math.sqrt(xPos * xPos + yPos * yPos + zPos * zPos);
+                let density = 0;
+                
+                // Outer sphere (main shell)
+                if (distanceFromCenter <= 30) {
+                    density = 0.5 + (1 - distanceFromCenter / 30) * 0.5;
+                    
+                    // Inner sphere 1
+                    const dist1 = Math.sqrt(
+                        (xPos - 5) * (xPos - 5) + 
+                        (yPos - 5) * (yPos - 5) + 
+                        (zPos + 5) * (zPos + 5)
+                    );
+                    if (dist1 <= 15) {
+                        density = Math.max(density, 0.8 + (1 - dist1 / 15) * 0.2);
+                    }
+                    
+                    // Inner box (approximated)
+                    const boxDistX = Math.abs(xPos + 8);
+                    const boxDistY = Math.abs(yPos + 3);
+                    const boxDistZ = Math.abs(zPos - 8);
+                    if (boxDistX <= 12 && boxDistY <= 12 && boxDistZ <= 12) {
+                        density = Math.max(density, 0.7 + (1 - boxDistX / 12) * 0.3 * 0.3);
+                        density = Math.max(density, 0.7 + (1 - boxDistY / 12) * 0.3 * 0.3);
+                        density = Math.max(density, 0.7 + (1 - boxDistZ / 12) * 0.3 * 0.3);
+                    }
+                    
+                    // Small random structures
+                    for (let i = 0; i < 5; i++) {
+                        const posX = (Math.sin(i * 1.5) - 0.5) * 40;
+                        const posY = (Math.cos(i * 1.3) - 0.5) * 40;
+                        const posZ = (Math.sin(i) - 0.5) * 40;
+                        
+                        const smallDist = Math.sqrt(
+                            (xPos - posX) * (xPos - posX) +
+                            (yPos - posY) * (yPos - posY) +
+                            (zPos - posZ) * (zPos - posZ)
+                        );
+                        const radius = 8 + i * 2;
+                        
+                        if (smallDist <= radius) {
+                            density = Math.max(density, 0.6 + (1 - smallDist / radius) * 0.4);
+                        }
+                    }
+                }
+                
+                row.push(density);
+            }
+            sliceArray.push(row);
+        }
+        
+        sliceData.push(sliceArray);
+    }
+}
+
+// Initialize slice canvas
+function initSliceCanvas() {
+    sliceCanvas = document.getElementById('sliceCanvas');
+    sliceCtx = sliceCanvas.getContext('2d');
+    
+    const resolution = parseInt(document.getElementById('sliceResolution').value);
+    sliceCanvas.width = resolution;
+    sliceCanvas.height = resolution;
+}
+
+// Create cutting plane visualization
+function createCuttingPlane() {
+    const planeGeometry = new THREE.PlaneGeometry(100, 100);
+    const planeMaterial = new THREE.MeshBasicMaterial({
+        color: 0xff0000,
+        transparent: true,
+        opacity: 0.3,
+        side: THREE.DoubleSide
+    });
+    
+    cuttingPlaneMesh = new THREE.Mesh(planeGeometry, planeMaterial);
+    cuttingPlaneMesh.rotation.x = -Math.PI / 2;
+    cuttingPlaneMesh.visible = true;
+    scene.add(cuttingPlaneMesh);
+}
+
+// Update 2D slice view
+function updateSliceView(zPosition) {
+    if (!sliceCtx || sliceData.length === 0) return;
+    
+    const resolution = parseInt(document.getElementById('sliceResolution').value);
+    const sliceIndex = Math.floor((zPosition + 50) / 100 * (sliceData.length - 1));
+    
+    if (sliceIndex < 0 || sliceIndex >= sliceData.length) return;
+    
+    const slice = sliceData[sliceIndex];
+    const imageData = sliceCtx.createImageData(resolution, resolution);
+    const data = imageData.data;
+    
+    for (let y = 0; y < resolution; y++) {
+        for (let x = 0; x < resolution; x++) {
+            const density = slice[y][x];
+            const index = (y * resolution + x) * 4;
+            
+            if (density > 0) {
+                // Color based on density
+                const hue = 0.6 - density * 0.3; // Blue to green to yellow
+                const rgb = hslToRgb(hue, 0.8, 0.5 + density * 0.3);
+                
+                data[index] = rgb[0];     // R
+                data[index + 1] = rgb[1]; // G
+                data[index + 2] = rgb[2]; // B
+                data[index + 3] = Math.floor(density * 255); // A
+            } else {
+                data[index] = 0;
+                data[index + 1] = 0;
+                data[index + 2] = 0;
+                data[index + 3] = 0;
+            }
+        }
+    }
+    
+    sliceCtx.putImageData(imageData, 0, 0);
+    
+    // Update slice info
+    document.getElementById('sliceInfo').textContent = `Z = ${zPosition.toFixed(1)}`;
+}
+
+// Convert HSL to RGB
+function hslToRgb(h, s, l) {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs((h * 6) % 2 - 1));
+    const m = l - c / 2;
+    
+    let r, g, b;
+    if (h < 1/6) {
+        r = c; g = x; b = 0;
+    } else if (h < 2/6) {
+        r = x; g = c; b = 0;
+    } else if (h < 3/6) {
+        r = 0; g = c; b = x;
+    } else if (h < 4/6) {
+        r = 0; g = x; b = c;
+    } else if (h < 5/6) {
+        r = x; g = 0; b = c;
+    } else {
+        r = c; g = 0; b = x;
+    }
+    
+    return [
+        Math.floor((r + m) * 255),
+        Math.floor((g + m) * 255),
+        Math.floor((b + m) * 255)
+    ];
+}
+
+// Setup event listeners
+function setupEventListeners() {
+    rotationSlider = document.getElementById('rotationSlider');
+    autoRotateCheckbox = document.getElementById('autoRotate');
+    cuttingPlaneSlider = document.getElementById('cuttingPlane');
+    
+    // Rotation slider
+    rotationSlider.addEventListener('input', (e) => {
+        const value = e.target.value;
+        document.getElementById('rotationValue').textContent = value + '°';
+        if (model) {
+            model.rotation.y = (value * Math.PI) / 180;
+        }
+    });
+    
+    // Auto rotate checkbox
+    autoRotateCheckbox.addEventListener('change', (e) => {
+        controls.autoRotate = e.target.checked;
+    });
+    
+    // Cutting plane slider
+    cuttingPlaneSlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        document.getElementById('planeValue').textContent = value.toFixed(1);
+        updateCuttingPlane(value);
+        updateSliceView(value);
+    });
+    
+    // Speed slider
+    const speedSlider = document.getElementById('scanSpeed');
+    speedSlider.addEventListener('input', (e) => {
+        document.getElementById('speedValue').textContent = e.target.value + 'x';
+    });
+    
+    // Resolution selector
+    document.getElementById('sliceResolution').addEventListener('change', () => {
+        updateSliceData();
+        initSliceCanvas();
+        updateSliceView(parseFloat(cuttingPlaneSlider.value));
+    });
+    
+    // Export button
+    document.getElementById('exportBtn').addEventListener('click', exportScan);
+}
+
+// Update cutting plane position
+function updateCuttingPlane(zPosition) {
+    if (cuttingPlaneMesh) {
+        cuttingPlaneMesh.position.z = zPosition;
+    }
+}
+
+// Animation loop
+function animate() {
+    animationId = requestAnimationFrame(animate);
+    
+    controls.update();
+    renderer.render(scene, camera);
+}
+
+// Export scan as video
+async function exportScan() {
+    if (isRecording) return;
+    
+    const exportBtn = document.getElementById('exportBtn');
+    const progressBar = document.getElementById('exportProgress');
+    const progressFill = progressBar.querySelector('.progress-fill');
+    const progressText = progressBar.querySelector('.progress-text');
+    
+    exportBtn.disabled = true;
+    progressBar.classList.remove('hidden');
+    isRecording = true;
+    
+    // Setup MediaRecorder
+    const stream = sliceCanvas.captureStream(30);
+    const options = {
+        mimeType: 'video/webm;codecs=vp8,opus',
+        videoBitsPerSecond: 2500000
+    };
+    
+    try {
+        mediaRecorder = new MediaRecorder(stream, options);
+        recordedChunks = [];
+        
+        mediaRecorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+                recordedChunks.push(event.data);
+            }
+        };
+        
+        mediaRecorder.onstop = () => {
+            const blob = new Blob(recordedChunks, { type: 'video/webm' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `3d-scan-${Date.now()}.webm`;
+            a.click();
+            URL.revokeObjectURL(url);
+            
+            // Reset UI
+            exportBtn.disabled = false;
+            progressBar.classList.add('hidden');
+            isRecording = false;
+            
+            // Reset cutting plane
+            cuttingPlaneSlider.value = 0;
+            updateCuttingPlane(0);
+            updateSliceView(0);
+        };
+        
+        // Start recording
+        mediaRecorder.start();
+        
+        // Animate scan from top to bottom
+        const scanSpeed = parseFloat(document.getElementById('scanSpeed').value);
+        const totalSteps = 100;
+        const stepDelay = 1000 / scanSpeed / totalSteps;
+        
+        for (let i = 0; i <= totalSteps; i++) {
+            const zPosition = 50 - (i * 100 / totalSteps);
+            cuttingPlaneSlider.value = zPosition;
+            updateCuttingPlane(zPosition);
+            updateSliceView(zPosition);
+            
+            // Update progress
+            const progress = (i / totalSteps) * 100;
+            progressFill.style.width = progress + '%';
+            progressText.textContent = Math.floor(progress) + '%';
+            
+            await new Promise(resolve => setTimeout(resolve, stepDelay));
+        }
+        
+        // Stop recording
+        mediaRecorder.stop();
+        
+    } catch (err) {
+        console.error('Recording failed:', err);
+        alert('Video recording failed. Please check browser permissions.');
+        exportBtn.disabled = false;
+        progressBar.classList.add('hidden');
+        isRecording = false;
+    }
+}
+
+// Initialize on load
+window.addEventListener('load', init3DScene);
+
+// Handle window resize
+window.addEventListener('resize', () => {
+    const container = document.getElementById('canvas3d');
+    if (camera && renderer) {
+        camera.aspect = container.clientWidth / container.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(container.clientWidth, container.clientHeight);
+    }
+});

index.html

@@ -1,19 +1,78 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Model Slicer with Live 2D View</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>3D Model Slicer</h1>
+            <p class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
+        </header>
+
+        <div class="main-content">
+            <div class="view-section">
+                <div class="view-header">
+                    <h2>3D Model View</h2>
+                </div>
+                <div class="controls">
+                    <div class="control-group">
+                        <label for="rotationSlider">Manual Rotation:</label>
+                        <input type="range" id="rotationSlider" min="-180" max="180" value="0" step="1">
+                        <span id="rotationValue">0°</span>
+                    </div>
+                    <div class="control-group">
+                        <label for="autoRotate">Auto Rotate:</label>
+                        <input type="checkbox" id="autoRotate">
+                    </div>
+                    <div class="control-group">
+                        <label for="cuttingPlane">Cutting Plane Position:</label>
+                        <input type="range" id="cuttingPlane" min="-50" max="50" value="0" step="0.5">
+                        <span id="planeValue">0</span>
+                    </div>
+                </div>
+                <div id="canvas3d"></div>
+            </div>
+
+            <div class="view-section">
+                <div class="view-header">
+                    <h2>2D Slice View</h2>
+                    <div class="slice-info">
+                        <span id="sliceInfo">Z = 0.0</span>
+                    </div>
+                </div>
+                <canvas id="sliceCanvas"></canvas>
+                <div class="controls">
+                    <div class="control-group">
+                        <button id="exportBtn" class="export-btn">Export Scan as MP4</button>
+                    </div>
+                    <div class="control-group">
+                        <label for="scanSpeed">Scan Speed:</label>
+                        <input type="range" id="scanSpeed" min="1" max="10" value="5" step="0.5">
+                        <span id="speedValue">5x</span>
+                    </div>
+                    <div class="control-group">
+                        <label for="sliceResolution">Resolution:</label>
+                        <select id="sliceResolution">
+                            <option value="256">256x256</option>
+                            <option value="512" selected>512x512</option>
+                            <option value="768">768x768</option>
+                        </select>
+                    </div>
+                </div>
+                <div id="exportProgress" class="progress-bar hidden">
+                    <div class="progress-fill"></div>
+                    <span class="progress-text">0%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="assets/js/main.js"></script>
+</body>
+</html>