728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>You wanna try something new?</title>
<link rel="stylesheet" href="/static/style_main.css">
<style>
.button-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.button-group button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #76c893;
color: white;
transition: background-color 0.3s;
}
.button-group button:hover {
background-color: #76c893;
}
.output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>You wanna try something new?</h1>
<div class="button-group">
<button onclick="chooseStyle('western')">Western</button>
<button onclick="chooseStyle('spicy')">Spicy</button>
<button onclick="chooseStyle('non-spicy')">Non-Spicy</button>
<button onclick="chooseStyle('stay-healthy')">Stay Healthy</button>
<button onclick="chooseStyle('comfort-food')">Comfort Food</button>
</div>
<div class="output-section">
<h2>YouTube Information:</h2>
<div id="youtube-output" class="output"></div>
<h2>Recipe:</h2>
<div id="recipe-output" class="output"></div>
<h2>Instructions:</h2>
<div id="instructions-output" class="output"></div>
</div>
</div>
<script>
async function chooseStyle(style) {
try {
// Send POST request to Flask backend
const response = await fetch('/generate_recipe_by_style', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ style })
});
if (!response.ok) {
throw new Error('Failed to fetch recipe. Please try again.');
}
const data = await response.json();
displayRecipe(data);
} catch (error) {
alert(error.message);
}
}
function displayRecipe(data) {
if (data.error) {
alert(data.error);
return;
}
document.getElementById('recipe-output').innerText = data.recipe || "No recipe available.";
const instructions = data.instructions || "Instructions not available. Please try again later.";
document.getElementById('instructions-output').innerText = instructions;
const youtubeOutput = document.getElementById('youtube-output');
youtubeOutput.innerHTML = ''; // Clear previous content
if (data.video_id && data.recipe_name) {
const videoId = data.video_id;
youtubeOutput.innerHTML = `
<h3>Watch "${data.recipe_name}" Video:</h3>
videoId}" frameborder="0" allowfullscreen></iframe>
`;
} else if (data.recipe_name) {
const query = encodeURIComponent(data.recipe_name);
youtubeOutput.innerHTML = `
query}" target="_blank">
Search for "${data.recipe_name}" on YouTube
</a>
`;
} else {
youtubeOutput.innerText = "No YouTube video available.";
}
}
</script>
</body>
</html>
이번 해커톤에서 재미삼아 만든 앱이댯
전체 링크는 아래를 참조
전체 링크는 아래를 참조
728x90
'호그와트' 카테고리의 다른 글
| Food Is Therapy F I T 앱 맛보기 3 (0) | 2024.11.18 |
|---|---|
| Food Is Therapy F I T 앱 맛보기 1 (0) | 2024.11.18 |
| vola vola easy vola (0) | 2024.11.14 |
| pqg (0) | 2024.11.08 |
| CVE 2024 27198 without annoying faker lib (0) | 2024.10.20 |