Update app.py

app.py

@@ -1,11 +1,5 @@
+from bokeh.themes import theme
 from numpy.core.records import record
-import streamlit as st
-st.set_page_config(
-    page_title="Game Keys",
-    page_icon="🎮",
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
 import pandas as pd
 import numpy as np
 import cv2
@@ -13,6 +7,17 @@ import mediapipe as mp
 import time
 from PIL import Image
 import tempfile
+from bokeh.models.widgets import Div
+import streamlit as st
+# ---------------------------------------------------------------------
+st.set_page_config(
+    page_title="Game Keys",
+    page_icon="🎮",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# ---------------------------------------------------------------------
 
 DEMO_IMAGE = 'demo.jpg'
 DEMO_VIDEO = 'test3.mp4'
@@ -20,19 +25,9 @@ prevTime=0
 currTime=0 
 tipIds= [4,8,12,16,20]
 st.title('Game Keys with Hand Tracking Web-App')
-import webbrowser
-
 url = 'https://github.com/shashankanand13monu/Game-Automation'
 
-# if st.button('Code'):
-#     webbrowser.open_new_tab(url)
-
-# st.set_page_config(
-#     page_title="Ex-stream-ly Cool App",
-#     page_icon="🧊",
-#     layout="wide",
-#     initial_sidebar_state="expanded"
-# )
+# ----------------------------------------------------------------------
 
 mp_drawing = mp.solutions.drawing_utils
 mp_draw= mp.solutions.drawing_utils
@@ -40,32 +35,15 @@ mp_face_mesh = mp.solutions.face_mesh
 mp_draw= mp.solutions.drawing_utils
 mp_hand= mp.solutions.hands
 mp_hands = mp.solutions.hands
-# mp_drawing = mp.solutions.drawing_utils
 mp_drawing_styles = mp.solutions.drawing_styles
-# mp_hands = mp.solutions.hands
-# mp_hand= mp.solutions.hands
-# mp_drawing = mp.solutions.drawing_utils
-# mp_drawing_styles = mp.solutions.drawing_styles
-# mp_hands = mp.solutions.hands
+
+# ----------------------------------------------------------------------
+
 t = st.empty()
 def draw(str):
-    # t.subheader(str)
-    # original_title = 'f<p style="font-family:Arial Black; color:red; font-size: 30px;">{str}</p>'
-    # st.markdown('f<p style="font-family:Arial Black; color:red; font-size: 30px;">{str}</p>', unsafe_allow_html=True) 
     t.markdown(f'<p style="font-family:Arial Black;color:#FF0686;font-size:28px;;">{str}</p>', unsafe_allow_html=True)
-#     variable_output = str
-#     font_size = 30
-
-#     html_str = f"""
-# <style>
-# p.a {{
-#   font: bold {font_size}px Courier;
-# }}
-# </style>
-# <p class="a">{variable_output}</p>
-#     """
 
-#     st.markdown(html_str, unsafe_allow_html=True)
+# ----------------------------------------------------------------------
 
 st.markdown(
     """
@@ -78,13 +56,23 @@ width: 350px
 margin-left: -350px
 </style>
     """,unsafe_allow_html=True,)
-if st.sidebar.button('Code'):
-    webbrowser.open_new_tab(url)
-st.sidebar.title('Menu')
+# ----------------------------------------------------------------------
+if st.sidebar.button('Github'):
+    js = "window.open('https://github.com/shashankanand13monu/Game-Automation')"  # New tab or window
+    # js = "window.location.href = 'https://www.streamlit.io/'"  # Current tab
+    html = '<img src onerror="{}">'.format(js)
+    div = Div(text=html)
+    st.bokeh_chart(div)
+
+# ----------------------------------------------------------------------
 
+st.sidebar.title('Menu')
 st.sidebar.subheader('Settings')
 
+# ----------------------------------------------------------------------
 @st.cache ()
+# ----------------------------------------------------------------------
+
 def image_resize(image, width=None, height=None, inter =cv2.INTER_AREA):
     
     dim = None
@@ -100,15 +88,12 @@ def image_resize(image, width=None, height=None, inter =cv2.INTER_AREA):
     #resize the image
     resized =cv2.resize(image, dim ,interpolation=inter)
     return resized
+# ----------------------------------------------------------------------
 
 app_mode= st.sidebar.selectbox('Choose the App Mode',
-                               ['About App','Run on Image','Run On Video'])
+                               ['About App','Run on Image','Run On Video','Show Code'])
 
-# st.sidebar.markdown('---')
-# st.sidebar.button('Code')
-    # st.sibutton('Code')
-# if st.sidebar.button('Code'):
-#     webbrowser.open_new_tab(url)
+# ----------------------------------------------------------------------
 
 if app_mode== 'About App':
     st.markdown('App Made using **Mediapipe** & **Open CV**')
@@ -139,14 +124,26 @@ if app_mode== 'About App':
     st.image('wsad.jpg',width=200)
     original_title = '<pre style="font-family:Aku & Kamu; color:#FD0101 ; font-size: 28px;font-weight:Bold">*NOTE</pre>'
     st.markdown(original_title, unsafe_allow_html=True)
-    original_title= '''<pre style="font-family:Aku & Kamu; color:#270F40; font-size: 24px;">
+    original_title= '''<pre style="font-family:Aku & Kamu; color:#FD0160 ; font-size: 24px;">
     Video Option will Experience Lag in  Browsers.
     If It's <strong>Lagging</strong> just <strong>Reload</strong> & Choose your option <strong>ASAP</strong> 
     eg: <strong>Choosing Max Hands</strong> or <strong>Using Webcam.</strong> 
-    Webcam Will Take about <strong>20 Seconds</strong> to Load</pre>'''
+    Webcam Will Take about <strong>20 Seconds</strong> to Load
+    
+    Update :
+    1) I Discovered that you can't use Webcam Online,
+    Because then it will try Access Server's Which i don't Own.
+    
+    2) Hand Marks are not showing online + Video freezes
+    
+    <strong>Solution :</strong>
+    Go to main Streamlit WebApp Code & Run it Locally by typing
+    <strong>streamlit run st2.py</strong>
+    </pre>'''
     # st.markdown('''Video Option will Experience **Lag** in **Browsers**. If It's **Lagging** just **Reload** & Choose your option ASAP eg: **Choosing Max Hands** or **Using Webcam**. Webcam Will Take about **20 Seconds** to Load ''')
     st.markdown(original_title, unsafe_allow_html=True)
     
+# ----------------------------------------------------------------------
     
 elif app_mode == 'Run on Image':
     drawing_spec = mp_drawing.DrawingSpec(thickness=2, circle_radius=1)
@@ -180,13 +177,10 @@ elif app_mode == 'Run on Image':
         file_bytes = np.asarray(bytearray(img_file_buffer.read()), dtype=np.uint8)
         opencv_image = cv2.imdecode(file_bytes, 1)
         image = opencv_image.copy()
-        # image = np.array(Image.open(img_file_buffer))
+        
     else:
         demo_image= DEMO_IMAGE
-        # file_bytes = np.asarray(bytearray(demo_image.read()), dtype=np.uint8)
-        # opencv_image = cv2.imdecode(file_bytes, 1)
-        # image = opencv_image.copy()
-        # image= np.array(Image.open(demo_image))
+        
         image = 'demo.jpg'
         cap = cv2.imread('demo.jpg', cv2.IMREAD_UNCHANGED)
         image = cap.copy()
@@ -195,10 +189,8 @@ elif app_mode == 'Run on Image':
     st.sidebar.subheader('Input Image')
     image = cv2.cvtColor(image,cv2.COLOR_BGR2RGB)
     st.sidebar.image(image) 
-    # st.sidebar.markdown('---')
-    # st.sidebar.text('Demo Image')
     st.sidebar.subheader('Demo Images')
-    # st.sidebar.image('WIN_20211106_14_34_25_Pro.jpg')
+    
     st.sidebar.image('dddemo.jpg')  
     st.sidebar.image('Screenshot 2022-01-09 161732.png')
     st.sidebar.image('woman-showing-four-fingers-white-background-woman-showing-four-fingers-white-background-closeup-hand-134504006.jpg')
@@ -207,30 +199,17 @@ elif app_mode == 'Run on Image':
     hand_count =0
     image = cv2.cvtColor(image,cv2.COLOR_RGB2BGR)
     cap = cv2.imread('demo.jpg', cv2.IMREAD_UNCHANGED)
-    # xxx= image
-    # xxx= f'{image}'
-    # IMAGE_FILE.append(xxx)
-    # plt.imshow(image_batch[i].numpy().astype("uint8"))
-    # IMAGE_FILE.append(image)
-    # image = cv2.imread(opencv_image, cv2.IMREAD_UNCHANGED)
-# IMAGE_FILES.append(image)
+   
     with mp_hands.Hands(
     static_image_mode=True,
     max_num_hands=max_hands,
     min_detection_confidence=detection_confidence) as hands:
         
         hand_count+=1
-#   for idx, file in enumerate(IMAGE_FILES):
-    # Read an image, flip it around y-axis for correct handedness output (see
-    # above).
-    # image = cv2.flip(cv2.imread(file), 1)
-    # Convert the BGR image to RGB before processing.
+  
         results = hands.process(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
 
-    # Print handedness and draw hand landmarks on the image.
-        # int('Handedness:', results.multi_handedness)
-        # if not results.multi_hand_landmarks:
-        #   continue
+    
         try:
             
             age_height, image_width, _ = image.shape
@@ -238,12 +217,7 @@ elif app_mode == 'Run on Image':
             lmList=[]
             lmList2forModel=[]
             for hand_landmarks in results.multi_hand_landmarks:
-            #   print('hand_landmarks:', hand_landmarks)
-            #   print(
-            #       f'Index finger tip coordinates: (',
-            #       f'{hand_landmarks.landmark[mp_hands.HandLandmark.INDEX_FINGER_TIP].x * image_width}, '
-            #       f'{hand_landmarks.landmark[mp_hands.HandLandmark.INDEX_FINGER_TIP].y * image_height})'
-            #   )
+            
                 myHands=results.multi_hand_landmarks[0]
 
                 for id,lm in enumerate(myHands.landmark):
@@ -271,10 +245,7 @@ elif app_mode == 'Run on Image':
                 total= fingers.count(1)
                     
                 if total==5:
-                    # st.text('Acclerate')
-                    # st.subheader("Acclerate")
-                    # mmm=st.markdown("Acclerate")
-                    # st.markdown('---')
+                    
                     original_title = '<p style="font-family:Arial Black; color:#FD0177; font-size: 30px;">Acclerate</p>'
                     st.markdown(original_title, unsafe_allow_html=True)
                     # st.markdown('---')
@@ -329,36 +300,29 @@ elif app_mode == 'Run on Image':
                 mp_hands.HAND_CONNECTIONS,
                 mp_draw.DrawingSpec(color=(0,0,255), thickness=2, circle_radius=2),
         mp_draw.DrawingSpec(color=(0,255,0), thickness=2, circle_radius=2))
-            # annotated_image= cv2.cvtColor(annotated_image,cv2.COLOR_BGR2RGB)    
             kpi1_text.write(f"<h1 style='text-align: center; color:red; '>{hand_count}</h1>", unsafe_allow_html=True)
-        # st.subheader('Output Image')
-        # st.image(annotated_image, use_column_width=True)
         except TypeError:
-            # st.text('Sorry No Hand Found!!')
             original_title = '<p style="font-family:Arial Black; color:Red; font-size: 30px;">Sorry, No Hand Found!!</p>'
             st.markdown(original_title, unsafe_allow_html=True)
 
             kpi1_text.write(f"<h1 style='text-align: center; color:red; '>{0}</h1>", unsafe_allow_html=True)
 
-        #     annotated_image= cv2.cvtColor(annotated_image,cv2.COLOR_BGR2RGB)    
-        #     kpi1_text.write(f"<h1 style='text-align: center; color:red; '>{hand_count}</h1>", unsafe_allow_html=True)
+      
         st.subheader('Output Image')
         annotated_image = cv2.cvtColor(annotated_image,cv2.COLOR_BGR2RGB)
         st.image(annotated_image, use_column_width=False)
+
+# ----------------------------------------------------------------------
            
 elif app_mode == 'Run On Video':
     
     st.set_option('deprecation.showfileUploaderEncoding',False)
-    # st.text('This is some text.')
-    # st.text('This is somext.')
     use_webcam = st.sidebar.button('Use Webcam')
     record= st.sidebar.checkbox("Record Video")
     
     if record:
         st.checkbox("Recording",value=True)
     
-    # drawing_spec = mp_drawing.DrawingSpec(thickness=2, circle_radius=1)
-    # st.sidebar.markdown ('---------' )
     
     st.markdown(
         """
@@ -372,22 +336,18 @@ elif app_mode == 'Run On Video':
     </style>
         """,unsafe_allow_html=True,)
 
-    # st.markdown("**Detected Hands**")
-    # kpi1_text = st.markdown("0")
     
     max_hands= st.sidebar.number_input('Maximum Number of Hand',value=1,min_value=1,max_value=4)
-    # st.sidebar('---')
     detection_confidence= st.sidebar.slider('Detection Confidence',min_value=0.0,max_value=1.0,value=0.5)
     tracking_confidence= st.sidebar.slider('Tracking Confidence Confidence',min_value=0.0,max_value=1.0,value=0.5)
     st.sidebar.markdown('---')
     
-    # st.markdown("Output")
     st.subheader("Input Video")    
     
     stframe = st.empty()
     video_file_buffer = st.sidebar.file_uploader("Upload a Video", type=['mp4', 'mov', 'avi', 'asf', 'm4v'])
     tffile = tempfile.NamedTemporaryFile(delete=False)
-    ##We get our input video here
+    #We get our input video here
     if not video_file_buffer:
         if use_webcam:
             vid = cv2.VideoCapture(0)
@@ -400,37 +360,33 @@ elif app_mode == 'Run On Video':
     width = int(vid.get(cv2.CAP_PROP_FRAME_WIDTH))
     height = int(vid.get(cv2.CAP_PROP_FRAME_HEIGHT))
     fps_input = int(vid.get(cv2.CAP_PROP_FPS))
+    
     #Recording Part
     codec = cv2.VideoWriter_fourcc('V', 'P', '0','9')
     out= cv2.VideoWriter('output.mp4',codec,fps_input,(width,height))
     
     st.sidebar.text('Input Video')
     st.sidebar.video(tffile.name)
-    # st.markdown('Reload , if webpage hangs') 
      
     fps = 0
     i = 0
     drawing_spec = mp_drawing.DrawingSpec(thickness=2, circle_radius=1)
     kpi1, kpi2, kpi3 = st.columns(3)
     with kpi1:
-        # st.markdown("**Frame Rate**")
         original_title = '<p style="text-align: center; font-size: 20px;"><strong>Frame Rate</strong></p>'
         st.markdown(original_title, unsafe_allow_html=True)
         kpi1_text = st.markdown ("0")
     with kpi2:
-        # st.markdown("**Detected Hands**")
         original_title = '<p style="text-align: center; font-size: 20px;"><strong>Detected Hands</strong></p>'
         st.markdown(original_title, unsafe_allow_html=True)
         kpi2_text = st.markdown ("0")
     with kpi3:
-        # st.markdown("**Width**")
         original_title = '<p style="text-align: center; font-size: 20px;"><strong>Video Width</strong></p>'
         st.markdown(original_title, unsafe_allow_html=True)
         kpi3_text = st.markdown("0")
     st.markdown ("<hr/>", unsafe_allow_html=True)
     st.subheader('Reload , if webpage hangs')
     drawing_spec = mp_drawing.DrawingSpec(thickness=1, circle_radius=1)
-    # st.subheader("Input Video")
         
     with mp_hand.Hands(max_num_hands=max_hands,min_detection_confidence=detection_confidence,
                        min_tracking_confidence=tracking_confidence) as hands:
@@ -440,8 +396,6 @@ elif app_mode == 'Run On Video':
             
             i +=1
             ret, image = vid.read()
-            # image.set(3, 640)
-            # image.set(4, 480)
             if not ret:
                 continue
         
@@ -456,10 +410,6 @@ elif app_mode == 'Run On Video':
             hand_count=0
             if results.multi_hand_landmarks:
                 
-                # original_title = 'Acclerate'
-                
-
-            # Face Landmark Drawing
                 for hand_landmark in results.multi_hand_landmarks:
                     hand_count += 1
                     myHands=results.multi_hand_landmarks[0]
@@ -485,12 +435,7 @@ elif app_mode == 'Run On Video':
                             fingers.append(0)
 
                     total= fingers.count(1)
-                    # print('**********')
-                    # print(total)
                     if total==5:
-                        # print('brake') 
-                        # st.text('Acclerate')
-                        # original_title= 'Acc'
                         sh= "Acclerate"
                         draw(sh)
                     if total==2 or total==3:
@@ -502,13 +447,11 @@ elif app_mode == 'Run On Video':
                     if total==0:
                         sh= "Brake"
                         draw(sh)
-                        # time.sleep(1) 
-                        # original_title = '<p style="font-family:Arial Black; color:Blue; font-size: 30px;">{original_title}</p>'
-                        # st.markdown(original_title, unsafe_allow_html=True) 
                     
                     mp_draw.draw_landmarks(image,hand_landmark,mp_hand.HAND_CONNECTIONS,
             mp_draw.DrawingSpec(color=(0,0,255), thickness=2, circle_radius=2),
             mp_draw.DrawingSpec(color=(0,255,0), thickness=2, circle_radius=2))
+                    
                 #FPS Counter Logic
             currTime = time.time()
             fps = 1/ (currTime - prevTime)
@@ -526,19 +469,130 @@ elif app_mode == 'Run On Video':
             image = cv2.resize(image, (0,0), fx = 0.8, fy =0.8)
             image = image_resize(image = image, width = 320,height=360)
             stframe.image(image, channels = 'BGR', use_column_width=False)
-            # else:
-            #     output_video = open('output1.mp4','rb')
-            #     out_bytes= output_video.read()
-            #     st.video(out_bytes)
     st.subheader('Output Image')
     st.text('Video Processed')
     output_video = open('output1.mp4','rb')
     out_bytes= output_video.read()
     st.video(out_bytes)
-    # st.markdown('Reload , if webpage hangs')
         
     vid.release()
     out.release()
+ 
+# ---------------------------------------------------------------------- 
+    
+elif app_mode == 'Show Code':
+    agree = st.checkbox('Show Only Game Code')
+
+    if agree:
+        st.subheader('Game Code') 
+        uuu12='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=import%2520cv2%250Aimport%2520mediapipe%2520as%2520mp%250Aimport%2520time%250Aimport%2520pyautogui%250Aimport%2520%2520pydirectinput%250Amp_draw%253D%2520mp.solutions.drawing_utils%250Amp_hand%253D%2520mp.solutions.hands%250Aimport%2520numpy%2520as%2520np%250A%250A%2523----------------------------------------------------------%250Avideo%253D%2520cv2.VideoCapture%280%29%250ApreviousTime%2520%253D%25200%250AcurrentTime%2520%253D%25200%250AtipIds%253D%2520%255B4%252C8%252C12%252C16%252C20%255D%250AclassNames%253D%2520%255B%27okay%27%252C%2520%27peace%27%252C%2520%27thumbs%2520up%27%252C%2520%27thumbs%2520down%27%252C%2520%27call%2520me%27%252C%2520%27stop%27%252C%2520%27rock%27%252C%2520%27live%2520long%27%252C%2520%27fist%27%252C%2520%27smile%27%255D%250Afrom%2520directkeys%2520import%2520ReleaseKey%252CPressKey%252C%2520W%252C%2520A%252C%2520S%252C%2520D%250A%250Awith%2520mp_hand.Hands%28max_num_hands%253D1%252Cmin_detection_confidence%253D0.5%252Cmin_tracking_confidence%253D0.5%29%2520as%2520hands%253A%250A%250A%2520%2520%2520%2520while%2520True%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520ret%252C%2520image%253D%2520video.read%28%29%250A%2520%2520%2520%2520%2520%2520%2520%2520image%253D%2520cv2.cvtColor%28image%252Ccv2.COLOR_BGR2RGB%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520image.flags.writeable%253DFalse%2520%2523To%2520improve%2520performance%252C%2520optionally%2520mark%2520the%2520image%2520as%2520not%2520writeable%2520to%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520pass%2520by%2520reference%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520results%253D%2520hands.process%28image%29%250A%2520%2520%2520%2520%2520%2520%2520%2520image.flags.writeable%253DTrue%250A%2520%2520%2520%2520%2520%2520%2520%2520image%253D%2520cv2.cvtColor%28image%252Ccv2.COLOR_RGB2BGR%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520Calculating%2520the%2520FPS%250A%2520%2520%2520%2520%2520%2520%2520%2520currentTime%2520%253D%2520time.time%28%29%250A%2520%2520%2520%2520%2520%2520%2520%2520fps%2520%253D%25201%2520%252F%2520%28currentTime-previousTime%29%250A%2520%2520%2520%2520%2520%2520%2520%2520previousTime%2520%253D%2520currentTime%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520lmList%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520lmList2forModel%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520Displaying%2520FPS%2520on%2520the%2520image%250A%2520%2520%2520%2520%2520%2520%2520%2520cv2.putText%28image%252C%2520str%28int%28fps%29%29%252B%2522%2520FPS%2522%252C%2520%2810%252C%252070%29%252C%2520cv2.FONT_HERSHEY_COMPLEX%252C%25201%252C%2520%280%252C255%252C0%29%252C%25202%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520if%2520results.multi_hand_landmarks%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520hand_landmark%2520in%2520results.multi_hand_landmarks%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520myHands%253Dresults.multi_hand_landmarks%255B0%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520id%252Clm%2520in%2520enumerate%28myHands.landmark%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520h%252Cw%252Cc%253Dimage.shape%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520cx%252Ccy%253Dint%28lm.x*w%29%252C%2520int%28lm.y*h%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList.append%28%255Bid%252Ccx%252Ccy%255D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList2forModel.append%28%255Bcx%252Ccy%255D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.draw_landmarks%28image%252Chand_landmark%252Cmp_hand.HAND_CONNECTIONS%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C0%252C255%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C0%252C255%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C255%252C0%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
+  style="width: 1024px; height: 473px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu13='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=%2523---------------------------------------------------------------------------------------------%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520len%28lmList%29%21%253D0%253A%2520%2523%2520No%2520Hand%2520in%2520BackGround%250A%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520lmList%255BtipIds%255B0%255D%255D%255B1%255D%2520%253E%2520lmList%255BtipIds%255B0%255D-1%255D%255B1%255D%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%280%29%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520id%2520in%2520range%281%252C5%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520lmList%255BtipIds%255Bid%255D%255D%255B2%255D%2520%253C%2520lmList%255BtipIds%255Bid%255D-1%255D%255B2%255D%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%280%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520total%253D%2520fingers.count%281%29%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D0%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520print%28%2522Brake%2522%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28W%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28A%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28S%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520PressKey%28S%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520time.sleep%282%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28S%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520elif%2520total%253D%253D5%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520print%28%2522GAS%2522%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28S%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28A%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28S%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520PressKey%28W%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520time.sleep%282%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28W%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520pydirectinput.keyUp%28%27s%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520pydirectinput.keyDown%28%27w%27%29%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520elif%2520total%253D%253D4%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520print%28%2522Right%2522%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28W%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520PressKey%28D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520time.sleep%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520elif%2520total%253D%253D2%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520print%28%2522LEFT%2522%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520PressKey%28A%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520time.sleep%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ReleaseKey%28A%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520cv2.imshow%28%2522Frame%2522%252Cimage%29%250A%2520%2520%2520%2520%2520%2520%2520%2520k%253D%2520cv2.waitKey%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520if%2520k%253D%253Dord%28%27q%27%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520break%250Avideo.release%28%29%250Acv2.destroyAllWindows%28%29%250A%2520"
+  style="width: 1024px; height: 473px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        st.components.v1.html(uuu12,height=470,scrolling=True)
+        st.components.v1.html(uuu13,height=470,scrolling=True)
+        
+        
+        # code = '''def hello():
+        # print("Helliiiiiiiio, Streamlit!")'''
+        # st.code(code, language='python')
+        
+    else:
+        st.subheader('Streamlit Code')
+        # 11898
+        uuu= '''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17.5px&lh=133%25&si=false&es=2x&wm=false&code=from%2520bokeh.themes%2520import%2520theme%250Afrom%2520numpy.core.records%2520import%2520record%250Aimport%2520pandas%2520as%2520pd%250Aimport%2520numpy%2520as%2520np%250Aimport%2520cv2%250Aimport%2520mediapipe%2520as%2520mp%250Aimport%2520time%250Afrom%2520PIL%2520import%2520Image%250Aimport%2520tempfile%250Afrom%2520bokeh.models.widgets%2520import%2520Div%250Aimport%2520streamlit%2520as%2520st%250A%2523%2520---------------------------------------------------------------------%250Ast.set_page_config%28%250A%2520%2520%2520%2520page_title%253D%2522Game%2520Keys%2522%252C%250A%2520%2520%2520%2520page_icon%253D%2522%25F0%259F%258E%25AE%2522%252C%250A%2520%2520%2520%2520layout%253D%2522wide%2522%252C%250A%2520%2520%2520%2520initial_sidebar_state%253D%2522expanded%2522%250A%29%250A%250A%2523%2520---------------------------------------------------------------------%250A%250ADEMO_IMAGE%2520%253D%2520%27demo.jpg%27%250ADEMO_VIDEO%2520%253D%2520%27test3.mp4%27%250AprevTime%253D0%250AcurrTime%253D0%2520%250AtipIds%253D%2520%255B4%252C8%252C12%252C16%252C20%255D%250Ast.title%28%27Game%2520Keys%2520with%2520Hand%2520Tracking%2520Web-App%27%29%250Aurl%2520%253D%2520%27https%253A%252F%252Fgithub.com%252Fshashankanand13monu%252FGame-Automation%27%250A%250A%2523%2520----------------------------------------------------------------------%250A%250Amp_drawing%2520%253D%2520mp.solutions.drawing_utils%250Amp_draw%253D%2520mp.solutions.drawing_utils%250Amp_face_mesh%2520%253D%2520mp.solutions.face_mesh%250Amp_draw%253D%2520mp.solutions.drawing_utils%250Amp_hand%253D%2520mp.solutions.hands%250Amp_hands%2520%253D%2520mp.solutions.hands%250Amp_drawing_styles%2520%253D%2520mp.solutions.drawing_styles%250A%250A%2523%2520----------------------------------------------------------------------%250A%250At%2520%253D%2520st.empty%28%29%250Adef%2520draw%28str%29%253A%250A%2520%2520%2520%2520t.markdown%28f%27%253Cp%2520style%253D%2522font-family%253AArial%2520Black%253Bcolor%253A%2523FF0686%253Bfont-size%253A28px%253B%253B%2522%253E%257Bstr%257D%253C%252Fp%253E%27%252C%2520unsafe_allow_html%253DTrue%29%250A%250A%2523%2520----------------------------------------------------------------------%250A%250Ast.markdown%28%250A%2520%2520%2520%2520%2522%2522%2522%250A%2520%2520%2520%2520%253Cstyle%253E%250A%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522true%2522%255D%2520%253E%2520div%253Afirst-child%257B%250Awidth%253A%2520350px%250A%257D%250A%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522false%2522%255D%2520%253E%2520div%253Afirst-child%257B%250Awidth%253A%2520350px%250Amargin-left%253A%2520-350px%250A%253C%252Fstyle%253E%250A%2520%2520%2520%2520%2522%2522%2522%252Cunsafe_allow_html%253DTrue%252C%29%250A%2523%2520----------------------------------------------------------------------%250Aif%2520st.sidebar.button%28%27Github%27%29%253A%250A%2520%2520%2520%2520js%2520%253D%2520%2522window.open%28%27https%253A%252F%252Fgithub.com%252Fshashankanand13monu%252FGame-Automation%27%29%2522%2520%2520%2523%2520New%2520tab%2520or%2520window%250A%2520%2520%2520%2520%2523%2520js%2520%253D%2520%2522window.location.href%2520%253D%2520%27https%253A%252F%252Fwww.streamlit.io%252F%27%2522%2520%2520%2523%2520Current%2520tab%250A%2520%2520%2520%2520html%2520%253D%2520%27%253Cimg%2520src%2520onerror%253D%2522%257B%257D%2522%253E%27.format%28js%29%250A%2520%2520%2520%2520div%2520%253D%2520Div%28text%253Dhtml%29%250A%2520%2520%2520%2520st.bokeh_chart%28div%29"
+  style="width: 1024px; height: 1500px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu2= '''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17.5px&lh=133%25&si=false&es=2x&wm=false&code=st.sidebar.title%28%27Menu%27%29%250Ast.sidebar.subheader%28%27Settings%27%29%250A%250A%2523%2520----------------------------------------------------------------------%250A%2540st.cache%2520%28%29%250A%2523%2520----------------------------------------------------------------------%250A%250Adef%2520image_resize%28image%252C%2520width%253DNone%252C%2520height%253DNone%252C%2520inter%2520%253Dcv2.INTER_AREA%29%253A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520dim%2520%253D%2520None%250A%2520%2520%2520%2520%28h%2520%252Cw%29%2520%253D%2520image.shape%255B%253A2%255D%250A%2520%2520%2520%2520if%2520width%2520is%2520None%2520and%2520height%2520is%2520None%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520return%2520image%250A%2520%2520%2520%2520if%2520width%2520is%2520None%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520r%253D%2520width%252Ffloat%28w%29%250A%2520%2520%2520%2520%2520%2520%2520%2520dim%2520%253D%2520%28int%28w*r%29%252C%2520height%29%250A%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520r%2520%253D%2520width%252Ffloat%28w%29%250A%2520%2520%2520%2520%2520%2520%2520%2520dim%2520%253D%2520%28width%252C%2520int%28h*r%29%29%250A%2520%2520%2520%2520%2523resize%2520the%2520image%250A%2520%2520%2520%2520resized%2520%253Dcv2.resize%28image%252C%2520dim%2520%252Cinterpolation%253Dinter%29%250A%2520%2520%2520%2520return%2520resized%250A%2523%2520----------------------------------------------------------------------%250A%250Aapp_mode%253D%2520st.sidebar.selectbox%28%27Choose%2520the%2520App%2520Mode%27%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%255B%27About%2520App%27%252C%27Run%2520on%2520Image%27%252C%27Run%2520On%2520Video%27%252C%27Show%2520Code%27%255D%29%250A%250A%2523%2520----------------------------------------------------------------------%250A%250Aif%2520app_mode%253D%253D%2520%27About%2520App%27%253A%250A%2520%2520%2520%2520st.markdown%28%27App%2520Made%2520using%2520**Mediapipe**%2520%2526%2520**Open%2520CV**%27%29%250A%250A%2520%2520%2520%2520st.markdown%28%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cstyle%253E%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522true%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520%257D%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522false%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520margin-left%253A%2520-350px%250A%2520%2520%2520%2520%253C%252Fstyle%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%252Cunsafe_allow_html%253DTrue%252C%29%250A%250A%2520%2520%2520%2520st.markdown%28%27%27%27%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520Tutorial%2520%255Cn%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%27%27%27%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%29%250A%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cpre%2520style%253D%2522font-family%253AAku%2520%2526%2520Kamu%253B%2520color%253A%2523FD0177%253B%2520font-size%253A%252025px%253Bfont-weight%253ABold%2522%253E%25F0%259F%2595%25B9%25EF%25B8%258F%2520W-%25205%2520Fingers%2520%2520%25F0%259F%2595%25B9%25EF%25B8%258F%2520A-%25202%2520or%25203%2520Fingers%253C%252Fpre%253E%27%250A%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cpre%2520style%253D%2522font-family%253AAku%2520%2526%2520Kamu%253B%2520color%253A%2523FD0177%253B%2520font-size%253A%252025px%253Bfont-weight%253ABold%253B%2522%253E%25F0%259F%2595%25B9%25EF%25B8%258F%2520S-%2520Fist%2520%2520%2520%2520%2520%2520%2520%25F0%259F%2595%25B9%25EF%25B8%258F%2520D-%25204%2520Fingers%253C%252Fpre%253E%27%250A%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2523%2520st.subheader%28%27%27%27W%2520-%25205%2520Fingers%27%27%27%29%250A%2520%2520%2520%2520%2523%2520st.subheader%28%27S%2520-%2520Fist%255Cn%2520A%2520-%25202%2520or%25203%2520Fingers%255Cn%2520D%2520-%25204%2520Fingers%27%29%250A%2520%2520%2520%2520st.image%28%27wsad.jpg%27%252Cwidth%253D200%29%250A%2520"
+  style="width: 1024px; height: 1500px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu3='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17.5px&lh=133%25&si=false&es=2x&wm=false&code=%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cpre%2520style%253D%2522font-family%253AAku%2520%2526%2520Kamu%253B%2520color%253A%2523FD0101%2520%253B%2520font-size%253A%252028px%253Bfont-weight%253ABold%2522%253E*NOTE%253C%252Fpre%253E%27%250A%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520original_title%253D%2520%27%27%27%253Cpre%2520style%253D%2522font-family%253AAku%2520%2526%2520Kamu%253B%2520color%253A%2523270F40%253B%2520font-size%253A%252024px%253B%2522%253E%250A%2520%2520%2520%2520Video%2520Option%2520will%2520Experience%2520Lag%2520in%2520%2520Browsers.%250A%2520%2520%2520%2520If%2520It%27s%2520%253Cstrong%253ELagging%253C%252Fstrong%253E%2520just%2520%253Cstrong%253EReload%253C%252Fstrong%253E%2520%2526%2520Choose%2520your%2520option%2520%253Cstrong%253EASAP%253C%252Fstrong%253E%2520%250A%2520%2520%2520%2520eg%253A%2520%253Cstrong%253EChoosing%2520Max%2520Hands%253C%252Fstrong%253E%2520or%2520%253Cstrong%253EUsing%2520Webcam.%253C%252Fstrong%253E%2520%250A%2520%2520%2520%2520Webcam%2520Will%2520Take%2520about%2520%253Cstrong%253E20%2520Seconds%253C%252Fstrong%253E%2520to%2520Load%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520Update%2520%253A%250A%2520%2520%2520%25201%29%2520I%2520Discovered%2520that%2520you%2520can%27t%2520use%2520Webcam%2520Online%252C%250A%2520%2520%2520%2520Because%2520then%2520it%2520will%2520try%2520Access%2520Server%27s%2520Which%2520i%2520don%27t%2520Own.%250A%2520%2520%2520%2520%250A%2520%2520%2520%25202%29%2520Hand%2520Marks%2520are%2520not%2520showing%2520online%2520%252B%2520Video%2520freezes%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%253Cstrong%253ESolution%2520%253A%253C%252Fstrong%253E%250A%2520%2520%2520%2520Go%2520to%2520main%2520Streamlit%2520WebApp%2520Code%2520%2526%2520Run%2520it%2520Locally%2520by%2520typing%250A%2520%2520%2520%2520%253Cstrong%253Estreamlit%2520run%2520st2.py%253C%252Fstrong%253E%250A%2520%2520%2520%2520%253C%252Fpre%253E%27%27%27%250A%2520%2520%2520%2520%2523%2520st.markdown%28%27%27%27Video%2520Option%2520will%2520Experience%2520**Lag**%2520in%2520**Browsers**.%2520If%2520It%27s%2520**Lagging**%2520just%2520**Reload**%2520%2526%2520Choose%2520your%2520option%2520ASAP%2520eg%253A%2520**Choosing%2520Max%2520Hands**%2520or%2520**Using%2520Webcam**.%2520Webcam%2520Will%2520Take%2520about%2520**20%2520Seconds**%2520to%2520Load%2520%27%27%27%29%250A%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%250A%2523%2520----------------------------------------------------------------------%250A%2520%2520%2520%2520%250Aelif%2520app_mode%2520%253D%253D%2520%27Run%2520on%2520Image%27%253A%250A%2520%2520%2520%2520drawing_spec%2520%253D%2520mp_drawing.DrawingSpec%28thickness%253D2%252C%2520circle_radius%253D1%29%250A%2520%2520%2520%2520st.sidebar.markdown%2520%28%27---------%27%2520%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.markdown%28%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cstyle%253E%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522true%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520%257D%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522false%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520margin-left%253A%2520-350px%250A%2520%2520%2520%2520%253C%252Fstyle%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%252Cunsafe_allow_html%253DTrue%252C%29%250A%250A%2520%2520%2520%2520%2523%2520st.markdown%28%2522**Detected%2520Hands**%2522%29%250A%2520%2520%2520%2520st.header%28%2522**%2520%2520%2520Detected%2520Hands%2520%2520%2520**%2522%29%250A%2520%2520%2520%2520kpi1_text%2520%253D%2520st.markdown%28%25220%2522%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520max_hands%253D%2520st.sidebar.number_input%28%27Maximum%2520Number%2520of%2520Hands%27%252Cvalue%253D2%252Cmin_value%253D1%252Cmax_value%253D4%29%250A%2520%2520%2520%2520%2523%2520st.sidebar%28%27---%27%29%250A%2520%2520%2520"
+  style="width: 1024px; height: 1500px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu4='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17.5px&lh=133%25&si=false&es=2x&wm=false&code=%2509detection_confidence%253D%2520st.sidebar.slider%28%27Detection%2520Confidence%27%252Cmin_value%253D0.0%252Cmax_value%253D1.0%252Cvalue%253D0.5%29%250A%2520%2520%2520%2520st.sidebar.markdown%28%27---%27%29%250A%2520%2520%2520%2520IMAGE_FILE%253D%255B%255D%250A%2520%2520%2520%2520count%253D0%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520img_file_buffer%2520%253D%2520st.sidebar.file_uploader%28%2522Upload%2520an%2520Image%2522%252C%2520type%253D%255B%2522jpg%2522%252C%2522jpeg%2522%252C%2520%2522png%2522%255D%29%250A%2520%2520%2520%2520if%2520img_file_buffer%2520is%2520not%2520None%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520file_bytes%2520%253D%2520np.asarray%28bytearray%28img_file_buffer.read%28%29%29%252C%2520dtype%253Dnp.uint8%29%250A%2520%2520%2520%2520%2520%2520%2520%2520opencv_image%2520%253D%2520cv2.imdecode%28file_bytes%252C%25201%29%250A%2520%2520%2520%2520%2520%2520%2520%2520image%2520%253D%2520opencv_image.copy%28%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520demo_image%253D%2520DEMO_IMAGE%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520image%2520%253D%2520%27demo.jpg%27%250A%2520%2520%2520%2520%2520%2520%2520%2520cap%2520%253D%2520cv2.imread%28%27demo.jpg%27%252C%2520cv2.IMREAD_UNCHANGED%29%250A%2520%2520%2520%2520%2520%2520%2520%2520image%2520%253D%2520cap.copy%28%29%250A%250A%2520%2520%2520%2520%2523%2520st.sidebar.text%28%27Input%2520Image%27%29%250A%2520%2520%2520%2520st.sidebar.subheader%28%27Input%2520Image%27%29%250A%2520%2520%2520%2520image%2520%253D%2520cv2.cvtColor%28image%252Ccv2.COLOR_BGR2RGB%29%250A%2520%2520%2520%2520st.sidebar.image%28image%29%2520%250A%2520%2520%2520%2520st.sidebar.subheader%28%27Demo%2520Images%27%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.sidebar.image%28%27dddemo.jpg%27%29%2520%2520%250A%2520%2520%2520%2520st.sidebar.image%28%27Screenshot%25202022-01-09%2520161732.png%27%29%250A%2520%2520%2520%2520st.sidebar.image%28%27woman-showing-four-fingers-white-background-woman-showing-four-fingers-white-background-closeup-hand-134504006.jpg%27%29%250A%250A%2520%2520%2520%2520st.sidebar.image%28%27demo.jpg%27%29%250A%2520%2520%2520%2520hand_count%2520%253D0%250A%2520%2520%2520%2520image%2520%253D%2520cv2.cvtColor%28image%252Ccv2.COLOR_RGB2BGR%29%250A%2520%2520%2520%2520cap%2520%253D%2520cv2.imread%28%27demo.jpg%27%252C%2520cv2.IMREAD_UNCHANGED%29%250A%2520%2520%2520%250A%2520%2520%2520%2520with%2520mp_hands.Hands%28%250A%2520%2520%2520%2520static_image_mode%253DTrue%252C%250A%2520%2520%2520%2520max_num_hands%253Dmax_hands%252C%250A%2520%2520%2520%2520min_detection_confidence%253Ddetection_confidence%29%2520as%2520hands%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520hand_count%252B%253D1%250A%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520results%2520%253D%2520hands.process%28cv2.cvtColor%28image%252C%2520cv2.COLOR_BGR2RGB%29%29%250A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520try%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520age_height%252C%2520image_width%252C%2520_%2520%253D%2520image.shape%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%2520%253D%2520image.copy%28%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList2forModel%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520hand_landmarks%2520in%2520results.multi_hand_landmarks%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520myHands%253Dresults.multi_hand_landmarks%255B0%255D%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520id%252Clm%2520in%2520enumerate%28myHands.landmark%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520h%252Cw%252Cc%253Dimage.shape%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520cx%252Ccy%253Dint%28lm.x*w%29%252C%2520int%28lm.y*h%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList.append%28%255Bid%252Ccx%252Ccy%255D%29"
+  style="width: 1024px; height: 1470px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu5='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17.5px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%2509%2509%2509lmList2forModel.append%28%255Bcx%252Ccy%255D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520lmList%255BtipIds%255B0%255D%255D%255B1%255D%2520%253C%2520lmList%255BtipIds%255B0%255D-1%255D%255B1%255D%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%280%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520id%2520in%2520range%281%252C5%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520lmList%255BtipIds%255Bid%255D%255D%255B2%255D%2520%253C%2520lmList%255BtipIds%255Bid%255D-1%255D%255B2%255D%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%280%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520total%253D%2520fingers.count%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D5%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522font-family%253AArial%2520Black%253B%2520color%253A%2523FD0177%253B%2520font-size%253A%252030px%253B%2522%253EAcclerate%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520st.markdown%28%27---%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.imread%28%27istockphoto-1179377734-612x612.jpg%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.resize%28overlay%252C%28100%252C100%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_offset%2520%253D%252080%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_offset%2520%253D%252010%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_end%2520%253D%2520x_offset%2520%252B%2520overlay.shape%255B1%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_end%2520%253D%2520y_offset%2520%252B%2520overlay.shape%255B0%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%255By_offset%253Ay_end%252Cx_offset%253Ax_end%255D%2520%253D%2520overlay%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D4%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520st.text%28%27Right%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522font-family%253AArial%2520Black%253B%2520color%253A%2523FD0177%253B%2520font-size%253A%252030px%253B%2522%253ERight%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.imread%28%27istockphoto-1179377734-612x612%2520%284%29.jpg%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.resize%28overlay%252C%28100%252C100%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_offset%2520%253D%2520120%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_offset%2520%253D%252050%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_end%2520%253D%2520x_offset%2520%252B%2520overlay.shape%255B1%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_end%2520%253D%2520y_offset%2520%252B%2520overlay.shape%255B0%255D%250A%2520%2520%2520%2520%2520%2520%2520"
+  style="width: 1024px; height: 4328px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu6='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17.5px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%2509%2509%2509annotated_image%255By_offset%253Ay_end%252Cx_offset%253Ax_end%255D%2520%253D%2520overlay%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D2%2520or%2520total%253D%253D3%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520st.text%28%27Left%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522font-family%253AArial%2520Black%253B%2520color%253A%2523FD0177%253B%2520font-size%253A%252030px%253B%2522%253ELeft%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.imread%28%27istockphoto-1179377734-612x612%2520%281%29.jpg%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.resize%28overlay%252C%28100%252C100%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_offset%2520%253D%252050%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_offset%2520%253D%252050%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_end%2520%253D%2520x_offset%2520%252B%2520overlay.shape%255B1%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_end%2520%253D%2520y_offset%2520%252B%2520overlay.shape%255B0%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%255By_offset%253Ay_end%252Cx_offset%253Ax_end%255D%2520%253D%2520overlay%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D0%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520st.text%28%27Brake%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522font-family%253AArial%2520Black%253B%2520color%253A%2523FD0177%253B%2520font-size%253A%252030px%253B%2522%253EBrake%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.imread%28%27istockphoto-1179377734-612x612%2520%283%29.jpg%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520overlay%2520%253D%2520cv2.resize%28overlay%252C%28100%252C100%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_offset%2520%253D%252050%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_offset%2520%253D%252090%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x_end%2520%253D%2520x_offset%2520%252B%2520overlay.shape%255B1%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y_end%2520%253D%2520y_offset%2520%252B%2520overlay.shape%255B0%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%255By_offset%253Ay_end%252Cx_offset%253Ax_end%255D%2520%253D%2520overlay%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_drawing.draw_landmarks%28%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520hand_landmarks%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_hands.HAND_CONNECTIONS%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C0%252C255%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C255%252C0%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520kpi1_text.write%28f%2522%253Ch1%2520style%253D%27text-align%253A%2520center%253B%2520color%253Ared%253B%2520%27%253E%257Bhand_count%257D%253C%252Fh1%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520except%2520TypeError%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522font-family%253AArial%2520Black%253B%2520color%253ARed%253B%2520font-size%253A%252030px%253B%2522%253ESorry%252C%2520No%2520Hand%2520Found%21%21%253C"
+  style="width: 923px; height: 5304px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu7='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%2509st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520kpi1_text.write%28f%2522%253Ch1%2520style%253D%27text-align%253A%2520center%253B%2520color%253Ared%253B%2520%27%253E%257B0%257D%253C%252Fh1%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520st.subheader%28%27Output%2520Image%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%2520%253D%2520cv2.cvtColor%28annotated_image%252Ccv2.COLOR_BGR2RGB%29%250A%2520%2520%2520%2520%2520%2520%2520%2520st.image%28annotated_image%252C%2520use_column_width%253DFalse%29%250A%250A%2523%2520----------------------------------------------------------------------%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250Aelif%2520app_mode%2520%253D%253D%2520%27Run%2520On%2520Video%27%253A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.set_option%28%27deprecation.showfileUploaderEncoding%27%252CFalse%29%250A%2520%2520%2520%2520use_webcam%2520%253D%2520st.sidebar.button%28%27Use%2520Webcam%27%29%250A%2520%2520%2520%2520record%253D%2520st.sidebar.checkbox%28%2522Record%2520Video%2522%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520if%2520record%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520st.checkbox%28%2522Recording%2522%252Cvalue%253DTrue%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.markdown%28%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cstyle%253E%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522true%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520%257D%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522false%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520margin-left%253A%2520-350px%250A%2520%2520%2520%2520%253C%252Fstyle%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%252Cunsafe_allow_html%253DTrue%252C%29%250A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520max_hands%253D%2520st.sidebar.number_input%28%27Maximum%2520Number%2520of%2520Hand%27%252Cvalue%253D1%252Cmin_value%253D1%252Cmax_value%253D4%29%250A%2520%2520%2520%2520detection_confidence%253D%2520st.sidebar.slider%28%27Detection%2520Confidence%27%252Cmin_value%253D0.0%252Cmax_value%253D1.0%252Cvalue%253D0.5%29%250A%2520%2520%2520%2520tracking_confidence%253D%2520st.sidebar.slider%28%27Tracking%2520Confidence%2520Confidence%27%252Cmin_value%253D0.0%252Cmax_value%253D1.0%252Cvalue%253D0.5%29%250A%2520%2520%2520%2520st.sidebar.markdown%28%27---%27%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.subheader%28%2522Input%2520Video%2522%29%2520%2520%2520%2520%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520stframe%2520%253D%2520st.empty%28%29%250A%2520%2520%2520%2520video_file_buffer%2520%253D%2520st.sidebar.file_uploader%28%2522Upload%2520a%2520Video%2522%252C%2520type%253D%255B%27mp4%27%252C%2520%27mov%27%252C%2520%27avi%27%252C%2520%27asf%27%252C%2520%27m4v%27%255D%29%250A%2520%2520%2520%2520tffile%2520%253D%2520tempfile.NamedTemporaryFile%28delete%253DFalse%29%250A%2520%2520%2520%2520%2523We%2520get%2520our%2520input%2520video%2520here%250A%2520%2520%2520%2520if%2520not%2520video_file_buffer%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520if%2520use_webcam%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520vid%2520%253D%2520cv2.VideoCapture%280%29%250A%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520vid%2520%253D%2520cv2.VideoCapture%28DEMO_VIDEO%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520tffile.name%2520%253D%2520DEMO_VIDEO%250A%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520tffile.write%28video_file_buffer.read%28%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520vid%2520%253D%2520cv2.VideoCapture%28tffile.name%29%250A%2520%2520%2520%2520width%2520%253D%2520int%28vid.get%28cv2.CAP_PROP_FRAME_WIDTH%29%29%250A%2520%2520%2520%2520height%2520%253D%2520int%28vid.get%28cv2.CAP_"
+  style="width: 1024px; height: 4373px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+        
+        uuu8='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%2509st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520kpi1_text.write%28f%2522%253Ch1%2520style%253D%27text-align%253A%2520center%253B%2520color%253Ared%253B%2520%27%253E%257B0%257D%253C%252Fh1%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520st.subheader%28%27Output%2520Image%27%29%250A%2520%2520%2520%2520%2520%2520%2520%2520annotated_image%2520%253D%2520cv2.cvtColor%28annotated_image%252Ccv2.COLOR_BGR2RGB%29%250A%2520%2520%2520%2520%2520%2520%2520%2520st.image%28annotated_image%252C%2520use_column_width%253DFalse%29%250A%250A%2523%2520----------------------------------------------------------------------%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250Aelif%2520app_mode%2520%253D%253D%2520%27Run%2520On%2520Video%27%253A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.set_option%28%27deprecation.showfileUploaderEncoding%27%252CFalse%29%250A%2520%2520%2520%2520use_webcam%2520%253D%2520st.sidebar.button%28%27Use%2520Webcam%27%29%250A%2520%2520%2520%2520record%253D%2520st.sidebar.checkbox%28%2522Record%2520Video%2522%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520if%2520record%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520st.checkbox%28%2522Recording%2522%252Cvalue%253DTrue%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.markdown%28%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cstyle%253E%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522true%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520%257D%250A%2520%2520%2520%2520%255Bdata-testid%253D%2522stSidebar%2522%255D%255Baria-expanded%253D%2522false%2522%255D%2520%253E%2520div%253Afirst-child%257B%250A%2520%2520%2520%2520width%253A%2520350px%250A%2520%2520%2520%2520margin-left%253A%2520-350px%250A%2520%2520%2520%2520%253C%252Fstyle%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2522%2522%2522%252Cunsafe_allow_html%253DTrue%252C%29%250A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520max_hands%253D%2520st.sidebar.number_input%28%27Maximum%2520Number%2520of%2520Hand%27%252Cvalue%253D1%252Cmin_value%253D1%252Cmax_value%253D4%29%250A%2520%2520%2520%2520detection_confidence%253D%2520st.sidebar.slider%28%27Detection%2520Confidence%27%252Cmin_value%253D0.0%252Cmax_value%253D1.0%252Cvalue%253D0.5%29%250A%2520%2520%2520%2520tracking_confidence%253D%2520st.sidebar.slider%28%27Tracking%2520Confidence%2520Confidence%27%252Cmin_value%253D0.0%252Cmax_value%253D1.0%252Cvalue%253D0.5%29%250A%2520%2520%2520%2520st.sidebar.markdown%28%27---%27%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.subheader%28%2522Input%2520Video%2522%29%2520%2520%2520%2520%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520stframe%2520%253D%2520st.empty%28%29%250A%2520%2520%2520%2520video_file_buffer%2520%253D%2520st.sidebar.file_uploader%28%2522Upload%2520a%2520Video%2522%252C%2520type%253D%255B%27mp4%27%252C%2520%27mov%27%252C%2520%27avi%27%252C%2520%27asf%27%252C%2520%27m4v%27%255D%29%250A%2520%2520%2520%2520tffile%2520%253D%2520tempfile.NamedTemporaryFile%28delete%253DFalse%29%250A%2520%2520%2520%2520%2523We%2520get%2520our%2520input%2520video%2520here%250A%2520%2520%2520%2520if%2520not%2520video_file_buffer%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520if%2520use_webcam%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520vid%2520%253D%2520cv2.VideoCapture%280%29%250A%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520vid%2520%253D%2520cv2.VideoCapture%28DEMO_VIDEO%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520tffile.name%2520%253D%2520DEMO_VIDEO%250A%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520tffile.write%28video_file_buffer.read%28%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520vid%2520%253D%2520cv2.VideoCapture%28tffile.name%29%250A%2520%2520%2520%2520width%2520%253D%2520int%28vid.get%28cv2.CAP_PROP_FRAME_WIDTH%29%29%250A%2520%2520%2520%2520height%2520%253D%2520int%28vid.get%28cv2.CAP_PROP_FRAME_HEIGHT%29%29"
+  style="width: 1024px; height: 1400px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu9='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=%250A%2520%2520%2520%2520fps_input%2520%253D%2520int%28vid.get%28cv2.CAP_PROP_FPS%29%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%2523Recording%2520Part%250A%2520%2520%2520%2520codec%2520%253D%2520cv2.VideoWriter_fourcc%28%27V%27%252C%2520%27P%27%252C%2520%270%27%252C%279%27%29%250A%2520%2520%2520%2520out%253D%2520cv2.VideoWriter%28%27output.mp4%27%252Ccodec%252Cfps_input%252C%28width%252Cheight%29%29%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520st.sidebar.text%28%27Input%2520Video%27%29%250A%2520%2520%2520%2520st.sidebar.video%28tffile.name%29%250A%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520fps%2520%253D%25200%250A%2520%2520%2520%2520i%2520%253D%25200%250A%2520%2520%2520%2520drawing_spec%2520%253D%2520mp_drawing.DrawingSpec%28thickness%253D2%252C%2520circle_radius%253D1%29%250A%2520%2520%2520%2520kpi1%252C%2520kpi2%252C%2520kpi3%2520%253D%2520st.columns%283%29%250A%2520%2520%2520%2520with%2520kpi1%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522text-align%253A%2520center%253B%2520font-size%253A%252020px%253B%2522%253E%253Cstrong%253EFrame%2520Rate%253C%252Fstrong%253E%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520kpi1_text%2520%253D%2520st.markdown%2520%28%25220%2522%29%250A%2520%2520%2520%2520with%2520kpi2%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522text-align%253A%2520center%253B%2520font-size%253A%252020px%253B%2522%253E%253Cstrong%253EDetected%2520Hands%253C%252Fstrong%253E%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520kpi2_text%2520%253D%2520st.markdown%2520%28%25220%2522%29%250A%2520%2520%2520%2520with%2520kpi3%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520original_title%2520%253D%2520%27%253Cp%2520style%253D%2522text-align%253A%2520center%253B%2520font-size%253A%252020px%253B%2522%253E%253Cstrong%253EVideo%2520Width%253C%252Fstrong%253E%253C%252Fp%253E%27%250A%2520%2520%2520%2520%2520%2520%2520%2520st.markdown%28original_title%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520kpi3_text%2520%253D%2520st.markdown%28%25220%2522%29%250A%2520%2520%2520%2520st.markdown%2520%28%2522%253Chr%252F%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520st.subheader%28%27Reload%2520%252C%2520if%2520webpage%2520hangs%27%29%250A%2520%2520%2520%2520drawing_spec%2520%253D%2520mp_drawing.DrawingSpec%28thickness%253D1%252C%2520circle_radius%253D1%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520with%2520mp_hand.Hands%28max_num_hands%253Dmax_hands%252Cmin_detection_confidence%253Ddetection_confidence%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520min_tracking_confidence%253Dtracking_confidence%29%2520as%2520hands%253A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520while%2520vid.isOpened%28%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520i%2520%252B%253D1%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ret%252C%2520image%2520%253D%2520vid.read%28%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520not%2520ret%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520continue%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520image.flags.writeable%253DFalse%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520results%253D%2520hands.process%28image%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520image.flags.writeable%253DTrue%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520image%253D%2520cv2.cvtColor%28image%252Ccv2.COLOR_RGB2BGR%29%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList2forModel%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520hand_count%253D0%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520results.multi_hand_landmarks%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520hand_landmark%2520in%2520results.multi_hand_landmarks%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
+  style="width: 1024px; height: 1500px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu10='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520hand_count%2520%252B%253D%25201%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520myHands%253Dresults.multi_hand_landmarks%255B0%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520id%252Clm%2520in%2520enumerate%28myHands.landmark%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520h%252Cw%252Cc%253Dimage.shape%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520cx%252Ccy%253Dint%28lm.x*w%29%252C%2520int%28lm.y*h%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList.append%28%255Bid%252Ccx%252Ccy%255D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520lmList2forModel.append%28%255Bcx%252Ccy%255D%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520lmList%255BtipIds%255B0%255D%255D%255B1%255D%2520%253E%2520lmList%255BtipIds%255B0%255D-1%255D%255B1%255D%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%281%29%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%280%29%250A%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520for%2520id%2520in%2520range%281%252C5%29%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520lmList%255BtipIds%255Bid%255D%255D%255B2%255D%2520%253C%2520lmList%255BtipIds%255Bid%255D-1%255D%255B2%255D%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%281%29%250A%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520else%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers.append%280%29%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520total%253D%2520fingers.count%281%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D5%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520sh%253D%2520%2522Acclerate%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520draw%28sh%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D2%2520or%2520total%253D%253D3%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520sh%253D%2520%2522Left%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520draw%28sh%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D4%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520sh%253D%2520%2522Right%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520draw%28sh%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520total%253D%253D0%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520sh%253D%2520%2522Brake%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520draw%28sh%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.draw_landmarks%28image%252Chand_landmark%252Cmp_hand.HAND_CONNECTIONS%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C0%252C255%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520mp_draw.DrawingSpec%28color%253D%280%252C255%252C0%29%252C%2520thickness%253D2%252C%2520circle_radius%253D2%29%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523FPS%2520Counter%2520Logic%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520currTime%2520%253D%2520time.time%28%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fps%2520%253D%25201%252F%2520%28currTime%2520-%2520prevTime%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520prevTime%2520%253D%2520currTime%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fingers%253D%255B%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
+  style="width: 939px; height: 1129px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+
+        uuu11='''<iframe
+  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=python&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=17px&lh=133%25&si=false&es=2x&wm=false&code=%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520if%2520record%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520out.write%28image%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520image%253D%2520cv2.cvtColor%28image%252Ccv2.COLOR_BGR2RGB%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520kpi1_text.write%28f%2522%253Ch1%2520style%253D%27text-align%253A%2520center%253B%2520color%253Ared%253B%2520%27%253E%257Bint%28fps%29%257D%253C%252Fh1%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520kpi2_text.write%28f%2522%253Ch1%2520style%253D%27text-align%253A%2520center%253B%2520color%253Ared%253B%2520%27%253E%257Bhand_count%257D%253C%252Fh1%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520kpi3_text.write%28f%2522%253Ch1%2520style%253D%27text-align%253A%2520center%253B%2520color%253Ared%253B%2520%27%253E%257Bwidth%257D%253C%252Fh1%253E%2522%252C%2520unsafe_allow_html%253DTrue%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520image%2520%253D%2520cv2.resize%28image%252C%2520%280%252C0%29%252C%2520fx%2520%253D%25200.8%252C%2520fy%2520%253D0.8%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520image%2520%253D%2520image_resize%28image%2520%253D%2520image%252C%2520width%2520%253D%2520320%252Cheight%253D360%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520stframe.image%28image%252C%2520channels%2520%253D%2520%27BGR%27%252C%2520use_column_width%253DFalse%29%250A%2520%2520%2520%2520st.subheader%28%27Output%2520Image%27%29%250A%2520%2520%2520%2520st.text%28%27Video%2520Processed%27%29%250A%2520%2520%2520%2520output_video%2520%253D%2520open%28%27output1.mp4%27%252C%27rb%27%29%250A%2520%2520%2520%2520out_bytes%253D%2520output_video.read%28%29%250A%2520%2520%2520%2520st.video%28out_bytes%29%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520vid.release%28%29%250A%2520%2520%2520%2520out.release%28%29%250A"
+  style="width: 1024px; height: 586px; border:0; transform: scale(1); overflow:hidden;"
+  sandbox="allow-scripts allow-same-origin">
+</iframe>'''
+        st.components.v1.html(uuu,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu2,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu3,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu4,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu5,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu6,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu7,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu8,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu9,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu10,width=1024,height=1000,scrolling=True)
+        st.components.v1.html(uuu11,width=1024,height=568,scrolling=True)
+        
+        
+        
+        
+        # pl= "def hel()"    
+        # code = st_ace(language='python',theme='dracula',placeholder=pl)
+        # '''def hello():
+        # print("Hello, Streamlit!")'''
+        # st.st_ace(code, language='python',theme='cobalt')