|
|
import gradio as gr |
|
|
import requests |
|
|
import io |
|
|
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>''' |
|
|
|
|
|
if not os.path.exists('icon.jpg'): |
|
|
os.system("wget -O icon.jpg https://i.pinimg.com/564x/64/49/88/644988c59447eb00286834c2e70fdd6b.jpg") |
|
|
API_URL_DEV = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev" |
|
|
API_URL = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell" |
|
|
timeout = 100 |
|
|
|
|
|
def query(prompt, is_negative=False, steps=30, cfg_scale=7, sampler="DPM++ 2M Karras", seed=-1, strength=0.7, huggingface_api_key=None, use_dev=False): |
|
|
|
|
|
api_url = API_URL_DEV if use_dev else API_URL |
|
|
|
|
|
|
|
|
is_api_call = huggingface_api_key is not None |
|
|
|
|
|
if is_api_call: |
|
|
|
|
|
API_TOKEN = os.getenv("HF_READ_TOKEN") |
|
|
headers = {"Authorization": f"Bearer {API_TOKEN}"} |
|
|
else: |
|
|
|
|
|
if huggingface_api_key == "": |
|
|
raise gr.Error("API key is required for API calls.") |
|
|
headers = {"Authorization": f"Bearer {huggingface_api_key}"} |
|
|
|
|
|
if prompt == "" or prompt is None: |
|
|
return None |
|
|
|
|
|
key = random.randint(0, 999) |
|
|
|
|
|
prompt = GoogleTranslator(source='ru', target='en').translate(prompt) |
|
|
print(f'\033[1mGeneration {key} translation:\033[0m {prompt}') |
|
|
|
|
|
prompt = f"{prompt} | ultra detail, ultra elaboration, ultra quality, perfect." |
|
|
print(f'\033[1mGeneration {key}:\033[0m {prompt}') |
|
|
|
|
|
|
|
|
if seed == -1: |
|
|
seed = random.randint(1, 1000000000) |
|
|
|
|
|
payload = { |
|
|
"inputs": prompt, |
|
|
"is_negative": is_negative, |
|
|
"steps": steps, |
|
|
"cfg_scale": cfg_scale, |
|
|
"seed": seed, |
|
|
"strength": strength |
|
|
} |
|
|
|
|
|
response = requests.post(api_url, headers=headers, json=payload, timeout=timeout) |
|
|
if response.status_code != 200: |
|
|
print(f"Error: Failed to get image. Response status: {response.status_code}") |
|
|
print(f"Response content: {response.text}") |
|
|
if response.status_code == 503: |
|
|
raise gr.Error(f"{response.status_code} : The model is being loaded") |
|
|
raise gr.Error(f"{response.status_code}") |
|
|
|
|
|
try: |
|
|
image_bytes = response.content |
|
|
image = Image.open(io.BytesIO(image_bytes)) |
|
|
print(f'\033[1mGeneration {key} completed!\033[0m ({prompt})') |
|
|
|
|
|
|
|
|
output_path = f"./output_{key}.png" |
|
|
image.save(output_path) |
|
|
|
|
|
return output_path, seed |
|
|
except Exception as e: |
|
|
print(f"Error when trying to open the image: {e}") |
|
|
return None, None |
|
|
|
|
|
css = """ |
|
|
#app-container { |
|
|
max-width: 600px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
} |
|
|
#title-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
#title-icon { |
|
|
width: 32px; /* Adjust the width of the icon as needed */ |
|
|
height: auto; |
|
|
margin-right: 10px; /* Space between icon and title */ |
|
|
} |
|
|
#title-text { |
|
|
font-size: 24px; /* Adjust font size as needed */ |
|
|
font-weight: bold; |
|
|
} |
|
|
""" |
|
|
|
|
|
with gr.Blocks(theme='Nymbo/Nymbo_Theme', css=css) as app: |
|
|
gr.HTML(""" |
|
|
<center> |
|
|
<div id="title-container"> |
|
|
<img id="title-icon" src="icon.jpg" alt="Icon"> |
|
|
<h1 id="title-text">FLUX Capacitor</h1> |
|
|
</div> |
|
|
</center> |
|
|
"""+html) |
|
|
|
|
|
with gr.Column(elem_id="app-container"): |
|
|
with gr.Row(): |
|
|
with gr.Column(elem_id="prompt-container"): |
|
|
with gr.Row(): |
|
|
text_prompt = gr.Textbox(label="Prompt", placeholder="Enter a prompt here", lines=2, elem_id="prompt-text-input") |
|
|
with gr.Row(): |
|
|
with gr.Accordion("Advanced Settings", open=False): |
|
|
negative_prompt = gr.Textbox(label="Negative Prompt", placeholder="What should not be in the image", value="(deformed, distorted, disfigured), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, misspellings, typos", lines=3, elem_id="negative-prompt-text-input") |
|
|
steps = gr.Slider(label="Sampling steps", value=35, minimum=1, maximum=100, step=1) |
|
|
cfg = gr.Slider(label="CFG Scale", value=7, minimum=1, maximum=20, step=1) |
|
|
method = gr.Radio(label="Sampling method", value="DPM++ 2M Karras", choices=["DPM++ 2M Karras", "DPM++ SDE Karras", "Euler", "Euler a", "Heun", "DDIM"]) |
|
|
strength = gr.Slider(label="Strength", value=0.7, minimum=0, maximum=1, step=0.001) |
|
|
seed = gr.Slider(label="Seed", value=-1, minimum=-1, maximum=1000000000, step=1) |
|
|
huggingface_api_key = gr.Textbox(label="Hugging Face API Key (required for API calls)", placeholder="Enter your Hugging Face API Key here", type="password", elem_id="api-key") |
|
|
use_dev = gr.Checkbox(label="Use Dev API", value=False, elem_id="use-dev-checkbox") |
|
|
|
|
|
with gr.Row(): |
|
|
text_button = gr.Button("Run", variant='primary', elem_id="gen-button") |
|
|
with gr.Row(): |
|
|
image_output = gr.Image(type="pil", label="Image Output", elem_id="gallery") |
|
|
seed_output = gr.Textbox(label="Seed Used", elem_id="seed-output") |
|
|
|
|
|
|
|
|
text_button.click(query, inputs=[text_prompt, negative_prompt, steps, cfg, method, seed, strength, huggingface_api_key, use_dev], outputs=[image_output, seed_output]) |
|
|
|
|
|
app.launch(show_api=True, share=False) |
