Spaces:

JohnPork04
/

neural-canvas

Running

App Files Files Community

JohnPork04 commited on Apr 13

Commit

25aa909

verified ·

1 Parent(s): 672b534

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +683 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Neural Canvas
-emoji: 👀
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: neural-canvas
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,683 @@
-<!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>Neural Canvas - Interactive AI Art</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/p5.js"></script>
+    <style>
+        body {
+            overflow: hidden;
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #000428 0%, #004e92 100%);
+        }
+        .art-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        .control-panel {
+            position: absolute;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 50px;
+            padding: 1rem 2rem;
+            display: flex;
+            gap: 1rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+        .art-button {
+            padding: 0.8rem 1.5rem;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 0.9rem;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: none;
+            color: white;
+            background: rgba(255, 255, 255, 0.1);
+        }
+        .art-button:hover {
+            transform: translateY(-3px);
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .art-button.active {
+            background: white;
+            color: #004e92;
+            font-weight: 700;
+        }
+        .title {
+            position: absolute;
+            top: 2rem;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            color: white;
+            font-size: 3rem;
+            font-weight: 800;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+            z-index: 10;
+            letter-spacing: 2px;
+        }
+        .subtitle {
+            position: absolute;
+            top: 6rem;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1.1rem;
+            font-weight: 400;
+            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+            z-index: 10;
+            letter-spacing: 1px;
+        }
+        .interaction-info {
+            position: absolute;
+            bottom: 6rem;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.9rem;
+            z-index: 10;
+        }
+        .gradient-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
+            z-index: 2;
+        }
+    </style>
+</head>
+<body class="h-screen w-screen relative">
+    <div class="title">NEURAL CANVAS</div>
+    <div class="subtitle">Interactive AI-Generated Art Experience</div>
+    <div class="interaction-info">Move your mouse to influence the patterns • Click buttons to change styles</div>
+    <div class="control-panel">
+        <button id="fractal" class="art-button active">Fractal</button>
+        <button id="fluid" class="art-button">Fluid</button>
+        <button id="neural" class="art-button">Neural</button>
+        <button id="quantum" class="art-button">Quantum</button>
+        <button id="cosmic" class="art-button">Cosmic</button>
+    </div>
+    <div id="canvas-container" class="art-container"></div>
+    <div class="gradient-overlay"></div>
+    <script>
+        let sketch = function(p) {
+            let particles = [];
+            let mode = 'fractal';
+            let mouseX = 0;
+            let mouseY = 0;
+            let mouseIsMoving = false;
+            let mouseMoveTimeout;
+            let flowField = [];
+            let fieldResolution = 20;
+            let zoff = 0;
+            let neuralWeights = [];
+            let neuralLayers = [];
+            // Color palettes for different modes
+            const colorPalettes = {
+                fractal: [
+                    p.color(255, 107, 107), // Red
+                    p.color(255, 159, 67),  // Orange
+                    p.color(255, 206, 84),  // Yellow
+                    p.color(29, 209, 161),  // Teal
+                    p.color(72, 219, 251)   // Blue
+                ],
+                fluid: [
+                    p.color(6, 82, 221),    // Deep Blue
+                    p.color(0, 210, 255),   // Cyan
+                    p.color(100, 255, 218), // Mint
+                    p.color(255, 255, 255)  // White
+                ],
+                neural: [
+                    p.color(131, 58, 180),  // Purple
+                    p.color(253, 29, 29),   // Red
+                    p.color(252, 176, 69),  // Orange
+                    p.color(255, 255, 0),   // Yellow
+                    p.color(0, 255, 0)      // Green
+                ],
+                quantum: [
+                    p.color(0, 255, 255),   // Cyan
+                    p.color(255, 0, 255),   // Magenta
+                    p.color(255, 255, 0),   // Yellow
+                    p.color(255, 255, 255)  // White
+                ],
+                cosmic: [
+                    p.color(12, 20, 69),    // Deep Space
+                    p.color(65, 105, 225),  // Royal Blue
+                    p.color(138, 43, 226),  // Purple
+                    p.color(255, 215, 0)    // Gold
+                ]
+            };
+            // Initialize neural network weights for visualization
+            function initNeuralWeights() {
+                neuralWeights = [];
+                neuralLayers = [];
+                // Create 3-5 layers with random neuron counts
+                const layerCount = p.floor(p.random(3, 6));
+                for (let i = 0; i < layerCount; i++) {
+                    neuralLayers.push(p.floor(p.random(3, 8)));
+                }
+                // Create weights between layers
+                for (let i = 0; i < layerCount - 1; i++) {
+                    const weights = [];
+                    for (let j = 0; j < neuralLayers[i] * neuralLayers[i+1]; j++) {
+                        weights.push(p.random(-1, 1));
+                    }
+                    neuralWeights.push(weights);
+                }
+            }
+            p.setup = function() {
+                let canvas = p.createCanvas(p.windowWidth, p.windowHeight);
+                canvas.parent('canvas-container');
+                // Create initial particles
+                for (let i = 0; i < 500; i++) {
+                    particles.push(new Particle());
+                }
+                // Initialize flow field
+                initFlowField();
+                // Initialize neural weights
+                initNeuralWeights();
+            };
+            function initFlowField() {
+                flowField = [];
+                for (let x = 0; x < p.width; x += fieldResolution) {
+                    for (let y = 0; y < p.height; y += fieldResolution) {
+                        flowField.push({
+                            x: x,
+                            y: y,
+                            angle: p.random(p.TWO_PI),
+                            strength: p.random(0.5, 2)
+                        });
+                    }
+                }
+            }
+            p.draw = function() {
+                // Different background styles for each mode
+                switch(mode) {
+                    case 'fractal':
+                        p.background(0, 10);
+                        break;
+                    case 'fluid':
+                        p.background(6, 18, 42, 10);
+                        break;
+                    case 'neural':
+                        p.background(0, 5);
+                        break;
+                    case 'quantum':
+                        p.background(0, 15);
+                        break;
+                    case 'cosmic':
+                        p.background(12, 20, 69, 10);
+                        break;
+                }
+                // Update flow field for fluid mode
+                if (mode === 'fluid') {
+                    updateFlowField();
+                }
+                // Update and display particles
+                for (let particle of particles) {
+                    // Apply mouse influence
+                    if (mouseIsMoving) {
+                        const mouseDist = p.dist(particle.pos.x, particle.pos.y, mouseX, mouseY);
+                        if (mouseDist < 200) {
+                            const force = p.createVector(
+                                (mouseX - particle.pos.x) * 0.1,
+                                (mouseY - particle.pos.y) * 0.1
+                            );
+                            particle.applyForce(force);
+                        }
+                    }
+                    // Apply behaviors based on mode
+                    switch(mode) {
+                        case 'fractal':
+                            applyFractalBehavior(particle);
+                            break;
+                        case 'fluid':
+                            applyFluidBehavior(particle);
+                            break;
+                        case 'neural':
+                            applyNeuralBehavior(particle);
+                            break;
+                        case 'quantum':
+                            applyQuantumBehavior(particle);
+                            break;
+                        case 'cosmic':
+                            applyCosmicBehavior(particle);
+                            break;
+                    }
+                    particle.update();
+                    particle.display();
+                }
+                // Add new particles occasionally
+                if (p.frameCount % 5 === 0 && particles.length < 1000) {
+                    particles.push(new Particle());
+                }
+                // Remove old particles if too many
+                if (particles.length > 1000) {
+                    particles.shift();
+                }
+                // Special rendering for neural mode
+                if (mode === 'neural') {
+                    renderNeuralNetwork();
+                }
+            };
+            function updateFlowField() {
+                zoff += 0.01;
+                let yoff = 0;
+                for (let point of flowField) {
+                    let xoff = p.map(point.x, 0, p.width, 0, 5);
+                    yoff = p.map(point.y, 0, p.height, 0, 5);
+                    // Update angle based on noise
+                    point.angle = p.map(p.noise(xoff, yoff, zoff), 0, 1, 0, p.TWO_PI);
+                    // Add some mouse influence
+                    const mouseDist = p.dist(point.x, point.y, mouseX, mouseY);
+                    if (mouseDist < 150) {
+                        point.angle = p.atan2(mouseY - point.y, mouseX - point.x);
+                        point.strength = p.map(mouseDist, 0, 150, 2, 0.5);
+                    }
+                }
+            }
+            function applyFractalBehavior(particle) {
+                // Fractal-inspired movement
+                const noiseVal = p.noise(
+                    particle.pos.x * 0.005,
+                    particle.pos.y * 0.005,
+                    p.frameCount * 0.01
+                );
+                const angle = noiseVal * p.TWO_PI * 4;
+                const force = p5.Vector.fromAngle(angle).mult(0.2);
+                particle.applyForce(force);
+                // Attract to center with some randomness
+                const center = p.createVector(p.width/2, p.height/2);
+                const toCenter = p5.Vector.sub(center, particle.pos);
+                toCenter.normalize().mult(0.05 * noiseVal);
+                particle.applyForce(toCenter);
+            }
+            function applyFluidBehavior(particle) {
+                // Find closest flow field point
+                const closestX = p.constrain(p.floor(particle.pos.x / fieldResolution) * fieldResolution, 0, p.width);
+                const closestY = p.constrain(p.floor(particle.pos.y / fieldResolution) * fieldResolution, 0, p.height);
+                let closestPoint = null;
+                let minDist = Infinity;
+                for (let point of flowField) {
+                    const dist = p.dist(particle.pos.x, particle.pos.y, point.x, point.y);
+                    if (dist < minDist) {
+                        minDist = dist;
+                        closestPoint = point;
+                    }
+                }
+                if (closestPoint) {
+                    const force = p5.Vector.fromAngle(closestPoint.angle).mult(closestPoint.strength * 0.1);
+                    particle.applyForce(force);
+                }
+            }
+            function applyNeuralBehavior(particle) {
+                // Neural network-inspired behavior
+                const inputX = p.map(particle.pos.x, 0, p.width, -1, 1);
+                const inputY = p.map(particle.pos.y, 0, p.height, -1, 1);
+                // Simple neural network simulation
+                let layerOutputs = [[inputX, inputY]];
+                for (let i = 0; i < neuralWeights.length; i++) {
+                    const weights = neuralWeights[i];
+                    const inputLayer = layerOutputs[i];
+                    const outputSize = neuralLayers[i+1];
+                    const newLayer = new Array(outputSize).fill(0);
+                    for (let j = 0; j < outputSize; j++) {
+                        for (let k = 0; k < inputLayer.length; k++) {
+                            const weightIndex = j * inputLayer.length + k;
+                            newLayer[j] += inputLayer[k] * weights[weightIndex];
+                        }
+                        // Simple activation function
+                        newLayer[j] = Math.tanh(newLayer[j]);
+                    }
+                    layerOutputs.push(newLayer);
+                }
+                // Use final layer outputs to determine movement
+                const finalOutputs = layerOutputs[layerOutputs.length - 1];
+                const force = p.createVector(
+                    finalOutputs[0] * 2,
+                    finalOutputs.length > 1 ? finalOutputs[1] * 2 : 0
+                );
+                particle.applyForce(force);
+            }
+            function applyQuantumBehavior(particle) {
+                // Quantum physics-inspired behavior
+                const x = particle.pos.x * 0.01;
+                const y = particle.pos.y * 0.01;
+                const t = p.frameCount * 0.01;
+                // Wave function collapse probability
+                const prob = p.pow(p.sin(x + t) * p.cos(y - t), 2);
+                if (prob > 0.5) {
+                    // Quantum tunneling effect
+                    const angle = p.random(p.TWO_PI);
+                    const force = p5.Vector.fromAngle(angle).mult(2);
+                    particle.applyForce(force);
+                } else {
+                    // Quantum harmonic oscillator
+                    const centerForce = p.createVector(
+                        p.width/2 - particle.pos.x,
+                        p.height/2 - particle.pos.y
+                    ).normalize().mult(0.05);
+                    particle.applyForce(centerForce);
+                }
+            }
+            function applyCosmicBehavior(particle) {
+                // Cosmic/gravity-inspired behavior
+                const center = p.createVector(p.width/2, p.height/2);
+                const toCenter = p5.Vector.sub(center, particle.pos);
+                const distance = toCenter.mag();
+                // Inverse square law gravity
+                const strength = 10000 / (distance * distance);
+                toCenter.normalize().mult(strength);
+                particle.applyForce(toCenter);
+                // Add some random cosmic rays
+                if (p.random() < 0.01) {
+                    const cosmicForce = p5.Vector.random2D().mult(5);
+                    particle.applyForce(cosmicForce);
+                }
+            }
+            function renderNeuralNetwork() {
+                p.push();
+                p.noFill();
+                p.stroke(255, 50);
+                p.strokeWeight(1);
+                const layerSpacing = p.width / (neuralLayers.length + 1);
+                const maxNeurons = Math.max(...neuralLayers);
+                // Draw connections between layers
+                for (let i = 0; i < neuralWeights.length; i++) {
+                    const weights = neuralWeights[i];
+                    const neuronsIn = neuralLayers[i];
+                    const neuronsOut = neuralLayers[i+1];
+                    const x1 = (i + 1) * layerSpacing;
+                    const x2 = (i + 2) * layerSpacing;
+                    for (let j = 0; j < neuronsIn; j++) {
+                        const y1 = p.map(j, 0, neuronsIn - 1, 100, p.height - 100);
+                        for (let k = 0; k < neuronsOut; k++) {
+                            const y2 = p.map(k, 0, neuronsOut - 1, 100, p.height - 100);
+                            const weight = weights[k * neuronsIn + j];
+                            // Color based on weight value
+                            if (weight > 0) {
+                                p.stroke(0, 255, 0, p.map(weight, 0, 1, 50, 200));
+                            } else {
+                                p.stroke(255, 0, 0, p.map(weight, -1, 0, 50, 200));
+                            }
+                            p.line(x1, y1, x2, y2);
+                        }
+                    }
+                }
+                // Draw neurons
+                for (let i = 0; i < neuralLayers.length; i++) {
+                    const neuronCount = neuralLayers[i];
+                    const x = (i + 1) * layerSpacing;
+                    for (let j = 0; j < neuronCount; j++) {
+                        const y = p.map(j, 0, neuronCount - 1, 100, p.height - 100);
+                        // Color based on layer
+                        const layerColor = p.color(colorPalettes.neural[i % colorPalettes.neural.length]);
+                        p.fill(layerColor);
+                        p.noStroke();
+                        p.circle(x, y, 15);
+                    }
+                }
+                p.pop();
+            }
+            p.mouseMoved = function() {
+                mouseX = p.mouseX;
+                mouseY = p.mouseY;
+                mouseIsMoving = true;
+                clearTimeout(mouseMoveTimeout);
+                mouseMoveTimeout = setTimeout(() => {
+                    mouseIsMoving = false;
+                }, 100);
+                // Add particles at mouse position
+                if (mode === 'fluid' || mode === 'quantum') {
+                    for (let i = 0; i < 5; i++) {
+                        particles.push(new Particle(mouseX, mouseY));
+                    }
+                }
+            };
+            p.touchMoved = function() {
+                p.mouseMoved();
+                return false;
+            };
+            p.windowResized = function() {
+                p.resizeCanvas(p.windowWidth, p.windowHeight);
+                initFlowField();
+            };
+            class Particle {
+                constructor(x, y) {
+                    this.pos = x && y ?
+                        p.createVector(x, y) :
+                        p.createVector(p.random(p.width), p.random(p.height));
+                    this.vel = p5.Vector.random2D().mult(p.random(0.5, 2));
+                    this.acc = p.createVector();
+                    this.life = p.random(100, 200);
+                    this.maxLife = this.life;
+                    this.size = p.random(2, 8);
+                    this.color = p.random(colorPalettes[mode]);
+                    this.rotation = p.random(p.TWO_PI);
+                    this.rotationSpeed = p.random(-0.02, 0.02);
+                }
+                applyForce(force) {
+                    this.acc.add(force);
+                }
+                update() {
+                    this.vel.add(this.acc);
+                    // Different velocity limits per mode
+                    switch(mode) {
+                        case 'fractal':
+                            this.vel.limit(3);
+                            break;
+                        case 'fluid':
+                            this.vel.limit(2);
+                            break;
+                        case 'neural':
+                            this.vel.limit(4);
+                            break;
+                        case 'quantum':
+                            this.vel.limit(5);
+                            break;
+                        case 'cosmic':
+                            this.vel.limit(8);
+                            break;
+                    }
+                    this.pos.add(this.vel);
+                    this.acc.mult(0);
+                    this.life--;
+                    this.rotation += this.rotationSpeed;
+                    // Wrap around edges
+                    if (this.pos.x < 0) this.pos.x = p.width;
+                    if (this.pos.x > p.width) this.pos.x = 0;
+                    if (this.pos.y < 0) this.pos.y = p.height;
+                    if (this.pos.y > p.height) this.pos.y = 0;
+                }
+                display() {
+                    p.push();
+                    p.translate(this.pos.x, this.pos.y);
+                    p.rotate(this.rotation);
+                    const alpha = p.map(this.life, 0, this.maxLife, 0, 255);
+                    this.color.setAlpha(alpha);
+                    p.fill(this.color);
+                    p.noStroke();
+                    // Different shapes per mode
+                    switch(mode) {
+                        case 'fractal':
+                            p.circle(0, 0, this.size);
+                            break;
+                        case 'fluid':
+                            p.ellipse(0, 0, this.size * 1.5, this.size);
+                            break;
+                        case 'neural':
+                            p.rect(0, 0, this.size, this.size, this.size/4);
+                            break;
+                        case 'quantum':
+                            p.triangle(
+                                -this.size/2, this.size/2,
+                                0, -this.size/2,
+                                this.size/2, this.size/2
+                            );
+                            break;
+                        case 'cosmic':
+                            p.stroke(this.color);
+                            p.strokeWeight(1);
+                            p.line(-this.size/2, 0, this.size/2, 0);
+                            p.line(0, -this.size/2, 0, this.size/2);
+                            break;
+                    }
+                    p.pop();
+                }
+            }
+            // Change mode based on button clicks
+            this.setMode = function(newMode) {
+                mode = newMode;
+                // Update active button styling
+                document.querySelectorAll('.art-button').forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                document.getElementById(newMode).classList.add('active');
+                // Reset all particles with new colors
+                particles = [];
+                for (let i = 0; i < 500; i++) {
+                    particles.push(new Particle());
+                }
+                // Reinitialize components for specific modes
+                if (mode === 'fluid') {
+                    initFlowField();
+                } else if (mode === 'neural') {
+                    initNeuralWeights();
+                }
+                // Change background gradient
+                switch(mode) {
+                    case 'fractal':
+                        document.body.style.background = 'linear-gradient(135deg, #000428 0%, #004e92 100%)';
+                        break;
+                    case 'fluid':
+                        document.body.style.background = 'linear-gradient(135deg, #020111 0%, #3a3a52 100%)';
+                        break;
+                    case 'neural':
+                        document.body.style.background = 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)';
+                        break;
+                    case 'quantum':
+                        document.body.style.background = 'linear-gradient(135deg, #000000 0%, #0f2027 50%, #203a43 100%)';
+                        break;
+                    case 'cosmic':
+                        document.body.style.background = 'linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%)';
+                        break;
+                }
+            };
+        };
+        let myp5 = new p5(sketch);
+        // Button event listeners
+        document.getElementById('fractal').addEventListener('click', function() {
+            myp5.setMode('fractal');
+        });
+        document.getElementById('fluid').addEventListener('click', function() {
+            myp5.setMode('fluid');
+        });
+        document.getElementById('neural').addEventListener('click', function() {
+            myp5.setMode('neural');
+        });
+        document.getElementById('quantum').addEventListener('click', function() {
+            myp5.setMode('quantum');
+        });
+        document.getElementById('cosmic').addEventListener('click', function() {
+            myp5.setMode('cosmic');
+        });
+    </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=JohnPork04/neural-canvas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>