Hackathons/VTHacks-12
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI and Food

Browse Source
This commit is contained in:
GamerBoss101
2024-09-15 01:38:51 -04:00
parent 39873ab767
commit f8ad3b2f72
14 changed files with 344 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/Navbar.svelte
View File

@@ -1,3 +1,7 @@
<script>
import { page } from '$app/stores';
</script>
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-circle bs-icon-primary shadow d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
@@ -8,7 +12,12 @@
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/survey">Survey</a></li>
<li class="nav-item"><a class="nav-link" href="/contacts">Contact Us</a></li>
</ul><a class="btn btn-primary shadow" role="button" href="signup.html" style="background: rgb(55, 99, 244);">Sign up</a>
</ul>
{ #if $page.data.authInfo }
<a class="btn btn-primary shadow" role="button" href="https://auth.fooddecisive.co/account" style="background: rgb(55, 99, 244);">Dashboard</a>
{ :else }
<a class="btn btn-primary shadow" role="button" href="https://auth.fooddecisive.co/" style="background: rgb(55, 99, 244);">Sign up</a>
{ /if }
</div>
</div>
</nav>

8
src/lib/components/form/QuestionSelect.svelte
View File

@@ -3,11 +3,7 @@
import Survey from "./Survey.svelte";
export let parentDiv;
console.log(parentDiv);
function open5Survey(questions) {
console.log(questions);
parentDiv.innerHTML = "";
new Survey({
target: parentDiv,
@@ -18,8 +14,6 @@
}
function open10Survey(questions) {
console.log(questions);
parentDiv.innerHTML = "";
new Survey({
target: parentDiv,
@@ -30,8 +24,6 @@
}
function open15Survey(questions) {
console.log(questions);
parentDiv.innerHTML = "";
new Survey({
target: parentDiv,

78
src/lib/components/form/Survey.svelte
View File

@@ -1,11 +1,15 @@
<script>
// @ts-nocheck
import '../../survey.css';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
let formData = writable({
answers: [],
currentQuestion: 1
currentQuestion: 1,
userID: $page.data.authInfo ? $page.data.authInfo.id : null,
});
export let numQuestion = 0;
@@ -29,22 +33,54 @@
"What’s the calorie range you want your meal to stay in? (You can specify yes or no)"
];
console.log(numQuestion);
onMount(() => {
const buttons = document.querySelectorAll('.btn-info');
buttons.forEach(button => {
button.addEventListener('click', () => {
button.classList.toggle('active');
});
});
});
function nextQuestion() {
if ($formData.currentQuestion === numQuestion) return;
$formData.currentQuestion++;
$formData.answers.push(inputEle.value);
inputEle.value = '';
}
function submitForm() {
async function submitForm() {
let obj = $formData;
obj.answers.push(inputEle.value);
obj.restrictions = [];
const buttons = document.querySelectorAll('.btn-info');
buttons.forEach(button => {
if (button.classList.contains('active')) {
obj.restrictions.push(button.innerText);
}
});
let recipeData = await fetch('/api/recipes/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(obj)
});
recipeData = await recipeData.json();
console.log(recipeData);
goto(`/food/${recipeData.id}`, { replaceState: true });
}
</script>
<div class="container py-5">
<div class="container">
<div class="row mb-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<h2 class="fw-bold">Question {$formData.currentQuestion}&nbsp;</h2>
@@ -57,7 +93,7 @@
<div class="card-body mx-auto">
<p class="card-text" style="font-size: 40px;">
<strong>
<span style="background-color: transparent;">{questions[$formData.currentQuestion]}</span>
<span style="background-color: transparent;">{questions[$formData.currentQuestion-1]}</span>
</strong>
</p>
</div>
@@ -70,6 +106,31 @@
</div>
</div>
<br>
<h4 class="card-title" style="text-align: center;">Select Dietary Restriction</h4>
<div class="row">
<div class="col">
<div class="btn-group" role="group" style="width: 100%;">
<button class="btn btn-info" type="button">Vegetarian</button>
<button class="btn btn-info" type="button">Vegan</button>
<button class="btn btn-info" type="button">Gluten-free</button>
<button class="btn btn-info" type="button">Lactose-free</button>
<button class="btn btn-info" type="button">Nut-free</button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="btn-group" role="group" style="width: 100%;">
<button class="btn btn-info" type="button">Halal</button>
<button class="btn btn-info" type="button">Kosher</button>
<button class="btn btn-info" type="button">Keto</button>
<button class="btn btn-info" type="button">Diabetic</button>
<button class="btn btn-info" type="button">Pescatarian</button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
{#if $formData.currentQuestion === numQuestion}
@@ -99,4 +160,9 @@
height: 50px;
}
.container {
display: block;
min-width: 70% !important;
}
</style>

7
src/lib/survey.css Normal file
View File

@@ -0,0 +1,7 @@
button.active {
background-color: #ff6a00 !important;
color: white;
border: none;
}

32
src/routes/+layout.js
View File

@@ -1,24 +1,20 @@
import {createClient} from "@propelauth/javascript";
const authClient = createClient({
authUrl: "https://auth.fooddecisive.co/",
enableBackgroundTokenRefresh: true,
});
export async function load() {
/*
const authClient = createClient({
authUrl: "https://auth.fooddecisive.co/",
enableBackgroundTokenRefresh: true,
});
const authInfo = await authClient.getAuthenticationInfoOrNull();
console.log("authInfo", authInfo)
if (authInfo) {
console.log("User is logged in as", authInfo.user.email)
} else {
console.log("User is not logged in")
}
const authInfo = await authClient.getAuthenticationInfoOrNull();
console.log("authInfo", authInfo)
if (authInfo) {
console.log("User is logged in as", authInfo.user.email)
} else {
console.log("User is not logged in")
}
return {
authInfo
};
*/
return {
authInfo: authInfo ? authInfo : null
};
}

6
src/routes/+page.svelte
View File

@@ -1,9 +1,3 @@
<script>
import { page } from '$app/stores';
console.log($page.data);
</script>
<header class="bg-dark">
<div class="container pt-4 pt-xl-5">

71
src/routes/food/+page.svelte
View File

@@ -1,71 +0,0 @@
<script>
</script>
<section class="py-5">
<div class="container py-5">
<div class="card">
<div class="card-body mx-auto">
<h4 class="card-title" style="font-size: 50px;">You Want</h4>
</div>
</div>
<div class="row">
<div class="col">
<div class="card" style="margin-bottom: 90px;margin-top: 20px;">
<div class="card-body mx-auto">
<p class="card-text mx-auto" style="font-size: 60px;font-weight: bold;text-align: center;">Butter Chicken</p>
<div class="card">
<div class="card-body">
<p class="card-text">Butter Chicken is a delicious Indian Meal. It was made by the British after they colonized the country.</p>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-xxl-6" style="margin-bottom: 20px;">
<div class="card" style="margin-bottom: 20px;">
<div class="card-body" style="margin-bottom: 20px;">
<h4 class="card-title mx-auto" style="text-align: center;margin-bottom: 20px;">Nutrition Facts</h4>
<p class="card-text" style="margin-bottom: 20px;">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
<div class="col" style="margin-bottom: 20px;">
<div class="card">
<div class="card-body">
<h4 class="card-title" style="text-align: center;">Ingredients</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title" style="text-align: center;">Title</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body mx-auto"><button class="btn btn-primary" type="button">Show Recipe</button></div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title" style="text-align: center;">Rate Your Generated Recipe!</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</section>

9
src/routes/food/[id]/+page.server.js Normal file
View File

@@ -0,0 +1,9 @@
import { PUBLIC_URL } from '$env/static/public';
export async function load({ params }) {
const foodID = params.id;
let foodData = await fetch(`${PUBLIC_URL}/api/recipes/${foodID}`);
foodData = await foodData.json();
return foodData;
}

96
src/routes/food/[id]/+page.svelte Normal file
View File

@@ -0,0 +1,96 @@
<script>
// @ts-nocheck
import { page } from '$app/stores';
import { onMount } from "svelte";
let foodData = $page.data;
let nutritionFactsEle;
let IngredientsEle;
$: showRecipe = false;
function CLshowRecipe() {
showRecipe = true;
setTimeout(() => {
for (const [key, value] of Object.entries(foodData.nutritionFacts)) {
nutritionFactsEle.innerText += `${key}: ${value}\n`;
}
IngredientsEle.innerText = foodData.ingredients.map(ingredient => {
return `${ingredient.name}: ${ingredient.quantity}`;
}).join('\n');
}, 500);
}
</script>
<section class="py-5">
<div class="container py-5">
<div class="card">
<div class="card-body mx-auto">
<h4 class="card-title" style="text-align: center; font-size: 50px;">You Want</h4>
<p class="card-text mx-auto" style="font-size: 60px;font-weight: bold;text-align: center;">{foodData.name}</p>
<p class="card-text">{foodData.description}</p>
</div>
{#if !showRecipe}
<div class="row">
<div class="col">
<div class="card">
<div class="card-body mx-auto">
<button class="btn btn-primary" type="button" on:click={CLshowRecipe}>Show Recipe</button>
</div>
</div>
</div>
</div>
{:else }
<div class="row">
<div class="col">
<div class="card" style="margin-bottom: 90px;margin-top: 20px;">
<div class="card-body">
<div class="row">
<div class="col-xxl-6" style="margin-bottom: 20px;">
<div class="card" style="margin-bottom: 20px;">
<div class="card-body" style="margin-bottom: 20px;">
<h2 class="card-title mx-auto" style="text-align: center;margin-bottom: 20px;">Nutrition Facts</h2>
<p class="card-text" style="text-align:center; margin-bottom: 20px;" bind:this={nutritionFactsEle}></p>
</div>
</div>
</div>
<div class="col" style="margin-bottom: 20px;">
<div class="card">
<div class="card-body">
<h2 class="card-title" style="text-align: center;">Ingredients</h2>
<p class="card-text" style="text-align: center;" bind:this={IngredientsEle}></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h2 class="card-title" style="text-align: center;">Instructions</h2>
<p class="card-text">
<ul>
{ #each foodData.instructions as instruction }
<li>{instruction}</li>
{ /each }
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/if}
<h4 class="card-title" style="text-align: center;">Rate Your Suggested Food!</h4>
<br>
<br>
</div>
</div>
</section>

2
src/routes/survey/+page.svelte
View File

@@ -24,7 +24,7 @@
</div>
</div>
<div id="form" class="card" style="padding-top: 20px;padding-bottom: 100px;">
<div bind:this={parentDiv} class="card-body mx-auto"></div>
<div bind:this={parentDiv} class="card-body"></div>
</div>
</div>
</section>