GreenSort---Intelligent-Waste-Classification-System/tes.html at main · RazerArdi/GreenSort---Intelligent-Waste-Classification-System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
</head>
<body>
    <img id="inputImage" src="dataTEST/kardus.jpg" width="224" height="224" crossorigin="anonymous">
    <div id="output"></div>
    <script>
        // Define and register custom L2 regularizer
        class L2Regularizer {
            constructor(config) {
                this.l2 = config.l2 || 0.01; // Default to 0.01 if not specified
            }

            apply(x) {
                // L2 regularization: l2 * sum(x^2)
                return tf.mul(this.l2, tf.sum(tf.square(x)));
            }

            getConfig() {
                return { l2: this.l2 };
            }

            static className = 'L2';
        }

        // Register the custom regularizer
        tf.serialization.registerClass(L2Regularizer);

        async function loadModel() {
            try {
                // Path to model.json
                const modelPath = '/models/ComputerVision/tfjs_model_fixed/model.json';
                console.log('Loading model from:', modelPath);
                const model = await tf.loadLayersModel(modelPath);
                console.log('Model loaded:', model);

                // Preprocess image
                const img = document.getElementById('inputImage');
                if (!img.complete || img.naturalWidth === 0) {
                    throw new Error('Image failed to load');
                }
                const tensor = tf.browser.fromPixels(img)
                    .resizeNearestNeighbor([224, 224])
                    .toFloat()
                    .div(tf.scalar(255.0))
                    .expandDims();

                // Make prediction
                const predictions = model.predict(tensor);
                const predictionData = predictions.dataSync();
                console.log('Predictions:', predictionData);

                // Map predictions to class labels
                const categories = ['Cardboard', 'Food Organics', 'Glass', 'Metal',
                                    'Miscellaneous Trash', 'Paper', 'Plastic',
                                    'Textile Trash', 'Vegetation'];
                const maxIndex = predictionData.indexOf(Math.max(...predictionData));
                const predictedClass = categories[maxIndex];
                const confidence = predictionData[maxIndex];

                // Display result
                const output = document.getElementById('output');
                output.innerText = `Predicted: ${predictedClass} (Confidence: ${(confidence * 100).toFixed(2)}%)`;
            } catch (e) {
                console.error('Error loading model:', e);
                document.getElementById('output').innerText = `Error: ${e.message}`;
            }
        }

        // Run after image loads
        const img = document.getElementById('inputImage');
        img.onload = loadModel;
        img.onerror = () => console.error('Failed to load image');
    </script>
</body>
</html>