Upload 15 files

README.md

@@ -1,13 +1,14 @@
 ---
-title: FLUX Tercepat Di Dunia
-emoji: 🏆
-colorFrom: gray
-colorTo: gray
+title: FLUX Realtime
+emoji: ⚡
+colorFrom: yellow
+colorTo: pink
 sdk: gradio
 sdk_version: 4.44.0
 app_file: app.py
-pinned: false
-license: apache-2.0
+pinned: true
+license: mit
+short_description: High quality Images in Realtime
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,175 @@
+import gradio as gr
+import random
+from gradio_client import Client
+import os
+from themes import IndonesiaTheme  # Impor tema custom dari themes.py
+
+# Constants
+MAX_SEED = 999999
+MAX_IMAGE_SIZE = 2048
+DEFAULT_WIDTH = 1024
+DEFAULT_HEIGHT = 1024
+DEFAULT_INFERENCE_STEPS = 1
+
+# Siapkan URL untuk permintaan API RT FLUX
+# url_api = os.environ['url_api']
+
+client = Client("KingNish/Realtime-FLUX")
+# client = Client(url_api)
+
+# Inference function using RealtimeFlux API
+def generate_image(prompt, seed=42, width=DEFAULT_WIDTH, height=DEFAULT_HEIGHT, randomize_seed=False, num_inference_steps=1):
+    result = client.predict(
+        prompt=prompt,
+        seed=seed if not randomize_seed else random.randint(0, MAX_SEED),
+        width=width,
+        height=height,
+        randomize_seed=randomize_seed,
+        num_inference_steps=num_inference_steps,
+        api_name="/RealtimeFlux"
+    )
+    return result[0], result[1], result[2]  # Image, Seed, Latency
+
+# Enhance function using Enhance API
+def enhance_image(prompt, seed, width, height):
+    result = client.predict(
+        param_0=prompt,
+        param_1=seed,
+        param_2=width,
+        param_3=height,
+        api_name="/Enhance"
+    )
+    return result[0], result[1], result[2]  # Image, Seed, Latency
+
+# CSS untuk styling antarmuka
+css = """
+#col-left, #col-mid, #col-right {
+    margin: 0 auto;
+    max-width: 400px;
+    padding: 10px;
+    border-radius: 15px;
+    background-color: #f9f9f9;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#col-right {
+    margin: 0 auto;
+    max-width: 800px;
+    padding: 10px;
+    border-radius: 15px;
+    background-color: #f9f9f9;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#banner {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+}
+#run-button {
+    background-color: #ff4b5c;
+    color: white;
+    font-weight: bold;
+    padding: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+#footer {
+    text-align: center;
+    margin-top: 20px;
+    color: silver;
+}
+
+#whitey {
+    text-align: center;
+    margin-top: 10px;
+    color: white;
+}
+"""
+
+# Membuat antarmuka Gradio dengan tema IndonesiaTheme
+with gr.Blocks(css=css, theme=IndonesiaTheme()) as RealtimeFluxAPP:
+    # Tambahkan banner dan header
+    gr.HTML("""
+        <div style='text-align: center;'>
+            <h1>🌟 Realtime FLUX Image Generator 🌟</h1>
+            <p>Selamat datang! Buat gambar memukau secara realtime dengan FLUX Pipeline.</p>
+            <img src='https://i.ibb.co.com/M2Sd185/banner-rtf.jpg' alt='Banner' style='width: 100%; height: auto;'/>
+        </div>
+    """)
+
+    # Layout utama
+    with gr.Row():
+        with gr.Column(elem_id="col-left"):
+            gr.Markdown("### Deskripsi Gambar")
+            prompt = gr.Textbox(
+                label="Prompt",
+                placeholder="Deskripsikan gambar yang ingin Anda buat...",
+                lines=3,
+                show_label=False,
+                container=False,
+            )
+            generateBtn = gr.Button("🖼️ Buat Gambar", elem_id="run-button")
+            enhanceBtn = gr.Button("🚀 Tingkatkan Gambar", elem_id="run-button")
+            
+            # Advanced Options
+            with gr.Accordion("Advanced Options"):
+                with gr.Row():
+                    realtime = gr.Checkbox(label="Realtime Toggler", info="Gunakan lebih banyak GPU untuk realtime.")
+                    latency = gr.Textbox(label="Latency")
+                with gr.Row():
+                    seed = gr.Number(label="Seed", value=42)
+                    randomize_seed = gr.Checkbox(label="Randomize Seed", value=False)
+                with gr.Row():
+                    width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=DEFAULT_WIDTH)
+                    height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=DEFAULT_HEIGHT)
+                    num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=4, step=1, value=DEFAULT_INFERENCE_STEPS)
+        
+        # Output di sebelah kanan
+        with gr.Column(elem_id="col-right"):
+            result = gr.Image(label="Hasil Gambar", show_label=False, interactive=False)
+
+    # Example Gallery
+    gr.Markdown("### 🌟 Inspirasi Gallery")
+    gr.Examples(elem_id="whitey",
+        examples=[
+            "A beautiful sunset over the rice fields in Bali",
+            "A traditional Indonesian fisherman sailing in a wooden boat",
+            "Mount Bromo erupting at dawn with the sky full of stars",
+            "A street food vendor selling nasi goreng in Jakarta",
+            "The majestic Komodo dragon walking through the forest",
+            "An Indonesian traditional dancer performing in a colorful costume",
+            "A futuristic cityscape of Jakarta with skyscrapers and advanced technology",
+        ],
+        fn=generate_image,
+        inputs=[prompt],
+        outputs=[result, seed, latency],
+        cache_examples="lazy"
+    )
+
+    # Tombol untuk memulai proses pembuatan dan peningkatan gambar
+    generateBtn.click(
+        fn=generate_image,
+        inputs=[prompt, seed, width, height, randomize_seed, num_inference_steps],
+        outputs=[result, seed, latency],
+        show_progress=True
+    )
+
+    enhanceBtn.click(
+        fn=enhance_image,
+        inputs=[prompt, seed, width, height],
+        outputs=[result, seed, latency],
+        show_progress=True
+    )
+
+    # Tambahkan footer di bagian bawah
+    gr.HTML("""
+    <footer id="footer">
+        <p>Transfer Energi Semesta Digital © 2024 __drat. | 🇮🇩 Untuk Indonesia Jaya!</p>
+    </footer>
+    """)
+
+# Menjalankan aplikasi
+if __name__ == "__main__":
+    RealtimeFluxAPP.queue(api_open=False).launch(show_api=False)

app_backup.py

@@ -0,0 +1,165 @@
+import gradio as gr
+import numpy as np
+import random
+import spaces
+import torch
+import time
+from diffusers import DiffusionPipeline
+from custom_pipeline import FLUXPipelineWithIntermediateOutputs
+
+# Constants
+MAX_SEED = np.iinfo(np.int32).max
+MAX_IMAGE_SIZE = 2048
+DEFAULT_WIDTH = 1024
+DEFAULT_HEIGHT = 1024
+DEFAULT_INFERENCE_STEPS = 1
+
+# Device and model setup
+dtype = torch.float16
+pipe = FLUXPipelineWithIntermediateOutputs.from_pretrained(
+    "black-forest-labs/FLUX.1-schnell", torch_dtype=dtype
+).to("cuda")
+torch.cuda.empty_cache()
+
+# Inference function
+@spaces.GPU(duration=25)
+def generate_image(prompt, seed=42, width=DEFAULT_WIDTH, height=DEFAULT_HEIGHT, randomize_seed=False, num_inference_steps=2, progress=gr.Progress(track_tqdm=True)):
+    if randomize_seed:
+        seed = random.randint(0, MAX_SEED)
+    generator = torch.Generator().manual_seed(int(float(seed)))
+
+    start_time = time.time()
+
+    # Only generate the last image in the sequence
+    for img in pipe.generate_images(  
+            prompt=prompt,
+            guidance_scale=0, # as Flux schnell is guidance free
+            num_inference_steps=num_inference_steps,
+            width=width,
+            height=height,
+            generator=generator
+        ): 
+        latency = f"Latency: {(time.time()-start_time):.2f} seconds"    
+        yield img, seed, latency
+
+# Example prompts
+examples = [
+    "a tiny astronaut hatching from an egg on the moon",
+    "a cute white cat holding a sign that says hello world",
+    "an anime illustration of a wiener schnitzel",
+    "Create mage of Modern house in minecraft style",
+    "Imagine steve jobs as Star Wars movie character",
+    "Lion",
+    "Photo of a young woman with long, wavy brown hair tied in a bun and glasses. She has a fair complexion and is wearing subtle makeup, emphasizing her eyes and lips. She is dressed in a black top. The background appears to be an urban setting with a building facade, and the sunlight casts a warm glow on her face.",
+]
+
+# --- Gradio UI ---
+with gr.Blocks() as demo:
+    with gr.Column(elem_id="app-container"):
+        gr.Markdown("# 🎨 Realtime FLUX Image Generator")
+        gr.Markdown("Generate stunning images in real-time with Modified Flux.Schnell pipeline.")
+        gr.Markdown("<span style='color: red;'>Note: Sometimes it stucks or stops generating images (I don't know why). In that situation just refresh the site.</span>")
+
+        with gr.Row():
+            with gr.Column(scale=2.5):
+                result = gr.Image(label="Generated Image", show_label=False, interactive=False)
+            with gr.Column(scale=1):
+                prompt = gr.Text(
+                    label="Prompt",
+                    placeholder="Describe the image you want to generate...",
+                    lines=3,
+                    show_label=False,
+                    container=False,
+                )
+                generateBtn = gr.Button("🖼️ Generate Image")
+                enhanceBtn = gr.Button("🚀 Enhance Image")
+
+                with gr.Column("Advanced Options"):
+                    with gr.Row():
+                        realtime = gr.Checkbox(label="Realtime Toggler", info="If TRUE then uses more GPU but create image in realtime.", value=False)
+                        latency = gr.Text(label="Latency")
+                    with gr.Row():
+                        seed = gr.Number(label="Seed", value=42)
+                        randomize_seed = gr.Checkbox(label="Randomize Seed", value=False)
+                    with gr.Row():
+                        width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=DEFAULT_WIDTH)
+                        height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=DEFAULT_HEIGHT)
+                        num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=4, step=1, value=DEFAULT_INFERENCE_STEPS)
+
+        with gr.Row():
+            gr.Markdown("### 🌟 Inspiration Gallery")
+        with gr.Row():
+            gr.Examples(
+                examples=examples,
+                fn=generate_image,
+                inputs=[prompt],
+                outputs=[result, seed, latency],
+                cache_examples="lazy" 
+            )
+
+    def enhance_image(*args):
+        gr.Info("Enhancing Image") # currently just runs optimized pipeline for 2 steps. Further implementations later.
+        return next(generate_image(*args))
+
+    enhanceBtn.click(
+        fn=enhance_image,
+        inputs=[prompt, seed, width, height],
+        outputs=[result, seed, latency],
+        show_progress="hidden",
+        api_name="Enhance",
+        queue=False,
+        concurrency_limit=None
+    )
+
+    generateBtn.click(
+        fn=generate_image,
+        inputs=[prompt, seed, width, height, randomize_seed, num_inference_steps],
+        outputs=[result, seed, latency],
+        show_progress="full",
+        api_name="RealtimeFlux",
+        queue=False,
+        concurrency_limit=None
+    )
+
+    def update_ui(realtime_enabled):
+        return {
+            prompt: gr.update(interactive=True),
+            generateBtn: gr.update(visible=not realtime_enabled)
+        }
+
+    realtime.change(
+        fn=update_ui,
+        inputs=[realtime],
+        outputs=[prompt, generateBtn],
+        queue=False,
+        concurrency_limit=None
+    )
+
+    def realtime_generation(*args):
+        if args[0]:  # If realtime is enabled
+            return next(generate_image(*args[1:]))
+
+    prompt.submit(
+        fn=generate_image,
+        inputs=[prompt, seed, width, height, randomize_seed, num_inference_steps],
+        outputs=[result, seed, latency],
+        show_progress="full",
+        api_name=False,
+        queue=False,
+        concurrency_limit=None
+    )
+
+    for component in [prompt, width, height, num_inference_steps]:
+        component.input(
+            fn=realtime_generation,
+            inputs=[realtime, prompt, seed, width, height, randomize_seed, num_inference_steps],
+            outputs=[result, seed, latency],
+            show_progress="hidden",
+            api_name=False,
+            trigger_mode="always_last",
+            queue=False,
+            concurrency_limit=None
+        )
+
+# Launch the app
+demo.launch()

custom_pipeline.py

@@ -0,0 +1,168 @@
+import torch
+import numpy as np
+from diffusers import FluxPipeline, FlowMatchEulerDiscreteScheduler
+from typing import Any, Dict, List, Optional, Union
+from PIL import Image
+
+# Constants for shift calculation
+BASE_SEQ_LEN = 256
+MAX_SEQ_LEN = 4096
+BASE_SHIFT = 0.5
+MAX_SHIFT = 1.2
+
+# Helper functions
+def calculate_timestep_shift(image_seq_len: int) -> float:
+    """Calculates the timestep shift (mu) based on the image sequence length."""
+    m = (MAX_SHIFT - BASE_SHIFT) / (MAX_SEQ_LEN - BASE_SEQ_LEN)
+    b = BASE_SHIFT - m * BASE_SEQ_LEN
+    mu = image_seq_len * m + b
+    return mu
+
+def prepare_timesteps(
+    scheduler: FlowMatchEulerDiscreteScheduler,
+    num_inference_steps: Optional[int] = None,
+    device: Optional[Union[str, torch.device]] = None,
+    timesteps: Optional[List[int]] = None,
+    sigmas: Optional[List[float]] = None,
+    mu: Optional[float] = None,
+) -> (torch.Tensor, int):
+    """Prepares the timesteps for the diffusion process."""
+    if timesteps is not None and sigmas is not None:
+        raise ValueError("Only one of `timesteps` or `sigmas` can be passed.")
+
+    if timesteps is not None:
+        scheduler.set_timesteps(timesteps=timesteps, device=device)
+    elif sigmas is not None:
+        scheduler.set_timesteps(sigmas=sigmas, device=device)
+    else:
+        scheduler.set_timesteps(num_inference_steps, device=device, mu=mu)
+
+    timesteps = scheduler.timesteps
+    num_inference_steps = len(timesteps)
+    return timesteps, num_inference_steps
+
+# FLUX pipeline function
+class FLUXPipelineWithIntermediateOutputs(FluxPipeline):
+    """
+    Extends the FluxPipeline to yield intermediate images during the denoising process 
+    with progressively increasing resolution for faster generation.
+    """
+    @torch.inference_mode()
+    def generate_images(
+        self,
+        prompt: Union[str, List[str]] = None,
+        prompt_2: Optional[Union[str, List[str]]] = None,
+        height: Optional[int] = None,
+        width: Optional[int] = None,
+        num_inference_steps: int = 4,
+        timesteps: List[int] = None,
+        guidance_scale: float = 3.5,
+        num_images_per_prompt: Optional[int] = 1,
+        generator: Optional[Union[torch.Generator, List[torch.Generator]]] = None,
+        latents: Optional[torch.FloatTensor] = None,
+        prompt_embeds: Optional[torch.FloatTensor] = None,
+        pooled_prompt_embeds: Optional[torch.FloatTensor] = None,
+        output_type: Optional[str] = "pil",
+        return_dict: bool = True,
+        joint_attention_kwargs: Optional[Dict[str, Any]] = None,
+        max_sequence_length: int = 300,
+    ):
+        """Generates images and yields intermediate results during the denoising process."""
+        height = height or self.default_sample_size * self.vae_scale_factor
+        width = width or self.default_sample_size * self.vae_scale_factor
+
+        # 1. Check inputs
+        self.check_inputs(
+            prompt,
+            prompt_2,
+            height,
+            width,
+            prompt_embeds=prompt_embeds,
+            pooled_prompt_embeds=pooled_prompt_embeds,
+            max_sequence_length=max_sequence_length,
+        )
+
+        self._guidance_scale = guidance_scale
+        self._joint_attention_kwargs = joint_attention_kwargs
+        self._interrupt = False
+
+        # 2. Define call parameters
+        batch_size = 1 if isinstance(prompt, str) else len(prompt)
+        device = self._execution_device
+
+        # 3. Encode prompt
+        lora_scale = joint_attention_kwargs.get("scale", None) if joint_attention_kwargs is not None else None
+        prompt_embeds, pooled_prompt_embeds, text_ids = self.encode_prompt(
+            prompt=prompt,
+            prompt_2=prompt_2,
+            prompt_embeds=prompt_embeds,
+            pooled_prompt_embeds=pooled_prompt_embeds,
+            device=device,
+            num_images_per_prompt=num_images_per_prompt,
+            max_sequence_length=max_sequence_length,
+            lora_scale=lora_scale,
+        )
+        # 4. Prepare latent variables
+        num_channels_latents = self.transformer.config.in_channels // 4
+        latents, latent_image_ids = self.prepare_latents(
+            batch_size * num_images_per_prompt,
+            num_channels_latents,
+            height,
+            width,
+            prompt_embeds.dtype,
+            device,
+            generator,
+            latents,
+        )
+        # 5. Prepare timesteps
+        sigmas = np.linspace(1.0, 1 / num_inference_steps, num_inference_steps)
+        image_seq_len = latents.shape[1]
+        mu = calculate_timestep_shift(image_seq_len)
+        timesteps, num_inference_steps = prepare_timesteps(
+            self.scheduler,
+            num_inference_steps,
+            device,
+            timesteps,
+            sigmas,
+            mu=mu,
+        )
+        self._num_timesteps = len(timesteps)
+
+        # Handle guidance
+        guidance = torch.full([1], guidance_scale, device=device, dtype=torch.float16).expand(latents.shape[0]) if self.transformer.config.guidance_embeds else None
+
+        # 6. Denoising loop
+        for i, t in enumerate(timesteps):
+            if self.interrupt:
+                continue
+
+            timestep = t.expand(latents.shape[0]).to(latents.dtype)
+
+            noise_pred = self.transformer(
+                hidden_states=latents,
+                timestep=timestep / 1000,
+                guidance=guidance,
+                pooled_projections=pooled_prompt_embeds,
+                encoder_hidden_states=prompt_embeds,
+                txt_ids=text_ids,
+                img_ids=latent_image_ids,
+                joint_attention_kwargs=self.joint_attention_kwargs,
+                return_dict=False,
+            )[0]
+
+             # Yield intermediate result
+            latents = self.scheduler.step(noise_pred, t, latents, return_dict=False)[0]
+            torch.cuda.empty_cache()
+
+        # Final image
+        yield self._decode_latents_to_image(latents, height, width, output_type)
+        self.maybe_free_model_hooks()
+        torch.cuda.empty_cache()
+
+    def _decode_latents_to_image(self, latents, height, width, output_type, vae=None):
+        """Decodes the given latents into an image."""
+        vae = vae or self.vae
+        latents = self._unpack_latents(latents, height, width, self.vae_scale_factor)
+        latents = (latents / vae.config.scaling_factor) + vae.config.shift_factor
+        image = vae.decode(latents, return_dict=False)[0]
+        return self.image_processor.postprocess(image, output_type=output_type)[0]

gradio_cached_examples/25/indices.csv

@@ -0,0 +1,3 @@
+0
+4
+5

gradio_cached_examples/25/log.csv

@@ -0,0 +1,4 @@
+Hasil Gambar,Seed,Latency,flag,username,timestamp
+"{""path"": ""gradio_cached_examples/25/Hasil Gambar/727c385c02cbde1f1576/image.webp"", ""url"": ""/file=/private/var/folders/vd/j2y_f_m51g549p6b1r04gm840000gn/T/gradio/77f2ec64bb9e013ff44412eb6113b60d159b39bc6b4896c611878433c630bceb/image.webp"", ""size"": null, ""orig_name"": ""image.webp"", ""mime_type"": null, ""is_stream"": false, ""meta"": {""_type"": ""gradio.FileData""}}",42,Latency: 2.70 seconds,,,2024-09-17 15:46:20.843746
+"{""path"": ""gradio_cached_examples/25/Hasil Gambar/357e0c8d8a0e75b63595/image.webp"", ""url"": ""/file=/private/var/folders/vd/j2y_f_m51g549p6b1r04gm840000gn/T/gradio/75bf61373bd5f8769ef00ed36a36a0ad9ac4b5acdd5e87525a2bcad08cc801e5/image.webp"", ""size"": null, ""orig_name"": ""image.webp"", ""mime_type"": null, ""is_stream"": false, ""meta"": {""_type"": ""gradio.FileData""}}",42,Latency: 1.54 seconds,,,2024-09-17 15:53:24.921673
+"{""path"": ""gradio_cached_examples/25/Hasil Gambar/827754ef7725b469cc3b/image.webp"", ""url"": ""/file=/private/var/folders/vd/j2y_f_m51g549p6b1r04gm840000gn/T/gradio/dc416db9554a73bb302e4594854753abd87a742ddef9604d877f85dbeff179a5/image.webp"", ""size"": null, ""orig_name"": ""image.webp"", ""mime_type"": null, ""is_stream"": false, ""meta"": {""_type"": ""gradio.FileData""}}",42,Latency: 1.66 seconds,,,2024-09-17 15:56:55.732014

gradio_cached_examples/29/indices.csv

@@ -0,0 +1 @@
+5

gradio_cached_examples/29/log.csv

@@ -0,0 +1,2 @@
+Generated Image,Seed,Latency,flag,username,timestamp
+"{""path"": ""gradio_cached_examples/29/Generated Image/c9de53a0541e2186d948/image.webp"", ""url"": ""/file=/private/var/folders/vd/j2y_f_m51g549p6b1r04gm840000gn/T/gradio/f241273bd433bc7094613cce640fc438824921e40151f296ff33088e4fa26c7a/image.webp"", ""size"": null, ""orig_name"": ""image.webp"", ""mime_type"": null, ""is_stream"": false, ""meta"": {""_type"": ""gradio.FileData""}}",42,Latency: 2.30 seconds,,,2024-09-17 15:39:23.570453

requirements.txt

@@ -0,0 +1,7 @@
+accelerate
+git+https://github.com/huggingface/diffusers.git
+torch
+gradio
+transformers
+xformers
+sentencepiece

themes.py

@@ -0,0 +1,55 @@
+from __future__ import annotations
+from typing import Iterable
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+class IndonesiaTheme(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.red,
+        secondary_hue: colors.Color | str = colors.gray,
+        neutral_hue: colors.Color | str = colors.gray,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Quicksand"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        super().set(
+            body_background_fill="linear-gradient(to bottom, #e0e0e0, #7d7d7d)",  # Gradasi abu-abu muda ke abu-abu tua
+            body_background_fill_dark="linear-gradient(to bottom, #7d7d7d, #4a4a4a)",  # Gradasi abu-abu tua ke lebih gelap untuk dark mode
+            button_primary_background_fill="linear-gradient(90deg, #d84a4a, #b33030)",  # Merah ke merah tua
+            button_primary_background_fill_hover="linear-gradient(90deg, #e85b5b, #cc4b4b)",  # Merah lebih terang untuk hover
+            button_primary_text_color="white",
+            button_primary_background_fill_dark="linear-gradient(90deg, #b33030, #8f1f1f)",  # Merah tua untuk dark mode
+            slider_color="*secondary_300",
+            slider_color_dark="*secondary_600",
+            block_title_text_weight="600",
+            block_border_width="3px",
+            block_shadow="*shadow_drop_lg",
+            button_shadow="*shadow_drop_lg",
+            button_large_padding="32px",
+        )