Merge pull request #20622 from calixteman/bug2014167

Let the toggle button in the alt-text dialog downloading (resp. delete) the model and enabling (resp. disabling) alt-text guessing (bug 2014167)

l10n/en-US/viewer.ftl

@@ -532,15 +532,6 @@ pdfjs-editor-alt-text-settings-automatic-title = Automatic alt text
 pdfjs-editor-alt-text-settings-create-model-button-label = Create alt text automatically
 pdfjs-editor-alt-text-settings-create-model-description = Suggests descriptions to help people who can’t see the image or when the image doesn’t load.
 
-# Variables:
-#   $totalSize (Number) - the total size (in MB) of the AI model.
-pdfjs-editor-alt-text-settings-download-model-label = Alt text AI model ({ $totalSize } MB)
-
-pdfjs-editor-alt-text-settings-ai-model-description = Runs locally on your device so your data stays private. Required for automatic alt text.
-pdfjs-editor-alt-text-settings-delete-model-button = Delete
-pdfjs-editor-alt-text-settings-download-model-button = Download
-pdfjs-editor-alt-text-settings-downloading-model-button = Downloading…
-
 pdfjs-editor-alt-text-settings-editor-title = Alt text editor
 pdfjs-editor-alt-text-settings-show-dialog-button-label = Show alt text editor right away when adding an image
 pdfjs-editor-alt-text-settings-show-dialog-description = Helps you make sure all your images have alt text.

test/integration/stamp_editor_spec.mjs

@@ -1174,7 +1174,9 @@ describe("Stamp Editor", () => {
       // Run sequentially to avoid clipboard issues.
       for (const [, page] of pages) {
         await page.evaluate(() => {
-          window.PDFViewerApplication.mlManager.enableAltTextModelDownload = false;
+          const { mlManager } = window.PDFViewerApplication;
+          mlManager.enableGuessAltText =
+            mlManager.enableAltTextModelDownload = false;
         });
 
         await switchToStamp(page);
@@ -1197,7 +1199,9 @@ describe("Stamp Editor", () => {
       // Run sequentially to avoid clipboard issues.
       for (const [browserName, page] of pages) {
         await page.evaluate(() => {
-          window.PDFViewerApplication.mlManager.enableAltTextModelDownload = true;
+          const { mlManager } = window.PDFViewerApplication;
+          mlManager.enableGuessAltText =
+            mlManager.enableAltTextModelDownload = true;
         });
         await switchToStamp(page);
 

web/annotation_editor_layer_builder.css

@@ -1390,22 +1390,6 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
-
-      button {
-        width: fit-content;
-      }
-
-      &.download {
-        #deleteModelButton {
-          display: none;
-        }
-      }
-
-      &:not(.download) {
-        #downloadModelButton {
-          display: none;
-        }
-      }
     }
 
     #automaticAltText,

web/new_alt_text_manager.js

@@ -122,7 +122,21 @@ class NewAltTextManager {
       });
 
       if (this.#uiManager) {
-        this.#uiManager.setPreference("enableGuessAltText", checked);
+        const isAltTextEnabled =
+          await this.#uiManager.mlManager.isEnabledFor("altText");
+        this.#createAutomaticallyButton.disabled = true;
+        if (checked && !isAltTextEnabled) {
+          this.#textarea.value = "";
+          this.#setProgress();
+          this.#uiManager.setPreference("enableGuessAltText", true);
+          await this.#uiManager.mlManager.downloadModel("altText");
+          this.#setPref("enableAltTextModelDownload", true);
+        } else if (!checked && isAltTextEnabled) {
+          this.#uiManager.setPreference("enableGuessAltText", false);
+          await this.#uiManager.mlManager.deleteModel("altText");
+          this.#setPref("enableAltTextModelDownload", false);
+        }
+        this.#createAutomaticallyButton.disabled = false;
         await this.#uiManager.mlManager.toggleService("altText", checked);
       }
       this.#toggleGuessAltText(checked, /* isInitial = */ false);
@@ -165,6 +179,14 @@ class NewAltTextManager {
     });
   }
 
+  #setPref(name, value) {
+    this.#eventBus.dispatch("setpreference", {
+      source: this,
+      name,
+      value,
+    });
+  }
+
   #toggleLoading(value) {
     if (!this.#uiManager || this.#isAILoading === value) {
       return;
@@ -180,7 +202,7 @@ class NewAltTextManager {
     this.#dialog.classList.toggle("error", value);
   }
 
-  async #toggleGuessAltText(value, isInitial = false) {
+  async #toggleGuessAltText(value, isInitial) {
     if (!this.#uiManager) {
       return;
     }
@@ -353,16 +375,15 @@ class NewAltTextManager {
     }
 
     this.#firstTime = firstTime;
-    let { mlManager } = uiManager;
-    let hasAI = !!mlManager;
+    const { mlManager } = uiManager;
+    const hasAI = !!mlManager;
     this.#toggleTitleAndDisclaimer();
 
     if (mlManager && !mlManager.isReady("altText")) {
-      hasAI = false;
       if (mlManager.hasProgress) {
         this.#setProgress();
       } else {
-        mlManager = null;
+        this.#createAutomaticallyButton.setAttribute("aria-pressed", false);
       }
     } else {
       this.#downloadModel.classList.toggle("hidden", true);
@@ -522,12 +543,8 @@ class NewAltTextManager {
 }
 
 class ImageAltTextSettings {
-  #aiModelSettings;
-
   #createModelButton;
 
-  #downloadModelButton;
-
   #dialog;
 
   #eventBus;
@@ -542,11 +559,8 @@ class ImageAltTextSettings {
     {
       dialog,
       createModelButton,
-      aiModelSettings,
       learnMore,
       closeButton,
-      deleteModelButton,
-      downloadModelButton,
       showAltTextDialogButton,
     },
     overlayManager,
@@ -554,9 +568,7 @@ class ImageAltTextSettings {
     mlManager
   ) {
     this.#dialog = dialog;
-    this.#aiModelSettings = aiModelSettings;
     this.#createModelButton = createModelButton;
-    this.#downloadModelButton = downloadModelButton;
     this.#showAltTextDialogButton = showAltTextDialogButton;
     this.#overlayManager = overlayManager;
     this.#eventBus = eventBus;
@@ -571,6 +583,7 @@ class ImageAltTextSettings {
 
     createModelButton.addEventListener("click", async e => {
       const checked = this.#togglePref("enableGuessAltText", e);
+      await (checked ? this.#download(true) : this.#delete(true));
       await mlManager.toggleService("altText", checked);
       this.#reportTelemetry({
         type: "stamp",
@@ -588,12 +601,6 @@ class ImageAltTextSettings {
       });
     });
 
-    deleteModelButton.addEventListener("click", this.#delete.bind(this, true));
-    downloadModelButton.addEventListener(
-      "click",
-      this.#download.bind(this, true)
-    );
-
     closeButton.addEventListener("click", this.#finish.bind(this));
 
     learnMore.addEventListener("click", () => {
@@ -627,29 +634,12 @@ class ImageAltTextSettings {
 
   async #download(isFromUI = false) {
     if (isFromUI) {
-      this.#downloadModelButton.disabled = true;
-      const span = this.#downloadModelButton.firstElementChild;
-      span.setAttribute(
-        "data-l10n-id",
-        "pdfjs-editor-alt-text-settings-downloading-model-button"
-      );
-
       await this.#mlManager.downloadModel("altText");
 
-      span.setAttribute(
-        "data-l10n-id",
-        "pdfjs-editor-alt-text-settings-download-model-button"
-      );
-
-      this.#createModelButton.disabled = false;
       this.#setPref("enableGuessAltText", true);
       this.#mlManager.toggleService("altText", true);
       this.#setPref("enableAltTextModelDownload", true);
-      this.#downloadModelButton.disabled = false;
     }
-
-    this.#aiModelSettings.classList.toggle("download", false);
-    this.#createModelButton.setAttribute("aria-pressed", true);
   }
 
   async #delete(isFromUI = false) {
@@ -659,14 +649,11 @@ class ImageAltTextSettings {
       this.#setPref("enableAltTextModelDownload", false);
     }
 
-    this.#aiModelSettings.classList.toggle("download", true);
-    this.#createModelButton.disabled = true;
     this.#createModelButton.setAttribute("aria-pressed", false);
   }
 
   async open({ enableGuessAltText, enableNewAltTextWhenAddingImage }) {
     const { enableAltTextModelDownload } = this.#mlManager;
-    this.#createModelButton.disabled = !enableAltTextModelDownload;
     this.#createModelButton.setAttribute(
       "aria-pressed",
       enableAltTextModelDownload && enableGuessAltText
@@ -675,10 +662,6 @@ class ImageAltTextSettings {
       "aria-pressed",
       enableNewAltTextWhenAddingImage
     );
-    this.#aiModelSettings.classList.toggle(
-      "download",
-      !enableAltTextModelDownload
-    );
 
     await this.#overlayManager.open(this.#dialog);
     this.#reportTelemetry({

web/viewer.html

@@ -1059,20 +1059,6 @@ See https://github.com/adobe-type-tools/cmap-resources
                     ></a>
                   </div>
                 </div>
-                <div id="aiModelSettings">
-                  <div>
-                    <span data-l10n-id="pdfjs-editor-alt-text-settings-download-model-label" data-l10n-args='{ "totalSize": 180 }'></span>
-                    <div id="aiModelDescription" class="description">
-                      <span data-l10n-id="pdfjs-editor-alt-text-settings-ai-model-description"></span>
-                    </div>
-                  </div>
-                  <button id="deleteModelButton" type="button" class="secondaryButton" tabindex="0">
-                    <span data-l10n-id="pdfjs-editor-alt-text-settings-delete-model-button"></span>
-                  </button>
-                  <button id="downloadModelButton" type="button" class="secondaryButton" tabindex="0">
-                    <span data-l10n-id="pdfjs-editor-alt-text-settings-download-model-button"></span>
-                  </button>
-                </div>
               </div>
             </div>
             <div class="dialogSeparator"></div>

web/viewer.js

@@ -219,10 +219,7 @@ function getViewerConfiguration() {
     altTextSettingsDialog: {
       dialog: document.getElementById("altTextSettingsDialog"),
       createModelButton: document.getElementById("createModelButton"),
-      aiModelSettings: document.getElementById("aiModelSettings"),
       learnMore: document.getElementById("altTextSettingsLearnMore"),
-      deleteModelButton: document.getElementById("deleteModelButton"),
-      downloadModelButton: document.getElementById("downloadModelButton"),
       showAltTextDialogButton: document.getElementById(
         "showAltTextDialogButton"
       ),