Update app.py

app.py

@@ -1,478 +1,292 @@
-import os
-import gradio as gr
+import streamlit as st
+import cv2
 import requests
+import base64
 import json
+import numpy as np
 from PIL import Image
-
-css = """
-.example-image img{
-    display: flex; /* Use flexbox to align items */
-    justify-content: center; /* Center the image horizontally */
-    align-items: center; /* Center the image vertically */
-    height: 300px; /* Set the height of the container */
-    object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */
-}
-.example-image{
-    display: flex; /* Use flexbox to align items */
-    justify-content: center; /* Center the image horizontally */
-    align-items: center; /* Center the image vertically */
-    height: 350px; /* Set the height of the container */
-    object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */
-}
-.face-row {
-    display: flex;
-    justify-content: space-around; /* Distribute space evenly between elements */
-    align-items: center; /* Align items vertically */
-    width: 100%; /* Set the width of the row to 100% */
-}
-.face-image{
-    justify-content: center; /* Center the image horizontally */
-    align-items: center; /* Center the image vertically */
-    height: 160px; /* Set the height of the container */
-    width: 160px;
-    object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */
-}
-.face-image img{
-    justify-content: center; /* Center the image horizontally */
-    align-items: center; /* Center the image vertically */
-    height: 160px; /* Set the height of the container */
-    object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */
-}
-.markdown-success-container {
-    background-color: #F6FFED;
-    padding: 20px;
-    margin: 20px;
-    border-radius: 1px;
-    border: 2px solid green;
-    text-align: center;
-}
-.markdown-fail-container {
-    background-color: #FFF1F0;
-    padding: 20px;
-    margin: 20px;
-    border-radius: 1px;
-    border: 2px solid red;
-    text-align: center;
-}
-.markdown-attribute-container {
-    display: flex;
-    justify-content: space-around; /* Distribute space evenly between elements */
-    align-items: center; /* Align items vertically */
-    padding: 10px;
-    margin: 10px;
-}
-.block-background {
-    # background-color: #202020; /* Set your desired background color */
-    border-radius: 5px;
-}
-"""
-
-def convert_fun(input_str):
-    # Remove line breaks and extra whitespaces
-    return ' '.join(input_str.split())
-
-def get_attributes(frame):    
-    url = "https://recognito.p.rapidapi.com/api/analyze_face"
-    try:
-        files = {'image': open(frame, 'rb')}
-        headers = {"X-RapidAPI-Key": os.environ.get("API_KEY")}
-
-        r = requests.post(url=url, files=files, headers=headers)
-    except:
-        raise gr.Error("Please select images file!")
-
-    faces = None
-    face_crop, one_line_attribute = None, ""
-    try:
-        image = Image.open(frame)
-
-        face = Image.new('RGBA',(150, 150), (80,80,80,0))
-        
-        res = r.json().get('image')
-        if res is not None and res:
-            face = res.get('detection')
-            x1 = face.get('x')
-            y1 = face.get('y')
-            x2 = x1 + face.get('w')
-            y2 = y1 + face.get('h')
-
-            if x1 < 0:
-                x1 = 0
-            if y1 < 0:
-                y1 = 0
-            if x2 >= image.width:
-                x2 = image.width - 1
-            if y2 >= image.height:
-                y2 = image.height - 1
-
-            face_crop = image.crop((x1, y1, x2, y2))
-            face_image_ratio = face_crop.width / float(face_crop.height)
-            resized_w = int(face_image_ratio * 150)
-            resized_h = 150
-
-            face_crop = face_crop.resize((int(resized_w), int(resized_h)))
-            
-            attr = res.get('attribute')
-            
-            age = attr.get('age')
-            gender = attr.get('gender')
-            emotion = attr.get('emotion')
-            ethnicity = attr.get('ethnicity')
-
-            mask = attr.get('face_mask')
-            glass = 'No Glasses'
-            if attr.get('glasses') == 'USUAL':
-                glass = 'Glasses'
-            if attr.get('glasses') == 'DARK':
-                glass = 'Sunglasses'
-            
-            open_eye_thr = 0.3
-            left_eye = 'Close'
-            if attr.get('eye_left') >= open_eye_thr:
-                left_eye = 'Open'
-
-            right_eye = 'Close'
-            if attr.get('eye_right') >= open_eye_thr:
-                right_eye = 'Open'
-
-            facehair = attr.get('facial_hair')
-            haircolor = attr.get('hair_color')
-            hairtype = attr.get('hair_type')
-            headwear = attr.get('headwear')
-
-            pitch = attr.get('pitch')
-            roll = attr.get('roll')
-            yaw = attr.get('yaw')
-            quality = attr.get('quality')
-
-            attribute = f"""
-            <br/>
-            <div class="markdown-attribute-container">
-            <table>
-            <tr>
-                <th style="text-align: center;">Attribute</th>
-                <th style="text-align: center;">Result</th>
-                <th style="text-align: center;">Score</th>
-                <th style="text-align: center;">Threshold</th>
-            </tr>
-            <tr>
-                <td>Gender</td>
-                <td>{gender}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Age</td>
-                <td>{int(age)}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Pitch</td>
-                <td>{"{:.4f}".format(pitch)}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Yaw</td>
-                <td>{"{:.4f}".format(yaw)}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Roll</td>
-                <td>{"{:.4f}".format(roll)}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Emotion</td>
-                <td>{emotion}</td>
-                <td></td><td></td>
-            </tr>
-                <tr>
-                <td>Left Eye</td>
-                <td>{left_eye}</td>
-                <td>{"{:.4f}".format(attr.get('eye_left'))}</td>
-                <td>{open_eye_thr}</td>
-            </tr>
-            <tr>
-                <td>Right Eye</td>
-                <td>{right_eye}</td>
-                <td>{"{:.4f}".format(attr.get('eye_right'))}</td>
-                <td>{open_eye_thr}</td>
-            </tr>
-            <tr>
-                <td>Mask</td>
-                <td>{mask}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Glass</td>
-                <td>{glass}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>FaceHair</td>
-                <td>{facehair}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>HairColor</td>
-                <td>{haircolor}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>HairType</td>
-                <td>{hairtype}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>HeadWear</td>
-                <td>{headwear}</td>
-                <td></td><td></td>
-            </tr>
-            <tr>
-                <td>Image Quality</td>
-                <td>{"{:.4f}".format(quality)}</td>
-                <td></td><td></td>
-            </tr>
-            </table>
-            </div>
-            """
-            one_line_attribute = convert_fun(attribute)
-    except:
-        pass
+import io
+import time
+
+# Page configuration
+st.set_page_config(
+    page_title="Face Analysis with Llama Vision",
+    page_icon="🧠",
+    layout="wide"
+)
+
+# Ollama server configuration
+OLLAMA_SERVER = "10.100.20.76:11434"
+MODEL_NAME = "llama3.2-vision:latest"
+
+# Function to encode image for the API
+def encode_image_to_base64(image_array):
+    """Convert numpy image array to base64 encoding required by the Ollama API"""
+    # Convert numpy array to PIL Image
+    pil_image = Image.fromarray(cv2.cvtColor(image_array, cv2.COLOR_BGR2RGB))
     
-    return face_crop, one_line_attribute
-
-def check_liveness(frame):
+    # Save PIL Image to bytes buffer
+    buffer = io.BytesIO()
+    pil_image.save(buffer, format="JPEG")
     
-    url = "https://recognito-faceliveness.p.rapidapi.com/api/check_liveness"
-    try:
-        files = {'image': open(frame, 'rb')}
-        headers = {"X-RapidAPI-Key": os.environ.get("API_KEY")}
-
-        r = requests.post(url=url, files=files, headers=headers)
-    except:
-        raise gr.Error("Please select images file!")
-
-    faces = None
-
-    face_crop, liveness_result, liveness_score = None, "", -200
-    try:
-        image = Image.open(frame)
-
-        face = Image.new('RGBA',(150, 150), (80,80,80,0))
-        res = r.json().get('data')
-        if res is not None and res:
-            face = res.get('face_rect')
-            x1 = face.get('x')
-            y1 = face.get('y')
-            x2 = x1 + face.get('w')
-            y2 = y1 + face.get('h')
-
-            if x1 < 0:
-                x1 = 0
-            if y1 < 0:
-                y1 = 0
-            if x2 >= image.width:
-                x2 = image.width - 1
-            if y2 >= image.height:
-                y2 = image.height - 1
-
-            face_crop = image.crop((x1, y1, x2, y2))
-            face_image_ratio = face_crop.width / float(face_crop.height)
-            resized_w = int(face_image_ratio * 150)
-            resized_h = 150
-
-            face_crop = face_crop.resize((int(resized_w), int(resized_h)))
-            liveness_score = res.get('liveness_score')
-            liveness = res.get('result')
-
-            if liveness == 'REAL':
-                liveness_result = f"""<br/><div class="markdown-success-container"><p style="text-align: center; font-size: 20px; color: green;">Liveness Check:  REAL<br/>Score: {liveness_score}</p></div>"""
-            else:
-                liveness_result = f"""<br/><div class="markdown-fail-container"><p style="text-align: center; font-size: 20px; color: red;">Liveness Check:  {liveness}<br/>Score: {liveness_score}</p></div>"""
-
-    except:
-        pass
-    
-    return face_crop, liveness_result, liveness_score
-
-def analyze_face(frame):
-    face_crop_1, liveness_result, liveness_score = check_liveness(frame)
-    face_crop_2, attribute = get_attributes(frame)
-
-    face_crop = face_crop_1 if (face_crop_1 is not None) else face_crop_2
-    return [face_crop, liveness_result, attribute]
-
-
-def compare_face(frame1, frame2):
-    url = "https://recognito.p.rapidapi.com/api/compare_face"
-    try:
-        files = {'image1': open(frame1, 'rb'), 'image2': open(frame2, 'rb')}
-        headers = {"X-RapidAPI-Key": os.environ.get("API_KEY")}
-
-        r = requests.post(url=url, files=files, headers=headers)
-    except:
-        raise gr.Error("Please select images files!")
-
-    faces = None
+    # Encode bytes to base64
+    img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')
+    return img_str
 
+# Function to analyze images with the vision model
+def analyze_with_vision_model(image_array):
+    """Send image to Ollama vision model and analyze the response"""
     try:
-        image1 = Image.open(frame1)
-        image2 = Image.open(frame2)
-
-        face1 = Image.new('RGBA',(150, 150), (80,80,80,0))
-        face2 = Image.new('RGBA',(150, 150), (80,80,80,0))
-
-        res1 = r.json().get('image1')
+        # Encode the image to base64
+        base64_image = encode_image_to_base64(image_array)
         
-        if res1 is not None and res1:
-            face = res1.get('detection')
-            x1 = face.get('x')
-            y1 = face.get('y')
-            x2 = x1 + face.get('w')
-            y2 = y1 + face.get('h')
-            if x1 < 0:
-                x1 = 0
-            if y1 < 0:
-                y1 = 0
-            if x2 >= image1.width:
-                x2 = image1.width - 1
-            if y2 >= image1.height:
-                y2 = image1.height - 1
-
-            face1 = image1.crop((x1, y1, x2, y2))
-            face_image_ratio = face1.width / float(face1.height)
-            resized_w = int(face_image_ratio * 150)
-            resized_h = 150
-
-            face1 = face1.resize((int(resized_w), int(resized_h)))
-
-        res2 = r.json().get('image2')
-        if res2 is not None and res2:
-            face = res2.get('detection')
-            x1 = face.get('x')
-            y1 = face.get('y')
-            x2 = x1 + face.get('w')
-            y2 = y1 + face.get('h')
-
-            if x1 < 0:
-                x1 = 0
-            if y1 < 0:
-                y1 = 0
-            if x2 >= image2.width:
-                x2 = image2.width - 1
-            if y2 >= image2.height:
-                y2 = image2.height - 1
-
-            face2 = image2.crop((x1, y1, x2, y2))
-            face_image_ratio = face2.width / float(face2.height)
-            resized_w = int(face_image_ratio * 150)
-            resized_h = 150
-
-            face2 = face2.resize((int(resized_w), int(resized_h)))
-    except:
-        pass
+        # Prepare the prompt for the vision model
+        prompt = """
+        Analyze this image and provide the following information:
+        1. Gender of the person (male or female)
+        2. Age range (provide a 5-year range, like 20-25)
+        3. Emotion (happy, sad, angry, neutral, surprised, etc.)
         
-    matching_result = Image.open("icons/blank.png")
-    similarity_score = ""
-    if face1 is not None and face2 is not None:
-        matching_score = r.json().get('matching_score')
-        if matching_score is not None:
-            str_score = str("{:.4f}".format(matching_score))
-            if matching_score >= 0.7:
-                matching_result = Image.open("icons/same.png")
-                similarity_score = f"""<br/><div class="markdown-success-container"><p style="text-align: center; font-size: 20px; color: green;">Similarity score: {str_score}</p></div>"""
-            else:
-                matching_result = Image.open("icons/different.png")
-                similarity_score = f"""<br/><div class="markdown-fail-container"><p style="text-align: center; font-size: 20px; color: red;">Similarity score: {str_score}</p></div>"""
-    
-    return [face1, face2, matching_result, similarity_score]
-
-
-def image_change_callback(image_data):
-    # This function will be called whenever a new image is set for the gr.Image component
-    print("New image set:", image_data)
-
-with gr.Blocks(css=css) as demo:
-    gr.Markdown(
-        """
-        <a href="https://recognito.vision" style="display: flex; align-items: center;">
-            <img src="https://recognito.vision/wp-content/uploads/2024/03/Recognito-modified.png" style="width: 8%; margin-right: 15px;"/>
-            <div>
-                <p style="font-size: 32px; font-weight: bold; margin: 0;">Recognito</p>
-                <p style="font-size: 18px; margin: 0;">www.recognito.vision</p>
-            </div>
-        </a>
-        <p style="font-size: 20px; font-weight: bold;">✨ NIST FRVT Top #1 Face Recognition Algorithm Developer</p>
-        <div style="display: flex; align-items: center;">
-            &emsp;&emsp;<a href="https://pages.nist.gov/frvt/html/frvt11.html"> <p style="font-size: 14px;">👉🏻 Latest NIST FRVT Report</p></a>
-        </div>
-        <p style="font-size: 20px; font-weight: bold;">📘 Product Documentation</p>
-        <div style="display: flex; align-items: center;">          
-            &emsp;&emsp;<a href="https://docs.recognito.vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/05/book.png" style="width: 48px; margin-right: 5px;"/></a>
-        </div>
-        <p style="font-size: 20px; font-weight: bold;">🏠 Visit Recognito</p>
-        <div style="display: flex; align-items: center;">
-            &emsp;&emsp;<a href="https://recognito.vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/recognito_64_cl.png" style="width: 32px; margin-right: 5px;"/></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.linkedin.com/company/recognito-vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/linkedin_64_cl.png" style="width: 32px; margin-right: 5px;"/></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://huggingface.co/recognito" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/hf_64_cl.png" style="width: 32px; margin-right: 5px;"/></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/recognito-vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/github_64_cl.png" style="width: 32px; margin-right: 5px;"/></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://hub.docker.com/u/recognito" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/docker_64_cl.png" style="width: 32px; margin-right: 5px;"/></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com/@recognito-vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/04/youtube_64_cl.png" style="width: 32px; margin-right: 5px;"/></a>
-        </div>
-        <p style="font-size: 20px; font-weight: bold;">🤝 Contact us for our on-premise Face Recognition, Liveness Detection SDKs deployment</p>
-        <div style="display: flex; align-items: center;">
-            &emsp;&emsp;<a target="_blank" href="mailto:[email protected]"><img src="https://img.shields.io/badge/[email protected]?logo=gmail " alt="www.recognito.vision"></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="https://wa.me/+14158003112"><img src="https://img.shields.io/badge/whatsapp-+14158003112-blue.svg?logo=whatsapp " alt="www.recognito.vision"></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="https://t.me/recognito_vision"><img src="https://img.shields.io/badge/telegram-@recognito__vision-blue.svg?logo=telegram " alt="www.recognito.vision"></a>
-            &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="https://join.slack.com/t/recognito-workspace/shared_invite/zt-2d4kscqgn-"><img src="https://img.shields.io/badge/slack-recognito__workspace-blue.svg?logo=slack " alt="www.recognito.vision"></a>
-        </div>
-        <br/><br/><br/>
+        Format your answer exactly like this:
+        Gender: [gender]
+        Age: [age range]
+        Emotion: [emotion]
         """
-    )
+        
+        # Prepare the API request payload
+        payload = {
+            "model": MODEL_NAME,
+            "prompt": prompt,
+            "images": [base64_image],
+            "stream": False
+        }
+        
+        # Make the API request to Ollama server
+        response = requests.post(
+            f"http://{OLLAMA_SERVER}/api/generate",
+            headers={"Content-Type": "application/json"},
+            data=json.dumps(payload)
+        )
+        
+        if response.status_code != 200:
+            return "Unknown", "Unknown", "Unknown"
+        
+        # Parse the response
+        result = response.json()
+        generated_text = result.get("response", "")
+        
+        # Extract information using simple parsing
+        gender = "Not detected"
+        age = "Not detected"
+        emotion = "Not detected"
+        
+        for line in generated_text.split('\n'):
+            line = line.strip()
+            if line.startswith("Gender:"):
+                gender = line.replace("Gender:", "").strip()
+            elif line.startswith("Age:"):
+                age = line.replace("Age:", "").strip()
+            elif line.startswith("Emotion:"):
+                emotion = line.replace("Emotion:", "").strip()
+        
+        return gender, age, emotion
     
-    with gr.Tabs():
-        with gr.Tab("Face Recognition"):
-            with gr.Row():
-                with gr.Column(scale=2):
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            compare_face_input1 = gr.Image(label="Image1", type='filepath', elem_classes="example-image")
-                            gr.Examples(['examples/1.jpg', 'examples/2.jpg', 'examples/3.jpg', 'examples/4.jpg'], 
-                                        inputs=compare_face_input1)
-                        with gr.Column(scale=1):
-                            compare_face_input2 = gr.Image(label="Image2", type='filepath', elem_classes="example-image")
-                            gr.Examples(['examples/5.jpg', 'examples/6.jpg', 'examples/7.jpg', 'examples/8.jpg'], 
-                                        inputs=compare_face_input2)
-                            
-                with gr.Blocks():
-                    with gr.Column(scale=1, min_width=400, elem_classes="block-background"):     
-                        compare_face_button = gr.Button("Compare Face", variant="primary", size="lg")
-                        with gr.Row(elem_classes="face-row"):
-                            face_output1 = gr.Image(value="icons/face.jpg", label="Face 1", scale=0, elem_classes="face-image", show_share_button=False, show_download_button=False, show_fullscreen_button=False)
-                            compare_result = gr.Image(value="icons/blank.png", min_width=30, scale=0, show_download_button=False, show_label=False, show_share_button=False, show_fullscreen_button=False)
-                            face_output2 = gr.Image(value="icons/face.jpg", label="Face 2", scale=0, elem_classes="face-image", show_share_button=False, show_download_button=False, show_fullscreen_button=False)
-                        similarity_markdown = gr.Markdown("")
-
-                        compare_face_button.click(compare_face, inputs=[compare_face_input1, compare_face_input2], outputs=[face_output1, face_output2, compare_result, similarity_markdown])
+    except Exception as e:
+        st.error(f"Error analyzing image: {str(e)}")
+        return "Error", "Error", "Error"
+
+# App title and description
+st.title("Face Analysis with Delay & Single Capture")
+st.write("This app waits for 7 seconds to let you position yourself, then detects and analyzes your face.")
+
+# Create layout
+col1, col2 = st.columns([3, 2])
+
+# Webcam display in column 1
+with col1:
+    st.write("### Webcam Feed")
+    webcam_placeholder = st.empty()
+
+# Results display in column 2
+with col2:
+    st.write("### Captured Face")
+    face_placeholder = st.empty()
+    
+    st.write("### Analysis Results")
+    result_container = st.container()
+    analysis_status = result_container.empty()
+    gender_text = result_container.empty()
+    age_text = result_container.empty()
+    emotion_text = result_container.empty()
+
+# Initialize session state variables
+if 'face_captured' not in st.session_state:
+    st.session_state.face_captured = False
+if 'captured_face' not in st.session_state:
+    st.session_state.captured_face = None
+if 'capture_in_progress' not in st.session_state:
+    st.session_state.capture_in_progress = False
+if 'start_time' not in st.session_state:
+    st.session_state.start_time = None
+
+# Function to reset the app state
+def reset_app():
+    st.session_state.face_captured = False
+    st.session_state.captured_face = None
+    st.session_state.capture_in_progress = False
+    st.session_state.start_time = None
+
+# Create buttons
+col_btn1, col_btn2 = st.columns(2)
+with col_btn1:
+    start_button = st.button("Start Webcam", key="start")
+with col_btn2:
+    reset_button = st.button("Reset", key="reset", on_click=reset_app)
+
+if reset_button:
+    st.rerun()
+
+if start_button or st.session_state.capture_in_progress:
+    # Set capture in progress flag
+    st.session_state.capture_in_progress = True
+    
+    # Initialize face detector
+    face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
+    
+    # Open webcam
+    cap = cv2.VideoCapture(0)
+    
+    # Set the start time if it's not already set
+    if st.session_state.start_time is None:
+        st.session_state.start_time = time.time()
+    
+    try:
+        # If we haven't captured a face yet
+        if not st.session_state.face_captured:
+            # Define the warm-up period (in seconds)
+            warmup_period = 7  # seconds to wait before starting detection
+            
+            # Loop until we capture a face
+            while True:
+                # Capture frame from webcam
+                ret, frame = cap.read()
+                if not ret:
+                    st.error("Could not access webcam.")
+                    break
                 
-        with gr.Tab("Face Liveness, Analysis"):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    face_input = gr.Image(label="Image", type='filepath', elem_classes="example-image")
-                    gr.Examples(['examples/att_1.jpg', 'examples/att_2.jpg', 'examples/att_3.jpg', 'examples/att_4.jpg', 'examples/att_5.jpg', 'examples/att_6.jpg', 'examples/att_7.jpg'], 
-                                inputs=face_input)
-
-                with gr.Blocks():
-                    with gr.Column(scale=1, elem_classes="block-background"):     
-                        analyze_face_button = gr.Button("Analyze Face", variant="primary", size="lg")
-                        with gr.Row(elem_classes="face-row"):
-                            face_output = gr.Image(value="icons/face.jpg", label="Face", scale=0, elem_classes="face-image", show_share_button=False, show_download_button=False, show_fullscreen_button=False)
+                # Calculate elapsed time
+                elapsed_time = time.time() - st.session_state.start_time
+                remaining_time = max(0, warmup_period - elapsed_time)
+                
+                # Make a copy for display
+                display_frame = frame.copy()
+                
+                # During warm-up period, just show the webcam feed with countdown
+                if elapsed_time < warmup_period:
+                    # Add countdown text to the frame
+                    cv2.putText(
+                        display_frame, 
+                        f"Getting ready... {int(remaining_time)}s", 
+                        (50, 50), 
+                        cv2.FONT_HERSHEY_SIMPLEX, 
+                        1, 
+                        (0, 255, 255), 
+                        2
+                    )
+                    
+                    analysis_status.info(f"Please position yourself... Starting detection in {int(remaining_time)} seconds")
+                else:
+                    # After warm-up, start face detection
+                    analysis_status.info("Detecting face...")
+                    
+                    # Convert to grayscale for face detection
+                    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+                    
+                    # Detect faces
+                    faces = face_cascade.detectMultiScale(gray, 1.1, 4)
+                    
+                    # If faces are detected
+                    if len(faces) > 0:
+                        # Get the largest face (assuming it's the main subject)
+                        largest_face = max(faces, key=lambda rect: rect[2] * rect[3])
+                        (x, y, w, h) = largest_face
+                        
+                        # Draw rectangle around the face
+                        cv2.rectangle(display_frame, (x, y), (x+w, y+h), (0, 255, 0), 2)
                         
-                        liveness_result = gr.Markdown("")
-                        attribute_result = gr.Markdown("")
+                        # Extract the face image
+                        face_roi = frame[y:y+h, x:x+w]
+                        
+                        if face_roi.size > 0:
+                            # Capture the face
+                            st.session_state.captured_face = face_roi.copy()
+                            st.session_state.face_captured = True
+                            
+                            # Display the captured face
+                            face_rgb = cv2.cvtColor(face_roi, cv2.COLOR_BGR2RGB)
+                            face_placeholder.image(face_rgb, caption="Captured Face", channels="RGB")
+                            
+                            break
                     
-                    analyze_face_button.click(analyze_face, inputs=face_input, outputs=[face_output, liveness_result, attribute_result])
-
-    gr.HTML('<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FRecognito%2FFaceRecognition-LivenessDetection-FaceAnalysis"><img src="https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FRecognito%2FFaceRecognition-LivenessDetection-FaceAnalysis&countColor=%2337d67a&style=flat&labelStyle=upper" /></a>')
+                    # Add detecting text to the frame
+                    cv2.putText(
+                        display_frame, 
+                        "Detecting face...", 
+                        (50, 50), 
+                        cv2.FONT_HERSHEY_SIMPLEX, 
+                        1, 
+                        (0, 255, 0), 
+                        2
+                    )
+                
+                # Convert BGR to RGB for display
+                display_rgb = cv2.cvtColor(display_frame, cv2.COLOR_BGR2RGB)
+                
+                # Update the webcam feed
+                webcam_placeholder.image(display_rgb, caption="Camera Feed", channels="RGB")
+                
+                # Short delay to control frame rate
+                time.sleep(0.1)
+                
+        # If we've already captured a face, analyze it
+        if st.session_state.face_captured and st.session_state.captured_face is not None:
+            # Display the analysis status
+            analysis_status.info("Analyzing captured face...")
+            
+            # Analyze the face
+            gender, age, emotion = analyze_with_vision_model(st.session_state.captured_face)
+            
+            # Display results
+            analysis_status.success("Analysis complete!")
+            gender_text.markdown(f"**Gender:** {gender}")
+            age_text.markdown(f"**Age:** {age}")
+            emotion_text.markdown(f"**Emotion:** {emotion}")
+            
+            # Reset the capture in progress flag
+            st.session_state.capture_in_progress = False
+            
+            # Display a final frame with the detected face
+            if st.session_state.captured_face is not None:
+                face_rgb = cv2.cvtColor(st.session_state.captured_face, cv2.COLOR_BGR2RGB)
+                face_placeholder.image(face_rgb, caption="Captured Face", channels="RGB")
+            
+    except Exception as e:
+        st.error(f"An error occurred: {str(e)}")
     
-demo.launch(server_name="0.0.0.0", server_port=7860, show_api=False)
+    finally:
+        # Release webcam when done
+        cap.release()
+
+# Add some information at the bottom
+st.markdown("---")
+st.markdown("""
+### How it works
+1. Click "Start Webcam" to begin
+2. The app will show your webcam feed for 7 seconds to let you position yourself
+3. After the countdown, it will automatically detect and capture your face
+4. The captured face is sent to the Llama 3.2 Vision model for analysis
+5. Results show gender, age range, and emotion
+6. Click "Reset" to start over
+
+For best results, ensure good lighting and position your face clearly in the frame.
+""")