-
Notifications
You must be signed in to change notification settings - Fork 37
/
Copy pathindex.html
82 lines (69 loc) · 3.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nutrify</title>
<script type="module" src="supabaseClient.js"></script>
<script type="module" src="constants.js"></script>
<script type="module" src="get_data.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1-alpha.7/dist/tf-tflite.min.js"></script>
<script type="module" src="script.js"></script>
</head>
<body>
<h1>Nutrify: take a photo of food and learn about it.</h1>
<p><b>Note:</b> Nutrify is a work in progress. iOS app coming soon. <a href="https://forms.gle/8ye134pvgEKWJQHd6">Sign up</a> for updates.</p>
<p>Try taking or uploading a photo of food and find out its macronutrients.</p>
<button id="upload-button">
<span>Upload Image</span>
</button>
<p>
<input type="file" style="display: none" accept="image/*" name="image" id="file-input" />
</p>
<p><img id="image" width="200" /></p>
<p>Predicted food: <span id="predicted_class"></span></p>
<!-- <p>Predicted probability:</p>
<p id="predicted_prob"></p> -->
<p>Macronutrients per 100g:</p>
<ul>
<li>protein: <span id="protein_amount"></span></li>
<li>carbohydrates: <span id="carbohydrate_amount"></span></li>
<li>fats: <span id="fat_amount"></span></li>
</ul>
<p>Time taken: <span id="time_taken"></span></p>
<!-- "Is this correct?" buttons (these start hidden but get updated when necessary) -->
<p id="is_this_correct" hidden>Is this correct?</p>
<button id="yes_button" hidden>Yes</button>
<button id="no_button" hidden>No</button>
<!-- Thank you message text for clicking "Is this correct?" button -->
<p id="thank_you_message" hidden>Thank you for your feedback.</p>
<!-- Information about Nutrify beyond this line. -->
<h2>What is Nutrify?</h2>
<p>Nutrify's goal is to enable you to take a photo of what you're eating, about to eat or food you see in a store
and learn about it.</p>
<p>That could mean calories, nutrients, where the food comes, what it goes with, how long its been around for, where
it's native, etc.</p>
<p>A Pokédex for food!</p>
<p>To start, we're keeping it simple. Whole foods only. </p>
<p></p>For example, a banana or carrot or egg rather than a dish like
chicken curry.</p>
<h2>Help build</h2>
<p>Building the vision models will likely take a fair amount of labelled images of food (currently being sourced).
</p>
<p>But if you'd like to help, you can <a
href="https://share.streamlit.io/mrdbourke/nutrify/main/food_image_collector.py">upload an image of
food</a>.</p>
<h2>Updates</h2>
<ul>
<li>17 Jan 2023 - Started creating a data engine to make the model better, see the <a href="https://www.mrdbourke.com/copying-teslas-data-engine-for-food-images">blog post</a>/<a href="https://youtu.be/02b-1spzLzc">video update</a></li>
<li><a href="https://github.com/mrdbourke/nutrify/discussions/33">14 Mar 2022</a> - Added queries to a Supabase
database to showcase macronutrients for each food</li>
<li><a href="https://github.com/mrdbourke/nutrify/discussions/32">14 Jan 2022</a> - 78 -> 100 foods identifiable
</li>
</ul>
<p>See the <a href="https://github.com/mrdbourke/nutrify">GitHub</a> for development stages and code.</p>
<p>Watch the live development on <a href="https://www.twitch.tv/mrdbourke">Twitch</a> and <a
href="https://youtube.com/playlist?list=PL8IpyNZ21vUTOJR1vKEBvqQaYmu7FErgc"> replays on YouTube</a>.</p>
<p>Questions? Feel free to <a href="https://www.mrdbourke.com/contact/">contact me</a> (Daniel Bourke). </p>
</body>