<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Transformer</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }
        h1, h2 { color: #333; }
        form { margin-bottom: 20px; }
        label { display: block; margin-top: 10px; }
        input[type="text"], textarea, select { width: 100%; padding: 8px; margin-top: 5px; }
        button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; cursor: pointer; margin-top: 10px; }
        button:hover { background-color: #45a049; }
        #result { background-color: #f9f9f9; border: 1px solid #ddd; padding: 15px; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Recipe Transformer</h1>
    
    <h2>Add New Recipe to Database</h2>
    <form id="addRecipeForm">
        <label for="add_recipe_name">Recipe Name:</label>
        <input type="text" id="add_recipe_name" name="recipe_name" required>
        
        <label for="add_recipe_text">Recipe Text:</label>
        <textarea id="add_recipe_text" name="recipe_text" rows="4" required></textarea>
        
        <button type="submit">Add Recipe to Database</button>
    </form>

    <h2>Transform Recipe</h2>
    <form id="transformRecipeForm">
        <label for="transform_recipe_name">Recipe Name:</label>
        <input type="text" id="transform_recipe_name" name="recipe_name" required>
        
        <label for="transform_recipe_text">Recipe Text:</label>
        <textarea id="transform_recipe_text" name="recipe_text" rows="4" required></textarea>
        
        <label for="diet">Diet Type:</label>
        <select id="diet" name="diet" required>
            <option value="vegan">Vegan</option>
            <option value="keto">Keto</option>
            <option value="gluten-free">Gluten-Free</option>
            <option value="Jain">Jain</option>
            <option value="vegetarian">Vegetarian</option>
            <option value="Non Vegetarian">Non Vegetarian</option>
        </select>

        <label for="allergy">Allergy:</label>
        <textarea id="allergy" name="Allergy" rows="4" required></textarea>

        <label for="place">Place:</label>
        <textarea id="place" name="Place" rows="4" required></textarea>

        <label for="calories">Calories:</label>
        <textarea id="calories" name="Calories" rows="4" required></textarea>


        <button type="submit">Transform Recipe</button>
    </form>

    <div id="result"></div>

    <script>
        $(document).ready(function() {
            // Add recipe form submission
            $('#addRecipeForm').submit(function(e) {
                e.preventDefault();
                $.post('/add_recipe', $(this).serialize(), function(data) {
                    alert('Recipe added successfully to the database!');
                    $('#addRecipeForm')[0].reset();
                });
            });

            // Transform recipe form submission
            $('#transformRecipeForm').submit(function(e) {
                e.preventDefault();
                $.post('/transform_recipe', $(this).serialize(), function(data) {
                    $('#result').html(
                        '<p><strong>Recipe Name:</strong> ' + data.recipe_name + '</p>' +
                        '<p><strong>Diet:</strong> ' + data.diet + '</p>' +
                        '<p><strong>Original Recipe:</strong></p>' +
                        '<pre>' + data.original_recipe + '</pre>' +
                        '<p><strong>Transformed Recipe:</strong></p>' +
                        '<pre>' + data.transformed_recipe + '</pre>'+
                        '<p><strong>costs_info:</strong> ' + data.costs_info + '</p>' +
                        '<p><strong>nutrition_info:</strong> ' + data.nutrition_info + '</p>' +
                        '<p><strong>calories:</strong> ' + data.calories + '</p>' 
                    
    
                    );
                });
            });
        });
    </script>
</body>
</html>


do the formatting for the output and also add some css to make it look appealing 

currently the output is as follows "Recipe Name: masala daal without water

Diet: vegan

Original Recipe:

Ingredients:
Daal (lentils) - 1 cup (usually split moong dal, toor dal, or masoor dal)
Water - 2-3 cups (for cooking the daal)
Ghee or oil - 2 tbsp
Onion - 1 medium, finely chopped
Tomato - 1 medium, finely chopped
Ginger-garlic paste - 1 tsp
Green chilies - 1-2, chopped (adjust for spice preference)
Turmeric powder - 1/2 tsp
Red chili powder - 1/2 tsp (adjust to taste)
Coriander powder - 1 tsp
Cumin seeds - 1 tsp
Garam masala - 1/2 tsp
Asafoetida (hing) - a pinch
Salt - to taste
Fresh coriander leaves - for garnish, chopped
Lemon juice - 1-2 tsp (optional, for added tanginess)
Optional Ingredients:
Bay leaf - 1 (for extra aroma)
Cinnamon stick - a small piece (for a mild, warm flavor)
Transformed Recipe:

**Masala Daal without Water**

**Diet:** Vegan

**Place:** Mumbai

**Allergy:** None

**Desired Calories:** 300

**Ingredients:**

* Daal (lentils) - 1 cup (cooked)
* Ghee or oil - 2 tbsp
* Onion - 1 medium, finely chopped
* Tomato - 1 medium, finely chopped
* Ginger-garlic paste - 1 tsp
* Green chilies - 1-2, chopped (adjust for spice preference)
* Turmeric powder - 1/2 tsp
* Red chili powder - 1/2 tsp (adjust to taste)
* Coriander powder - 1 tsp
* Cumin seeds - 1 tsp
* Garam masala - 1/2 tsp
* Asafoetida (hing) - a pinch
* Salt - to taste
* Fresh coriander leaves - for garnish, chopped
* Lemon juice - 1-2 tsp (optional, for added tanginess)

**Instructions:**

1. Cook the daal according to the package instructions.
2. Heat the ghee or oil in a pan.
3. Add the onion, tomato, ginger-garlic paste, and green chilies. Cook until softened.
4. Add the turmeric powder, red chili powder, coriander powder, cumin seeds, garam masala, and asafoetida. Sauté for 1 minute.
5. Add the cooked daal and stir to combine.
6. Season with salt to taste.
7. Simmer for 5-7 minutes, or until heated through.
8. Garnish with fresh coriander leaves and lemon juice (optional).

**Nutritional Information (per serving):**

* Calories: 300
* Fat: 15g
* Carbohydrates: 45g
* Protein: 15g
* Fiber: 10g

**Note:** This recipe uses cooked daal to eliminate the need for water. You can use pre-cooked daal from the market or cook it yourself by boiling in unsalted water until done.
costs_info: **Initial Recipe**: * Daal (lentils) - 1 cup: $0.50 * Water - 2-3 cups (not included in cost) * Ghee or oil - 2 tbsp: $0.25 * Onion - 1 medium: $0.15 * Tomato - 1 medium: $0.20 * Ginger-garlic paste - 1 tsp: $0.10 * Green chilies - 1-2: $0.05 * Turmeric powder - 1/2 tsp: $0.05 * Red chili powder - 1/2 tsp: $0.05 * Coriander powder - 1 tsp: $0.10 * Cumin seeds - 1 tsp: $0.05 * Garam masala - 1/2 tsp: $0.05 * Asafoetida (hing) - a pinch: $0.01 * Salt - to taste: $0.01 * Fresh coriander leaves - for garnish: $0.05 * Lemon juice - 1-2 tsp (optional): $0.01 **Total Cost**: $ **1.68** **Generated Recipe**: * Daal (lentils) - 1 cup (cooked): Estimated cost $0.50 (assuming it is pre-cooked) * Ghee or oil - 2 tbsp: $0.25 * Onion - 1 medium: $0.15 * Tomato - 1 medium: $0.20 * Ginger-garlic paste - 1 tsp: $0.10 * Green chilies - 1-2: $0.05 * Turmeric powder - 1/2 tsp: $0.05 * Red chili powder - 1/2 tsp: $0.05 * Coriander powder - 1 tsp: $0.10 * Cumin seeds - 1 tsp: $0.05 * Garam masala - 1/2 tsp: $0.05 * Asafoetida (hing) - a pinch: $0.01 * Salt - to taste: $0.01 * Fresh coriander leaves - for garnish: $0.05 * Lemon juice - 1-2 tsp (optional): $0.01 **Total Cost**: $ **1.53** **Cost Savings**: $0.15 (approx. 9%)

nutrition_info: **Initial Recipe: Masala Daal with Water** *Calories: Not specified* *Fat: Not specified* *Carbohydrates: Not specified* *Protein: Not specified* *Fiber: Not specified* **Generated Recipe: Masala Daal without Water** *Calories: 300* *Fat: 15g* *Carbohydrates: 45g* *Protein: 15g* *Fiber: 10g*

calories: **Initial Recipe:** **Ingredients:** * Daal (lentils) - 1 cup (200g) * Water - 2-3 cups (for cooking the daal) * Ghee or oil - 2 tbsp (30g) * Onion - 1 medium, finely chopped (100g) * Tomato - 1 medium, finely chopped (150g) * Ginger-garlic paste - 1 tsp (5g) * Green chilies - 1-2, chopped (10g) * Turmeric powder - 1/2 tsp (3g) * Red chili powder - 1/2 tsp (3g) * Coriander powder - 1 tsp (6g) * Cumin seeds - 1 tsp (6g) * Garam masala - 1/2 tsp (3g) * Asafoetida (hing) - a pinch * Salt - to taste * Fresh coriander leaves - for garnish, chopped * Lemon juice - 1-2 tsp (optional, for added tanginess) **Nutritional Information (per serving):** * Calories: 520kcal * Fat: 22g * Carbohydrates: 70g * Protein: 25g * Fiber: 15g **Generated Recipe:** **Ingredients:** * Daal (lentils) - 1 cup (cooked) (200g) * Ghee or oil - 2 tbsp (30g) * Onion - 1 medium, finely chopped (100g) * Tomato - 1 medium, finely chopped (150g) * Ginger-garlic paste - 1 tsp (5g) * Green chilies - 1-2, chopped (10g) * Turmeric powder - 1/2 tsp (3g) * Red chili powder - 1/2 tsp (3g) * Coriander powder - 1 tsp (6g) * Cumin seeds - 1 tsp (6g) * Garam masala - 1/2 tsp (3g) * Asafoetida (hing) - a pinch * Salt - to taste * Fresh coriander leaves - for garnish, chopped * Lemon juice - 1-2 tsp (optional, for added tanginess) **Nutritional Information (per serving):** * Calories: 300kcal * Fat: 15g * Carbohydrates: 45g * Protein: 15g * Fiber: 10g"