object-detection-on-device

Running

App Files Files Community

yukiapple323 commited on Jun 3

Commit

1f64ced

•

1 Parent(s): 8c34d2d

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -82

index.html CHANGED Viewed

@@ -1,85 +1,101 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
             }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
-import gradio as gr
-from transformers_js_py import pipeline
-from filters import convert
-pipe = await pipeline('object-detection', 'Xenova/detr-resnet-50')
-async def fn(image):
-	result = await pipe(image)
-	return result
-#demo = gr.Interface.from_pipeline(pipe)
-async def predict(image):
-  result = await pipe(image)
-  print(result)
-  result = convert(result)
-  print(result)
-  return image, result
-demo = gr.Interface(
-  fn=predict,
-  inputs=gr.Image(type='pil'),
-  outputs=gr.AnnotatedImage(),
-  title='On-Device Object-Detection with Gradio-Lite & Transformers.js'
-)
-demo.launch()
-            </gradio-file>
-            <gradio-file name="filters.py">
-def convert(input_data):
-    # Initialize the output list
-    result_labels = []
-    # Iterate over each item in the input data
-    for item in input_data:
-        # Extract the label
-        label = item['label']
-        # Extract the bounding box coordinates
-        xmin = item['box']['xmin']
-        ymin = item['box']['ymin']
-        xmax = item['box']['xmax']
-        ymax = item['box']['ymax']
-        # Convert coordinates into the required output format (list of coordinates)
-        coordinates = [xmin, ymin, xmax, ymax]
-        # Append the tuple of coordinates and label to the output list
-        result_labels.append((coordinates, label))
-    # Return the output list
-    return result_labels
-            </gradio-file>
-            <gradio-requirements>
-# Same syntax as requirements.txt
-transformers-js-py
-            </gradio-requirements>
-        </gradio-lite>
-    </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Candy Label Scanner</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tesseract.js"></script>
+    <style>
+        #output {
+            font-size: 20px;
+            margin-top: 20px;
+        }
+        .red {
+            color: red;
+        }
+        .yellow {
+            color: yellow;
+        }
+        .green {
+            color: green;
+        }
+        video {
+            width: 100%;
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>Candy Label Scanner</h1>
+    <video id="video" autoplay></video>
+    <button id="capture">Capture</button>
+    <canvas id="canvas" style="display: none;"></canvas>
+    <div id="output"></div>
+    <script>
+        const video = document.getElementById('video');
+        const canvas = document.getElementById('canvas');
+        const output = document.getElementById('output');
+        const captureButton = document.getElementById('capture');
+        navigator.mediaDevices.getUserMedia({
+            video: {
+                facingMode: { exact: "environment" }
             }
+        })
+        .then(stream => {
+            video.srcObject = stream;
+        })
+        .catch(err => {
+            console.error("Error accessing the camera: ", err);
+        });
+        captureButton.addEventListener('click', () => {
+            // Draw the video frame to the canvas
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            const context = canvas.getContext('2d');
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            // Convert canvas to image data
+            const dataURL = canvas.toDataURL('image/png');
+            // Process the image with Tesseract
+            Tesseract.recognize(
+                dataURL,
+                'kor',
+              "image-to-text",
+              model="team-lucid/trocr-small-korean",
+                {
+                    logger: m => console.log(m)
+                }
+            ).then(({ data: { text } }) => {
+                console.log(text);
+                analyzeNutrition(text);
+            });
+        });
+        function analyzeNutrition(text) {
+            // Extract nutritional values (assuming sugar content is labeled as '당류' in Korean)
+            const regex = /당류\s*:\s*(\d+(\.\d+)?)\s*g\s*/; // This regex might need adjustments based on label format
+            const match = text.match(regex);
+            let outputDiv = document.getElementById('output');
+            if (match) {
+                const sugarContent = parseFloat(match[1]);
+                let message = `Sugar content: ${sugarContent}g - `;
+                if (sugarContent > 20) {
+                    message += 'Dangerous';
+                    outputDiv.className = 'red';
+                } else if (sugarContent > 10) {
+                    message += 'Normal';
+                    outputDiv.className = 'yellow';
+                } else {
+                    message += 'Good';
+                    outputDiv.className = 'green';
+                }
+                outputDiv.textContent = message;
+            } else {
+                outputDiv.textContent = 'Sugar content not found';
+                outputDiv.className = '';
+            }
+        }
+    </script>
+</body>
+</html>