\n \u003C/div>\n \u003Cinput type=\"file\" accept=\"image/*\" class=\"file-input w-full max-w-xs mb-2\" alt=\"Image Input\" @change=\"handleImageUpload\" />\n \u003Cbutton class=\"btn btn-primary w-32\" @click=\"processImage\" :disabled=\"!isImageSelected\">Classify or Recognize\u003C/button>\n \u003C/div>\n\u003C/template>\n","vue",[363,2465,2466,2478,2496,2512,2547,2585,2594,2648,2700,2709],{"__ignoreMap":365},[1665,2467,2468,2471,2475],{"class":1667,"line":1668},[1665,2469,2470],{"class":2173},"\u003C",[1665,2472,2474],{"class":2473},"s9eBZ","template",[1665,2476,2477],{"class":2173},">\n",[1665,2479,2480,2483,2485,2488,2491,2494],{"class":1667,"line":779},[1665,2481,2482],{"class":2173}," \u003C",[1665,2484,1599],{"class":2473},[1665,2486,2487],{"class":1671}," class",[1665,2489,2490],{"class":2173},"=",[1665,2492,2493],{"class":1675},"\"flex flex-col items-center\"",[1665,2495,2477],{"class":2173},[1665,2497,2498,2501,2503,2505,2507,2510],{"class":1667,"line":782},[1665,2499,2500],{"class":2173}," \u003C",[1665,2502,1599],{"class":2473},[1665,2504,2487],{"class":1671},[1665,2506,2490],{"class":2173},[1665,2508,2509],{"class":1675},"\"indicator\"",[1665,2511,2477],{"class":2173},[1665,2513,2514,2517,2519,2523,2525,2528,2531,2533,2535,2537,2540,2543,2545],{"class":1667,"line":1718},[1665,2515,2516],{"class":2173}," \u003C",[1665,2518,1665],{"class":2473},[1665,2520,2522],{"class":2521},"szBVR"," v-if",[1665,2524,2490],{"class":2173},[1665,2526,2527],{"class":1675},"\"",[1665,2529,2530],{"class":2173},"loadingImage",[1665,2532,2527],{"class":1675},[1665,2534,2487],{"class":1671},[1665,2536,2490],{"class":2173},[1665,2538,2539],{"class":1675},"\"indicator-item indicator-center indicator-middle badge badge-primary\"",[1665,2541,2542],{"class":2173},">Uploading Image...\u003C/",[1665,2544,1665],{"class":2473},[1665,2546,2477],{"class":2173},[1665,2548,2549,2551,2553,2556,2558,2560,2562,2565,2567,2570,2572,2575,2577,2579,2582],{"class":1667,"line":1724},[1665,2550,2516],{"class":2173},[1665,2552,36],{"class":2473},[1665,2554,2555],{"class":2173}," :",[1665,2557,2150],{"class":1671},[1665,2559,2490],{"class":2173},[1665,2561,2527],{"class":1675},[1665,2563,2564],{"class":2173},"previewImage",[1665,2566,2527],{"class":1675},[1665,2568,2569],{"class":1671}," alt",[1665,2571,2490],{"class":2173},[1665,2573,2574],{"class":1675},"\"Input Image\"",[1665,2576,2487],{"class":1671},[1665,2578,2490],{"class":2173},[1665,2580,2581],{"class":1675},"\"w-96 h-96 my-2 rounded\"",[1665,2583,2584],{"class":2173}," />\n",[1665,2586,2587,2590,2592],{"class":1667,"line":1925},[1665,2588,2589],{"class":2173}," \u003C/",[1665,2591,1599],{"class":2473},[1665,2593,2477],{"class":2173},[1665,2595,2596,2598,2601,2604,2606,2609,2612,2614,2617,2619,2621,2624,2626,2628,2631,2634,2637,2639,2641,2644,2646],{"class":1667,"line":2034},[1665,2597,2500],{"class":2173},[1665,2599,2600],{"class":2473},"input",[1665,2602,2603],{"class":1671}," type",[1665,2605,2490],{"class":2173},[1665,2607,2608],{"class":1675},"\"file\"",[1665,2610,2611],{"class":1671}," accept",[1665,2613,2490],{"class":2173},[1665,2615,2616],{"class":1675},"\"image/*\"",[1665,2618,2487],{"class":1671},[1665,2620,2490],{"class":2173},[1665,2622,2623],{"class":1675},"\"file-input w-full max-w-xs mb-2\"",[1665,2625,2569],{"class":1671},[1665,2627,2490],{"class":2173},[1665,2629,2630],{"class":1675},"\"Image Input\"",[1665,2632,2633],{"class":2173}," @",[1665,2635,2636],{"class":1671},"change",[1665,2638,2490],{"class":2173},[1665,2640,2527],{"class":1675},[1665,2642,2643],{"class":2173},"handleImageUpload",[1665,2645,2527],{"class":1675},[1665,2647,2584],{"class":2173},[1665,2649,2650,2652,2655,2657,2659,2662,2664,2667,2669,2671,2674,2676,2678,2681,2683,2685,2688,2691,2693,2696,2698],{"class":1667,"line":2040},[1665,2651,2500],{"class":2173},[1665,2653,2654],{"class":2473},"button",[1665,2656,2487],{"class":1671},[1665,2658,2490],{"class":2173},[1665,2660,2661],{"class":1675},"\"btn btn-primary w-32\"",[1665,2663,2633],{"class":2173},[1665,2665,2666],{"class":1671},"click",[1665,2668,2490],{"class":2173},[1665,2670,2527],{"class":1675},[1665,2672,2673],{"class":2173},"processImage",[1665,2675,2527],{"class":1675},[1665,2677,2555],{"class":2173},[1665,2679,2680],{"class":1671},"disabled",[1665,2682,2490],{"class":2173},[1665,2684,2527],{"class":1675},[1665,2686,2687],{"class":2521},"!",[1665,2689,2690],{"class":2173},"isImageSelected",[1665,2692,2527],{"class":1675},[1665,2694,2695],{"class":2173},">Classify or Recognize\u003C/",[1665,2697,2654],{"class":2473},[1665,2699,2477],{"class":2173},[1665,2701,2702,2705,2707],{"class":1667,"line":2046},[1665,2703,2704],{"class":2173}," \u003C/",[1665,2706,1599],{"class":2473},[1665,2708,2477],{"class":2173},[1665,2710,2711,2714,2716],{"class":1667,"line":2052},[1665,2712,2713],{"class":2173},"\u003C/",[1665,2715,2474],{"class":2473},[1665,2717,2477],{"class":2173},[17,2719,2720],{},"Here, we will take an image from the user and trigger its classification/recognition through a button.",[40,2722,2724],{"id":2723},"functions",[21,2725,2726],{},"Functions",[1817,2728],{"src":2729,"width":1820,"height":2730,"frameBorder":1821,"className":2731,"allowFullScreen":807},"https://giphy.com/embed/26tn33aiTi1jkl6H6",270,[1823],[17,2733,2734],{},"In this stage, instead of explaining the code step by step, I’ll share the entire code with you and explain its functions.",[356,2736,2738],{"className":1836,"code":2737,"language":1838,"meta":365,"style":365},"import { ref, computed } from 'vue';\n// Import the classifyImage and loadModel functions from the tensorflowImageClassifier module\nimport { classifyImage, loadModel } from '@/utils/tensorflowImageClassifier';\n// Create a reactive array to hold image classification results\nconst classificationResults = ref([]);\n// Create a reactive variable to hold the preview image URL, initially set with a placeholder URL\nconst previewImage = ref(\"\u003Chttps://placehold.co/600x600>\");\n// Create a reactive boolean variable to track the loading status of the image\nconst loadingImage = ref(false);\n// Define custom events to be used within the component using the defineEmits function of Vue.js\nconst emit = defineEmits(['getResult', 'getProducts']);\n// Create a computed property to check whether the user has selected an image\nconst isImageSelected = computed(() => previewImage.value !== \"\u003Chttps://placehold.co/600x600>\");\n// Event handler function triggered when the user selects a file\nconst handleImageUpload = (event) => {\n const file = event.target.files[0]; // Get the selected file\n const image = new Image(); // Create a new HTML image element\n const reader = new FileReader(); // Create a FileReader for file reading operations\n // When the file reading process starts\n reader.onloadstart = () => {\n previewImage.value = previewImage; // Set the preview image (this line seems to have no correct function)\n loadingImage.value = true; // Set the image loading status to true\n };\n // When the file reading process is completed\n reader.onloadend = () => {\n loadingImage.value = false; // Set the image loading status to false\n image.src = reader.result; // Set the source of the image element with the read data\n previewImage.value = reader.result; // Set the preview image with the read data\n };\n // Start the reading process by converting the file to base64 format\n reader.readAsDataURL(file);\n};\n// Event handler function that initiates image classification\nconst processImage = async () => {\n if (previewImage.value) { // If a preview image is available\n const image = new Image(); // Create a new HTML image element\n image.src = previewImage.value; // Set the source of the image element with the preview image URL\n await loadModel(); // Load the TensorFlow model\n classificationResults.value = await classifyImage(image); // Classify the image and assign the results to classificationResults\n emit('getResult', classificationResults.value); // Trigger the 'getResult' event and pass the results to upper-level components\n emit('getProducts', classificationResults.value); // Trigger the 'getProducts' event and pass the results to upper-level components\n }\n};\n",[363,2739,2740,2745,2750,2755,2760,2765,2770,2775,2780,2785,2790,2795,2800,2805,2810,2815,2820,2825,2830,2835,2840,2845,2850,2856,2862,2868,2874,2880,2886,2891,2897,2903,2909,2915,2921,2927,2933,2939,2945,2951,2957,2963,2968],{"__ignoreMap":365},[1665,2741,2742],{"class":1667,"line":1668},[1665,2743,2744],{},"import { ref, computed } from 'vue';\n",[1665,2746,2747],{"class":1667,"line":779},[1665,2748,2749],{},"// Import the classifyImage and loadModel functions from the tensorflowImageClassifier module\n",[1665,2751,2752],{"class":1667,"line":782},[1665,2753,2754],{},"import { classifyImage, loadModel } from '@/utils/tensorflowImageClassifier';\n",[1665,2756,2757],{"class":1667,"line":1718},[1665,2758,2759],{},"// Create a reactive array to hold image classification results\n",[1665,2761,2762],{"class":1667,"line":1724},[1665,2763,2764],{},"const classificationResults = ref([]);\n",[1665,2766,2767],{"class":1667,"line":1925},[1665,2768,2769],{},"// Create a reactive variable to hold the preview image URL, initially set with a placeholder URL\n",[1665,2771,2772],{"class":1667,"line":2034},[1665,2773,2774],{},"const previewImage = ref(\"\u003Chttps://placehold.co/600x600>\");\n",[1665,2776,2777],{"class":1667,"line":2040},[1665,2778,2779],{},"// Create a reactive boolean variable to track the loading status of the image\n",[1665,2781,2782],{"class":1667,"line":2046},[1665,2783,2784],{},"const loadingImage = ref(false);\n",[1665,2786,2787],{"class":1667,"line":2052},[1665,2788,2789],{},"// Define custom events to be used within the component using the defineEmits function of Vue.js\n",[1665,2791,2792],{"class":1667,"line":2058},[1665,2793,2794],{},"const emit = defineEmits(['getResult', 'getProducts']);\n",[1665,2796,2797],{"class":1667,"line":2064},[1665,2798,2799],{},"// Create a computed property to check whether the user has selected an image\n",[1665,2801,2802],{"class":1667,"line":2070},[1665,2803,2804],{},"const isImageSelected = computed(() => previewImage.value !== \"\u003Chttps://placehold.co/600x600>\");\n",[1665,2806,2807],{"class":1667,"line":2076},[1665,2808,2809],{},"// Event handler function triggered when the user selects a file\n",[1665,2811,2812],{"class":1667,"line":2082},[1665,2813,2814],{},"const handleImageUpload = (event) => {\n",[1665,2816,2817],{"class":1667,"line":2088},[1665,2818,2819],{}," const file = event.target.files[0]; // Get the selected file\n",[1665,2821,2822],{"class":1667,"line":2094},[1665,2823,2824],{}," const image = new Image(); // Create a new HTML image element\n",[1665,2826,2827],{"class":1667,"line":2305},[1665,2828,2829],{}," const reader = new FileReader(); // Create a FileReader for file reading operations\n",[1665,2831,2832],{"class":1667,"line":2317},[1665,2833,2834],{}," // When the file reading process starts\n",[1665,2836,2837],{"class":1667,"line":2329},[1665,2838,2839],{}," reader.onloadstart = () => {\n",[1665,2841,2842],{"class":1667,"line":2339},[1665,2843,2844],{}," previewImage.value = previewImage; // Set the preview image (this line seems to have no correct function)\n",[1665,2846,2847],{"class":1667,"line":2345},[1665,2848,2849],{}," loadingImage.value = true; // Set the image loading status to true\n",[1665,2851,2853],{"class":1667,"line":2852},23,[1665,2854,2855],{}," };\n",[1665,2857,2859],{"class":1667,"line":2858},24,[1665,2860,2861],{}," // When the file reading process is completed\n",[1665,2863,2865],{"class":1667,"line":2864},25,[1665,2866,2867],{}," reader.onloadend = () => {\n",[1665,2869,2871],{"class":1667,"line":2870},26,[1665,2872,2873],{}," loadingImage.value = false; // Set the image loading status to false\n",[1665,2875,2877],{"class":1667,"line":2876},27,[1665,2878,2879],{}," image.src = reader.result; // Set the source of the image element with the read data\n",[1665,2881,2883],{"class":1667,"line":2882},28,[1665,2884,2885],{}," previewImage.value = reader.result; // Set the preview image with the read data\n",[1665,2887,2889],{"class":1667,"line":2888},29,[1665,2890,2855],{},[1665,2892,2894],{"class":1667,"line":2893},30,[1665,2895,2896],{}," // Start the reading process by converting the file to base64 format\n",[1665,2898,2900],{"class":1667,"line":2899},31,[1665,2901,2902],{}," reader.readAsDataURL(file);\n",[1665,2904,2906],{"class":1667,"line":2905},32,[1665,2907,2908],{},"};\n",[1665,2910,2912],{"class":1667,"line":2911},33,[1665,2913,2914],{},"// Event handler function that initiates image classification\n",[1665,2916,2918],{"class":1667,"line":2917},34,[1665,2919,2920],{},"const processImage = async () => {\n",[1665,2922,2924],{"class":1667,"line":2923},35,[1665,2925,2926],{}," if (previewImage.value) { // If a preview image is available\n",[1665,2928,2930],{"class":1667,"line":2929},36,[1665,2931,2932],{}," const image = new Image(); // Create a new HTML image element\n",[1665,2934,2936],{"class":1667,"line":2935},37,[1665,2937,2938],{}," image.src = previewImage.value; // Set the source of the image element with the preview image URL\n",[1665,2940,2942],{"class":1667,"line":2941},38,[1665,2943,2944],{}," await loadModel(); // Load the TensorFlow model\n",[1665,2946,2948],{"class":1667,"line":2947},39,[1665,2949,2950],{}," classificationResults.value = await classifyImage(image); // Classify the image and assign the results to classificationResults\n",[1665,2952,2954],{"class":1667,"line":2953},40,[1665,2955,2956],{}," emit('getResult', classificationResults.value); // Trigger the 'getResult' event and pass the results to upper-level components\n",[1665,2958,2960],{"class":1667,"line":2959},41,[1665,2961,2962],{}," emit('getProducts', classificationResults.value); // Trigger the 'getProducts' event and pass the results to upper-level components\n",[1665,2964,2966],{"class":1667,"line":2965},42,[1665,2967,2342],{},[1665,2969,2971],{"class":1667,"line":2970},43,[1665,2972,2908],{},[48,2974,2975,2981,2986,2995,3004,3009],{},[51,2976,2977,2980],{},[21,2978,2979],{},"classificationResults",": An array holding the results of image classification.",[51,2982,2983,2985],{},[21,2984,2564],{},": A string holding the URL of the user-uploaded or selected image for preview. Initially starts with a placeholder URL.",[51,2987,2988,2990,2991,2994],{},[21,2989,2530],{},": A boolean variable indicating the loading status of the image. Initially set to ",[21,2992,2993],{},"false"," and updated within the function.",[51,2996,2997,2999,3000,3003],{},[21,2998,2690],{},": A computed property checking whether the user has selected an image, determining the enable/disable status of the \"",[121,3001,3002],{},"Classify","\" button. It checks if the preview URL is different from the placeholder.",[51,3005,3006,3008],{},[21,3007,2643],{},": This function is triggered when the user selects a file. It reads the content of the selected file and converts it into an image for preview. It also shows a loading element while the image is being loaded.",[51,3010,3011,3013,3014,3016,3017,1745,3020,3023],{},[21,3012,2673],{},": This function initiates the image classification process. If a preview image is available, it loads a pre-trained model and classifies the image. The results are stored in ",[21,3015,2979],{},", and events (",[121,3018,3019],{},"getResult",[121,3021,3022],{},"getProducts",") are emitted to pass the results to upper-level components.",[17,3025,3026],{},[121,3027,3028],{},[21,3029,2426],{},[356,3031,3033],{"className":2461,"code":3032,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\ndefineProps({\n labels: Array\n});\n\u003C/script>\n\u003Ctemplate>\n \u003Cdiv class=\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\">\n \u003Ch2 class=\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\">Classification Result\u003C/h2>\n \u003Cul>\n \u003Cli v-for=\"(result, index) in labels\" :key=\"index\" class=\"mb-2 p-2 border rounded\">\n \u003Cspan class=\"font-semibold text-slate-600 dark:text-slate-400\">{{ result.label }}\u003C/span> - {{ (result.probability).toFixed(2) }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n",[363,3034,3035,3047,3055,3060,3065,3073,3081,3096,3116,3124,3171,3205,3214,3222,3230],{"__ignoreMap":365},[1665,3036,3037,3039,3042,3045],{"class":1667,"line":1668},[1665,3038,2470],{"class":2173},[1665,3040,3041],{"class":2473},"script",[1665,3043,3044],{"class":1671}," setup",[1665,3046,2477],{"class":2173},[1665,3048,3049,3052],{"class":1667,"line":779},[1665,3050,3051],{"class":1671},"defineProps",[1665,3053,3054],{"class":2173},"({\n",[1665,3056,3057],{"class":1667,"line":782},[1665,3058,3059],{"class":2173}," labels: Array\n",[1665,3061,3062],{"class":1667,"line":1718},[1665,3063,3064],{"class":2173},"});\n",[1665,3066,3067,3069,3071],{"class":1667,"line":1724},[1665,3068,2713],{"class":2173},[1665,3070,3041],{"class":2473},[1665,3072,2477],{"class":2173},[1665,3074,3075,3077,3079],{"class":1667,"line":1925},[1665,3076,2470],{"class":2173},[1665,3078,2474],{"class":2473},[1665,3080,2477],{"class":2173},[1665,3082,3083,3085,3087,3089,3091,3094],{"class":1667,"line":2034},[1665,3084,2482],{"class":2173},[1665,3086,1599],{"class":2473},[1665,3088,2487],{"class":1671},[1665,3090,2490],{"class":2173},[1665,3092,3093],{"class":1675},"\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\"",[1665,3095,2477],{"class":2173},[1665,3097,3098,3100,3102,3104,3106,3109,3112,3114],{"class":1667,"line":2040},[1665,3099,2500],{"class":2173},[1665,3101,889],{"class":2473},[1665,3103,2487],{"class":1671},[1665,3105,2490],{"class":2173},[1665,3107,3108],{"class":1675},"\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\"",[1665,3110,3111],{"class":2173},">Classification Result\u003C/",[1665,3113,889],{"class":2473},[1665,3115,2477],{"class":2173},[1665,3117,3118,3120,3122],{"class":1667,"line":2046},[1665,3119,2500],{"class":2173},[1665,3121,48],{"class":2473},[1665,3123,2477],{"class":2173},[1665,3125,3126,3128,3130,3133,3135,3137,3140,3143,3146,3148,3150,3153,3155,3157,3160,3162,3164,3166,3169],{"class":1667,"line":2052},[1665,3127,2516],{"class":2173},[1665,3129,51],{"class":2473},[1665,3131,3132],{"class":2521}," v-for",[1665,3134,2490],{"class":2173},[1665,3136,2527],{"class":1675},[1665,3138,3139],{"class":2173},"(result, index) ",[1665,3141,3142],{"class":2521},"in",[1665,3144,3145],{"class":2173}," labels",[1665,3147,2527],{"class":1675},[1665,3149,2555],{"class":2173},[1665,3151,3152],{"class":1671},"key",[1665,3154,2490],{"class":2173},[1665,3156,2527],{"class":1675},[1665,3158,3159],{"class":2173},"index",[1665,3161,2527],{"class":1675},[1665,3163,2487],{"class":1671},[1665,3165,2490],{"class":2173},[1665,3167,3168],{"class":1675},"\"mb-2 p-2 border rounded\"",[1665,3170,2477],{"class":2173},[1665,3172,3173,3176,3178,3180,3182,3185,3188,3190,3193,3196,3199,3202],{"class":1667,"line":2058},[1665,3174,3175],{"class":2173}," \u003C",[1665,3177,1665],{"class":2473},[1665,3179,2487],{"class":1671},[1665,3181,2490],{"class":2173},[1665,3183,3184],{"class":1675},"\"font-semibold text-slate-600 dark:text-slate-400\"",[1665,3186,3187],{"class":2173},">{{ result.label }}\u003C/",[1665,3189,1665],{"class":2473},[1665,3191,3192],{"class":2173},"> - {{ (result.probability).",[1665,3194,3195],{"class":1671},"toFixed",[1665,3197,3198],{"class":2173},"(",[1665,3200,3201],{"class":1685},"2",[1665,3203,3204],{"class":2173},") }}\n",[1665,3206,3207,3210,3212],{"class":1667,"line":2064},[1665,3208,3209],{"class":2173}," \u003C/",[1665,3211,51],{"class":2473},[1665,3213,2477],{"class":2173},[1665,3215,3216,3218,3220],{"class":1667,"line":2070},[1665,3217,2589],{"class":2173},[1665,3219,48],{"class":2473},[1665,3221,2477],{"class":2173},[1665,3223,3224,3226,3228],{"class":1667,"line":2076},[1665,3225,2704],{"class":2173},[1665,3227,1599],{"class":2473},[1665,3229,2477],{"class":2173},[1665,3231,3232,3234,3236],{"class":1667,"line":2082},[1665,3233,2713],{"class":2173},[1665,3235,2474],{"class":2473},[1665,3237,2477],{"class":2173},[17,3239,3240,3241,3244,3245,3248,3249,3252],{},"In this component, we will display the top 3 probabilities on the screen. The reason for having 3 probabilities is that in our ",[21,3242,3243],{},"classifyImage"," function, we use ",[21,3246,3247],{},"slice(0,3)"," to take the top 3 probabilities. For example, if it were ",[21,3250,3251],{},"slice(0,5)",", we would see the top 5 probabilities.",[17,3254,3255],{},[121,3256,3257],{},[21,3258,2429],{},[356,3260,3262],{"className":2461,"code":3261,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\ndefineProps({\n products: Array\n});\n\u003C/script>\n\u003Ctemplate>\n \u003Cdiv class=\"mx-auto bg-white-800 dark:bg-gray-800 rounded p-4 mt-2 shadow-md\">\n \u003Ch2 class=\"text-xl font-semibold mb-4\">Product Basket\u003C/h2>\n \u003Cdiv class=\"flex justify-between items-center border-b pb-4 mb-4\" v-for=\"product in products\" :key=\"product.id\">\n \u003Cdiv>\n \u003Ch3 class=\"text-lg text-balance font-medium\">1x {{ product.name }}\u003C/h3>\n \u003C/div>\n \u003Cdiv class=\"flex items-center\">\n \u003Cspan class=\"text-slate-600 dark:text-slate-400 font-semibold\">Price: {{ product.price }}\u003C/span>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",[363,3263,3264,3274,3280,3285,3289,3297,3305,3320,3340,3384,3392,3412,3420,3435,3455,3463,3471,3479],{"__ignoreMap":365},[1665,3265,3266,3268,3270,3272],{"class":1667,"line":1668},[1665,3267,2470],{"class":2173},[1665,3269,3041],{"class":2473},[1665,3271,3044],{"class":1671},[1665,3273,2477],{"class":2173},[1665,3275,3276,3278],{"class":1667,"line":779},[1665,3277,3051],{"class":1671},[1665,3279,3054],{"class":2173},[1665,3281,3282],{"class":1667,"line":782},[1665,3283,3284],{"class":2173}," products: Array\n",[1665,3286,3287],{"class":1667,"line":1718},[1665,3288,3064],{"class":2173},[1665,3290,3291,3293,3295],{"class":1667,"line":1724},[1665,3292,2713],{"class":2173},[1665,3294,3041],{"class":2473},[1665,3296,2477],{"class":2173},[1665,3298,3299,3301,3303],{"class":1667,"line":1925},[1665,3300,2470],{"class":2173},[1665,3302,2474],{"class":2473},[1665,3304,2477],{"class":2173},[1665,3306,3307,3309,3311,3313,3315,3318],{"class":1667,"line":2034},[1665,3308,2482],{"class":2173},[1665,3310,1599],{"class":2473},[1665,3312,2487],{"class":1671},[1665,3314,2490],{"class":2173},[1665,3316,3317],{"class":1675},"\"mx-auto bg-white-800 dark:bg-gray-800 rounded p-4 mt-2 shadow-md\"",[1665,3319,2477],{"class":2173},[1665,3321,3322,3324,3326,3328,3330,3333,3336,3338],{"class":1667,"line":2040},[1665,3323,2500],{"class":2173},[1665,3325,889],{"class":2473},[1665,3327,2487],{"class":1671},[1665,3329,2490],{"class":2173},[1665,3331,3332],{"class":1675},"\"text-xl font-semibold mb-4\"",[1665,3334,3335],{"class":2173},">Product Basket\u003C/",[1665,3337,889],{"class":2473},[1665,3339,2477],{"class":2173},[1665,3341,3342,3344,3346,3348,3350,3353,3355,3357,3359,3362,3364,3367,3369,3371,3373,3375,3377,3380,3382],{"class":1667,"line":2046},[1665,3343,2500],{"class":2173},[1665,3345,1599],{"class":2473},[1665,3347,2487],{"class":1671},[1665,3349,2490],{"class":2173},[1665,3351,3352],{"class":1675},"\"flex justify-between items-center border-b pb-4 mb-4\"",[1665,3354,3132],{"class":2521},[1665,3356,2490],{"class":2173},[1665,3358,2527],{"class":1675},[1665,3360,3361],{"class":2173},"product ",[1665,3363,3142],{"class":2521},[1665,3365,3366],{"class":2173}," products",[1665,3368,2527],{"class":1675},[1665,3370,2555],{"class":2173},[1665,3372,3152],{"class":1671},[1665,3374,2490],{"class":2173},[1665,3376,2527],{"class":1675},[1665,3378,3379],{"class":2173},"product.id",[1665,3381,2527],{"class":1675},[1665,3383,2477],{"class":2173},[1665,3385,3386,3388,3390],{"class":1667,"line":2052},[1665,3387,2516],{"class":2173},[1665,3389,1599],{"class":2473},[1665,3391,2477],{"class":2173},[1665,3393,3394,3396,3398,3400,3402,3405,3408,3410],{"class":1667,"line":2058},[1665,3395,3175],{"class":2173},[1665,3397,40],{"class":2473},[1665,3399,2487],{"class":1671},[1665,3401,2490],{"class":2173},[1665,3403,3404],{"class":1675},"\"text-lg text-balance font-medium\"",[1665,3406,3407],{"class":2173},">1x {{ product.name }}\u003C/",[1665,3409,40],{"class":2473},[1665,3411,2477],{"class":2173},[1665,3413,3414,3416,3418],{"class":1667,"line":2064},[1665,3415,3209],{"class":2173},[1665,3417,1599],{"class":2473},[1665,3419,2477],{"class":2173},[1665,3421,3422,3424,3426,3428,3430,3433],{"class":1667,"line":2070},[1665,3423,2516],{"class":2173},[1665,3425,1599],{"class":2473},[1665,3427,2487],{"class":1671},[1665,3429,2490],{"class":2173},[1665,3431,3432],{"class":1675},"\"flex items-center\"",[1665,3434,2477],{"class":2173},[1665,3436,3437,3439,3441,3443,3445,3448,3451,3453],{"class":1667,"line":2076},[1665,3438,3175],{"class":2173},[1665,3440,1665],{"class":2473},[1665,3442,2487],{"class":1671},[1665,3444,2490],{"class":2173},[1665,3446,3447],{"class":1675},"\"text-slate-600 dark:text-slate-400 font-semibold\"",[1665,3449,3450],{"class":2173},">Price: {{ product.price }}\u003C/",[1665,3452,1665],{"class":2473},[1665,3454,2477],{"class":2173},[1665,3456,3457,3459,3461],{"class":1667,"line":2082},[1665,3458,3209],{"class":2173},[1665,3460,1599],{"class":2473},[1665,3462,2477],{"class":2173},[1665,3464,3465,3467,3469],{"class":1667,"line":2088},[1665,3466,2589],{"class":2173},[1665,3468,1599],{"class":2473},[1665,3470,2477],{"class":2173},[1665,3472,3473,3475,3477],{"class":1667,"line":2094},[1665,3474,2704],{"class":2173},[1665,3476,1599],{"class":2473},[1665,3478,2477],{"class":2173},[1665,3480,3481,3483,3485],{"class":1667,"line":2305},[1665,3482,2713],{"class":2173},[1665,3484,2474],{"class":2473},[1665,3486,2477],{"class":2173},[17,3488,3489,3490,3492],{},"In this component, we handle the scenario of finding the product and adding it to the basket after our basic scenario. Here, in our upper layer, which is the ",[21,3491,2439],{}," layer, we find the product, send its information to this component, and display it.",[17,3494,3495],{},[121,3496,3497],{},[21,3498,2439],{},[356,3500,3502],{"className":2461,"code":3501,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport ImageUpload from '@/components/ImageUpload.vue'\nimport ResultDisplay from '@/components/ResultDisplay.vue'\nimport SimpleBasket from '@/components/SimpleBasket.vue'\n\nconst classificationResults = ref([])\nconst products = ref([])\nconst getResult = (result) => {\n classificationResults.value = result;\n}\nconst getProducts = (result) => {\n products.value = result\n};\n\u003C/script>\n\u003Ctemplate>\n \u003CImageUpload @getResult=\"getResult\" @getProducts=\"getProducts\" />\n \u003CResultDisplay v-if=\"classificationResults.length > 0\" :labels=\"classificationResults\" />\n \u003CSimpleBasket v-if=\"classificationResults.length > 0\" :products=\"products\" />\n\u003C/template>\n",[363,3503,3504,3514,3528,3540,3552,3564,3569,3586,3598,3623,3633,3637,3656,3666,3670,3678,3686,3719,3760,3798],{"__ignoreMap":365},[1665,3505,3506,3508,3510,3512],{"class":1667,"line":1668},[1665,3507,2470],{"class":2173},[1665,3509,3041],{"class":2473},[1665,3511,3044],{"class":1671},[1665,3513,2477],{"class":2173},[1665,3515,3516,3519,3522,3525],{"class":1667,"line":779},[1665,3517,3518],{"class":2521},"import",[1665,3520,3521],{"class":2173}," { ref } ",[1665,3523,3524],{"class":2521},"from",[1665,3526,3527],{"class":1675}," 'vue'\n",[1665,3529,3530,3532,3535,3537],{"class":1667,"line":782},[1665,3531,3518],{"class":2521},[1665,3533,3534],{"class":2173}," ImageUpload ",[1665,3536,3524],{"class":2521},[1665,3538,3539],{"class":1675}," '@/components/ImageUpload.vue'\n",[1665,3541,3542,3544,3547,3549],{"class":1667,"line":1718},[1665,3543,3518],{"class":2521},[1665,3545,3546],{"class":2173}," ResultDisplay ",[1665,3548,3524],{"class":2521},[1665,3550,3551],{"class":1675}," '@/components/ResultDisplay.vue'\n",[1665,3553,3554,3556,3559,3561],{"class":1667,"line":1724},[1665,3555,3518],{"class":2521},[1665,3557,3558],{"class":2173}," SimpleBasket ",[1665,3560,3524],{"class":2521},[1665,3562,3563],{"class":1675}," '@/components/SimpleBasket.vue'\n",[1665,3565,3566],{"class":1667,"line":1925},[1665,3567,3568],{"emptyLinePlaceholder":807},"\n",[1665,3570,3571,3574,3577,3580,3583],{"class":1667,"line":2034},[1665,3572,3573],{"class":2521},"const",[1665,3575,3576],{"class":1685}," classificationResults",[1665,3578,3579],{"class":2521}," =",[1665,3581,3582],{"class":1671}," ref",[1665,3584,3585],{"class":2173},"([])\n",[1665,3587,3588,3590,3592,3594,3596],{"class":1667,"line":2040},[1665,3589,3573],{"class":2521},[1665,3591,3366],{"class":1685},[1665,3593,3579],{"class":2521},[1665,3595,3582],{"class":1671},[1665,3597,3585],{"class":2173},[1665,3599,3600,3602,3605,3607,3610,3614,3617,3620],{"class":1667,"line":2046},[1665,3601,3573],{"class":2521},[1665,3603,3604],{"class":1671}," getResult",[1665,3606,3579],{"class":2521},[1665,3608,3609],{"class":2173}," (",[1665,3611,3613],{"class":3612},"s4XuR","result",[1665,3615,3616],{"class":2173},") ",[1665,3618,3619],{"class":2521},"=>",[1665,3621,3622],{"class":2173}," {\n",[1665,3624,3625,3628,3630],{"class":1667,"line":2052},[1665,3626,3627],{"class":2173}," classificationResults.value ",[1665,3629,2490],{"class":2521},[1665,3631,3632],{"class":2173}," result;\n",[1665,3634,3635],{"class":1667,"line":2058},[1665,3636,1928],{"class":2173},[1665,3638,3639,3641,3644,3646,3648,3650,3652,3654],{"class":1667,"line":2064},[1665,3640,3573],{"class":2521},[1665,3642,3643],{"class":1671}," getProducts",[1665,3645,3579],{"class":2521},[1665,3647,3609],{"class":2173},[1665,3649,3613],{"class":3612},[1665,3651,3616],{"class":2173},[1665,3653,3619],{"class":2521},[1665,3655,3622],{"class":2173},[1665,3657,3658,3661,3663],{"class":1667,"line":2070},[1665,3659,3660],{"class":2173}," products.value ",[1665,3662,2490],{"class":2521},[1665,3664,3665],{"class":2173}," result\n",[1665,3667,3668],{"class":1667,"line":2076},[1665,3669,2908],{"class":2173},[1665,3671,3672,3674,3676],{"class":1667,"line":2082},[1665,3673,2713],{"class":2173},[1665,3675,3041],{"class":2473},[1665,3677,2477],{"class":2173},[1665,3679,3680,3682,3684],{"class":1667,"line":2088},[1665,3681,2470],{"class":2173},[1665,3683,2474],{"class":2473},[1665,3685,2477],{"class":2173},[1665,3687,3688,3690,3693,3695,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717],{"class":1667,"line":2094},[1665,3689,2482],{"class":2173},[1665,3691,3692],{"class":2473},"ImageUpload",[1665,3694,2633],{"class":2173},[1665,3696,3019],{"class":1671},[1665,3698,2490],{"class":2173},[1665,3700,2527],{"class":1675},[1665,3702,3019],{"class":2173},[1665,3704,2527],{"class":1675},[1665,3706,2633],{"class":2173},[1665,3708,3022],{"class":1671},[1665,3710,2490],{"class":2173},[1665,3712,2527],{"class":1675},[1665,3714,3022],{"class":2173},[1665,3716,2527],{"class":1675},[1665,3718,2584],{"class":2173},[1665,3720,3721,3723,3726,3728,3730,3732,3735,3738,3741,3744,3746,3748,3750,3752,3754,3756,3758],{"class":1667,"line":2305},[1665,3722,2482],{"class":2173},[1665,3724,3725],{"class":2473},"ResultDisplay",[1665,3727,2522],{"class":2521},[1665,3729,2490],{"class":2173},[1665,3731,2527],{"class":1675},[1665,3733,3734],{"class":2173},"classificationResults.",[1665,3736,3737],{"class":1685},"length",[1665,3739,3740],{"class":2521}," >",[1665,3742,3743],{"class":1685}," 0",[1665,3745,2527],{"class":1675},[1665,3747,2555],{"class":2173},[1665,3749,1876],{"class":1671},[1665,3751,2490],{"class":2173},[1665,3753,2527],{"class":1675},[1665,3755,2979],{"class":2173},[1665,3757,2527],{"class":1675},[1665,3759,2584],{"class":2173},[1665,3761,3762,3764,3767,3769,3771,3773,3775,3777,3779,3781,3783,3785,3788,3790,3792,3794,3796],{"class":1667,"line":2317},[1665,3763,2482],{"class":2173},[1665,3765,3766],{"class":2473},"SimpleBasket",[1665,3768,2522],{"class":2521},[1665,3770,2490],{"class":2173},[1665,3772,2527],{"class":1675},[1665,3774,3734],{"class":2173},[1665,3776,3737],{"class":1685},[1665,3778,3740],{"class":2521},[1665,3780,3743],{"class":1685},[1665,3782,2527],{"class":1675},[1665,3784,2555],{"class":2173},[1665,3786,3787],{"class":1671},"products",[1665,3789,2490],{"class":2173},[1665,3791,2527],{"class":1675},[1665,3793,3787],{"class":2173},[1665,3795,2527],{"class":1675},[1665,3797,2584],{"class":2173},[1665,3799,3800,3802,3804],{"class":1667,"line":2329},[1665,3801,2713],{"class":2173},[1665,3803,2474],{"class":2473},[1665,3805,2477],{"class":2173},[17,3807,3808,3809,3811,3812,3817,3818,884],{},"After calling our components in ",[21,3810,2439],{},", we obtain the appearance in our visualization. If there are any differences or missing parts in your view, you can check ",[54,3813,3816],{"href":3814,"rel":3815},"https://github.com/Eralpozcan/TF.js-with-Vue3",[58],"TF.js-with-Vue3"," for the repository. Alternatively, you can download it directly to your computer. Or, if you prefer, you can try ",[54,3819,3822],{"href":3820,"rel":3821},"https://tf-js-with-vue3.vercel.app/",[58],"TF.js with Vue3 on Vercel",[17,3824,3825],{},[36,3826],{"alt":3827,"src":3828},"TensorFlow.js Preview","https://cdn-images-1.medium.com/max/5708/1*CbMt2ztPsdXle7IR5bQU4A.png",[17,3830,3831,3832,3835,3836,3838],{},"Now that we have completed all these stages, let’s move on to testing our project. As an example, I chose one of the images that appear when searching for ",[21,3833,3834],{},"“French Loaf”"," on Google because it is available within the ",[21,3837,1560],{}," labels. We have also defined its classification in our Mockup Data.",[17,3840,3841],{},[36,3842],{"alt":3843,"src":3844},"TensorFlow.js Recognition","https://cdn-images-1.medium.com/max/5708/1*WACbtVHDdnE6UbNdvnEnlQ.png",[17,3846,3847,3848,3851],{},"After selecting and uploading our image, we press the “",[121,3849,3850],{},"Classify-Recognize","” button. We then display the top 3 predictions with high probabilities and automatically add the item to our basket.",[1817,3853],{"src":3854,"width":1820,"height":1820,"style":365,"frameBorder":1821,"className":3855,"allowFullScreen":807},"https://giphy.com/embed/8c3LWBENZHRnP6ixOc",[1823],[17,3857,3858],{},[36,3859],{"alt":3860,"src":3861},"Tensorflow.js Results","https://cdn-images-1.medium.com/max/5708/1*1uyzTdpJOtoDpOMAflEzOw.png",[17,3863,3864,3865,3867],{},"As we can see, we implemented a simple Object Recognition and Add to Cart scenario using ",[21,3866,1556],{}," in the project. Through this, we explored how we can easily integrate artificial intelligence and tools into our projects or daily scenarios.",[17,3869,3870,3871,3873],{},"In this article, I tried to explain the usage and installation of ",[21,3872,1556],{}," with examples of how it can be beneficial in a simple scenario.",[17,3875,3876,3877,3881,3882,3885,3886,3889],{},"After reading my ",[54,3878,201],{"href":3879,"rel":3880},"https://medium.com/how-to-use/how-to-use-object-recognition-with-tensorflow-js-and-vue-3-57dac4a53494",[58]," post, feel free to reach out to me on ",[54,3883,750],{"href":748,"rel":3884},[58]," if you have any questions or suggestions.For my other accounts, you can visit ",[54,3887,756],{"href":754,"rel":3888},[58],"🤖",[17,3891,1514],{},[3893,3894,3895],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":365,"searchDepth":779,"depth":779,"links":3897},[3898,3899,3903,3904,3905,3906,3907],{"id":1594,"depth":782,"text":1597},{"id":1634,"depth":779,"text":1635,"children":3900},[3901],{"id":1734,"depth":782,"text":3902},"📌 Optional Installation",{"id":1814,"depth":779,"text":1815},{"id":1884,"depth":779,"text":1885},{"id":1992,"depth":779,"text":1993},{"id":2134,"depth":779,"text":2135},{"id":2406,"depth":779,"text":2407,"children":3908},[3909,3910],{"id":2450,"depth":782,"text":2453},{"id":2723,"depth":782,"text":2726},"2024-06-31","In recent years, artificial intelligence and its products have become increasingly active and are starting to take their place in our lives, with their numbers steadily rising. We all have the question in mind of how we can use this in our daily lives. In this article, we will create a simple application together using TensorFlow.js, where we will use ImageNet classes and the MobileNet-v2 model to recognize and add an object/item to the cart. This way, we will implement a scenario similar to the basic working principle of Amazon Go. Let’s get started 🚀",{"card_description":3914,"cover":3915,"language":3916,"links":3917},"Artificial intelligence is becoming more integrated into daily life, prompting practical use cases. This article shows how to build a simple app with TensorFlow.js and the MobileNet-v2 model to recognize objects and add them to a cart, mimicking Amazon Go. Let's get started 🚀","/assets/images/blog/tensorflowjs.webp","en",[3918,3919],{"medium":3879},{"devto":3920},"https://dev.to/eralpozcan/how-to-use-object-recognition-with-tensorflowjs-and-vue-3-3glb","/blog/how-to-use-object-recognition-with-tensorflowjs-and-vue-3","18",{"title":1545,"description":3912},{"loc":3925,"lastmod":3911,"changefreq":813,"priority":814},"http://eralpozcan.dev/blog/how-to-use-object-recognition-with-tensorflow-js-and-vue-3","blog/how-to-use-object-recognition-with-tensorflowjs-and-vue-3",[1556,3928,3929,3930,3931,3932,3933],"Vue.js","Machine Learning","AI","Object Recognition","JavaScript","MobileNet","xz22HpXVv6Cf09Jxn9Jr3z4r5FPDo6h8bq3XO1mbiPE",["Reactive",3936],{"$snuxt-i18n-meta":3937,"$snuxt-seo-utils:routeRules":3938,"$ssite-config":3939},{},{"head":-1,"seoMeta":-1},{"_priority":3940,"currentLocale":3945,"defaultLocale":3945,"env":3946,"name":3947,"url":3948},{"name":3941,"env":3942,"url":3943,"defaultLocale":3944,"currentLocale":3944},-5,-15,0,-2,"tr","production","eralpozcandev","https://eralpozcan.dev",["Set"],["ShallowReactive",3951],{"latest-blog-posts":-1},"/"]