import streamlit as st
from streamlit_webrtc import webrtc_streamer, VideoProcessorBase, WebRtcMode
import av
import cv2
import numpy as np
import mediapipe as mp
import tensorflow as tf
import webbrowser

# Load the model and labels
model = tf.keras.models.load_model("model.h5")
labels = np.load("labels.npy")

# Initialize Mediapipe objects
holistic = mp.solutions.holistic
hands = mp.solutions.hands

class EmotionDetector(VideoProcessorBase):
    def __init__(self):
        self.holistic = holistic.Holistic()
        self.drawing = mp.solutions.drawing_utils
        self.detected_emotion = None

    def recv(self, frame: av.VideoFrame) -> av.VideoFrame:
        frm = frame.to_ndarray(format="bgr24")
        frm = cv2.flip(frm, 1)
        res = self.holistic.process(cv2.cvtColor(frm, cv2.COLOR_BGR2RGB))

        lst = []
        
        # Extract face landmarks
        if res.face_landmarks:
            for i in res.face_landmarks.landmark:
                lst.append(i.x - res.face_landmarks.landmark[1].x)
                lst.append(i.y - res.face_landmarks.landmark[1].y)

        # Extract left-hand landmarks
        if res.left_hand_landmarks:
            for i in res.left_hand_landmarks.landmark:
                lst.append(i.x - res.left_hand_landmarks.landmark[8].x)
                lst.append(i.y - res.left_hand_landmarks.landmark[8].y)
        else:
            lst.extend([0.0] * 42)
        
        # Extract right-hand landmarks
        if res.right_hand_landmarks:
            for i in res.right_hand_landmarks.landmark:
                lst.append(i.x - res.right_hand_landmarks.landmark[8].x)
                lst.append(i.y - res.right_hand_landmarks.landmark[8].y)
        else:
            lst.extend([0.0] * 42)

        if lst:
            lst = np.array(lst).reshape(1, -1)
            pred = labels[np.argmax(model.predict(lst))]
            self.detected_emotion = pred.decode("utf-8")
        
        if self.detected_emotion:
            cv2.putText(frm, self.detected_emotion, (50, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 0, 0), 2)

        self.drawing.draw_landmarks(frm, res.face_landmarks, holistic.FACEMESH_TESSELATION)
        self.drawing.draw_landmarks(frm, res.left_hand_landmarks, hands.HAND_CONNECTIONS)
        self.drawing.draw_landmarks(frm, res.right_hand_landmarks, hands.HAND_CONNECTIONS)

        return av.VideoFrame.from_ndarray(frm, format="bgr24")

st.set_page_config(page_title="Mood Sick 🎵", page_icon="🎵", layout="wide")
st.title("📜 Mood Sick")

col1, col3 = st.columns([2, 7])

with col1:
    st.image("D:/Moodsick/images/logo2.svg", width=300, use_column_width=False)

with col3:
    st.markdown(
        '<p class="intro-text" style="color: #ff5733;font-weight: bold;">📌 Mood Sick is an emotion detection-based music recommendation system.<br>📌 To get recommended songs, start by allowing camera access.</p>',
        unsafe_allow_html=True,
    )

lang = st.text_input("Enter your preferred language")
artist = st.text_input("Enter your preferred artist")

if lang and artist:
    ctx = webrtc_streamer(
        key="example",
        mode=WebRtcMode.SENDRECV,
        video_processor_factory=EmotionDetector,
        media_stream_constraints={"video": True},
    )

btn = st.button("Recommend music 🎵")

if btn:
    if ctx and ctx.video_processor:
        detected_emotion = ctx.video_processor.detected_emotion
    else:
        detected_emotion = None

    if not detected_emotion:
        st.warning("Please let me capture your emotion first!")
    else:
        webbrowser.open(
            f"https://www.youtube.com/results?search_query={lang}+{detected_emotion}+songs+{artist}"
        )

st.write("Made with ❤️ by Pratham & Ridhima")



I need to make the code using html css and perfom the same function and it will be good looking