https://bytedance-hyper-flux-8steps-lora.hf.space/

1<!doctype html>
2<html
3	lang="en"
4	style="
5		margin: 0;
6		padding: 0;
7		min-height: 100%;
8		display: flex;
9		flex-direction: column;
10	"
11>
12	<head>
13		<meta charset="utf-8" />
14		<meta
15			name="viewport"
16			content="width=device-width, initial-scale=1, shrink-to-fit=no"
17		/>
18
19		<style>
20			:root {
21				--bg: #f9fafb;
22				--col:   #1f2937;
23				--bg-dark: #0b0f19;
24				--col-dark: #f3f4f6;
25			}
26
27
28			body {
29				background: var(--bg);
30				color: var(--col);
31				font-family: Arial, Helvetica, sans-serif;
32			}
33
34			@media (prefers-color-scheme: dark) {
35				body {
36					background: var(--bg-dark);
37					color: var(--col-dark);
38				}
39			}
40		</style>
41
42		
43		<meta property="og:url" content="https://gradio.app/" />
44		<meta property="og:type" content="website" />
45		<meta property="og:image" content="" />
46		<meta property="og:title" content="Gradio" />
47		<meta
48			property="og:description"
49			content=""
50		/>
51		<meta name="twitter:card" content="summary_large_image" />
52		<meta name="twitter:creator" content="@teamGradio" />
53		<meta name="twitter:title" content="Gradio" />
54		<meta
55			name="twitter:description"
56			content=""
57		/>
58		<meta name="twitter:image" content="" />
59
60		

60<script data-gradio-mode>
61			window.__gradio_mode__ = "app";
62			window.iFrameResizer = {
63				heightCalculationMethod: "taggedElement"
64			};
65		</script>

65
66
67		

67<script>window.gradio_config = {"version":"4.26.0","mode":"blocks","app_id":18246544515125537250,"dev_mode":false,"analytics_enabled":true,"components":[{"id":1,"type":"markdown","props":{"value":"\u003cdiv style=\"text-align: center; max-width: 650px; margin: 0 auto;\"\u003e\n    \u003ch1 style=\"font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; display: contents;\"\u003eHyper-FLUX-8steps-LoRA\u003c/h1\u003e\n    \u003cp style=\"font-size: 1rem; margin-bottom: 1.5rem;\"\u003eAutoML team from ByteDance\u003c/p\u003e\n\u003c/div\u003e","show_label":true,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"sanitize_html":true,"line_breaks":false,"header_links":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"0f35515b9a3362b42bb6721c836157a0","api_info":{"type":"string"},"example_inputs":"# Hello!"},{"id":2,"type":"row","props":{"variant":"default","visible":true,"equal_height":true,"name":"row"},"skip_api":true,"component_class_id":"b5cf3d15e2293fb5ccc071d7b8d69f64"},{"id":3,"type":"column","props":{"scale":3,"min_width":320,"variant":"default","visible":true,"name":"column"},"skip_api":true,"component_class_id":"214e3d6261b9edacc5d34ea4e8655821"},{"id":4,"type":"group","props":{"visible":true,"name":"group"},"skip_api":true,"component_class_id":"ef92c10fe71d3732c4c2b756c04a6fd6"},{"id":5,"type":"textbox","props":{"lines":3,"max_lines":20,"placeholder":"E.g., A serene landscape with mountains and a lake at sunset","label":"Your Image Description","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"d0491bb0fbd427bdb2a4549c4d1ac869","api_info":{"type":"string"},"example_inputs":"Hello!!"},{"id":6,"type":"accordion","props":{"label":"Advanced Settings","open":false,"visible":true,"name":"accordion"},"skip_api":true,"component_class_id":"b49c1903c3591b866d0adab5a2f6e48b"},{"id":7,"type":"group","props":{"visible":true,"name":"group"},"skip_api":true,"component_class_id":"ef92c10fe71d3732c4c2b756c04a6fd6"},{"id":8,"type":"row","props":{"variant":"default","visible":true,"equal_height":true,"name":"row"},"skip_api":true,"component_class_id":"b5cf3d15e2293fb5ccc071d7b8d69f64"},{"id":9,"type":"slider","props":{"minimum":256,"maximum":1152,"value":1024,"step":64,"label":"Height","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"slider","_selectable":false},"skip_api":false,"component_class_id":"1bc15a255bbbd15b85b58706accd599f","api_info":{"type":"number","description":"numeric value between 256 and 1152"},"example_inputs":256},{"id":10,"type":"slider","props":{"minimum":256,"maximum":1152,"value":1024,"step":64,"label":"Width","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"slider","_selectable":false},"skip_api":false,"component_class_id":"1bc15a255bbbd15b85b58706accd599f","api_info":{"type":"number","description":"numeric value between 256 and 1152"},"example_inputs":256},{"id":11,"type":"form","props":{"scale":2,"min_width":320,"name":"form"},"skip_api":true,"component_class_id":"43cda85c6ff7a5dd8f83d29496b014ee"},{"id":12,"type":"row","props":{"variant":"default","visible":true,"equal_height":true,"name":"row"},"skip_api":true,"component_class_id":"b5cf3d15e2293fb5ccc071d7b8d69f64"},{"id":13,"type":"slider","props":{"minimum":6,"maximum":25,"value":8,"step":1,"label":"Inference Steps","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"slider","_selectable":false},"skip_api":false,"component_class_id":"1bc15a255bbbd15b85b58706accd599f","api_info":{"type":"number","description":"numeric value between 6 and 25"},"example_inputs":6},{"id":14,"type":"slider","props":{"minimum":0.0,"maximum":5.0,"value":3.5,"step":0.1,"label":"Guidance Scale","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"slider","_selectable":false},"skip_api":false,"component_class_id":"1bc15a255bbbd15b85b58706accd599f","api_info":{"type":"number","description":"numeric value between 0.0 and 5.0"},"example_inputs":0.0},{"id":15,"type":"form","props":{"scale":2,"min_width":320,"name":"form"},"skip_api":true,"component_class_id":"43cda85c6ff7a5dd8f83d29496b014ee"},{"id":16,"type":"number","props":{"value":3413,"label":"Seed (for reproducibility)","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"precision":0,"step":1,"name":"number","_selectable":false},"skip_api":false,"component_class_id":"013e0bc782bafe4c933e4047ef3b7ba6","api_info":{"type":"number"},"example_inputs":3},{"id":17,"type":"form","props":{"scale":0,"min_width":0,"name":"form"},"skip_api":true,"component_class_id":"43cda85c6ff7a5dd8f83d29496b014ee"},{"id":18,"type":"button","props":{"value":"Generate Image","variant":"primary","visible":true,"interactive":true,"elem_classes":[],"scale":1,"name":"button","_selectable":false},"skip_api":true,"component_class_id":"43ff9969f0bf4553b77ca8dc5b4850bc"},{"id":19,"type":"form","props":{"scale":0,"min_width":0,"name":"form"},"skip_api":true,"component_class_id":"43cda85c6ff7a5dd8f83d29496b014ee"},{"id":20,"type":"column","props":{"scale":4,"min_width":320,"variant":"default","visible":true,"name":"column"},"skip_api":true,"component_class_id":"214e3d6261b9edacc5d34ea4e8655821"},{"id":21,"type":"image","props":{"streamable":false,"format":"png","image_mode":"RGB","sources":["upload","webcam","clipboard"],"type":"numpy","label":"Your Generated Image","show_label":true,"show_download_button":true,"container":true,"min_width":160,"visible":true,"streaming":false,"elem_classes":[],"mirror_webcam":true,"show_share_button":true,"name":"image","_selectable":false},"skip_api":false,"component_class_id":"e02a10e58bbfd8f31d34ac63d2888247","api_info":{"properties":{"path":{"title":"Path","type":"string"},"url":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Url"},"size":{"anyOf":[{"type":"integer"},{"type":"null"}],"default":null,"title":"Size"},"orig_name":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Orig Name"},"mime_type":{"anyOf":[{"type":"string"},{"type":"null"}],"default":null,"title":"Mime Type"},"is_stream":{"default":false,"title":"Is Stream","type":"boolean"},"meta":{"default":{"_type":"gradio.FileData"},"title":"Meta","type":"object"}},"required":["path"],"title":"FileData","type":"object"},"example_inputs":{"path":"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png","meta":{"_type":"gradio.FileData"},"orig_name":"bus.png","url":"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"}}

67,{"id":22,"type":"markdown","props":{"value":"\u003cdiv style=\"max-width: 650px; margin: 2rem auto; padding: 1rem; border-radius: 10px; background-color: #f0f0f0;\"\u003e\n    \u003ch2 style=\"font-size: 1.5rem; margin-bottom: 1rem;\"\u003eHow to Use\u003c/h2\u003e\n    \u003col style=\"padding-left: 1.5rem;\"\u003e\n        \u003cli\u003eEnter a detailed description of the image you want to create.\u003c/li\u003e\n        \u003cli\u003eAdjust advanced settings if desired (tap to expand).\u003c/li\u003e\n        \u003cli\u003eTap \"Generate Image\" and wait for your creation!\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003cp style=\"margin-top: 1rem; font-style: italic;\"\u003eTip: Be specific in your description for best results!\u003c/p\u003e\n\u003c/div\u003e","show_label":true,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"sanitize_html":true,"line_breaks":false,"header_links":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"0f35515b9a3362b42bb6721c836157a0","api_info":{"type":"string"},"example_inputs":"# Hello!"}],"css":null,"js":null,"head":null,"title":"Gradio","space_id":"ByteDance/Hyper-FLUX-8Steps-LoRA","enable_queue":true,"show_error":false,"show_api":true,"is_colab":false,"stylesheets":["https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600\u0026display=swap","https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600\u0026display=swap"],"theme":"soft","protocol":"sse_v3","body_css":{"body_background_fill":"#f9fafb","body_text_color":"#1f2937","body_background_fill_dark":"#0b0f19","body_text_color_dark":"#f3f4f6"},"fill_height":false,"layout":{"id":0,"children":[{"id":1},{"id":2,"children":[{"id":3,"children":[{"id":4,"children":[{"id":19,"children":[{"id":5}]},{"id":6,"children":[{"id":7,"children":[{"id":8,"children":[{"id":11,"children":[{"id":9},{"id":10}]}]},{"id":12,"children":[{"id":15,"children":[{"id":13},{"id":14}]}]},{"id":17,"children":[{"id":16}]}]}]},{"id":18}]}]},{"id":20,"children":[{"id":21}]}]},{"id":22}]},"dependencies":[{"targets":[[18,"click"]],"inputs":[9,10,13,14,5,16],"outputs":[21],"backend_fn":true,"js":null,"queue":null,"api_name":"process_image","scroll_to_output":false,"show_progress":"full","every":null,"batch":false,"max_batch_size":4,"cancels":[],"types":{"continuous":false,"generator":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true}],"root":"https://bytedance-hyper-flux-8steps-lora.hf.space"};</script>

67
68
69		<link rel="preconnect" href="https://fonts.googleapis.com" />
70		<link
71			rel="preconnect"
72			href="https://fonts.gstatic.com"
73			crossorigin="anonymous"
74		/>
75		

75<script
76			src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
77			async
78		></script>

78
79		

79<script type="module" crossorigin src="./assets/index-df998e04.js"></script>

79
80		<link rel="stylesheet" href="./assets/index-1ebe9c14.css">
81	</head>
82
83	<body
84		style="
85			width: 100%;
86			margin: 0;
87			padding: 0;
88			display: flex;
89			flex-direction: column;
90			flex-grow: 1;
91		"
92	>
93		<gradio-app
94			control_page_title="true"
95			embed="false"
96			eager="true"
97			style="display: flex; flex-direction: column; flex-grow: 1"
98		>
99		</gradio-app>
100		

100<script>
101			const ce = document.getElementsByTagName("gradio-app");
102
103			if (ce[0]) {
104				ce[0].addEventListener("domchange", () => {
105					document.body.style.padding = "0";
106				});
107				document.body.style.padding = "0";
108			}
109		</script>

109
110	</body>
111</html>