display a reminder to check important information when using AI image recognition

src/components/mobile/AIImageRecognitionSheet.vue

@@ -116,7 +116,7 @@ function confirm(): void {
 
     cancelRecognizingUuid.value = generateRandomUUID();
     recognizing.value = true;
-    showCancelableLoading('Recognizing', 'Cancel Recognition', cancelRecognize);
+    showCancelableLoading('Recognizing', 'AI can make mistakes. Check important info.', 'Cancel Recognition', cancelRecognize);
 
     transactionsStore.recognizeReceiptImage({
         imageFile: imageFile.value,

src/lib/ui/mobile.ts

@@ -288,7 +288,7 @@ export function useI18nUIComponents() {
         });
     }
 
-    function showCancelableLoading(message: string, cancelButtonText: string, cancelCallback?: (dialog: Dialog.Dialog, e: Event) => void): void {
+    function showCancelableLoading(title: string, message: string, cancelButtonText: string, cancelCallback?: (dialog: Dialog.Dialog, e: Event) => void): void {
         const cancelButton: Dialog.DialogButton = {
             text: tt(cancelButtonText),
             onClick: (dialog, event) => {
@@ -300,8 +300,8 @@ export function useI18nUIComponents() {
 
         f7ready((f7) => {
             f7.dialog.create({
-                title: tt(message),
-                content: `<div class="preloader"><span class="preloader-inner">${[0, 1, 2, 3, 4, 5, 6, 7].map(() => '<span class="preloader-inner-line"></span>').join('')}</span></div>`,
+                title: tt(title),
+                content: `<div class="preloader"><span class="preloader-inner">${[0, 1, 2, 3, 4, 5, 6, 7].map(() => '<span class="preloader-inner-line"></span>').join('')}</span></div>` + (message ? `<br/><div class="margin-top">${tt(message)}</div>` : ''),
                 cssClass: 'dialog-preloader',
                 animate: isEnableAnimate(),
                 buttons: [cancelButton]

src/locales/de.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Kategorie",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/en.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Category",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/es.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Categoría",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/fr.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Relâchez pour charger l'image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Cliquez ici pour sélectionner un reçu ou une image de transaction",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Catégorie",
     "Secondary Category": "Catégorie secondaire",
     "Expense Category": "Catégorie de dépense",

src/locales/it.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Categoria",
     "Secondary Category": "Categoria secondaria",
     "Expense Category": "Expense Category",

src/locales/ja.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "カテゴリ",
     "Secondary Category": "二次カテゴリ",
     "Expense Category": "Expense Category",

src/locales/ko.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "이미지를 로드하려면 놓으세요.",
     "Loading image...": "이미지를 로드하는 중...",
     "Click here to select a receipt or transaction image": "영수증 또는 거래 이미지를 선택하려면 여기를 클릭하세요.",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "카테고리",
     "Secondary Category": "보조 카테고리",
     "Expense Category": "지출 카테고리",

src/locales/nl.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Categorie",
     "Secondary Category": "Secundaire categorie",
     "Expense Category": "Uitgavecategorie",

src/locales/pt_BR.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Categoria",
     "Secondary Category": "Categoria Secundária",
     "Expense Category": "Expense Category",

src/locales/ru.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Категория",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/th.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "ปล่อยเพื่อโหลดรูปภาพ",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "คลิกที่นี่เพื่อเลือกใบเสร็จหรือรูปภาพรายการ",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "หมวดหมู่",
     "Secondary Category": "หมวดหมู่รอง",
     "Expense Category": "หมวดค่าใช้จ่าย",

src/locales/uk.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Категорія",
     "Secondary Category": "Вторинна категорія",
     "Expense Category": "Expense Category",

src/locales/vi.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "Release to load image",
     "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
+    "AI can make mistakes. Check important info.": "AI can make mistakes. Check important info.",
     "Category": "Danh mục",
     "Secondary Category": "Secondary Category",
     "Expense Category": "Expense Category",

src/locales/zh_Hans.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "释放以加载图片",
     "Loading image...": "正在加载图片...",
     "Click here to select a receipt or transaction image": "点击这里选择收据或交易图片",
+    "AI can make mistakes. Check important info.": "AI 可能会出错。请检查重要信息。",
     "Category": "分类",
     "Secondary Category": "二级分类",
     "Expense Category": "支出分类",

src/locales/zh_Hant.json

@@ -1749,6 +1749,7 @@
     "Release to load image": "放開以載入圖片",
     "Loading image...": "正在載入圖片...",
     "Click here to select a receipt or transaction image": "點擊這裡選擇收據或交易圖片",
+    "AI can make mistakes. Check important info.": "AI 可能會出錯。請檢查重要資訊。",
     "Category": "分類",
     "Secondary Category": "次分類",
     "Expense Category": "支出分類",

src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue

@@ -15,14 +15,15 @@
                      @drop.prevent="onDrop">
                     <div class="d-flex w-100 fill-height justify-center align-center justify-content-center px-4"
                          :class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
-                        <h3 class="pa-2 bg-grey-200" v-if="!loading && !imageFile && !isDragOver">{{ tt('You can drag and drop, paste or click to select a receipt or transaction image') }}</h3>
-                        <h3 class="pa-2 bg-grey-200" v-if="!loading && isDragOver">{{ tt('Release to load image') }}</h3>
-                        <h3 class="pa-2" v-if="loading">{{ tt('Loading image...') }}</h3>
+                        <h3 :class="{ 'pa-2': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }" v-if="!loading && !imageFile && !isDragOver">{{ tt('You can drag and drop, paste or click to select a receipt or transaction image') }}</h3>
+                        <h3 :class="{ 'pa-2': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }" v-else-if="!loading && isDragOver">{{ tt('Release to load image') }}</h3>
+                        <h3 class="pa-2" v-else-if="loading">{{ tt('Loading image...') }}</h3>
+                        <h3 :class="{ 'pa-2': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }" v-else-if="recognizing">{{ tt('AI can make mistakes. Check important info.') }}</h3>
                     </div>
                     <v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
                            :src="imageSrc" @click="showOpenImageDialog">
                         <template #placeholder>
-                            <div class="w-100 fill-height bg-grey-200"></div>
+                            <div :class="{ 'w-100 fill-height': true, 'bg-grey-200': !isDarkMode, 'bg-grey-100': isDarkMode }"></div>
                         </template>
                     </v-img>
                 </div>
@@ -50,13 +51,15 @@
 <script setup lang="ts">
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
-import { ref, useTemplateRef } from 'vue';
+import { ref, computed, useTemplateRef } from 'vue';
+import { useTheme } from 'vuetify';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useTransactionsStore } from '@/stores/transaction.ts';
 
 import { KnownFileType } from '@/core/file.ts';
+import { ThemeType } from '@/core/theme.ts';
 import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
 
 import type { RecognizedReceiptImageResponse } from '@/models/large_language_model.ts';
@@ -67,6 +70,8 @@ import logger from '@/lib/logger.ts';
 
 type SnackBarType = InstanceType<typeof SnackBar>;
 
+const theme = useTheme();
+
 const { tt } = useI18n();
 
 const transactionsStore = useTransactionsStore();
@@ -85,6 +90,8 @@ const imageFile = ref<File | null>(null);
 const imageSrc = ref<string | undefined>(undefined);
 const isDragOver = ref<boolean>(false);
 
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+
 function loadImage(file: File): void {
     loading.value = true;
     imageFile.value = null;