config.py

import os
import sys
import json
import time
import random
import gradio as gr
from datetime import datetime
from pathlib import Path


# ------------------
# Paths / static
# ------------------
BASE_DIR = Path(__file__).resolve().parent
RES = BASE_DIR / "_res"
ASSETS = RES / "assets"
EXAMPLES = BASE_DIR / "examples"
VID_CACHE = BASE_DIR / "vid_cache"
VID_CACHE.mkdir(parents=True, exist_ok=True)

# ------------------
# GRADIO UI
# ------------------

# MARK: Pfade zu den custom files: CSS and JS:
custom_css_path = RES / "_custom.css"
custom_js_path = RES / "_custom.js"

# Read the content of the CSS and JS files
with open(custom_css_path, "r") as f:
    CUSTOM_CSS = f.read()

    """  CUSTOM_CSS = "" "
    /* General Theme */
    body {
        background-color: #121218 !important;
        color: white !important;
    }
    
    /* Header */
    .md-header-wrapper {
        padding: 1rem 0;
        border-bottom: 1px solid #312938;
    }
    
    .tab-header {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: #8a2ce2;
        border-bottom: 2px solid #8a2ce2;
        padding-bottom: 0.5rem;
    }
    
    /* Sections */
    .section-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: #ffffff;
    }
    
    /* Storyboard */
    .storyboard-row {
        display: flex;
        gap: 2rem;
        align-items: stretch;
        margin-bottom: 2rem;
    }
    
    .storyboard-col {
        flex: 1;
        background: rgba(25, 17, 33, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(72, 61, 82, 0.5);
        border-radius: 0.75rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .storyboard-col .gr-image {
        width: 100%;
        border: 2px dashed #483d52;
        border-radius: 0.5rem;
        padding: 1rem;
        background: transparent;
        transition: border-color 0.3s ease;
    }
    
    .storyboard-col .gr-image:hover {
        border-color: #8a2ce2;
    }
    
    .upload-instructions {
        text-align: center;
        margin-top: 1rem;
    }
    
    /* Regieanweisung */
    .regie-textbox textarea {
        background-color: #191121 !important;
        border: 1px solid #312938 !important;
        color: white !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .duration-slider input[type="range"] {
        width: 100%;
        height: 0.5rem;
        background: linear-gradient(to right, #8a2ce2, #40e0d0);
        border-radius: 9999px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
    }
    
    .duration-slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        background: white;
        border-radius: 9999px;
        border: 4px solid #191121;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
    
    .duration-slider input[type="range"]::-moz-range-thumb {
        width: 1.25rem;
        height: 1.25rem;
        background: white;
        border: 4px solid #191121;
        border-radius: 9999px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
    
    .duration-slider .slider-label {
        display: flex;
        justify-content: space-between;
        margin-top: 0.5rem;
        font-weight: bold;
        color: #40e0d0;
    }
    
    /* Profi-Einstellungen Accordion */
    .profi-accordion .label {
        font-weight: bold;
        color: #ffffff;
        font-size: 1.125rem;
    }
    
    .profi-accordion .gr-accordion-content {
        background: rgba(25, 17, 33, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(72, 61, 82, 0.5);
        border-radius: 0.75rem;
        padding: 1.5rem;
    }
    
    .negative-prompt textarea {
        background-color: #191121 !important;
        border: 1px solid #312938 !important;
        color: white !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        min-height: 160px !important;
        resize: vertical !important;
    }
    
    .seed-slider input[type="number"] {
        background-color: #191121 !important;
        border: 1px solid #312938 !important;
        color: white !important;
        border-radius: 0.5rem !important;
        padding: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Sliders inside Accordion */
    .quality-slider input[type="range"],
    .prompt-fidelity-slider input[type="range"],
    .motion-freedom-slider input[type="range"] {
        width: 100%;
        height: 0.5rem;
        background: linear-gradient(to right, #8a2ce2, #40e0d0);
        border-radius: 9999px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
    }
    
    .quality-slider input[type="range"]::-webkit-slider-thumb,
    .prompt-fidelity-slider input[type="range"]::-webkit-slider-thumb,
    .motion-freedom-slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        background: white;
        border-radius: 9999px;
        border: 4px solid #191121;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
    
    .quality-slider input[type="range"]::-moz-range-thumb,
    .prompt-fidelity-slider input[type="range"]::-moz-range-thumb,
    .motion-freedom-slider input[type="range"]::-moz-range-thumb {
        width: 1.25rem;
        height: 1.25rem;
        background: white;
        border: 4px solid #191121;
        border-radius: 9999px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
    
    /* Generate Button */
    .generate-button {
        width: 100%;
        height: 4rem;
        background: linear-gradient(to right, #8a2ce2, #40e0d0);
        border: none;
        border-radius: 0.75rem;
        color: white;
        font-size: 1.25rem;
        font-weight: bold;
        letter-spacing: 0.025em;
        box-shadow: 0 0 20px rgba(138, 44, 226, 0.5);
        transition: box-shadow 0.3s ease;
        margin-top: 2rem;
    }
    
    .generate-button:hover {
        box-shadow: 0 0 30px rgba(138, 44, 226, 0.7);
    }
    
    /* Output Section */
    .output-section-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: #ffffff;
    }
    
    /* Video Output */
    #video_output_elem video {
        width: 100%;
        border-radius: 0.5rem;
        background-color: #000;
    }
    
    /* Last Frame Image */
    #last_frame_output_elem img {
        width: 100%;
        border-radius: 0.5rem;
    }
    """

with open(custom_js_path, "r") as f:
    CUSTOM_JS = f.read()

CUSTOM_HEAD = f"""
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
"""

TITLE = "Bild → Video"
TITLE_HTML = """
    <h1>Bild → Video</h1>
    <h3>Erwecke jedes Foto zum Leben – ganz ohne Expertenwissen!<span></span></h3>
    <p class="">Lade einfach ein Bild hoch und lass dich überraschen, wie daraus ein flüssiges, detailreiches Video entsteht. Ob sanfte Gesichtsbewegung, wogendes Wasser oder ein Hauch Wind im Hintergrund – Bild → Video macht aus deinen Momenten atemberaubende Mini-Filme. Ideal für kreative Projekte, Social Media oder einfach das Staunen: Was früher Sci-Fi war, ist heute Realität. Und du brauchst dafür nichts weiter als ein Bild und ein bisschen Neugier.</p>
    <p><span style="font-weight: 600">LG Sebastian</span> <img id="wink" src="gradio_api/file=_res/wink.png" width="20"> gib dem Space gerne ein <img id="heart" src="gradio_api/file=_res/heart.png" width="20"> </p>
"""

THEME = gr.themes.Soft(
    primary_hue="yellow",
    radius_size="md",
    neutral_hue=gr.themes.Color(c100="#a6adc8", c200="#9399b2", c300="#7f849c", c400="#6c7086", c50="#cdd6f4", c500="#585b70", c600="#45475a", c700="#313244", c800="#1e1e2e", c900="#181825", c950="#11111b"),
)

# ------------------
# Helpers
# ------------------

DEFAULT_PROMPT = "Erwecke dieses Bild zum Leben, filmische Bewegung, flüssige Animation"
DEFAULT_PROMPT_NEGATIVE = "Lebhafte Farben, überbelichtet, statisch, unscharfe Details, Untertitel, Stil, Kunstwerk, Gemälde, Bild, Standbild, insgesamt gräulich, schlechteste Qualität, niedrige Qualität, JPEG-Kompressionsreste, hässlich, unvollständig, zusätzliche Finger, schlecht gezeichnete Hände, schlecht gezeichnetes Gesicht, deformiert, entstellt, deformierte Gliedmaßen, zusammengewachsene Finger, statisches Bild, unruhiger Hintergrund, drei Beine, viele Personen im Hintergrund, rückwärts gehend"


EXAMPLES=[ 
            [
                EXAMPLES / "wan_i2v_input.JPG",
                "POV-Selfie-Video: Weiße Katze mit Sonnenbrille steht auf einem Surfbrett, entspanntes Lächeln, im Hintergrund ein tropischer Strand (klares Wasser, grüne Hügel, blauer Himmel mit Wolken). Das Surfbrett kippt, die Katze fällt ins Meer, die Kamera taucht mit Blasen und Sonnenstrahlen unter Wasser. Kurzer Blick auf das Gesicht der Katze unter Wasser, dann taucht sie wieder auf und filmt weiter ein Selfie – verspielte Sommerurlaubsstimmung.",
                4,
            ],
            [
                EXAMPLES / "wan22_input_2.jpg",
                "A sleek lunar vehicle glides into view from left to right, kicking up moon dust as astronauts in white spacesuits hop aboard with characteristic lunar bouncing movements. In the distant background, a VTOL craft descends straight down and lands silently on the surface. Throughout the entire scene, ethereal aurora borealis ribbons dance across the star-filled sky, casting shimmering curtains of green, blue, and purple light that bathe the lunar landscape in an otherworldly, magical glow.",
                4,
            ],
            [
                EXAMPLES /"kill_bill.jpeg",
                "Uma Thurmans Figur, Beatrix Kiddo, hält ihre rasiermesserscharfe Katana-Klinge ruhig im filmischen Licht. Plötzlich beginnt der polierte Stahl weicher zu werden und sich zu verformen, wie erhitztes Metall, das seine Festigkeit verliert. Die perfekte Schneide der Klinge verbiegt sich langsam und senkt sich ab, während geschmolzener Stahl in silbrigen Rinnsalen herabfließt und dabei seinen metallischen Glanz behält. Die Verwandlung beginnt zunächst subtil – eine leichte Biegung der Klinge –, beschleunigt sich dann aber, während das Metall immer flüssiger wird. Die Kamera verharrt auf ihrem Gesicht, während sich ihre durchdringenden Augen allmählich verengen, nicht vor tödlichem Fokus, sondern vor Verwirrung und wachsender Besorgnis, als sie zusieht, wie sich ihre Waffe vor ihren Augen auflöst. Ihr Atem beschleunigt sich leicht, als sie diese unmögliche Verwandlung miterlebt. Das Schmelzen intensiviert sich, die perfekte Form des Katanas wird immer abstrakter und tropft wie flüssiges Quecksilber aus ihrer Hand. Geschmolzene Tropfen fallen mit einem sanften metallischen Aufprall zu Boden. Ihr Gesichtsausdruck wandelt sich von ruhiger Bereitschaft zu Verwirrung und Besorgnis, als sich ihr legendäres Racheinstrument buchstäblich in ihren Händen verflüssigt und sie wehrlos und desorientiert zurücklässt.",
                6,
            ],
        ]