server.py

import streamlit as st
import streamlit.components.v1 as components
import hashlib
import time
import requests
import base64
from io import BytesIO
import cv2
import mediapipe as mp
import numpy as np
import os

# Page config remains the same
st.set_page_config(
    page_title="BIONIC Health Portal",
    page_icon="🏥",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Updated CSS with horizontally narrower forms
st.markdown(
    """
    <style>
        .reportview-container {
            background-color: #181818;
        }
        .sidebar .sidebar-content {
            background-color: #181818;
        }

        body {
            margin: 0; 
            padding: 0; 
        }

        [data-testid="stAppViewContainer"] {
            background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
            margin: 0; 
            padding: 0; 
        }
        
        .stRadio > div {
            display: flex;
            flex-direction: row !important;
            gap: 1rem;
            padding: 1rem;
        }

        .stRadio > div input {
            display: none;
        }
        
        .stRadio > div label {
            background: transparent;
            color: white !important;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 1rem;
            margin: 0 !important;
        }
        
        .stRadio > div label:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .stRadio > div [type="radio"]:checked + label {
            background-color: rgba(255, 255, 255, 0.2);
            font-weight: bold;
        }
        
        .form-container {
            max-width: 300px;
            margin: 0 auto;
            padding: 0;
        }
        
        .stTextInput input, .stSelectbox select, div[data-baseweb="select"] > div {
            width: 100% !important;
            min-width: unset !important;
            max-width: 100% !important;
            background-color: #1c1c1c;
            color: white;
        }
        
        .stButton > button {
            width: 100% !important;
        }
        
        .stForm > div[data-testid="stForm"] {
            padding: 0 !important;
        }
        
        .stForm {
            padding: 0 !important;
        }
        
        .main-title {
            font-size: 2.5rem;
            color: #3498DB; /* Updated title color */
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .stButton button {
            background: linear-gradient(135deg, #2980b9 0%, #1a1a1a 100%);
            color: white;
            border-radius: 8px;
            padding: 0.5rem 2rem;
            border: none;
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.1);
            transition: all 0.3s ease;
        }
        
        .stButton button:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
            background: linear-gradient(135deg, #1a5276 0%, #1a1a1a 100%);
        }
        
        .stTextInput input, .stSelectbox select {
            border-radius: 8px;
            border: 1px solid #E0E3E7;
            padding: 0.75rem;
            width: 100%;
            margin-bottom: 1rem;
        }
        
        .stTextInput input:focus, .stSelectbox select:focus {
            border-color: #3498DB;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .custom-card {
            background: #1c1c1c;
            padding: 1.5rem;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            margin-bottom: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        [data-testid="stMetricValue"] {
            font-size: 2rem !important;
            color: #2980b9;
        }
        
        [data-testid="stMetricDelta"] {
            color: #27AE60;
            font-size: 1rem;
        }
        
        /* Sidebar Styling */
        [data-testid="stSidebar"] {
            background-color: #1c1c1c;
            padding-top: 2rem;
        }
        
        [data-testid="stSidebar"] .stRadio label {
            color: white !important;
            font-size: 1.1rem;
            padding: 0.5rem 0;
        }
        
        .main-title {
            font-size: 2.5rem;
            color: #3498DB; 
            margin-bottom: 2rem;
        }

        .center-button {
            display: flex;
            justify-content: center;
        }
    </style>
    """,
    unsafe_allow_html=True
)

# Initialize session state
if 'logged_in' not in st.session_state:
    st.session_state.logged_in = False
if 'users' not in st.session_state:
    st.session_state.users = {}
if 'chat_history' not in st.session_state:
    st.session_state.chat_history = []

def hash_password(password):
    return hashlib.sha256(password.encode()).hexdigest()

def get_text():
    try:
        response = requests.get("http://localhost:5000/get_text")
        return response.json()["text"]
    except requests.RequestException as e:
        return f"Error fetching text: {str(e)}"

def display_chat_message(message, is_user=True):
    message_class = "user-message" if is_user else "bot-message"
    st.markdown(
        f"""
        <div class="chat-message {message_class}">
            {message}
        </div>
        """,
        unsafe_allow_html=True
    )

def show_video_recording():
    st.markdown("<h2 style=color:lightblue>📹 Video Recording</h2>", unsafe_allow_html=True)

    html_code = """
        <div class="video-container" style="position: relative;">
            <div id="redDot" style="height: 12px; width: 12px; background-color: red; border-radius: 50%; display: none; position: absolute; top: 10px; left: 10px;"></div>
            <video id="player" autoplay playsinline style="border: 2px solid #34495E; border-radius: 10px; width: 100%;"></video>
            <div class="button-container">
                <button id="startBtn" class="record-button" onclick="startRecording()">
                    Start Recording
                </button>
                <button id="stopBtn" class="record-button" onclick="stopRecording()" disabled>
                    Stop Recording 
                </button>
            </div>
            <a id="download" href="#" style="display:none;">Download Recording</a>
        </div>
        
        <script>
            let mediaRecorder;
            let recordedBlobs = [];

            function startRecording() {
                recordedBlobs = [];
                navigator.mediaDevices.getUserMedia({ 
                    video: true, 
                    audio: false
                })
                .then(stream => {
                    document.getElementById('player').srcObject = stream;
                    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

                    mediaRecorder.ondataavailable = (event) => {
                        if (event.data && event.data.size > 0) {
                            recordedBlobs.push(event.data);
                        }
                    };

                    mediaRecorder.start();
                    document.getElementById("redDot").style.display = "block";
                    document.getElementById("startBtn").disabled = true;
                    document.getElementById("stopBtn").disabled = false;
                })
                .catch(error => {
                    console.error("Error accessing camera: ", error);
                    alert("Could not access camera. Please check permissions.");
                });
            }

            function stopRecording() {
                mediaRecorder.stop();
                document.getElementById("redDot").style.display = "none";

                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedBlobs, { type: 'video/webm' });
                    const url = URL.createObjectURL(blob);

                    const downloadLink = document.getElementById('download');
                    downloadLink.href = url;
                    downloadLink.download = 'recorded_video.webm';
                    downloadLink.style.display = 'block';

                    document.getElementById("startBtn").disabled = false;
                    document.getElementById("stopBtn").disabled = true;
                };
            }
        </script>
    """
    components.html(html_code, height=800)  # Reduced height for the video section
    if(st.button("Get Analysis")):
        st.write(get_text())
    st.markdown('</div>', unsafe_allow_html=True)

def show_chatbot():
    nlx_chatbot_html = """
    <html lang="en">
        <head>
            <title>NLX Widget Sample HTML</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                body {
                    margin: 0;
                    padding: 0;
                }
                #chatbot-container {
                    position: absolute; 
                    top: 20px;
                    left: 0;
                    right: 0;
                    z-index: 1000; 
                    height: auto; 
                }
            </style>
        </head>
        <body>
            <div id="chatbot-container">
                <script defer src="https://unpkg.com/@nlxai/chat-widget/lib/index.umd.js"></script>
                <script>
                window.addEventListener("DOMContentLoaded", () => {
                    const widget = nlxai.chatWidget.create({
                        config: {
                            botUrl: "https://bots.dev.studio.nlx.ai/c/kQMVl5AV3hfwJWLcuTCF3/Ext2eq5ZAYOYpJO9mTOyo",
                            headers: {
                                "nlx-api-key": "AIzaSyCqkJscbsoqmPyFRLRpCIPi850Zi7WptYI"
                            },
                            languageCode: "en-US"
                        },
                        titleBar: {
                            "title": "Chat with BIONIC!",
                            "withCollapseButton": true,
                            "withCloseButton": true
                        },
                        onExpand: (conversationHandler) => {
                            const checkMessages = (messages) => {
                                if (messages.length === 0) {
                                    conversationHandler.sendWelcomeIntent();
                                }
                                conversationHandler.unsubscribe(checkMessages);
                            };
                            conversationHandler.subscribe(checkMessages);
                        },
                        theme: {
                            "primaryColor": "lightblue",
                            "darkMessageColor": "lightblue",
                            "lightMessageColor": "#EFEFEF",
                            "white": "#FFFFFF",
                            "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
                            "spacing": 12,
                            "borderRadius": 8,
                            "chatWindowMaxHeight": 800
                        }
                    });
                });
                </script>
            </div>
        </body>
    </html>
    """
    # Implement the HTML code into Streamlit
    st.components.v1.html(nlx_chatbot_html, height=600, scrolling=True)

def main():
    # Add menu choice
    menu_choice = st.sidebar.radio(" ", ["Home", "Video Recording", "Chatbot", "Medical Records"])

    if 'page' not in st.session_state:
        st.session_state.page = "Home"

    if not st.session_state.get('logged_in', False):
        # Center the forms using columns
        col1, col2, col3 = st.columns([1, 3, 1])  # Adjust the proportions as needed
        
        with col2:
            st.markdown("<h1 class='main-title' style='color: lightblue; font-size: 90px;'>BIONIC Health Portal</h1>", unsafe_allow_html=True)
            st.write("<h3 style='color: lightblue; text-align:center;'> Welcome to BIONIC! Please sign up or login below. </h3>", unsafe_allow_html=True)

            # Sign Up Form
            st.markdown("<h3 style='color:lightblue; text-align:center;'>✨ Sign Up</h3>", unsafe_allow_html=True)
            with st.form("signup_form"):
                new_username = st.text_input(":gray[New Username]")
                new_password = st.text_input(":gray[New Password]", type="password")
                new_age = st.text_input(":gray[Age]", placeholder="Enter your age")
                new_gender = st.selectbox(
                    ":gray[Gender]",
                    options=["Select your gender", "Male", "Female", "Other"],
                    index=0
                )
                submit_button = st.form_submit_button("Sign Up")
                if submit_button:
                    if not new_username or not new_password or not new_age or new_gender == "Select your gender":
                        st.error(":gray[All fields are required.]")
                    elif new_username in st.session_state.users:
                        st.error("Username already exists.")
                    else:
                        st.session_state.users[new_username] = {
                            "password": hash_password(new_password),
                            "age": new_age,
                            "gender": new_gender
                        }
                        st.success("Sign up successful!")
                        st.session_state.logged_in = True
                        st.rerun()

            # Login link
            if st.button("Already have an account? Log in here."):
                st.session_state.show_login = True

            # Login Form
            if st.session_state.get('show_login', False):
                st.markdown("<h3 style='color:lightblue; text-align:center;'>🔐 Login</h3>", unsafe_allow_html=True)
                with st.form("login_form"):
                    login_username = st.text_input(":gray[Username]")
                    login_password = st.text_input(":gray[Password]", type="password")
                    login_button = st.form_submit_button("Login")
                    if login_button:
                        if (login_username in st.session_state.users and
                                st.session_state.users[login_username]["password"] == hash_password(login_password)):
                            st.success("Login successful!")
                            st.session_state.logged_in = True
                            st.session_state.show_login = False
                            st.rerun()
                        else:
                            st.error("Invalid username or password.")

    else:
        if menu_choice == "Home":
            # Add some spacing before the title
            for i in range(10):
                st.write(" ")

            # Custom CSS for title size
            st.markdown(
                """
                <style>
                .custom-title {
                    font-size: 72px;  /* Adjust size as needed */
                    color: white;      /* Change color if needed */
                    text-align: left;  /* Align text as desired */
                }
                </style>
                """,
                unsafe_allow_html=True
            )
            # Typing animation function
            def typing_animation(text, delay=0.1):
                # Create a placeholder for the animation
                placeholder = st.empty()
                current_text = ""
                for char in text:
                    current_text += char  # Append the current character
                    placeholder.markdown(f"<h1 style='font-size: 100px; color: lightblue'>{current_text}</h1>", unsafe_allow_html=True)
                    time.sleep(delay)

                # Display the full sentence at the end
                placeholder.markdown(f"<h1 style='font-size: 100px; color: lightblue'>{text}</h1>", unsafe_allow_html=True)

            typing_animation("BIONIC — AI-Enhanced Prosthetic Rehabilitation Tool", delay=0.1)

        elif menu_choice == "Video Recording":
            show_video_recording()
        
        elif menu_choice == "Chatbot":
            st.markdown("<h2 style=color:lightblue>Chat with our Chatbot right here! You may inform your symptoms, concerns, and etc.</h2>", unsafe_allow_html=True)
            show_chatbot()
        
        elif menu_choice == "Medical Records":
            st.markdown("<div class='card'>", unsafe_allow_html=True)
            st.markdown("<h2 style=color:lightblue>📋 Medical Records</h2>", unsafe_allow_html=True)
            
            uploaded_file = st.file_uploader(
                "Upload Medical Records (PDF)",
                type=["pdf"],
                help="Please upload your medical records in PDF format"
            )
            
            info = st.text_area(
                "If you have any other information you would like to provide, please write it out below:",
                placeholder="Type here..."
            )
            
            if st.button("Submit Records"):
                st.success("Records submitted successfully!")
            st.markdown("</div>", unsafe_allow_html=True)


# Run the main function
if __name__ == "__main__":
    main()




class ProstheticJointDetector:
    def __init__(self):
        # Initialize MediaPipe Pose
        self.mp_pose = mp.solutions.pose
        self.pose = self.mp_pose.Pose(
            min_detection_confidence=0.7,
            min_tracking_confidence=0.7,
            model_complexity=1
        )
        self.mp_draw = mp.solutions.drawing_utils
        
        # Define color range specifically for black garbage bag
        self.prosthetic_color_ranges = [
            {'lower': np.array([0, 0, 0]), 'upper': np.array([180, 180, 30])}  # Adjusted for black material
        ]
        
        # Only track legs
        self.limb_connections = {
            'right_arm': [
        (self.mp_pose.PoseLandmark.RIGHT_SHOULDER, self.mp_pose.PoseLandmark.RIGHT_ELBOW),
        (self.mp_pose.PoseLandmark.RIGHT_ELBOW, self.mp_pose.PoseLandmark.RIGHT_WRIST)
    ],
    'left_arm': [
        (self.mp_pose.PoseLandmark.LEFT_SHOULDER, self.mp_pose.PoseLandmark.LEFT_ELBOW),
        (self.mp_pose.PoseLandmark.LEFT_ELBOW, self.mp_pose.PoseLandmark.LEFT_WRIST)
    ],
            'right_leg': [
                (self.mp_pose.PoseLandmark.RIGHT_HIP, self.mp_pose.PoseLandmark.RIGHT_KNEE),
                (self.mp_pose.PoseLandmark.RIGHT_KNEE, self.mp_pose.PoseLandmark.RIGHT_ANKLE)
            ],
            'left_leg': [
                (self.mp_pose.PoseLandmark.LEFT_HIP, self.mp_pose.PoseLandmark.LEFT_KNEE),
                (self.mp_pose.PoseLandmark.LEFT_KNEE, self.mp_pose.PoseLandmark.LEFT_ANKLE)
            ]
        }

    def detect_prosthetic_color(self, frame):
        hsv = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV)
        combined_mask = np.zeros(frame.shape[:2], dtype=np.uint8)
        
        for color_range in self.prosthetic_color_ranges:
            mask = cv2.inRange(hsv, color_range['lower'], color_range['upper'])
            combined_mask = cv2.bitwise_or(combined_mask, mask)
        
        kernel = np.ones((5,5), np.uint8)
        combined_mask = cv2.morphologyEx(combined_mask, cv2.MORPH_OPEN, kernel)
        combined_mask = cv2.morphologyEx(combined_mask, cv2.MORPH_CLOSE, kernel)
        
        return combined_mask

    def check_prosthetic_in_region(self, frame, mask, start_point, end_point):
        h, w = frame.shape[:2]
        start_x, start_y = int(start_point.x * w), int(start_point.y * h)
        end_x, end_y = int(end_point.x * w), int(end_point.y * h)
        
        limb_mask = np.zeros_like(mask)
        cv2.line(limb_mask, (start_x, start_y), (end_x, end_y), 255, thickness=20)
        
        overlap = cv2.bitwise_and(mask, limb_mask)
        overlap_area = np.sum(overlap > 0)
        min_area_threshold = 200  # Adjust this value to change sensitivity
        
        return overlap_area > min_area_threshold

    def process_frame(self, frame):
        image_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        results = self.pose.process(image_rgb)
        
        if results.pose_landmarks:
            prosthetic_mask = self.detect_prosthetic_color(frame)
            
            landmarks = results.pose_landmarks.landmark
            for limb_name, connections in self.limb_connections.items():
                for start_landmark, end_landmark in connections:
                    if self.check_prosthetic_in_region(
                        frame, 
                        prosthetic_mask,
                        landmarks[start_landmark.value],
                        landmarks[end_landmark.value]
                    ):
                        h, w = frame.shape[:2]
                        start_point = landmarks[start_landmark.value]
                        end_point = landmarks[end_landmark.value]
                        
                        start_px = (int(start_point.x * w), int(start_point.y * h))
                        end_px = (int(end_point.x * w), int(end_point.y * h))
                        
                        # Draw green line for detected segment
                        cv2.line(frame, start_px, end_px, (0, 255, 0), 4)
                        
                        # Add text label
                        mid_x = (start_px[0] + end_px[0]) // 2
                        mid_y = (start_px[1] + end_px[1]) // 2 
                        cv2.putText(frame, 
                                limb_name, 
                                (mid_x - 40, mid_y - 10),
                                cv2.FONT_HERSHEY_SIMPLEX,
                                0.5,
                                (0, 255, 0),
                                2)
        
        return frame