Spaces:

privateuserh
/

privholochp2

Running

File size: 27,391 Bytes

5b02d11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VRML Data Visualization with CBR Pixels</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.net.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Courier New', monospace;
        }
        #vrml-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .data-block {
            position: absolute;
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(100, 255, 255, 0.5);
            border-radius: 4px;
            padding: 10px;
            color: #66ffcc;
            font-size: 12px;
            pointer-events: none;
            transform: translateZ(0);
        }
        .pixel-cluster {
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            width: 80px;
            height: 80px;
            pointer-events: none;
        }
        .pixel {
            width: 8px;
            height: 8px;
            margin: 1px;
            background: #4aff9d;
            opacity: 0.8;
            transition: all 0.3s ease;
        }
        .pixel:hover {
            transform: scale(1.5);
            opacity: 1;
            background: #ff4a9d;
        }
        .search-btn, .input-btn {
            position: fixed;
            bottom: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transition: all 0.3s ease;
        }
        .search-btn {
            right: 30px;
            background: linear-gradient(135deg, #4aff9d, #4a9dff);
        }
        .input-btn {
            right: 110px;
            background: linear-gradient(135deg, #ff4a9d, #ff9d4a);
        }
        .search-btn:hover, .input-btn:hover {
            transform: scale(1.1) rotate(15deg);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
        }
        .search-panel, .input-panel, .data-panel {
            position: fixed;
            right: 30px;
            width: 300px;
            padding: 20px;
            background: rgba(30, 30, 30, 0.95);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            transform: translateY(20px);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            border: 1px solid rgba(100, 255, 255, 0.3);
        }
        .search-panel {
            bottom: 110px;
        }
        .input-panel {
            bottom: 110px;
        }
        .data-panel {
            top: 30px;
            right: 30px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .panel-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #4aff9d;
            border-bottom: 1px solid rgba(100, 255, 255, 0.3);
            padding-bottom: 8px;
        }
        .panel-active {
            transform: translateY(0);
            opacity: 1;
            pointer-events: all;
        }
        .search-input, .data-input {
            width: 100%;
            padding: 10px;
            background: rgba(50, 50, 50, 0.8);
            border: 1px solid #4aff9d;
            border-radius: 5px;
            color: white;
            margin-bottom: 10px;
        }
        .search-results, .algorithm-select {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 15px;
        }
        .result-item, .algorithm-option {
            padding: 8px;
            margin: 5px 0;
            background: rgba(70, 70, 70, 0.5);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .result-item:hover, .algorithm-option:hover {
            background: rgba(100, 255, 255, 0.2);
            transform: translateX(5px);
        }
        .highlight {
            background-color: rgba(255, 215, 0, 0.3);
            color: #ffd700;
        }
        .btn-submit {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #4aff9d, #4a9dff);
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        .data-item {
            margin-bottom: 10px;
            padding: 8px;
            background: rgba(50, 50, 50, 0.5);
            border-radius: 3px;
        }
        .data-key {
            font-weight: bold;
            color: #4a9dff;
        }
        .data-value {
            color: #66ffcc;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #ff4a9d;
            cursor: pointer;
            font-size: 20px;
        }
        .pixel-active {
            pointer-events: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="vrml-container"></div>
    
    <!-- Data Blocks -->
    <div class="data-block" style="top: 20%; left: 15%;">
        <h3 class="text-lg mb-2">Data Block #1</h3>
        <p>VRML Geometry Nodes</p>
        <p>Transform: [x:1.2, y:0.8, z:0.5]</p>
        <div class="pixel-cluster" style="top: 50px; left: 10px;"></div>
    </div>
    
    <div class="data-block" style="top: 30%; right: 20%;">
        <h3 class="text-lg mb-2">Data Block #2</h3>
        <p>Pixel Cluster Analysis</p>
        <p>Density: 0.78</p>
        <div class="pixel-cluster" style="top: 50px; left: 10px;"></div>
    </div>
    
    <div class="data-block" style="bottom: 25%; left: 25%;">
        <h3 class="text-lg mb-2">Data Block #3</h3>
        <p>CBR Metadata</p>
        <p>Index: 42</p>
        <div class="pixel-cluster" style="top: 50px; left: 10px;"></div>
    </div>
    
    <!-- Floating Buttons -->
    <div class="input-btn" id="inputBtn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
    </div>
    
    <div class="search-btn" id="searchBtn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
    </div>
    
    <!-- Input Panel -->
    <div class="input-panel" id="inputPanel">
        <div class="panel-title">Add Data to CBR Pixel</div>
        <div class="close-btn" id="closeInputPanel">×</div>
        
        <div class="algorithm-select">
            <div class="algorithm-option selected" data-algo="quantumHash">Quantum Hash Encoding</div>
            <div class="algorithm-option" data-algo="neuralFractal">Neural Fractal Compression</div>
            <div class="algorithm-option" data-algo="bioTensor">Bio-Tensor Mapping</div>
        </div>
        
        <input type="text" class="data-input" placeholder="Data title" id="dataTitle">
        <textarea class="data-input" placeholder="Data content" id="dataContent" rows="4"></textarea>
        <input type="text" class="data-input" placeholder="Tags (comma separated)" id="dataTags">
        
        <button class="btn-submit" id="submitData">Encode Data to Pixel</button>
    </div>
    
    <!-- Search Panel -->
    <div class="search-panel" id="searchPanel">
        <div class="panel-title">Search Data Blocks</div>
        <div class="close-btn" id="closeSearchPanel">×</div>
        
        <input type="text" class="search-input" placeholder="Search data blocks..." id="searchInput">
        <div class="search-results" id="searchResults">
            <!-- Results will be populated here -->
        </div>
    </div>
    
    <!-- Data Display Panel -->
    <div class="data-panel" id="dataPanel">
        <div class="panel-title">Pixel Data Viewer</div>
        <div class="close-btn" id="closeDataPanel">×</div>
        
        <div id="pixelDataContent">
            <!-- Data will be displayed here -->
        </div>
    </div>

    <script>
        // Initialize Three.js scene
        const container = document.getElementById('vrml-container');
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        
        // Add VRML-like geometry
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ 
            color: 0x44ffaa,
            wireframe: true,
            transparent: true,
            opacity: 0.5
        });
        
        // Create multiple floating cubes
        const cubes = [];
        for (let i = 0; i < 15; i++) {
            const cube = new THREE.Mesh(geometry, material);
            cube.position.x = Math.random() * 10 - 5;
            cube.position.y = Math.random() * 10 - 5;
            cube.position.z = Math.random() * 10 - 5;
            cube.rotation.x = Math.random() * Math.PI;
            cube.rotation.y = Math.random() * Math.PI;
            scene.add(cube);
            cubes.push(cube);
        }
        
        // Add connecting lines between cubes
        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x44aaff, transparent: true, opacity: 0.3 });
        for (let i = 0; i < cubes.length; i++) {
            for (let j = i + 1; j < cubes.length; j++) {
                if (Math.random() > 0.7) {
                    const geometry = new THREE.BufferGeometry().setFromPoints([
                        cubes[i].position,
                        cubes[j].position
                    ]);
                    const line = new THREE.Line(geometry, lineMaterial);
                    scene.add(line);
                }
            }
        }
        
        camera.position.z = 15;
        
        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            
            cubes.forEach(cube => {
                cube.rotation.x += 0.005;
                cube.rotation.y += 0.007;
            });
            
            renderer.render(scene, camera);
        }
        animate();
        
        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // Create pixel clusters in data blocks
        document.querySelectorAll('.pixel-cluster').forEach(cluster => {
            for (let i = 0; i < 64; i++) {
                const pixel = document.createElement('div');
                pixel.className = 'pixel';
                pixel.style.opacity = Math.random() * 0.5 + 0.3;
                cluster.appendChild(pixel);
            }
        });
        
        // Database simulation
        const pixelDatabase = {};
        let currentAlgorithm = 'quantumHash';
        
        // Unique encoding algorithms
        const encodingAlgorithms = {
            quantumHash: (data) => {
                // Quantum-inspired hash encoding
                let hash = 0;
                const str = JSON.stringify(data);
                for (let i = 0; i < str.length; i++) {
                    const char = str.charCodeAt(i);
                    hash = (hash << 5) - hash + char;
                    hash = hash & hash; // Convert to 32bit integer
                    hash ^= (hash << 7) ^ (hash >> 5); // Quantum-like mixing
                }
                return {
                    encoded: hash.toString(36).slice(-8),
                    algorithm: 'Quantum Hash Encoding',
                    timestamp: new Date().toISOString()
                };
            },
            neuralFractal: (data) => {
                // Neural network inspired fractal compression
                const str = JSON.stringify(data);
                let fractal = '';
                let weight = 0.6180339887; // Golden ratio
                
                for (let i = 0; i < Math.min(16, str.length); i++) {
                    const charCode = str.charCodeAt(i % str.length);
                    const transformed = Math.floor((charCode * weight) % 256);
                    fractal += String.fromCharCode(transformed);
                    weight = 1 - weight; // Alternating weights
                }
                
                return {
                    encoded: btoa(fractal).slice(0, 8),
                    algorithm: 'Neural Fractal Compression',
                    timestamp: new Date().toISOString()
                };
            },
            bioTensor: (data) => {
                // Biological tensor mapping
                const str = JSON.stringify(data);
                let tensor = [];
                let prev = 0;
                
                for (let i = 0; i < str.length; i++) {
                    const current = str.charCodeAt(i);
                    tensor.push((current + prev) % 256);
                    prev = current;
                }
                
                // Reduce to 8 bytes using biological folding
                let folded = [];
                for (let i = 0; i < 8; i++) {
                    let sum = 0;
                    for (let j = 0; j < tensor.length; j++) {
                        if (j % (i + 1) === 0) {
                            sum += tensor[j];
                        }
                    }
                    folded.push(sum % 256);
                }
                
                return {
                    encoded: btoa(String.fromCharCode(...folded)).slice(0, 8),
                    algorithm: 'Bio-Tensor Mapping',
                    timestamp: new Date().toISOString()
                };
            }
        };
        
        // Data retrieval algorithm
        function retrievePixelData(pixel) {
            const pixelId = Array.from(pixel.parentNode.children).indexOf(pixel);
            const clusterId = Array.from(document.querySelectorAll('.pixel-cluster')).indexOf(pixel.parentNode);
            
            // In a real system, this would query the database
            if (pixelDatabase[`${clusterId}-${pixelId}`]) {
                return pixelDatabase[`${clusterId}-${pixelId}`];
            }
            
            return null;
        }
        
        // UI Elements
        const inputBtn = document.getElementById('inputBtn');
        const searchBtn = document.getElementById('searchBtn');
        const inputPanel = document.getElementById('inputPanel');
        const searchPanel = document.getElementById('searchPanel');
        const dataPanel = document.getElementById('dataPanel');
        const closeInputPanel = document.getElementById('closeInputPanel');
        const closeSearchPanel = document.getElementById('closeSearchPanel');
        const closeDataPanel = document.getElementById('closeDataPanel');
        const searchInput = document.getElementById('searchInput');
        const searchResults = document.getElementById('searchResults');
        const dataTitle = document.getElementById('dataTitle');
        const dataContent = document.getElementById('dataContent');
        const dataTags = document.getElementById('dataTags');
        const submitData = document.getElementById('submitData');
        const pixelDataContent = document.getElementById('pixelDataContent');
        const algorithmOptions = document.querySelectorAll('.algorithm-option');
        
        // Toggle panels
        inputBtn.addEventListener('click', () => {
            inputPanel.classList.toggle('panel-active');
            searchPanel.classList.remove('panel-active');
            dataPanel.classList.remove('panel-active');
        });
        
        searchBtn.addEventListener('click', () => {
            searchPanel.classList.toggle('panel-active');
            inputPanel.classList.remove('panel-active');
            dataPanel.classList.remove('panel-active');
            if (searchPanel.classList.contains('panel-active')) {
                searchInput.focus();
            }
        });
        
        closeInputPanel.addEventListener('click', () => {
            inputPanel.classList.remove('panel-active');
        });
        
        closeSearchPanel.addEventListener('click', () => {
            searchPanel.classList.remove('panel-active');
        });
        
        closeDataPanel.addEventListener('click', () => {
            dataPanel.classList.remove('panel-active');
        });
        
        // Algorithm selection
        algorithmOptions.forEach(option => {
            option.addEventListener('click', () => {
                algorithmOptions.forEach(opt => opt.classList.remove('selected'));
                option.classList.add('selected');
                currentAlgorithm = option.dataset.algo;
            });
        });
        
        // Submit data to pixel
        submitData.addEventListener('click', () => {
            const title = dataTitle.value.trim();
            const content = dataContent.value.trim();
            const tags = dataTags.value.split(',').map(tag => tag.trim()).filter(tag => tag);
            
            if (!title || !content) {
                alert('Please enter both title and content');
                return;
            }
            
            const data = {
                title,
                content,
                tags,
                raw: `${title}\n\n${content}\n\nTags: ${tags.join(', ')}`
            };
            
            // Encode using selected algorithm
            const encoded = encodingAlgorithms[currentAlgorithm](data);
            const fullData = { ...data, ...encoded };
            
            // Find all pixels and make them interactive
            const pixels = document.querySelectorAll('.pixel');
            pixels.forEach(pixel => {
                pixel.classList.add('pixel-active');
                
                pixel.addEventListener('click', () => {
                    // Store data in our simulated database
                    const pixelId = Array.from(pixel.parentNode.children).indexOf(pixel);
                    const clusterId = Array.from(document.querySelectorAll('.pixel-cluster')).indexOf(pixel.parentNode);
                    pixelDatabase[`${clusterId}-${pixelId}`] = fullData;
                    
                    // Visual feedback
                    pixel.style.background = '#ff4a9d';
                    pixel.style.transform = 'scale(1.5)';
                    pixel.style.opacity = '1';
                    
                    setTimeout(() => {
                        pixel.style.background = '#4aff9d';
                        pixel.style.transform = 'scale(1)';
                        pixel.style.opacity = '0.8';
                    }, 500);
                    
                    // Close input panel
                    inputPanel.classList.remove('panel-active');
                    
                    // Clear form
                    dataTitle.value = '';
                    dataContent.value = '';
                    dataTags.value = '';
                });
            });
            
            alert(`Data ready to be assigned to a pixel. Click any pixel to store using ${encoded.algorithm}`);
        });
        
        // Pixel click handler
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('pixel')) {
                const pixel = e.target;
                const data = retrievePixelData(pixel);
                
                if (data) {
                    // Display the data
                    pixelDataContent.innerHTML = `
                        <div class="data-item">
                            <div class="data-key">Title:</div>
                            <div class="data-value">${data.title}</div>
                        </div>
                        <div class="data-item">
                            <div class="data-key">Content:</div>
                            <div class="data-value">${data.content}</div>
                        </div>
                        <div class="data-item">
                            <div class="data-key">Tags:</div>
                            <div class="data-value">${data.tags.join(', ')}</div>
                        </div>
                        <div class="data-item">
                            <div class="data-key">Encoded:</div>
                            <div class="data-value">${data.encoded}</div>
                        </div>
                        <div class="data-item">
                            <div class="data-key">Algorithm:</div>
                            <div class="data-value">${data.algorithm}</div>
                        </div>
                        <div class="data-item">
                            <div class="data-key">Timestamp:</div>
                            <div class="data-value">${new Date(data.timestamp).toLocaleString()}</div>
                        </div>
                    `;
                    
                    // Show data panel
                    dataPanel.classList.add('panel-active');
                    inputPanel.classList.remove('panel-active');
                    searchPanel.classList.remove('panel-active');
                } else {
                    alert('This pixel contains no data. Use the + button to add data first.');
                }
            }
        });
        
        // Search functionality
        const dataBlocks = [
            { id: 1, title: "VRML Geometry Nodes", content: "Transform nodes with xyz coordinates and rotation parameters", tags: ["geometry", "nodes", "transform"] },
            { id: 2, title: "Pixel Cluster Analysis", content: "Analysis of pixel clusters within data blocks for CBR", tags: ["pixels", "clusters", "analysis"] },
            { id: 3, title: "CBR Metadata", content: "Content-based retrieval metadata for efficient search", tags: ["cbr", "metadata", "search"] },
            { id: 4, title: "Data Block Transform", content: "Transformation matrix for 3D data visualization", tags: ["transform", "matrix", "3d"] },
            { id: 5, title: "Pixel Density Metrics", content: "Metrics for measuring pixel cluster density in VRML", tags: ["metrics", "density", "pixels"] }
        ];
        
        searchInput.addEventListener('input', (e) => {
            const query = e.target.value.toLowerCase();
            searchResults.innerHTML = '';
            
            if (query.length < 2) return;
            
            const results = dataBlocks.filter(block => 
                block.title.toLowerCase().includes(query) || 
                block.content.toLowerCase().includes(query) ||
                block.tags.some(tag => tag.includes(query))
            );
            
            if (results.length === 0) {
                searchResults.innerHTML = '<div class="result-item">No results found</div>';
                return;
            }
            
            results.forEach(block => {
                const resultItem = document.createElement('div');
                resultItem.className = 'result-item';
                
                // Highlight matching text
                let title = block.title;
                let content = block.content.substring(0, 60) + '...';
                
                // Highlight matches in title
                const titleMatchIndex = title.toLowerCase().indexOf(query);
                if (titleMatchIndex >= 0) {
                    const before = title.substring(0, titleMatchIndex);
                    const match = title.substring(titleMatchIndex, titleMatchIndex + query.length);
                    const after = title.substring(titleMatchIndex + query.length);
                    title = `${before}<span class="highlight">${match}</span>${after}`;
                }
                
                // Highlight matches in content
                const contentMatchIndex = content.toLowerCase().indexOf(query);
                if (contentMatchIndex >= 0) {
                    const before = content.substring(0, contentMatchIndex);
                    const match = content.substring(contentMatchIndex, contentMatchIndex + query.length);
                    const after = content.substring(contentMatchIndex + query.length);
                    content = `${before}<span class="highlight">${match}</span>${after}`;
                }
                
                resultItem.innerHTML = `
                    <div class="font-bold">${title}</div>
                    <div class="text-sm opacity-80">${content}</div>
                    <div class="text-xs mt-1">Tags: ${block.tags.join(', ')}</div>
                `;
                
                resultItem.addEventListener('click', () => {
                    alert(`Navigating to: ${block.title}`);
                });
                
                searchResults.appendChild(resultItem);
            });
        });
        
        // Initialize Vanta.js background
        VANTA.NET({
            el: "#vrml-container",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x44aaff,
            backgroundColor: 0x111122,
            points: 10.00,
            maxDistance: 20.00,
            spacing: 15.00
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privholochp2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>