File size: 5,113 Bytes
07c6059 dee344d a60f588 9d405c4 ec4c855 dad0a06 9d405c4 dad0a06 dee344d dad0a06 dee344d dad0a06 dee344d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
# -* coding:UTF-8 -*
# !/usr/bin/env python
import numpy as np
import gradio as gr
import roop.globals
from roop.core import (
start,
decode_execution_providers,
suggest_max_memory,
suggest_execution_threads,
)
from roop.processors.frame.core import get_frame_processors_modules
from roop.utilities import normalize_output_path
import os
from PIL import Image
# Loader HTML and CSS
loader_html = """
<div id="loader" style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
display: none; /* Hidden by default */
justify-content: center;
align-items: center;
z-index: 1000;
">
<div class="spinner" style="
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
"></div>
</div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
"""
# ============================================================
# ADDED: Custom CSS for the button
# ============================================================
button_css = """
<style>
/* Style for the button */
.custom-button {
background-color: black; /* Black background */
color: white; /* White text */
border: none; /* No border */
padding: 15px 30px; /* Padding */
font-size: 16px; /* Font size */
border-radius: 25px; /* Rounded corners (fully rounded) */
cursor: pointer; /* Pointer cursor on hover */
transition: background-color 0.3s ease; /* Smooth transition */
}
/* Hover effect */
.custom-button:hover {
background-color: #333333; /* Slightly lighter black on hover */
}
/* Active (click) effect */
.custom-button:active {
background-color: #666666; /* Even lighter black on click */
}
</style>
"""
article_text = """
<div style="text-align: center;">
<p>Leer zelf Generative AI-tools te bouwen en te begrijpen!</p>
<a href="https://www.glossybranding.com/masterclass">Schrijf je in voor de AI Masterclass</a>
</div>
"""
def swap_face(source_file, target_file, doFaceEnhancer):
# Show the loader
show_loader = """
<script>
document.getElementById('loader').style.display = 'flex';
</script>
"""
source_path = "input.jpg"
target_path = "target.jpg"
source_image = Image.fromarray(source_file)
source_image.save(source_path)
target_image = Image.fromarray(target_file)
target_image.save(target_path)
print("source_path: ", source_path)
print("target_path: ", target_path)
roop.globals.source_path = source_path
roop.globals.target_path = target_path
output_path = "output.jpg"
roop.globals.output_path = normalize_output_path(
roop.globals.source_path, roop.globals.target_path, output_path
)
if doFaceEnhancer == True:
roop.globals.frame_processors = ["face_swapper", "face_enhancer"]
else:
roop.globals.frame_processors = ["face_swapper"]
roop.globals.headless = True
roop.globals.keep_fps = True
roop.globals.keep_audio = True
roop.globals.keep_frames = False
roop.globals.many_faces = False
roop.globals.video_encoder = "libx264"
roop.globals.video_quality = 18
roop.globals.max_memory = suggest_max_memory()
roop.globals.execution_providers = decode_execution_providers(["cuda"])
roop.globals.execution_threads = suggest_execution_threads()
print(
"start process",
roop.globals.source_path,
roop.globals.target_path,
roop.globals.output_path,
)
for frame_processor in get_frame_processors_modules(
roop.globals.frame_processors
):
if not frame_processor.pre_check():
return
start()
# Hide the loader
hide_loader = """
<script>
document.getElementById('loader').style.display = 'none';
</script>
"""
return output_path, hide_loader
# ============================================================
# CHANGES START HERE
# ============================================================
# Use Gradio Blocks for more flexibility
with gr.Blocks() as demo:
# Add the loader HTML
gr.HTML(loader_html)
# Add the face-swap interface
with gr.Column(): # Stack everything vertically
source_image = gr.Image(label="Source Image")
target_image = gr.Image(label="Target Image")
do_face_enhancer = gr.Checkbox(label="Face Enhancer?", info="Do face enhancer?")
submit_button = gr.Button("Swap Faces")
output_image = gr.Image(label="Output Image")
gr.HTML(article_text)
# Define the function to call on button click
submit_button.click(
fn=swap_face,
inputs=[source_image, target_image, do_face_enhancer],
outputs=[output_image, gr.HTML()] # Output image and HTML (to hide loader)
)
# ============================================================
# CHANGES END HERE
# ============================================================
# Launch the app
demo.launch(show_api=False) |