Cant render the foto

[codegenerator01]

Hello!

Firstly, thank you for making this!

I am working with your code but the images are not showing.

can you help me with this issue?

this is my code:

import os
import streamlit as st
from streamlit_img_label import st_img_label
from streamlit_img_label.manage import ImageManager, ImageDirManager
from glob import glob
import pandas as pd
from streamlit_image_annotation import detection
import json

label_list = ['Bottle cap', 'human', 'dog', 'penguin', 'framingo', 'teddy bear']
image_path_list = glob('img_dir/*.jpg')
json_files = glob('img_dir/*.json')  # Update with the actual path to your JSON files

def load_annotation_file(annotation_file_path):
    with open(annotation_file_path, 'r') as file:
        annotation_data = json.load(file)
        annotation_dataXYXY = annotation_data["json_data"][0]["xyxyn"]
    return annotation_dataXYXY

def save_annotation_file(annotation_file_path, annotation_data):
    with open(annotation_file_path, 'w') as file:
        json.dump(annotation_data, file)

def main():
    # File Selection
    selected_image_path = st.selectbox("Select Image", image_path_list)

    # JSON File Selection
    selected_json_file = st.selectbox("Select JSON File", json_files)

    with open(selected_json_file, 'r') as file:
        annotation_data = json.load(file)

    X1 = annotation_data["json_data"][0]["xyxyn"][0][0]
    Y1 = annotation_data["json_data"][0]["xyxyn"][0][1]
    X2 = annotation_data["json_data"][0]["xyxyn"][0][2]
    Y2 = annotation_data["json_data"][0]["xyxyn"][0][3]
    hoogte = annotation_data["json_data"][0]["image_shape"][0]
    breedte = annotation_data["json_data"][0]["image_shape"][1]
    class_label = annotation_data["json_data"][0]["class_label"]
    #convert to coords
    X1_B = X1 * breedte
    Y1_H = Y1 * hoogte
    X2_B = X2 * breedte
    Y2_H = Y2 * hoogte

    if selected_json_file is not None:
        annotation_data = load_annotation_file(selected_json_file)

    if 'result_dict_det' not in st.session_state:
        result_dict = {}
        for img in image_path_list:
            result_dict[img] = {'bboxes': [[X1_B,Y1_H,X2_B,Y2_H]], 'labels': [0]}
        st.session_state['result_dict_det'] = result_dict.copy()

    new_labels = detection(image_path=selected_image_path,
                           bboxes=st.session_state['result_dict_det'][selected_image_path]['bboxes'],
                           labels=st.session_state['result_dict_det'][selected_image_path]['labels'],
                           label_list=label_list, key=selected_image_path + '_det')

    if new_labels is not None:
        st.session_state['result_dict_det'][selected_image_path]['bboxes'] = [v['bbox'] for v in new_labels]
        st.session_state['result_dict_det'][selected_image_path]['labels'] = [v['label_id'] for v in new_labels]

    # Save edited annotations
    if st.button("Save Annotations"):
        if annotation_data is not None:
            annotation_data["image_path"] = selected_image_path
            annotation_data["json_data"][0]["xyxyn"] = new_labels[0]["bbox"]  # Assuming there's only one bbox
            save_annotation_file("edited_annotations.json", annotation_data)

    st.json(st.session_state['result_dict_det'])

if __name__ == "__main__":
    main()

[hirune924]

Thank you for using this component! There may be an issue with the browser you are using or the processing of JSON, perhaps. Does the demo code in the example folder work?

[codegenerator01]

Hello. thank you for your response.

I dont think its a browser problem, i use Chrome and a friend uses edge both dont work.

the demo code doesnt work either..... i can use the tool but it doesnt show a image

[hirune924]

There may be issues if your browser has features like ad blocking. I use Brave, and I've experienced that issue. Can you confirm if the demo site works correctly? If it does, the problem might not be with the browser. You can check it here: https://st-image-annotation.streamlit.app/

[codegenerator01]

I think the demo works?

[hirune924]

It seems to work correctly. Now, to verify the program on my end, could you please provide a sample of the JSON you are using?

[codegenerator01]

{
    "image_path": "/img_dir/output_1.png",
    "json_data": [
        {
            "xyxyn": [
                [
                    0.7392697334289551,
                    0.07489404082298279,
                    0.9371601939201355,
                    0.45377033948898315
                ]
            ],
            "conf": [
                0.7854285836219788
            ],
            "lat": "51.031.052.91",
            "long": "4.033.045.57",
            "image_name": "IMG_0305.jpeg",
            "image_shape": [
                4032,
                3024,
                3
            ],
            "class_label": [
                "Bottle cap"

            ]
        }
    ]
}

im trying to load in this json file and see the if we could add or remove certain annotations, this json file is made using a yolo v8 Network. To load in the json file and the picture is use this code:

import os
import streamlit as st
from streamlit_img_label import st_img_label
from streamlit_img_label.manage import ImageManager, ImageDirManager
from glob import glob
import pandas as pd
from streamlit_image_annotation import detection
import json

label_list = ['Bottle cap', 'human', 'dog', 'penguin', 'framingo', 'teddy bear']
image_path_list = glob('img_dir/*.jpg')
json_files = glob('img_dir/*.json')  # Update with the actual path to your JSON files

def load_annotation_file(annotation_file_path):
    with open(annotation_file_path, 'r') as file:
        annotation_data = json.load(file)
        annotation_dataXYXY = annotation_data["json_data"][0]["xyxyn"]
    return annotation_dataXYXY

def save_annotation_file(annotation_file_path, annotation_data):
    with open(annotation_file_path, 'w') as file:
        json.dump(annotation_data, file)

def main():
    # File Selection
    selected_image_path = st.selectbox("Select Image", image_path_list)

    # JSON File Selection
    selected_json_file = st.selectbox("Select JSON File", json_files)

    with open(selected_json_file, 'r') as file:
        annotation_data = json.load(file)

    X1 = annotation_data["json_data"][0]["xyxyn"][0][0]
    Y1 = annotation_data["json_data"][0]["xyxyn"][0][1]
    X2 = annotation_data["json_data"][0]["xyxyn"][0][2]
    Y2 = annotation_data["json_data"][0]["xyxyn"][0][3]
    hoogte = annotation_data["json_data"][0]["image_shape"][0]
    breedte = annotation_data["json_data"][0]["image_shape"][1]
    class_label = annotation_data["json_data"][0]["class_label"]
    #convert to coords
    X1_B = X1 * breedte
    Y1_H = Y1 * hoogte
    X2_B = X2 * breedte
    Y2_H = Y2 * hoogte

    if selected_json_file is not None:
        annotation_data = load_annotation_file(selected_json_file)

    if 'result_dict_det' not in st.session_state:
        result_dict = {}
        for img in image_path_list:
            result_dict[img] = {'bboxes': [[X1_B,Y1_H,X2_B,Y2_H]], 'labels': [0]}
        st.session_state['result_dict_det'] = result_dict.copy()

    new_labels = detection(image_path=selected_image_path,
                           bboxes=st.session_state['result_dict_det'][selected_image_path]['bboxes'],
                           labels=st.session_state['result_dict_det'][selected_image_path]['labels'],
                           label_list=label_list, key=selected_image_path + '_det')

    if new_labels is not None:
        st.session_state['result_dict_det'][selected_image_path]['bboxes'] = [v['bbox'] for v in new_labels]
        st.session_state['result_dict_det'][selected_image_path]['labels'] = [v['label_id'] for v in new_labels]

    # Save edited annotations
    if st.button("Save Annotations"):
        if annotation_data is not None:
            annotation_data["image_path"] = selected_image_path
            annotation_data["json_data"][0]["xyxyn"] = new_labels[0]["bbox"]  # Assuming there's only one bbox
            save_annotation_file("edited_annotations.json", annotation_data)

    st.json(st.session_state['result_dict_det'])

if __name__ == "__main__":
    main()

Thank you for your time!

[hirune924]

It works in my environment. Could you please provide a list of installed libraries in your environment using commands like "pip freeze"?

[codegenerator01]

altair==5.2.0 asttokens==2.4.1 attrs==23.1.0 bcrypt==4.1.1 beautifulsoup4==4.12.2 blinker==1.7.0 branca==0.7.0 cachetools==5.3.2 certifi==2023.11.17 charset-normalizer==3.3.2 click==8.1.7 colorama==0.4.6 contourpy==1.2.0 cycler==0.12.1 decorator==5.1.1 entrypoints==0.4 executing==2.0.1 extra-streamlit-components==0.1.60 Faker==20.1.0 favicon==0.7.0 filelock==3.13.1 folium==0.15.1 fonttools==4.46.0 fsspec==2023.12.1 gitdb==4.0.11 GitPython==3.1.40 htbuilder==0.6.2 idna==3.6 importlib-metadata==6.11.0 ipython==8.18.1 javascript==1!1.1.1 jedi==0.19.1 Jinja2==3.1.2 jsonschema==4.20.0 jsonschema-specifications==2023.11.2 kiwisolver==1.4.5 lxml==4.9.3 Markdown==3.5.1 markdown-it-py==3.0.0 markdownlit==0.0.7 MarkupSafe==2.1.3 matplotlib==3.8.2 matplotlib-inline==0.1.6 mdurl==0.1.2 mkl-fft @ file:///C:/b/abs_19i1y8ykas/croot/mkl_fft_1695058226480/work mkl-random @ file:///C:/b/abs_edwkj1_o69/croot/mkl_random_1695059866750/work mkl-service==2.4.0 more-itertools==10.1.0 mpmath==1.3.0 networkx==3.2.1 numpy @ file:///C:/b/abs_7267ja_mqz/croot/numpy_and_numpy_base_1701295083047/work/dist/numpy-1.26.2-cp311-cp311-win_amd64.whl#sha256=f4e43aff0bd2ec1e69abffbe07459b4dcf6ae207942d293dd3c14112aa00d380 opencv-python==4.8.1.78 optional-django==0.3.0 packaging==23.2 pandas==2.1.4 parso==0.8.3 pascal-voc-writer==0.1.4 Pillow==10.1.0 prompt-toolkit==3.0.43 protobuf==4.25.1 psutil==5.9.6 pure-eval==0.2.2 py-cpuinfo==9.0.0 pyarrow==14.0.1 pydeck==0.8.1b0 Pygments==2.17.2 PyJWT==2.8.0 pymdown-extensions==10.5 pyparsing==3.1.1 python-dateutil==2.8.2 pytz==2023.3.post1 PyYAML==6.0.1 react==4.3.0 referencing==0.32.0 requests==2.31.0 rich==13.7.0 rpds-py==0.13.2 scipy==1.11.4 seaborn==0.13.0 six==1.16.0 smmap==5.0.1 soupsieve==2.5 st-annotated-text==4.0.1 stack-data==0.6.3 streamlit==1.29.0 streamlit-authenticator==0.2.3 streamlit-camera-input-live==0.2.0 streamlit-card==1.0.0 streamlit-embedcode==0.1.2 streamlit-extras==0.3.5 streamlit-faker==0.0.3 streamlit-folium==0.17.3 streamlit-image-annotation==0.3.2 streamlit-image-coordinates==0.1.6 streamlit-img-label==0.1.1 streamlit-keyup==0.2.2 streamlit-lottie==0.0.5 streamlit-toggle-switch==1.0.2 streamlit-vertical-slider==1.0.2 sympy==1.12 tenacity==8.2.3 thop==0.1.1.post2209072238 toml==0.10.2 toolz==0.12.0 torch==2.1.1 torchvision==0.16.1 tornado==6.4 tqdm==4.66.1 traitlets==5.14.0 typing_extensions==4.9.0 tzdata==2023.3 tzlocal==5.2 ultralytics==8.0.226 urllib3==2.1.0 validators==0.22.0 watchdog==3.0.0 wcwidth==0.2.12 xyzservices==2023.10.1 zipp==3.17.0

[hirune924]

Hmm, I tried matching the versions, but I couldn't occur the issue in my environment. If the demo code isn't working either, it seems there might be an issue with your environment. I'm sorry, I'm unable to investigate the cause.since I can't occur the issue in my environment......

[codegenerator01]

hmm wierd yes, what are the packages that i need to install? Or what are the steps that i need to do to install the right packages?

[codegenerator01]

i remade my env and i got this, have you seen this error before?

[codegenerator01]

could its a front end problem?

[hirune924]

Now, I think this issue may be related to the images you are using….?

[codegenerator01]

its the same if i use your pinguin image

[hirune924]

So, please try with smaller bbox size.

[codegenerator01]

this is what happens when I make the bbox smaller.

[cnboonhan]

I encounter a similar issue. One possible root cause could be some sort of path issue when using this library in a page, vs in the main.

When running the demo in main.py, we load images from the following url:

however, if we run in from a page, we load a different path:

note the additional "image_processing" string. This is exactly my page name, "image_processing.py". Also note the the malformed url that seems to be missing a '/'

[XjSv]

I am having the same issue but I don't know if the issue is related to Streamlit-Image-Annotation or Streamlit itself. It seems like this is a limitation with Streamlit based on a couple of issues already opened in https://discuss.streamlit.io.

Primarily:

• https://discuss.streamlit.io/t/manually-adding-an-image-to-media-folder-getting-web-path-to-files/35580
• https://discuss.streamlit.io/t/how-do-i-use-a-background-image-on-streamlit/5067/2

Streamlit does have the ability to display static images but I don't think its compatible with Streamlit-Image-Annotation.

[Uncle-Yuanl]

Hi, I encounter a similar issue and finally fix it. In my case, the easiest solution is to make sure that .py file and image folder are in the root path of your project. Because the custom component made by this package will convert the image data into url and save the raw bytes data into media source then request it like @cnboonhan said. So I check the sources of webapp.Only the .py file in the root path, I get the media folder otherwise only static folder. Success: Fail: "draw_bbox" was the name of my .py file, so I think it's maybe a parse error. I didn't check the full source code. But hope it's helpful.

[hirune924]

I've confirmed that this issue occurs when using this library in pages. However, resolving this issue is tricky. Since it works fine in simple use cases, I'm sorry, but there are currently no plans to development for it....(Pull requests are welcome.)