خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

یک ابزار طبقه بندی تصویر با ml5.js و HTML ایجاد کنید

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

یادگیری ماشینی یک فناوری اساسی در دنیای مدرن است. کامپیوترها می توانند یاد بگیرند که تصاویر را تشخیص دهند، آثار هنری خلق کنند و حتی کد خود را بنویسند، همه اینها با حداقل دخالت انسان.

اما یادگیری ماشین چگونه کار می کند و چگونه می توانید خودتان از آن استفاده کنید؟

یادگیری ماشینی چیست؟

یادگیری ماشینی یک مفهوم نسبتا ساده است. سیستم‌های رایانه‌ای می‌توانند با تجزیه و تحلیل الگوهای داده‌های موجود از مجموعه‌های اطلاعاتی یاد بگیرند و تطبیق دهند. این معمولاً بدون دستورالعمل صریح از سوی انسان انجام می شود.

یک مثال خوب در قالب ابزارهای دستیار مجازی است. سیری، کورتانا و دستیار گوگل همگی از یادگیری ماشینی برای درک گفتار انسان استفاده گسترده ای می کنند. این کار با مجموعه‌ای از ضبط‌های صوتی موجود شروع می‌شود، اما این ابزارها همچنین می‌توانند از تعاملاتی که با شما دارند یاد بگیرند. این به آنها امکان می دهد تا خودشان پیشرفت کنند.

ml5.js چیست؟

بیشتر الگوریتم ها و ابزارهای یادگیری ماشینی از R یا Python برای کد خود استفاده می کنند، اما ml5.js متفاوت است. ml5.js که به عنوان یک رابط برای کتابخانه Tensorflow.js Google عمل می کند، یک پروژه منبع باز است که یادگیری ماشین را در دست توسعه دهندگان جاوا اسکریپت قرار می دهد.

می توانید با گنجاندن یک اسکریپت خارجی در HTML خود، از ml5.js برای برنامه وب خود استفاده کنید.

شروع با یادگیری ماشینی: فرآیند یادگیری

آموزش الگوریتم یادگیری ماشین زمان بر است. کامپیوترها خیلی سریعتر از انسان ها یاد می گیرند، اما به روش های مختلف نیز یاد می گیرند. خوشبختانه، ml5.js با مجموعه ای از مدل های از پیش آموزش دیده ارائه می شود تا بتوانید از این مرحله رد شوید.

مطلب مرتبط:   نحوه استفاده از Dev Drive برای توسعه دهندگان در ویندوز 11

یادگیری نحوه آموزش الگوریتم های یادگیری ماشین راهی عالی برای درک بهتر ابزارهایی مانند این است.

یک ابزار طبقه بندی تصویر در جاوا اسکریپت بسازید

طبقه بندی کننده تصویر که ببر را شناسایی می کند

ml5.js ایجاد یک ابزار طبقه بندی تصویر را برای اجرا در وب سایت شما آسان می کند. صفحه HTML در این مثال حاوی یک فیلد ورودی فایل برای انتخاب یک تصویر است. تصاویر آپلود شده در داخل یک عنصر HTML آماده نمایش داده می شوند تا ml5.js بتوانند آنها را اسکن و شناسایی کند.

مرحله 1: کتابخانه ml5.js را وارد کنید

این پروژه برای کار به دو کتابخانه نیاز دارد: ml5.js و p5.js. ml5.js کتابخانه یادگیری ماشینی است، در حالی که p5.js امکان کار درست با تصاویر را فراهم می کند. برای افزودن این کتابخانه ها به دو خط HTML نیاز دارید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

مرحله 2: برخی از عناصر HTML را ایجاد کنید

در مرحله بعد، زمان ایجاد برخی از عناصر HTML است. مهمترین آنها یک div با شناسه و کلاس با برچسب imageResult است که نتیجه نهایی را ذخیره می کند:

<h1>MakeUseOf Image Classifier</h1>
 
<h2>Click "Choose File" to Add an Image</h2>
 
<div class="imageResult" id="imageResult"></div>

پس از این، یک عنصر ورودی فایل اضافه کنید تا تصویر را برای طبقه بندی برنامه جمع آوری کنید.

<div class="imageInput">
    <input type="file"
      oninput="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>

ورودی به یک رویداد oninput گوش می دهد و در پاسخ دو عبارت را اجرا می کند که با یک نیمه ویرگول از هم جدا شده اند. اولی یک URL شی برای تصویر ایجاد می‌کند که به شما امکان می‌دهد با داده‌ها بدون نیاز به آپلود آن در سرور کار کنید. دومی تابع startImageScan() را فراخوانی می کند که در مرحله بعد ایجاد خواهید کرد.

مطلب مرتبط:   نحوه انتشار یک بسته در npm

در نهایت یک عنصر img برای نمایش تصویری که کاربر آپلود کرده است اضافه کنید:

<img class="uploadedImage" id="uploadedImage" />

مرحله 3: یک تابع JS اسکن تصویر ایجاد کنید

اکنون که مقداری HTML دارید، وقت آن است که مقداری JS به ترکیب اضافه کنید. با افزودن یک متغیر const برای ذخیره عنصر imageResult که در مرحله آخر ایجاد کردید، شروع کنید.

const element = document.getElementById("imageResult");

سپس، تابعی به نام startImageScan() اضافه کنید و در داخل آن، طبقه‌بندی کننده تصویر ml5.js را با استفاده از MobileNet مقداردهی کنید.

این را با دستور classifier.classify دنبال کنید. برای پردازش نتیجه، یک مرجع به عنصر uploadedImage که قبلا اضافه کرده‌اید، همراه با یک تابع callback ارسال کنید.

function startImageScan() {
    // Create a variable to initialize the ml5.js image classifier with MobileNet
    const classifier = ml5.imageClassifier('MobileNet');
    classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
    element.innerHTML = "...";
}

مرحله 4: یک تابع نمایش نتایج ایجاد کنید

همچنین برای نمایش نتایج طبقه بندی تصویری که انجام داده اید به یک تابع نیاز دارید. این تابع حاوی یک دستور if ساده برای بررسی هر گونه خطا است.

function imageScanResult(error, results) {
    if (error) {
        element.innerHTML = error;
    } else {
        let num = results[0].confidence * 100;
        element.innerHTML = results[0].label + "
Confidence: " + num.toFixed(0) + "%";
    }
}

مرحله 5: همه چیز را کنار هم بگذارید

در نهایت، وقت آن است که همه این کدها را کنار هم قرار دهیم. مهم است که به تگ های ،