Feat/update gradio5 (#799)

* Update to Gradio 5

* Remove overrides for Gradio

* Fix dark mode for Gradio

* Polish errors

* More styles for tabs and co

facefusion/uis/assets/overrides.css

@@ -17,67 +17,60 @@
 	width: 1.125rem;
 }
 
-:root:root:root:root input[type="range"],
+:root:root:root:root input[type="range"]
-:root:root:root:root .range-slider div
 {
-	height: 0.5rem;
+	background: transparent;
-	border-radius: 0.5rem;
 }
 
 :root:root:root:root input[type="range"]::-moz-range-thumb,
 :root:root:root:root input[type="range"]::-webkit-slider-thumb
 {
 	background: var(--neutral-300);
-	border: unset;
+	box-shadow: unset;
 	border-radius: 50%;
 	height: 1.125rem;
 	width: 1.125rem;
 }
 
-:root:root:root:root input[type="range"]::-webkit-slider-thumb
-{
-	margin-top: 0.375rem;
-}
-
-:root:root:root:root .range-slider input[type="range"]::-webkit-slider-thumb
-{
-	margin-top: 0.125rem;
-}
-
-:root:root:root:root .range-slider div,
-:root:root:root:root .range-slider input[type="range"]
-{
-	bottom: 50%;
-	margin-top: -0.25rem;
-	top: 50%;
-}
-
 :root:root:root:root .grid-wrap.fixed-height
 {
 	min-height: unset;
 }
 
-:root:root:root:root .generating,
+:root:root:root:root .tabs button:hover
-:root:root:root:root .thumbnail-item
 {
-	border: unset;
+	background: unset;
 }
 
+:root:root:root:root .tab-container
+{
+	height: 2.5rem;
+}
+
+:root:root:root:root .tabitem
+{
+	padding: 0.75rem 0 0 0
+}
+
+:root:root:root:root .tab-container:after,
+:root:root:root:root .tabs button:after
+{
+	border-width: 0.125rem;
+}
+
+:root:root:root:root .tab-container:after
+{
+	border-color: var(--block-background-fill)
+}
+
+:root:root:root:root .slider_input_container > span,
 :root:root:root:root .feather-upload,
+:root:root:root:root .toast-wrap,
 :root:root:root:root footer
 {
 	display: none;
 }
 
-:root:root:root:root .tab-nav > button
-{
-	border: unset;
-	box-shadow: 0 0.125rem;
-	font-size: 1.125em;
-	margin: 0.5rem 0.75rem;
-	padding: unset;
-}
-
 :root:root:root:root .image-frame
 {
 	width: 100%;
@@ -94,3 +87,18 @@
 	top: 0;
 	z-index: 100;
 }
+
+:root:root:root:root .block .error
+{
+	border: 0.125rem solid;
+	padding: 0.375rem 0.75rem;
+	font-size: 0.75rem;
+	text-transform: uppercase;
+}
+
+:root:root:root:root .table-wrap,
+:root:root:root:root th,
+:root:root:root:root td
+{
+	border: unset;
+}

facefusion/uis/core.py

@@ -10,16 +10,12 @@ from gradio.themes import Size
 from facefusion import logger, metadata, state_manager, wording
 from facefusion.exit_helper import hard_exit
 from facefusion.filesystem import resolve_relative_path
-from facefusion.uis import overrides
 from facefusion.uis.typing import Component, ComponentName
 
 os.environ['GRADIO_ANALYTICS_ENABLED'] = '0'
 
 warnings.filterwarnings('ignore', category = UserWarning, module = 'gradio')
 
-gradio.processing_utils.encode_array_to_base64 = overrides.encode_array_to_base64
-gradio.processing_utils.encode_pil_to_base64 = overrides.encode_pil_to_base64
-
 UI_COMPONENTS: Dict[ComponentName, Component] = {}
 UI_LAYOUT_MODULES : List[ModuleType] = []
 UI_LAYOUT_METHODS =\
@@ -99,7 +95,20 @@ def launch() -> None:
 def get_theme() -> gradio.Theme:
 	return gradio.themes.Base(
 		primary_hue = gradio.themes.colors.red,
-		secondary_hue = gradio.themes.colors.neutral,
+		secondary_hue = gradio.themes.Color(
+			name = 'neutral',
+			c50 = '#fafafa',
+			c100 = '#f5f5f5',
+			c200 = '#e5e5e5',
+			c300 = '#d4d4d4',
+			c400 = '#a3a3a3',
+			c500 = '#737373',
+			c600 = '#525252',
+			c700 = '#404040',
+			c800 = '#262626',
+			c900 = '#212121',
+			c950 = '#171717',
+		),
 		radius_size = Size(
 			xxs = '0.375rem',
 			xs = '0.375rem',
@@ -112,10 +121,12 @@ def get_theme() -> gradio.Theme:
 		font = gradio.themes.GoogleFont('Open Sans')
 	).set(
 		background_fill_primary = '*neutral_100',
+		background_fill_primary_dark = '*neutral_950',
 		block_background_fill = 'white',
+		block_background_fill_dark = '*neutral_900',
 		block_border_width = '0',
 		block_label_background_fill = '*neutral_100',
-		block_label_background_fill_dark = '*neutral_700',
+		block_label_background_fill_dark = '*neutral_800',
 		block_label_border_width = 'none',
 		block_label_margin = '0.5rem',
 		block_label_radius = '*radius_md',
@@ -124,7 +135,7 @@ def get_theme() -> gradio.Theme:
 		block_label_text_color_dark = 'white',
 		block_label_text_weight = '600',
 		block_title_background_fill = '*neutral_100',
-		block_title_background_fill_dark = '*neutral_700',
+		block_title_background_fill_dark = '*neutral_800',
 		block_title_padding = '*block_label_padding',
 		block_title_radius = '*block_label_radius',
 		block_title_text_color = '*neutral_700',
@@ -136,27 +147,34 @@ def get_theme() -> gradio.Theme:
 		button_large_padding = '2rem 0.5rem',
 		button_large_text_weight = 'normal',
 		button_primary_background_fill = '*primary_500',
+		button_primary_background_fill_dark = '*primary_600',
 		button_primary_text_color = 'white',
 		button_secondary_background_fill = 'white',
-		button_secondary_border_color = 'transparent',
+		button_secondary_background_fill_dark = '*neutral_800',
-		button_secondary_border_color_dark = 'transparent',
+		button_secondary_background_fill_hover = 'white',
-		button_secondary_border_color_hover = 'transparent',
+		button_secondary_background_fill_hover_dark = '*neutral_800',
-		button_secondary_border_color_hover_dark = 'transparent',
 		button_secondary_text_color = '*neutral_800',
 		button_small_padding = '0.75rem',
+		button_small_text_size = '0.875rem',
 		checkbox_background_color = '*neutral_200',
-		checkbox_background_color_selected = '*primary_600',
+		checkbox_background_color_dark = '*neutral_900',
-		checkbox_background_color_selected_dark = '*primary_700',
 		checkbox_border_color_focus = '*primary_500',
 		checkbox_border_color_focus_dark = '*primary_600',
 		checkbox_border_color_selected = '*primary_600',
 		checkbox_border_color_selected_dark = '*primary_700',
 		checkbox_label_background_fill = '*neutral_50',
+		checkbox_label_background_fill_dark = '*neutral_800',
 		checkbox_label_background_fill_hover = '*neutral_50',
+		checkbox_label_background_fill_hover_dark = '*neutral_800',
 		checkbox_label_background_fill_selected = '*primary_500',
 		checkbox_label_background_fill_selected_dark = '*primary_600',
 		checkbox_label_text_color_selected = 'white',
+		error_background_fill = 'white',
+		error_background_fill_dark = '*neutral_900',
+		error_text_color = '*primary_500',
+		error_text_color_dark = '*primary_600',
 		input_background_fill = '*neutral_50',
+		input_background_fill_dark = '*neutral_800',
 		shadow_drop = 'none',
 		slider_color = '*primary_500',
 		slider_color_dark = '*primary_600'

facefusion/uis/overrides.py

@@ -1,15 +0,0 @@
-import base64
-from typing import Any
-
-import cv2
-import numpy
-from numpy._typing import NDArray
-
-
-def encode_array_to_base64(array : NDArray[Any]) -> str:
-	_, buffer = cv2.imencode('.jpg', array[:, :, ::-1])
-	return 'data:image/jpeg;base64,' + base64.b64encode(buffer.tobytes()).decode('utf-8')
-
-
-def encode_pil_to_base64(image : Any) -> str:
-	return encode_array_to_base64(numpy.asarray(image)[:, :, ::-1])

requirements.txt

@@ -1,6 +1,6 @@
 filetype==1.2.0
-gradio==4.44.0
+gradio==5.1.0
-gradio-rangeslider==0.0.6
+gradio-rangeslider==0.0.8
 numpy==2.1.0
 onnx==1.16.1
 onnxruntime==1.19.2