use flask api instead of socket io

app.py

@@ -2,7 +2,7 @@ import cv2
 import base64
 import numpy as np
 import io
-from flask import Flask, render_template, Response
+from flask import Flask, render_template, Response, request, jsonify
 from flask_socketio import SocketIO, emit
 from PIL import Image
 from time import time as unix_time
@@ -201,16 +201,17 @@ video_frames=[]
 
 
 app = Flask(__name__)
-socketio = SocketIO(app)
+
 
 @app.route('/')
 def index():
     return render_template('index.html')
 
 
-@socketio.on('video_frame')
-def handle_video_frame(frame):
-
+@app.route('/api/data', methods=['POST'])
+def handle_video_frame():
+    frame = request.json.get('key')
+    #print(request.json)
     response_frame = data_uri_to_image(frame)
     decimg = response_frame
 
@@ -282,102 +283,13 @@ def handle_video_frame(frame):
                     letter_result='_'
                 else:
                     letter_result='>'
-
-            same_letter_time = round((unix_time()) - frame_time, 2)
-            
-            #print(frame_time, same_letter_time)
-
-            if old_letter_result != letter_result:
-                frame_time = (unix_time())# Log Time
-                same_letter_time=0
-            
-            old_letter_result = letter_result
-            
-                
-        
-        
-
-                
-
-        else:
-            local_same_letter_time=0
-            if(no_hand_flag==0):
-                same_letter_time = round((unix_time()) - frame_time, 2)
-
-            local_same_letter_time = round((unix_time()) - frame_time, 2)
-
-            letterscore = 0
-            #print(brightness(final_image))
-
-            if local_same_letter_time>1.2 and brightness(final_image) < 40:
-                char_list.pop()
-                print (string.join(char_list))
-                frame_time = (unix_time())# Log Time
-                same_letter_time=0
-            
-            if same_letter_time>1.4 and brightness(final_image) > 40:
-                frame_time = (unix_time())# Log Time
-                same_letter_time=0
-                no_hand_flag=1
-           
-        same_letter_time_width = 10 + int(same_letter_time*100)
-        if same_letter_time_width > 190:
-            same_letter_time_width = 190
-        iheight, iwidth = final_image.shape[:2]
-        cv2.rectangle(final_image, (0, 0), (iwidth, 50), (255,255,255), -1)
-
-        cv2.rectangle(final_image, (0, 50), (200, 100), (255,255,255), -1)
-        cv2.rectangle(final_image, (8, 58), (192, 72), (255,100,100), -1)
-        cv2.rectangle(final_image, (10, 60), (190, 70), (255,200,200), -1)
-        cv2.rectangle(final_image, (10, 60), (same_letter_time_width, 70), (255,100,100), -1)
-
-        letterscore_width = 10+ int(letterscore*100)
-
-        
-        cv2.rectangle(final_image, (8, 78), (192, 92), (100,100,200), -1)
-        cv2.rectangle(final_image, (10, 80), (190, 90), (150,175,255), -1)
-        cv2.rectangle(final_image, (10, 80), (letterscore_width, 90), (100,100,200), -1)
-        
-        cv2.putText(final_image, f"{(letterscore_width)}", # Display result
-        (12, 70), cv2.FONT_HERSHEY_DUPLEX,
-        0.5, (0, 0, 0), 1, cv2.LINE_AA)
-
-        cv2.putText(final_image, f"[ {letter_result} ] {''.join(char_list)} |", # Display result
-            (20, 40), cv2.FONT_HERSHEY_DUPLEX,
-            0.7, (0, 0, 0), 2, cv2.LINE_AA)
-        
-        print(letter_result, same_letter_time)
-                
     except Exception as e: 
         # Ha! The catch err{throw err} scenario, it was actually quite useful in debugging though
         print(e)
-
-
-    if  same_letter_time > 0 and RESULT.handedness != []: # If 'a' key was pressed and a hand exists
-        
-        if same_letter_time > 1.7 and RESULT.handedness[0][0].display_name == 'Right': # Right hand
-            char_list.append(letter_result)
-            string = ""
-            print (string.join(char_list))
-            frame_time = (unix_time())# Log Time
-            same_letter_time=0
-            
-
-        if  same_letter_time > 0.9 and RESULT.handedness[0][0].display_name == 'Left':
-                if same_letter_time > 1.2 and letter_result=='_':
-                    char_list.append(" ")
-                    string = "" 
-                    print (string.join(char_list))
-                    frame_time = (unix_time())# Log Time
-                    same_letter_time=0
-
-                if letter_result == ">":
-                    string=""
-                    if(string.join(char_list) != ''):
-                        os.system(f'echo {string.join(char_list)} | espeak -p 70 -s 140')
-                        char_list=[]
-                        print (string.join(char_list))             
-
+    frame_data = image_to_data_uri(final_image)
+    #print(frame_data)
+    
+    return jsonify({"result": letter_result, "frame": frame_data}), 200
 
 def data_uri_to_image(data_uri):
     header, encoded = data_uri.split(',', 1)
@@ -386,5 +298,15 @@ def data_uri_to_image(data_uri):
     image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
     return image 
 
+def image_to_data_uri(image):
+    # Encode the image as a JPEG
+    _, buffer = cv2.imencode('.jpg', image)
+    # Convert the buffer to bytes
+    image_bytes = buffer.tobytes()
+    # Encode the bytes to Base64
+    base64_encoded = base64.b64encode(image_bytes).decode('utf-8')
+    # Create the Data URI
+    data_uri = f"data:image/jpeg;base64,{base64_encoded}"
+    return data_uri
 if (__name__ == '__main__'):
     app.run( host='0.0.0.0', port=7860)

templates/index.html

@@ -8,10 +8,12 @@
 
 <body>
     <video style="display:none" id="video" width="640" height="480" autoplay></video>
-    <canvas id="canvas" style="display:block;"></canvas>
+    <canvas id="canvas" style="display:none;"></canvas>
+    <img id="image"></img>
+    <p id="result"></p>
     <script>
-        var socket = io('http://10.25.178.246:7860');
-
+        
+        globalData=0
         // Get access to the user's camera
         navigator.mediaDevices.getUserMedia({ video: true })
             .then(function (stream) {
@@ -48,10 +50,33 @@
                     //console.log(jpeg)
                     // Do something with the data URL, such as display it in an image element
                     //document.getElementById('image').src = dataUrl;
-                    socket.emit('video_frame', dataUrl);
+                    send_frame(dataUrl)
                     console.log("emitted")
                     setTimeout(snap, 100)
                 };
+            function send_frame(dataUrl) {
+            const dataToSend = {
+                key: dataUrl
+            };
+
+            fetch('/api/data', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(dataToSend)  // Convert the data to JSON
+            })
+            .then(response => response.json())
+            .then(data => {
+                //console.log(data.frame)
+                document.getElementById("image").src=data.frame
+                globalData=data
+                document.getElementById("result").innerText=data.result
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+            });
+        }
     </script>
     <button id="snap" onclick="snap()">Snap</button>
     <img id="image" />