Update app.py

app.py

@@ -151,21 +151,39 @@ def generate_image(
     img = Image.fromarray((127.5 * (x + 1.0)).cpu().byte().numpy())
     return img, str(opts.seed), flux_generator.toonmage_model.debug_img_list
 
-_HEADER_ = '''
-<div style="text-align: center; max-width: 650px; margin: 0 auto;">
-    <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; display: contents;">ToonMage for FLUX</h1>
-</div>
-❗️❗️❗️**Tips:**
-- `timestep to start inserting ID:` The smaller the value, the higher the fidelity, but the lower the editability; the higher the value, the lower the fidelity, but the higher the editability. **The recommended range for this value is between 0 and 4**. For photorealistic scenes, we recommend using 4; for stylized scenes, we recommend using 0-1. If you are not satisfied with the similarity, you can lower this value; conversely, if you are not satisfied with the editability, you can increase this value.
-- `true CFG scale:` In most scenarios, it is recommended to use a fake CFG, i.e., setting the true CFG scale to 1, and just adjusting the guidance scale. This is also more efficiency. However, in a few cases, utilizing a true CFG can yield better results.
-- we provide some examples in the bottom, you can try these example prompts first
-'''
+MARKDOWN = """
+This demo utilizes <a href="https://huggingface.co/black-forest-labs/FLUX.1-dev">FLUX Pipeline</a> for Image to Image Translation
+
+**Tips**
+
+- Smaller value of timestep to start inserting ID would lead to higher fidelity, however, it will reduce the editability; and vice versa.
+Its value range is from 0 - 4. If you want to generate a stylized scene; use the value of 0 - 1. If you want to generate a photorealistic image; use the value of 4. 
+
+-It is recommended to use fake CFG by setting the true CFG scale value to 1 while you can vary the guidance scale. However, in a few cases, utilizing a true CFG can yield better results.
+
+Try out with different prompts using your image and do provide your feedback.
+
+**Demo by [Sunder Ali Khowaja](https://sander-ali.github.io) - [X](https://x.com/SunderAKhowaja) -[Github](https://github.com/sander-ali) -[Hugging Face](https://huggingface.co/SunderAli17)**
+"""
+
+theme = gr.themes.Soft(
+    font=[gr.themes.GoogleFont('Source Code Pro'), gr.themes.GoogleFont('Public Sans'), 'system-ui', 'sans-serif'],
+)
+js_func = """
+function refresh() {
+    const url = new URL(window.location);
+    if (url.searchParams.get('__theme') !== 'dark') {
+        url.searchParams.set('__theme', 'dark');
+        window.location.href = url.href;
+    }
+}
+"""
 
 
 def create_demo(args, model_name: str, device: str = "cuda" if torch.cuda.is_available() else "cpu",
                 offload: bool = False):
-    with gr.Blocks() as demo:
-        gr.Markdown(_HEADER_)
+    with gr.Blocks(s = js_func, theme = theme) as demo:
+        gr.Markdown(MARKDOWN)
 
         with gr.Row():
             with gr.Column():
@@ -195,69 +213,29 @@ def create_demo(args, model_name: str, device: str = "cuda" if torch.cuda.is_ava
                 output_image = gr.Image(label="Generated Image")
                 seed_output = gr.Textbox(label="Used Seed")
                 intermediate_output = gr.Gallery(label='Output', elem_id="gallery", visible=args.dev)
-                # gr.Markdown(_CITE_)
-
-        # with gr.Row(), gr.Column():
-        #         gr.Markdown("## Examples")
-        #         example_inps = [
-        #             [
-        #                 'a woman holding sign with glowing green text',
-        #                 'example_inputs/liuyifei.png',
-        #                 4, 4, 2680261499100305976, 1
-        #             ],
-        #             [
-        #                 'portrait, side view',
-        #                 'example_inputs/liuyifei.png',
-        #                 4, 4, 1205240166692517553, 1
-        #             ],
-        #             [
-        #                 'white-haired woman with vr technology atmosphere, revolutionary exceptional magnum with remarkable details',
-        #                 'example_inputs/liuyifei.png',
-        #                 4, 4, 6349424134217931066, 1
-        #             ],
-        #             [
-        #                 'a young child is eating Icecream',
-        #                 'example_inputs/liuyifei.png',
-        #                 4, 4, 10606046113565776207, 1
-        #             ],
-        #             [
-        #                 'a man is holding a sign with text, winter, snowing, top of the mountain',
-        #                 'example_inputs/pengwei.jpg',
-        #                 4, 4, 2410129802683836089, 1
-        #             ],
-        #             [
-        #                 'portrait, candle light',
-        #                 'example_inputs/pengwei.jpg',
-        #                 4, 4, 17522759474323955700, 1
-        #             ],
-        #             [
-        #                 'profile shot dark photo of a 25-year-old male with smoke escaping from his mouth, the backlit smoke gives the image an ephemeral quality, natural face, natural eyebrows, natural skin texture, award winning photo, highly detailed face, atmospheric lighting, film grain, monochrome',
-        #                 'example_inputs/pengwei.jpg',
-        #                 4, 4, 17733156847328193625, 1
-        #             ],
-        #             [
-        #                 'American Comics, 1boy',
-        #                 'example_inputs/pengwei.jpg',
-        #                 1, 4, 13223174453874179686, 1
-        #             ],
-        #             [
-        #                 'portrait, pixar',
-        #                 'example_inputs/pengwei.jpg',
-        #                 1, 4, 9445036702517583939, 1
-        #             ],
-        #         ]
-        #         gr.Examples(examples=example_inps, inputs=[prompt, id_image, start_step, guidance, seed, true_cfg],
-        #                     label='fake CFG')
-
-        #         example_inps = [
-        #             [
-        #                 'portrait, made of ice sculpture',
-        #                 'example_inputs/lecun.jpg',
-        #                 1, 1, 3811899118709451814, 5
-        #             ],
-        #         ]
-        #         gr.Examples(examples=example_inps, inputs=[prompt, id_image, start_step, guidance, seed, true_cfg],
-        #                     label='true CFG')
+
+
+        with gr.Row(), gr.Column():
+                gr.Markdown("## Examples")
+                example_inps = [
+                    [
+                        'a high quality digital cartoon avatar eating ice cream',
+                        'sample_img/image1.png',
+                        0, 4, -1, 1
+                    ],
+                    [
+                        'a high quality anime character with mountains and lakes in the background',
+                        'sample_img/test1.jpg',
+                        0, 4, -1, 1
+                    ],
+                    [
+                        'a high quality photorealistic image with VR technology atmosphere, revolutionary exceptional magnum with remarkable details',
+                        'sample_img/test24.jpg',
+                        0, 4, -1, 1
+                    ]
+                 ]
+                gr.Examples(examples=example_inps, inputs=[prompt, id_image, start_step, guidance, seed, true_cfg],
+                            label='fake CFG')
 
         generate_btn.click(
             fn=generate_image,