Why the coco-annotator I installed doesn't have delete option?

[Jihnjockey]

I installed manually the coco-annotator in the Ubuntu server of my company. Because it can't connect to external network(including docker website), so I need to install docker(v20.10.7), docker compose(v2.22.0), and the images(required in docker-compose.yml) manually. But when I type docker-compose up, the website has some error. I can't delete the dataset or the categories I created. And I can't set the key point class when I tried to create a pose category. How can I fix it?

1.when I was creating pose category, it showed like this:

But the expected result should be like this:

That is to say, there is no "+" button at the right corner of the 'keypoint' label.

2.when I want to delete categories or datasets,it showed like this:

But the expected result should be like this:

That is to say, there is no "..." button at the right corner of every categories label, which has the delete option in it.

[robbiewongBD]

solved now?

[SixK]

Did you had a look at your Web Navigator javascript console ?
Is there some javascript errors related to categories page (or any action) ?

[wusaisa]

Did you had a look at your Web Navigator javascript console ? Is there some javascript errors related to categories page (or any action) ?

I meet the same problem, and this is my Web Navigator javascript console. How can i fix it?

[SixK]

If you see continuous errors about socketio connections and disconnections, then the backend (or maybe another component) is probably down. Look at docker-compose logs in terminal. You may have a python error in annotator_webserver container.

When everything is running, you should see something like that with "docker ps -a" command :
docker ps -a

CONTAINER ID   IMAGE                           COMMAND                  CREATED         STATUS                       PORTS                                                                                       NAMES
744d7194e212   coco-annotator_work_frontend    "docker-entrypoint.s…"   16 hours ago    Up 15 minutes                0.0.0.0:8080->8080/tcp, :::8080->8080/tcp                                                   annotator_client
f86f7fbffc25   coco-annotator_work_webserver   "/bin/sh -c 'gunicor…"   16 hours ago    Up 15 minutes                0.0.0.0:5000->5000/tcp, :::5000->5000/tcp                                                   annotator_webserver
a5ff78ac3204   coco-annotator_work_workers     "/bin/sh -c 'celery …"   16 hours ago    Up 15 minutes                0.0.0.0:5555->5555/tcp, :::5555->5555/tcp                                                   annotator_workers
c8ec8c8cae9c   mongo:4.0                       "docker-entrypoint.s…"   2 days ago      Up 15 minutes                0.0.0.0:27017->27017/tcp, :::27017->27017/tcp                                               annotator_mongodb
e290fae62847   rabbitmq:3                      "docker-entrypoint.s…"   3 days ago      Up 15 minutes                4369/tcp, 5671/tcp, 15691-15692/tcp, 25672/tcp, 0.0.0.0:5672->5672/tcp, :::5672->5672/tcp   annotator_message_q

If your annotator_webserver container is down, you can try to run it in a separated terminal using this command :
docker-compose up annotator_webserver

If this container crash again, it should be easier to find python errors

[Jihnjockey]

If you see continuous errors about socketio connections and disconnections, then the backend (or maybe another component) is probably down. Look at docker-compose logs in terminal. You may have a python error in annotator_webserver container.

When everything is running, you should see something like that with "docker ps -a" command : docker ps -a

CONTAINER ID   IMAGE                           COMMAND                  CREATED         STATUS                       PORTS                                                                                       NAMES
744d7194e212   coco-annotator_work_frontend    "docker-entrypoint.s…"   16 hours ago    Up 15 minutes                0.0.0.0:8080->8080/tcp, :::8080->8080/tcp                                                   annotator_client
f86f7fbffc25   coco-annotator_work_webserver   "/bin/sh -c 'gunicor…"   16 hours ago    Up 15 minutes                0.0.0.0:5000->5000/tcp, :::5000->5000/tcp                                                   annotator_webserver
a5ff78ac3204   coco-annotator_work_workers     "/bin/sh -c 'celery …"   16 hours ago    Up 15 minutes                0.0.0.0:5555->5555/tcp, :::5555->5555/tcp                                                   annotator_workers
c8ec8c8cae9c   mongo:4.0                       "docker-entrypoint.s…"   2 days ago      Up 15 minutes                0.0.0.0:27017->27017/tcp, :::27017->27017/tcp                                               annotator_mongodb
e290fae62847   rabbitmq:3                      "docker-entrypoint.s…"   3 days ago      Up 15 minutes                4369/tcp, 5671/tcp, 15691-15692/tcp, 25672/tcp, 0.0.0.0:5672->5672/tcp, :::5672->5672/tcp   annotator_message_q

If your annotator_webserver container is down, you can try to run it in a separated terminal using this command : docker-compose up annotator_webserver

If this container crash again, it should be easier to find python errors

why your images list are different from the Docker-compose.yaml required? For example: in the yaml, it's jsbroks/coco-annotator: workers-stable, but yours is coco-annotator_work_workers. And you didn't install the python-env image, which is mentioned in the Docker-compose.yml.

[Jihnjockey]

Did you had a look at your Web Navigator javascript console ? Is there some javascript errors related to categories page (or any action) ?

Sorry, but I don't know anything about javascript. Could you please help me to find out the reason? By the way, here's my Web Navigator javascript console:

[SixK]

My docker images are different from docker-compose.yml, since I was running in dev mode using this command line "docker-compose -f ./docker-compose.dev.yml up". And since I have totally rewritten coco-annotator sources, things on my computer may not be exactly the same as with official sources.

The important thing is when using "docker ps -a" command, you should see the 5 containers UP (mongo db, rabbit mqtt, backend, frontend and worker). If one of this containers is down then you have a problem.

HTTP 401 error is not a problem if it appear before login/password otherwise you have a weird authentication/authorization problem.

I tried to run from official coco-annotator images, also tried to stop backend to simulate a crash, but I can't reproduce your problems.

Do you connect on localhost to the application or remotely ?
Did you add something like a nginx or apache server in front of the application ?

[Jihnjockey]

My docker images are different from docker-compose.yml, since I was running in dev mode using this command line "docker-compose -f ./docker-compose.dev.yml up". And since I have totally rewritten coco-annotator sources, things on my computer may not be exactly the same as with official sources.

The important thing is when using "docker ps -a" command, you should see the 5 containers UP (mongo db, rabbit mqtt, backend, frontend and worker). If one of this containers is down then you have a problem.

HTTP 401 error is not a problem if it appear before login/password otherwise you have a weird authentication/authorization problem.

I tried to run from official coco-annotator images, also tried to stop backend to simulate a crash, but I can't reproduce your problems.

Do you connect on localhost to the application or remotely ? Did you add something like a nginx or apache server in front of the application ?

you said 5 containers, but the Docker-compose.yml only mentioned 4 container, the relating images are:rabbitmq:3, mongo:4.0, jsbroks/coco-annotator:webserver-stable， jsbroks/coco-annotator:workers-stable. Does I have to use "docker-compose -f ./docker-compose.dev.yml up"?

By the way, I connect to the sever remotely, I typed the "10.174.97.200:5000/" the browser of the jump server. "10.174.97.200" is the IP of my Ubuntu server, I installed the docker and docker-compose here.

I don't know if I have added nginx or apache server in front of the application. How could I confirm this matter?

[SixK]

Ok, sorry, my bad.
As I was running with docker-compose.dev.yml, I have an extra container because frontend is run appart with vue-cli server (or vite serve in my case).
So in your case, frontend is exposed by backend container, so only 4 container needed.

Can you try to connect locally directly on the server connecting to http://localhost:5000 instead ?
I don't remember if connecting remotely is working with official docker images?

[Jihnjockey]

Ok, sorry, my bad. As I was running with docker-compose.dev.yml, I have an extra container because frontend is run appart with vue-cli server (or vite serve in my case). So in your case, frontend is exposed by backend container, so only 4 container needed.

Can you try to connect locally directly on the server connecting to http://localhost:5000 instead ? I don't remember if connecting remotely is working with official docker images?

If I connecting to http://localhost:5000/, it will mean that I need to install a chrome browser in the ubuntu server. But the ubuntu
server cannot connect to external internet, so I have to install it manually by a offline installation package. But I haven't found a perfect offline installation package. When I try to install the package I downloaded, it raised errors that I lacked the dependencies, which is too many for me to solve.

[SixK]

OK, I think I've found what's wrong.
Coco-annotator is looking for font-awesome.min.css file on cdns.cloudflare.com.

In your case, without intenet on your server you can proceed like this:
Start docker images jsbroks/coco-annotator:

docker images
jsbroks/coco-annotator          webserver-stable   e9d03b0095e4   3 years ago      2.4GB

guest@fartway:/tmp/coco-annotator$ docker run -it e9d03b0095e4 bash
root@54aaf2906d6a:/workspace# grep -r font-awesome

download on another computer the file https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
and copy it on your server.

Identify your container:

docker ps -a
CONTAINER ID   IMAGE                           COMMAND                  CREATED          STATUS          PORTS                                                                                       NAMES
54aaf2906d6a   e9d03b0095e4                    "bash"                   5 minutes ago    Up 5 minutes    5000/tcp                                                                                    sad_dubinsky

Extract index.html file :

docker cp 54aaf2906d6a:/workspace/dist/index.html /tmp/
Successfully copied 3.07kB to /tmp/

edit index.html and replace https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css by /css/font-awesome.min.css

Inject css file and modified index.html file in docker container:

docker cp font-awesome.min.css 54aaf2906d6a:/workspace/dist/css/
docker cp index.html 54aaf2906d6a:/workspace/dist/

commit new image:
docker commit 54aaf2906d6a
or
docker commit 54aaf2906d6a -t jsbroks/coco-annotator:webserver-stable

then you can close and delete the container you mounted:
docker stop 54aaf2906d6a
docker rm 54aaf2906d6a

restart coco-annotator with docker-compose and it should be ok then.

(note, I don't have tested the procedure, so you may have to adapt some parts...)

[Jihnjockey]

OK, I think I've found what's wrong. Coco-annotator is looking for font-awesome.min.css file on cdns.cloudflare.com.

In your case, without intenet on your server you can proceed like this: Start docker images jsbroks/coco-annotator:

docker images
jsbroks/coco-annotator          webserver-stable   e9d03b0095e4   3 years ago      2.4GB

guest@fartway:/tmp/coco-annotator$ docker run -it e9d03b0095e4 bash
root@54aaf2906d6a:/workspace# grep -r font-awesome

download on another computer the file https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css and copy it on your server.

Identify your container:

docker ps -a
CONTAINER ID   IMAGE                           COMMAND                  CREATED          STATUS          PORTS                                                                                       NAMES
54aaf2906d6a   e9d03b0095e4                    "bash"                   5 minutes ago    Up 5 minutes    5000/tcp                                                                                    sad_dubinsky

Extract index.html file :

docker cp 54aaf2906d6a:/workspace/dist/index.html /tmp/
Successfully copied 3.07kB to /tmp/

edit index.html and replace https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css by /css/font-awesome.min.css

Inject css file and modified index.html file in docker container:

docker cp font-awesome.min.css 54aaf2906d6a:/workspace/dist/css/
docker cp index.html 54aaf2906d6a:/workspace/dist/

commit new image: docker commit 54aaf2906d6a or docker commit 54aaf2906d6a -t jsbroks/coco-annotator:webserver-stable

then you can close and delete the container you mounted: docker stop 54aaf2906d6a docker rm 54aaf2906d6a

restart coco-annotator with docker-compose and it should be ok then.

(note, I don't have tested the procedure, so you may have to adapt some parts...)

I tried as your way. But it didn't have any change. I think this may because of these reasons:

1. I tried to down load the https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css file, but when I click it, it showed like this:
   
   so I copied all the words into a txt file and change the file name to "ont-awesome.min.css". May be I can't do like this? May be I need to find a workable download website?
2. when I changed the relevant file and committed the image, it showed like this:
   
   Have I committed the image successfully? If so, why the image "webserver-stable" was created "3 years ago"?

[Jihnjockey]

OK, I think I've found what's wrong. Coco-annotator is looking for font-awesome.min.css file on cdns.cloudflare.com.
In your case, without intenet on your server you can proceed like this: Start docker images jsbroks/coco-annotator:

docker images
jsbroks/coco-annotator          webserver-stable   e9d03b0095e4   3 years ago      2.4GB

guest@fartway:/tmp/coco-annotator$ docker run -it e9d03b0095e4 bash
root@54aaf2906d6a:/workspace# grep -r font-awesome

download on another computer the file https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css and copy it on your server.
Identify your container:

docker ps -a
CONTAINER ID   IMAGE                           COMMAND                  CREATED          STATUS          PORTS                                                                                       NAMES
54aaf2906d6a   e9d03b0095e4                    "bash"                   5 minutes ago    Up 5 minutes    5000/tcp                                                                                    sad_dubinsky

Extract index.html file :

docker cp 54aaf2906d6a:/workspace/dist/index.html /tmp/
Successfully copied 3.07kB to /tmp/

edit index.html and replace https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css by /css/font-awesome.min.css
Inject css file and modified index.html file in docker container:

docker cp font-awesome.min.css 54aaf2906d6a:/workspace/dist/css/
docker cp index.html 54aaf2906d6a:/workspace/dist/

commit new image: docker commit 54aaf2906d6a or docker commit 54aaf2906d6a -t jsbroks/coco-annotator:webserver-stable
then you can close and delete the container you mounted: docker stop 54aaf2906d6a docker rm 54aaf2906d6a
restart coco-annotator with docker-compose and it should be ok then.
(note, I don't have tested the procedure, so you may have to adapt some parts...)

I tried as your way. But it didn't have any change. I think this may because of these reasons:

1. I tried to down load the https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css file, but when I click it, it showed like this:
   
   so I copied all the words into a txt file and change the file name to "ont-awesome.min.css". May be I can't do like this? May be I need to find a workable download website?
2. when I changed the relevant file and committed the image, it showed like this:
   
   Have I committed the image successfully? If so, why the image "webserver-stable" was created "3 years ago"?

Let me add someting:
I changed the command when committing images: "docker commit 11bfc788063d jsbroks/coco-annotator:webserver-stable " i.e. I deleted "-t". But after I use "docker-compose up" , as soon as I log in, it flashes back. And the console showed like this:

May be I should download the "font-awesome.min.css" in a right way?

[SixK]

Ok docker commit with option -t does not exists (-t is not necessary in fact)
AMQP heartbeat error is not really a problem, I think I have the same error

Now you have to understand why annotator_webclient always exit with code 0 ? (code 0 usually mean end with no error ...)

Downloading font-awesome with a tool like curl or wget is probably preferable to avoid any eventual Browser modifications.

Also verify in container that font-awesome and modifications of index.html are present (you can do a "docker exec -it container_id bash" to enter the running container.

In your web browser you can also have a look at Debug tab to see files used/opened.

[Jihnjockey]

Inject css file and modified index.html file in docker container:

I'm sorry but, I tried to download the font-awesome.min.css by using a tool, copied it to webserver image and committed again. But when I tried to open the "http://10.174.97.217:5000/" on my browser, the website can't open.

Maybe we are looking for the wrong problem?

[SixK]

I followed the instructions I gave you and I have the same behavior than you.
--> annotator_webclient exited with code 0
I have to understand what's wrong.

[SixK]

OK, fixed, and tested this time :)

My procedure was nearly good, but you have to work on container mounted by docker-compose.
If running image with "docker run -it jsbroks/coco-annotator:webserver-stable bash" then commit will save image with default command as "bash".
So when mounting new image with docker-compose, it run bash and exit with no error --> exit 0

OK now, 2 ways to save the situation.
Reload original image or find original image and tag it with the right name again.
In my case:

docker images
jsbroks/coco-annotator          <none>             e9d03b0095e4   3 years ago      2.4GB

then:
docker tag e9d03b0095e4 jsbroks/coco-annotator:webserver-stable

now run server:
docker-compose up

find container id using:
docker ps|grep annotator_webclient

download all font-awesome files(I added fonts to not have weird chars instead of + button):

curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css -o font-awesome.min.css
mkdir fonts
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.eot?v=4.7.0 -o fonts/fontawesome-webfont.eot
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.woff2?v=4.7.0 -o fonts/fontawesome-webfont.woff2
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.woff?v=4.7.0 -o fonts/fontawesome-webfont.woff
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.tff?v=4.7.0 -o fonts/fontawesome-webfont.tff
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.svg?v=4.7.0 -o fonts/fontawesome-webfont.svg

extract index.html
docker cp c10df4e6938b:/workspace/dist/index.html /tmp/

edit index.html and replace https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css by /css/font-awesome.min.css

copy files to container

docker cp ./fonts c10df4e6938b:/workspace/dist/fonts
docker cp ./font-awesome.min.css c10df4e6938b:/workspace/dist/css
docker cp ./index.html c10df4e6938b:/workspace/dist/

Note you can already verify modifications refreshing your browser here.

commit container

docker commit c10df4e6938b jsbroks/coco-annotator:webserver-stable

Now restart docker-compose and it should be OK (at least ! :) )

[Jihnjockey]

OK, fixed, and tested this time :)

My procedure was nearly good, but you have to work on container mounted by docker-compose. If running image with "docker run -it jsbroks/coco-annotator:webserver-stable bash" then commit will save image with default command as "bash". So when mounting new image with docker-compose, it run bash and exit with no error --> exit 0

OK now, 2 ways to save the situation. Reload original image or find original image and tag it with the right name again. In my case:

docker images
jsbroks/coco-annotator          <none>             e9d03b0095e4   3 years ago      2.4GB

then: docker tag e9d03b0095e4 jsbroks/coco-annotator:webserver-stable

now run server: docker-compose up

find container id using: docker ps|grep annotator_webclient

download all font-awesome files(I added fonts to not have weird chars instead of + button):

curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css -o font-awesome.min.css
mkdir fonts
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.eot?v=4.7.0 -o fonts/fontawesome-webfont.eot
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.woff2?v=4.7.0 -o fonts/fontawesome-webfont.woff2
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.woff?v=4.7.0 -o fonts/fontawesome-webfont.woff
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.tff?v=4.7.0 -o fonts/fontawesome-webfont.tff
curl https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/../fonts/fontawesome-webfont.svg?v=4.7.0 -o fonts/fontawesome-webfont.svg

extract index.html docker cp c10df4e6938b:/workspace/dist/index.html /tmp/

edit index.html and replace https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css by /css/font-awesome.min.css

copy files to container

docker cp ./fonts c10df4e6938b:/workspace/dist/fonts
docker cp ./font-awesome.min.css c10df4e6938b:/workspace/dist/css
docker cp ./index.html c10df4e6938b:/workspace/dist/

Note you can already verify modifications refreshing your browser here.

commit container

docker commit c10df4e6938b jsbroks/coco-annotator:webserver-stable

Now restart docker-compose and it should be OK (at least ! :) )

I did as you asked, the website didn't flash back. But it still didn't have the button, which is my original problem. It seems that this method didn't work.

Maybe we should find something wrong in other aspects.

[SixK]

No, It should be ok now.
I tested it again using my modified image and removing my network cable,
and it works.

start application with docker-compose up
connect in annotator_webclient container and verify added and modified files are present.

You should have this content:

root@c10df4e6938b:/workspace/dist# find
.
./js
./js/chunk-vendors.1277c01d.js.map
./js/app.6a177efd.js.map
./js/chunk-vendors.1277c01d.js
./js/app.6a177efd.js
./img
./img/no-image.a37b37d9.png
./img/404-image.36797a63.png
./index.html
./css
./css/app.7bd0b7a4.css
./css/chunk-vendors.9dfc9b77.css
./css/font-awesome.min.css
./favicon.ico
./fonts
./fonts/fontawesome-webfont.eot
./fonts/fontawesome-webfont.tff
./fonts/fontawesome-webfont.svg
./fonts/fontawesome-webfont.woff
./fonts/fontawesome-webfont.woff2

and index.html should be like this (I had to use an html pretty formatter to make this file readable in github):

root@c10df4e6938b:/workspace/dist# cat ./index.html 
<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <link rel=stylesheet href=/css/font-awesome.min.css>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>COCO Annotator</title>
    <link href=/css/app.7bd0b7a4.css rel=preload as=style>
    <link href=/css/chunk-vendors.9dfc9b77.css rel=preload as=style>
    <link href=/js/app.6a177efd.js rel=preload as=script>
    <link href=/js/chunk-vendors.1277c01d.js rel=preload as=script>
    <link href=/css/chunk-vendors.9dfc9b77.css rel=stylesheet>
    <link href=/css/app.7bd0b7a4.css rel=stylesheet>
</head>

<body>
    <noscript>
														<strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
													</noscript>
    <div id=app></div>
    <script src=/js/chunk-vendors.1277c01d.js></script>
    <script src=/js/app.6a177efd.js></script>
</body>
<style>
    html,
    body {
        min-height: 100% !important;
        height: 100%;
        min-width: 100% !important;
        width: 100%;
    }
</style>

</html>

If everything is ok and you still have the problem,
clean your browser cache (but I don't think the problem is here)

[Jihnjockey]

No, It should be ok now. I tested it again using my modified image and removing my network cable, and it works.

start application with docker-compose up connect in annotator_webclient container and verify added and modified files are present.

You should have this content:

root@c10df4e6938b:/workspace/dist# find
.
./js
./js/chunk-vendors.1277c01d.js.map
./js/app.6a177efd.js.map
./js/chunk-vendors.1277c01d.js
./js/app.6a177efd.js
./img
./img/no-image.a37b37d9.png
./img/404-image.36797a63.png
./index.html
./css
./css/app.7bd0b7a4.css
./css/chunk-vendors.9dfc9b77.css
./css/font-awesome.min.css
./favicon.ico
./fonts
./fonts/fontawesome-webfont.eot
./fonts/fontawesome-webfont.tff
./fonts/fontawesome-webfont.svg
./fonts/fontawesome-webfont.woff
./fonts/fontawesome-webfont.woff2

and index.html should be like this (I had to use an html pretty formatter to make this file readable in github):

root@c10df4e6938b:/workspace/dist# cat ./index.html 
<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <link rel=stylesheet href=/css/font-awesome.min.css>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>COCO Annotator</title>
    <link href=/css/app.7bd0b7a4.css rel=preload as=style>
    <link href=/css/chunk-vendors.9dfc9b77.css rel=preload as=style>
    <link href=/js/app.6a177efd.js rel=preload as=script>
    <link href=/js/chunk-vendors.1277c01d.js rel=preload as=script>
    <link href=/css/chunk-vendors.9dfc9b77.css rel=stylesheet>
    <link href=/css/app.7bd0b7a4.css rel=stylesheet>
</head>

<body>
    <noscript>
														<strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
													</noscript>
    <div id=app></div>
    <script src=/js/chunk-vendors.1277c01d.js></script>
    <script src=/js/app.6a177efd.js></script>
</body>
<style>
    html,
    body {
        min-height: 100% !important;
        height: 100%;
        min-width: 100% !important;
        width: 100%;
    }
</style>

</html>

If everything is ok and you still have the problem, clean your browser cache (but I don't think the problem is here)

Thank you very much!!! I used the firefox browser instead, and it works!

You are a lifesaver!!!
Could you please tell me why this method eventually works and what relevant knowledge I should know?

[Jihnjockey]

No, It should be ok now. I tested it again using my modified image and removing my network cable, and it works.
start application with docker-compose up connect in annotator_webclient container and verify added and modified files are present.
You should have this content:

root@c10df4e6938b:/workspace/dist# find
.
./js
./js/chunk-vendors.1277c01d.js.map
./js/app.6a177efd.js.map
./js/chunk-vendors.1277c01d.js
./js/app.6a177efd.js
./img
./img/no-image.a37b37d9.png
./img/404-image.36797a63.png
./index.html
./css
./css/app.7bd0b7a4.css
./css/chunk-vendors.9dfc9b77.css
./css/font-awesome.min.css
./favicon.ico
./fonts
./fonts/fontawesome-webfont.eot
./fonts/fontawesome-webfont.tff
./fonts/fontawesome-webfont.svg
./fonts/fontawesome-webfont.woff
./fonts/fontawesome-webfont.woff2

and index.html should be like this (I had to use an html pretty formatter to make this file readable in github):

root@c10df4e6938b:/workspace/dist# cat ./index.html 
<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <link rel=stylesheet href=/css/font-awesome.min.css>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>COCO Annotator</title>
    <link href=/css/app.7bd0b7a4.css rel=preload as=style>
    <link href=/css/chunk-vendors.9dfc9b77.css rel=preload as=style>
    <link href=/js/app.6a177efd.js rel=preload as=script>
    <link href=/js/chunk-vendors.1277c01d.js rel=preload as=script>
    <link href=/css/chunk-vendors.9dfc9b77.css rel=stylesheet>
    <link href=/css/app.7bd0b7a4.css rel=stylesheet>
</head>

<body>
    <noscript>
														<strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
													</noscript>
    <div id=app></div>
    <script src=/js/chunk-vendors.1277c01d.js></script>
    <script src=/js/app.6a177efd.js></script>
</body>
<style>
    html,
    body {
        min-height: 100% !important;
        height: 100%;
        min-width: 100% !important;
        width: 100%;
    }
</style>

</html>

If everything is ok and you still have the problem, clean your browser cache (but I don't think the problem is here)

Thank you very much!!! I used the firefox browser instead, and it works!

But when I tried to create a pose category, the keypoint can't save. That means when I
tried to create a "nose" keypoint like this:

Then I click "update" button. But when I opened it again, it showed like this:

It means it can't save the keypoint I submitted.

When I tried to annotate an image, it showed like this:

By the way, I checked the file you mentioned, there is only a difference in index.html:

Does that matter?

[SixK]

You need to click on "Label" to change default name, else Label is considered empty and keypoint is not saved.
You can also delete a Keypoint line like this, empty Label content and line will be removed.

Red message is encapsulated in tag.
It mean that if you disable javascript, the message will be shown in Browser.
This situation should never happen, most of browsers don't have an easy button to do this.
It's probably the Pretty tool I used that removed the text, I didn't noticed it.
It's definitly not a problem.

Annotating image seem's OK, maybe you mean you can't do any annotations ?
You have to create Categories first in Categories tab, then associate Categories to dataset in Dataset Tab.
Then you should see selected categories on the right side of the image.
Click en '+' button to add Annotation, then choose the tool you want to use (Polygon, Brush, BBox, etc...)