ساخت یک برنامه هوشمند ردیابی بازپرداخت با استفاده از OCR با ToolJet + Gemini API

معرفی

این آموزش شما را در ساخت یک برنامه هوشمند ردیابی بازپرداخت با OCR با استفاده از ToolJet و Gemini API راهنمایی می کند. این برنامه به کاربران امکان می دهد تصاویر رسیدها را آپلود کنند، متن را با استفاده از OCR از تصاویر استخراج کنند و اطلاعات استخراج شده را در پایگاه داده ذخیره کنند. ما همچنین یک ادغام AWS S3 را برای ذخیره تصاویر رسید اضافه خواهیم کرد.

پیش نیازها:

در اینجا یک پیش نمایش سریع از برنامه نهایی ما آمده است:

ساختن رابط کاربری ما

• به حساب ToolJet خود وارد شوید. به داشبورد ToolJet بروید و روی آن کلیک کنید برنامه جدید ایجاد کنید دکمه در گوشه بالا سمت چپ ToolJet دارای بیش از 45 جزء داخلی است. این به ما این امکان را می دهد که در کمترین زمان رابط کاربری خود را راه اندازی کنیم.
• بکشید و رها کنید ظرف جزء روی بوم از کتابخانه مؤلفه در سمت راست. ارتفاع و عرض را تنظیم کنید ظرف جزء مناسب
• به طور مشابه، آن را بکشید و رها کنید آیکون و دو متن اجزای داخل ظرف شما ما از این دو استفاده خواهیم کرد متن اجزای هدر و متن آموزشی ما.
• انتخاب کنید آیکون جزء، به پنل خصوصیات آن در سمت راست بروید و آن را انتخاب کنید ZoomMoney نماد زیر آن آیکون ویژگی.
• اندازه فونت و محتوای آن را تغییر دهید متن جزء مناسب
• بکشید و رها کنید انتخاب کننده فایل و دکمه جزء داخل ظرف شما ما استفاده خواهیم کرد انتخاب کننده فایل مؤلفه ای که به کاربران امکان می دهد تصاویر رسیدهای خود را آپلود کنند. این دکمه جزء برای راه اندازی استفاده خواهد شد OCR روند.
• تغییر نام دهید انتخاب کننده فایل جزء به فایل آپلود کننده.
• عرض را تنظیم کنید انتخاب کننده فایل جزء با توجه به ترجیح شما
• رنگ و متن را تغییر دهید دکمه جزء با توجه به ترجیح شما

ما رابط کاربری را برای بارگذاری رسیدها پیاده سازی کرده ایم. گام بعدی ایجاد رابط کاربری برای مدیران برای تأیید یا رد هزینه ارسالی است.

• کلیک کنید روی صفحات نماد سمت چپ صفحه نمایش در هدر پانل Pages، روی آن کلیک کنید + را فشار دهید تا یک صفحه جدید ایجاد کنید.
• بکشید و رها کنید ظرف جزء روی بوم ارتفاع و عرض را تنظیم کنید ظرف جزء مناسب
• بکشید و رها کنید آیکون و الف متن جزء داخل ظرف شما ما از این دو جزء برای لوگو و متن هدر خود استفاده خواهیم کرد.
• بکشید و رها کنید جدول جزء داخل ظرف ما استفاده خواهیم کرد جدول جزء برای نمایش لیست هزینه های ارسالی. بعداً نیز اضافه خواهیم کرد عمل دکمه هایی برای تأیید، رد و مشاهده تصویر رسید برای هر ارسال.
• بکشید و رها کنید مدال جزء داخل ظرف باز کن مدال جزء را بکشید و رها کنید HTML جزء داخل Modal. ما از مؤلفه HTML برای نمایش تصویر رسید استفاده خواهیم کرد.

ایجاد پرس و جو

ابزار جت امکان اتصال به API های شخص ثالث را با استفاده از ویژگی پرس و جو REST API آن فراهم می کند. ما از این برای اتصال به جوزا API برای استخراج متن از تصاویر رسید آپلود شده. ToolJet با یکپارچه سازی داخلی همراه است AWS S3، از این برای ذخیره تصاویر رسید استفاده می کنیم.

• با استفاده از ویژگی Workspace Constants ToolJet، یک ثابت جدید به نام ایجاد کنید GEMINI_API_KEY با کلید Gemini API خود.
• در پانل پرس و جو، روی + اضافه کردن را فشار دهید و انتخاب کنید REST API گزینه.
• نام پرس و جو را به ExtractTextFromImage. در پارامتر درخواست، را انتخاب کنید پست به عنوان Method از منوی کشویی و URL زیر را جایگذاری کنید.

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

• به بخش Body در extractTextFromImage بروید. روشن کنید JSON خام و کد زیر را وارد کنید:

{{
    `{
     "contents": [{
       "parts": [{
         "text": "In this image of a receipt, analyze the receipt image and return the following information in JSON format without any formatting or syntax highlighting: total_amount, date"
        },
        {
            "inline_data": {
              "mime_type":"image/jpeg",
              "data": "${components.fileUploader.file[0].base64Data}"
            }
          },],
      },],
    }`
  }}

• در مرحله بعد، یک کوئری برای ذخیره متن استخراج شده در پایگاه داده ToolJet ایجاد می کنیم.

• کلیک کنید روی ابزار جت لوگو در گوشه سمت چپ بالا و گزینه Database را انتخاب کنید.

• کلیک کنید روی جدول جدید ایجاد کنید را فشار دهید و جدول را reimbursement_requests نامگذاری کنید. ستون های زیر را به جدول اضافه کنید: شناسه، نام، پست الکترونیک، total_amount، وضعیت و تاریخ دریافت.

• به پنل Query برگردید و روی آن کلیک کنید + اضافه کردن دکمه. گزینه ToolJet Database را انتخاب کنید.

• نام پرس و جو را به addReceiptData.

• انتخاب کنید reimbursement_درخواستها نام جدول از منوی کشویی

• در قسمت کشویی Operation، Create row را انتخاب کنید و داده های زیر را برای ستون ها وارد کنید.

• در مرحله بعد، یک کوئری برای ذخیره تصویر رسید در سطل AWS S3 ایجاد می کنیم.

• یک منبع داده جدید برای اتصال به AWS S3 با استفاده از ادغام داخلی ToolJet AWS S3 ایجاد کنید.

• کلیک کنید روی + اضافه کردن در پنل Query را فشار دهید و منبع داده جدید AWS S3 را انتخاب کنید.

• نام پرس و جو را به addToS3 و عملیات را به عنوان انتخاب کنید بارگذاری شی.

• داده های زیر را برای ستون ها اضافه کنید:

در مرحله بعد، ما درخواستی را برای دریافت لیست هزینه های ارسالی از پایگاه داده ToolJet ایجاد می کنیم.

• روی دکمه + Add در پنل Query کلیک کنید و گزینه ToolJet Database را انتخاب کنید و نام درخواست را به دریافت ReimbursementRequests.

• انتخاب کنید reimbursement_درخواستها جدول از منوی کشویی

• در کشویی Operation، را انتخاب کنید ردیف ها را فهرست کنید.

• برای اطمینان از اینکه پرس و جو در هر بار بارگیری برنامه اجرا می شود، آن را فعال کنید این پرس و جو در بارگذاری برنامه اجرا شود؟ تغییر وضعیت.

• در مرحله بعد، دو کوئری دیگر از پایگاه داده ToolJet ایجاد کنید تا هزینه ارسالی را تأیید و رد کنید، به نام تایید درخواست و رد درخواست.

• برای هر دوی این پرس و جوها را انتخاب کنید reimbursement_درخواستها جدول و انتخاب کنید به روز رسانی ردیف عملیات و استفاده از فیلد فیلتر برای مطابقت با شناسه ردیفی که باید با استفاده از به‌روزرسانی شود {{components.reimbursementRequestsTable.selectedRow.id}} متغیر.

• در قسمت ستون‌ها، ستون وضعیت را به تأیید شده برای آن به‌روزرسانی کنید تایید درخواست پرس و جو و برای رد شد رد درخواست پرس و جو.

بیایید آخرین درخواست خود را برای دریافت تصویر رسید از سطل AWS S3 اضافه کنیم.

• روی دکمه + Add در پنل Query کلیک کنید و منبع داده AWS S3 را انتخاب کنید و نام پرس و جو را به getReceiptImage و داده های زیر را وارد کنید.

اتصال پرس و جو به اجزای UI

اکنون که با موفقیت UI و پرس و جوهای خود را ساخته ایم، گام بعدی ادغام آنها است.

• انتخاب کنید دکمه کامپوننت و به پانل خصوصیات سمت راست بروید. کلیک کنید روی + مدیریت رویداد جدید دکمه. تغییر دادن عمل به پرس و جو را اجرا کنید و انتخاب کنید ExtractTextFromImage پرس و جو.

• بعد، به مسیر بروید ExtractTextFromImage پرس و جو کنید و روی آن کلیک کنید + مدیریت رویداد جدید دکمه. تغییر دادن عمل به پرس و جو را اجرا کنید و انتخاب کنید addReceiptData پرس و جو.

• حرکت به addReceiptData پرس و جو کنید و روی آن کلیک کنید + مدیریت رویداد جدید دکمه. تغییر دادن عمل به پرس و جو را اجرا کنید و انتخاب کنید addToS3 پرس و جو.

• ویژگی رسیدهای آپلود ما اکنون کامل شده است. می‌توانید با آپلود یک تصویر رسید، این موضوع را آزمایش کنید و داده‌های استخراج‌شده را در پایگاه داده ToolJet خود تأیید کنید.

در مرحله بعد، ویژگی تایید مدیر را پیاده سازی می کنیم.

• به صفحه مدیریت بروید و آن را انتخاب کنید جدول جزء. در پنل خصوصیات سمت راست وارد شوید {{queries.getReimbursementRequests.data}} در قسمت Data

• کلیک کنید روی + دکمه اکشن جدید در پانل ویژگی ها و ایجاد سه دکمه اکشن جدید: تایید، رد کردن، و مشاهده رسید. را ببندید تایید درخواست و رد درخواست به دکمه های اقدام مربوطه با استفاده از Event Handlers.

• رنگ پس‌زمینه و متن دکمه‌های اکشن را مطابق با اولویت خود تغییر دهید.

• کلیک کنید روی مشاهده رسید دکمه اقدام و افزودن یک کنترل کننده رویداد جدید. Action را به Open Modal تغییر دهید و آن را انتخاب کنید displayReceiptImage معین

• حرکت به displayReceiptImage modal و در پنل خواص سمت راست، تیک Use را بردارید دکمه ماشه پیش فرض تغییر وضعیت.

• در داخل مدال، روی آن کلیک کنید HTML جزء و وارد کنید در قسمت HTML خام

نتیجه

تبریک می گویم! با استفاده از ToolJet و Gemini API با موفقیت یک برنامه ردیابی بازپرداخت قدرتمند با قابلیت های OCR ساخته اید. اکنون می توانید هزینه های ارسالی را به راحتی پیگیری و مدیریت کنید. با افزودن ویژگی‌ها و قابلیت‌های بیشتر، می‌توانید برنامه را بیشتر سفارشی کنید.
برای یادگیری و کاوش بیشتر در مورد ToolJet، اسناد ToolJet را بررسی کنید یا با ما تماس بگیرید و سوالات خود را در Slack ارسال کنید.