Spaces:
Runtime error
Runtime error
Update app.py
Browse files
app.py
CHANGED
|
@@ -5,7 +5,110 @@ import random
|
|
| 5 |
import os
|
| 6 |
from PIL import Image
|
| 7 |
from deep_translator import GoogleTranslator
|
| 8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
# os.makedirs('assets', exist_ok=True)
|
| 10 |
if not os.path.exists('icon.jpg'):
|
| 11 |
os.system("wget -O icon.jpg https://i.pinimg.com/564x/64/49/88/644988c59447eb00286834c2e70fdd6b.jpg")
|
|
@@ -106,7 +209,7 @@ with gr.Blocks(theme='Nymbo/Nymbo_Theme', css=css) as app:
|
|
| 106 |
<h1 id="title-text">FLUX Capacitor</h1>
|
| 107 |
</div>
|
| 108 |
</center>
|
| 109 |
-
""")
|
| 110 |
|
| 111 |
with gr.Column(elem_id="app-container"):
|
| 112 |
with gr.Row():
|
|
|
|
| 5 |
import os
|
| 6 |
from PIL import Image
|
| 7 |
from deep_translator import GoogleTranslator
|
| 8 |
+
html='''<!DOCTYPE html>
|
| 9 |
+
<html lang="en">
|
| 10 |
+
<head>
|
| 11 |
+
<meta charset="UTF-8">
|
| 12 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 13 |
+
<title>Perlin Noise Animated Neon Square Effect</title>
|
| 14 |
+
<style>
|
| 15 |
+
body {
|
| 16 |
+
background-color: #000;
|
| 17 |
+
margin: 0;
|
| 18 |
+
height: 100vh;
|
| 19 |
+
display: flex;
|
| 20 |
+
justify-content: center;
|
| 21 |
+
align-items: center;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
#neon-square {
|
| 25 |
+
width: 300px;
|
| 26 |
+
height: 300px;
|
| 27 |
+
position: relative;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
#neon-square::before {
|
| 31 |
+
content: '';
|
| 32 |
+
position: absolute;
|
| 33 |
+
top: -20px;
|
| 34 |
+
left: -20px;
|
| 35 |
+
right: -20px;
|
| 36 |
+
bottom: -20px;
|
| 37 |
+
z-index: -1;
|
| 38 |
+
filter: blur(20px);
|
| 39 |
+
}
|
| 40 |
+
</style>
|
| 41 |
+
</head>
|
| 42 |
+
<body>
|
| 43 |
+
<div id="neon-square"></div>
|
| 44 |
+
|
| 45 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/noisejs/2.1.0/perlin.min.js"></script>
|
| 46 |
+
<script>
|
| 47 |
+
const neonSquare = document.getElementById('neon-square');
|
| 48 |
+
let time = 0;
|
| 49 |
+
|
| 50 |
+
function hslToRgb(h, s, l) {
|
| 51 |
+
let r, g, b;
|
| 52 |
+
if (s === 0) {
|
| 53 |
+
r = g = b = l;
|
| 54 |
+
} else {
|
| 55 |
+
const hue2rgb = (p, q, t) => {
|
| 56 |
+
if (t < 0) t += 1;
|
| 57 |
+
if (t > 1) t -= 1;
|
| 58 |
+
if (t < 1/6) return p + (q - p) * 6 * t;
|
| 59 |
+
if (t < 1/2) return q;
|
| 60 |
+
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
| 61 |
+
return p;
|
| 62 |
+
};
|
| 63 |
+
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
| 64 |
+
const p = 2 * l - q;
|
| 65 |
+
r = hue2rgb(p, q, h + 1/3);
|
| 66 |
+
g = hue2rgb(p, q, h);
|
| 67 |
+
b = hue2rgb(p, q, h - 1/3);
|
| 68 |
+
}
|
| 69 |
+
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
function updateColors() {
|
| 73 |
+
const noise1 = noise.simplex2(time * 0.5, 0) * 0.5 + 0.5;
|
| 74 |
+
const noise2 = noise.simplex2(time * 0.5, 1000) * 0.5 + 0.5;
|
| 75 |
+
const noise3 = noise.simplex2(time * 0.5, 2000) * 0.5 + 0.5;
|
| 76 |
+
const noise4 = noise.simplex2(time * 0.5, 3000) * 0.5 + 0.5;
|
| 77 |
+
|
| 78 |
+
const [r1, g1, b1] = hslToRgb(noise1, 1, 0.5);
|
| 79 |
+
const [r2, g2, b2] = hslToRgb(noise2, 1, 0.5);
|
| 80 |
+
const [r3, g3, b3] = hslToRgb(noise3, 1, 0.5);
|
| 81 |
+
const [r4, g4, b4] = hslToRgb(noise4, 1, 0.5);
|
| 82 |
+
|
| 83 |
+
const gradient = `linear-gradient(45deg,
|
| 84 |
+
rgb(${r1},${g1},${b1}),
|
| 85 |
+
rgb(${r2},${g2},${b2}),
|
| 86 |
+
rgb(${r3},${g3},${b3}),
|
| 87 |
+
rgb(${r4},${g4},${b4}))`;
|
| 88 |
+
|
| 89 |
+
neonSquare.style.background = gradient;
|
| 90 |
+
neonSquare.style.boxShadow = `
|
| 91 |
+
0 0 20px rgb(${r1},${g1},${b1}),
|
| 92 |
+
0 0 40px rgb(${r2},${g2},${b2}),
|
| 93 |
+
0 0 60px rgb(${r3},${g3},${b3}),
|
| 94 |
+
0 0 80px rgb(${r4},${g4},${b4})
|
| 95 |
+
`;
|
| 96 |
+
|
| 97 |
+
neonSquare.style.setProperty('--glow', gradient);
|
| 98 |
+
|
| 99 |
+
time += 0.01;
|
| 100 |
+
}
|
| 101 |
+
|
| 102 |
+
// Update colors every frame
|
| 103 |
+
function animate() {
|
| 104 |
+
updateColors();
|
| 105 |
+
requestAnimationFrame(animate);
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
+
animate();
|
| 109 |
+
</script>
|
| 110 |
+
</body>
|
| 111 |
+
</html>'''
|
| 112 |
# os.makedirs('assets', exist_ok=True)
|
| 113 |
if not os.path.exists('icon.jpg'):
|
| 114 |
os.system("wget -O icon.jpg https://i.pinimg.com/564x/64/49/88/644988c59447eb00286834c2e70fdd6b.jpg")
|
|
|
|
| 209 |
<h1 id="title-text">FLUX Capacitor</h1>
|
| 210 |
</div>
|
| 211 |
</center>
|
| 212 |
+
"""+html)
|
| 213 |
|
| 214 |
with gr.Column(elem_id="app-container"):
|
| 215 |
with gr.Row():
|