gen bg replace, gen fill - handle special chars

__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts

@@ -32,28 +32,28 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import all of the SDK',
-    sizeLimitInKB: 129,
+    sizeLimitInKB: 130,
     importsArray: [
       importFromPackage('* as CloudinaryURLGEN')
     ]
   },
   {
     name: 'Import a Transformation Object',
-    sizeLimitInKB: 7,
+    sizeLimitInKB: 20,
     importsArray: [
       importFromPackage('Transformation')
     ]
   },
   {
     name: 'Import All Actions',
-    sizeLimitInKB: 65,
+    sizeLimitInKB: 78,
     importsArray: [
       importFromPackage('Actions')
     ]
   },
   {
     name: 'Import All Qualifiers',
-    sizeLimitInKB: 40,
+    sizeLimitInKB: 53,
     importsArray: [
       importFromPackage('Qualifiers')
     ]

__TESTS__/unit/fromJson/effect.fromJson.test.ts

@@ -50,12 +50,13 @@ describe('effect.fromJson', () => {
       { actionType: 'upscale' },
       { actionType: 'enhance' },
       { actionType: 'generativeBackgroundReplace', prompt: 'dog' },
+      { actionType: 'generativeBackgroundReplace', prompt: 'dog, dog (dog)' },
       { actionType: 'generativeBackgroundReplace'},
       { actionType: 'extract', 'prompts': 'blue sky' },
       { actionType: 'extract', 'prompts': ['blue sky', 'yellow sun'], detectMultiple: true },
       { actionType: 'extract', 'prompts': ['green grass'], mode: 'mask', invert: true },
       { actionType: 'extract', 'prompts': ['yellow sun', 'green grass'], mode: 'content' },
-
+      { actionType: 'pad', 'dimensions': { width: 100, height: 200 }, 'background': { backgroundType: 'generativeFill', prompt: 'some; test (123!)'} },
     ]});
 
     expect(transformation.toString().split('/')).toStrictEqual([
@@ -106,11 +107,13 @@ describe('effect.fromJson', () => {
       'e_upscale',
       'e_enhance',
       'e_gen_background_replace:prompt_dog',
+      'e_gen_background_replace:prompt_dog%2C dog %28dog%29',
       'e_gen_background_replace',
       'e_extract:prompt_blue sky',
       'e_extract:prompt_(blue sky;yellow sun);multiple_true',
       'e_extract:prompt_green grass;mode_mask;invert_true',
       'e_extract:prompt_(yellow sun;green grass);mode_content',
+      'b_gen_fill:prompt_some%3B test %28123%21%29,c_pad,h_200,w_100',
     ]);
   });
 });

src/actions/effect/GenerativeBackgroundReplace.ts

@@ -1,6 +1,7 @@
 import { Action } from "../../internal/Action.js";
 import { Qualifier } from "../../internal/qualifier/Qualifier.js";
 import { IGenerativeBackgroundReplaceModel } from "../../internal/models/IEffectActionModel.js";
+import { encodePromptComponent } from "../../internal/utils/encodePromptComponents.js";
 
 /**
  * @description Uses generative AI to replace background of your image with something else.
@@ -17,7 +18,7 @@ class GenerativeBackgroundReplace extends Action {
   }
 
   prompt(value: string): GenerativeBackgroundReplace {
-    this._prompt = value;
+    this._prompt = value ? encodePromptComponent(value) : value;
     this._actionModel.prompt = value;
 
     return this;
@@ -28,7 +29,10 @@ class GenerativeBackgroundReplace extends Action {
       this.addQualifier(new Qualifier("e", "gen_background_replace"));
     } else {
       this.addQualifier(
-        new Qualifier("e", `gen_background_replace:prompt_${this._prompt}`)
+        new Qualifier(
+          "e",
+          `gen_background_replace:prompt_${this._prompt}`
+        )
       );
     }
   }

src/internal/utils/encodePromptComponents.ts

@@ -0,0 +1,22 @@
+export const encodePromptComponent = (prompt: string): string => composeStringOperations(encodeURIComponent, replaceMissingChars, decodeSpaces)(prompt);
+
+const charsMissingFromUrlEncode = /[!'()*~_.-]/g;
+
+const missingCharsMap: { [char: string]: string } = {
+  '!': '%21',
+  "'": '%27',
+  '(': '%28',
+  ')': '%29',
+  '*': '%2A',
+  '~': '%7E',
+  _: '%5F',
+  '.': '%2E',
+  '-': '%2D',
+};
+
+const replaceMissingChars = (str: string): string => {
+  return str.replace(charsMissingFromUrlEncode, (match) => missingCharsMap[match] ?? match);
+};
+
+const decodeSpaces = (str: string): string => str.replace(/%20/g, ' ');
+const composeStringOperations = (...fns: Array<(str: string) => string>) => (arg: string) => fns.reduce((acc, fn) => fn(acc), arg);

src/qualifiers/background/shared/BackgroundGenerativeFillQualifier.ts

@@ -1,3 +1,4 @@
+import {encodePromptComponent} from "../../../internal/utils/encodePromptComponents.js";
 import {BackgroundQualifier} from "./base/BackgroundQualifier.js";
 
 /**
@@ -15,7 +16,7 @@ class BackgroundGenerativeFillQualifier extends BackgroundQualifier {
   }
 
   prompt(prompt: string): BackgroundGenerativeFillQualifier {
-    this._prompt = prompt;
+    this._prompt = prompt ? encodePromptComponent(prompt) : prompt;
     return this;
   }