Calorie Camera Demo

├── README.md ├── index.html ├── index.php ├── styles.css └── upload.php /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Tensorflow-Image-Classifier-Web-Demo 3 | "Calorie Counter", helps you stay fit , by using computer vision to find which item are you eating and giving you nutrition facts 4 | 5 | ###End result (It's a video , click it) 6 | [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/ECsLu60n0ss/0.jpg)](http://www.youtube.com/watch?v=ECsLu60n0ss) 7 | 8 | 9 | ### Requirements 10 | 11 | Web Server of your choice (nginx/apache/etc)(PHP must be installed)(See Any tutorial for setting up a webserver) 12 | 13 | 14 | 15 | ### Files, What do they do? 16 | uploads = user submitted images go here 17 | 18 | index.html = upload site 19 | 20 | postdata.php = main page, processing 21 | 22 | styles.css = CSS styles for the web page 23 | 24 | 25 | 26 | ###Inspiration: 27 | ![](http://i.imgur.com/xnZCjTY.jpg) 28 | Source: SAO Ordinal Scale - A1 Pictures 29 | 30 | ###First Step 31 | Clone this project (In terminal) 32 | ``` 33 | git clone https://github.com/AxelAli/Tensorflow-Image-Classifier-Web-Demo.git 34 | cd Tensorflow-Image-Classifier-Web-Demo 35 | ``` 36 | then 37 | 38 | ###Setting a tensorflow image recognizer 39 | Follow this project. 40 | ``` 41 | https://github.com/AxelAli/Tensorflow-Image-Classification 42 | ``` 43 | When finished 44 | ``` 45 | cd .. 46 | ``` 47 | 48 | 49 | (We should now be in this proyect folder) 50 | 51 | 52 | ###Usage 53 | Open your webserver 54 | ####Click Choose file (in mobile you just open the camera) 55 | ![](http://i.imgur.com/TdCnETp.png) 56 | 57 | ####Select your picture 58 | ![](http://i.imgur.com/mCa64Wt.png) 59 | 60 | ####Click Upload 61 | ![](http://i.imgur.com/7ijbEbW.png) 62 | 63 | ####Results are in! 64 | ![](http://i.imgur.com/HgGTvWh.png) 65 | 66 | #####Orange is the image that you uploaded 67 | #####Purple is the name of the food and serving size 68 | #####Green is the amounts of each item 69 | 70 | 71 | ### Known Bugs / Errors / Improvements 72 | >This should be a single webpage 73 | 74 | >if it doesnt find anything it shows a random item (we should check Accuracy of <80%) 75 | 76 | >data is hardcoded, this should be made with a database 77 | 78 | >if it doenst know which item it is, it should ask the user what is it and run the code to add it automatically 79 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calorie Camera Demo 8 | 9 | 10 | 17 | 18 | 19 | 22 | 23 | 24 | 25 |

26 | Calorie Counter Demo! 27 |

28 | 31 | 32 |

33 | "; 66 | 67 | 68 | } 69 | ?> 70 | 71 |

72 |

73 | 74 | 80 | 81 | 82 | 86 | 87 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 140 | 141 | 142 | 143 | 164 | 165 | 166 | 167 | 188 | 189 | 190 | 191 | 212 | 213 | 214 |

83 | 85 |
	Amount
Calories
Fats
Sodium
Protein

215 | Made By Axel Ali , My Github! 216 |
All Values Are Figurative. 217 | 223 | 224 |

225 | 228 | 233 | 236 | 237 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | 2 | html, body { 3 | font-family: "Abel script=all rev=2", "Adobe Blank"; 4 | height: 100%; 5 | width: 100%; 6 | margin: 0; 7 | color: white; 8 | 9 | } 10 | #top { 11 | font-size: 85px; 12 | background-color: #4ECDC4; 13 | height:10%; 14 | margin: 0px; 15 | text-align: center; 16 | 17 | } 18 | #mid{ 19 | text-align: center; 20 | background-color: #556270; 21 | height: 60%; 22 | color: black; 23 | } 24 | #bot { 25 | 26 | font-size: 15px; 27 | height: 30%; 28 | clear:both; 29 | 30 | background-color: #FF6B6B; 31 | 32 | 33 | text-align: center; 34 | } 35 | .table { 36 | text-align: center; 37 | width:100%; 38 | border:1px solid #C0C0C0; 39 | border-collapse:collapse; 40 | padding:5px; 41 | } 42 | 43 | #mid img{ 44 | max-width:100%; 45 | max-height:100%; 46 | text-align:center; 47 | display:inline-block; 48 | margin: auto; 49 | } 50 | -------------------------------------------------------------------------------- /upload.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calorie Camera Demo 8 | 9 | 10 | 17 | 18 | 19 | 22 | 23 | 24 | 25 |

26 | Calorie Counter Demo! 27 |

28 |

29 | "; 62 | 63 | 64 | } 65 | ?> 66 | 67 |

68 |

69 | 70 | 76 | 77 | 78 | 82 | 83 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 136 | 137 | 138 | 139 | 160 | 161 | 162 | 163 | 184 | 185 | 186 | 187 | 208 | 209 | 210 |

79 | 81 |
	Amount
Calories
Fats
Sodium
Protein

211 | Made By Axel Ali , My Github! 212 |
All Values Are Figurative. 213 | 219 | 220 |

221 | 222 | 223 | --------------------------------------------------------------------------------