Improve Space UI hero section

app.py

@@ -3,38 +3,112 @@ import requests
 import gradio as gr
 
 custom_css = """
+.gradio-container {
+    max-width: 1180px !important;
+    margin: 0 auto !important;
+}
+
 #solricks-hero {
-    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #2563eb 100%);
-    padding: 24px;
-    border-radius: 18px;
-    margin-bottom: 18px;
+    background:
+        radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.28), transparent 32%),
+        radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.25), transparent 34%),
+        linear-gradient(135deg, #070814 0%, #111827 45%, #1e1b4b 100%);
+    padding: 30px;
+    border-radius: 22px;
+    margin-bottom: 22px;
     color: white;
-    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
+    border: 1px solid rgba(255,255,255,0.12);
+    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.22);
+}
+
+#solricks-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.10);
+    color: rgba(255,255,255,0.82);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border: 1px solid rgba(255,255,255,0.14);
+    margin-bottom: 16px;
 }
 
 #solricks-hero h1 {
-    margin: 0 0 8px 0;
+    margin: 0 0 10px 0;
     color: white;
-    font-size: 32px;
-    font-weight: 800;
+    font-size: 38px;
+    line-height: 1.05;
+    font-weight: 900;
+    letter-spacing: -0.04em;
 }
 
 #solricks-hero p {
     margin: 0;
+    max-width: 760px;
     font-size: 15px;
-    color: rgba(255,255,255,0.92);
+    line-height: 1.65;
+    color: rgba(255,255,255,0.78);
 }
 
-#solricks-note {
-    display: inline-block;
-    margin-top: 14px;
-    padding: 7px 12px;
+#solricks-note-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 18px;
+}
+
+.solricks-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 12px;
     border-radius: 999px;
-    background: rgba(255,255,255,0.14);
-    color: white;
+    background: rgba(255,255,255,0.10);
+    color: rgba(255,255,255,0.88);
     font-size: 13px;
-    font-weight: 600;
-    border: 1px solid rgba(255,255,255,0.18);
+    font-weight: 700;
+    border: 1px solid rgba(255,255,255,0.14);
+}
+
+#solricks-panel-note {
+    padding: 14px 16px;
+    border-radius: 16px;
+    background: rgba(79, 70, 229, 0.08);
+    border: 1px solid rgba(79, 70, 229, 0.16);
+    font-size: 13px;
+    line-height: 1.55;
+    margin-bottom: 12px;
+}
+
+#solricks-footer {
+    margin-top: 22px;
+    padding: 18px 20px;
+    border-radius: 18px;
+    background: rgba(15, 23, 42, 0.04);
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    font-size: 13px;
+    color: rgba(15, 23, 42, 0.72);
+}
+
+#solricks-footer a {
+    font-weight: 700;
+    text-decoration: none;
+}
+
+button.primary {
+    border-radius: 14px !important;
+    font-weight: 800 !important;
+}
+
+textarea, input, select {
+    border-radius: 12px !important;
+}
+
+.svelte-1ipelgc, .wrap {
+    border-radius: 16px !important;
 }
 """
 
@@ -105,7 +179,7 @@ def generate_image(prompt, style, resolution):
         if image_url.startswith("/"):
             image_url = f"{API_BASE_URL}{image_url}"
 
-        return image_url, "Done."
+        return image_url, "Done. Your image was generated successfully."
 
     except requests.exceptions.Timeout:
         return None, "Generation timed out. Please try again."
@@ -113,65 +187,101 @@ def generate_image(prompt, style, resolution):
         return None, f"Error: {error}"
 
 
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="blue",
+    neutral_hue="slate",
+)
+
 with gr.Blocks(
     title="SOLRICKS Image Generator",
+    theme=theme,
     css=custom_css,
 ) as demo:
     gr.Markdown(
         """
 <div id="solricks-hero">
+    <div id="solricks-kicker">SOLRICKS · VISUAL AI PREVIEW</div>
     <h1>SOLRICKS Image Generator</h1>
-    <p>Free visual AI preview powered by the Solricks backend.</p>
-    <span id="solricks-note">Public demo · Rate-limited · Preview generations</span>
+    <p>
+        Generate a free preview image using the Solricks visual AI backend.
+        This public Space is designed as a lightweight demo for visual AI workflows,
+        prompt-based generation, and Solricks-powered image creation.
+    </p>
+    <div id="solricks-note-row">
+        <span class="solricks-pill">Public demo</span>
+        <span class="solricks-pill">Rate-limited</span>
+        <span class="solricks-pill">Preview generations</span>
+        <span class="solricks-pill">Powered by Solricks backend</span>
+    </div>
 </div>
 """
     )
 
-    prompt = gr.Textbox(
-        label="Prompt",
-        placeholder="Describe the image you want to generate...",
-        lines=4,
-        max_lines=6,
-    )
-
     with gr.Row():
-        style = gr.Dropdown(
-            label="Style",
-            choices=ALLOWED_STYLES,
-            value="Portrait",
-        )
-
-        resolution = gr.Dropdown(
-            label="Resolution",
-            choices=ALLOWED_RESOLUTIONS,
-            value="1024x1024",
-        )
-
-    generate_button = gr.Button("Generate Image", variant="primary")
-
-    output_image = gr.Image(
-        label="Generated Image",
-    )
-
-    status = gr.Textbox(
-        label="Status",
-        interactive=False,
-    )
+        with gr.Column(scale=5):
+            gr.Markdown(
+                """
+<div id="solricks-panel-note">
+<strong>Tip:</strong> Use clear prompts with subject, style, lighting, and scene details.
+For example: <em>cinematic AI robot in a dark premium technology lab, blue accent lighting, realistic details</em>.
+</div>
+"""
+            )
+
+            prompt = gr.Textbox(
+                label="Prompt",
+                placeholder="Describe the image you want to generate...",
+                lines=6,
+                max_lines=8,
+            )
+
+            with gr.Row():
+                style = gr.Dropdown(
+                    label="Style",
+                    choices=ALLOWED_STYLES,
+                    value="Portrait",
+                )
+
+                resolution = gr.Dropdown(
+                    label="Resolution",
+                    choices=ALLOWED_RESOLUTIONS,
+                    value="1024x1024",
+                )
+
+            generate_button = gr.Button("Generate Image", variant="primary")
+
+            status = gr.Textbox(
+                label="Status",
+                interactive=False,
+                placeholder="Generation status will appear here...",
+            )
+
+        with gr.Column(scale=6):
+            output_image = gr.Image(
+                label="Generated Image",
+                height=560,
+            )
 
     gr.Examples(
         examples=[
             [
-                "cinematic portrait of a futuristic woman, dramatic lighting, realistic details",
+                "cinematic close-up portrait of a futuristic android, dark premium lighting, realistic details, sharp focus",
                 "Portrait",
                 "768x1344",
             ],
             [
-                "luxury product photo of a perfume bottle, black background, studio lighting",
+                "luxury product photo of a black perfume bottle on a reflective surface, premium studio lighting, elegant background",
                 "Product",
                 "1024x1024",
             ],
             [
-                "realistic AI robot in a dark premium technology lab, cinematic lighting",
+                "modern AI server room with blue accent lights, cinematic technology atmosphere, realistic details",
+                "Cinematic",
+                "1344x768",
+            ],
+            [
+                "realistic AI robot in a dark premium technology lab, cinematic lighting, high detail, blue glow",
                 "Cinematic",
                 "1344x768",
             ],
@@ -179,6 +289,21 @@ with gr.Blocks(
         inputs=[prompt, style, resolution],
     )
 
+    gr.Markdown(
+        """
+<div id="solricks-footer">
+<strong>SOLRICKS</strong> develops solution bricks for AI-powered systems, visual AI workflows,
+ComfyUI tools, LoRA resources, and GPU automation.
+<br><br>
+<a href="https://solricks.com/" target="_blank">Website</a>
+&nbsp;·&nbsp;
+<a href="https://github.com/SOLRICKS" target="_blank">GitHub</a>
+&nbsp;·&nbsp;
+<a href="https://civitai.com/user/Solricks" target="_blank">Civitai</a>
+</div>
+"""
+    )
+
     generate_button.click(
         fn=generate_image,
         inputs=[prompt, style, resolution],