Spaces:
Running
Running
<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/vanta@0.5.21/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> |