FLUX.1-Dev-Serverless-darn

Runtime error

App Files Files Community

K00B404 commited on Oct 18

Commit

d8b5099

•

1 Parent(s): 2f2c86e

Update app.py

Browse files

Files changed (1) hide show

app.py +66 -104

app.py CHANGED Viewed

@@ -5,110 +5,72 @@ import random
 import os
 from PIL import Image
 from deep_translator import GoogleTranslator
-html='''<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Perlin Noise Animated Neon Square Effect</title>
-    <style>
-        body {
-            background-color: #000;
-            margin: 0;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        #neon-square {
-            width: 300px;
-            height: 300px;
-            position: relative;
-        }
-        #neon-square::before {
-            content: '';
-            position: absolute;
-            top: -20px;
-            left: -20px;
-            right: -20px;
-            bottom: -20px;
-            z-index: -1;
-            filter: blur(20px);
-        }
-    </style>
-</head>
-<body>
-    <div id="neon-square"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/noisejs/2.1.0/perlin.min.js"></script>
-    <script>
-        const neonSquare = document.getElementById('neon-square');
-        let time = 0;
-        function hslToRgb(h, s, l) {
-            let r, g, b;
-            if (s === 0) {
-                r = g = b = l;
-            } else {
-                const hue2rgb = (p, q, t) => {
-                    if (t < 0) t += 1;
-                    if (t > 1) t -= 1;
-                    if (t < 1/6) return p + (q - p) * 6 * t;
-                    if (t < 1/2) return q;
-                    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-                    return p;
-                };
-                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-                const p = 2 * l - q;
-                r = hue2rgb(p, q, h + 1/3);
-                g = hue2rgb(p, q, h);
-                b = hue2rgb(p, q, h - 1/3);
-            }
-            return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-        }
-        function updateColors() {
-            const noise1 = noise.simplex2(time * 0.5, 0) * 0.5 + 0.5;
-            const noise2 = noise.simplex2(time * 0.5, 1000) * 0.5 + 0.5;
-            const noise3 = noise.simplex2(time * 0.5, 2000) * 0.5 + 0.5;
-            const noise4 = noise.simplex2(time * 0.5, 3000) * 0.5 + 0.5;
-            const [r1, g1, b1] = hslToRgb(noise1, 1, 0.5);
-            const [r2, g2, b2] = hslToRgb(noise2, 1, 0.5);
-            const [r3, g3, b3] = hslToRgb(noise3, 1, 0.5);
-            const [r4, g4, b4] = hslToRgb(noise4, 1, 0.5);
-            const gradient = `linear-gradient(45deg,
-                rgb(${r1},${g1},${b1}),
-                rgb(${r2},${g2},${b2}),
-                rgb(${r3},${g3},${b3}),
-                rgb(${r4},${g4},${b4}))`;
-            neonSquare.style.background = gradient;
-            neonSquare.style.boxShadow = `
-                0 0 20px rgb(${r1},${g1},${b1}),
-                0 0 40px rgb(${r2},${g2},${b2}),
-                0 0 60px rgb(${r3},${g3},${b3}),
-                0 0 80px rgb(${r4},${g4},${b4})
-            `;
-            neonSquare.style.setProperty('--glow', gradient);
-            time += 0.01;
-        }
-        // Update colors every frame
-        function animate() {
-            updateColors();
-            requestAnimationFrame(animate);
-        }
-        animate();
-    </script>
-</body>
-</html>'''
 # os.makedirs('assets', exist_ok=True)
 if not os.path.exists('icon.jpg'):
     os.system("wget -O icon.jpg https://i.pinimg.com/564x/64/49/88/644988c59447eb00286834c2e70fdd6b.jpg")

 import os
 from PIL import Image
 from deep_translator import GoogleTranslator
+html='''<style>
+  body, html, #app {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+#app {
+  overflow: hidden;
+  touch-action: pan-up;
+  color: #ffffff;
+  font-family: 'Montserrat', sans-serif;
+  text-align: center;
+  text-shadow: 0 0 5px #000000, 0 0 20px #000;
+  user-select: none;
+}
+#app h1 {
+  --fontSize: 50px;
+  --lineHeight: 70px;
+  width: auto;
+  height: calc(2 * var(--lineHeight));
+  line-height: var(--lineHeight);
+  margin: calc(50vh - var(--lineHeight)) auto 0;
+  font-size: var(--fontSize);
+}
+#app a {
+  margin-top: 10px;
+  display: inline-block;
+  text-decoration: none;
+  color: #fff;
+}
+#app canvas {
+  display: block;
+  position: fixed;
+  z-index: -1;
+  top: 0;
+}
+</style>
+<script>
+  import { swarmBackground } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
+const bg = swarmBackground({
+  el: document.getElementById('app'),
+  eventsEl: document.body,
+  gpgpuSize: 256,
+    color: [Math.random() * 0xffffff, Math.random() * 0xffffff],
+  geometry: 'default'
+})
+bg.three.camera.position.set(0, 0, 200)
+document.body.addEventListener('click', () => {
+  bg.setColors([Math.random() * 0xffffff, Math.random() * 0xffffff])
+})
+</script>
+<div id="app">
+  <div id="hero">
+  <h1>SWARM<br/>BACKGROUND</h1>
+  <a target="_blank" href="https://github.com/klevron/threejs-toys">github/threejs-toys</a>
+  </div>
+</div>
+'''
 # os.makedirs('assets', exist_ok=True)
 if not os.path.exists('icon.jpg'):
     os.system("wget -O icon.jpg https://i.pinimg.com/564x/64/49/88/644988c59447eb00286834c2e70fdd6b.jpg")