Есть проблема. В html на сайте каждый блок с кодом отображается в одну строку. Вот то как выглядит сырой ответ от ии: [Вот примеры кода «Привет, мир!» на разных языках программирования:<br/><br/>---<br/><br/>**Python:**<pre><code class="python"><br/>print("Привет, мир!")</code></pre><br/><br/>---<br/><br/>**JavaScript:**<pre><code class="javascript"><br/>console.log("Привет, мир!");</code></pre><br/><br/>---<br/><br/>**C:**<pre><code class="c"><br/>#include &lt;stdio.h&gt;<br/><br/>int main() {<br/>    printf("Привет, мир!\n");<br/>    return 0;<br/>}</code></pre><br/><br/>---<br/><br/>**Java:**<pre><code class="java"><br/>public class Main {<br/>    public static void main(String[] args) {<br/>        System.out.println("Привет, мир!");<br/>    }<br/>}</code></pre><br/><br/>---<br/><br/>**C++:**<pre><code class="cpp"><br/>#include &lt;iostream&gt;<br/><br/>int main() {<br/>    std::cout &lt;&lt; "Привет, мир!" &lt;&lt; std::endl;<br/>    return 0;<br/>}</code></pre><br/><br/>---<br/><br/>**C#:**<pre><code class="csharp"><br/>using System;<br/><br/>namespace HelloWorld {<br/>    class Program {<br/>        static void Main(string[] args) {<br/>            Console.WriteLine("Привет, мир!");<br/>        }<br/>    }<br/>}</code></pre><br/><br/>---<br/><br/>**PHP:**<pre><code class="php"><br/>&lt;?php<br/>echo "Привет, мир!";<br/>?&gt;</code></pre><br/><br/>---<br/><br/>**Ruby:**<pre><code class="ruby"><br/>puts "Привет, мир!"</code></pre><br/><br/>---<br/><br/>**Go:**<pre><code class="go"><br/>package main<br/>import "fmt"<br/><br/>func main() {<br/>    fmt.Println("Привет, мир!")<br/>}</code></pre><br/><br/>---<br/><br/>Если вам нужен пример на другом языке или есть вопросы, пожалуйста, сообщите!]




Вот app.py: [from flask import Flask, render_template, request, jsonify
from gradio_client import Client
import bleach
import markdown2

app = Flask(__name__)

# Инициализируем клиента Gradio
client = Client("yuntian-deng/o1")

# Разрешенные теги и атрибуты для bleach
allowed_tags = bleach.sanitizer.ALLOWED_TAGS.union({'br', 'pre', 'code'})
allowed_attrs = {'code': ['class'], 'pre': ['class']}


@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')


@app.route('/chat', methods=['POST'])
def chat():
    data = request.get_json()
    user_input = data.get('message')
    chat_counter = data.get('chat_counter', 0)
    chatbot = data.get('chatbot', [])

    # Отправляем сообщение ИИ
    result = client.predict(
        inputs=user_input,
        top_p=1,
        temperature=1,
        chat_counter=chat_counter,
        chatbot=chatbot,
        api_name="/predict"
    )

    # Извлекаем ответ ИИ
    ai_response = result[0][-1][1]
    print(ai_response)

    # Обрабатываем markdown в HTML
    ai_response_html = markdown2.markdown(ai_response, extras=["fenced-code-blocks"])

    # Очищаем HTML от потенциально опасных тегов и атрибутов
    ai_response_clean = bleach.clean(
        ai_response_html,
        tags=allowed_tags,
        attributes=allowed_attrs
    )

    # Обновляем chatbot и chat_counter
    updated_chatbot = result[0]
    updated_chat_counter = chat_counter + 1

    # Возвращаем ответ в формате JSON
    return jsonify({
        'response': ai_response_clean,
        'chatbot': updated_chatbot,
        'chat_counter': updated_chat_counter
    })


@app.route('/reset', methods=['POST'])
def reset():
    # Сбрасываем состояние ИИ
    client.predict(api_name="/reset_textbox")
    return jsonify({'status': 'reset'})


if __name__ == '__main__':
    app.run(debug=True)
]




index.html: [<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Чат с ИИ</title>
    <style>
        .chat-container {
            width: 600px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }

        .message {
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            max-width: 80%;
        }

        .user {
            background-color: #DCF8C6;
            text-align: right;
            margin-left: auto;
        }

        .ai {
            background-color: #ECE5DD;
            text-align: left;
            margin-right: auto;
        }

        .chat-form {
            display: flex;
            margin-top: 20px;
        }

        .chat-form input[type="text"] {
            flex: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .chat-form input[type="submit"] {
            padding: 10px 20px;
            font-size: 16px;
            margin-left: 10px;
            border: none;
            background-color: #4CAF50;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }

        .chat-form input[type="submit"]:hover {
            background-color: #45a049;
        }

        .reset-button {
            margin-top: 10px;
            text-align: center;
        }

        .reset-button button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            background-color: #f44336;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }

        .reset-button button:hover {
            background-color: #da190b;
        }

        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }

        code {
            font-family: Consolas, monospace;
        }
    </style>
    <!-- Подключаем CSS для подсветки -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
    <!-- Подключаем библиотеку Highlight.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
</head>
<body>
<div class="chat-container">
    <h1>Чат с ИИ</h1>
    <div id="chat">
        <!-- Здесь будут отображаться сообщения -->
    </div>
    <form class="chat-form" id="chat-form">
        <input type="text" id="message-input" placeholder="Введите сообщение" autofocus required/>
        <input type="submit" value="Отправить"/>
    </form>
    <div class="reset-button">
        <button type="button" id="reset-btn">Очистить чат</button>
    </div>
</div>
<script>
    let chatCounter = 0;
    let chatbot = [];

    const chatContainer = document.getElementById('chat');

    // Загрузка истории чата из localStorage
    if (localStorage.getItem('chatHistory')) {
        chatContainer.innerHTML = localStorage.getItem('chatHistory');
        chatCounter = parseInt(localStorage.getItem('chatCounter')) || 0;
        chatbot = JSON.parse(localStorage.getItem('chatbot')) || [];
        // Инициализируем подсветку в загруженных сообщениях
        hljs.highlightAll();
    }

    document.getElementById('chat-form').addEventListener('submit', function(event) {
        event.preventDefault();
        const messageInput = document.getElementById('message-input');
        const userMessage = messageInput.value.trim();
        if (userMessage === '') return;

        // Отображаем сообщение пользователя
        addMessage('user', userMessage);
        messageInput.value = '';

        // Отправляем сообщение на сервер
        fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: userMessage,
                chat_counter: chatCounter,
                chatbot: chatbot
            }),
        })
        .then(response => response.json())
        .then(data => {
            // Отображаем ответ ИИ
            addMessage('ai', data.response);

            // Обновляем chatCounter и chatbot
            chatCounter = data.chat_counter;
            chatbot = data.chatbot;

            // Сохраняем историю чата и состояние в localStorage
            localStorage.setItem('chatHistory', chatContainer.innerHTML);
            localStorage.setItem('chatCounter', chatCounter);
            localStorage.setItem('chatbot', JSON.stringify(chatbot));

            // Инициализируем подсветку в новых сообщениях
            hljs.highlightAll();
        })
        .catch((error) => {
            console.error('Ошибка:', error);
        });
    });

    document.getElementById('reset-btn').addEventListener('click', function() {
        // Отправляем запрос на сброс состояния на сервер
        fetch('/reset', {
            method: 'POST',
        })
        .then(response => response.json())
        .then(data => {
            // Очищаем историю чата и состояние
            chatContainer.innerHTML = '';
            chatCounter = 0;
            chatbot = [];

            // Удаляем данные из localStorage
            localStorage.removeItem('chatHistory');
            localStorage.removeItem('chatCounter');
            localStorage.removeItem('chatbot');
        })
        .catch((error) => {
            console.error('Ошибка:', error);
        });
    });

    function addMessage(sender, text) {
       const messageDiv = document.createElement('div');
       messageDiv.classList.add('message', sender);

       const p = document.createElement('p');
       p.innerHTML = text;

       messageDiv.appendChild(p);
       chatContainer.appendChild(messageDiv);

       // Инициализируем подсветку в новых сообщениях
       hljs.highlightAll();

       // Прокручиваем чат вниз
       chatContainer.scrollTop = chatContainer.scrollHeight;

       // Сохраняем историю чата в localStorage
       localStorage.setItem('chatHistory', chatContainer.innerHTML);
   }

</script>
</body>
</html>
]