translate UI to german, infotext, styling

modules/html.py

@@ -74,7 +74,9 @@ progress::after {
 }
 
 .generate_button {
-  min-height: 80px !important;
+  min-height: 166px !important;
+  white-space: pre-line !important;
+  font-size: 1.33em !important;
 }
 
 .stylebox label span {
@@ -92,6 +94,19 @@ progress::after {
   box-shadow: none !important;
 }
 
+#prompt_examples > .label {
+  display: none;
+}
+
+.input-label h5 {
+  margin: 0 0 -10px 0 !important;
+}
+
+.icon-buttons > a > button > div, .icon-buttons > button > div  {
+  width: 2em;
+  height: 2em;
+}
+
 '''
 progress_html = '''
 <div class="loader-container" style="visibility:*visibility*;max-width:1280px;">

modules/sdxl_styles.py

@@ -2,7 +2,7 @@
 
 styles = [
     {
-        "name": "Cinematic",
+        "name": "Kinofilm",
         "prompt": "(((christmas card))), cinematic still {prompt} . emotional, harmonious, vignette, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy",
         "negative_prompt": "anime, cartoon, graphic, text, painting, crayon, graphite, abstract, glitch, deformed, mutated, ugly, disfigured"
     },
@@ -12,17 +12,17 @@ styles = [
         "negative_prompt": "photo, deformed, black and white, realism, disfigured, low contrast"
     },
     {
-        "name": "Clay",
+        "name": "Ton",
         "prompt": "(((christmas card))), play-doh style {prompt} . sculpture, clay art, centered composition, Claymation",
         "negative_prompt": "sloppy, messy, grainy, highly detailed, ultra textured, photo"
     },
     {
-        "name": "Line art",
+        "name": "Linienkunst",
         "prompt": "(((christmas card))), line art drawing {prompt} . professional, sleek, modern, minimalist, graphic, line art, vector graphics",
         "negative_prompt": "anime, photorealistic, 35mm film, deformed, glitch, blurry, noisy, off-center, deformed, cross-eyed, closed eyes, bad anatomy, ugly, disfigured, mutated, realism, realistic, impressionism, expressionism, oil, acrylic"
     },
     {
-        "name": "Low poly",
+        "name": "Low Poly",
         "prompt": "(((christmas card))), low-poly style {prompt} . low-poly game art, polygon mesh, jagged, blocky, wireframe edges, centered composition",
         "negative_prompt": "noisy, sloppy, messy, grainy, highly detailed, ultra textured, photo"
     },
@@ -32,27 +32,27 @@ styles = [
         "negative_prompt": "noisy, sloppy, messy, grainy, highly detailed, ultra textured, photo"
     },
     {
-        "name": "Poster",
+        "name": "Plakat",
         "prompt": "(((christmas card))), Advertising poster style {prompt} . Professional, modern, product-focused, commercial, eye-catching, highly detailed",
         "negative_prompt": "noisy, blurry, amateurish, sloppy, unattractive"
     },
     {
-        "name": "Car",
+        "name": "Fahrzeug/Auto",
         "prompt": "(((christmas card))), Automotive advertisement style {prompt} . Sleek, dynamic, professional, commercial, vehicle-focused, high-resolution, highly detailed",
         "negative_prompt": "noisy, blurry, unattractive, sloppy, unprofessional"
     },
     {
-        "name": "Fashion",
+        "name": "Mode",
         "prompt": "(((christmas card))), Fashion editorial style {prompt} . High fashion, trendy, stylish, editorial, magazine style, professional, highly detailed",
         "negative_prompt": "outdated, blurry, noisy, unattractive, sloppy"
     },
     {
-        "name": "Pixel art",
+        "name": "Pixelkunst",
         "prompt": "(((christmas card))), pixel-art {prompt} . low-res, blocky, pixel art style, 8-bit graphics",
         "negative_prompt": "sloppy, messy, blurry, noisy, highly detailed, ultra textured, photo, realistic"
     },
     {
-        "name": "Abstract",
+        "name": "Abstrakt",
         "prompt": "(((christmas card))), abstract expressionist painting {prompt} . energetic brushwork, bold colors, abstract forms, expressive, emotional",
         "negative_prompt": "realistic, photorealistic, low contrast, plain, simple, monochrome"
     },
@@ -62,7 +62,7 @@ styles = [
         "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic"
     },
     {
-        "name": "Psychedelic",
+        "name": "Psychedelisch",
         "prompt": "(((christmas card))), psychedelic style {prompt} . vibrant colors, swirling patterns, abstract forms, surreal, trippy",
         "negative_prompt": "monochrome, black and white, low contrast, realistic, photorealistic, plain, simple"
     },
@@ -72,17 +72,17 @@ styles = [
         "negative_prompt": "deformed, glitch, noisy, low contrast, anime, photorealistic"
     },
     {
-        "name": "Watercolor",
+        "name": "Aquarell",
         "prompt": "(((christmas card))), watercolor painting {prompt} . vibrant, beautiful, painterly, detailed, textural, artistic",
         "negative_prompt": "anime, photorealistic, 35mm film, deformed, glitch, low contrast, noisy"
     },
     {
-        "name": "Cyberpunk city",
+        "name": "Cyberpunk-Stadt",
         "prompt": "(((christmas card))), cyberpunk cityscape {prompt} . neon lights, dark alleys, skyscrapers, futuristic, vibrant colors, high contrast, highly detailed",
         "negative_prompt": "natural, rural, deformed, low contrast, black and white, sketch, watercolor"
     },
     {
-        "name": "Cyberpunk game",
+        "name": "Cyberpunk-Spiel",
         "prompt": "(((christmas card))), cyberpunk game style {prompt} . neon, dystopian, futuristic, digital, vibrant, detailed, high contrast, reminiscent of cyberpunk genre video games",
         "negative_prompt": "historical, natural, rustic, low detailed"
     },
@@ -97,47 +97,47 @@ styles = [
         "negative_prompt": "smooth, realistic, detailed, photorealistic, noise, blurry, deformed"
     },
     {
-        "name": "Strategy game",
+        "name": "Strategiespiel",
         "prompt": "(((christmas card))), strategy game style {prompt} . overhead view, detailed map, units, reminiscent of real-time strategy video games",
         "negative_prompt": "first-person view, modern, photorealistic"
     },
     {
-        "name": "Dystopian",
+        "name": "Dystopisch",
         "prompt": "(((christmas card))), dystopian style {prompt} . bleak, post-apocalyptic, somber, dramatic, highly detailed",
         "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, cheerful, optimistic, vibrant, colorful"
     },
     {
-        "name": "Fairy tale",
+        "name": "Märchen",
         "prompt": "(((christmas card))), fairy tale {prompt} . magical, fantastical, enchanting, storybook style, highly detailed",
         "negative_prompt": "realistic, modern, ordinary, mundane"
     },
     {
-        "name": "Gothic",
+        "name": "Gotisch",
         "prompt": "(((christmas card))), gothic style {prompt} . dark, mysterious, haunting, dramatic, ornate, detailed",
         "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, cheerful, optimistic"
     },
     {
-        "name": "Metropolis",
+        "name": "Metropole",
         "prompt": "(((christmas card))), metropolis-themed {prompt} . urban, cityscape, skyscrapers, modern, futuristic, highly detailed",
         "negative_prompt": "rural, natural, rustic, historical, simple"
     },
     {
-        "name": "Monochrome",
+        "name": "Monochrom",
         "prompt": "(((christmas card))), monochrome {prompt} . black and white, contrast, tone, texture, detailed",
         "negative_prompt": "colorful, vibrant, noisy, blurry, deformed"
     },
     {
-        "name": "Space",
+        "name": "Weltraum",
         "prompt": "(((christmas card))), space-themed {prompt} . cosmic, celestial, stars, galaxies, nebulas, planets, science fiction, highly detailed",
         "negative_prompt": "earthly, mundane, ground-based, realism"
     },
     {
-        "name": "Stained glass",
+        "name": "Buntglas",
         "prompt": "(((christmas card))), stained glass style {prompt} . vibrant, beautiful, translucent, intricate, detailed",
         "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic"
     },
     {
-        "name": "Tribal",
+        "name": "Stammeskunst",
         "prompt": "(((christmas card))), tribal style {prompt} . indigenous, ethnic, traditional patterns, bold, natural colors, highly detailed",
         "negative_prompt": "modern, futuristic, minimalist, pastel"
     },
@@ -152,40 +152,39 @@ styles = [
         "negative_prompt": "painting, drawing, 2D, noisy, blurry, deformed"
     },
     {
-        "name": "Paper mache",
+        "name": "Papiermaché",
         "prompt": "(((christmas card))), paper mache representation of {prompt} . 3D, sculptural, textured, handmade, vibrant, fun",
         "negative_prompt": "2D, flat, photo, sketch, digital art, deformed, noisy, blurry"
     },
     {
-        "name": "Paper quilling",
+        "name": "Papierkräuseln",
         "prompt": "(((christmas card))), paper quilling art of {prompt} . intricate, delicate, curling, rolling, shaping, coiling, loops, 3D, dimensional, ornamental",
         "negative_prompt": "photo, painting, drawing, 2D, flat, deformed, noisy, blurry"
     },
-
     {
-        "name": "Papercut shadow box",
+        "name": "Scherenschnitt-Schattenbox",
         "prompt": "(((christmas card))), 3D papercut shadow box of {prompt} . layered, dimensional, depth, silhouette, shadow, papercut, handmade, high contrast",
         "negative_prompt": "painting, drawing, photo, 2D, flat, high detail, blurry, noisy, disfigured"
     },
     {
-        "name": "Stacked papercut",
+        "name": "Gestapelte Scherenschnitte",
         "prompt": "(((christmas card))), stacked papercut art of {prompt} . 3D, layered, dimensional, depth, precision cut, stacked layers, papercut, high contrast",
         "negative_prompt": "2D, flat, noisy, blurry, painting, drawing, photo, deformed"
     },
     {
-        "name": "Film noir",
+        "name": "Film Noir",
         "prompt": "(((christmas card))), film noir style {prompt} . monochrome, high contrast, dramatic shadows, 1940s style, mysterious, cinematic",
         "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, vibrant, colorful"
     },
     {
-        "name": "Neon noir",
+        "name": "Neon Noir",
         "prompt": "(((christmas card))), neon noir {prompt} . cyberpunk, dark, rainy streets, neon signs, high contrast, low light, vibrant, highly detailed",
         "negative_prompt": "bright, sunny, daytime, low contrast, black and white, sketch, watercolor"
     }
 ]
 
 styles = {k['name']: (k['prompt'], k['negative_prompt']) for k in styles}
-default_style = styles['Cinematic']
+default_style = styles['Kinofilm']
 style_keys = list(styles.keys())
 
 

webui.py

@@ -1,4 +1,5 @@
 import gradio as gr
+from gradio.themes.utils.colors import Color
 import random
 import time
 import shared
@@ -39,25 +40,34 @@ def generate(*args):
                 finished = True
     return
 
-
-shared.gradio_root = gr.Blocks(title='QualityMinds AI Christmas Card Maker', css=modules.html.css)
+qm_color=Color(name="qm", c50="#effaed",c100="#def5db",c200="#64b445",c300="#c6eec0",c400="#b9ebb3",c500="#64b445",c600="#55993b",c700="#467e30",c800="#325a23",c900="#233f18",c950="#192d11")
+shared.gradio_root = gr.Blocks(title='QualityMinds AI Christmas Card Maker', css=modules.html.css, theme=gr.themes.Default(primary_hue=qm_color))
 with shared.gradio_root:
     gr.Markdown(
     """
-    # QualityMinds AI Christmas Card Maker
-    Type a promt and click generate. Try our examples and different styles.
+    # QualityMinds KI Weihnachtskarten-Generator
+    * Beschreibe das Motiv der Weihnachtskarte in einem Prompt (Englisch), wähle einen Stil und generiere!
+    * Zur Übersetzung einer Beschreibung ins Englische kann beispielsweise [deepl.com](https://www.deepl.com/translator#de/Schneekugeln) helfen.
+    * Das Tool basiert auf [Stable Diffusion XL](https://stability.ai/stable-diffusion) v1.0 und der Oberfläche [Fooocus](https://github.com/lllyasviel/Fooocus), der Code ist OpenSource auf [Github](https://github.com/QualityMinds/AI-Christmas-Cards) verfügbar.
     """)
     with gr.Row(elem_classes='type_row'):
-        with gr.Column(scale=0.7):
-            prompt = gr.Textbox(label="Prompt", value="", placeholder="What's on your christmas card?", autofocus=True, elem_classes='type_row', lines=2)
-        with gr.Column(scale=0.15, min_width="120px"):
-            style_selection = gr.Dropdown(label='Style', choices=style_keys, value='Cinematic', elem_classes="stylebox")
-        with gr.Column(scale=0.15, min_width="120px"):
-            run_button = gr.Button(label="Generate", value="Generate", variant='primary', elem_classes='generate_button')
+        with gr.Column(scale=2):
+            gr.Markdown("##### Prompt (Englisch)", elem_classes="input-label")
+            prompt = gr.Textbox(label="Prompt (Englisch)", value="", placeholder="Was möchtest Du auf der Weihnachtskarte abbilden?", 
+                                autofocus=True, elem_classes='type_row', container=False, lines=2)
+            description_de = gr.Textbox(label="Beschreibung", visible=False)
+            gr.Markdown("##### Beispiele", elem_classes="input-label")
+            gr.Examples(examples=[["Der Weihnachtsmann mit seinem Sack voller Geschenke", "Santa Claus with his sack full of gifts"], 
+                                  ["Malerisches Winterdorf in einer Schneekugel", "Scenic winter village inside a snow globe"], 
+                                  ["Niedliche Pinguine in Schals und Mützen eingewickelt", "Cute penguins wrapped up in scarves and hats"]],
+                        inputs=[description_de, prompt], elem_id="prompt_examples", cache_examples=False)
+
+        with gr.Column(scale=1, min_width="120px"):
+            gr.Markdown("##### Stil", elem_classes="input-label")
+            style_selection = gr.Dropdown(label='Stil', choices=style_keys, value='Kinofilm', container=False)
+            run_button = gr.Button(value="Weihnachtskarte\nerstellen", variant='primary', elem_classes='generate_button')
             progress_html = gr.HTML(visible=False, elem_id='progress-bar', elem_classes='progress-bar')
-    gr.Examples(examples=["Santa Claus with his sack full of gifts", "Scenic winter village inside a snow globe", \
-                          "Cute penguins wrapped up in scarves and hats", "Snowy trees and a reindeer"], inputs=[prompt], cache_examples=False)
-    generated_image = gr.Image(show_label=False, width=1280, value="resources/init.png", show_share_button=True )
+    generated_image = gr.Image(label="Weihnachtskarte", width=1280, value="resources/init.png" )
 
     run_button.click(fn=generate, inputs=[prompt, style_selection], outputs=[run_button, progress_html, generated_image])