Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 6,667 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<html><head><base href="https://websim.ai/culinary-creator"><title>Culinary Creator: Your Personal Recipe Wizard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }
  .float-animation {
    animation: float 4s ease-in-out infinite;
  }
</style>
</head>
<body class="bg-gradient-to-r from-green-400 to-blue-500 text-white min-h-screen font-sans">
  <header class="py-6 relative">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl font-bold text-center">Culinary Creator</h1>
      <p class="mt-2 text-center text-green-100">Your Personal Recipe Wizard</p>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8">
    <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8">
      <h2 class="text-2xl font-semibold mb-4">What's in Your Kitchen?</h2>
      <form id="recipe-form" class="space-y-4">
        <div>
          <label for="ingredients" class="block text-sm font-medium text-green-100">Available Ingredients</label>
          <textarea id="ingredients" rows="3" class="mt-1 block w-full px-3 py-2 bg-green-600 border border-green-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white" placeholder="Enter ingredients separated by commas (e.g., chicken, rice, tomatoes)"></textarea>
        </div>
        <div>
          <label for="dietary-preferences" class="block text-sm font-medium text-green-100">Dietary Preferences</label>
          <select id="dietary-preferences" class="mt-1 block w-full px-3 py-2 bg-green-600 border border-green-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
            <option value="none">No specific preference</option>
            <option value="vegetarian">Vegetarian</option>
            <option value="vegan">Vegan</option>
            <option value="gluten-free">Gluten-Free</option>
            <option value="low-carb">Low-Carb</option>
            <option value="keto">Keto</option>
          </select>
        </div>
        <div>
          <label for="cuisine" class="block text-sm font-medium text-green-100">Preferred Cuisine (Optional)</label>
          <input type="text" id="cuisine" class="mt-1 block w-full px-3 py-2 bg-green-600 border border-green-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white" placeholder="e.g., Italian, Mexican, Asian">
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-green-900 bg-green-300 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            Create Recipe
          </button>
        </div>
      </form>
    </div>

    <div id="recipe-container" class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 hidden">
      <h2 class="text-2xl font-semibold mb-4">Your Custom Recipe</h2>
      <div id="recipe-content" class="space-y-4">
        <!-- Recipe will be inserted here -->
      </div>
    </div>
  </main>

  <div class="fixed bottom-4 right-4 w-24 h-24">
    <img src="https://websim.ai/culinary-creator/chef-hat.png" alt="Chef hat" class="w-full h-full object-contain float-animation">
  </div>

  <script>
    document.getElementById('recipe-form').addEventListener('submit', function(e) {
      e.preventDefault();
      const ingredients = document.getElementById('ingredients').value;
      const dietaryPreferences = document.getElementById('dietary-preferences').value;
      const cuisine = document.getElementById('cuisine').value;
      
      if (!ingredients) {
        alert('Please enter some ingredients.');
        return;
      }

      generateRecipe(ingredients, dietaryPreferences, cuisine);
    });

    function generateRecipe(ingredients, dietaryPreferences, cuisine) {
      // Show loading state
      const recipeContainer = document.getElementById('recipe-container');
      recipeContainer.classList.remove('hidden');
      const recipeContent = document.getElementById('recipe-content');
      recipeContent.innerHTML = '<p>Cooking up a delicious recipe...</p>';

      // Simulate API call with setTimeout
      setTimeout(() => {
        const recipe = createRecipe(ingredients, dietaryPreferences, cuisine);
        recipeContent.innerHTML = `
          <h3 class="text-xl font-semibold">${recipe.name}</h3>
          <p class="italic">${recipe.description}</p>
          <h4 class="font-semibold mt-4">Ingredients:</h4>
          <ul class="list-disc list-inside">
            ${recipe.ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
          </ul>
          <h4 class="font-semibold mt-4">Instructions:</h4>
          <ol class="list-decimal list-inside">
            ${recipe.instructions.map(instruction => `<li>${instruction}</li>`).join('')}
          </ol>
        `;
      }, 2000);
    }

    function createRecipe(ingredients, dietaryPreferences, cuisine) {
      // This is a simplified recipe generation. In a real application, this would be much more complex and context-aware.
      const ingredientList = ingredients.split(',').map(i => i.trim());
      
      let recipeName = "Delicious " + ingredientList[0].charAt(0).toUpperCase() + ingredientList[0].slice(1) + " Dish";
      if (cuisine) {
        recipeName = cuisine.charAt(0).toUpperCase() + cuisine.slice(1) + "-style " + recipeName;
      }

      let description = `A ${dietaryPreferences !== 'none' ? dietaryPreferences + ' ' : ''}recipe featuring ${ingredientList.join(', ')}.`;

      let recipeIngredients = ingredientList.map(ingredient => `1 cup ${ingredient}`);
      recipeIngredients.push("Salt and pepper to taste");
      recipeIngredients.push("2 tablespoons olive oil");

      let instructions = [
        "Prepare all ingredients by washing and chopping as needed.",
        `Heat olive oil in a large pan over medium heat.`,
        `Add ${ingredientList[0]} to the pan and cook for 5 minutes.`,
        `Add the remaining ingredients and stir well.`,
        "Cook for an additional 10-15 minutes, stirring occasionally.",
        "Season with salt and pepper to taste.",
        "Serve hot and enjoy your custom creation!"
      ];

      return {
        name: recipeName,
        description: description,
        ingredients: recipeIngredients,
        instructions: instructions
      };
    }
  </script>
</body></html>