مقدمه و زمینه
تصاویر در همه جا هستند – اما اغلب آنها فاقد توصیف مناسب هستند. چه برای دسترسی ، سئو یا UX ، اضافه کردن زیرنویس های معنی دار ضروری است. اما اگر بتوانیم آنها را به طور خودکار با استفاده از هوش مصنوعی تولید کنیم ، چه می شود؟
در این مقاله ، ما شما را از طریق ساخت یک جزء Vue 3 که از API استنتاج چهره بغل استفاده می کند ، برای تولید زیرنویس های شبیه به انسان برای تصاویر بارگذاری شده استفاده خواهیم کرد. شما یاد می گیرید که چگونه یک آپلود کننده کشیدن و قطره ای ایجاد کنید ، پیش نمایش های تصویر را انجام دهید و فقط با چند خط کد ، زیرنویس های هوشمند دریافت کنید.
ایده آل برای Devs Frontend به دنبال ایجاد ویژگی های هوشمند به رابط های بصری!
اهداف و آنچه یاد خواهید گرفت
- با پایان این آموزش ، شما قادر خواهید بود:
- یک مؤلفه بارگذاری یا رها کردن یا فایل ایجاد کنید
- ارسال تصاویر به یک مدل زیرنویس تصویر AI
- پیش نمایش تصویر بارگذاری شده و عنوان AI تولید شده آن را نمایش دهید
- حالت بارگیری و خطا را با لطف انجام دهید
- قابلیت دسترسی را با ویژگی های Alt-Text یا VoiceOver افزایش دهید
پشته فنی
- VUE 3 +
- Axios برای تماس های API
- بغل کردن API استنتاج صورت (Blip یا مدل مشابه تصویر به متن)
- Tailwind CSS (اختیاری برای یک ظاهر طراحی شده)
پیش نیازهای
- یک حساب رایگان در بغل کردن صورت ایجاد کنید.
- از تنظیمات حساب خود یک نشانه API ایجاد کنید.
آن را در یک .env پرونده:VITE_HUGGINGFACE_API_KEY=your_token_here
ساخت مؤلفه: ImageCaptioner.vue
قابلیت دسترسی و پیشرفت UX
پیش نمایش تصویر: به کاربران کمک می کند تا تأیید کنند که پرونده صحیح را بارگذاری کرده اند.
حالت دکمه غیرفعال: از ارسال های مکرر جلوگیری می کند.
متن: برای دسترسی بهتر از زیرنویس تولید شده به عنوان یک ویژگی ALT استفاده کنید.
💡 نکته: می توانید Aria-Live = “مودب” را به ظرف زیرنویس اضافه کنید تا آن را دوستانه خواننده صفحه نمایش دهد.
ایده های برجسته برای پیشرفت
- یک دکمه زیرنویس کپی اضافه کنید.
- به طور خودکار زیرنویس را وارد کنید
altبرای تصویر - با استفاده از API گفتار وب ، متن به گفتار (TTS) را اضافه کنید.
- از زیرنویس های متعدد یا ترجمه با هوش مصنوعی پشتیبانی کنید.
پیوندها و منابع
بغل کردن API استنتاج صورت
مدل
3 نمایش اسناد
محور
خلاصه و نتیجه گیری
شما به تازگی یک ابزار زیرنویس تصویر هوشمند و کاربر پسند ساخته شده و با بغل کردن صورت و VUE 3 ساخته شده است. این نوع مؤلفه نمونه ای عالی از چگونگی توسعه دهندگان Frontend می تواند از هوش مصنوعی برای بهبود قابلیت استفاده و دسترسی در برنامه های دنیای واقعی استفاده کند.
فقط با چند ابزار ، می توانید رابط های استاتیک را به تجربیات هوشمند و پاسخگو تبدیل کنید – و کاربران خود را در این فرآیند خوشحال کنید.
فراخوانی به اقدام / تعامل جامعه
چه ویژگی های AI دیگری را می خواهید در اجزای VUE ببینید؟ آیا هوش مصنوعی را برای تشخیص تصویر ، برچسب زدن یا نسل Alt Text امتحان کرده اید؟
افکار ، بازخورد یا آزمایشات خود را در نظرات زیر رها کنید!
