Refactor recipe metadata handling and update CSS styles

- Moved the recipe metadata appending logic to occur after the JSON creation for better workflow.
- Adjusted the user comment formatting in ExifUtils to include a newline for improved readability.
- Reduced the maximum height of the recipe modal bottom section for better layout consistency.

py/routes/recipe_routes.py

@@ -423,9 +423,6 @@ class RecipeRoutes:
             with open(image_path, 'wb') as f:
                 f.write(optimized_image)
             
-            # Add recipe metadata to the image
-            ExifUtils.append_recipe_metadata(image_path, recipe_data)
-            
             # Create the recipe JSON
             current_time = time.time()
             
@@ -486,6 +483,9 @@ class RecipeRoutes:
             json_path = os.path.join(recipes_dir, json_filename)
             with open(json_path, 'w', encoding='utf-8') as f:
                 json.dump(recipe_data, f, indent=4, ensure_ascii=False)
+
+            # Add recipe metadata to the image
+            ExifUtils.append_recipe_metadata(image_path, recipe_data)
             
             # Simplified cache update approach
             # Instead of trying to update the cache directly, just set it to None

py/utils/exif_utils.py

@@ -135,7 +135,7 @@ class ExifUtils:
             recipe_metadata_marker = f"Recipe metadata: {recipe_metadata_json}"
             
             # Append to existing user comment or create new one
-            new_user_comment = f"{user_comment}, {recipe_metadata_marker}" if user_comment else recipe_metadata_marker
+            new_user_comment = f"{user_comment} \n {recipe_metadata_marker}" if user_comment else recipe_metadata_marker
             
             # Write back to the image
             return ExifUtils.update_user_comment(image_path, new_user_comment)

static/css/components/recipe-modal.css

@@ -220,7 +220,7 @@
 
 /* Bottom Section: Resources */
 .recipe-bottom-section {
-    max-height: 340px;
+    max-height: 320px;
     display: flex;
     flex-direction: column;
     border-top: 1px solid var(--border-color);

static/js/managers/ImportManager.js

@@ -354,9 +354,9 @@ export class ImportManager {
                 this.updateTagsDisplay();
             }
         } else if (this.recipeData && this.recipeData.gen_params && this.recipeData.gen_params.prompt) {
-            // Use the first 15 words from the prompt as the default recipe name
+            // Use the first 10 words from the prompt as the default recipe name
             const promptWords = this.recipeData.gen_params.prompt.split(' ');
-            const truncatedPrompt = promptWords.slice(0, 15).join(' ');
+            const truncatedPrompt = promptWords.slice(0, 10).join(' ');
             recipeName.value = truncatedPrompt;
             this.recipeName = truncatedPrompt;