Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,132 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Courier New', monospace;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f4f4f4;
+}
+
+header {
+    background: #333;
+    color: #fff;
+    padding: 1rem;
+    text-align: center;
+}
+
+header h1 {
+    font-size: 1.8rem;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.viewer-container {
+    position: relative;
+    width: 100%;
+    background: #000;
+    border-radius: 8px;
+    overflow: hidden;
+    min-height: 400px;
+}
+
+#ascii-canvas {
+    width: 100%;
+    height: 100%;
+    font-family: 'Courier New', monospace;
+    font-size: 8px;
+    line-height: 1;
+    letter-spacing: 0;
+    color: #fff;
+    white-space: pre;
+}
+
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 1.2rem;
+}
+
+.controls-panel {
+    background: #fff;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.control-group {
+    margin-bottom: 1.5rem;
+}
+
+.control-group h3 {
+    margin-bottom: 0.8rem;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+select, input[type="range"], button {
+    width: 100%;
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-family: inherit;
+}
+
+button {
+    background: #333;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+button:hover {
+    background: #555;
+}
+
+input[type="checkbox"] {
+    margin-right: 0.5rem;
+}
+
+footer {
+    text-align: center;
+    padding: 1rem;
+    background: #333;
+    color: #fff;
+    margin-top: 2rem;
+}
+
+@media (min-width: 768px) {
+    .container {
+        flex-direction: row;
+    }
+
+    .viewer-container {
+        flex: 2;
+    }
+
+    .controls-panel {
+        flex: 1;
+        min-width: 300px;
+    }
+}

assets/js/script.js

@@ -0,0 +1,248 @@
+class ASCII3DViewer {
+    constructor() {
+        this.scene = new THREE.Scene();
+        this.camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+        this.renderer = new THREE.WebGLRenderer();
+        this.asciiCanvas = document.getElementById('ascii-canvas');
+        this.context = this.asciiCanvas.getContext('2d');
+        
+        this.currentModel = null;
+        this.autoRotate = true;
+        this.resolution = 50;
+        this.charSet = '@%#*+=-:. ';
+        this.colorMode = 'mono';
+        
+        this.init();
+        this.setupEventListeners();
+        this.loadModel('cube');
+        this.animate();
+    }
+
+    init() {
+        this.camera.position.z = 5;
+        this.scene.background = new THREE.Color(0x000000);
+        
+        // Add some ambient light
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        this.scene.add(ambientLight);
+        
+        // Add directional light
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(1, 1, 1);
+        this.scene.add(directionalLight);
+        
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+    }
+
+    resize() {
+        const container = this.asciiCanvas.parentElement;
+        const width = container.clientWidth;
+        const height = container.clientHeight;
+        
+        this.asciiCanvas.width = width;
+        this.asciiCanvas.height = height;
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+    }
+
+    loadModel(modelType) {
+        // Remove current model if exists
+        if (this.currentModel) {
+            this.scene.remove(this.currentModel);
+        }
+
+        let geometry;
+        
+        switch(modelType) {
+            case 'sphere':
+                geometry = new THREE.SphereGeometry(1, 32, 32);
+                break;
+            case 'torus':
+                geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
+                break;
+            case 'teapot':
+                // Simple teapot approximation
+                geometry = new THREE.CylinderGeometry(0.5, 0.8, 1, 8);
+                const lid = new THREE.CylinderGeometry(0.3, 0.5, 0.3, 8);
+                lid.translate(0, 0.8, 0);
+                geometry = THREE.BufferGeometryUtils.mergeBufferGeometries([geometry, lid]);
+                break;
+            case 'cube':
+            default:
+                geometry = new THREE.BoxGeometry(1, 1, 1);
+                break;
+        }
+
+        const material = new THREE.MeshPhongMaterial({
+            color: 0xffffff,
+            flatShading: true
+        });
+        
+        this.currentModel = new THREE.Mesh(geometry, material);
+        this.scene.add(this.currentModel);
+        
+        document.getElementById('loading').style.display = 'none';
+    }
+
+    renderToASCII() {
+        const width = this.asciiCanvas.width;
+        const height = this.asciiCanvas.height;
+        
+        // Temporary render to get pixel data
+        this.renderer.setSize(width, height);
+        this.renderer.render(this.scene, this.camera);
+        
+        // Create offscreen buffer
+        const buffer = document.createElement('canvas');
+        buffer.width = width;
+        buffer.height = height;
+        const bufferCtx = buffer.getContext('2d');
+        bufferCtx.drawImage(this.renderer.domElement, 0, 0, width, height);
+        
+        const imageData = bufferCtx.getImageData(0, 0, width, height);
+        const pixels = imageData.data;
+        
+        // Clear canvas
+        this.context.fillStyle = '#000';
+        this.context.fillRect(0, 0, width, height);
+        
+        // Calculate step based on resolution
+        const step = Math.max(1, Math.floor(100 / this.resolution));
+        const chars = this.charSet;
+        const charCount = chars.length;
+        
+        // Render ASCII art
+        this.context.font = `${step}px 'Courier New', monospace`;
+        this.context.textAlign = 'center';
+        
+        for (let y = 0; y < height; y += step * 2) {
+            for (let x = 0; x < width; x += step) {
+                const index = (y * width + x) * 4;
+                const r = pixels[index];
+                const g = pixels[index + 1];
+                const b = pixels[index + 2];
+                
+                if (r + g + b > 10) { // Skip very dark pixels
+                    const brightness = (r + g + b) / 3 / 255;
+                    const charIndex = Math.floor(brightness * (charCount - 1));
+                    const char = chars[charIndex];
+                    
+                    // Set color based on mode
+                    if (this.colorMode === 'color') {
+                        this.context.fillStyle = `rgb(${r},${g},${b})`;
+                    } else if (this.colorMode === 'grayscale') {
+                        const gray = (r + g + b) / 3;
+                        this.context.fillStyle = `rgb(${gray},${gray},${gray})`;
+                    } else {
+                        this.context.fillStyle = '#fff';
+                    }
+                    
+                    this.context.fillText(char, x, y);
+                }
+            }
+        }
+    }
+
+    animate() {
+        requestAnimationFrame(() => this.animate());
+        
+        if (this.autoRotate && this.currentModel) {
+            this.currentModel.rotation.x += 0.01;
+            this.currentModel.rotation.y += 0.01;
+        }
+        
+        this.renderToASCII();
+    }
+
+    setupEventListeners() {
+        // Model selection
+        document.getElementById('model-select').addEventListener('change', (e) => {
+            document.getElementById('loading').style.display = 'block';
+            setTimeout(() => this.loadModel(e.target.value), 100);
+        });
+
+        // Resolution slider
+        const resolutionSlider = document.getElementById('resolution');
+        const resolutionValue = document.getElementById('resolution-value');
+        
+        resolutionSlider.addEventListener('input', (e) => {
+            this.resolution = parseInt(e.target.value);
+            resolutionValue.textContent = this.resolution;
+        });
+
+        // Character set
+        document.getElementById('charset').addEventListener('change', (e) => {
+            const sets = {
+                'default': '@%#*+=-:. ',
+                'dense': '█▓▒░ ',
+                'simple': '#*+-. ',
+                'numbers': '9876543210'
+            };
+            this.charSet = sets[e.target.value];
+        });
+
+        // Color mode
+        document.getElementById('color-mode').addEventListener('change', (e) => {
+            this.colorMode = e.target.value;
+        });
+
+        // Auto rotation
+        document.getElementById('auto-rotate').addEventListener('change', (e) => {
+            this.autoRotate = e.target.checked;
+        });
+
+        // Reset camera
+        document.getElementById('reset-camera').addEventListener('click', () => {
+            if (this.currentModel) {
+                this.currentModel.rotation.set(0, 0, 0);
+            }
+        });
+
+        // Mouse controls for manual rotation
+        let isDragging = false;
+        let previousMousePosition = {x: 0, y: 0};
+        
+        this.asciiCanvas.addEventListener('mousedown', (e) => {
+            isDragging = true;
+        });
+        
+        this.asciiCanvas.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+        
+        this.asciiCanvas.addEventListener('mousemove', (e) => {
+            if (!isDragging || !this.currentModel) return;
+            
+            const deltaMove = {
+                x: e.offsetX - previousMousePosition.x,
+                y: e.offsetY - previousMousePosition.y
+            };
+            
+            this.currentModel.rotation.y += deltaMove.x * 0.01;
+            this.currentModel.rotation.x += deltaMove.y * 0.01;
+            
+            previousMousePosition = {
+                x: e.offsetX,
+                y: e.offsetY
+            };
+        });
+        
+        this.asciiCanvas.addEventListener('mouseleave', () => {
+            isDragging = false;
+        });
+    }
+}
+
+// Initialize the viewer when the page loads
+window.addEventListener('load', () => {
+    new ASCII3DViewer();
+});
+
+// Polyfill for BufferGeometryUtils if needed
+if (!THREE.BufferGeometryUtils) {
+    console.warn('THREE.BufferGeometryUtils not available. Some models may not work correctly.');
+    THREE.BufferGeometryUtils = {
+        mergeBufferGeometries: (geometries) => geometries[0]
+    };
+}

index.html

@@ -1,19 +1,72 @@
-<!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 ASCII Model Viewer</title>
+    <meta name="description" content="Interactive 3D ASCII art model viewer with customizable settings">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <header>
+        <h1>3D ASCII Model Viewer</h1>
+    </header>
+
+    <main class="container">
+        <div class="viewer-container">
+            <canvas id="ascii-canvas"></canvas>
+            <div id="loading" class="loading">Loading...</div>
+        </div>
+
+        <div class="controls-panel">
+            <div class="control-group">
+                <label for="model-select">Select Model:</label>
+                <select id="model-select">
+                    <option value="cube">Cube</option>
+                    <option value="sphere">Sphere</option>
+                    <option value="torus">Torus</option>
+                    <option value="teapot">Teapot</option>
+                </select>
+            </div>
+
+            <div class="control-group">
+                <h3>ASCII Settings</h3>
+                <label for="resolution">Resolution:</label>
+                <input type="range" id="resolution" min="10" max="100" value="50">
+                <span id="resolution-value">50</span>
+
+                <label for="charset">Character Set:</label>
+                <select id="charset">
+                    <option value="default">@%#*+=-:. </option>
+                    <option value="dense">█▓▒░ </option>
+                    <option value="simple">#*+-. </option>
+                    <option value="numbers">9876543210</option>
+                </select>
+
+                <label for="color-mode">Color Mode:</label>
+                <select id="color-mode">
+                    <option value="mono">Monochrome</option>
+                    <option value="grayscale">Grayscale</option>
+                    <option value="color">Full Color</option>
+                </select>
+            </div>
+
+            <div class="control-group">
+                <h3>Camera Controls</h3>
+                <label>
+                    <input type="checkbox" id="auto-rotate" checked>
+                    Auto Rotate
+                </label>
+                <button id="reset-camera">Reset Camera</button>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <p>&copy; 2023 3D ASCII Model Viewer | Built with Three.js</p>
+    </footer>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="assets/js/script.js"></script>
+</body>
+</html>