ai0/image.html - master - MayMi/new

ai0/image.html
208 строк10 KB
MayMi
Create: index.html, image.html, image.html
19 июн 2026, 19:40
19 июн 2026, 19:401d115d0
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Before AI · Семантический поиск</title>
    <!-- Bootstrap 5 (светлая тема) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
    <style>
        /* Кастомные цвета для оформления */
        .header-custom {
            background: linear-gradient(135deg, #AFEEEE 0%, #7FFFD4 50%, #40E0D0 100%);
            color: #1a3a3a;
        }
        .btn-search {
            background: linear-gradient(135deg, #40E0D0, #7FFFD4);
            border: none;
            color: #1a3a3a;
            font-weight: 600;
        }
        .btn-search:hover {
            background: linear-gradient(135deg, #7FFFD4, #AFEEEE);
            color: #0d2b2b;
        }
        .badge-custom {
            background: linear-gradient(135deg, #40E0D0, #7FFFD4);
            color: #1a3a3a;
            font-weight: 600;
        }
        .card-border-custom {
            border-color: #40E0D0;
        }
        .footer-custom {
            background: linear-gradient(135deg, #AFEEEE, #7FFFD4);
            color: #1a3a3a;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow-sm card-border-custom">
                    <div class="card-header header-custom text-center">
                        <h1 class="h4 mb-0"> Before AI · Семантический поиск</h1>
                    </div>
                    <div class="card-body">

                        <!-- Предупреждение о загрузке -->
                        <div class="alert alert-info border-0 shadow-sm mb-4" role="alert" style="background: #e6faf5; border-left: 4px solid #40E0D0;">
                            <div class="d-flex align-items-start">
                                <div class="me-3">
                                    <span class="badge badge-custom fs-6 px-3 py-2">⏳</span>
                                </div>
                                <div>
                                    <h5 class="alert-heading fw-bold mb-1">Первичная загрузка модели</h5>
                                    <p class="mb-0 small">
                                        <strong>Ожидайте:</strong> 15–40 секунд • модель работает локально в вашем браузере
                                    </p>
                                </div>
                            </div>
                        </div>

                        <p class="text-muted mb-4">
                            Задайте любой запрос. ИИ найдёт самые похожие предложения из списка, используя <strong>реальные эмбеддинги</strong>.
                        </p>

                        <div class="mb-4">
                            <label for="queryInput" class="form-label fw-bold">Ваш запрос</label>
                            <input type="text" id="queryInput" class="form-control form-control-lg" placeholder="например: ИИ и программирование" value="нейронные сети и данные" />
                        </div>

                        <div class="d-flex gap-2">
                            <button id="searchBtn" class="btn btn-search btn-lg flex-grow-1">🔍 Найти похожие</button>
                            <button id="clearBtn" class="btn btn-outline-secondary btn-lg">✕ Очистить</button>
                        </div>

                        <div id="status" class="mt-3 text-info text-center"></div>

                        <div id="outputCard" class="mt-4 card d-none card-border-custom">
                            <div class="card-body">
                                <h5 class="card-title">📌 Самые релевантные результаты</h5>
                                <div id="output" class="card-text"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer footer-custom small text-center">
                        Работает на Transformers.js · реальные эмбеддинги (без фейковых оценок)
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Transformers.js (ES module) -->
    <script type="module">
        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';

        // === Набор предложений (в стиле "Before AI") ===
        const sentences = [
            "Я люблю машинное обучение и искусственный интеллект",
            "Сегодня отличная погода для прогулки",
            "Python — мой любимый язык программирования",
            "Искусственный интеллект изменит мир",
            "Мне нужно купить молоко, яйца и хлеб",
            "Глубокое обучение требует много данных",
            "Трансформеры совершают революцию в NLP",
            "Кофе помогает мне лучше писать код по утрам",
            "Нейронные сети вдохновлены мозгом",
            "Я люблю гулять в горах по выходным"
        ];

        let extractor = null;

        async function loadExtractor() {
            if (!extractor) {
                document.getElementById('status').textContent = 'Загрузка модели эмбеддингов… (первая загрузка может занять 15–40 с)';
                extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2');
                document.getElementById('status').innerHTML = '<span class="text-success">✅ Модель готова</span>';
            }
            return extractor;
        }

        function cosineSimilarity(vecA, vecB) {
            let dot = 0, magA = 0, magB = 0;
            for (let i = 0; i < vecA.length; i++) {
                dot += vecA[i] * vecB[i];
                magA += vecA[i] * vecA[i];
                magB += vecB[i] * vecB[i];
            }
            return dot / (Math.sqrt(magA) * Math.sqrt(magB));
        }

        // DOM-элементы
        const queryInput = document.getElementById('queryInput');
        const searchBtn = document.getElementById('searchBtn');
        const clearBtn = document.getElementById('clearBtn');
        const statusEl = document.getElementById('status');
        const outputCard = document.getElementById('outputCard');
        const outputEl = document.getElementById('output');

        // ---- основной поиск ----
        async function performSearch() {
            const query = queryInput.value.trim();
            if (!query) {
                alert('Пожалуйста, введите запрос');
                return;
            }

            outputCard.classList.add('d-none');
            statusEl.textContent = '⏳ Вычисление сходства…';

            try {
                const pipe = await loadExtractor();

                // эмбеддинг запроса
                const queryEmb = await pipe(query, { pooling: 'mean', normalize: true });

                const results = [];
                for (const sentence of sentences) {
                    const sentEmb = await pipe(sentence, { pooling: 'mean', normalize: true });
                    const score = cosineSimilarity(queryEmb.data, sentEmb.data);
                    results.push({ text: sentence, score });
                }

                // сортировка по убыванию
                results.sort((a, b) => b.score - a.score);

                // формирование вывода
                let html = '<div class="list-group">';
                results.forEach(item => {
                    const pct = (item.score * 100).toFixed(1);
                    html += `
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <span>${item.text}</span>
                            <span class="badge badge-custom fs-6">${pct}%</span>
                        </div>`;
                });
                html += '</div>';

                outputEl.innerHTML = html;
                outputCard.classList.remove('d-none');
                statusEl.textContent = '✅ Готово';
            } catch (err) {
                statusEl.innerHTML = `<span class="text-danger">❌ Ошибка: ${err.message}</span>`;
            }
        }

        // ---- обработчики событий ----
        searchBtn.addEventListener('click', performSearch);

        clearBtn.addEventListener('click', () => {
            queryInput.value = '';
            outputCard.classList.add('d-none');
            statusEl.textContent = '';
        });

        queryInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') searchBtn.click();
        });

        console.log('Before AI · Семантический поиск готов');
    </script>
</body>
</html>