Update app.py

app.py

@@ -157,7 +157,7 @@ def main():
         response_json = json.loads(response.content)
         # Convert response_json to a list
         response_json = list(response_json)
-        
+
         if len(response_json) == 0:
             st.markdown("### No Recipe Found:")
             st.write("**No recipes found. Please adjust your search criteria.**")
@@ -181,67 +181,100 @@ def main():
                     st.write("**Description:** ", random_recipe['Description'])
                 st.write("**Ingredients:** ", random_recipe['Ingredients'])
                 st.write("**Recipe Facts:** ", random_recipe['Recipe Facts'])
-                st.write("**Directions:** ", random_recipe['Directions']) 
+                st.write("**Directions:** ", random_recipe['Directions'])                   
+                # extract only numeric values and convert mg to g
+                values = [
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Fat'])), 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Saturated Fat'])), 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Cholesterol'])) / 1000, 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Sodium'])) / 1000, 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Carbohydrate'])), 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Dietary Fiber'])), 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Sugars'])), 
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Protein'])),
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Vitamin C'])) / 1000,
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Calcium'])) / 1000,
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Iron'])) / 1000,
+                    float(re.sub(r'[^\d.]+', '', random_recipe['Potassium'])) / 1000
+                ]
+                # Create a list of daily values (DV) for each nutrient based on a 2000 calorie per day diet, all are in grams
+                dv = [65, 20, 0.3, 2.3, 300, 28, 50, 50, 0.09, 1, 0.018, 4.7]
+
+                # Calculate the percentage of DV for each nutrient
+                dv_percent = [round(value * 100 / dv[i]) for i, value in enumerate(values)]                
                 nutrition_html = """
                 <div id="nutrition-info_6-0" class="comp nutrition-info">
                     <table class="nutrition-info__table">
                         <thead>
                             <tr>
-                                <th class="nutrition-info__heading" colspan="2">Number of Servings: <span class="nutrition-info__heading-aside">{servings}</span></th>
+                                <th class="nutrition-info__heading" colspan="3">Number of Servings: <span class="nutrition-info__heading-aside">{servings}</span></th>
                             </tr>                            
                         </thead>
                         <tbody class="nutrition-info__table--body">
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Calories</td>
                                 <td class="nutrition-info__table--cell">{calories}</td>
+                                <td class="nutrition-info__table--cell"></td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Total Fat</td>
                                 <td class="nutrition-info__table--cell">{total_fat}</td>
+                                <td class="nutrition-info__table--cell">{fat_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Saturated Fat</td>
                                 <td class="nutrition-info__table--cell">{saturated_fat}</td>
+                                <td class="nutrition-info__table--cell">{sat_fat_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Cholesterol</td>
                                 <td class="nutrition-info__table--cell">{cholesterol}</td>
+                                <td class="nutrition-info__table--cell">{chol_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Sodium</td>
                                 <td class="nutrition-info__table--cell">{sodium}</td>
+                                <td class="nutrition-info__table--cell">{sodium_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Total Carbohydrate</td>
                                 <td class="nutrition-info__table--cell">{total_carbohydrate}</td>
+                                <td class="nutrition-info__table--cell">{carb_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Dietary Fiber</td>
                                 <td class="nutrition-info__table--cell">{dietary_fiber}</td>
+                                <td class="nutrition-info__table--cell">{diet_fibe_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Total Sugars</td>
                                 <td class="nutrition-info__table--cell">{total_sugars}</td>
+                                <td class="nutrition-info__table--cell">{tot_sugars_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Protein</td>
                                 <td class="nutrition-info__table--cell">{protein}</td>
+                                <td class="nutrition-info__table--cell">{protein_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Vitamin C</td>
                                 <td class="nutrition-info__table--cell">{vitc}</td>
+                                <td class="nutrition-info__table--cell">{vitc_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Calcium</td>
                                 <td class="nutrition-info__table--cell">{calc}</td>
+                                <td class="nutrition-info__table--cell">{calc_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Iron</td>
                                 <td class="nutrition-info__table--cell">{iron}</td>
+                                <td class="nutrition-info__table--cell">{iron_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Potassium</td>
                                 <td class="nutrition-info__table--cell">{pota}</td>
+                                <td class="nutrition-info__table--cell">{pota_percent}% DV</td>
                             </tr>
                         </tbody>
                     </table>
@@ -262,7 +295,20 @@ def main():
                     calc=random_recipe['Calcium'],
                     iron=random_recipe['Iron'],
                     pota=random_recipe['Potassium'],
-                    protein=random_recipe['Protein']
+                    protein=random_recipe['Protein'],
+                    fat_percent=dv_percent[0],
+                    sat_fat_percent=dv_percent[1],
+                    chol_percent=dv_percent[2],
+                    sodium_percent=dv_percent[3],
+                    carb_percent=dv_percent[4],
+                    diet_fibe_percent=dv_percent[5],
+                    tot_sugars_percent=dv_percent[6],
+                    protein_percent=dv_percent[7],
+                    vitc_percent=dv_percent[8],
+                    calc_percent=dv_percent[9],
+                    iron_percent=dv_percent[10],
+                    pota_percent=dv_percent[11]
+
                 )
 
                 # Define a function to apply the CSS styles to the table cells
@@ -273,22 +319,7 @@ def main():
                     # Add the nutrition table to the Streamlit app
                     st.write("<h2 style='text-align:left;'>Nutrition Facts (per serving)</h2>", unsafe_allow_html=True)
                     st.write(f"<div style='max-height:none; overflow:auto'>{formatted_html}</div>", unsafe_allow_html=True)  
-                    st.write("<p style='text-align:left;'>*Nutrition information is calculated using an ingredient database and should be considered an estimate.</p>", unsafe_allow_html=True)                  
-                # extract only numeric values and convert mg to g
-                values = [
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Fat'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Saturated Fat'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Cholesterol'])) / 1000, 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Sodium'])) / 1000, 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Carbohydrate'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Dietary Fiber'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Sugars'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Protein'])),
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Vitamin C'])) / 1000,
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Calcium'])) / 1000,
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Iron'])) / 1000,
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Potassium'])) / 1000
-                ]
+                    st.write("<p style='text-align:left;'>*The % Daily Value (DV) tells you how much a nutrient in a food serving contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>", unsafe_allow_html=True)                
                 # create pie chart
                 labels = ['Total Fat', 'Saturated Fat', 'Cholesterol', 'Sodium', 'Total Carbohydrate', 'Dietary Fiber', 'Total Sugars', 'Protein', 'Vitamin C', 'Calcium', 'Iron', 'Potassium']
                 fig = go.Figure(data=[go.Pie(labels=labels, values=values)])
@@ -310,67 +341,100 @@ def main():
                     st.write("**Description:** ", response_json[0]['Description'])
                 st.write("**Ingredients:** ", response_json[0]['Ingredients'])
                 st.write("**Recipe Facts:** ", response_json[0]['Recipe Facts'])
-                st.write("**Directions:** ", random_recipe['Directions']) 
+                st.write("**Directions:** ", response_json[0]['Directions']) 
+                # extract only numeric values and convert mg to g
+                values = [
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Total Fat'])), 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Saturated Fat'])), 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Cholesterol'])) / 1000, 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Sodium'])) / 1000, 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Total Carbohydrate'])), 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Dietary Fiber'])), 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Total Sugars'])), 
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Protein'])),
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Vitamin C'])) / 1000,
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Calcium'])) / 1000,
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Iron'])) / 1000,
+                    float(re.sub(r'[^\d.]+', '', response_json[0]['Potassium'])) / 1000
+                ]
+                # Create a list of daily values (DV) for each nutrient based on a 2000 calorie per day diet, all are in grams
+                dv = [65, 20, 0.3, 2.3, 300, 28, 50, 50, 0.09, 1, 0.018, 4.7]
+
+                # Calculate the percentage of DV for each nutrient
+                dv_percent = [round(value * 100 / dv[i]) for i, value in enumerate(values)]                
                 nutrition_html = """
                 <div id="nutrition-info_6-0" class="comp nutrition-info">
                     <table class="nutrition-info__table">
                         <thead>
                             <tr>
-                                <th class="nutrition-info__heading" colspan="2">Number of Servings: <span class="nutrition-info__heading-aside">{servings}</span></th>
+                                <th class="nutrition-info__heading" colspan="3">Number of Servings: <span class="nutrition-info__heading-aside">{servings}</span></th>
                             </tr>                            
                         </thead>
                         <tbody class="nutrition-info__table--body">
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Calories</td>
                                 <td class="nutrition-info__table--cell">{calories}</td>
+                                <td class="nutrition-info__table--cell"></td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Total Fat</td>
                                 <td class="nutrition-info__table--cell">{total_fat}</td>
+                                <td class="nutrition-info__table--cell">{fat_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Saturated Fat</td>
                                 <td class="nutrition-info__table--cell">{saturated_fat}</td>
+                                <td class="nutrition-info__table--cell">{sat_fat_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Cholesterol</td>
                                 <td class="nutrition-info__table--cell">{cholesterol}</td>
+                                <td class="nutrition-info__table--cell">{chol_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Sodium</td>
                                 <td class="nutrition-info__table--cell">{sodium}</td>
+                                <td class="nutrition-info__table--cell">{sodium_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Total Carbohydrate</td>
                                 <td class="nutrition-info__table--cell">{total_carbohydrate}</td>
+                                <td class="nutrition-info__table--cell">{carb_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Dietary Fiber</td>
                                 <td class="nutrition-info__table--cell">{dietary_fiber}</td>
+                                <td class="nutrition-info__table--cell">{diet_fibe_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Total Sugars</td>
                                 <td class="nutrition-info__table--cell">{total_sugars}</td>
+                                <td class="nutrition-info__table--cell">{tot_sugars_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Protein</td>
                                 <td class="nutrition-info__table--cell">{protein}</td>
+                                <td class="nutrition-info__table--cell">{protein_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Vitamin C</td>
                                 <td class="nutrition-info__table--cell">{vitc}</td>
+                                <td class="nutrition-info__table--cell">{vitc_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Calcium</td>
                                 <td class="nutrition-info__table--cell">{calc}</td>
+                                <td class="nutrition-info__table--cell">{calc_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Iron</td>
                                 <td class="nutrition-info__table--cell">{iron}</td>
+                                <td class="nutrition-info__table--cell">{iron_percent}% DV</td>
                             </tr>
                             <tr class="nutrition-info__table--row">
                                 <td class="nutrition-info__table--cell">Potassium</td>
                                 <td class="nutrition-info__table--cell">{pota}</td>
+                                <td class="nutrition-info__table--cell">{pota_percent}% DV</td>
                             </tr>
                         </tbody>
                     </table>
@@ -378,20 +442,33 @@ def main():
                 """
                 # Use the nutrition HTML and format it with the values
                 formatted_html = nutrition_html.format(
-                    calories=random_recipe['Calories'],
-                    total_fat=random_recipe['Total Fat'],
-                    saturated_fat=random_recipe['Saturated Fat'],
-                    cholesterol=random_recipe['Cholesterol'],
-                    sodium=random_recipe['Sodium'],
-                    total_carbohydrate=random_recipe['Total Carbohydrate'],
-                    dietary_fiber=random_recipe['Dietary Fiber'],
-                    total_sugars=random_recipe['Total Sugars'],
-                    servings=random_recipe['Number of Servings'],
-                    vitc=random_recipe['Vitamin C'],
-                    calc=random_recipe['Calcium'],
-                    iron=random_recipe['Iron'],
-                    pota=random_recipe['Potassium'],
-                    protein=random_recipe['Protein']
+                    calories=response_json[0]['Calories'],
+                    total_fat=response_json[0]['Total Fat'],
+                    saturated_fat=response_json[0]['Saturated Fat'],
+                    cholesterol=response_json[0]['Cholesterol'],
+                    sodium=response_json[0]['Sodium'],
+                    total_carbohydrate=response_json[0]['Total Carbohydrate'],
+                    dietary_fiber=response_json[0]['Dietary Fiber'],
+                    total_sugars=response_json[0]['Total Sugars'],
+                    servings=response_json[0]['Number of Servings'],
+                    vitc=response_json[0]['Vitamin C'],
+                    calc=response_json[0]['Calcium'],
+                    iron=response_json[0]['Iron'],
+                    pota=response_json[0]['Potassium'],
+                    protein=response_json[0]['Protein'],
+                    fat_percent=dv_percent[0],
+                    sat_fat_percent=dv_percent[1],
+                    chol_percent=dv_percent[2],
+                    sodium_percent=dv_percent[3],
+                    carb_percent=dv_percent[4],
+                    diet_fibe_percent=dv_percent[5],
+                    tot_sugars_percent=dv_percent[6],
+                    protein_percent=dv_percent[7],
+                    vitc_percent=dv_percent[8],
+                    calc_percent=dv_percent[9],
+                    iron_percent=dv_percent[10],
+                    pota_percent=dv_percent[11]
+
                 )
 
                 # Define a function to apply the CSS styles to the table cells
@@ -402,50 +479,19 @@ def main():
                     # Add the nutrition table to the Streamlit app
                     st.write("<h2 style='text-align:left;'>Nutrition Facts (per serving)</h2>", unsafe_allow_html=True)
                     st.write(f"<div style='max-height:none; overflow:auto'>{formatted_html}</div>", unsafe_allow_html=True)  
-                    st.write("<p style='text-align:left;'>*Nutrition information is calculated using an ingredient database and should be considered an estimate.</p>", unsafe_allow_html=True)  
-                # extract only numeric values and convert mg to g
-                values = [
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Fat'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Saturated Fat'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Cholesterol'])) / 1000, 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Sodium'])) / 1000, 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Carbohydrate'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Dietary Fiber'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Total Sugars'])), 
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Protein'])),
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Vitamin C'])) / 1000,
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Calcium'])) / 1000,
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Iron'])) / 1000,
-                    float(re.sub(r'[^\d.]+', '', random_recipe['Potassium'])) / 1000
-                ]
+                    st.write("<p style='text-align:left;'>*The % Daily Value (DV) tells you how much a nutrient in a food serving contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>", unsafe_allow_html=True)                
                 # create pie chart
                 labels = ['Total Fat', 'Saturated Fat', 'Cholesterol', 'Sodium', 'Total Carbohydrate', 'Dietary Fiber', 'Total Sugars', 'Protein', 'Vitamin C', 'Calcium', 'Iron', 'Potassium']
                 fig = go.Figure(data=[go.Pie(labels=labels, values=values)])
                 st.markdown("### Macronutrients Pie Chart ;) (In Grams)")
-                st.plotly_chart(fig)   
-                st.write("**Tags:** ", random_recipe['Tags'])
-                st.write("**Recipe URL:** ", random_recipe['Recipe URLs'])                  
+                st.plotly_chart(fig)  
+                st.write("**Tags:** ", response_json[0]['Tags'])
+                st.write("**Recipe URL:** ", response_json[0]['Recipe URLs'])                  
                 st.markdown("### JSON Response:")
-                st.write(response_json)           
+                st.write(response_json)      
 
         st.markdown("<hr style='text-align: center;'>", unsafe_allow_html=True)
         st.markdown("<p style='text-align: center'><a href='https://github.com/Kaludii'>Github</a> | <a href='https://huggingface.co/Kaludi'>HuggingFace</a></p>", unsafe_allow_html=True)        
 
 if __name__ == '__main__':
     main()
-
-
-## Fetch random recipes:
-## Fetch the healthy recipe
-#response = requests.get("test.org/test.json")
-#data = response.json()
-#healthy_recipes = [recipe for recipe in data['recipe'] if recipe['calories'] < int(calories)]
-#healthy_recipe = random.choice(healthy_recipes)
-
-## Fetch the unhealthy recipe
-#unhealthy_recipes = [recipe for recipe in data['recipe'] if recipe['calories'] < int(calories)]
-#unhealthy_recipe = random.choice(unhealthy_recipes)
-
-## Add code to display the healthy and unhealthy recipes
-#st.write("Healthy Recipe: ", healthy_recipe['name'], "Calories: ", healthy_recipe['calories'])
-#st.write("Unhealthy Recipe: ", unhealthy_recipe['name'], "Calories: ", unhealthy_recipe['calories'])