├── .gitignore
├── Procfile
├── README.md
├── classify_image
├── __init__.py
├── apps.py
├── inception_model
│ ├── graph.pb
│ └── labels.txt
├── migrations
│ └── __init__.py
├── static
│ ├── css
│ │ └── classify.css
│ └── js
│ │ └── classify.js
├── templates
│ └── classify.html
└── views.py
├── manage.py
├── requirements.txt
├── runtime.txt
└── tf_inception
├── __init__.py
├── settings.py
└── urls.py
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | *.pyc
3 | *.sqlite3
4 | staticfiles/
5 |
--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: python3 manage.py runserver 0.0.0.0:$PORT
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ImageClassification-Server
2 | Image classification with Web API and UI.
3 | It's is written in Django along with Tensorflow uing [Google's Inception v3 model](https://storage.googleapis.com/download.tensorflow.org/models/inception_dec_2015.zip)
4 | The web interface is made using [materializecss](http://materializecss.com/) and [jQuery](https://jquery.com/)
5 | It is extension of [this](https://github.com/DeepBlueCitzenService/Tensorflow-Server) project.
6 |
7 | ## Usage
8 |
9 | To run the server on localhost:
10 |
11 | ```
12 | $ pip3 install -r requirements.txt
13 | $ python3 manage.py collectstatic
14 | $ python3 manage.py runserver
15 | ```
16 |
17 | ## Web Interface
18 | The Web Interface can be found at [http://tf-classify.herokuapp.com](http://tf-classify.herokuapp.com)
19 |
20 | ## Web API
21 | You can classify using web API by sending a POST request at [http://tf-classify.herokuapp.com/classify_image/classify/api/](http://tf-classify.herokuapp.com/classify_image/classify/api/)
22 |
23 | #### Input
24 | Parameter | Type | Description
25 | --------- | ------------------------------ | -----------------------------------------------------------------------------------
26 | image | file | Image file that you want to classify.
27 | image64 | text | Image in base64 form that you want to classify. Currently supports JPEG images only
28 | k | text
(optional, default=10) | Return top-k categories of the results. Must me string in integer format.
29 |
30 | Note: you need to send either 'image' or 'image64'
31 |
32 | #### Result
33 | Parameter | Type | Description
34 | ------------ | ------------------- | --------------------------------------------
35 | success | bool | Whether classification was sucessfuly or not
36 | confidence | category, float | pair of category and it's confidence
37 |
38 | Note: *category* is not paramater name but string of the category.
39 | Example: {"success": true, "confidence": { "mongoose": 0.87896, "hare": 0.00123 }}
40 |
41 |
42 | ## Using Retrained Inception Model
43 | * Retrain the model using your images. Refer [here](https://www.tensorflow.org/tutorials/image_retraining).
44 | * [Fork](https://github.com/CCD-1997/image-classify-server#fork-destination-box) this repo
45 | * Replace the generated graph and label files in `/classify_image/inception_model/`
46 | * Deploy the Django project
47 |
48 | ## Contribute
49 | I am just beginner. If you find any bugs or want to improve the project, fell free to do it uisng pull request.
50 |
--------------------------------------------------------------------------------
/classify_image/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ccd97/image-classify-server/93a4bc9edec0c357f5b342721db9f9a456182419/classify_image/__init__.py
--------------------------------------------------------------------------------
/classify_image/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 |
3 |
4 | class ClassifyImageConfig(AppConfig):
5 | name = 'classify_image'
6 |
--------------------------------------------------------------------------------
/classify_image/inception_model/graph.pb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ccd97/image-classify-server/93a4bc9edec0c357f5b342721db9f9a456182419/classify_image/inception_model/graph.pb
--------------------------------------------------------------------------------
/classify_image/inception_model/labels.txt:
--------------------------------------------------------------------------------
1 | dummy
2 | kit fox
3 | English setter
4 | Siberian husky
5 | Australian terrier
6 | English springer
7 | grey whale
8 | lesser panda
9 | Egyptian cat
10 | ibex
11 | Persian cat
12 | cougar
13 | gazelle
14 | porcupine
15 | sea lion
16 | malamute
17 | badger
18 | Great Dane
19 | Walker hound
20 | Welsh springer spaniel
21 | whippet
22 | Scottish deerhound
23 | killer whale
24 | mink
25 | African elephant
26 | Weimaraner
27 | soft-coated wheaten terrier
28 | Dandie Dinmont
29 | red wolf
30 | Old English sheepdog
31 | jaguar
32 | otterhound
33 | bloodhound
34 | Airedale
35 | hyena
36 | meerkat
37 | giant schnauzer
38 | titi
39 | three-toed sloth
40 | sorrel
41 | black-footed ferret
42 | dalmatian
43 | black-and-tan coonhound
44 | papillon
45 | skunk
46 | Staffordshire bullterrier
47 | Mexican hairless
48 | Bouvier des Flandres
49 | weasel
50 | miniature poodle
51 | Cardigan
52 | malinois
53 | bighorn
54 | fox squirrel
55 | colobus
56 | tiger cat
57 | Lhasa
58 | impala
59 | coyote
60 | Yorkshire terrier
61 | Newfoundland
62 | brown bear
63 | red fox
64 | Norwegian elkhound
65 | Rottweiler
66 | hartebeest
67 | Saluki
68 | grey fox
69 | schipperke
70 | Pekinese
71 | Brabancon griffon
72 | West Highland white terrier
73 | Sealyham terrier
74 | guenon
75 | mongoose
76 | indri
77 | tiger
78 | Irish wolfhound
79 | wild boar
80 | EntleBucher
81 | zebra
82 | ram
83 | French bulldog
84 | orangutan
85 | basenji
86 | leopard
87 | Bernese mountain dog
88 | Maltese dog
89 | Norfolk terrier
90 | toy terrier
91 | vizsla
92 | cairn
93 | squirrel monkey
94 | groenendael
95 | clumber
96 | Siamese cat
97 | chimpanzee
98 | komondor
99 | Afghan hound
100 | Japanese spaniel
101 | proboscis monkey
102 | guinea pig
103 | white wolf
104 | ice bear
105 | gorilla
106 | borzoi
107 | toy poodle
108 | Kerry blue terrier
109 | ox
110 | Scotch terrier
111 | Tibetan mastiff
112 | spider monkey
113 | Doberman
114 | Boston bull
115 | Greater Swiss Mountain dog
116 | Appenzeller
117 | Shih-Tzu
118 | Irish water spaniel
119 | Pomeranian
120 | Bedlington terrier
121 | warthog
122 | Arabian camel
123 | siamang
124 | miniature schnauzer
125 | collie
126 | golden retriever
127 | Irish terrier
128 | affenpinscher
129 | Border collie
130 | hare
131 | boxer
132 | silky terrier
133 | beagle
134 | Leonberg
135 | German short-haired pointer
136 | patas
137 | dhole
138 | baboon
139 | macaque
140 | Chesapeake Bay retriever
141 | bull mastiff
142 | kuvasz
143 | capuchin
144 | pug
145 | curly-coated retriever
146 | Norwich terrier
147 | flat-coated retriever
148 | hog
149 | keeshond
150 | Eskimo dog
151 | Brittany spaniel
152 | standard poodle
153 | Lakeland terrier
154 | snow leopard
155 | Gordon setter
156 | dingo
157 | standard schnauzer
158 | hamster
159 | Tibetan terrier
160 | Arctic fox
161 | wire-haired fox terrier
162 | basset
163 | water buffalo
164 | American black bear
165 | Angora
166 | bison
167 | howler monkey
168 | hippopotamus
169 | chow
170 | giant panda
171 | American Staffordshire terrier
172 | Shetland sheepdog
173 | Great Pyrenees
174 | Chihuahua
175 | tabby
176 | marmoset
177 | Labrador retriever
178 | Saint Bernard
179 | armadillo
180 | Samoyed
181 | bluetick
182 | redbone
183 | polecat
184 | marmot
185 | kelpie
186 | gibbon
187 | llama
188 | miniature pinscher
189 | wood rabbit
190 | Italian greyhound
191 | lion
192 | cocker spaniel
193 | Irish setter
194 | dugong
195 | Indian elephant
196 | beaver
197 | Sussex spaniel
198 | Pembroke
199 | Blenheim spaniel
200 | Madagascar cat
201 | Rhodesian ridgeback
202 | lynx
203 | African hunting dog
204 | langur
205 | Ibizan hound
206 | timber wolf
207 | cheetah
208 | English foxhound
209 | briard
210 | sloth bear
211 | Border terrier
212 | German shepherd
213 | otter
214 | koala
215 | tusker
216 | echidna
217 | wallaby
218 | platypus
219 | wombat
220 | revolver
221 | umbrella
222 | schooner
223 | soccer ball
224 | accordion
225 | ant
226 | starfish
227 | chambered nautilus
228 | grand piano
229 | laptop
230 | strawberry
231 | airliner
232 | warplane
233 | airship
234 | balloon
235 | space shuttle
236 | fireboat
237 | gondola
238 | speedboat
239 | lifeboat
240 | canoe
241 | yawl
242 | catamaran
243 | trimaran
244 | container ship
245 | liner
246 | pirate
247 | aircraft carrier
248 | submarine
249 | wreck
250 | half track
251 | tank
252 | missile
253 | bobsled
254 | dogsled
255 | bicycle-built-for-two
256 | mountain bike
257 | freight car
258 | passenger car
259 | barrow
260 | shopping cart
261 | motor scooter
262 | forklift
263 | electric locomotive
264 | steam locomotive
265 | amphibian
266 | ambulance
267 | beach wagon
268 | cab
269 | convertible
270 | jeep
271 | limousine
272 | minivan
273 | Model T
274 | racer
275 | sports car
276 | go-kart
277 | golfcart
278 | moped
279 | snowplow
280 | fire engine
281 | garbage truck
282 | pickup
283 | tow truck
284 | trailer truck
285 | moving van
286 | police van
287 | recreational vehicle
288 | streetcar
289 | snowmobile
290 | tractor
291 | mobile home
292 | tricycle
293 | unicycle
294 | horse cart
295 | jinrikisha
296 | oxcart
297 | bassinet
298 | cradle
299 | crib
300 | four-poster
301 | bookcase
302 | china cabinet
303 | medicine chest
304 | chiffonier
305 | table lamp
306 | file
307 | park bench
308 | barber chair
309 | throne
310 | folding chair
311 | rocking chair
312 | studio couch
313 | toilet seat
314 | desk
315 | pool table
316 | dining table
317 | entertainment center
318 | wardrobe
319 | Granny Smith
320 | orange
321 | lemon
322 | fig
323 | pineapple
324 | banana
325 | jackfruit
326 | custard apple
327 | pomegranate
328 | acorn
329 | hip
330 | ear
331 | rapeseed
332 | corn
333 | buckeye
334 | organ
335 | upright
336 | chime
337 | drum
338 | gong
339 | maraca
340 | marimba
341 | steel drum
342 | banjo
343 | cello
344 | violin
345 | harp
346 | acoustic guitar
347 | electric guitar
348 | cornet
349 | French horn
350 | trombone
351 | harmonica
352 | ocarina
353 | panpipe
354 | bassoon
355 | oboe
356 | sax
357 | flute
358 | daisy
359 | yellow lady's slipper
360 | cliff
361 | valley
362 | alp
363 | volcano
364 | promontory
365 | sandbar
366 | coral reef
367 | lakeside
368 | seashore
369 | geyser
370 | hatchet
371 | cleaver
372 | letter opener
373 | plane
374 | power drill
375 | lawn mower
376 | hammer
377 | corkscrew
378 | can opener
379 | plunger
380 | screwdriver
381 | shovel
382 | plow
383 | chain saw
384 | cock
385 | hen
386 | ostrich
387 | brambling
388 | goldfinch
389 | house finch
390 | junco
391 | indigo bunting
392 | robin
393 | bulbul
394 | jay
395 | magpie
396 | chickadee
397 | water ouzel
398 | kite
399 | bald eagle
400 | vulture
401 | great grey owl
402 | black grouse
403 | ptarmigan
404 | ruffed grouse
405 | prairie chicken
406 | peacock
407 | quail
408 | partridge
409 | African grey
410 | macaw
411 | sulphur-crested cockatoo
412 | lorikeet
413 | coucal
414 | bee eater
415 | hornbill
416 | hummingbird
417 | jacamar
418 | toucan
419 | drake
420 | red-breasted merganser
421 | goose
422 | black swan
423 | white stork
424 | black stork
425 | spoonbill
426 | flamingo
427 | American egret
428 | little blue heron
429 | bittern
430 | crane
431 | limpkin
432 | American coot
433 | bustard
434 | ruddy turnstone
435 | red-backed sandpiper
436 | redshank
437 | dowitcher
438 | oystercatcher
439 | European gallinule
440 | pelican
441 | king penguin
442 | albatross
443 | great white shark
444 | tiger shark
445 | hammerhead
446 | electric ray
447 | stingray
448 | barracouta
449 | coho
450 | tench
451 | goldfish
452 | eel
453 | rock beauty
454 | anemone fish
455 | lionfish
456 | puffer
457 | sturgeon
458 | gar
459 | loggerhead
460 | leatherback turtle
461 | mud turtle
462 | terrapin
463 | box turtle
464 | banded gecko
465 | common iguana
466 | American chameleon
467 | whiptail
468 | agama
469 | frilled lizard
470 | alligator lizard
471 | Gila monster
472 | green lizard
473 | African chameleon
474 | Komodo dragon
475 | triceratops
476 | African crocodile
477 | American alligator
478 | thunder snake
479 | ringneck snake
480 | hognose snake
481 | green snake
482 | king snake
483 | garter snake
484 | water snake
485 | vine snake
486 | night snake
487 | boa constrictor
488 | rock python
489 | Indian cobra
490 | green mamba
491 | sea snake
492 | horned viper
493 | diamondback
494 | sidewinder
495 | European fire salamander
496 | common newt
497 | eft
498 | spotted salamander
499 | axolotl
500 | bullfrog
501 | tree frog
502 | tailed frog
503 | whistle
504 | wing
505 | paintbrush
506 | hand blower
507 | oxygen mask
508 | snorkel
509 | loudspeaker
510 | microphone
511 | screen
512 | mouse
513 | electric fan
514 | oil filter
515 | strainer
516 | space heater
517 | stove
518 | guillotine
519 | barometer
520 | rule
521 | odometer
522 | scale
523 | analog clock
524 | digital clock
525 | wall clock
526 | hourglass
527 | sundial
528 | parking meter
529 | stopwatch
530 | digital watch
531 | stethoscope
532 | syringe
533 | magnetic compass
534 | binoculars
535 | projector
536 | sunglasses
537 | loupe
538 | radio telescope
539 | bow
540 | cannon [ground]
541 | assault rifle
542 | rifle
543 | projectile
544 | computer keyboard
545 | typewriter keyboard
546 | crane
547 | lighter
548 | abacus
549 | cash machine
550 | slide rule
551 | desktop computer
552 | hand-held computer
553 | notebook
554 | web site
555 | harvester
556 | thresher
557 | printer
558 | slot
559 | vending machine
560 | sewing machine
561 | joystick
562 | switch
563 | hook
564 | car wheel
565 | paddlewheel
566 | pinwheel
567 | potter's wheel
568 | gas pump
569 | carousel
570 | swing
571 | reel
572 | radiator
573 | puck
574 | hard disc
575 | sunglass
576 | pick
577 | car mirror
578 | solar dish
579 | remote control
580 | disk brake
581 | buckle
582 | hair slide
583 | knot
584 | combination lock
585 | padlock
586 | nail
587 | safety pin
588 | screw
589 | muzzle
590 | seat belt
591 | ski
592 | candle
593 | jack-o'-lantern
594 | spotlight
595 | torch
596 | neck brace
597 | pier
598 | tripod
599 | maypole
600 | mousetrap
601 | spider web
602 | trilobite
603 | harvestman
604 | scorpion
605 | black and gold garden spider
606 | barn spider
607 | garden spider
608 | black widow
609 | tarantula
610 | wolf spider
611 | tick
612 | centipede
613 | isopod
614 | Dungeness crab
615 | rock crab
616 | fiddler crab
617 | king crab
618 | American lobster
619 | spiny lobster
620 | crayfish
621 | hermit crab
622 | tiger beetle
623 | ladybug
624 | ground beetle
625 | long-horned beetle
626 | leaf beetle
627 | dung beetle
628 | rhinoceros beetle
629 | weevil
630 | fly
631 | bee
632 | grasshopper
633 | cricket
634 | walking stick
635 | cockroach
636 | mantis
637 | cicada
638 | leafhopper
639 | lacewing
640 | dragonfly
641 | damselfly
642 | admiral
643 | ringlet
644 | monarch
645 | cabbage butterfly
646 | sulphur butterfly
647 | lycaenid
648 | jellyfish
649 | sea anemone
650 | brain coral
651 | flatworm
652 | nematode
653 | conch
654 | snail
655 | slug
656 | sea slug
657 | chiton
658 | sea urchin
659 | sea cucumber
660 | iron
661 | espresso maker
662 | microwave
663 | Dutch oven
664 | rotisserie
665 | toaster
666 | waffle iron
667 | vacuum
668 | dishwasher
669 | refrigerator
670 | washer
671 | Crock Pot
672 | frying pan
673 | wok
674 | caldron
675 | coffeepot
676 | teapot
677 | spatula
678 | altar
679 | triumphal arch
680 | patio
681 | steel arch bridge
682 | suspension bridge
683 | viaduct
684 | barn
685 | greenhouse
686 | palace
687 | monastery
688 | library
689 | apiary
690 | boathouse
691 | church
692 | mosque
693 | stupa
694 | planetarium
695 | restaurant
696 | cinema
697 | home theater
698 | lumbermill
699 | coil
700 | obelisk
701 | totem pole
702 | castle
703 | prison
704 | grocery store
705 | bakery
706 | barbershop
707 | bookshop
708 | butcher shop
709 | confectionery
710 | shoe shop
711 | tobacco shop
712 | toyshop
713 | fountain
714 | cliff dwelling
715 | yurt
716 | dock
717 | brass
718 | megalith
719 | bannister
720 | breakwater
721 | dam
722 | chainlink fence
723 | picket fence
724 | worm fence
725 | stone wall
726 | grille
727 | sliding door
728 | turnstile
729 | mountain tent
730 | scoreboard
731 | honeycomb
732 | plate rack
733 | pedestal
734 | beacon
735 | mashed potato
736 | bell pepper
737 | head cabbage
738 | broccoli
739 | cauliflower
740 | zucchini
741 | spaghetti squash
742 | acorn squash
743 | butternut squash
744 | cucumber
745 | artichoke
746 | cardoon
747 | mushroom
748 | shower curtain
749 | jean
750 | carton
751 | handkerchief
752 | sandal
753 | ashcan
754 | safe
755 | plate
756 | necklace
757 | croquet ball
758 | fur coat
759 | thimble
760 | pajama
761 | running shoe
762 | cocktail shaker
763 | chest
764 | manhole cover
765 | modem
766 | tub
767 | tray
768 | balance beam
769 | bagel
770 | prayer rug
771 | kimono
772 | hot pot
773 | whiskey jug
774 | knee pad
775 | book jacket
776 | spindle
777 | ski mask
778 | beer bottle
779 | crash helmet
780 | bottlecap
781 | tile roof
782 | mask
783 | maillot
784 | Petri dish
785 | football helmet
786 | bathing cap
787 | teddy bear
788 | holster
789 | pop bottle
790 | photocopier
791 | vestment
792 | crossword puzzle
793 | golf ball
794 | trifle
795 | suit
796 | water tower
797 | feather boa
798 | cloak
799 | red wine
800 | drumstick
801 | shield
802 | Christmas stocking
803 | hoopskirt
804 | menu
805 | stage
806 | bonnet
807 | meat loaf
808 | baseball
809 | face powder
810 | scabbard
811 | sunscreen
812 | beer glass
813 | hen-of-the-woods
814 | guacamole
815 | lampshade
816 | wool
817 | hay
818 | bow tie
819 | mailbag
820 | water jug
821 | bucket
822 | dishrag
823 | soup bowl
824 | eggnog
825 | mortar
826 | trench coat
827 | paddle
828 | chain
829 | swab
830 | mixing bowl
831 | potpie
832 | wine bottle
833 | shoji
834 | bulletproof vest
835 | drilling platform
836 | binder
837 | cardigan
838 | sweatshirt
839 | pot
840 | birdhouse
841 | hamper
842 | ping-pong ball
843 | pencil box
844 | pay-phone
845 | consomme
846 | apron
847 | punching bag
848 | backpack
849 | groom
850 | bearskin
851 | pencil sharpener
852 | broom
853 | mosquito net
854 | abaya
855 | mortarboard
856 | poncho
857 | crutch
858 | Polaroid camera
859 | space bar
860 | cup
861 | racket
862 | traffic light
863 | quill
864 | radio
865 | dough
866 | cuirass
867 | military uniform
868 | lipstick
869 | shower cap
870 | monitor
871 | oscilloscope
872 | mitten
873 | brassiere
874 | French loaf
875 | vase
876 | milk can
877 | rugby ball
878 | paper towel
879 | earthstar
880 | envelope
881 | miniskirt
882 | cowboy hat
883 | trolleybus
884 | perfume
885 | bathtub
886 | hotdog
887 | coral fungus
888 | bullet train
889 | pillow
890 | toilet tissue
891 | cassette
892 | carpenter's kit
893 | ladle
894 | stinkhorn
895 | lotion
896 | hair spray
897 | academic gown
898 | dome
899 | crate
900 | wig
901 | burrito
902 | pill bottle
903 | chain mail
904 | theater curtain
905 | window shade
906 | barrel
907 | washbasin
908 | ballpoint
909 | basketball
910 | bath towel
911 | cowboy boot
912 | gown
913 | window screen
914 | agaric
915 | cellular telephone
916 | nipple
917 | barbell
918 | mailbox
919 | lab coat
920 | fire screen
921 | minibus
922 | packet
923 | maze
924 | pole
925 | horizontal bar
926 | sombrero
927 | pickelhaube
928 | rain barrel
929 | wallet
930 | cassette player
931 | comic book
932 | piggy bank
933 | street sign
934 | bell cote
935 | fountain pen
936 | Windsor tie
937 | volleyball
938 | overskirt
939 | sarong
940 | purse
941 | bolo tie
942 | bib
943 | parachute
944 | sleeping bag
945 | television
946 | swimming trunks
947 | measuring cup
948 | espresso
949 | pizza
950 | breastplate
951 | shopping basket
952 | wooden spoon
953 | saltshaker
954 | chocolate sauce
955 | ballplayer
956 | goblet
957 | gyromitra
958 | stretcher
959 | water bottle
960 | dial telephone
961 | soap dispenser
962 | jersey
963 | school bus
964 | jigsaw puzzle
965 | plastic bag
966 | reflex camera
967 | diaper
968 | Band Aid
969 | ice lolly
970 | velvet
971 | tennis ball
972 | gasmask
973 | doormat
974 | Loafer
975 | ice cream
976 | pretzel
977 | quilt
978 | maillot
979 | tape player
980 | clog
981 | iPod
982 | bolete
983 | scuba diver
984 | pitcher
985 | matchstick
986 | bikini
987 | sock
988 | CD player
989 | lens cap
990 | thatch
991 | vault
992 | beaker
993 | bubble
994 | cheeseburger
995 | parallel bars
996 | flagpole
997 | coffee mug
998 | rubber eraser
999 | stole
1000 | carbonara
1001 | dumbbell
--------------------------------------------------------------------------------
/classify_image/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ccd97/image-classify-server/93a4bc9edec0c357f5b342721db9f9a456182419/classify_image/migrations/__init__.py
--------------------------------------------------------------------------------
/classify_image/static/css/classify.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #34495E;
3 | font-family: 'Noto Sans', sans-serif;
4 | padding-top: 5%;
5 | padding-bottom: 10%;
6 | }
7 |
8 | .main-container {
9 | position: relative;
10 | height: 100%;
11 | }
12 |
13 | .dd-container, .uf-container, .dt-container {
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | height: inherit;
18 | }
19 |
20 | .dt-container {
21 | z-index: 1;
22 | opacity: 0;
23 | }
24 |
25 | .uf-container {
26 | z-index: 1;
27 | opacity: 0;
28 | }
29 |
30 | .dd-container {
31 | z-index: 2;
32 | }
33 |
34 | .dd-card, .uf-card, .dt-card {
35 | height: inherit;
36 | }
37 |
38 | .dt-card {
39 | overflow-y: auto;
40 | }
41 |
42 | #drop-container {
43 | height: calc(100% - 50px);
44 | border-style: dashed;
45 | border-color: #34495E;
46 | border-radius: 4px;
47 | }
48 |
49 | .upload-icon {
50 | color: #34495E;
51 | position: absolute;
52 | top: 50%;
53 | left: 50%;
54 | -webkit-transform: translate(-50%, -125%);
55 | transform: translate(-50%, -125%);
56 | }
57 |
58 | .drag-txt {
59 | position: absolute;
60 | top: 50%;
61 | left: 50%;
62 | -webkit-transform: translate(-50%, -50%);
63 | transform: translate(-50%, -50%);
64 | font-size: 1.5em;
65 | }
66 |
67 | .or-txt {
68 | position: absolute;
69 | top: 50%;
70 | left: 50%;
71 | -webkit-transform: translate(-50%, 75%);
72 | transform: translate(-50%, 75%);
73 | }
74 |
75 | #browse-container {
76 | background-color: #34495E;
77 | position: absolute;
78 | top: 50%;
79 | left: 50%;
80 | -webkit-transform: translate(-50%, 100%);
81 | transform: translate(-50%, 100%);
82 | }
83 |
84 | #upload-button {
85 | background-color: #1ABC9C;
86 | position: absolute;
87 | width: calc(50% - 20px);
88 | }
89 |
90 | #go-back {
91 | background-color: #1ABC9C;
92 | position: absolute;
93 | width: calc(50% - 20px);
94 | transform: translate(calc(100% + 20px), 0%);
95 | }
96 |
97 | #go-start {
98 | background-color: #1ABC9C;
99 | position: absolute;
100 | width: calc(100% - 20px);
101 | }
102 |
103 | #img-card {
104 | max-width: 100%;
105 | max-height: 100%;
106 | display: block;
107 | }
108 |
109 | .crop {
110 | object-fit: cover;
111 | object-position: center;
112 | width: 100%;
113 | height: 100%;
114 | }
115 |
116 | .loading-text {
117 | margin-left: 120px;
118 | transform: translateY(50%);
119 | }
120 |
121 | .bar {
122 | height: 20px;
123 | background-color: #34495E !important;
124 | }
125 |
126 | .progress {
127 | height: 20px !important;
128 | margin-top: 40px !important;
129 | background-color: #F5F5F5 !important;
130 | }
131 |
132 | .progress .determinate {
133 | background-color: #34495E !important;
134 | }
135 |
136 | .stat-card {
137 | padding-top: 10px !important;
138 | padding-bottom: 10px !important;
139 | }
140 |
141 | .capitalize {
142 | text-transform: capitalize;
143 | }
144 |
145 | .uppercase {
146 | text-transform: uppercase;
147 | }
148 |
149 | ::-webkit-scrollbar {
150 | width: 6px;
151 | height: 6px;
152 | }
153 |
154 | ::-webkit-scrollbar-track {
155 | background: #EAECEE;
156 | }
157 |
158 | ::-webkit-scrollbar-thumb {
159 | background: #85919E;
160 | }
161 |
162 | ::-webkit-scrollbar-thumb:hover {
163 | background: #5C6D7E;
164 | }
165 |
166 | ::-webkit-scrollbar-thumb:active {
167 | background: #485B6E;
168 | }
169 |
--------------------------------------------------------------------------------
/classify_image/static/js/classify.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function() {
2 |
3 | var dropContainer = document.getElementById('drop-container');
4 | dropContainer.ondragover = dropContainer.ondragend = function() {
5 | return false;
6 | };
7 |
8 | dropContainer.ondrop = function(e) {
9 | e.preventDefault();
10 | loadImage(e.dataTransfer.files[0])
11 | }
12 |
13 | $("#browse-button").change(function() {
14 | loadImage($("#browse-button").prop("files")[0]);
15 | });
16 |
17 | $('.modal').modal({
18 | dismissible: false,
19 | ready: function(modal, trigger) {
20 | $.ajax({
21 | type: "POST",
22 | url: '/classify_image/classify/api/',
23 | data: {
24 | 'image64': $('#img-card').attr('src')
25 | },
26 | dataType: 'text',
27 | success: function(data) {
28 | loadStats(data)
29 | }
30 | }).always(function() {
31 | modal.modal('close');
32 | });
33 | }
34 | });
35 |
36 | $('#go-back, #go-start').click(function() {
37 | $('#img-card').removeAttr("src");
38 | $('#stat-table').html('');
39 | switchCard(0);
40 | });
41 |
42 | $('#upload-button').click(function() {
43 | $('.modal').modal('open');
44 | });
45 | });
46 |
47 | switchCard = function(cardNo) {
48 | var containers = [".dd-container", ".uf-container", ".dt-container"];
49 | var visibleContainer = containers[cardNo];
50 | for (var i = 0; i < containers.length; i++) {
51 | var oz = (containers[i] === visibleContainer) ? '1' : '0';
52 | $(containers[i]).animate({
53 | opacity: oz
54 | }, {
55 | duration: 200,
56 | queue: false,
57 | }).css("z-index", oz);
58 | }
59 | }
60 |
61 | loadImage = function(file) {
62 | var reader = new FileReader();
63 | reader.onload = function(event) {
64 | $('#img-card').attr('src', event.target.result);
65 | }
66 | reader.readAsDataURL(file);
67 | switchCard(1);
68 | }
69 |
70 | loadStats = function(jsonData) {
71 | switchCard(2);
72 | var data = JSON.parse(jsonData);
73 | if (data["success"] == true) {
74 | for (category in data['confidence']) {
75 | var percent = Math.round(parseFloat(data["confidence"][category]) * 100);
76 | var markup = `
77 |
Confidence
81 |` + percent + `%
82 |