Hugging Face's logo

Spaces:
privateuserh
/
privholochp2
Running

App Files Community
privholochp2 / index.html
privateuserh's picture
privateuserh
Add 3 files
5b02d11 verified
raw
history blame contribute delete
27.4 kB
 <!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/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>