Completed creating visuals

.gitignore

@@ -1 +1,3 @@
-.streamlit
+.streamlit
+**/__pycache__
+/weights

App/createVisual.py

@@ -1,12 +0,0 @@
-import streamlit as st
-
-# Main function
-def CREATEVISUALS():
-    st.title("Detective Game")
-    st.write("Hey how are you")
-
-
-if __name__ == "__main__":
-    CREATEVISUALS()
-
-

Pages/createVideo.py

@@ -0,0 +1,53 @@
+from PIL import Image
+import streamlit as st
+import os
+
+# Main function
+def CREATEGIF():
+    st.title("Create photoshoot visual")
+
+    # Set the directory where the uploaded images will be saved
+    UPLOAD_DIR = 'uploaded_images'
+
+    # Create the directory if it doesn't exist
+    if not os.path.exists(UPLOAD_DIR):
+        os.makedirs(UPLOAD_DIR)
+
+    # Streamlit app title
+    st.title("Image Upload and Save App")
+
+    # File uploader allows user to upload an image
+    uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])
+
+    if uploaded_file is not None:
+        # Open the uploaded image
+        image = Image.open(uploaded_file)
+
+        # Display the uploaded image
+        st.image(image, caption='Uploaded Image.', use_column_width=True)
+        
+        # Save the uploaded image to the specified directory
+        image_path = os.path.join(UPLOAD_DIR, uploaded_file.name)
+        image.save(image_path)
+        
+        st.write(f"Image saved at: {image_path}")
+        
+    else:
+        st.write("No image uploaded yet.")
+
+    image_files = [f for f in os.listdir("bgImages") if os.path.isfile(os.path.join("bgImages", f))]
+
+    # Create a dropdown with the list of image files
+    selected_image = st.selectbox("Select an image file", image_files)
+
+    if selected_image:
+        # Display the selected image
+        image_path = os.path.join("bgImages", selected_image)
+        image = Image.open(image_path)
+        st.image(image, caption=f"Selected image: {selected_image}")
+
+
+if __name__ == "__main__":
+    CREATEGIF()
+
+

Pages/createVisual.py

@@ -0,0 +1,41 @@
+from PIL import Image
+import streamlit as st
+import os
+from Pages.imageBB import run
+
+# Main function
+def CREATEVISUALS():
+    st.title("Create photoshoot visual")
+
+    # Set the directory where the uploaded images will be saved
+    UPLOAD_DIR = 'uploaded_images'
+
+    # Create the directory if it doesn't exist
+    if not os.path.exists(UPLOAD_DIR):
+        os.makedirs(UPLOAD_DIR)
+
+    # Streamlit app title
+    st.header("Image Upload and Save App")
+
+    # File uploader allows user to upload an image
+    uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])
+
+    if uploaded_file is not None:
+        # Open the uploaded image
+        image = Image.open(uploaded_file)
+
+        # Save the uploaded image to the specified directory
+        image_path = os.path.join(UPLOAD_DIR, uploaded_file.name)
+        image.save(image_path)
+        
+        st.write(f"Image Saved")
+        run(image_path)
+
+
+    else:
+        st.write("No image uploaded yet.")
+
+if __name__ == "__main__":
+    CREATEVISUALS()
+
+

Pages/imageBB.py

@@ -0,0 +1,168 @@
+from segment_anything import sam_model_registry, SamAutomaticMaskGenerator, SamPredictor
+import torch
+import streamlit as st
+from Pages.streamlit_img_label import st_img_label
+from Pages.streamlit_img_label.manage import ImageManager
+import os
+from PIL import Image
+import cv2
+import numpy as np
+
+@st.cache_data
+def get_masks(rect,img_path):
+
+    CHECKPOINT_PATH = os.path.join("weights", "sam_vit_h_4b8939.pth")
+    DEVICE = torch.device('cuda:0' if torch.cuda.is_available() else 'cpu')
+    MODEL_TYPE = "vit_h"
+    sam = sam_model_registry[MODEL_TYPE](checkpoint=CHECKPOINT_PATH).to(device=DEVICE)
+    mask_predictor = SamPredictor(sam)
+
+    rect = np.array([
+        rect['left'],
+        rect['top'],
+        rect['left'] + rect['width'],
+        rect['top'] + rect['height']
+    ])
+    image_bgr = cv2.imread(img_path)
+    image_rgb = cv2.cvtColor(image_bgr, cv2.COLOR_BGR2RGB)
+
+    mask_predictor.set_image(image_rgb)
+
+    masks, scores, logits = mask_predictor.predict(
+        box=rect,
+        multimask_output=False
+    )
+    return masks
+
+
+
+def run(img_path):
+    st.set_option("deprecation.showfileUploaderEncoding", False)
+
+    im = ImageManager(img_path)
+    resized_img = im.resizing_img()
+    resized_rects = im.get_resized_rects()
+
+    if "rects" not in st.session_state:
+        st.session_state.rects = resized_rects
+
+    # Only display st_img_label if Save button hasn't been clicked
+    if not st.session_state.get("saved"):
+        rects = st_img_label(resized_img, box_color="red", rects=st.session_state.rects)
+        st.session_state.rects = rects
+    else:
+        st.image(resized_img, caption="Annotated Image",width=300, use_column_width=True)
+
+        for rect in st.session_state.rects:
+            # st.write(f"Rectangle: {rect}")
+
+            with st.spinner('Please wait while the product image is being extracted...'):
+
+                masks = get_masks(rect,img_path)
+
+                save_dir = "saved_masks"
+                if not os.path.exists(save_dir):
+                    os.makedirs(save_dir)
+
+                for i, mask in enumerate(masks):
+                    inverted_mask = 255 - (mask * 255).astype(np.uint8)
+                    file_path = os.path.join(save_dir, f"inverted_mask_{i}.png")
+                    cv2.imwrite(file_path, inverted_mask)
+
+                print(f"Inverted masks saved to directory: {save_dir}")
+
+            image_files = [f for f in os.listdir("bgImages") if os.path.isfile(os.path.join("bgImages", f))]
+
+            st.header("Template Selection")
+            # Create a dropdown with the list of image files
+            selected_image = st.selectbox("Select an image file", image_files)
+
+            if selected_image:
+                # Display the selected image
+                image_pathBG = os.path.join("bgImages", selected_image)
+                image = Image.open(image_pathBG)
+                st.image(image, width=300, caption=f"Selected image: {selected_image}")
+
+                if st.button("Create Image"):
+                    # Read the base image and background image
+                    image_bgr = cv2.imread(img_path)
+                    background_bgr = cv2.imread(image_pathBG)
+                    
+                    # Resize the background image to match the size of image_bgr
+                    background_bgr = cv2.resize(background_bgr, (image_bgr.shape[1], image_bgr.shape[0]))
+
+                    # Convert the base image to RGB format for mask prediction if it's not already in RGB
+                    if image_bgr.shape[2] == 3:  # No alpha channel, standard BGR image
+                        image_rgb = cv2.cvtColor(image_bgr, cv2.COLOR_BGR2RGB)
+                    else:
+                        image_rgb = image_bgr[:, :, :3]  # Drop alpha channel if it exists
+
+                    # Assuming masks is a binary mask, convert it to uint8 format
+                    mask = (masks[0] > 0).astype(np.uint8) * 255
+
+                    # Apply a Gaussian blur to the mask to smooth the edges
+                    mask = cv2.GaussianBlur(mask, (3,3), 0)
+
+                    # Ensure the image has an alpha channel
+                    if image_bgr.shape[2] == 3:  # If no alpha channel, add one
+                        b, g, r = cv2.split(image_bgr)
+                        alpha_channel = mask  # Use the blurred mask as the alpha channel
+                        image_bgra = cv2.merge((b, g, r, alpha_channel))
+                    else:
+                        image_bgra = image_bgr
+
+                    # Get the dimensions of the images
+                    masked_height, masked_width = image_bgra.shape[:2]
+                    background_height, background_width = background_bgr.shape[:2]
+
+                    # Calculate the coordinates to place the masked image in the center of the background image
+                    x_offset = (background_width - masked_width) // 2
+                    y_offset = (background_height - masked_height) // 2
+
+                    # Resize the masked image if it is larger than the background area
+                    if masked_width > background_width or masked_height > background_height:
+                        scaling_factor = min(background_width / masked_width, background_height / masked_height)
+                        new_size = (int(masked_width * scaling_factor), int(masked_height * scaling_factor))
+                        image_bgra = cv2.resize(image_bgra, new_size, interpolation=cv2.INTER_AREA)
+                        masked_height, masked_width = image_bgra.shape[:2]
+                        x_offset = (background_width - masked_width) // 2
+                        y_offset = (background_height - masked_height) // 2
+
+                    # Create a copy of the background image and convert it to BGRA
+                    background_bgra = cv2.cvtColor(background_bgr, cv2.COLOR_BGR2BGRA)
+
+                    # Overlay the masked image onto the center of the background image
+                    overlay_image = background_bgra.copy()
+
+                    # Only update the region where the segmented image will be placed
+                    overlay = np.zeros_like(background_bgra)
+                    overlay[y_offset:y_offset+masked_height, x_offset:x_offset+masked_width] = image_bgra
+
+                    # Create the alpha mask for blending
+                    alpha_mask = overlay[:, :, 3] / 255.0
+                    alpha_inv = 1.0 - alpha_mask
+
+                    # Modify alpha channel for smoother blending
+                    alpha_mask = alpha_mask ** 0.5  # Applying square root for smoother blending
+
+                    # Blend the images
+                    for c in range(0, 3):
+                        overlay_image[:, :, c] = (alpha_mask * overlay[:, :, c] + alpha_inv * overlay_image[:, :, c])
+
+                    # Set the alpha channel
+                    overlay_image[:, :, 3] = np.clip(overlay[:, :, 3] + background_bgra[:, :, 3], 0, 255)
+
+                    # Save the result
+                    output_path = 'output/overlay_image.png'
+                    cv2.imwrite(output_path, overlay_image)
+
+                    # Display the overlay image
+                    st.image(output_path, caption="Overlay Image", use_column_width=True, width=300)
+
+
+    def annotate():
+        st.session_state.saved = True
+
+    if st.session_state.rects:
+        st.button(label="Save", on_click=annotate)
+

Pages/streamlit_img_label/__init__.py

@@ -0,0 +1,177 @@
+import os
+import streamlit.components.v1 as components
+import numpy as np
+from .manage import ImageManager, ImageDirManager
+
+_RELEASE = True
+
+if not _RELEASE:
+    _component_func = components.declare_component(
+        "st_img_label",
+        url="http://localhost:3001",
+    )
+else:
+    parent_dir = os.path.dirname(os.path.abspath(__file__))
+    build_dir = os.path.join(parent_dir, "frontend/build")
+    _component_func = components.declare_component("st_img_label", path=build_dir)
+
+
+def st_img_label(resized_img, box_color="blue", rects=[], key=None):
+    """Create a new instance of "st_img_label".
+
+    Parameters
+    ----------
+    img_file: PIL.Image
+        The image to be croppepd
+    box_color: string
+        The color of the cropper's bounding box. Defaults to blue.
+    rects: list
+        list of bounding boxes that already exists.
+    key: str or None
+        An optional key that uniquely identifies this component. If this is
+        None, and the component's arguments are changed, the component will
+        be re-mounted in the Streamlit frontend and lose its current state.
+
+    Returns
+    -------
+    rects: list
+        list of bounding boxes.
+    """
+    # Get arguments to send to frontend
+    canvasWidth = resized_img.width
+    canvasHeight = resized_img.height
+
+    # Translates image to a list for passing to Javascript
+    imageData = np.array(resized_img.convert("RGBA")).flatten().tolist()
+
+    # Call through to our private component function. Arguments we pass here
+    # will be sent to the frontend, where they'll be available in an "args"
+    # dictionary.
+    #
+    # Defaults to a box whose vertices are at 20% and 80% of height and width.
+    # The _recommended_box function could be replaced with some kind of image
+    # detection algorith if it suits your needs.
+    component_value = _component_func(
+        canvasWidth=canvasWidth,
+        canvasHeight=canvasHeight,
+        rects=rects,
+        boxColor=box_color,
+        imageData=imageData,
+        key=key,
+    )
+    # Return a cropped image using the box from the frontend
+    if component_value:
+        return component_value["rects"]
+    else:
+        return rects
+
+
+# Add some test code to play with the component while it's in development.
+# During development, we can run this just as we would any other Streamlit
+# app: `$ streamlit run my_component/__init__.py`
+if not _RELEASE:
+    import streamlit as st
+
+    st.set_option("deprecation.showfileUploaderEncoding", False)
+    custom_labels = ["", "dog", "cat"]
+
+    img_dir = "img_dir"
+
+    idm = ImageDirManager(img_dir)
+
+    if "files" not in st.session_state:
+        st.session_state["files"] = idm.get_all_files()
+        st.session_state["annotation_files"] = idm.get_exist_annotation_files()
+        st.session_state["image_index"] = 0
+    else:
+        idm.set_all_files(st.session_state["files"])
+        idm.set_annotation_files(st.session_state["annotation_files"])
+
+    def refresh():
+        st.session_state["files"] = idm.get_all_files()
+        st.session_state["annotation_files"] = idm.get_exist_annotation_files()
+        st.session_state["image_index"] = 0
+
+    def next_image():
+        image_index = st.session_state["image_index"]
+        if image_index < len(st.session_state["files"]) - 1:
+            st.session_state["image_index"] += 1
+        else:
+            st.warning("This is the last image.")
+
+    def previous_image():
+        image_index = st.session_state["image_index"]
+        if image_index > 0:
+            st.session_state["image_index"] -= 1
+        else:
+            st.warning("This is the first image.")
+
+    def next_annotate_file():
+        image_index = st.session_state["image_index"]
+        next_image_index = idm.get_next_annotation_image(image_index)
+        if next_image_index:
+            st.session_state["image_index"] = idm.get_next_annotation_image(image_index)
+        else:
+            st.warning("All images are annotated.")
+            next_image()
+
+    def go_to_image():
+        file_index = st.session_state["files"].index(st.session_state["file"])
+        st.session_state["image_index"] = file_index
+
+    # Sidebar: show status
+    n_files = len(st.session_state["files"])
+    n_annotate_files = len(st.session_state["annotation_files"])
+    st.sidebar.write("Total files:", n_files)
+    st.sidebar.write("Total annotate files:", n_annotate_files)
+    st.sidebar.write("Remaining files:", n_files - n_annotate_files)
+
+    st.sidebar.selectbox(
+        "Files",
+        st.session_state["files"],
+        index=st.session_state["image_index"],
+        on_change=go_to_image,
+        key="file",
+    )
+    col1, col2 = st.sidebar.columns(2)
+    with col1:
+        st.button(label="Previous image", on_click=previous_image)
+    with col2:
+        st.button(label="Next image", on_click=next_image)
+    st.sidebar.button(label="Next need annotate", on_click=next_annotate_file)
+    st.sidebar.button(label="Refresh", on_click=refresh)
+
+    # Main content: annotate images
+    img_file_name = idm.get_image(st.session_state["image_index"])
+    img_path = os.path.join(img_dir, img_file_name)
+    im = ImageManager(img_path)
+    img = im.get_img()
+    resized_img = im.resizing_img()
+    resized_rects = im.get_resized_rects()
+    rects = st_img_label(resized_img, box_color="red", rects=resized_rects)
+
+    def annotate():
+        im.save_annotation()
+        image_annotate_file_name = img_file_name.split(".")[0] + ".xml"
+        if image_annotate_file_name not in st.session_state["annotation_files"]:
+            st.session_state["annotation_files"].append(image_annotate_file_name)
+        next_annotate_file()
+
+    if rects:
+        st.button(label="Save", on_click=annotate)
+        preview_imgs = im.init_annotation(rects)
+
+        for i, prev_img in enumerate(preview_imgs):
+            prev_img[0].thumbnail((200, 200))
+            col1, col2 = st.columns(2)
+            with col1:
+                col1.image(prev_img[0])
+            with col2:
+                default_index = 0
+                if prev_img[1]:
+                    default_index = custom_labels.index(prev_img[1])
+
+                select_label = col2.selectbox(
+                    "Label", custom_labels, key=f"label_{i}", index=default_index
+                )
+                im.set_annotation(i, select_label)

Pages/streamlit_img_label/annotation.py

@@ -0,0 +1,65 @@
+import os
+from pascal_voc_writer import Writer
+from xml.etree import ElementTree as ET
+
+"""
+.. module:: streamlit_img_label
+   :synopsis: annotation.
+.. moduleauthor:: Tianning Li <ltianningli@gmail.com>
+"""
+
+
+def read_xml(img_file):
+    """read_xml
+    Read the xml annotation file and extract the bounding boxes if exists.
+
+    Args:
+        img_file(str): the image file.
+    Returns:
+        rects(list): the bounding boxes of the image.
+    """
+    file_name = img_file.split(".")[0]
+    if not os.path.isfile(f"{file_name}.xml"):
+        return []
+    tree = ET.parse(f"{file_name}.xml")
+    root = tree.getroot()
+
+    rects = []
+
+    for boxes in root.iter("object"):
+        label = boxes.find("name").text
+        ymin = int(boxes.find("bndbox/ymin").text)
+        xmin = int(boxes.find("bndbox/xmin").text)
+        ymax = int(boxes.find("bndbox/ymax").text)
+        xmax = int(boxes.find("bndbox/xmax").text)
+        rects.append(
+            {
+                "left": xmin,
+                "top": ymin,
+                "width": xmax - xmin,
+                "height": ymax - ymin,
+                "label": label,
+            }
+        )
+    return rects
+
+
+def output_xml(img_file, img, rects):
+    """output_xml
+    Output the xml image annotation file
+
+    Args:
+        img_file(str): the image file.
+        img(PIL.Image): the image object.
+        rects(list): the bounding boxes of the image.
+    """
+    file_name = img_file.split(".")[0]
+    writer = Writer(img_file, img.width, img.height)
+    for box in rects:
+        xmin = box["left"]
+        ymin = box["top"]
+        xmax = box["left"] + box["width"]
+        ymax = box["top"] + box["height"]
+
+        writer.addObject(box["label"], xmin, ymin, xmax, ymax)
+    writer.save(f"{file_name}.xml")

Pages/streamlit_img_label/frontend/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+yarn.lock
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Pages/streamlit_img_label/frontend/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "trailingComma": "es5",
+  "tabWidth": 4
+}

Pages/streamlit_img_label/frontend/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "streamlit_img_label",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/fabric": "^3.6.8",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "apache-arrow": "^0.17.0",
+    "hoist-non-react-statics": "^3.3.2",
+    "fabric": "^3.6.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "streamlit-component-lib": "^1.1.3",
+    "typescript": "~3.7.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "homepage": "."
+}

Pages/streamlit_img_label/frontend/public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Streamlit Component</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Streamlit Component" />
+    <link rel="stylesheet" href="bootstrap.min.css" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

Pages/streamlit_img_label/frontend/src/StreamlitImgLabel.module.css

@@ -0,0 +1,17 @@
+.dark{
+    background-color:rgb(14, 17, 23);
+}
+
+button{
+    padding: 0.25rem 0.75rem;
+    border-radius: 0.25rem;
+    line-height: 1.3;
+    border: 1px solid;
+    margin-right: 5px;
+    margin-top: 5px;
+    
+}
+button.dark{
+    color: white;
+    border-color: rgba(250, 250, 250, 0.2);
+}

Pages/streamlit_img_label/frontend/src/StreamlitImgLabel.tsx

@@ -0,0 +1,249 @@
+import React, { useEffect, useState } from "react"
+import {
+    ComponentProps,
+    Streamlit,
+    withStreamlitConnection,
+} from "streamlit-component-lib"
+import { fabric } from "fabric"
+import styles from "./StreamlitImgLabel.module.css"
+
+interface RectProps {
+    top: number
+    left: number
+    width: number
+    height: number
+    label: string
+}
+
+interface PythonArgs {
+    canvasWidth: number
+    canvasHeight: number
+    rects: RectProps[]
+    boxColor: string
+    imageData: Uint8ClampedArray
+}
+
+const StreamlitImgLabel = (props: ComponentProps) => {
+    const [mode, setMode] = useState<string>("light")
+    const [labels, setLabels] = useState<string[]>([])
+    const [canvas, setCanvas] = useState(new fabric.Canvas(""))
+    const { canvasWidth, canvasHeight, imageData }: PythonArgs = props.args
+    const [newBBoxIndex, setNewBBoxIndex] = useState<number>(0)
+
+    /*
+     * Translate Python image data to a JavaScript Image
+     */
+    var invisCanvas = document.createElement("canvas")
+    var ctx = invisCanvas.getContext("2d")
+
+    invisCanvas.width = canvasWidth
+    invisCanvas.height = canvasHeight
+
+    // create imageData object
+    let dataUri: any
+    if (ctx) {
+        var idata = ctx.createImageData(canvasWidth, canvasHeight)
+
+        // set our buffer as source
+        idata.data.set(imageData)
+
+        // update canvas with new data
+        ctx.putImageData(idata, 0, 0)
+        dataUri = invisCanvas.toDataURL()
+    } else {
+        dataUri = ""
+    }
+
+    // Initialize canvas on mount and add a rectangle
+    useEffect(() => {
+        const { rects, boxColor }: PythonArgs = props.args
+        const canvasTmp = new fabric.Canvas("c", {
+            enableRetinaScaling: false,
+            backgroundImage: dataUri,
+            uniScaleTransform: true,
+        })
+
+        rects.forEach((rect) => {
+            const { top, left, width, height } = rect
+            canvasTmp.add(
+                new fabric.Rect({
+                    left,
+                    top,
+                    fill: "",
+                    width,
+                    height,
+                    objectCaching: true,
+                    stroke: boxColor,
+                    strokeWidth: 1,
+                    strokeUniform: true,
+                    hasRotatingPoint: false,
+                })
+            )
+        })
+        setLabels(rects.map((rect) => rect.label))
+
+        setCanvas(canvasTmp)
+        Streamlit.setFrameHeight()
+        // eslint-disable-next-line
+    }, [canvasHeight, canvasWidth, dataUri])
+
+    // Create defualt bounding box
+    const defaultBox = () => ({
+        left: canvasWidth * 0.15 + newBBoxIndex * 3,
+        top: canvasHeight * 0.15 + newBBoxIndex * 3,
+        width: canvasWidth * 0.2,
+        height: canvasHeight * 0.2,
+    })
+
+    // Add new bounding box to be image
+    const addBoxHandler = () => {
+        const box = defaultBox()
+        setNewBBoxIndex(newBBoxIndex + 1)
+        canvas.add(
+            new fabric.Rect({
+                ...box,
+                fill: "",
+                objectCaching: true,
+                stroke: props.args.boxColor,
+                strokeWidth: 1,
+                strokeUniform: true,
+                hasRotatingPoint: false,
+            })
+        )
+        sendCoordinates([...labels, ""])
+    }
+
+    // Remove the selected bounding box
+    const removeBoxHandler = () => {
+        const selectObject = canvas.getActiveObject()
+        const selectIndex = canvas.getObjects().indexOf(selectObject)
+        canvas.remove(selectObject)
+        sendCoordinates(labels.filter((label, i) => i !== selectIndex))
+    }
+
+    // Reset the bounding boxes
+    const resetHandler = () => {
+        clearHandler()
+        const { rects, boxColor }: PythonArgs = props.args
+        rects.forEach((rect) => {
+            const { top, left, width, height } = rect
+            canvas.add(
+                new fabric.Rect({
+                    left,
+                    top,
+                    fill: "",
+                    width,
+                    height,
+                    objectCaching: true,
+                    stroke: boxColor,
+                    strokeWidth: 1,
+                    strokeUniform: true,
+                    hasRotatingPoint: false,
+                })
+            )
+        })
+        sendCoordinates(labels)
+    }
+
+    // Remove all the bounding boxes
+    const clearHandler = () => {
+        setNewBBoxIndex(0)
+        canvas.getObjects().forEach((rect) => canvas.remove(rect))
+        sendCoordinates([])
+    }
+
+    // Send the coordinates of the rectangle back to streamlit.
+    const sendCoordinates = (returnLabels: string[]) => {
+        setLabels(returnLabels)
+        const rects = canvas.getObjects().map((rect, i) => ({
+            ...rect.getBoundingRect(),
+            label: returnLabels[i],
+        }))
+        Streamlit.setComponentValue({ rects })
+    }
+
+    // Update the bounding boxes when modified
+    useEffect(() => {
+        if (!canvas) {
+            return
+        }
+        const handleEvent = () => {
+            canvas.renderAll()
+            sendCoordinates(labels)
+        }
+
+        canvas.on("object:modified", handleEvent)
+        return () => {
+            canvas.off("object:modified")
+        }
+    })
+
+    // Adjust the theme according to the system
+    const onSelectMode = (mode: string) => {
+        setMode(mode)
+        if (mode === "dark") document.body.classList.add("dark-mode")
+        else document.body.classList.remove("dark-mode")
+    }
+
+    useEffect(() => {
+        // Add listener to update styles
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", (e) =>
+                onSelectMode(e.matches ? "dark" : "light")
+            )
+
+        // Setup dark/light mode for the first time
+        onSelectMode(
+            window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+        )
+
+        // Remove listener
+        return () => {
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .removeEventListener("change", () => {})
+        }
+    }, [])
+
+    return (
+        <>
+            <canvas
+                id="c"
+                className={mode === "dark" ? styles.dark : ""}
+                width={canvasWidth}
+                height={canvasHeight}
+            />
+            <div className={mode === "dark" ? styles.dark : ""}>
+                <button
+                    className={mode === "dark" ? styles.dark : ""}
+                    onClick={addBoxHandler}
+                >
+                    Add bounding box
+                </button>
+                <button
+                    className={mode === "dark" ? styles.dark : ""}
+                    onClick={removeBoxHandler}
+                >
+                    Remove select
+                </button>
+                <button
+                    className={mode === "dark" ? styles.dark : ""}
+                    onClick={resetHandler}
+                >
+                    Reset
+                </button>
+                <button
+                    className={mode === "dark" ? styles.dark : ""}
+                    onClick={clearHandler}
+                >
+                    Clear all
+                </button>
+            </div>
+        </>
+    )
+}
+
+export default withStreamlitConnection(StreamlitImgLabel)

Pages/streamlit_img_label/frontend/src/index.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import StreamlitImgLabel from "./StreamlitImgLabel"
+
+ReactDOM.render(
+  <React.StrictMode>
+    <StreamlitImgLabel />
+  </React.StrictMode>,
+  document.getElementById("root")
+)

Pages/streamlit_img_label/frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

Pages/streamlit_img_label/frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

Pages/streamlit_img_label/manage.py

@@ -0,0 +1,186 @@
+import os
+import re
+import numpy as np
+from PIL import Image
+from .annotation import output_xml, read_xml
+
+"""
+.. module:: streamlit_img_label
+   :synopsis: manage.
+.. moduleauthor:: Tianning Li <ltianningli@gmail.com>
+"""
+
+
+class ImageManager:
+    """ImageManager
+    Manage the image object.
+
+    Args:
+        filename(str): the image file.
+    """
+
+    def __init__(self, filename):
+        """initiate module"""
+        self._filename = filename
+        self._img = Image.open(filename)
+        self._rects = []
+        self._load_rects()
+        self._resized_ratio_w = 1
+        self._resized_ratio_h = 1
+
+    def _load_rects(self):
+        rects_xml = read_xml(self._filename)
+        if rects_xml:
+            self._rects = rects_xml
+
+    def get_img(self):
+        """get the image object
+
+        Returns:
+            img(PIL.Image): the image object.
+        """
+        return self._img
+
+    def get_rects(self):
+        """get the rects
+
+        Returns:
+            rects(list): the bounding boxes of the image.
+        """
+        return self._rects
+
+    def resizing_img(self, max_height=700, max_width=700):
+        """resizing the image by max_height and max_width.
+
+        Args:
+            max_height(int): the max_height of the frame.
+            max_width(int): the max_width of the frame.
+        Returns:
+            resized_img(PIL.Image): the resized image.
+        """
+        resized_img = self._img.copy()
+        if resized_img.height > max_height:
+            ratio = max_height / resized_img.height
+            resized_img = resized_img.resize(
+                (int(resized_img.width * ratio), int(resized_img.height * ratio))
+            )
+        if resized_img.width > max_width:
+            ratio = max_width / resized_img.width
+            resized_img = resized_img.resize(
+                (int(resized_img.width * ratio), int(resized_img.height * ratio))
+            )
+
+        self._resized_ratio_w = self._img.width / resized_img.width
+        self._resized_ratio_h = self._img.height / resized_img.height
+        return resized_img
+
+    def _resize_rect(self, rect):
+        resized_rect = {}
+        resized_rect["left"] = rect["left"] / self._resized_ratio_w
+        resized_rect["width"] = rect["width"] / self._resized_ratio_w
+        resized_rect["top"] = rect["top"] / self._resized_ratio_h
+        resized_rect["height"] = rect["height"] / self._resized_ratio_h
+        if "label" in rect:
+            resized_rect["label"] = rect["label"]
+        return resized_rect
+
+    def get_resized_rects(self):
+        """get resized the rects according to the resized image.
+
+        Returns:
+            resized_rects(list): the resized bounding boxes of the image.
+        """
+        return [self._resize_rect(rect) for rect in self._rects]
+
+    def _chop_box_img(self, rect):
+        rect["left"] = int(rect["left"] * self._resized_ratio_w)
+        rect["width"] = int(rect["width"] * self._resized_ratio_w)
+        rect["top"] = int(rect["top"] * self._resized_ratio_h)
+        rect["height"] = int(rect["height"] * self._resized_ratio_h)
+        left, top, width, height = (
+            rect["left"],
+            rect["top"],
+            rect["width"],
+            rect["height"],
+        )
+
+        raw_image = np.asarray(self._img).astype("uint8")
+        prev_img = np.zeros(raw_image.shape, dtype="uint8")
+        prev_img[top : top + height, left : left + width] = raw_image[
+            top : top + height, left : left + width
+        ]
+        prev_img = prev_img[top : top + height, left : left + width]
+        label = ""
+        if "label" in rect:
+            label = rect["label"]
+        return (Image.fromarray(prev_img), label)
+
+    def init_annotation(self, rects):
+        """init annotation for current rects.
+
+        Args:
+            rects(list): the bounding boxes of the image.
+        Returns:
+            prev_img(list): list of preview images with default label.
+        """
+        self._current_rects = rects
+        return [self._chop_box_img(rect) for rect in self._current_rects]
+
+    def set_annotation(self, index, label):
+        """set the label of the image.
+
+        Args:
+            index(int): the index of the list of bounding boxes of the image.
+            label(str): the label of the bounding box
+        """
+        self._current_rects[index]["label"] = label
+
+    def save_annotation(self):
+        """output the xml annotation file."""
+        output_xml(self._filename, self._img, self._current_rects)
+
+
+class ImageDirManager:
+    def __init__(self, dir_name):
+        self._dir_name = dir_name
+        self._files = []
+        self._annotations_files = []
+
+    def get_all_files(self, allow_types=["png", "jpg", "jpeg"]):
+        allow_types += [i.upper() for i in allow_types]
+        mask = ".*\.[" + "|".join(allow_types) + "]"
+        self._files = [
+            file for file in os.listdir(self._dir_name) if re.match(mask, file)
+        ]
+        return self._files
+
+    def get_exist_annotation_files(self):
+        self._annotations_files = [
+            file for file in os.listdir(self._dir_name) if re.match(".*.xml", file)
+        ]
+        return self._annotations_files
+
+    def set_all_files(self, files):
+        self._files = files
+
+    def set_annotation_files(self, files):
+        self._annotations_files = files
+
+    def get_image(self, index):
+        return self._files[index]
+
+    def _get_next_image_helper(self, index):
+        while index < len(self._files) - 1:
+            index += 1
+            image_file = self._files[index]
+            image_file_name = image_file.split(".")[0]
+            if f"{image_file_name}.xml" not in self._annotations_files:
+                return index
+        return None
+
+    def get_next_annotation_image(self, index):
+        image_index = self._get_next_image_helper(index)
+        if image_index:
+            return image_index
+        if not image_index and len(self._files) != len(self._annotations_files):
+            return self._get_next_image_helper(0)

app.py

@@ -1,7 +1,8 @@
 import streamlit as st
-from App.createVisual import CREATEVISUALS
-from App.AboutMe import ABOUTUS
-from App.bgImages import BGIMAGES
+from Pages.createVisual import CREATEVISUALS
+from Pages.AboutMe import ABOUTUS
+from Pages.bgImages import BGIMAGES
+from Pages.createVideo import CREATEGIF
 
 
 st.set_page_config(
@@ -14,13 +15,15 @@ st.set_page_config(
 
 def MAIN(): 
     st.sidebar.title('LumiereIQ')
-    app = st.sidebar.selectbox('', ['Create Visuals','Background Images', 'About Me'])
+    app = st.sidebar.selectbox('', ['Create Visuals','Background Images','Create Video', 'About Me'])
     if app == "Create Visuals":
         CREATEVISUALS()
     elif app == "About Me":
         ABOUTUS()
     elif app == "Background Images":
         BGIMAGES()
+    elif app == "Create Video":
+        CREATEGIF()
 
           
 MAIN()

requirements.txt

@@ -1,3 +1,9 @@
 streamlit
 diffusers
-torch
+torch
+transformers
+git+https://github.com/facebookresearch/segment-anything.git
+pascal_voc_writer
+roboflow 
+dataclasses-json 
+supervision

setup.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# Create the directory for weights if it doesn't exist
+mkdir -p weights
+
+# Download the file
+wget -q https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth -P weights
+
+