change line color to green if similarity is about 100

app.py

@@ -42,6 +42,16 @@ def load_image_and_landmarks(image_name):
             dataset["name"] = the_data['name']
             dataset["ket"] = the_data['ket']
 
+# Define the function to calculate the color based on similarity
+def calculate_color(similarity):
+    if similarity < 70:
+        return (0, 0, 255)  # Red
+    else:
+        normalized_similarity = (similarity - 55) / 45  # Normalize between 0 and 1 for values 71 to 100
+        red = int((1 - normalized_similarity) * 255)
+        green = int(normalized_similarity * 255)
+        return (0, green, red)
+
 def calculate_similarity(landmarks1, landmarks2):
     if not landmarks1 or not landmarks2:
         return 0
@@ -52,6 +62,7 @@ def calculate_similarity(landmarks1, landmarks2):
     return similarity * 100
 
 def draw_landmarks(image, landmarks):
+    global similarity
     annotated_image = image.copy()
     for landmark in landmarks:
         landmark_x = int(landmark['coordinates'][0] * annotated_image.shape[1])
@@ -88,14 +99,14 @@ def generate_frames():
             results = pose.process(image_rgb)
             image_rgb.flags.writeable = True
             image_bgr = cv2.cvtColor(image_rgb, cv2.COLOR_RGB2BGR)
-
+            the_color = calculate_color(similarity)
             if results.pose_landmarks:
                 mp_drawing.draw_landmarks(
                     image_bgr,
                     results.pose_landmarks,
                     mp_pose.POSE_CONNECTIONS,
                     mp_drawing.DrawingSpec(color=(0, 255, 0), thickness=4, circle_radius=2),
-                    mp_drawing.DrawingSpec(color=(0, 0, 255), thickness=4, circle_radius=2),
+                    mp_drawing.DrawingSpec(color=(the_color), thickness=4, circle_radius=2),
                 )
 
                 landmarks_from_webcam = []

templates/index2.html

@@ -145,7 +145,7 @@
 				</div>
 				<div class="col-xs-2 col-md-2 text-center">
                     <!-- create a next button  and put it on center-->
-                    <a href="{{ url_for('index', image_name=next) }}"><button type="button" class="btn btn-primary btn-xs" id="next">Selanjutnya</button></a>
+                    <a href="{{ url_for('index', image_name=next) }}"><button type="button" id="button_next" class="btn btn-primary btn-xs" id="next">Selanjutnya</button></a>
                 </div>
 
 
@@ -197,6 +197,8 @@
 
 		setInterval(clock, 1000);
 
+		var counter = 0;
+
 		// // check data every 2 seconds
 		setInterval(function () {
 			$.ajax({
@@ -205,6 +207,17 @@
 				success: function (data) {
 					console.log(data);
                     var similarity = data.similarity;
+
+					if (similarity <80) {
+						counter = 0
+					}else{
+						counter = counter + 1
+					}
+
+					if(counter == 3){
+						// click the button_next id
+						$('#button_next').trigger('click');
+					}
                     // only 2 behind .
                     similarity = similarity.toFixed(2);
                     $('#similarity').html(similarity+ ' % tingkat kesamaan');