iOS packager uses new app image generation code

Author: JudahGabriel

apps/pwabuilder/Controllers/ImagesController.cs

@@ -80,16 +80,17 @@ public async Task<IActionResult> GetSafeImageForAnalysis([FromQuery] string anal
     [HttpPost("generateStoreImages")]
     [RequestFormLimits(MultipartBodyLengthLimit = 5 * 1024 * 1024)]
     [RequestSizeLimit(5 * 1024 * 1024)]
-    public async Task<IActionResult> GenerateStoreImages([FromForm] StoreImageGenerationRequest request, [FromServices] StoreImageGenerationService imageGenerator, CancellationToken cancelToken)
+    public async Task<IActionResult> GenerateStoreImages([FromForm] StoreImageCreationOptions request, [FromServices] StoreImageCreator imageGenerator, CancellationToken cancelToken)
     {
         try
         {
-            var storeImagesZipStream = await imageGenerator.CreateStoreImagesZipAsync(request, cancelToken);
+            using var baseImageStream = request.BaseImage.OpenReadStream();
+            var storeImagesZipStream = await imageGenerator.CreateStoreImagesZipAsync(baseImageStream, request.BaseImage.ContentType, request.Padding, request.BackgroundColor, request.Platforms, cancelToken);
             return File(storeImagesZipStream, "application/zip", "appstore-images.zip");
         }
         catch (Exception imageGeneratorError)
         {
-            logger.LogError(imageGeneratorError, "Error generating store images for image of size {size} for {platforms} with padding {padding} and color {color}.", request.BaseImage.Length, string.Join(", ", request.Platform), request.Padding, request.Color);
+            logger.LogError(imageGeneratorError, "Error generating store images for image of size {size} for {platforms} with padding {padding} and color {color}.", request.BaseImage.Length, string.Join(", ", request.Platforms), request.Padding, request.BackgroundColor);
             return StatusCode(500, $"An error occurred while generating store images: {imageGeneratorError.Message}");
         }
     }

apps/pwabuilder/Frontend/src/script/pages/image-generator.ts

@@ -337,11 +337,11 @@ export class ImageGenerator extends LitElement {
 
             form.append("baseImage", file as Blob);
             form.append("padding", String(this.padding));
-            form.append("color", colorValue);
+            form.append("backgroundColor", colorValue);
 
             platformsData
                 .filter((_, index) => this.platformSelected[index])
-                .forEach(data => form.append("platform", data.value));
+                .forEach(data => form.append("platforms", data.value));
 
             const createStoreImagesRequest = await fetch("/api/images/generateStoreImages", {
                 method: "POST",

apps/pwabuilder/Models/IOS/ImageGeneratorServiceZipFile.cs

@@ -14,7 +14,6 @@ public ImageGeneratorServiceZipFile(ZipArchive zip)
 
         public ZipArchiveEntry? GetTargetSize(ImageTargetSize size)
         {
-            // Square44x44Logo isn't a typo here - the image generator service uses those files names, then appends the actual size to the file name.
             return zip.GetEntry($"ios/{size.ToFileName()}.png");
         }
 

…er/Models/StoreImageGenerationRequest.cs …lder/Models/StoreImageCreationOptions.csapps/pwabuilder/Models/StoreImageGenerationRequest.cs renamed to apps/pwabuilder/Models/StoreImageCreationOptions.cs apps/pwabuilder/Models/StoreImageGenerationRequest.cs renamed to apps/pwabuilder/Models/StoreImageCreationOptions.cs

@@ -5,7 +5,7 @@ namespace PWABuilder.Models;
 /// <summary>
 /// Represents a request to generate store images from a base image.
 /// </summary>
-public sealed class StoreImageGenerationRequest
+public sealed class StoreImageCreationOptions
 {
     /// <summary>
     /// The base image file uploaded by the client.
@@ -19,13 +19,13 @@ public sealed class StoreImageGenerationRequest
     public required double Padding { get; set; }
 
     /// <summary>
-    /// The background color to use. Can be a hex color, named color, or "transparent".
+    /// The background color to use. Can be a hex color, named color, or "transparent". This color will be used when adding any specified padding or for the background when bringing the image into a non-square target.
     /// </summary>
-    public required string Color { get; set; }
+    public required string BackgroundColor { get; set; }
 
     /// <summary>
     /// One or more target platform identifiers for which store images should be generated.
     /// </summary>
     [MinLength(1)]
-    public required List<string> Platform { get; set; }
+    public required List<string> Platforms { get; set; }
 }

apps/pwabuilder/Program.cs

@@ -37,7 +37,7 @@
 builder.Services.AddSingleton<ViteEntryPointProvider>();
 builder.Services.AddSingleton<IPuppeteerService, PuppeteerService>();
 builder.Services.AddTransient<TempDirectory>();
-builder.Services.AddTransient<ImageGenerator>();
+builder.Services.AddTransient<IOSImageWriter>();
 builder.Services.AddTransient<IOSPackageCreator>();
 if (builder.Environment.IsDevelopment())
 {
@@ -73,7 +73,7 @@
 builder.Services.AddSingleton<ManifestAnalyzer>();
 builder.Services.AddSingleton<IServiceWorkerAnalyzer, ServiceWorkerAnalyzer>();
 builder.Services.AddSingleton<IImageValidationService, ImageValidationService>();
-builder.Services.AddSingleton<StoreImageGenerationService>();
+builder.Services.AddSingleton<StoreImageCreator>();
 builder.Services.AddSingleton(services =>
 {
     // Create a single, reusable Puppeteer browser instance. This can be used across different requests so that we're not spinning up multiple browsers for each request.

…wabuilder/Services/IOS/ImageGenerator.cs …wabuilder/Services/IOS/IOSImageWriter.csapps/pwabuilder/Services/IOS/ImageGenerator.cs renamed to apps/pwabuilder/Services/IOS/IOSImageWriter.cs apps/pwabuilder/Services/IOS/ImageGenerator.cs renamed to apps/pwabuilder/Services/IOS/IOSImageWriter.cs

@@ -5,29 +5,27 @@
 using PWABuilder.IOS.Common;
 using PWABuilder.IOS.Models;
 using PWABuilder.Models;
+using PWABuilder.Services;
 
 namespace PWABuilder.IOS.Services
 {
     /// <summary>
-    /// Creates the recommended Windows package images using images from the <see cref="WindowsAppPackageOptions"/>, images from the PWA's web app manifest, and images generated on behalf of the user from the PWABuilder app image generator service.
+    /// Creates the recommended iOS package images using images from the <see cref="IOSAppPackageOptions"/>, images from the PWA's web app manifest, and images generated on behalf of the user from the PWABuilder image generator service.
     /// </summary>
-    /// <remarks>
-    /// PWABuilder app image generator service is at https://www.pwabuilder.com/imageGenerator
-    /// </remarks>
-    public class ImageGenerator
+    public class IOSImageWriter
     {
-        private readonly ILogger<ImageGenerator> logger;
+        private readonly StoreImageCreator storeImageCreator;
         private readonly HttpClient http;
-        private readonly Uri imageGeneratorServiceUrl;
+        private readonly ILogger<IOSImageWriter> logger;
 
-        public ImageGenerator(
+        public IOSImageWriter(
+            StoreImageCreator storeImageCreator,
             IHttpClientFactory httpClientFactory,
-            IOptions<AppSettings> appSettings,
-            ILogger<ImageGenerator> logger
+            ILogger<IOSImageWriter> logger
         )
         {
-            http = httpClientFactory.CreateClient(Constants.PwaBuilderAgentHttpClient);
-            imageGeneratorServiceUrl = new Uri(appSettings.Value.ImageGeneratorApiUrl);
+            this.storeImageCreator = storeImageCreator;
+            this.http = httpClientFactory.CreateClient();
             this.logger = logger;
         }
 
@@ -39,15 +37,15 @@ ILogger<ImageGenerator> logger
         /// <param name="manifest">The web app manifest containing one or more images.</param>
         /// <param name="outputDirectory">The directory to write the images to.</param>
         /// <returns>An object containing the paths to the generated images.</returns>
-        public async Task<ImageGeneratorResult> Generate(
+        public async Task<ImageGeneratorResult> WriteImages(
             IOSAppPackageOptions.Validated options,
             WebAppManifestContext manifest,
             string outputDirectory
         )
         {
             // 1. Generate images using PWABuilder's image generation service.
             // These will be used as a backup if the options and manifest are missing images.
-            var generatedImagesZip = await InvokePwabuilderImageGeneratorService(options, manifest);
+            using var generatedImagesZip = await GenerateStoreImagesZip(options, manifest);
 
             // 2. Assemble the image sources from web manifest and generated images zip.
             var imageSources = GetImageSourcesForTargetSizes(manifest, generatedImagesZip);
@@ -57,30 +55,32 @@ string outputDirectory
             return new ImageGeneratorResult(imagePaths);
         }
 
-        private async Task<ImageGeneratorServiceZipFile> InvokePwabuilderImageGeneratorService(
+        private async Task<ImageGeneratorServiceZipFile> GenerateStoreImagesZip(
             IOSAppPackageOptions.Validated options,
             WebAppManifestContext webManifest
         )
         {
             var baseImageBytes = await GetBaseImage(options, webManifest);
-            var imagesZipUrl = await CreateIOSImagesZip(baseImageBytes, 0, "transparent");
-            return await DownloadIOSImagesZip(imagesZipUrl);
+            return await CreateIOSImagesZip(baseImageBytes, 0, "white");
         }
 
         private async Task<byte[]> GetBaseImage(
             IOSAppPackageOptions.Validated options,
             WebAppManifestContext webManifest
         )
         {
-            // Find a base image from which to generate all Windows package images.
+            // Find a base image from which to generate all iOS package images.
             // Best: the user supplied an image.
             // Second best: the largest square image from the manifest
             // Better than nothing: the largest image from the manifest
 
             // Go through each source and see if we can get the bytes for it.
             var baseImageSources = new[]
             {
-                (source: options.ImageUri, description: "the base image from package options"),
+                (
+                    source: options.ImageUri,
+                    description: "the base image from package options"
+                ),
                 (
                     source: webManifest.GetIconSuitableForIOSApps(1024),
                     description: "the largest square PNG icon 1024x1024 or larger from web manifest"
@@ -100,7 +100,7 @@ WebAppManifestContext webManifest
                 (
                     source: webManifest.GetIconSuitableForIOSApps(0),
                     description: "the largest square PNG icon from web manifest"
-                ),
+                )
             };
 
             if (baseImageSources.All(s => s.source == null))
@@ -127,72 +127,16 @@ WebAppManifestContext webManifest
             }
 
             throw new InvalidOperationException(
-                $"Couldn't find a suitable base image from which to generate all Windows package images. Please ensure your web app manifest has a square PNG image 512x512 or larger. Base image sources: {string.Join(", ", baseImageSources)}"
-            );
-        }
-
-        private async Task<Uri> CreateIOSImagesZip(
-            byte[] image,
-            double padding,
-            string backgroundColor
-        )
-        {
-            // The image generation API takes the following parameters, documented here: https://github.com/pwa-builder/pwabuilder-Image-Generator
-            // - fileName: bytes
-            // - padding: double (0 = no padding, 1 = max padding)
-            // - color: hex color, named color, or "transparent"
-            // - platform: ios
-            // - colorChanged: if colorOption = "choose", this should be 1. Otherwise, omit.
-            var fileContent = new StreamContent(new MemoryStream(image));
-            fileContent.Headers.ContentDisposition =
-                new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data")
-                {
-                    Name = "file",
-                    FileName = "image.png",
-                };
-            fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(
-                "application/octet-stream"
+                $"Couldn't find a suitable base image from which to generate all iOS package images. Please ensure your web app manifest has a square PNG image 512x512 or larger. Base image sources: {string.Join(", ", baseImageSources)}"
             );
-            var imageGeneratorArgs = new MultipartFormDataContent
-            {
-                { fileContent, "fileName" },
-                { new StringContent(padding.ToString()), "padding" },
-                { new StringContent(backgroundColor), "color" },
-                { new StringContent("ios"), "platform" },
-            };
-
-            var imagesResponse = await http.PostAsync(imageGeneratorServiceUrl, imageGeneratorArgs);
-            if (!imagesResponse.IsSuccessStatusCode)
-            {
-                throw new HttpRequestException(
-                    $"Image generator service call failed with status {(int)imagesResponse.StatusCode} ({imagesResponse.StatusCode}): {imagesResponse.ReasonPhrase}"
-                );
-            }
-
-            var imagesResponseString = await imagesResponse.Content.ReadAsStringAsync(); // it should be a JSON string containing a ImageGeneratorServiceResult
-            var imagesResult = JsonSerializer.Deserialize<ImageGeneratorServiceResult>(
-                imagesResponseString,
-                new JsonSerializerOptions { PropertyNameCaseInsensitive = true }
-            );
-            if (imagesResult == null)
-            {
-                throw new InvalidOperationException("Unable to deserialize image generator result");
-            }
-            if (!Uri.TryCreate(imageGeneratorServiceUrl, imagesResult.Uri, out var imagesZipUri))
-            {
-                throw new Exception(
-                    $"Unable to generate images for Windows package. The image URI returned from the image generator service, '{imagesResult.Uri}', is an invalid URI. Raw response: {imagesResponseString}"
-                );
-            }
-
-            return imagesZipUri;
         }
 
-        private async Task<ImageGeneratorServiceZipFile> DownloadIOSImagesZip(Uri url)
+        private async Task<ImageGeneratorServiceZipFile> CreateIOSImagesZip(byte[] imageBytes, double padding, string backgroundColor)
         {
-            var zipStream = await http.GetStreamAsync(url);
-            var zipArchive = new ZipArchive(zipStream, ZipArchiveMode.Read, false);
-            return new ImageGeneratorServiceZipFile(zipArchive);
+            using var baseImageStream = new MemoryStream(imageBytes);
+            var zipStream = await storeImageCreator.CreateStoreImagesZipAsync(baseImageStream, null, padding, backgroundColor, ["ios"], CancellationToken.None);
+            var zipFile = new ZipArchive(zipStream, ZipArchiveMode.Read, false);
+            return new ImageGeneratorServiceZipFile(zipFile);
         }
 
         private IEnumerable<ImageSource> GetImageSourcesForTargetSizes(

apps/pwabuilder/Services/IOS/IOSPackageCreator.cs

@@ -8,21 +8,21 @@ namespace PWABuilder.IOS.Services
 {
     public class IOSPackageCreator
     {
-        private readonly ImageGenerator imageGenerator;
+        private readonly IOSImageWriter iosImageWriter;
         private readonly TempDirectory temp;
         private readonly AppSettings appSettings;
         private readonly ILogger<IOSPackageCreator> logger;
         private readonly IWebHostEnvironment env;
 
         public IOSPackageCreator(
-            ImageGenerator imageGenerator,
+            IOSImageWriter iosImageWriter,
             IOptions<AppSettings> appSettings,
             TempDirectory temp,
             ILogger<IOSPackageCreator> logger,
             IWebHostEnvironment env
         )
         {
-            this.imageGenerator = imageGenerator;
+            this.iosImageWriter = iosImageWriter;
             this.appSettings = appSettings.Value;
             this.temp = temp;
             this.logger = logger;
@@ -52,7 +52,7 @@ public async Task<byte[]> Create(IOSAppPackageOptions.Validated options)
 
                 // Create any missing images for the iOS template.
                 // This should be done before project.ApplyChanges(). Otherwise, it'll attempt to write the images to the "pwa-shell" directory, which no longer exists after ApplyChanges().
-                await imageGenerator.Generate(
+                await iosImageWriter.WriteImages(
                     options,
                     WebAppManifestContext.From(options.Manifest, options.ManifestUri),
                     outputDir