Upload 3 files

README.md

@@ -1,14 +1,14 @@
 ---
-title: Bilder Builder
+title: Bilder Builder (UPDATE, Gradio 5)
 emoji: 🌄
 colorFrom: pink
 colorTo: yellow
 sdk: gradio
-sdk_version: 4.43.0
+sdk_version: 5.33.0
 app_file: app.py
 pinned: true
 header: mini
-short_description: Erstelle Bilder mit Flux und div. Flux Loras
+short_description: Erstelle Bilder mit Flux in HQ oder Schnell
 thumbnail: https://i.imgur.com/oXiKuZK.png
 ---
 

app.py

@@ -4,12 +4,15 @@ import numpy as np
 import requests
 from requests import Session
 from requests.adapters import HTTPAdapter
-from requests.packages.urllib3.util.retry import Retry
+
+# from requests.packages.urllib3.util.retry import Retry # Already imported via requests.utils
+from urllib3.util.retry import Retry  # More direct import
 from datetime import datetime
 import urllib.parse
+from pathlib import Path
 from groq import Groq
 from exif import Image
-from PIL import Image as PILImage, ExifTags as PILExifTags
+from PIL import Image as PILImage, ExifTags as PILExifTags, PngImagePlugin
 from io import BytesIO
 import colorsys
 import spaces
@@ -26,36 +29,39 @@ MAX_IMAGE_SIZE = 2048
 GROQ_APIKEY_PROMPTENHANCE = os.getenv("GROQ_APIKEY_PROMPTENHANCE")
 API1 = urllib.parse.unquote(os.getenv("API1"))
 
+BASE_DIR = Path(__file__).resolve().parent
+RES = BASE_DIR / "_res"
+ASSETS = RES / "assets"
+IMAGE_DIR = BASE_DIR / "cache" / "images"
+IMAGE_DIR.mkdir(parents=True, exist_ok=True)
 
-CACHE_DIR = os.path.join(os.path.dirname(__file__), "cache")
-IMAGE_DIR = "cache/images/"
-if not os.path.exists(CACHE_DIR):
-    os.makedirs(CACHE_DIR)
-    print(f"Created cache dir on path {CACHE_DIR}")
-    os.makedirs(os.path.join(CACHE_DIR, "images"))
-    print(f"Created images dir on path {IMAGE_DIR}")
-
-RES = os.path.join(os.path.dirname(__file__), "_res")
+gr.set_static_paths(paths=[str(RES), str("cache/images"), str(ASSETS)])
 
-gr.set_static_paths(paths=["_res/", "_res/assets/", "_res/assets/emojis/", "_res/assets/favicons/", IMAGE_DIR])
+enhance_systemmessage_json = RES / "groq_systemmessage_prompt_enhance_new.json"
+with open(enhance_systemmessage_json, "r") as f:
+    enhance_systemmessage = json.load(f)
 
-custom_css = RES + "/_custom.css"
-custom_js = RES + "/_custom.js"
+custom_css_path = RES / "_custom.css"
+custom_js_path = RES / "_custom.js"
+with open(custom_css_path, "r") as f:
+    custom_css = f.read()
+with open(custom_js_path, "r") as f:
+    custom_js = f.read()
 
 custom_head = f"""
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"/>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
-        <link rel="apple-touch-icon" sizes="180x180" href="file=_res/assets/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="file=_res/assets/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="file=_res/assets/favicons/favicon-16x16.png">
-        <link rel="icon" type="image/x-icon" href="file=_res/assets/favicons/favicon.ico">
-        <link rel="manifest" href="file=_res/assets/favicons/site.webmanifest">
+        <link rel="apple-touch-icon" sizes="180x180" href="file={ASSETS / 'favicons/apple-touch-icon.png'}">
+        <link rel="icon" type="image/png" sizes="32x32" href="file={ASSETS / 'favicons/favicon-32x32.png'}">
+        <link rel="icon" type="image/png" sizes="16x16" href="file={ASSETS / 'favicons/favicon-16x16.png'}">
+        <link rel="icon" type="image/x-icon" href="file={ASSETS / 'favicons/favicon.ico'}">
+        <link rel="manifest" href="file={ASSETS / 'favicons/site.webmanifest'}">
+        <style>{custom_css}</style>
         <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
         <script src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
 """
 
 theme = gr.themes.Soft(
-    # primary_hue="orange",
     radius_size="sm",
     neutral_hue=gr.themes.Color(
         c100="#a6adc8",
@@ -71,40 +77,62 @@ theme = gr.themes.Soft(
         c950="#11111b",
     ),
 )
-
 title = "Bilder Builder"
 
 
 # MARK: READ EXIF
 def read_exif(image_path):
-    with open(image_path, "rb") as src:
-        img = Image(src)
-        img_comment = json.loads(img.user_comment)
-
-        # checking if the key exists before removing
-        if "concept" in img_comment:
-            img_comment.pop("concept")
-
-        return img_comment
-
-
-def read_image_exfi_data(image_path):
-    print("Imagepath:", image_path)
-    img_exif_make, img_exif_comment = read_exif(image_path)
-    return None, image_path, img_exif_comment
+    try:
+        with open(image_path, "rb") as src:
+            img = Image(src)  # This is where TiffByteOrder error can happen from exif library
+            if not hasattr(img, "user_comment") or not img.user_comment:
+                print(f"Warning: No user_comment found in EXIF for {image_path}")
+                return {}  # Return empty dict if no user_comment
+            try:
+                img_comment = json.loads(img.user_comment)
+            except json.JSONDecodeError:
+                print(f"Warning: Could not decode user_comment JSON from EXIF for {image_path}")
+                return {}  # Return empty dict if JSON is invalid
+
+            if "concept" in img_comment:  # checking if the key exists before removing
+                img_comment.pop("concept")
+            return img_comment
+    except ValueError as ve:  # Catch specific errors like TiffByteOrder from the exif library
+        print(f"EXIF parsing ValueError for {image_path}: {ve}")
+        return {}  # Return empty dict on this error
+    except Exception as e:  # Catch other potential errors during EXIF processing
+        print(f"Unexpected error reading EXIF for {image_path}: {e}")
+        return {}
+
+
+def read_png_metadata(image_path):
+    try:
+        img_pil = PILImage.open(image_path)
+        if "user_comment" in img_pil.info:
+            metadata_json_string = img_pil.info["user_comment"]
+            try:
+                img_comment = json.loads(metadata_json_string)
+                if "concept" in img_comment:
+                    img_comment.pop("concept")
+                return img_comment
+            except json.JSONDecodeError:
+                print(f"Warning: Could not decode user_comment JSON from PNG info for {image_path}")
+                return {}
+        else:
+            print(f"Warning: No 'user_comment' found in PNG info for {image_path}")
+            return {}
+    except Exception as e:
+        print(f"Error reading PNG metadata for {image_path}: {e}")
+        return {}
 
 
 # MARK: GROQ PROMPT ENHANCE
 def groq_enhance_process(Prompt=""):
     client = Groq(api_key=GROQ_APIKEY_PROMPTENHANCE)
     Prompt = "random prompt" if Prompt == "" else Prompt
-    SYSTEMPROMPT = os.path.join(RES, "groq_systemmessage_prompt_enhance.json")
-    with open(SYSTEMPROMPT, "r") as f:
-        SYSTEMPROMPT = json.load(f)
-
     completion = client.chat.completions.create(
         model="meta-llama/llama-4-scout-17b-16e-instruct",
-        messages=[SYSTEMPROMPT, {"role": "user", "content": Prompt}],
+        messages=[enhance_systemmessage, {"role": "user", "content": Prompt}],
         temperature=1,
         max_tokens=512,
         top_p=0.9,
@@ -112,17 +140,14 @@ def groq_enhance_process(Prompt=""):
         seed=random.randint(0, MAX_SEED),
         stop=None,
     )
-
     if completion.choices[0].message.content != "":
         enhanced_prompt = completion.choices[0].message.content
         enhanced_prompt = re.sub(r"[\.\"]+", "", enhanced_prompt)
-
     return enhanced_prompt
 
 
 def image_get_size(image_path):
     img = PILImage.open(image_path)
-    # print("Image size:", img.size)
     width, height = img.size
     return width, height
 
@@ -131,54 +156,47 @@ def image_get_size(image_path):
 def image_get_dominant_color(image_path):
     img = PILImage.open(image_path)
     img = img.convert("RGB")
-    img = img.resize((100, 100), resample=0)
+    img = img.resize((100, 100), resample=PILImage.Resampling.NEAREST)  # Use Resampling enum
     pixels = list(img.getdata())
-
-    # Erzeuge eine Liste mit den Häufigkeiten der Farben
     colors = []
     for pixel in pixels:
         r, g, b = pixel
         h, s, v = colorsys.rgb_to_hsv(r / 255, g / 255, b / 255)
-        if v > 0.5:  # Filteriere hellere Farben aus
+        if v > 0.5:
             continue
-        if v > 0.99:  # Filteriere Weiß aus
+        if v > 0.99:
             continue
         colors.append((h, s, v))
-
-    # Ermittle die dominante Farbe
+    if not colors:  # Handle case where all pixels are filtered out
+        return "rgb(0,0,0)"  # Default to black or handle as error
     dominant_color = max(colors, key=lambda x: x[2])
     dominant_color_rgb = colorsys.hsv_to_rgb(dominant_color[0], dominant_color[1], dominant_color[2])
     dominant_color_rgb = [int(c * 255) for c in dominant_color_rgb]
-    dominant_color_rgb = f"rgb({dominant_color_rgb[0]}, {dominant_color_rgb[1]}, {dominant_color_rgb[2]})"
-    # print(dominant_color_rgb)
-
-    return dominant_color_rgb
+    dominant_color_rgb_str = f"rgb({dominant_color_rgb[0]}, {dominant_color_rgb[1]}, {dominant_color_rgb[2]})"
+    return dominant_color_rgb_str
 
 
 # MARK: CLEAR COMPONENTS
 def clear_components():
-    return None
+    return gr.update(value=None, visible=False), gr.update(visible=False)
 
 
-def process(Prompt, used_model, image_width, image_height, image_ratio, image_seed, randomize_seed, gallery):
+def process(Prompt, used_model, image_width, image_height, image_seed, p_randomize_seed, current_gallery_items):
     if Prompt == "":
         gr.Info("Kein Prompt angegeben, es wird ein zufälliger Prompt generiert.", duration=12)
         Prompt = groq_enhance_process("random prompt")
 
-    image_ratio = "9:16" if image_ratio == "" else image_ratio
-    used_seed = random.randint(0, MAX_SEED) if image_seed == 0 or randomize_seed else image_seed
-    used_model = "turbo" if "schnell" in used_model.lower() else "flux"  # turbo, flux
+    used_seed = random.randint(0, MAX_SEED) if image_seed == 0 or p_randomize_seed else image_seed
+    used_model = "turbo" if "schnell" in used_model.lower() else "flux"
 
     timestamp = datetime.now().strftime("%Y-%m-%d-%H-%M-%S")
     filename_prompt = re.sub(r"[^\w\s-]", "", Prompt).strip().replace(" ", "_")
     filename = timestamp + "_" + filename_prompt[:100] + ".png"
-    file_path = IMAGE_DIR + filename
+    absolute_file_path = IMAGE_DIR / filename
+    relative_image_path = f"cache/images/{filename}"
 
-    # Retry-Logik mit requests und Retry
     session = Session()
-    retries = Retry(
-        total=3, status_forcelist=[429, 500, 502, 503, 504], backoff_factor=0.3, respect_retry_after_header=True
-    )  # Max 3 Versuche  # Codes, die wiederholt werden  # Exponential Backoff  # Retry-Header beachten
+    retries = Retry(total=3, status_forcelist=[429, 500, 502, 503, 504], backoff_factor=0.3, respect_retry_after_header=True)
     adapter = HTTPAdapter(max_retries=retries)
     session.mount("https://", adapter)
     session.mount("http://", adapter)
@@ -191,41 +209,67 @@ def process(Prompt, used_model, image_width, image_height, image_ratio, image_se
         response = session.get(REQUEST_URL, timeout=60)
         if response.status_code == 200:
             print("REQUEST URL:\n" + REQUEST_URL + "\n\nImagine API Request solved")
-            img = PILImage.open(BytesIO(response.content))
-            img.save(file_path, "png")
-            print("Save image to: ")
-            print(file_path)
-
-            # img_exif_comment = "" # read_exif(file_path)
-            img_dominant_color = image_get_dominant_color(file_path)
-            img_width, img_height = image_get_size(file_path)
-
-            new_gallery = [i for i in gallery] if gallery else []
-            new_gallery.append(file_path)
-            gallery = new_gallery
+            img_pil = PILImage.open(BytesIO(response.content))
+            img_pil.save(absolute_file_path, "png")
+            print("Save image to: ", absolute_file_path)
+
+            img_dominant_color = image_get_dominant_color(absolute_file_path)
+            img_width_actual, img_height_actual = image_get_size(absolute_file_path)  # Use actual size
+
+            image_metadata = {
+                "prompt": Prompt,
+                "seed": used_seed,
+                "model": used_model,
+                "dominant_color": img_dominant_color,
+                "width": img_width_actual,
+                "height": img_height_actual,
+                "timestamp": timestamp,
+            }
+            metadata_json_string = json.dumps(image_metadata)
+
+            png_info_to_add = PngImagePlugin.PngInfo()
+            png_info_to_add.add_text("user_comment", metadata_json_string)
+
+            try:
+                # Re-save the image, this time embedding the PngInfo metadata
+                img_pil.save(absolute_file_path, "png", pnginfo=png_info_to_add)
+                print(f"Image re-saved with PNG metadata: {absolute_file_path}")
+            except Exception as e:
+                # This error would be if saving with PngInfo fails for some reason
+                print(f"Warning: Could not save PNG with embedded metadata for {absolute_file_path}. Error: {e}")
+                # The file 'absolute_file_path' would still exist from the temporary save, but without our metadata.
+
+            new_gallery_item_state_data = (str(absolute_file_path), Prompt, used_seed)
+            updated_gallery_state_list = [item for item in current_gallery_items] if current_gallery_items else []
+            updated_gallery_state_list.append(new_gallery_item_state_data)
+
+            all_image_filepaths_for_gallery_files = [item[0] for item in updated_gallery_state_list][::-1]
+            gallery_display_list = [(item[0], item[1]) for item in updated_gallery_state_list][::-1]
 
             return (
-                {"value": Prompt, "__type__": "update"},
-                {"value": file_path, "__type__": "update"},
-                {"value": gallery, "selected_index": len(gallery) - 1, "__type__": "update"},
-                {"value": None, "visible": False, "__type__": "update"},
-                {"visible": True, "__type__": "update"},
-                {"value": Prompt, "visible": True, "__type__": "update"},
-                img_width,
-                img_height,
+                updated_gallery_state_list,  # 1 generated_image
+                all_image_filepaths_for_gallery_files,  # 2 gallery_files
+                gr.update(value=gallery_display_list, selected_index=0),  # 3 gallery
+                gr.update(value=Prompt),  # 4 Text Prompt
+                gr.update(value=str(absolute_file_path), visible=False),  # 5 output_image
+                gr.update(value=relative_image_path, visible=True),
+                gr.update(value=Prompt, visible=True),
+                img_width_actual,  # Use actual width
+                img_height_actual,  # Use actual height
                 used_seed,
-                {"value": file_path, "visible": True, "__type__": "update"},
+                gr.update(value=str(absolute_file_path), visible=True),
                 img_dominant_color,
                 used_seed,
+                gr.update(visible=True),
             )
         else:
-            print("Imagine API Request ERROR")
-            raise gr.Error("Imagine API-Aufruf fehlgeschlagen 💥!", duration=15)
+            print(f"Imagine API Request ERROR, Status: {response.status_code}, Response: {response.text}")
+            raise gr.Error(f"Imagine API-Aufruf fehlgeschlagen (Code: {response.status_code}) 💥!", duration=15)
     except requests.exceptions.Timeout:
         raise gr.Error("⏰ Zeitüberschreitung beim API-Aufruf", duration=15)
     except requests.exceptions.RequestException as e:
         print(f"Unbekannter Fehler beim API-Aufruf: {e}")
-        raise gr.Error("Unbekannter Fehler beim API-Aufruf! 🤷‍♂️", duration=15)
+        raise gr.Error(f"Unbekannter Fehler beim API-Aufruf! 🤷‍♂️ {e}", duration=15)
 
 
 def check_api(url):
@@ -235,25 +279,22 @@ def check_api(url):
         return response.status_code
     except requests.exceptions.RequestException as e:
         print(f"An error occurred: {e}")
-        return int(999)
+        return 999
 
 
 def get_inference_models():
-
     status_api_1 = check_api(API1)
-
     info_api_1 = "🟢API1👍" if status_api_1 == 200 else "🔴API1👎🔌"
-
     api_models_1 = ["FLUX Dev", "Flux Schnell (Low-Res)"]
-
     models = [model for model in api_models_1 if status_api_1 == 200]
     info_api_status = f"Status: {info_api_1}"
-
-    return gr.update(choices=models, value=models[0], interactive=True, info=info_api_status)
+    default_model = models[0] if models else None
+    return gr.update(choices=models, value=default_model, interactive=bool(models), info=info_api_status)
 
 
-# MARK: Gradio BLOCKS UI
-with gr.Blocks(theme=theme, head=custom_head, css=custom_css, js=custom_js, title=title) as demo:
+# MARK: Gradio BLOCKS UI css=custom_css
+with gr.Blocks(js=custom_js, head=custom_head, title=title, theme=theme) as demo:
+    # ... (Your existing UI header markdown) ...
     with gr.Row(elem_classes="row-header"):
         gr.Markdown(
             f"""
@@ -279,207 +320,272 @@ with gr.Blocks(theme=theme, head=custom_head, css=custom_css, js=custom_js, titl
             elem_classes="md-header",
         )
 
-    with gr.Tab("Bilder Builder"):
-        with gr.Row():
-            with gr.Column(elem_classes="spacesNavi"):
-                spacesNaviHTML = gr.HTML("""
-                    <a style="--link-bg-color: var(--primary-500);" href="#"></a>
-                    <a style="--link-bg-color: var(--cat-sky);" href="#"></a>
-                    <a style="--link-bg-color: var(--cat-teal);" href="#"></a>
-                    <a style="--link-bg-color: rgb(94, 12, 21);" href="#"></a>
-                
-                """)
-                
-            with gr.Column(scale=2):  # min_width=420,
-                with gr.Row():
-                    placeholder_text = "[???] Generiert dir einen zufälligen Prompt.\n[STERN] optimiert deinen eignen Prompt.\n[RUN] generiert dein Bild."
-                    text_prompt = gr.Textbox(
-                        label="Prompt",
-                        show_label=False,
-                        lines=12,
-                        max_lines=18,
-                        placeholder=placeholder_text,
-                        elem_id="prompt_input",
-                        elem_classes="prompt-input hide-progress",
-                        autofocus=True,
-                    )
-                with gr.Row():
-                    random_prompt_button = gr.Button("", variant="secondary", elem_id="random_prompt_btn", elem_classes="random-prompt-btn", icon="_res/assets/star_light_48.png")
-                    enhance_prompt_button = gr.Button(
-                        "", variant="secondary", elem_id="enhance_prompt_btn", elem_classes="enhance-prompt-btn", icon="_res/assets/star_light_48.png"
-                    )
-                    run_button = gr.Button("Erstellen", variant="primary", elem_id="run_btn", elem_classes="run-btn", interactive=False)
-                with gr.Row(elem_classes="image_size_selctor_wrapper"):
-                    with gr.Column(scale=1):
-                        with gr.Row():
-                            with gr.Column():
-                                # inference_models, selected_model = get_inference_models()
-                                #  select_model = gr.Dropdown(choices=inference_models, value=selected_model, label="Model", elem_id="select_model", elem_classes="select-model")
-                                select_model = gr.Dropdown(label="Model", elem_id="select_model", elem_classes="select-model")
-                                # with gr.Row():
-                                image_width = gr.Number(
-                                    label="Breite",
-                                    minimum=256,
-                                    maximum=MAX_IMAGE_SIZE,
-                                    value=576,
-                                    step=32,
-                                    elem_id="image_width_selector",
-                                    elem_classes="image-width-selector",
-                                    scale=1,
-                                    visible=False,
-                                )
-                                image_height = gr.Number(
-                                    label="Höhe",
-                                    minimum=256,
-                                    maximum=MAX_IMAGE_SIZE,
-                                    value=1024,
-                                    step=32,
-                                    elem_id="image_height_selector",
-                                    elem_classes="image-height-selector",
-                                    scale=1,
-                                    visible=False,
-                                )
-                        with gr.Row():
-                            image_ratio_buttons = gr.Radio(
-                                ["9:16", "3:4", "2:3", "1:1"],
-                                value="9:16",
-                                label="Hochformat",
-                                show_label=True,
-                                info="Seitenverhältniss drehen",
-                                interactive=True,
-                                elem_id="image_ratio_buttons",
-                                elem_classes="image-ratio-buttons",
-                                container=True,
-                                scale=2,
-                            )
-                            switch_width_height = gr.Button("", size="sm", elem_id="switch_width_height", elem_classes="switch-ratio-btn", variant="primary", scale=1)
+    with gr.Row(elem_classes="row-main"):
+        with gr.Column(scale=2):
+            generated_images = gr.State([])
+            # generated_images_count = gr.State(0) # This state was unused
+            with gr.Row():
+                placeholder_text = "[???] Generiert dir einen zufälligen Prompt.\n[STERN] optimiert deinen eignen Prompt.\n[RUN] generiert dein Bild."
+                text_prompt = gr.Textbox(
+                    label="Prompt",
+                    show_label=False,
+                    lines=12,
+                    max_lines=18,
+                    placeholder=placeholder_text,
+                    elem_id="prompt_input",
+                    elem_classes="prompt-input hide-progress",
+                    autofocus=True,
+                )
+            with gr.Row():
+                random_prompt_button = gr.Button("", variant="secondary", elem_id="random_prompt_btn", elem_classes="random-prompt-btn", icon=str(ASSETS / "random.png"))
+                enhance_prompt_button = gr.Button("", variant="secondary", elem_id="enhance_prompt_btn", elem_classes="enhance-prompt-btn", icon=str(ASSETS / "star_light_48.png"))
+                run_button = gr.Button("Erstellen", variant="primary", elem_id="run_btn", elem_classes="run-btn", interactive=False)
+            with gr.Row(elem_classes="image_size_selctor_wrapper"):
+                with gr.Column(scale=1):
+                    with gr.Row():
                         with gr.Column():
-                            randomize_seed = gr.Checkbox(label="Randomize seed", value=True, elem_classes="random-seed-cb toggle-btn")
-                            image_seed = gr.Slider(
-                                label="Seed",
-                                info="Jeder Seed generiert ein anderes Bild mit dem selben Prompt",
-                                minimum=0,
-                                step=1,
-                                value=42,
-                                maximum=MAX_SEED,
-                                elem_id="image_seed",
-                                elem_classes="image-seed hide-progress",
-                                interactive=False,
+                            select_model = gr.Dropdown(label="Model", elem_id="select_model", elem_classes="select-model")
+                            image_width = gr.Number(
+                                label="Breite",
+                                minimum=256,
+                                maximum=MAX_IMAGE_SIZE,
+                                value=576,
+                                step=32,
+                                elem_id="image_width_selector",
+                                elem_classes="image-width-selector",
+                                scale=1,
+                                visible=False,
                             )
-
-            with gr.Column(scale=4):  # min_width=600,
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        with gr.Row():
-                            with gr.Column():
-                                output_image = gr.Image(
-                                    show_label=False, min_width=320, elem_id="output_image", elem_classes="output-image", type="filepath", format="webp", visible=False
-                                )
-                                gallery = gr.Gallery(
-                                    label="Bisher erstellte Bilder",
-                                    show_label=True,
-                                    elem_id="gallery",
-                                    columns=[4],
-                                    object_fit="cover",
-                                    height="auto",
-                                    interactive=False,
-                                    type="filepath",
-                                    format="webp",
-                                )
-                            with gr.Column(scale=1, visible=False, elem_classes="image-info-wrapper") as image_info_wrapper:
-                                with gr.Group():
-                                    image_informations = gr.Markdown("""## Bildinformationen""", visible=True)
-                                with gr.Row(elem_classes="img-size-wrapper"):
-                                    image_info_tb_width = gr.Textbox(
-                                        label="Breite", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-width"
-                                    )
-                                    image_info_tb_height = gr.Textbox(
-                                        label="Höhe", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-height"
-                                    )
-                                with gr.Row(elem_classes="img-seed-wrapper"):
-                                    image_info_tb_seed = gr.Textbox(label="Seed", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-seed")
-                                    image_info_tb_prompt = gr.Textbox(
-                                        "Bild Prompt", lines=4, max_lines=8, interactive=False, elem_classes="hide-progress", show_copy_button=True, visible=False
-                                    )
-                                image_download_button = gr.DownloadButton("Bild herunterladen", value=None, elem_classes="download-button", variant="primary", visible=False)
-
-                output_url = gr.Textbox(label="Output URL", show_label=True, interactive=False, visible=False)
-                outpu_image_comment = gr.Json(visible=False)
-                output_dominant_image_color = gr.Textbox(show_label=False, elem_id="dominant_image_color", visible=True, elem_classes="output-dominant-image-color")
-
+                            image_height = gr.Number(
+                                label="Höhe",
+                                minimum=256,
+                                maximum=MAX_IMAGE_SIZE,
+                                value=1024,
+                                step=32,
+                                elem_id="image_height_selector",
+                                elem_classes="image-height-selector",
+                                scale=1,
+                                visible=False,
+                            )
+                    with gr.Row():
+                        image_ratio_buttons = gr.Radio(
+                            ["9:16", "3:4", "2:3", "1:1"],
+                            value="9:16",
+                            label="Hochformat",
+                            show_label=True,
+                            info="Seitenverhältniss drehen",
+                            interactive=True,
+                            elem_id="image_ratio_buttons",
+                            elem_classes="image-ratio-buttons",
+                            container=True,
+                            scale=2,
+                        )
+                        switch_width_height = gr.Button("", size="sm", elem_id="switch_width_height", elem_classes="switch-ratio-btn", variant="primary", scale=1)
+                    with gr.Column():
+                        randomize_seed = gr.Checkbox(label="Randomize seed", value=True, elem_classes="random-seed-cb toggle-btn")
+                        image_seed = gr.Slider(
+                            label="Seed",
+                            info="Jeder Seed generiert ein anderes Bild mit dem selben Prompt",
+                            minimum=0,
+                            step=1,
+                            value=42,
+                            maximum=MAX_SEED,
+                            elem_id="image_seed",
+                            elem_classes="image-seed hide-progress",
+                            interactive=False,
+                        )
+
+        with gr.Column(scale=4):
+            with gr.Row():
+                with gr.Column(scale=3):  # Changed scale for better layout with info panel
+                    with gr.Row():
+                        output_image = gr.Image(
+                            show_label=False, min_width=320, elem_id="output_image", elem_classes="output-image", type="filepath", format="webp", visible=False
+                        )  # format="png" might be better if webp causes issues with EXIF
+
+                        gallery = gr.Gallery(
+                            label="Bisher erstellte Bilder",
+                            show_label=False,
+                            format="png",
+                            elem_id="gallery",
+                            columns=[4],
+                            rows=[4],
+                            object_fit="contain",
+                            height="auto",
+                            type="filepath",
+                            preview=True,
+                            allow_preview=True,
+                        )
+
+                    with gr.Row():
+                        gallery_files = gr.Files(visible=False, elem_id="gallery_files", elem_classes="gallery-files", interactive=False, label="Generierte Bilddateien")
+
+                with gr.Column(scale=1, visible=False, elem_classes="image-info-wrapper") as image_info_wrapper:
+                    with gr.Accordion("Bild Informationen", open=False):
+                        # with gr.Group():
+                        #     gr.Markdown(f"""## Bildinformationen""")  # Removed visible=False as parent controls it
+                        image_info_tb_prompt = gr.Textbox(label="Bild Prompt", lines=18, interactive=False, elem_classes="hide-progress", show_copy_button=True, visible=True)
+                        with gr.Row(elem_classes="img-size-wrapper"):
+                            image_info_tb_width = gr.Textbox(label="Breite", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-width")
+                            image_info_tb_height = gr.Textbox(label="Höhe", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-height")
+                        with gr.Row(elem_classes="img-seed-wrapper"):
+                            image_info_tb_seed = gr.Textbox(label="Seed", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-seed")
+                        # Made visible as parent controls wrapper
+                        image_download_button = gr.DownloadButton("Bild herunterladen", value=None, elem_classes="download-button", variant="primary", visible=True)  # Made visible
+
+            output_url = gr.Textbox(label="Output URL", show_label=True, interactive=False, visible=False)
+            # outpu_image_comment = gr.Json(visible=False) # This was unused
+            output_dominant_image_color = gr.Textbox(show_label=False, elem_id="dominant_image_color", visible=True, elem_classes="output-dominant-image-color")
+
+        # MARK: Functionen after
         demo.load(
-            lambda x: ({"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}),
+            lambda: (gr.update(interactive=False), gr.update(interactive=False), gr.update(interactive=False)),
             outputs=[run_button, enhance_prompt_button, random_prompt_button],
         ).then(get_inference_models, outputs=[select_model]).then(
-            lambda x: ({"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}),
+            lambda: (gr.update(interactive=True), gr.update(interactive=True), gr.update(interactive=True)),
             outputs=[run_button, enhance_prompt_button, random_prompt_button],
         )
 
-        def switch_image_size_values(image_width, image_height):
-            return image_height, image_width
-
-        def switch_image_ratio_buttons(ratio_value):
-            ratio_value = ratio_value.split(":")
-            ratio_value_new = f"{int(ratio_value[1])}:{int(ratio_value[0])}"
-
-            if int(ratio_value[1]) > int(ratio_value[0]):
-                # Querformat
-                new_choises = ["16:9", "4:3", "3:2", "1:1"]
-                new_label = "Querformat"
-            elif int(ratio_value[1]) < int(ratio_value[0]):
-                # Hochformat
-                new_choises = ["9:16", "3:4", "2:3", "1:1"]
-                new_label = "Hochformat"
-            elif int(ratio_value[1]) == int(ratio_value[0]):
-                new_choises = image_ratio_buttons.choices
-                new_label = "Quadratisch"
-
-            return {"choices": new_choises, "value": ratio_value_new, "label": new_label, "__type__": "update"}
-
-        def calculate_ratio_values(image_ratio_buttons):
-            ratio_value = image_ratio_buttons.split(":")
-            if int(ratio_value[0]) > int(ratio_value[1]):
-                a = 1024
-                b = int(a * int(ratio_value[1]) / int(ratio_value[0]))
-                b = round(b / 8) * 8
-                new_width = a
-                new_height = b
-                new_label = "Querformat"
-            elif int(ratio_value[0]) < int(ratio_value[1]):
-                b = 1024
-                a = int(b * int(ratio_value[0]) / int(ratio_value[1]))
-                a = round(a / 8) * 8
-                new_width = a
-                new_height = b
-                new_label = "Hochformat"
-            elif int(ratio_value[0]) == int(ratio_value[1]):
-                new_width = 1024
-                new_height = 1024
-                new_label = "Quadratisch"
-
-            return {"label": new_label, "__type__": "update"}, new_width, new_height
-
-        switch_width_height.click(fn=switch_image_size_values, inputs=[image_width, image_height], outputs=[image_width, image_height], show_progress="hidden", show_api=False)
-        switch_width_height.click(fn=switch_image_ratio_buttons, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons], show_progress="hidden", show_api=False)
+        def gallery_select_handler(evt: gr.SelectData, gallery_files):
+            # For debugging, to understand what evt.value is:
+            # print(f"DEBUG: gallery_select_handler called. evt: {evt}")
+            # print(f"DEBUG: evt.value: {evt.value}, type(evt.value): {type(evt.value)}")
+            # print(f"DEBUG: evt.index: {evt.index}, evt.selected: {evt.selected}")
+
+            selected_absolute_path = None
+            # Safely try to get the filepath from evt.value
+            # evt.value is expected to be a tuple: (filepath, caption)
+            if isinstance(gallery_files[evt.index], str) and gallery_files[evt.index]:
+                selected_absolute_path = gallery_files[evt.index]
+
+            # If no valid path was extracted, or if evt.value was not as expected (e.g. None, empty dict, etc.)
+            if not selected_absolute_path:
+                gr.Info("Kein Bild aus der Galerie ausgewählt, Pfad ist leer oder ungültiger Wert.")
+                return (
+                    gr.update(value=None, visible=False),  # 1. output_image
+                    gr.update(value="", visible=False),  # 2. output_url
+                    gr.update(value="", visible=True),  # 3. image_info_tb_prompt (clear value)
+                    "",  # 4. image_info_tb_width
+                    "",  # 5. image_info_tb_height
+                    "",  # 6. image_info_tb_seed
+                    gr.update(value=None, visible=False),  # 7. image_download_button
+                    gr.update(visible=False),  # 8. image_info_wrapper (hide the whole section)
+                )
+
+            # print(f"Gallery selected image path: {selected_absolute_path}") # Keep for your debugging
+
+            if not os.path.exists(selected_absolute_path):
+                gr.Warning(f"Ausgewählte Bilddatei nicht gefunden: {selected_absolute_path}")
+                return (
+                    gr.update(value=None, visible=False),
+                    gr.update(value="", visible=False),
+                    gr.update(value="Datei nicht gefunden", visible=True),
+                    "N/A",
+                    "N/A",
+                    "N/A",
+                    gr.update(value=None, visible=False),
+                    gr.update(visible=True),  # Show wrapper with error
+                )
+
+            relative_path_for_url_tb = "cache/images/" + Path(selected_absolute_path).name
+
+            try:
+                exif_data = read_png_metadata(selected_absolute_path)
+
+                selected_prompt = exif_data.get("prompt", "N/A (EXIF Fehler)")
+                img_width = exif_data.get("width", "N/A")
+                img_height = exif_data.get("height", "N/A")
+                selected_seed = exif_data.get("seed", "N/A")
+
+                return (
+                    gr.update(value=selected_absolute_path, visible=False),
+                    gr.update(value=relative_path_for_url_tb, visible=False),  # output_url can be visible
+                    gr.update(value=selected_prompt, visible=True),
+                    str(img_width),
+                    str(img_height),
+                    str(selected_seed),
+                    gr.update(value=selected_absolute_path, visible=True),
+                    gr.update(visible=True),
+                )
+            except Exception as e:  # Catch any other unexpected error during this block
+                print(f"Error in gallery_select_handler after path validation: {e}")
+                gr.Warning(f"Fehler beim Verarbeiten der Bilddetails: {e}")
+                # Fallback if try block fails
+                return (
+                    gr.update(value=selected_absolute_path, visible=False),  # Still show image if path is valid
+                    gr.update(value=relative_path_for_url_tb, visible=True),
+                    gr.update(value="Fehler beim Lesen der Details", visible=True),
+                    "Fehler",
+                    "Fehler",
+                    "Fehler",
+                    gr.update(value=selected_absolute_path, visible=True),  # Download button for the image
+                    gr.update(visible=True),  # Show info wrapper
+                )
+
+        gallery.select(
+            fn=gallery_select_handler,
+            inputs=[gallery_files],  # evt is passed automatically by gr.SelectData
+            # outputs=[debug_text],
+            outputs=[
+                output_image,
+                output_url,
+                image_info_tb_prompt,
+                image_info_tb_width,
+                image_info_tb_height,
+                image_info_tb_seed,
+                image_download_button,
+                output_dominant_image_color,  # Add if you want to update this too
+            ],
+            show_progress="hidden",
+        )
 
+        # gallery_files.change(fn=lambda state_data: [item[0] for item in state_data], inputs=[gallery_files], outputs=[gallery_files], show_progress="hidden", api_name=False)
+
+        def switch_image_size_values(w, h):
+            return h, w
+
+        def switch_image_ratio_buttons(ratio_val):
+            parts = ratio_val.split(":")
+            new_ratio = f"{parts[1]}:{parts[0]}"
+            is_landscape = int(parts[1]) > int(parts[0])
+            is_portrait = int(parts[1]) < int(parts[0])
+            choices = ["16:9", "4:3", "3:2", "1:1"] if is_landscape else ["9:16", "3:4", "2:3", "1:1"]
+            label = "Querformat" if is_landscape else "Hochformat" if is_portrait else "Quadratisch"
+            return gr.update(choices=choices, value=new_ratio, label=label)
+
+        def calculate_ratio_values(ratio_str):
+            w_s, h_s = map(int, ratio_str.split(":"))
+            base_dim = 1024
+            if w_s > h_s:  # Landscape or square
+                new_w = base_dim
+                new_h = round(base_dim * h_s / w_s / 8) * 8
+            else:  # Portrait
+                new_h = base_dim
+                new_w = round(base_dim * w_s / h_s / 8) * 8
+            label = "Querformat" if w_s > h_s else "Hochformat" if w_s < h_s else "Quadratisch"
+            return gr.update(label=label), new_w, new_h
+
+        switch_width_height.click(fn=switch_image_size_values, inputs=[image_width, image_height], outputs=[image_width, image_height], show_progress="hidden", api_name=False)
+        switch_width_height.click(fn=switch_image_ratio_buttons, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons], show_progress="hidden", api_name=False)
         image_ratio_buttons.input(
-            fn=calculate_ratio_values, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons, image_width, image_height], show_progress="hidden", show_api=False
+            fn=calculate_ratio_values, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons, image_width, image_height], show_progress="hidden", api_name=False
         )
 
         run_button.click(
-            fn=lambda: ({"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}),
+            fn=lambda: (gr.update(interactive=False), gr.update(interactive=False), gr.update(interactive=False)),
             outputs=[run_button, enhance_prompt_button, random_prompt_button],
-            show_api=False,
-            js="() => document.querySelector('dotlottie-player').play()",
-        ).then(fn=clear_components, outputs=[output_image], show_api=False).then(
+            api_name=False,
+            js="() => { const player = document.querySelector('dotlottie-player'); if (player) player.play(); }",
+        ).then(
             fn=process,
-            inputs=[text_prompt, select_model, image_width, image_height, image_ratio_buttons, image_seed, randomize_seed, gallery],
+            inputs=[text_prompt, select_model, image_width, image_height, image_seed, randomize_seed, generated_images],
             outputs=[
-                text_prompt,
-                output_image,
-                gallery,
+                generated_images,  # 1 generated_image
+                gallery_files,  # 2 gallery_files
+                gallery,  # 3 gallery
+                text_prompt,  # 4 Text Prompt
+                output_image,  # 5 output_image
                 output_url,
-                image_informations,
                 image_info_tb_prompt,
                 image_info_tb_width,
                 image_info_tb_height,
@@ -487,18 +593,21 @@ with gr.Blocks(theme=theme, head=custom_head, css=custom_css, js=custom_js, titl
                 image_download_button,
                 output_dominant_image_color,
                 image_seed,
+                image_info_wrapper,
             ],
+            show_progress="hidden",
         ).then(
-            fn=lambda: ({"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}),
+            fn=lambda: (gr.update(interactive=True), gr.update(interactive=True), gr.update(interactive=True)),
             outputs=[run_button, enhance_prompt_button, random_prompt_button],
-            show_api=False,
-            js="() => document.querySelector('dotlottie-player').stop()",
+            api_name=False,
+            js="() => { const player = document.querySelector('dotlottie-player'); if (player) player.stop(); }",
         )
 
-        randomize_seed.input(lambda x: {"interactive": False if x == True else True, "__type__": "update"}, inputs=[randomize_seed], outputs=[image_seed], show_api=False)
+        generated_images.change(fn=lambda state_data: [item[0] for item in state_data] if state_data else [], inputs=[generated_images], outputs=[gallery_files], api_name=False)
 
-        enhance_prompt_button.click(fn=groq_enhance_process, inputs=[text_prompt], outputs=[text_prompt], show_api=False)
-        random_prompt_button.click(fn=groq_enhance_process, inputs=None, outputs=[text_prompt], show_api=False)
+        randomize_seed.input(lambda x: gr.update(interactive=not x), inputs=[randomize_seed], outputs=[image_seed], api_name=False)
+        enhance_prompt_button.click(fn=groq_enhance_process, inputs=[text_prompt], outputs=[text_prompt], api_name=False)
+        random_prompt_button.click(fn=groq_enhance_process, inputs=None, outputs=[text_prompt], api_name=False)
 
 # MARK: Gradio LAUNCH
-demo.launch(show_api=False)
+demo.launch(show_api=False, debug=True)

requirements.txt

@@ -1,65 +1,7 @@
-aiofiles==23.2.1
-annotated-types==0.7.0
-anyio==4.8.0
-certifi==2024.12.14
-charset-normalizer==3.4.1
-click==8.1.8
-colorama==0.4.6
-contourpy==1.3.1
-cycler==0.12.1
-distro==1.9.0
-exif==1.6.1
-fastapi==0.115.6
-ffmpy==0.5.0
-filelock==3.16.1
-fonttools==4.55.3
-fsspec==2024.12.0
-gradio==4.44.1
-gradio_client==1.3.0
-groq==0.15.0
-h11==0.14.0
-httpcore==1.0.7
-httpx==0.28.1
-huggingface-hub==0.27.1
-idna==3.10
-importlib_resources==6.5.2
-Jinja2==3.1.5
-kiwisolver==1.4.8
-markdown-it-py==3.0.0
-MarkupSafe==2.1.5
-matplotlib==3.10.0
-mdurl==0.1.2
-numpy==2.2.1
-orjson==3.10.14
-packaging==24.2
-pandas==2.2.3
-pillow==10.4.0
-plum-py==0.8.7
-psutil==5.9.8
-pydantic==2.10.5
-pydantic_core==2.27.2
-pydub==0.25.1
-Pygments==2.19.1
-pyparsing==3.2.1
-python-dateutil==2.9.0.post0
-python-dotenv==1.0.1
-python-multipart==0.0.20
-pytz==2024.2
-PyYAML==6.0.2
-requests==2.32.3
-rich==13.9.4
-ruff==0.9.1
-semantic-version==2.10.0
-shellingham==1.5.4
-six==1.17.0
-sniffio==1.3.1
-spaces==0.32.0
-starlette==0.41.3
-tomlkit==0.12.0
-tqdm==4.67.1
-typer==0.15.1
-typing_extensions==4.12.2
-tzdata==2024.2
-urllib3==2.3.0
-uvicorn==0.34.0
-websockets==12.0
+gradio
+numpy
+groq
+exif
+spaces
+huggingface-hub
+python-dotenv