Update app.py from anycoder

app.py

@@ -1,32 +1,16 @@
-# // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
-# //
-# // Licensed under the Apache License, Version 2.0 (the "License");
-# // you may not use this file except in compliance with the License.
-# // You may obtain a copy of the License at
-# //
-# //     http://www.apache.org/licenses/LICENSE-2.0
-# //
-# // Unless required by applicable law or agreed to in writing, software
-# // distributed under the License is distributed on an "AS IS" BASIS,
-# // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# // See the License for the specific language governing permissions and
-# // limitations under the License.
 import spaces
 import subprocess
-
 import os
 import torch
 import mediapy
 from einops import rearrange
 from omegaconf import OmegaConf
-print(os.getcwd())
 import datetime
 from tqdm import tqdm
 import gc
 
 from data.image.transforms.divisible_crop import DivisibleCrop
 from data.image.transforms.na_resize import NaResize
-from data.video.transforms.rearrange import Rearrange
 if os.path.exists("./projects/video_diffusion_sr/color_fix.py"):
     from projects.video_diffusion_sr.color_fix import wavelet_reconstruction
     use_colorfix=True
@@ -34,7 +18,6 @@ else:
     use_colorfix = False
     print('Note!!!!!! Color fix is not avaliable!')
 from torchvision.transforms import Compose, Lambda, Normalize
-from torchvision.io.video import read_video
 import argparse
 from PIL import Image
 
@@ -104,7 +87,8 @@ def load_file_from_url(url, model_dir=None, progress=True, file_name=None):
         filename = file_name
     cached_file = os.path.abspath(os.path.join(model_dir, filename))
     if not os.path.exists(cached_file):
-        print(f'Downloading: "{url}" to {cached_file}\n')
+        print(f'Downloading: "{url}" to {cached_file}
+')
         download_url_to_file(url, cached_file, hash_prefix=None, progress=progress)
     return cached_file
 
@@ -225,13 +209,13 @@ def generation_step(runner, text_embeds_dict, cond_latents):
     return samples
 
 @spaces.GPU(duration=100)
-def generation_loop(video_path='./test_videos', seed=666, fps_out=12, batch_size=1, cfg_scale=1.0, cfg_rescale=0.0, sample_steps=1, res_h=1280, res_w=720, sp_size=1):
+def generation_loop(image_path='./test_images', seed=666, res_h=1280, res_w=720, sp_size=1):
     runner = configure_runner(1)
 
     def _extract_text_embeds():
         # Text encoder forward.
         positive_prompts_embeds = []
-        for texts_pos in tqdm(original_videos_local):
+        for texts_pos in tqdm(original_images_local):
             text_pos_embeds = torch.load('pos_emb.pt')
             text_neg_embeds = torch.load('neg_emb.pt')
 
@@ -242,47 +226,27 @@ def generation_loop(video_path='./test_videos', seed=666, fps_out=12, batch_size
         torch.cuda.empty_cache()
         return positive_prompts_embeds
 
-    def cut_videos(videos, sp_size):
-        if videos.size(1) > 121:
-            videos = videos[:, :121]
-        t = videos.size(1)
-        if t <= 4 * sp_size:
-            print(f"Cut input video size: {videos.size()}")
-            padding = [videos[:, -1].unsqueeze(1)] * (4 * sp_size - t + 1)
-            padding = torch.cat(padding, dim=1)
-            videos = torch.cat([videos, padding], dim=1)
-            return videos
-        if (t - 1) % (4 * sp_size) == 0:
-            return videos
-        else:
-            padding = [videos[:, -1].unsqueeze(1)] * (
-                4 * sp_size - ((t - 1) % (4 * sp_size))
-            )
-            padding = torch.cat(padding, dim=1)
-            videos = torch.cat([videos, padding], dim=1)
-            assert (videos.size(1) - 1) % (4 * sp_size) == 0
-            return videos
-
-    # classifier-free guidance
-    runner.config.diffusion.cfg.scale = cfg_scale
-    runner.config.diffusion.cfg.rescale = cfg_rescale
-    # sampling steps
-    runner.config.diffusion.timesteps.sampling.steps = sample_steps
-    runner.configure_diffusion()
-
-    # set random seed
-    seed = seed % (2**32) # avoid over range
-    set_seed(seed, same_across_ranks=True)
-    os.makedirs('output/', exist_ok=True)
+    def process_image(image_path):
+        media_type, _ = mimetypes.guess_type(image_path)
+        is_image = media_type and media_type.startswith("image")
+        if not is_image:
+            return None
+            
+        img = Image.open(image_path).convert("RGB")
+        img_tensor = T.ToTensor()(img).unsqueeze(0)  # (1, C, H, W)
+        video = img_tensor.permute(0, 1, 2, 3)  # (T=1, C, H, W)
+        print(f"Read Image size: {video.size()}")
+        output_dir = 'output/' + str(uuid.uuid4()) + '.png'
+        
+        return video, output_dir
 
     # get test prompts
-    original_videos = [video_path.split('/')[-1]]
+    original_images = [image_path.split('/')[-1]]
 
     # divide the prompts into different groups
-    original_videos_group = original_videos
-    # store prompt mapping
-    original_videos_local = original_videos_group
-    original_videos_local = partition_by_size(original_videos_local, batch_size)
+    original_images_group = original_images
+    original_images_local = original_images_group
+    original_images_local = partition_by_size(original_images_local, 1)
 
     # pre-extract the text embeddings
     positive_prompts_embeds = _extract_text_embeds()
@@ -306,57 +270,21 @@ def generation_loop(video_path='./test_videos', seed=666, fps_out=12, batch_size
     )
 
     # generation loop
-    for videos, text_embeds in tqdm(zip(original_videos_local, positive_prompts_embeds)):
+    for images, text_embeds in tqdm(zip(original_images_local, positive_prompts_embeds)):
         # read condition latents
         cond_latents = []
-        for video in videos:
-            media_type, _ = mimetypes.guess_type(video_path)
-            is_image = media_type and media_type.startswith("image")
-            is_video = media_type and media_type.startswith("video")
-            if is_video:
-                video = (
-                    read_video(
-                       os.path.join(video_path), output_format="TCHW"
-                    )[0]
-                    / 255.0
-                )
-                if video.size(0) > 121:
-                    video = video[:121]
-                print(f"Read video size: {video.size()}")
-                output_dir = 'output/' + str(uuid.uuid4()) + '.mp4'
-            else:
-                video_transform = Compose(
-                    [
-                        NaResize(
-                            resolution=(
-                                2560 * 1440
-                            )
-                            ** 0.5,
-                            mode="area",
-                            # Upsample image, model only trained for high res.
-                            downsample_only=False,
-                        ),
-                        Lambda(lambda x: torch.clamp(x, 0.0, 1.0)),
-                        DivisibleCrop((16, 16)),
-                        Normalize(0.5, 0.5),
-                        Rearrange("t c h w -> c t h w"),
-                    ]
-                )
+        for image in images:
+            video, output_dir = process_image(image)
+            if video is None:
+                continue
                 
-                img = Image.open(video_path).convert("RGB")
-                img_tensor = T.ToTensor()(img).unsqueeze(0)  # (1, C, H, W)
-                video = img_tensor.permute(0, 1, 2, 3)  # (T=1, C, H, W)
-                print(f"Read Image size: {video.size()}")
-                output_dir = 'output/' + str(uuid.uuid4()) + '.png'
             cond_latents.append(video_transform(video.to(torch.device("cuda"))))
 
         ori_lengths = [video.size(1) for video in cond_latents]
         input_videos = cond_latents
-        if is_video:
-            cond_latents = [cut_videos(video, sp_size) for video in cond_latents]
 
         # runner.dit.to("cpu")
-        print(f"Encoding videos: {list(map(lambda x: x.size(), cond_latents))}")
+        print(f"Encoding images: {list(map(lambda x: x.size(), cond_latents))}")
         # runner.vae.to(torch.device("cuda"))
         cond_latents = runner.vae_encode(cond_latents)
         # runner.vae.to("cpu")
@@ -373,7 +301,7 @@ def generation_loop(video_path='./test_videos', seed=666, fps_out=12, batch_size
 
         # dump samples to the output directory
         for path, input, sample, ori_length in zip(
-            videos, input_videos, samples, ori_lengths
+            images, input_videos, samples, ori_lengths
         ):
             if ori_length < sample.shape[0]:
                 sample = sample[:ori_length]
@@ -401,109 +329,269 @@ def generation_loop(video_path='./test_videos', seed=666, fps_out=12, batch_size
                 mediapy.write_image(output_dir, sample[0])
             else:
                 mediapy.write_video(
-                    output_dir, sample, fps=fps_out
+                    output_dir, sample, fps=24
                 )
 
-        # print(f"Generated video size: {sample.shape}")
+        # print(f"Generated image size: {sample.shape}")
         gc.collect()
         torch.cuda.empty_cache()
-        if is_image:
-            return output_dir, None, output_dir
-        else:
-            return None, output_dir, output_dir
-
+        return output_dir, output_dir, output_dir
 
-with gr.Blocks(title="SeedVR2: One-Step Video Restoration via Diffusion Adversarial Post-Training") as demo:
-    # Top logo and title
+with gr.Blocks(title="SeedVR2: Professional Image Upscaler") as demo:
+    # Top logo and title with orange theme
     gr.HTML("""
-        <div style='text-align:center; margin-bottom: 10px;'>
-            <img src='https://huggingface.co/ByteDance-Seed/SeedVR2-3B/resolve/main/assets/seedvr_logo.png' style='height:40px;' alt='SeedVR logo'/>
+        <div style='text-align:center; margin-bottom: 20px;'>
+            <img src='https://huggingface.co/ByteDance-Seed/SeedVR2-3B/resolve/main/assets/seedvr_logo.png' style='height:50px;' alt='SeedVR logo'/>
         </div>
-        <p><b>Official Gradio demo</b> for 
-        <a href='https://github.com/ByteDance-Seed/SeedVR' target='_blank'>
-        <b>SeedVR2: One-Step Video Restoration via Diffusion Adversarial Post-Training</b></a>.<br>
-        🔥 <b>SeedVR2</b> is a one-step image and video restoration algorithm for real-world and AIGC content.
-        </p>
+        <p><b>SeedVR2 Image Upscaler</b> - Professional AI-powered image enhancement and upscaling</p>
+        <p style="color: #ff6600; font-weight: bold;">🔥 Experience state-of-the-art image restoration with advanced diffusion technology</p>
     """)
 
-    # Interface
+    # Interface with orange theme
     with gr.Row():
-        input_video = gr.File(label="Upload image or video", type="filepath")
-        seed = gr.Number(label="Seeds", value=666)
-        fps = gr.Number(label="fps", value=24)
+        input_image = gr.Image(label="Upload Image", type="filepath", height=400)
+        seed = gr.Number(label="Random Seed", value=666, info="Control the randomness of the upscaling process")
+        res_h = gr.Slider(label="Output Height", minimum=512, maximum=4096, step=64, value=1280, info="Higher resolution for better quality")
+        res_w = gr.Slider(label="Output Width", minimum=512, maximum=4096, step=64, value=720, info="Higher resolution for better quality")
 
     with gr.Row():
-        output_video = gr.Video(label="Output_Video")
-        output_image = gr.Image(label="Output_Image")
-        download_link = gr.File(label="Download the output")
+        output_image = gr.Image(label="Upscaled Image", height=400)
+        download_link = gr.File(label="Download Output")
 
-    run_button = gr.Button("Run")
-    run_button.click(fn=generation_loop, inputs=[input_video, seed, fps], outputs=[output_image, output_video, download_link])
+    run_button = gr.Button("Upscale Image", variant="primary", size="lg")
+    run_button.click(fn=generation_loop, inputs=[input_image, seed, res_h, res_w], outputs=[output_image, download_link, download_link])
 
     # Examples
     gr.Examples(
         examples=[
-            ["./01.mp4", 4, 24],
-            ["./02.mp4", 4, 24],
-            ["./03.mp4", 4, 24],
+            ["./01.mp4", 4, 1280, 720],
+            ["./02.mp4", 4, 1280, 720],
+            ["./03.mp4", 4, 1280, 720],
         ],
-        inputs=[input_video, seed, fps]
+        inputs=[input_image, seed, res_h, res_w]
     )
 
-    # Article/Footer
+    # Article/Footer with orange accents
     gr.HTML("""
-        <hr>
+        <hr style="border-color: #ff6600;">
         <p>If you find SeedVR helpful, please ⭐ the 
-        <a href='https://github.com/ByteDance-Seed/SeedVR' target='_blank'>GitHub repository</a>:</p>
+        <a href='https://github.com/ByteDance-Seed/SeedVR' target='_blank'>
+        <b>GitHub repository</b></a>:</p>
 
         <a href="https://github.com/ByteDance-Seed/SeedVR" target="_blank">
             <img src="https://img.shields.io/github/stars/ByteDance-Seed/SeedVR?style=social" alt="GitHub Stars">
         </a>
 
-        <h4>Notice</h4>
-        <p>This demo supports up to <b>720p and 121 frames for videos or 2k images</b>.  
-        For other use cases (image restoration beyond 2K, video resolutions beyond 720p, etc), check the <a href='https://github.com/ByteDance-Seed/SeedVR' target='_blank'>GitHub repo</a>.</p>
+        <h4 style="color: #ff6600;">Features</h4>
+        <p>🎨 <b>High-Resolution Upscaling</b> - Transform low-quality images to stunning high-resolution masterpieces<br>
+        🚀 <b>AI-Powered Enhancement</b> - Advanced diffusion technology for superior image restoration<br>
+        🎯 <b>Customizable Output</b> - Control resolution and seed for personalized results</p>
 
-        <h4>Limitations</h4>
-        <p>May fail on heavy degradations or small-motion AIGC clips, causing oversharpening or poor restoration.</p>
+        <h4 style="color: #ff6600;">Limitations</h4>
+        <p>For best results, use images with moderate degradation. Extreme cases may require additional processing.</p>
 
-        <h4>Citation</h4>
-        <pre style="font-size: 12px;">
+        <h4 style="color: #ff6600;">Citation</h4>
+        <pre style="font-size: 12px; background-color: #fff5f5; padding: 10px; border-radius: 5px; border: 1px solid #ff6600;">
         @article{wang2025seedvr2,
             title={SeedVR2: One-Step Video Restoration via Diffusion Adversarial Post-Training},
             author={Wang, Jianyi and Lin, Shanchuan and Lin, Zhijie and Ren, Yuxi and Wei, Meng and Yue, Zongsheng and Zhou, Shangchen and Chen, Hao and Zhao, Yang and Yang, Ceyuan and Xiao, Xuefeng and Loy, Chen Change and Jiang, Lu},
             booktitle={arXiv preprint arXiv:2506.05301},
             year={2025}
         }
-
-        @inproceedings{wang2025seedvr,
-            title={SeedVR: Seeding Infinity in Diffusion Transformer Towards Generic Video Restoration},
-            author={Wang, Jianyi and Lin, Zhijie and Wei, Meng and Zhao, Yang and Yang, Ceyuan and Loy, Chen Change and Jiang, Lu},
-            booktitle={CVPR},
-            year={2025}
-        }
         </pre>
 
-        <h4>License</h4>
+        <h4 style="color: #ff6600;">License</h4>
         <p>Licensed under the 
         <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache 2.0 License</a>.</p>
 
-        <h4>Contact</h4>
+        <h4 style="color: #ff6600;">Contact</h4>
         <p>Email: <b>iceclearwjy@gmail.com</b></p>
 
-        <p>
-        <a href="https://twitter.com/Iceclearwjy">
-        <img src="https://img.shields.io/twitter/follow/Iceclearwjy?label=%40Iceclearwjy&style=social" alt="Twitter Follow">
-        </a>
-        <a href="https://github.com/IceClear">
-        <img src="https://img.shields.io/github/followers/IceClear?style=social" alt="GitHub Follow">
-        </a>
-        </p>
-
         <p style="text-align:center;">
         <img src="https://visitor-badge.laobi.icu/badge?page_id=ByteDance-Seed/SeedVR" alt="visitors">
         </p>
     """)
 
-demo.queue()
-demo.launch()
+# Launch with orange theme and modern Gradio 6 configuration
+demo.launch(
+    theme=gr.themes.Soft(
+        primary_hue="orange",
+        secondary_hue="orange",
+        neutral_hue="slate",
+        font=gr.themes.GoogleFont("Inter"),
+        text_size="lg",
+        spacing_size="lg",
+        radius_size="md"
+    ).set(
+        button_primary_background_fill="*primary_600",
+        button_primary_background_fill_hover="*primary_700",
+        block_title_text_weight="600",
+        block_label_text_weight="500",
+        input_background_fill="*surface_100",
+        output_background_fill="*surface_100",
+        input_border_color="*border_color",
+        output_border_color="*border_color",
+        input_text_color="*text_color",
+        output_text_color="*text_color",
+        block_background_fill="*surface_50",
+        block_border_color="*border_color",
+        block_border_width="1px",
+        block_border_radius="8px",
+        block_shadow="*shadow_medium",
+        block_padding="16px",
+        block_title_text_size="lg",
+        block_label_text_size="md",
+        input_padding="12px",
+        output_padding="12px",
+        button_text_size="md",
+        button_padding="12px 24px",
+        button_border_radius="6px",
+        button_border_width="1px",
+        button_border_color="*primary_600",
+        button_text_weight="500",
+        slider_track_color="*primary_600",
+        slider_handle_color="*primary_600",
+        slider_handle_size="20px",
+        slider_track_height="6px",
+        slider_track_radius="3px",
+        slider_handle_border_width="2px",
+        slider_handle_border_color="*primary_600",
+        slider_handle_border_radius="50%",
+        slider_handle_shadow="*shadow_small",
+        slider_handle_transition="all 0.2s ease",
+        slider_handle_hover_background_fill="*primary_700",
+        slider_handle_hover_border_color="*primary_700",
+        slider_handle_active_background_fill="*primary_700",
+        slider_handle_active_border_color="*primary_700",
+        slider_handle_active_shadow="*shadow_small",
+        slider_handle_active_transform="scale(1.1)",
+        slider_handle_active_transition="all 0.2s ease",
+        slider_handle_active_border_radius="50%",
+        slider_handle_active_box_shadow="0 0 0 2px *primary_600",
+        slider_handle_active_box_shadow_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_transition="all 0.2s ease",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_hover="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active="0 0 0 2px *primary_700",
+        slider_handle_active_box_shadow_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active_active