diff --git a/Configuration/ContentSecurityPolicies.php b/Configuration/ContentSecurityPolicies.php
index 18a70f0..a52b3fc 100644
--- a/Configuration/ContentSecurityPolicies.php
+++ b/Configuration/ContentSecurityPolicies.php
@@ -32,6 +32,11 @@
         new UriValue('*.r2.dev'),
         new UriValue('*.cloudfront.net')
     ),
+    new Mutation(
+        MutationMode::Extend,
+        Directive::MediaSrc,
+        TYPO3\CMS\Core\Security\ContentSecurityPolicy\SourceScheme::data,
+    ),
 );
 
 return Map::fromEntries(
diff --git a/Resources/Public/JavaScript/MkContentAi.js b/Resources/Public/JavaScript/MkContentAi.js
index 672284f..cfa0269 100644
--- a/Resources/Public/JavaScript/MkContentAi.js
+++ b/Resources/Public/JavaScript/MkContentAi.js
@@ -21,131 +21,83 @@ $(document).ready(function () {
             `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading`
         );
     });
-
-        const image = document.getElementById('image');
-        const action = document.getElementById('operationName').value;
-        const client = document.getElementById("clientApi").value;
-        const submitButton = document.querySelector('input[type="submit"]');
-        let customHeight = 256;
-        let customWidth = 256;
-        let dragModeValue = 'none';
-        let viewModeValue = 1;
-        let cropBoxResizable = false;
-        let aspectRatio = 1;
-        let scalable = false;
-        let autoCropArea = 0;
-        let zoomable = false;
-        submitButton.disabled = false;
-
-        if (client === "StabilityAiClient" && action === 'extend') {
-            customHeight = image.height;
-            customWidth = image.width;
-            dragModeValue = 'crop';
-            cropBoxResizable = true;
-            aspectRatio = NaN;
+    const image = document.getElementById('image');
+    const submitButton = document.querySelector('input[type="submit"]');
+    let dragModeValue = 'none';
+    let viewModeValue = 1;
+    let cropBoxResizable = true;
+    let aspectRatio = 1;
+    let scalable = false;
+    let autoCropArea = 0;
+    let zoomable = true;
+    let customWidth = image.width;
+    let customHeight = image.height;
+    submitButton.disabled = false;
+
+    const cropper = new Cropper(image, {
+        aspectRatio: aspectRatio,
+        cropBoxResizable: cropBoxResizable,
+        dragMode: dragModeValue,
+        zoomable: zoomable,
+        viewMode: viewModeValue,
+        scalable: scalable,
+        autoCropArea: autoCropArea,
+        crop(event) {
+        },
+        ready: function () {
+            if (document.querySelector('input[name="size"]')) {
+                document.querySelector('input[name="size"]').click();
+            }
         }
+    });
 
-        if (client === "StabilityAiClient" && action === 'prepareImageToVideo') {
-            aspectRatio = NaN;
-            customWidth = document.querySelector('input[name="size"]').getAttribute('data-width') ?? 768;
-            customHeight = document.querySelector('input[name="size"]').getAttribute('data-height') ?? 768;
-
-            const inputs = document.querySelectorAll('input[name="size"]');
-            let disabledInputsCount = 0;
-            let element;
-
-            for (let i = 0; element = inputs[i]; i++) {
-                element.disabled = false;
+    function updateAspectRatio() {
+        customWidth = document.querySelector('input[name="size"]:checked').getAttribute('data-width');
+        customHeight = document.querySelector('input[name="size"]:checked').getAttribute('data-height');
+        aspectRatio = customWidth / customHeight;
+        cropper.setAspectRatio(aspectRatio);
+    }
 
-                if (false === validateImageDimensionsData(image.width, image.height, element.getAttribute('data-width'), element.getAttribute('data-height'))) {
-                    element.disabled = true;
-                    customWidth = 0;
-                    customHeight = 0;
-                    disabledInputsCount++;
-                }
-            }
+    document.querySelectorAll('input[name="size"]').forEach(function (element) {
+        element.addEventListener('change', updateAspectRatio);
+    });
 
-            if (inputs.length === disabledInputsCount) {
-                submitButton.disabled = true;
-            }
+    $('.crop-form').on('submit', function (event) {
+        event.preventDefault();
+        let minHeight;
+        let minWidth;
 
-            customWidth = parseInt(customWidth, 10);
-            customHeight = parseInt(customHeight, 10);
+        if (document.querySelector('input[name="size"]:checked')) {
+            minWidth = document.querySelector('input[name="size"]:checked').getAttribute('data-width') ?? 256;
+            minHeight = document.querySelector('input[name="size"]:checked').getAttribute('data-height') ?? 256;
+            minWidth = parseInt(minWidth, 10);
+            minHeight = parseInt(minHeight, 10);
         }
 
-        const cropper = new Cropper(image, {
-            aspectRatio: aspectRatio,
-            cropBoxResizable: cropBoxResizable,
-            dragMode: dragModeValue,
-            zoomable: zoomable,
-            viewMode: viewModeValue,
-            scalable: scalable,
-            autoCropArea: autoCropArea,
-            data: {
-                width: customWidth,
-                height: customHeight
-            },
-            crop(event) {
-            },
-            ready: function () {
-                let naturalWidth = this.cropper.getImageData().naturalWidth;
-                let naturalHeight = this.cropper.getImageData().naturalHeight;
-                if (naturalHeight >= 256 && naturalWidth >= 256) {
-                    this.cropper.setCanvasData({
-                        left: 0,
-                        top: 0,
-                        width: naturalWidth,
-                        height: naturalHeight
-                    });
-                }
-                if (document.querySelector('input[name="size"]')) {
-                    document.querySelector('input[name="size"]').click();
-                }
+        let canvas;
+        canvas = cropper.getCroppedCanvas({
+            width: minWidth,
+            height: minHeight
             }
-        });
-
-        $('.crop-form').on('submit', function(event) {
-            event.preventDefault();
-
-            let minHeight;
-            let minWidth;
-
-            if (document.querySelector('input[name="size"]:checked')) {
-                minWidth = document.querySelector('input[name="size"]:checked').getAttribute('data-width') ?? 256;
-                minHeight = document.querySelector('input[name="size"]:checked').getAttribute('data-height') ?? 256;
-                minWidth = parseInt(minWidth, 10);
-                minHeight = parseInt(minHeight, 10);
-            }
-
-            let canvas = cropper.getCroppedCanvas({
-                    minWidth: minWidth,
-                    minHeight: minHeight
-                }
-            );
-
-            let croppedImageSrc = canvas.toDataURL('image/png');
-            document.getElementById('croppedImage').src = croppedImageSrc;
-            document.getElementById('CroppedBase64').value = croppedImageSrc;
-            this.submit();
-        });
+        );
 
-        document.getElementById('cropSize').addEventListener('change', function (e) {
-            if (e.target && e.target.matches('.form-check-input')) {
-                const newWidth = e.target.getAttribute('data-width');
-                const newHeight = e.target.getAttribute('data-height');
+        let croppedImageSrc = canvas.toDataURL('image/png');
+        document.getElementById('croppedImage').src = croppedImageSrc;
+        document.getElementById('CroppedBase64').value = croppedImageSrc;
+        this.submit();
+    });
 
-                if (newWidth && newHeight) {
-                    cropper.setCropBoxData({
-                        width: parseInt(newWidth, 10),
-                        height: parseInt(newHeight, 10)
-                    });
-                }
-            }
-        });
+    document.getElementById('cropSize').addEventListener('change', function (e) {
+        if (e.target && e.target.matches('.form-check-input')) {
+            const newWidth = e.target.getAttribute('data-width');
+            const newHeight = e.target.getAttribute('data-height');
 
-        function validateImageDimensionsData(imageWidth, imageHeight, inputWidth, inputHeight) {
-            if (imageWidth < inputWidth || imageHeight < inputHeight) {
-                return false;
+            if (newWidth && newHeight) {
+                cropper.setCropBoxData({
+                    width: parseInt(newWidth, 10),
+                    height: parseInt(newHeight, 10)
+                });
             }
         }
     });
+});