test

.gitignore

@@ -0,0 +1,3 @@
+.streamlit/secrets.toml
+todo.txt
+CSVs/*

.streamlit/config.toml

@@ -0,0 +1,2 @@
+[theme]
+base="light"

app.py

@@ -0,0 +1,111 @@
+import streamlit as st
+import threading
+from functions import *
+from streamlit.runtime.scriptrunner.script_run_context import add_script_run_ctx
+from streamlit.components.v1 import declare_component
+
+st.set_page_config(layout="wide")
+
+car_map = declare_component("car_map", path="./car_map")
+
+if "reset" not in st.session_state:
+    st.session_state["reset"] = False
+
+with st.sidebar:
+    name = st.text_input("What's your name?", value=st.session_state.get("name", ""))
+    name = name.strip().lower()
+    name_error_placeholder = st.empty()
+
+    if st.button("Start annotation"):
+        if name:
+            st.session_state["name"] = name
+            st.session_state["img"], st.session_state["img_name"] = get_random_image()
+            st.rerun()
+        else:
+            name_error_placeholder.error("Name is required")
+
+    with st.expander("Annotation statistics", expanded=True):
+        st.write(f"**Total images**: {len(df)}")
+        st.write(f"**Total annotated images**: {len(df[df['validated'] == True])}")
+        st.write(f"**Images left to annotate**: {len(df[df['validated'] == False])}")
+        if "name" in st.session_state:
+            st.write(f"**Images annotated by you**: {len(df[(df['annotator_name'] == st.session_state['name']) & (df['validated'] == True)])}")
+
+    with st.expander("Annotation instructions", expanded=False):
+        st.markdown("- Rotate the image of the car if necessary using the rotation buttons.")
+        st.markdown("- Switch between viewing the car map from the back and the front for a better view.")
+        st.markdown("- Check the image for damages and mark the damaged parts on the car map on the right.")
+        st.markdown("- Right click on the car map to increase the severity level of the damage, and left click to decrease it.")
+        st.markdown("- Severity **level 1** is for scratches, **level 2** is for dents, and **level 3** is for cracks, breaks and severe damages.")
+        st.markdown("**⏭ Skip this image**: If you are not sure about the damages, the image will be shown to another annotator.")
+        st.markdown("**❌ Not car**: If the image is taken inside of the car or does not contain a car at all, or the image is not clear (blurry, zoomed-in, bad lighting, etc.)")
+        st.markdown("**✅ Validate**: save the annotations and move to the next image.")
+        st.markdown("🔙: Go back to your previous annotation.")
+
+    # st.download_button("Download annotations", data=df.to_csv(index=False), file_name="annotations.csv", mime="text/csv")
+    
+if "name" in st.session_state:
+    if st.session_state["img"]:
+        col1, col2 = st.columns([10, 8])
+
+        rotation_btns = col1.columns([1, 1])
+        left_btn = rotation_btns[0].button("↶ 90°", help="Rotate image 90° left", use_container_width=True)
+        right_btn = rotation_btns[1].button("↷ 90°", help="Rotate image 90° right", use_container_width=True)
+            
+        if "rotation" not in st.session_state:
+            st.session_state["rotation"] = 0
+        if left_btn:
+            st.session_state["img"] = st.session_state["img"].rotate(90, expand=True).resize((1000, 800))
+            st.session_state["rotation"] = (st.session_state["rotation"] + 90) % 360
+        if right_btn:
+            st.session_state["img"] = st.session_state["img"].rotate(-90, expand=True).resize((1000, 800))
+            st.session_state["rotation"] = (st.session_state["rotation"] - 90) % 360
+
+        reset_annotation_btn = col2.button("🧹 Reset annotation", help="Remove all the annotation and start over", use_container_width=True)
+        if reset_annotation_btn:
+            st.session_state["reset"] = True
+        car_map_view = col2.radio("Car map view", ["Back", "Front"], index=0, horizontal=True, label_visibility="collapsed")
+
+        img = st.session_state.get("img")
+        img_name = st.session_state.get("img_name")
+        col1_c1, col1_c2 = col1.columns([1, 10])
+        prev_img_name = st.session_state["prev_img_name"] if "prev_img_name" in st.session_state else None
+        previous_btn = col1_c1.button("🔙", use_container_width=True, help="Go back to the previous image", disabled=(not prev_img_name))
+        if previous_btn:
+            st.session_state["img"] = st.session_state["prev_img"]
+            st.session_state["img_name"] = st.session_state["prev_img_name"]
+            st.session_state["rotation"] = st.session_state["prev_rotation"]
+            st.session_state["prev_img_name"] = None
+            st.session_state["prev_rotation"] = None
+            st.rerun()
+        col1_c2.button(img_name, use_container_width=True, disabled=True)
+        # col1_c2.write(img_name)
+        col1.image(img, use_column_width=True)
+
+        with col2:
+            img_damages = get_img_damages(img_name)
+            annotated_damages = car_map(damages=img_damages, img_name=img_name, view=car_map_view, reset=st.session_state["reset"])
+        bnt_cols = st.columns(3)
+        skip_btn = bnt_cols[0].button("⏭ Skip this image", use_container_width=True, help="Skip this image if you are not sure")
+        not_car_btn = bnt_cols[1].button("❌ Not car", use_container_width=True, help="Click this if the image does not contain a car")
+        next_btn = bnt_cols[2].button("✅ Validate", use_container_width=True, type="primary", help="Validate annotations and move to the next one")
+
+        with open('custom_style.css') as f:
+            st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True) 
+
+        if not_car_btn or next_btn or skip_btn:
+            annot_name = st.session_state["name"]
+            rotation = st.session_state["rotation"]
+            process_thread = threading.Thread(target=process_image, args=(img_name, annot_name, not not_car_btn, skip_btn, rotation, annotated_damages), daemon=True)
+            add_script_run_ctx(process_thread)
+            process_thread.start()
+            st.session_state["prev_img_name"] = img_name
+            st.session_state["prev_img"] = img
+            st.session_state["prev_rotation"] = st.session_state["rotation"]
+            st.session_state["img"], st.session_state["img_name"] = get_random_image()
+            st.session_state["rotation"] = 0
+            st.session_state["reset"] = False
+            st.rerun()
+
+    else:
+        st.write("No images left to annotate. Thank you for your contribution!")

car_map/index.html

@@ -0,0 +1,62 @@
+<html>
+  <head>
+    <link href='https://fonts.googleapis.com/css?family=Source Sans Pro' rel='stylesheet'>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+  </head>
+  <body>
+    <!-- Set up your HTML here -->
+    <div id="details-box"></div>
+    <div id="view-assist">
+      <p id="front">Front</p>
+      <img id="arrow" src="https://www.svgrepo.com/show/342408/arrow-top.svg">
+      <p id="back">Back</p>
+    </div>
+    <svg viewBox="0 -180 1600 2250" xmlns="http://www.w3.org/2000/svg" id="car-map">
+        <g id="layer2" transform="matrix(0, 1, -1, 0, 254.000085527972, -254.000194186645)" style="transform-origin: 555.665px 834.02px;">
+          <g id="g4113" transform="translate(-13.78 3.524)">
+            <path id="path3070" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 357.43 1085.43 C 393.14 1062.57 494.57 1006.86 494.57 1006.86 C 536 991.14 634.57 995.43 686 994 C 737.43 992.57 777.248 996.088 818.148 1012.998 C 859.148 1029.928 936.567 1087.874 953.267 1093.074 C 976.067 1100.214 1080.3 1101.14 1118.9 1114 C 1157.4 1126.86 1144.6 1146.86 1144.6 1146.86 L 1114.6 1142.57 L 1108.8 1195.49 C 1108.8 1195.49 1146 1196.86 1150.3 1211.14 C 1154.6 1225.43 1156 1242.57 1147.4 1252.57 C 1138.9 1262.6 1133.1 1251.14 1128.9 1265.4 C 1124.6 1279.7 1126 1294 1101.7 1292.6 C 1077.4 1291.1 1003.1 1292.6 1003.1 1292.6 C 1003.1 1292.6 987.4 1184 904.6 1186.86 C 821.7 1189.71 808.9 1292.6 808.9 1292.6 L 361.599 1292.6" data-name="Aile arriere gauche"/>
+            <path id="path3070" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 361.599 1292.6 L 308.86 1292.6 C 308.86 1292.6 303.14 1188.29 211.71 1186.86 C 120.29 1185.43 113.14 1292.6 113.14 1292.6 L 47.43 1292.6 L 28.86 1254 C 28.34 1254 2.61 1254 7.43 1236.86 C 12.08 1220.3 3.14 1195.43 24.57 1195.43 C 46 1195.43 71.71 1196.86 71.71 1196.86 L 87.43 1152.57 L 46 1149.71 C 46 1149.71 80.29 1125.43 164.57 1116.86 C 248.86 1108.29 321.71 1108.29 357.43 1085.43 L 361.599 1292.6 Z" data-name="Aile avant gauche">
+              <title>Path</title>
+            </path>
+            <path id="path3900" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 886.971 1038.45 L 878.308 983.581 L 873.976 934.969 L 877.826 867.105 L 881.196 845.446 L 886.971 740.039 L 834.99 740.521 L 775.789 746.778 L 752.205 751.109 L 735.841 759.292 L 670.383 797.315 L 599.64 837.66 C 585.56 868.63 581.34 909.45 581.34 931.97 C 581.34 954.49 585.56 1024.944 603.86 1038.944 L 886.971 1038.45 Z" transform="translate(-254 254)" data-name="Porte avant gauche"/>
+            <path id="path3900-6" d="M 680.781 993.783 L 732.762 994.746 L 779.2 1000.17 C 797.5 1012.84 835.5 1050.84 872.1 1104.33 C 908.7 1157.82 880.5 1163.45 853.8 1178.93 C 827 1194.42 804.5 1221.641 786.2 1291.981 L 632.78 1292.419 C 627.15 1267.119 620.12 1209.9 620.12 1187.4 C 621.29 1151.3 622.6 1118.8 626.27 1100.1 C 628.74 1075 631.38 1000.204 632.78 994.574 L 680.781 993.783 Z" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" data-name="Porte arriere gauche"/>
+            <path id="path3884" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="m618.57 847.14c15.72-18.57 123.38-81.52 151.43-88.57 29.5-7.41 103-7.14 103-7.14l-7.14 95.71z" transform="translate(-254 254)"/>
+            <path id="path3892" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="m898.7 752.84-4.29 94.32h207.19c-11.3-20.75-46.6-74.9-72.9-88.57-14.3-10-82.86-4.33-130-5.75z" transform="translate(-254 254)"/>
+          </g>
+          <path id="path4381-0" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 1267.042 624.97 C 1267.042 624.97 1336.7 623.56 1336.7 646.09 L 1336.7 1017.7 C 1336.7 1040.2 1264.271 1043 1264.271 1043" data-name="Pare-choc arriere"/>
+          <g id="g4451" transform="translate(-13.78 15.524)">
+            <path id="path4175" style="stroke:#000000;stroke-width:5;fill:none" d="m736.17 416.79s94.31 5.63 152.02 5.63c106.98 0 201.31-5.63 201.31-5.63m-1.4 297s-77.4-5.63-199.91-5.63c-68.97 0-152.02 7.04-152.02 7.04" transform="translate(-254 254)"/>
+            <path id="path4135-9" d="m345.78 632.78h-294.19l-14.076 102.76-7.038 11.26v142.17l7.038 14.07 15.483 101.36h288.55" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" data-name="Capot"/>
+            <path id="path-1" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 1282.678 961.782 L 1282.677 677.454 L 1214.68 677.456 L 1214.68 961.786 L 1282.678 961.782 Z M 832.7 670.79 C 832.7 670.79 820 718.65 820 743.98 L 820 890.37 C 820 915.71 832.7 967.79 832.7 967.79 L 1038.2 1005.8 L 1146.6 1005.8 C 1146.6 1005.8 1160.6 924.16 1160.6 890.37 L 1160.6 742.58 C 1160.6 704.57 1146.6 632.78 1146.6 632.78 L 1038.2 632.78 L 832.7 670.79 Z" data-name="Malle"/>
+            <path id="path4165" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 595.41 378.78 L 736.17 416.79 C 736.17 416.79 727.73 466.01 727.73 488.75 L 727.73 636.37 C 727.73 667.34 736.17 715.2 736.17 715.2 L 595.41 748.98 C 595.41 748.98 578.17 687.08 578.17 656.08 C 578.55 622.28 580.28 470.28 580.28 470.28 C 578.87 439.31 595.41 378.78 595.41 378.78 L 595.41 378.78 Z" transform="translate(-254 254)" data-name="Pare-brise avant"/>
+            <path id="path4205" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="m1097.9 435.09s-8.4 40.82-8.4 56.3v144.98c0 19.71 7 57.72 7 57.72s94.3 26.74 123.9 26.74h42.2v-312.49h-47.8c-25.4 0-116.9 26.75-116.9 26.75z" transform="translate(-254 254)" data-name="Pare-brise arriere"/>
+          </g>
+          <path id="path4245" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M -74.052 1042.25 L -45.91 1042.1 C -17.754 1042.1 -23.38 1019.6 -23.38 1019.6 L -23.38 923.9 C -36.06 923.9 -34.65 914.29 -34.65 907.01 L -34.65 757.81 C -34.2 738.92 -24.79 740.92 -24.79 740.92 L -23.38 649.42 C -23.38 649.42 -16.855 626.389 -47.821 624.989 C -78.791 623.579 -75.919 624.665 -76.336 624.523 C -76.753 624.38 -144.37 622.97 -144.37 645.49 L -144.37 1017.1 C -144.37 1039.6 -74.052 1042.25 -74.052 1042.25 Z" data-name="Pare-choc avant"/>
+          <g id="g4428" transform="translate(-13.78 15.524)">
+            <path id="path3852-6" d="M 373.313 355.9 L 308.86 355.9 C 308.86 355.9 303.14 460.19 211.71 461.61 C 120.29 463.04 113.14 355.9 113.14 355.9 L 47.429 355.9 L 28.857 394.47 C 28.342 394.47 2.614 394.47 7.429 411.61 C 12.08 428.18 3.143 453.04 24.571 453.04 C 46 453.04 71.714 451.61 71.714 451.61 L 87.429 495.9 L 46 498.76 C 46 498.76 80.286 523.04 164.57 531.61 C 248.86 540.19 321.71 540.19 357.43 563.04" style="stroke: rgb(0, 0, 0); stroke-width: 5px; fill: rgb(255, 255, 255);" data-name="Aile avant droit"/>
+            <path id="path3852-6" d="M 373.313 355.9 L 808.86 355.9 C 808.86 355.9 821.71 458.76 904.57 461.61 C 987.43 464.47 1003.1 355.9 1003.1 355.9 C 1003.1 355.9 1077.4 357.33 1101.7 355.9 C 1126 354.47 1124.6 368.76 1128.9 383.04 C 1133.1 397.33 1138.9 385.9 1147.4 395.9 C 1156 405.9 1154.6 423.04 1150.3 437.33 C 1146 451.61 1108.8 452.98 1108.8 452.98 L 1114.6 505.9 L 1144.6 501.61 C 1144.6 501.61 1157.4 521.61 1118.9 534.47 C 1080.3 547.33 975.802 558.017 953.002 565.157 C 936.302 570.357 853.501 620.391 812.511 637.321 C 771.551 654.231 737.43 655.9 686 654.47 C 634.57 653.04 536 657.33 494.57 641.61 C 494.57 641.61 393.14 585.9 357.43 563.04" style="stroke: rgb(0, 0, 0); stroke-width: 5px; fill: rgb(255, 255, 255);" data-name="Aile arriere droit"/>
+            <path id="path3900-4" d="M 345.64 556.81 C 331.56 525.84 327.34 485.02 327.34 462.5 C 327.34 439.98 331.56 371.01 349.86 356.93 L 635.128 355.533 L 626.117 398.01 L 620.325 451.428 L 622.256 506.133 L 627.405 560.195 L 633.197 655.446 L 570.769 654.802 L 508.984 647.723 L 474.23 632.277 L 345.64 556.81 Z" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" data-name="Porte avant droite"/>
+            <path id="path3942-2" d="M 720.688 654.344 L 632.78 655.34 C 631.38 649.71 628.74 573.44 626.27 548.41 C 622.6 529.69 621.29 497.19 620.12 461.09 C 620.12 438.57 627.15 380.86 632.78 355.52 L 786.21 356.23 C 804.51 426.61 827.03 454.06 853.78 469.54 C 880.52 485.02 908.67 490.65 872.08 544.14 C 835.48 597.63 797.47 635.64 779.17 648.3 L 720.688 654.344 Z" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" data-name="Porte arriere droite"/>
+            <path id="path3892-5" d="m644.7 641.63-4.29-94.32h207.17c-11.31 20.75-46.62 74.9-72.86 88.57-14.29 10-82.88 4.33-130.02 5.75z" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);"/>
+            <path id="path3884-4" d="m364.57 547.33c15.72 18.57 123.38 81.52 151.43 88.57 29.5 7.41 103 7.14 103 7.14l-7.14-95.71z" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);"/>
+          </g>
+          <path id="path4361" style="stroke: rgb(0, 0, 0); stroke-width: 5px; paint-order: stroke; fill: rgb(255, 255, 255);" d="M -71.88 985.879 L -71.88 948.339 L -49.35 948.339 L -26.83 948.339 L -26.83 985.879 L -26.83 1023.376 L -49.35 1023.376 L -71.88 1023.376 L -71.88 985.879 Z" data-name="Feu avant gauche"/>
+          <path id="path4363" style="stroke-width: 5px; stroke: rgb(0, 0, 0); paint-order: stroke; fill: rgb(255, 255, 255);" d="M -71.88 681.701 L -71.88 642.757 L -49.35 642.757 L -26.83 642.757 L -26.83 681.701 L -26.83 720.644 L -49.35 720.644 L -71.88 720.644 L -71.88 681.701 Z" data-name="Feu avant droit"/>
+          <path id="path4610" style="stroke:#000000;stroke-width:2;fill:#c8c8c8" d="m195.66 202.84a76.01 76.01 0 1 1 -152.02 0 76.01 76.01 0 1 1 152.02 0z" transform="translate(78.489 1074.7)"/>
+          <path id="path4612" style="stroke:#000000;stroke-width:2;fill:#ffffff" d="m147.8 72.633a44.339 44.339 0 1 1 -88.681 0 44.339 44.339 0 1 1 88.681 0z" transform="translate(94.676 1204.9)"/>
+          <path id="path4610-9" style="stroke: rgb(0, 0, 0); stroke-width: 2; fill: rgb(200, 200, 200);" d="m195.66 202.84a76.01 76.01 0 1 1 -152.02 0 76.01 76.01 0 1 1 152.02 0z" transform="translate(78.489 187.66)"/>
+          <path id="path4612-4" style="stroke:#000000;stroke-width:2;fill:#ffffff" d="m147.8 72.633a44.339 44.339 0 1 1 -88.681 0 44.339 44.339 0 1 1 88.681 0z" transform="translate(94.676 317.86)"/>
+          <path id="path4610-5" style="stroke:#000000;stroke-width:2;fill:#c8c8c8" d="m195.66 202.84a76.01 76.01 0 1 1 -152.02 0 76.01 76.01 0 1 1 152.02 0z" transform="translate(773.03 187.66)"/>
+          <path id="path4612-1" style="stroke:#000000;stroke-width:2;fill:#ffffff" d="m147.8 72.633a44.339 44.339 0 1 1 -88.681 0 44.339 44.339 0 1 1 88.681 0z" transform="translate(789.21 317.86)"/>
+          <path id="path4610-4" style="stroke:#000000;stroke-width:2;fill:#c8c8c8" d="m195.66 202.84a76.01 76.01 0 1 1 -152.02 0 76.01 76.01 0 1 1 152.02 0z" transform="translate(773.03 1074.7)"/>
+          <path id="path4612-3" style="stroke:#000000;stroke-width:2;fill:#ffffff" d="m147.8 72.633a44.339 44.339 0 1 1 -88.681 0 44.339 44.339 0 1 1 88.681 0z" transform="translate(789.21 1204.9)"/>
+          <path id="path4499" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 1199.9 633.86 L 1199.9 707.05 L 1267.5 707.05 L 1267.5 624 L 1242.2 609.93 L 1199.9 633.86 Z" data-name="Feu arriere droit"/>
+          <path id="path4501" style="stroke: rgb(0, 0, 0); stroke-width: 5; fill: rgb(255, 255, 255);" d="M 1199.9 963.24 L 1267.5 963.24 L 1267.5 1042.1 L 1243.6 1056.1 L 1199.9 1037.8 L 1199.9 963.24 Z" data-name="Feu arriere gauche"/>
+          <path id="path-2" style="stroke-width: 5px; stroke: rgb(0, 0, 0); paint-order: stroke; fill: rgb(255, 255, 255);" d="M -126.593 832.725 L -126.593 735.712 L -113.949 735.712 L -101.311 735.712 L -101.311 832.725 L -101.311 929.735 L -113.949 929.735 L -126.593 929.735 L -126.593 832.725 Z" data-name="Plaque immatriculation avant"></path>
+          <path id="path-3" style="stroke-width: 5px; stroke: rgb(0, 0, 0); paint-order: stroke; fill: rgb(255, 255, 255);" d="M 1292.264 833.899 L 1292.264 736.886 L 1304.908 736.886 L 1317.546 736.886 L 1317.546 833.899 L 1317.546 930.909 L 1304.908 930.909 L 1292.264 930.909 L 1292.264 833.899 Z" data-name="Plaque immatriculation arriere"></path>
+        </g>
+    </svg>
+
+    <script src="script.js"></script>
+  </body>
+</html>

car_map/script.js

@@ -0,0 +1,149 @@
+// Just copy & paste these functions as-is:
+function sendMessageToStreamlitClient(type, data) {
+    var outData = Object.assign({
+        isStreamlitMessage: true,
+        type: type,
+    }, data);
+    window.parent.postMessage(outData, "*");
+}
+function init() {
+    sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+}
+function setFrameHeight(height) {
+    sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+}
+// The `data` argument can be any JSON-serializable value.
+function sendDataToPython(data) {
+    // console.log("Sending data: ", data.value);
+    sendMessageToStreamlitClient("streamlit:setComponentValue", data);
+}
+
+// Now modify this part of the code to fit your needs:
+let damaged_parts = {};
+let severity_colors = {0: "#FFFFFF", 1: "#FFFF00", 2: "#FFA500", 3: "#FF0000"};
+
+var paths = document.querySelectorAll("[data-name]");
+paths.forEach(function (path) {
+    path.setAttribute('data-severity', 0);
+});
+
+function getDamagedParts() {
+    var damaged_parts = {};
+    paths.forEach(function (path) {
+        var severity = parseInt(path.getAttribute('data-severity'));
+        var part_name = path.dataset.name;
+        damaged_parts[part_name] = severity;
+    });
+    return damaged_parts;
+}
+
+paths.forEach(function (path) {
+    path.addEventListener("click", function () {
+        let severity = parseInt(path.getAttribute('data-severity'));
+        severity = (severity + 1) % 4;
+        path.setAttribute('data-severity', severity);
+        path.style.fill = severity_colors[severity];
+        // damaged_parts[path.dataset.name] = severity; // Update the damaged parts state
+        document.getElementById("details-box").innerHTML = `${path.dataset.name} - ${severity}`;
+        sendDataToPython({
+            value: getDamagedParts(),
+            dataType: "json",
+        });
+    });
+});
+
+paths.forEach(function (path) {
+    path.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+        let severity = (parseInt(path.getAttribute('data-severity')) + 3) % 4;
+        path.setAttribute('data-severity', severity);
+        path.style.fill = severity_colors[severity];
+        // damaged_parts[path.dataset.name] = severity; // Update the damaged parts state
+        document.getElementById("details-box").innerHTML = `${path.dataset.name} - ${severity}`;
+        sendDataToPython({
+            value: getDamagedParts(),
+            dataType: "json",
+        });
+    });
+});
+
+var tooltipSpan = document.getElementById('details-box');
+document.addEventListener('mouseover', function (e) {
+    if (e.target.tagName == 'path') {
+        var severity = parseInt(e.target.getAttribute('data-severity'));
+        var part_name = e.target.dataset.name;
+        if (part_name == undefined) {
+            document.getElementById("details-box").style.opacity = "0%";
+        }
+        else {
+            document.getElementById("details-box").innerHTML = part_name + " - " + severity;
+            document.getElementById("details-box").style.opacity = "100%";
+            document.getElementById("details-box").style.display = "block";
+        }
+    }
+    else {
+        document.getElementById("details-box").style.opacity = "0%";
+    }
+});
+
+window.onmousemove = function (e) {
+    var x = e.clientX,
+        y = e.clientY;
+    tooltipSpan.style.top = (y + 20) + 'px';
+    tooltipSpan.style.left = (x) + 'px';
+};
+
+// data is any JSON-serializable value you sent from Python, and it's already deserialized for you.
+function onDataFromPython(event) {
+    if (event.data.type !== "streamlit:render") return;
+    damaged_parts = event.data.args.damages;  // Access values sent from Python here!
+    img_name = event.data.args.img_name;
+    reset = event.data.args.reset;
+    view = event.data.args.view;
+    if (view == "Front") {
+        document.getElementById("car-map").style.transform = `rotate(180deg)`;
+        document.getElementById("front").style.top = `90%`;
+        document.getElementById("back").style.bottom = `90%`;
+        document.getElementById("arrow").style.rotate = `180deg`;
+    }
+    
+    // Reset annotations if requested
+    if (reset) {
+        for (var key in damaged_parts) {
+            damaged_parts[key] = 0; // Set each key's value to 0
+        }
+        paths.forEach(function (path) {
+            path.setAttribute('data-severity', 0);
+            path.style.fill = severity_colors[0]; // Reset to default color
+        });
+    }
+
+    for (var key in damaged_parts) {
+        try {
+            var path = document.querySelector("[data-name='" + unescape(encodeURIComponent(key)) + "']");
+            path.style.fill = severity_colors[damaged_parts[key]];
+            path.setAttribute('data-severity', damaged_parts[key]);
+        }
+        catch (error) {
+            console.log("Error: " + key);
+        }
+    }
+    sendDataToPython({
+        value: damaged_parts,
+        dataType: "json",
+    });
+}
+
+// Hook things up!
+window.addEventListener("message", onDataFromPython);
+init();
+
+// Hack to autoset the iframe height.
+window.addEventListener("load", function() {
+    window.setTimeout(function() {
+        setFrameHeight(document.documentElement.clientHeight)
+    }, 0);
+});
+
+// Optionally, if the automatic height computation fails you, give this component a height manually
+setFrameHeight(440);

car_map/styles.css

@@ -0,0 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+path {
+    stroke: white;
+    fill:white;
+    transition: fill .4s ease;
+    cursor: pointer;
+}
+
+#car-map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    transform-origin: 50% 35%;
+}
+
+#details-box {
+    padding: 0.5rem;
+    border-radius: 8px;
+    font-size: 18px;
+    position: fixed;
+    color: white;
+    font-family: "Source Sans Pro";
+    background-color: black;
+    width: fit-content;
+    transform: translateX(-50%);
+    transition: opacity .4s ease;
+    z-index: 1;
+    display: none;
+}
+
+#view-assist {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+#view-assist #front {
+    font-family: "Source Sans Pro";
+    position: absolute;
+    top: 20px;
+    right: 25px;
+    margin: 0;
+}
+#view-assist #back {
+    font-family: "Source Sans Pro";
+    position: absolute;
+    bottom: 20px;
+    right: 25px;
+    margin: 8px 0;
+}
+#view-assist > #arrow {
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 50px;
+    height: 50%;
+    object-fit: cover;
+    transform-origin: 50% 0%;
+}

custom_style.css

@@ -0,0 +1,31 @@
+.st-emotion-cache-1jicfl2 {
+    padding-top: 4rem;
+}
+
+/* .st-emotion-cache-vdokb0 p {
+    text-align: center;
+    margin-top: 7px;
+} */
+
+.st-dc, .st-cx {
+    margin-top: 5px !important;
+}
+.st-af {
+    justify-content: center;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] {
+    background-color: #f4ca9a;
+    padding-right: 38px;
+    padding-left: 30px;
+    padding-bottom: 6px;
+    padding-top: 4px;
+    margin: 0 6px;
+}
+div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"]:hover {
+    background-color: #eb9a68;
+}
+.st-cj {
+    background-color: rgb(255, 75, 75);
+}

functions.py

@@ -0,0 +1,49 @@
+import boto3
+from PIL import Image
+import pandas as pd
+import streamlit as st
+import random
+import io
+
+s3_client = boto3.client('s3',
+    aws_access_key_id=st.secrets["aws_access_key_id"],
+    aws_secret_access_key=st.secrets["aws_secret_access_key"],
+    region_name='eu-west-3')
+bucket_name = "sygma-global-data-storage"
+folder = "car-damage-detection/scrappedImages/"
+
+csv_folder = "car-damage-detection/CSVs/"
+s3_df_path = csv_folder + "70k_old_annotations_fixed.csv"
+response = s3_client.get_object(Bucket=bucket_name, Key=s3_df_path)
+# df = pd.read_csv("CSVs/70k_old_annotations_fixed.csv", low_memory=False)
+with io.BytesIO(response['Body'].read()) as bio:
+    df = pd.read_csv(bio, low_memory=False)
+df = df[df['s3_available'] == True]
+
+def get_random_image():
+    not_validated_imgs = df[df["validated"] == False]["img_name"].tolist()
+    if len(not_validated_imgs) == 0:
+        return None, None
+    image_name = random.choice(not_validated_imgs)
+    s3_image_path = folder + image_name
+    try:
+        response = s3_client.get_object(Bucket=bucket_name, Key=s3_image_path)
+        image = Image.open(io.BytesIO(response['Body'].read())).resize((1000, 800))
+        return image, image_name
+    except:
+        return get_random_image()
+
+def get_img_damages(img_name):
+    img_row = df.loc[df["img_name"] == img_name]
+    damages = img_row.iloc[0, 6:].to_dict()
+    return damages
+
+def process_image(img_name, annotator_name, is_car, skip, rotation, damaged_parts):
+    df.loc[df["img_name"] == img_name, "annotator_name"] = annotator_name
+    df.loc[df["img_name"] == img_name, "is_car"] = is_car
+    df.loc[df["img_name"] == img_name, "rotation"] = rotation
+    if not skip:
+        df.loc[df["img_name"] == img_name, damaged_parts.keys()] = damaged_parts.values()
+    df.loc[df["img_name"] == img_name, "validated"] = not skip
+    # df.to_csv("CSVs/70k_old_annotations_fixed.csv", index=False)
+    s3_client.put_object(Bucket=bucket_name, Key=s3_df_path, Body=df.to_csv(index=False))

requirements.txt

@@ -0,0 +1 @@
+boto3