Update app.py

app.py

@@ -108,7 +108,7 @@ MAX_LENGTH = model_config.get('max_length', 1024)
 # Max length limits for UI
 MAX_LENGTH_MIN = 256
 MAX_LENGTH_MAX = 2048
-MAX_LENGTH_DEFAULT = MAX_LENGTH
+MAX_LENGTH_DEFAULT = 1024
 
 # ============================================================
 # Task configurations with defaults from config (shared)
@@ -140,7 +140,7 @@ TASK_CONFIGS = {
 # Generation parameters from config (shared)
 # ============================================================
 gen_config = config.get('generation', {})
-DEFAULT_NUM_CANDIDATES = gen_config.get('default_num_candidates', 4)
+DEFAULT_NUM_CANDIDATES = 2  # Changed to 2 for faster generation
 MAX_NUM_CANDIDATES = gen_config.get('max_num_candidates', 8)
 EXTRA_CANDIDATES_BUFFER = gen_config.get('extra_candidates_buffer', 4)
 
@@ -346,7 +346,7 @@ CUSTOM_CSS = """
 }
 """
 
-# Enhanced Tips HTML
+# Enhanced Tips HTML (simplified version)
 TIPS_HTML = """
 <div class="tips-box">
     <h3>Prompting Guide & Best Practices</h3>
@@ -356,16 +356,16 @@ TIPS_HTML = """
         <strong>CRITICAL: Tips That WILL Improve Your Results</strong>
         <ul style="margin: 8px 0 0 0; padding-left: 20px;">
             <li style="color: #dc3545; font-weight: 600;">
-                <strong>Generate 4-8 candidates and pick the best one!</strong> Results vary significantly between generations - this is NORMAL!
+                <strong>🚀 First time using?</strong> Set candidates to 1 for faster model download. Increase to 2-4 after the model is loaded!
             </li>
             <li style="color: #dc3545; font-weight: 600;">
-                <strong>Use GEOMETRIC descriptions:</strong> "triangular roof", "circular head", "rectangular body", "curved tail"
+                <strong>Generate 2-4 candidates and pick the best one!</strong> Results vary significantly between generations - this is NORMAL!
             </li>
             <li style="color: #dc3545; font-weight: 600;">
-                <strong>ALWAYS specify colors for EACH element:</strong> "black outline", "red roof", "blue shirt", "green grass"
+                <strong>Use GEOMETRIC descriptions:</strong> "triangular roof", "circular head", "rectangular body", "curved tail"
             </li>
             <li style="color: #dc3545; font-weight: 600;">
-                <strong>Describe position & orientation:</strong> "centrally positioned", "pointing upward", "facing right", "at the bottom"
+                <strong>ALWAYS specify colors for EACH element:</strong> "black outline", "red roof", "blue shirt", "green grass"
             </li>
             <li style="color: #dc3545; font-weight: 600;">
                 <strong>Keep it SIMPLE:</strong> Avoid complex sentences. Use short, clear phrases connected by commas.
@@ -394,51 +394,6 @@ TIPS_HTML = """
         </ul>
     </div>
     
-    <!-- Parameter Tuning Tips -->
-    <div class="orange-box">
-        <strong>Parameter Tuning Guide</strong>
-        <table style="width: 100%; margin-top: 10px; border-collapse: collapse;">
-            <tr style="background: rgba(255,255,255,0.5);">
-                <th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd;">Scenario</th>
-                <th style="padding: 8px; text-align: center; border-bottom: 1px solid #ddd;">Temperature</th>
-                <th style="padding: 8px; text-align: center; border-bottom: 1px solid #ddd;">Top-P</th>
-                <th style="padding: 8px; text-align: center; border-bottom: 1px solid #ddd;">Top-K</th>
-                <th style="padding: 8px; text-align: center; border-bottom: 1px solid #ddd;">Rep. Penalty</th>
-            </tr>
-            <tr>
-                <td style="padding: 8px;">Simple icons/shapes</td>
-                <td style="padding: 8px; text-align: center;">0.3 - 0.5</td>
-                <td style="padding: 8px; text-align: center;">0.85 - 0.90</td>
-                <td style="padding: 8px; text-align: center;">40 - 50</td>
-                <td style="padding: 8px; text-align: center;">1.05</td>
-            </tr>
-            <tr style="background: rgba(255,255,255,0.3);">
-                <td style="padding: 8px;">Characters/Avatars</td>
-                <td style="padding: 8px; text-align: center;">0.5 - 0.7</td>
-                <td style="padding: 8px; text-align: center;">0.88 - 0.92</td>
-                <td style="padding: 8px; text-align: center;">50 - 70</td>
-                <td style="padding: 8px; text-align: center;">1.02 - 1.05</td>
-            </tr>
-            <tr>
-                <td style="padding: 8px;">Landscapes/Scenes</td>
-                <td style="padding: 8px; text-align: center;">0.5 - 0.7</td>
-                <td style="padding: 8px; text-align: center;">0.88 - 0.92</td>
-                <td style="padding: 8px; text-align: center;">50 - 60</td>
-                <td style="padding: 8px; text-align: center;">1.03</td>
-            </tr>
-            <tr style="background: rgba(255,255,255,0.3);">
-                <td style="padding: 8px;">Image-to-SVG</td>
-                <td style="padding: 8px; text-align: center;">0.2 - 0.4</td>
-                <td style="padding: 8px; text-align: center;">0.88 - 0.92</td>
-                <td style="padding: 8px; text-align: center;">40 - 50</td>
-                <td style="padding: 8px; text-align: center;">1.05</td>
-            </tr>
-        </table>
-        <p style="margin: 10px 0 0 0; font-size: 0.9em; color: #856404;">
-            Tip: If results are too chaotic, lower temperature. If too simple/empty, raise it slightly.
-        </p>
-    </div>
-    
     <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 15px;">
         
         <div class="tip-category">
@@ -453,18 +408,6 @@ TIPS_HTML = """
             <p><strong>Keywords:</strong> <code>triangle</code> <code>circle</code> <code>arrow</code> <code>heart</code> <code>star</code> <code>centered</code></p>
         </div>
         
-        <div class="tip-category">
-            <h4>Characters & People</h4>
-            <p>Break down into simple geometric parts. Describe each body part with shape + color.</p>
-            <div class="example-prompt">
-                "A simple person: round beige head, rectangular blue shirt body, two dark gray rectangular legs. Standing pose, arms at sides, flat colors."
-            </div>
-            <div class="example-prompt">
-                "A girl with long black hair, pink dress with triangular skirt shape, small circular face with dot eyes and curved smile. Simple cartoon style."
-            </div>
-            <p class="red-tip">Keep poses SIMPLE: standing, sitting, waving. Avoid complex actions!</p>
-        </div>
-        
         <div class="tip-category">
             <h4>Avatars & Portraits</h4>
             <p>Use circular frame, focus on face and upper body only.</p>
@@ -480,7 +423,7 @@ TIPS_HTML = """
             <h4>Landscapes & Scenes</h4>
             <p>Layer elements from background to foreground. Specify color for EACH layer.</p>
             <div class="example-prompt">
-                "Layered landscape: light blue sky at top, gray triangular mountains in middle, dark green triangular pine trees at bottom. Flat colors, simple shapes."
+                "Layered landscape: light blue sky at top, gray triangular mountains in middle, dark green triangular pine trees at bottom. Flat colors."
             </div>
             <div class="example-prompt">
                 "Sunset beach: orange gradient sky at top, yellow semicircle sun on horizon, dark blue wavy ocean below, tan beach at bottom."
@@ -521,7 +464,7 @@ TIPS_HTML = """
             <li><strong>Wrong colors?</strong> Explicitly name EVERY color: "red roof", "blue shirt", "black outline"</li>
             <li><strong>Missing elements?</strong> Add position words: "at top", "in center", "at bottom left"</li>
             <li><strong>Repetitive patterns?</strong> Increase repetition_penalty to 1.08-1.15</li>
-            <li><strong>Inconsistent?</strong> <span class="red-tip">Generate MORE candidates (6-8) and pick the best!</span></li>
+            <li><strong>Inconsistent?</strong> <span class="red-tip">Generate MORE candidates (2-4) and pick the best!</span></li>
             <li><strong>Too slow?</strong> Reduce max_length to 512-768 for faster generation</li>
         </ul>
     </div>
@@ -544,12 +487,12 @@ IMAGE_TIPS_HTML = """
 <div class="red-box">
     <strong>Image-to-SVG Tips</strong>
     <ul style="margin: 8px 0 0 0; padding-left: 20px;">
+        <li><strong>🚀 First time?</strong> Set candidates to 1 for faster model download!</li>
         <li><strong>Best input: Simple images with clean background</strong></li>
         <li><strong>PNG with transparency (RGBA) works best!</strong> We auto-convert to white background.</li>
         <li><strong>For complex backgrounds:</strong> Enable "Replace Background" option below.</li>
         <li><strong>Lower temperature (0.2-0.4)</strong> for more accurate reproduction.</li>
-        <li><strong>Use higher max_length (1024+)</strong> for images with more detail.</li>
-        <li style="color: #dc3545; font-weight: 600;"><strong>Generate 4-8 candidates!</strong> Pick the one that best matches your input.</li>
+        <li style="color: #dc3545; font-weight: 600;"><strong>Generate 2-4 candidates!</strong> Pick the one that best matches your input.</li>
     </ul>
 </div>
 """
@@ -1076,7 +1019,7 @@ def generate_candidates(inputs, task_type, subtype, temperature, top_p, top_k, r
     return all_candidates
 
 
-@spaces.GPU(duration=300)
+@spaces.GPU(duration=180)
 def gradio_text_to_svg(text_description, model_size, num_candidates, temperature, top_p, top_k, 
                        repetition_penalty, max_length, progress=gr.Progress()):
     """Gradio interface - text-to-svg with model selection"""
@@ -1146,7 +1089,7 @@ def gradio_text_to_svg(text_description, model_size, num_candidates, temperature
     return gallery_html, combined_svg, model_status
 
 
-@spaces.GPU(duration=300)
+@spaces.GPU(duration=180)
 def gradio_image_to_svg(image, model_size, num_candidates, temperature, top_p, top_k, repetition_penalty,
                         max_length, replace_background, progress=gr.Progress()):
     """Gradio interface - image-to-svg with model selection"""
@@ -1256,7 +1199,7 @@ def get_example_images():
 def create_interface():
     """Create Gradio interface"""
     
-    # 30 Example prompts covering various categories
+    # Example prompts covering: icons, avatars, scenes, animals, buildings
     example_texts = [
         # === Simple Icons (1-6) ===
         "A black triangle pointing downward, centrally positioned.",
@@ -1266,21 +1209,15 @@ def create_interface():
         "A green circle with a white checkmark inside, centered.",
         "A black plus sign with equal length arms, thick lines, centered.",
         
-        # === Characters & People (7-12) ===
-        "A simple person standing: round beige head, rectangular blue shirt body, two dark gray rectangular legs, arms at sides. Flat colors.",
-        "A girl with long black hair, wearing pink dress with triangular skirt, small circular face with dot eyes and curved smile. Simple cartoon style.",
-        "A child waving: large round head with brown messy hair, big circular eyes, small body in red t-shirt and blue shorts, one arm raised. Cheerful cartoon style.",
-        "A person sitting on chair: side view, round head, rectangular torso in green sweater, bent legs on simple chair shape. Relaxed pose.",
-        "A running person: side view silhouette in black, dynamic pose with one leg forward, arms pumping. Motion style.",
-        
-        # === Avatars & Portraits (13-17) ===
+        # === Avatars & Portraits (7-12) ===
         "Circular avatar: person with short black hair, round face with two dot eyes and small curved smile, wearing blue collar shirt. Minimal style, centered in circle.",
         "Female avatar: oval face with long wavy brown hair, simple eyes, pink lips, wearing v-neck purple top. Soft cartoon style in circular frame.",
         "Profile silhouette avatar: black side view of head with short hair and glasses outline, facing right. Simple solid shape.",
         "Cute cartoon avatar: round face with big sparkly eyes, rosy cheeks, short bob haircut in orange. Kawaii style, circular frame.",
         "Professional headshot avatar: person with neat hair, neutral expression, wearing suit collar. Corporate minimal style, circular frame.",
+        "A girl with long black hair, wearing pink dress with triangular skirt, small circular face with dot eyes and curved smile. Simple cartoon style.",
         
-        # === Landscapes & Scenes (18-23) ===
+        # === Landscapes & Scenes (13-18) ===
         "Layered mountain landscape: light blue sky at top, gray triangular snow-capped mountains in middle, dark green triangular pine trees at bottom. Flat colors.",
         "Sunset beach scene: orange gradient sky at top, yellow semicircle sun on horizon, dark blue wavy ocean, tan beach strip at bottom. Simple shapes.",
         "Forest scene: light blue sky, row of 5 dark green triangular pine trees of varying heights on brown trunks, light green grass at bottom.",
@@ -1288,16 +1225,21 @@ def create_interface():
         "Desert landscape: light orange sky with white circle sun, tan sand dunes as curved shapes, one green cactus with arms on the right side.",
         "Countryside scene: blue sky with white fluffy clouds, green rolling hills, small red barn with white door in the center, yellow hay bales.",
         
-        # === Animals (24-27) ===
+        # === Animals (19-24) ===
         "Cute orange cat sitting: round head with two triangular ears, oval body, curved tail. Black outline cartoon style, facing forward.",
         "Simple black bird: oval body, round head, pointed triangular beak facing right, triangular tail, two stick legs. Silhouette style.",
         "Friendly cartoon dog: brown oval body, round head with floppy ears, black dot nose, wagging curved tail, four short legs. Sitting pose.",
         "Red fox logo: triangular orange face with pointed ears, white chest marking, bushy tail. Minimalist style, facing right, centered.",
+        "Cute rabbit: white oval body, long upright ears, round fluffy tail, pink inner ears. Simple cartoon style.",
+        "Yellow duck: round body, orange beak, small wing, floating on blue wavy water. Cute simple style.",
         
-        # === Objects & Misc (28-30) ===
+        # === Buildings & Objects (25-30) ===
         "Simple house icon: red triangular roof, beige rectangular walls, brown door in center, two blue square windows, green ground at bottom.",
         "Coffee mug: brown cylindrical cup with curved handle on right, three wavy steam lines rising from top. Flat style.",
-        "Open book: two rectangular white pages spread open, black text lines on each page, brown spine in center. Simple top-down view."
+        "Open book: two rectangular white pages spread open, black text lines on each page, brown spine in center. Simple top-down view.",
+        "Tall office building: gray rectangular tower with rows of small blue windows, entrance door at bottom. Modern minimal style.",
+        "Church icon: white rectangular building with tall pointed steeple, cross on top, arched doorway, two small windows. Simple flat style.",
+        "Lighthouse: white and red striped cylindrical tower, yellow light beam at top, standing on gray rocks, blue ocean waves. Simple illustration."
     ]
     
     example_images = get_example_images()
@@ -1311,17 +1253,18 @@ def create_interface():
         </div>
         """)
         
-        # Queue status
+        # Queue status and first-time tip
         gr.HTML("""
+        <div style="background: #fff5f5; border: 1px solid #ffcccc; border-radius: 8px; padding: 12px 15px; margin: 15px 0;">
+            <span style="font-size: 1.5em;">🚀</span>
+            <strong style="color: #dc3545;">First time using?</strong> Set <strong>Candidates = 1</strong> for faster model download. After the model is loaded, increase to 2-4 for better results!
+        </div>
         <div style="background: #e7f3ff; border: 1px solid #b3d7ff; border-radius: 8px; padding: 12px 15px; margin: 15px 0;">
             <span style="font-size: 1.5em;">ℹ️</span>
             <strong>Queue System Active</strong> - Requests processed one at a time. First generation with a new model may take longer to load.
         </div>
         """)
         
-        # Tips section
-        gr.HTML(TIPS_HTML)
-        
         with gr.Tabs():
             # ==================== Image-to-SVG Tab ====================
             with gr.TabItem("Image-to-SVG", id="image-tab"):
@@ -1352,7 +1295,8 @@ def create_interface():
                             
                             img_num_candidates = gr.Slider(
                                 minimum=1, maximum=MAX_NUM_CANDIDATES, value=DEFAULT_NUM_CANDIDATES, step=1,
-                                label="Number of Candidates"
+                                label="Number of Candidates",
+                                info="🚀 Set to 1 for first-time model download!"
                             )
                             img_replace_bg = gr.Checkbox(
                                 label="Replace non-white background",
@@ -1442,7 +1386,8 @@ def create_interface():
                         gr.Markdown("### Description")
                         gr.HTML("""
                         <div style="background: #fff5f5; padding: 10px; border-radius: 8px; border-left: 4px solid #dc3545; margin-bottom: 10px;">
-                            <strong style="color: #dc3545;">Generate 4-8 candidates and pick the best!</strong>
+                            <strong style="color: #dc3545;">🚀 First time?</strong> Set candidates to 1 for faster download!<br>
+                            <strong style="color: #dc3545;">Generate 2-4 candidates and pick the best!</strong>
                         </div>
                         """)
                         text_input = gr.Textbox(
@@ -1463,9 +1408,9 @@ def create_interface():
                             )
                             
                             text_num_candidates = gr.Slider(
-                                minimum=1, maximum=MAX_NUM_CANDIDATES, value=6, step=1,
+                                minimum=1, maximum=MAX_NUM_CANDIDATES, value=DEFAULT_NUM_CANDIDATES, step=1,
                                 label="Number of Candidates",
-                                info="More = better chances!"
+                                info="🚀 Set to 1 for first-time model download!"
                             )
                             
                             # Max Length slider
@@ -1548,12 +1493,16 @@ def create_interface():
                     outputs=[text_gallery, text_svg_output, text_model_status],
                     queue=True
                 )
+            
+            # ==================== Tips Tab ====================
+            with gr.TabItem("Tips & Guide", id="tips-tab"):
+                gr.HTML(TIPS_HTML)
         
         # Footer
         gr.HTML(f"""
         <div class="footer">
             <p>Built with OmniSVG | Available models: {', '.join(AVAILABLE_MODEL_SIZES)}</p>
-            <p style="color: #dc3545; font-weight: 600;">Remember: Generate 4-8 candidates and pick the best!</p>
+            <p style="color: #dc3545; font-weight: 600;">Remember: Generate 2-4 candidates and pick the best!</p>
         </div>
         """)