# Tutorials

{% file src="<https://365300985-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiA9lC8vgzEC0njLvzryR%2Fuploads%2F8T6uUFsWFc3834sXcXaT%2F0718.mp4?alt=media&token=be4ab157-006a-4053-a54d-dd59a7ec6e4c>" %}

## **How It Works**

1. User opens a project in Adobe Express.
2. Activates the Harmony Font Checker from the Add-ons panel.
3. Manually selects a text object (not grouped).
4. Clicks "Check Font and Harmony".
5. Add-on analyzes font properties, tone, and style.
6. Harmony score and tone analysis appear in the side panel.
7. User can manually adjust fonts or use the "Fix Font" button.

<figure><img src="https://365300985-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiA9lC8vgzEC0njLvzryR%2Fuploads%2Fqqlf27xxJRaM5l7Wyf0L%2Fimage.png?alt=media&#x26;token=7b114e99-cd88-4478-9d3e-66db64bdb68f" alt=""><figcaption></figcaption></figure>

## Technical Architecture & Sequence Flow

The technical workflow of Harmony Font Checker involves coordinated interactions between the user, the Adobe Express Add-on, the Document Sandbox, Adobe Fonts API, and OpenAI API. Here's how the system operates:

#### Technical Step-by-Step Description:

1. **User Interaction Initiation**
   * User selects a text object and clicks the **"Check Font Harmony"** button.
2. **Font Analysis Request**
   * The **Adobe Express Add-on** calls `checkFontHarmony()` and sends the request to the **Document Sandbox**.
3. **Metadata Retrieval**
   * The **Document Sandbox** fetches the font metadata of the selected text object.
   * It sends this metadata to **OpenAI API** to analyze font tone compatibility.
4. **Harmony Score Calculation**
   * **OpenAI API** returns a harmony score and pairing suggestions based on the prompt.
   * The Document Sandbox passes this score, message, and font data back to the add-on.
5. **User Receives Feedback**
   * The add-on displays the harmony score, tone message, and recommended pairings to the user.
6. **Font Pair Selection (Optional)**
   * The user selects a new font from the dropdown suggestion.
   * The add-on sends another call to `checkFontHarmony(font1, font2)` with the selected pair.
7. **Re-analysis and Preview**
   * The Document Sandbox sends another prompt to **OpenAI API** for the selected font combination.
   * After receiving the updated score and message, the Sandbox requests a preview of the recommended font from **Adobe Fonts API**.
   * Adobe Fonts API returns the font preview.
8. **Final Output Display**

   * The updated score, tone message, and visual preview are displayed in the feedback panel.
   * The user confirms or modifies the final font selection.

<figure><img src="https://365300985-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiA9lC8vgzEC0njLvzryR%2Fuploads%2FYwto0nkJpPXIxlYBOo19%2FAD_4nXd_nCCR6b-bf8llruzh3P1sMUQcn3vVaH0gxb-lIxW6gjjYFuPJWfBHGrC1ozPN8JoMAT9V-F_n7zoRecVspkEehtPVvtCSZziRZqbdtCkk3KJ_kLVb0e8MbfeXzN4wJ9vDnC4V%20(1).png?alt=media&#x26;token=a66d6203-14e0-46d2-aa0d-6e5a15be46d6" alt=""><figcaption></figcaption></figure>

This asynchronous, multi-service process ensures accurate tone classification and high-quality visual font pairing in real time.
