Puoi fare questa cosa assurda?? In sostanza questo sito permette di chattare con le AI, e l'AI ritorna **MAIUSCOLO** o nei codici ad esempio usa: ```cpp #include <iostream> int main() { std::cout << "Ciao, mondo!" << std::endl; return 0; } ```

Quindi ti chiedo di fare che ogni messaggio abbia l'indentazione, e che sia anche formattato nei modi adeguati...

Codice HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat con GPT</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        .chat-container {
            width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .chat-messages {
            max-height: 85%;
            overflow-y: auto;
            padding: 10px;
        }
        .chat-bubble {
            background: #e0e0e0;
            border-radius: 10px;
            padding: 10px;
            margin: 5px 0;
        }
        .chat-bubble.user {
            background: #99ccff;
            align-self: flex-end;
        }
        .chat-input {
            display: flex;
            border-top: 1px solid #ddd;
        }
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 0;
            outline: none;
        }
        .chat-input button {
            background: #007bff;
            border: none;
            color: white;
            padding: 10px 20px;
            cursor: pointer;
        }
        #generated-image {
            width: 25%;
            height: auto;
            border-radius: 10px;
            position: fixed;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-messages" id="chat-messages"></div>
        <div class="chat-input">
            <input type="text" id="message" placeholder="Scrivi un messaggio...">
            <button onclick="sendMessage()">Invia</button>
        </div>
    </div>
    <img id="generated-image" />
    <script>
        function addMessage(message, isUser = false) {
            const chatMessages = document.getElementById('chat-messages');
            const bubble = document.createElement('div');
            bubble.className = 'chat-bubble' + (isUser ? ' user' : '');
            bubble.textContent = message;
            chatMessages.appendChild(bubble);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        async function sendMessage() {
            const messageInput = document.getElementById('message');
            const userMessage = messageInput.value;
            if (!userMessage) return;
            
            addMessage(userMessage, true);
            messageInput.value = '';

            // Invia il messaggio per ricevere la risposta e generare un'immagine
            const response = await fetch('/send_message', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ message: userMessage })
            });

            if (response.ok) {
                const data = await response.json();
                addMessage(data.message);
                
                // Genera l'immagine
                await generateImage(data.message); // Passa la risposta per generare l'immagine
            } else {
                addMessage('Errore: impossibile ricevere risposta da GPT');
            }
        }

        async function generateImage(prompt) {
            const response = await fetch('/generate_image', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ prompt: prompt })
            });

            if (response.ok) {
                const data = await response.json();
                const imgElement = document.getElementById('generated-image');
                imgElement.src = `data:image/png;base64,${data.image}`;
                imgElement.style.display = 'block'; // Mostra l'immagine
            } else {
                console.error('Errore nella generazione dell\'immagine');
            }
        }
    </script>
</body>
</html>