├── index.html
├── styles.css
├── README.md
├── upload.php
└── index.php
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | [](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 | 
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 | 
56 |
57 | ####Select your picture
58 | 
59 |
60 | ####Click Upload
61 | 
62 |
63 | ####Results are in!
64 | 
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 |
--------------------------------------------------------------------------------
/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 |
79 |
81 |
82 | Nutrition Facts
83 |
84 |
105 |
106 |
107 |
108 |
|
109 | Amount |
110 |
111 |
112 |
113 |
114 | | Calories |
115 | |
136 |
137 |
138 | | Fats |
139 | |
160 |
161 |
162 | | Sodium |
163 | |
184 |
185 |
186 | | Protein |
187 | |
208 |
209 |
210 |
211 | Made By Axel Ali ,
My Github!
212 |
All Values Are Figurative.
213 |
219 |
220 |
26 | Calorie Counter Demo!
27 |
28 |
31 |
32 |
33 | ";
66 |
67 |
68 | }
69 | ?>
70 |
71 |
72 |
73 |
74 |
80 |
81 |
82 |
83 |
85 |
86 | Nutrition Facts
87 |
88 |
109 |
110 |
111 |
112 |
|
113 | Amount |
114 |
115 |
116 |
117 |
118 | | Calories |
119 | |
140 |
141 |
142 | | Fats |
143 | |
164 |
165 |
166 | | Sodium |
167 | |
188 |
189 |
190 | | Protein |
191 | |
212 |
213 |
214 |
215 | Made By Axel Ali ,
My Github!
216 |
All Values Are Figurative.
217 |
223 |
224 |