קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.

למידת מכונה היא טכנולוגיה בסיסית בעולם המודרני. מחשבים יכולים ללמוד לזהות תמונות, ליצור יצירות אמנות, ואפילו לכתוב קוד משלהם, הכל עם התערבות אנושית מינימלית.

אבל איך עובדת למידת מכונה וכיצד אתה יכול להשתמש בה בעצמך?

מהי למידת מכונה?

למידת מכונה היא מושג פשוט יחסית. מערכות מחשב יכולות ללמוד ולהסתגל על ​​ידי ניתוח דפוסי נתונים קיימים ממאגרי מידע. זה נעשה בדרך כלל ללא הנחיות מפורשות מבני אדם.

דוגמה טובה מגיעה בצורה של כלי עוזר וירטואלי. Siri, Cortana ו-Google Assistant עושות שימוש נרחב בלמידת מכונה כדי להבין דיבור אנושי. זה מתחיל עם מאגר של הקלטות אודיו קיימות, אבל הכלים האלה יכולים גם ללמוד מהאינטראקציות שיש להם איתך. זה מאפשר להם להשתפר בעצמם.

מה זה ml5.js?

רוב האלגוריתמים והכלים של למידת מכונה משתמשים ב-R או ב-Python עבור הקוד שלהם, אבל ml5.js שונה. משמש כממשק לספריית Tensorflow.js של גוגל, ml5.js הוא פרויקט בקוד פתוח המעביר למידת מכונה לידי מפתחי JavaScript.

אתה יכול להתחיל להשתמש ב-ml5.js עבור יישום האינטרנט שלך על ידי הכללת סקריפט חיצוני יחיד ב-HTML שלך.

instagram viewer

תחילת העבודה עם למידת מכונה: תהליך הלמידה

אימון אלגוריתם למידת מכונה לוקח זמן. מחשבים לומדים הרבה יותר מהר מבני אדם, אבל הם גם לומדים בדרכים שונות. עם זאת, למרבה המזל, ml5.js מגיע עם מבחר של דגמים מאומנים מראש כדי שתוכל לדלג על שלב זה.

לְמִידָה איך מתאמנים אלגוריתמי למידת מכונה היא דרך מצוינת להבין טוב יותר כלים כמו זה.

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>נְקִישָׁה "בחר קובץ" כדי להוסיף תמונה</h2>
<div class="imageResult" id="imageResult"></div>

לאחר מכן, הוסף רכיב קלט לקובץ כדי לאסוף את התמונה כדי שהתוכנית תסווג.

<div class="קלט תמונה">
<סוג קלט="קוֹבֶץ"
 oninput="uploadedImage.src=חלון. URL.createObjectURL(this.files[0]); startImageScan()">
</div>

הקלט מאזין לאירוע oninput ומבצע בתגובה שתי הצהרות, מופרדות על ידי נקודה-פסיק. הראשון יוצר כתובת URL של אובייקט עבור התמונה, המאפשרת לך לעבוד עם הנתונים מבלי להעלות אותם לשרת. השני קורא לפונקציה startImageScan() שתיצור בשלב הבא.

לבסוף, הוסף אלמנט img כדי להציג את התמונה שהמשתמש העלה:

<img class="הועלה תמונה" id="הועלה תמונה" />

שלב 3: צור פונקציית JS לסריקת תמונות

עכשיו כשיש לך קצת HTML, הגיע הזמן להוסיף קצת JS לתערובת. התחל על ידי הוספת משתנה const לאחסון האלמנט imageResult שיצרת בשלב האחרון.

const אלמנט = מסמך.getElementById("imageResult");

לאחר מכן, הוסף פונקציה הנקראת startImageScan() ובתוכה, אתחל את מיון התמונות ml5.js באמצעות MobileNet.

בצע את זה עם הפקודה classifier.classify. העבירו לו הפניה לרכיב uploadedImage שהוספתם קודם לכן, יחד עם פונקציית callback לעיבוד התוצאה.

פוּנקצִיָהstartImageScan() {
 // לִיצוֹר א מִשְׁתַנֶהל אתחל את סיווג התמונות ml5.js עם MobileNet
 const classifier = ml5.imageClassifier('MobileNet');
 classifier.classify (document.getElementById("הועלה תמונה"), imageScanResult);
 element.innerHTML = "...";
}

שלב 4: צור פונקציית תצוגת תוצאות

אתה גם צריך פונקציה כדי להציג את התוצאות של סיווג התמונה שביצעת. פונקציה זו מכילה משפט if פשוט לבדיקת שגיאות כלשהן.

פוּנקצִיָהimageScanResult(שגיאה, תוצאות) {
 if (שגיאה) {
 element.innerHTML = error;
 } אַחֵר {
לתת מספר = תוצאות[0].confidence * 100;
 element.innerHTML = results[0].label + "<br>אֵמוּן: " + num.toFixed (0) + "%";
 }
}

שלב 5: חבר את הכל ביחד

לבסוף, הגיע הזמן לחבר את כל הקוד הזה ביחד. חשוב להיות מודעים ל

,