l10n/en-US/viewer.ftl

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

web/annotation_editor_layer_builder.css

@@ -1390,6 +1390,22 @@
       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,21 +122,7 @@ class NewAltTextManager {
       });
 
       if (this.#uiManager) {
-        const isAltTextEnabled =
+        this.#uiManager.setPreference("enableGuessAltText", checked);
-          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);
@@ -179,14 +165,6 @@ class NewAltTextManager {
     });
   }
 
-  #setPref(name, value) {
-    this.#eventBus.dispatch("setpreference", {
-      source: this,
-      name,
-      value,
-    });
-  }
-
   #toggleLoading(value) {
     if (!this.#uiManager || this.#isAILoading === value) {
       return;
@@ -202,7 +180,7 @@ class NewAltTextManager {
     this.#dialog.classList.toggle("error", value);
   }
 
-  async #toggleGuessAltText(value, isInitial) {
+  async #toggleGuessAltText(value, isInitial = false) {
     if (!this.#uiManager) {
       return;
     }
@@ -375,15 +353,16 @@ class NewAltTextManager {
     }
 
     this.#firstTime = firstTime;
-    const { mlManager } = uiManager;
+    let { mlManager } = uiManager;
-    const hasAI = !!mlManager;
+    let hasAI = !!mlManager;
     this.#toggleTitleAndDisclaimer();
 
     if (mlManager && !mlManager.isReady("altText")) {
+      hasAI = false;
       if (mlManager.hasProgress) {
         this.#setProgress();
       } else {
-        this.#createAutomaticallyButton.setAttribute("aria-pressed", false);
+        mlManager = null;
       }
     } else {
       this.#downloadModel.classList.toggle("hidden", true);
@@ -543,8 +522,12 @@ class NewAltTextManager {
 }
 
 class ImageAltTextSettings {
+  #aiModelSettings;
+
   #createModelButton;
 
+  #downloadModelButton;
+
   #dialog;
 
   #eventBus;
@@ -559,8 +542,11 @@ class ImageAltTextSettings {
     {
       dialog,
       createModelButton,
+      aiModelSettings,
       learnMore,
       closeButton,
+      deleteModelButton,
+      downloadModelButton,
       showAltTextDialogButton,
     },
     overlayManager,
@@ -568,7 +554,9 @@ class ImageAltTextSettings {
     mlManager
   ) {
     this.#dialog = dialog;
+    this.#aiModelSettings = aiModelSettings;
     this.#createModelButton = createModelButton;
+    this.#downloadModelButton = downloadModelButton;
     this.#showAltTextDialogButton = showAltTextDialogButton;
     this.#overlayManager = overlayManager;
     this.#eventBus = eventBus;
@@ -583,7 +571,6 @@ 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",
@@ -601,6 +588,12 @@ 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", () => {
@@ -634,12 +627,29 @@ 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) {
@@ -649,11 +659,14 @@ 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
@@ -662,6 +675,10 @@ class ImageAltTextSettings {
       "aria-pressed",
       enableNewAltTextWhenAddingImage
     );
+    this.#aiModelSettings.classList.toggle(
+      "download",
+      !enableAltTextModelDownload
+    );
 
     await this.#overlayManager.open(this.#dialog);
     this.#reportTelemetry({

web/viewer.html

@@ -1059,6 +1059,20 @@ 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,7 +219,10 @@ 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"
       ),