pourqoui j'ai cette erreur dans mon note booke : Cell In[1], line 15
    min-height: 100vh;
                  ^
SyntaxError: invalid decimal literal. Voici le code : <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dataset Splitting Illustration</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f4f8; /* Light blue-gray background */
        }
        .container {
            background-color: #ffffff;
            border-radius: 1.5rem; /* More rounded corners */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            max-width: 800px;
            width: 90%;
            text-align: center;
        }
        .loading-spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #3b82f6; /* Blue */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 2rem auto;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">Visualizing Dataset Splitting</h1>
        <p class="text-gray-600 mb-8">Generating an image to illustrate the importance of splitting your dataset into Training, Validation, and Testing sets for robust AI model development.</p>
        <div id="image-container" class="flex justify-center items-center min-h-[300px]">
            <div class="loading-spinner" id="loading-spinner"></div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const imageContainer = document.getElementById('image-container');
            const loadingSpinner = document.getElementById('loading-spinner');

            try {
                // Prompt for image generation
                const prompt = "An abstract, illustrative image showing a large dataset being split into three distinct, clearly labeled sections: 'Training Set', 'Validation Set', and 'Testing Set'. Use visual metaphors like a large block of data being divided by lines or arrows, with each smaller section having a distinct purpose indicated by icons or subtle imagery (e.g., a book for training, a quiz for validation, a trophy/finish line for testing). The overall aesthetic should be clean, modern, and conceptual, using a palette of blues, greens, and grays, emphasizing clarity and organization. Avoid complex scenes or human figures. Focus on the data flow and division.";

                // Payload for image generation API
                const payload = {
                    instances: { prompt: prompt },
                    parameters: { "sampleCount": 1 }
                };

                // API key (empty string as per instructions)
                const apiKey = ""; 
                const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;

                // Fetch the image
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });

                const result = await response.json();

                if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
                    const imageUrl = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
                    const imgElement = document.createElement('img');
                    imgElement.src = imageUrl;
                    imgElement.alt = "Illustration of dataset splitting";
                    imgElement.classList.add('max-w-full', 'h-auto', 'rounded-lg', 'shadow-md'); /* Responsive image styling */
                    
                    imageContainer.innerHTML = ''; // Clear loading spinner
                    imageContainer.appendChild(imgElement);
                } else {
                    imageContainer.innerHTML = '<p class="text-red-500">Failed to generate image. Please try again.</p>';
                    console.error('Image generation failed:', result);
                }
            } catch (error) {
                imageContainer.innerHTML = '<p class="text-red-500">An error occurred while generating the image.</p>';
                console.error('Error:', error);
            } finally {
                loadingSpinner.style.display = 'none'; // Hide spinner regardless of outcome
            }
        });
    </script>
</body>
</html>