diff --git a/src/GrampsJs.js b/src/GrampsJs.js
index b6a2905b..d68cd4fa 100644
--- a/src/GrampsJs.js
+++ b/src/GrampsJs.js
@@ -701,6 +701,7 @@ export class GrampsJs extends LitElement {
               grampsId="${this._pageId}"
               .strings="${this._strings}"
               ?canEdit="${this.canEdit}"
+              .dbInfo="${this._dbInfo}"
             ></grampsjs-view-media>
 
             <grampsjs-view-import
diff --git a/src/components/GrampsjsMediaObject.js b/src/components/GrampsjsMediaObject.js
index d5b04885..540548a9 100644
--- a/src/components/GrampsjsMediaObject.js
+++ b/src/components/GrampsjsMediaObject.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import {html, css} from 'lit'
 
-import {mdiSelectDrag} from '@mdi/js'
+import {mdiSelectDrag, mdiTextRecognition} from '@mdi/js'
 import {GrampsjsObject} from './GrampsjsObject.js'
 import './GrampsJsImage.js'
 import './GrampsjsFormEditDate.js'
@@ -9,6 +9,7 @@ import './GrampsjsFormEditTitle.js'
 import './GrampsjsFormEditMapLayer.js'
 import './GrampsjsFormSelectObject.js'
 import './GrampsjsFaces.js'
+import './GrampsjsTextRecognition.js'
 import {arrayEqual, fireEvent, getNameFromProfile} from '../util.js'
 import {renderIconSvg} from '../icons.js'
 
@@ -46,6 +47,20 @@ export class GrampsjsMediaObject extends GrampsjsObject {
           display: inline-block;
           margin-left: 0.6em;
         }
+
+        .ocr {
+          padding: 1em 1em;
+          border-radius: 16px;
+          background-color: rgba(109, 76, 65, 0.12);
+        }
+
+        .close-icon {
+          float: right;
+          size: 12px;
+          margin-right: -0.5em;
+          margin-top: -0.5em;
+          color: var(--mdc-theme-primary);
+        }
       `,
     ]
   }
@@ -55,7 +70,10 @@ export class GrampsjsMediaObject extends GrampsjsObject {
       selectedRect: {type: Object},
       deletedRects: {type: Array},
       bbox: {type: Object},
+      dbInfo: {type: Object},
+      canEdit: {type: Boolean},
       _drawing: {type: Boolean},
+      _ocr: {type: Boolean},
     }
   }
 
@@ -66,7 +84,10 @@ export class GrampsjsMediaObject extends GrampsjsObject {
     this.selectedRect = {}
     this.deletedRects = []
     this.bbox = {}
+    this.dbInfo = {}
+    this.canEdit = false
     this._drawing = false
+    this._ocr = false
   }
 
   renderProfile() {
@@ -109,6 +130,7 @@ export class GrampsjsMediaObject extends GrampsjsObject {
         : this.edit
         ? this._renderImageEdit()
         : this._renderImageNoEdit()}
+      ${this._ocr ? this._renderOcr() : ''}
 
       <grampsjs-view-media-lightbox
         id="obj-lightbox-view"
@@ -280,9 +302,50 @@ export class GrampsjsMediaObject extends GrampsjsObject {
           `
         )}
       </grampsjs-rect-container>
+
+      ${this.dbInfo?.server?.ocr
+        ? html`
+            <p>
+              <mwc-button raised @click="${this._handleOcrClick}"
+                >${renderIconSvg(
+                  mdiTextRecognition,
+                  'var(--mdc-theme-on-primary)',
+                  0,
+                  'icon'
+                )}
+                ${this._('Text Recognition')}</mwc-button
+              >
+            </p>
+          `
+        : ''}
     `
   }
 
+  _handleOcrClick() {
+    this._ocr = true
+  }
+
+  _handleCloseOcrClick() {
+    this._ocr = false
+  }
+
+  _renderOcr() {
+    return html` <div class="ocr">
+      <span class="close-icon">
+        <mwc-icon-button
+          icon="close"
+          @click="${this._handleCloseOcrClick}"
+        ></mwc-icon-button>
+      </span>
+      <grampsjs-text-recognition
+        ?canEdit="${this.canEdit}"
+        .languages="${this.dbInfo?.server?.ocr_languages ?? []}"
+        handle="${this.data.handle ?? ''}"
+        .strings="${this.strings}"
+      ></grampsjs-text-recognition>
+    </div>`
+  }
+
   _handleFaceDeselect(e) {
     this.selectedRect = {}
     this._drawing = false
diff --git a/src/components/GrampsjsTextRecognition.js b/src/components/GrampsjsTextRecognition.js
new file mode 100644
index 00000000..14814c96
--- /dev/null
+++ b/src/components/GrampsjsTextRecognition.js
@@ -0,0 +1,346 @@
+import {html, LitElement, css} from 'lit'
+import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
+import {sharedStyles} from '../SharedStyles.js'
+import {apiPost} from '../api.js'
+import {fireEvent} from '../util.js'
+
+const tesseractLanguages = {
+  afr: 'Afrikaans',
+  amh: 'አማርኛ',
+  ara: 'العربية',
+  asm: 'অসমীয়া',
+  aze: 'Azərbaycanca',
+  aze_cyrl: 'Азәрбајҹан',
+  bel: 'Беларуская',
+  ben: 'বাঙালি',
+  bod: 'བོད་ཡིག',
+  bos: 'Bosanski',
+  bre: 'Brezhoneg',
+  bul: 'Български',
+  cat: 'Català',
+  ceb: 'Sinugboanon',
+  ces: 'Čeština',
+  chi_sim: '简体中文',
+  chi_tra: '繁體中文',
+  chr: 'ᏣᎳᎩ',
+  cos: 'Corsu',
+  cym: 'Cymraeg',
+  dan: 'Dansk',
+  dan_frak: 'Dansk - Fraktur',
+  deu: 'Deutsch',
+  deu_frak: 'Deutsch - Fraktur',
+  dzo: 'རྫོང་ཁ',
+  ell: 'Ελληνικά',
+  eng: 'English',
+  enm: 'English, Middle',
+  epo: 'Esperanto',
+  est: 'Eesti',
+  eus: 'Euskara',
+  fao: 'Føroyskt',
+  fas: 'فارسی',
+  fil: 'Wikang Filipino',
+  fin: 'Suomi',
+  fra: 'Français',
+  frk: 'Deutsch - Fraktur',
+  frm: 'Français, Moyen',
+  fry: 'Frysk',
+  gla: 'Gàidhlig',
+  gle: 'Gaeilge',
+  glg: 'Galego',
+  grc: 'Ἑλληνική',
+  guj: 'ગુજરાતી',
+  hat: 'Kreyòl Ayisyen',
+  heb: 'עברית',
+  hin: 'हिन्दी',
+  hrv: 'Hrvatski',
+  hun: 'Magyar',
+  hye: 'Հայերեն',
+  iku: 'ᐃᓄᒃᑎᑐᑦ',
+  ind: 'Bahasa Indonesia',
+  isl: 'Íslenska',
+  ita: 'Italiano',
+  ita_old: 'Italiano - Vecchio',
+  jav: 'Basa Jawa',
+  jpn: '日本語',
+  kan: 'ಕನ್ನಡ',
+  kat: 'ქართული',
+  kat_old: 'ქართული - ძველი',
+  kaz: 'Қазақ',
+  khm: 'ភាសាខ្មែរ',
+  kir: 'Кыргызча',
+  kmr: 'Kurmanji',
+  kor: '한국어',
+  kor_vert: '한국어 (수직쓰기)',
+  kur: 'كوردی',
+  lao: 'ລາວ',
+  lat: 'Latina',
+  lav: 'Latviešu',
+  lit: 'Lietuvių',
+  ltz: 'Lëtzebuergesch',
+  mal: 'മലയാളം',
+  mar: 'मराठी',
+  mkd: 'Македонски',
+  mlt: 'Malti',
+  mon: 'Монгол',
+  mri: 'Te Reo Māori',
+  msa: 'Bahasa Malaysia',
+  mya: 'ဗမာ',
+  nep: 'नेपाली',
+  nld: 'Nederlands',
+  nor: 'Norsk',
+  oci: 'Occitan',
+  ori: 'ଓଡ଼ିଆ',
+  pan: 'ਪੰਜਾਬੀ',
+  pol: 'Polski',
+  por: 'Português',
+  pus: 'پښتو',
+  que: 'Runasimi',
+  ron: 'Română',
+  rus: 'Русский',
+  san: 'संस्कृतम्',
+  sin: 'සිංහල',
+  slk: 'Slovenčina',
+  slk_frak: 'Slovenčina - Fraktur',
+  slv: 'Slovenščina',
+  snd: 'سنڌي',
+  spa: 'Español',
+  spa_old: 'Español - Antiguo',
+  sqi: 'Shqip',
+  srp: 'Српски',
+  srp_latn: 'Srpski - Latinica',
+  sun: 'Basa Sunda',
+  swa: 'Kiswahili',
+  swe: 'Svenska',
+  syr: 'ܣܘܪܝ',
+  tam: 'தமிழ்',
+  tat: 'Татар',
+  tel: 'తెలుగు',
+  tgk: 'Тоҷикӣ',
+  tgl: 'Filipino',
+  tha: 'ภาษาไทย',
+  tir: 'ትግርኛ',
+  ton: 'lea faka-Tonga',
+  tur: 'Türkçe',
+  uig: 'ئۇيغۇرچە',
+  ukr: 'Українська',
+  urd: 'اردو',
+  uzb: 'Oʻzbek',
+  uzb_cyrl: 'Ўзбек',
+  vie: 'Tiếng Việt',
+  yid: 'ייִדיש',
+  yor: 'Yorùbá',
+}
+
+// Gramps to tesseract language codes
+const langMapping = {
+  ar: 'ara',
+  bg: 'bul',
+  br: 'bre',
+  ca: 'cat',
+  cs: 'ces',
+  da: 'dan',
+  de_AT: 'deu',
+  de: 'deu',
+  el: 'ell',
+  en_GB: 'eng',
+  en: 'eng',
+  eo: 'epo',
+  es: 'spa',
+  fi: 'fin',
+  fr: 'fra',
+  ga: 'gle',
+  he: 'heb',
+  hr: 'hrv',
+  hu: 'hun',
+  is: 'isl',
+  it: 'ita',
+  ja: 'jpn',
+  lt: 'lit',
+  lv: 'lav',
+  mk: 'mkd',
+  nb: 'nor',
+  nl: 'nld',
+  nn: 'nld',
+  pl: 'pol',
+  pt_BR: 'por',
+  pt_PT: 'por',
+  ro: 'ron',
+  ru: 'rus',
+  sk: 'slk',
+  sl: 'slv',
+  sq: 'sqi',
+  sr: 'srp',
+  sv: 'swe',
+  ta: 'tam',
+  tr: 'tur',
+  uk: 'ukr',
+  vi: 'vie',
+  zh_CN: 'chi_sim',
+  zh_HK: 'chi_tra',
+  zh_TW: 'chi_tra',
+}
+
+export class GrampsjsTextRecognition extends GrampsjsTranslateMixin(
+  LitElement
+) {
+  static get styles() {
+    return [
+      sharedStyles,
+      css`
+        .result {
+          font-family: var(
+            --grampsjs-note-font-family,
+            var(--grampsjs-body-font-family)
+          );
+          font-size: var(--grampsjs-note-font-size, 17px);
+          line-height: var(--grampsjs-note-line-height, 1.5em);
+          color: var(--grampsjs-note-color, #000000);
+          white-space: pre-wrap;
+        }
+      `,
+    ]
+  }
+
+  static get properties() {
+    return {
+      handle: {type: String},
+      options: {type: Object},
+      languages: {type: Array},
+      canEdit: {type: Boolean},
+      _string: {type: String},
+    }
+  }
+
+  constructor() {
+    super()
+    this.options = {}
+    this.handle = ''
+    this.languages = []
+    this.canEdit = false
+    this._string = ''
+  }
+
+  render() {
+    return html`
+      <p>
+        <mwc-select
+          outlined
+          label="${this._('Language')}"
+          @change="${this._handleLangChange}"
+        >
+          ${this.languages.map(
+            lang => html`
+              <mwc-list-item
+                value="${lang}"
+                ?selected=${lang === this.options.lang}
+                >${tesseractLanguages[lang] || lang}</mwc-list-item
+              >
+            `
+          )}
+        </mwc-select>
+      </p>
+      <p>
+        <mwc-button
+          raised
+          @click="${this._handleRun}"
+          ?disabled="${this._isDisabled()}"
+          >${this._('Run')}</mwc-button
+        >
+        <grampsjs-task-progress-indicator
+          id="indicator-ocr"
+          class="button"
+          size="20"
+          hideAfter="10"
+          @task:complete="${this._handleTaskComplete}"
+        ></grampsjs-task-progress-indicator>
+      </p>
+      <p class="result">${this._string ?? ''}</p>
+      ${this._string && this.canEdit
+        ? html`
+            <p>
+              <mwc-button raised @click="${this._handleSaveAsNote}"
+                >${this._('Save as Note')}</mwc-button
+              >
+            </p>
+          `
+        : ''}
+    `
+  }
+
+  firstUpdated() {
+    this._setLangInitial()
+  }
+
+  _setLangInitial() {
+    const locale = this.strings.__lang__ ?? ''
+    if (!locale) {
+      return
+    }
+    const lang = langMapping[locale] ?? ''
+    if (!lang) {
+      return
+    }
+    this.options = {...this.options, lang}
+  }
+
+  _isDisabled() {
+    return !(this.options.lang && this.handle)
+  }
+
+  _handleLangChange(e) {
+    this.options = {...this.options, lang: e.target.value}
+  }
+
+  async _handleRun() {
+    const prog = this.renderRoot.querySelector('#indicator-ocr')
+    prog.reset()
+    prog.open = true
+    const queryParam = new URLSearchParams(this.options).toString()
+    const url = `/api/media/${this.handle}/ocr?${queryParam}`
+    const data = await apiPost(url)
+    if ('error' in data) {
+      prog.setError()
+      prog.errorMessage = data.error
+    } else if ('task' in data) {
+      // queued task
+      prog.taskId = data.task?.id || ''
+    } else {
+      // eagerly executed task
+      this._string = data.data || ''
+      prog.setComplete()
+    }
+  }
+
+  _handleTaskComplete(e) {
+    const {status} = e.detail
+    const result = JSON.parse(status.result || {})
+    this._string = result || ''
+  }
+
+  async _handleSaveAsNote() {
+    const note = {
+      _class: 'Note',
+      type: {_class: 'NoteType', string: 'Transcript'},
+      text: {_class: 'StyledText', string: this._string},
+    }
+    const data = await apiPost('/api/notes/', note)
+    if ('error' in data) {
+      fireEvent(this, 'grampsjs:error', {message: data.error})
+    } else {
+      const [txn] = data.data
+      const gid = txn?.new?.gramps_id
+      const handle = txn?.handle
+      if (gid && handle) {
+        fireEvent(this, 'edit:action', {
+          action: 'addNoteRef',
+          data: {data: [handle]},
+        })
+      }
+    }
+  }
+}
+
+window.customElements.define(
+  'grampsjs-text-recognition',
+  GrampsjsTextRecognition
+)
diff --git a/src/icons.js b/src/icons.js
index 45a15f8a..96a04416 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -70,11 +70,12 @@ export function renderIcon(path, color = '#999999') {
   ></i>`
 }
 
-export function renderIconSvg(path, color = '#999999', rotate = 0) {
+export function renderIconSvg(path, color = '#999999', rotate = 0, slot = '') {
   return html`<svg
     height="24"
     width="24"
     viewBox="0 0 24 24"
+    slot="${slot}"
     transform="rotate(${rotate})"
   >
     <path fill="${color}" d="${path}" />
diff --git a/src/lang/en.json b/src/lang/en.json
index 41317c69..70d2d5b6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -123,5 +123,7 @@
   "Common ancestors": "Common ancestors",
   "Blocked": "Blocked",
   "Edit event type": "Edit event type",
-  "Edit place type": "Edit place type"
+  "Edit place type": "Edit place type",
+  "Text Recognition": "Text Recognition",
+  "Save as Note": "Save as Note"
 }
\ No newline at end of file
diff --git a/src/strings.js b/src/strings.js
index 53ab9fab..ae9945fd 100644
--- a/src/strings.js
+++ b/src/strings.js
@@ -534,4 +534,5 @@ export const grampsStrings = [
   'Zoom',
   "Don't use call name",
   "Wives use husband's surname (from first family listed)",
+  'Run',
 ]
diff --git a/src/views/GrampsjsViewMedia.js b/src/views/GrampsjsViewMedia.js
index 847f19dc..85c508f4 100644
--- a/src/views/GrampsjsViewMedia.js
+++ b/src/views/GrampsjsViewMedia.js
@@ -6,8 +6,15 @@ import {apiGet, apiPut} from '../api.js'
 import {objectTypeToEndpoint, arrayEqual} from '../util.js'
 
 export class GrampsjsViewMedia extends GrampsjsViewObject {
+  static get properties() {
+    return {
+      dbInfo: {type: Object},
+    }
+  }
+
   constructor() {
     super()
+    this.dbInfo = {}
     this._className = 'media'
   }
 
@@ -22,6 +29,8 @@ export class GrampsjsViewMedia extends GrampsjsViewObject {
       <grampsjs-media-object
         .data=${this._data}
         .strings=${this.strings}
+        .dbInfo=${this.dbInfo}
+        ?canEdit="${this.canEdit}"
         ?edit="${this.edit}"
         @facetag:add="${this._handleFacePerson}"
         @rect:delete="${this._handleDeleteRect}"