Interview preparation web page using computer vision & AI

I am designing a web page for interview preparation using computer vision and AI. The interface incorporates visual indicators to assess lighting quality, ensuring optimal visibility. Can be done using green yellow and red indicators with a satisfactory percentage number, (a red indicator prompts users to make improvements in lighting setup). This feature assists users in creating a visually appealing and professional impression during their interviews. To help users maintain an effective composition, the interface provides visual cues for proper framing. Users receive prompts and guidelines, ensuring they are centered within the frame and maintaining a visually balanced appearance. This guidance helps users create a visually appealing and engaging presence during their interviews. If it’s okay, the indicator turns green and changes colour with cues displayed.

Real-time alerts and prompts play a crucial role in enhancing users’ performance. The system monitors users’ facial expressions, providing alerts and suggestions to smile more and relax facial muscles, leading to a more confident and engaging presence. It also prompts users to maintain eye contact with the camera, fostering a sense of connection and rapport with interviewers. Additionally, users receive real-time feedback on their speech pace, ensuring they are speaking at an appropriate speed for clear communication. Can some one give an idea about how to creatively design this web page and where to place or how to place these indicators on the page. I am attaching a basic level screen shot of the design. Thanks