# Bot check

# HW_ID: fpmi_ad7
# Бот проверит этот ID и предупредит, если случайно сдать что-то не то.

# Status: not final
# Перед отправкой в финальном решении удали "not" в строчке выше.
# Так бот проверит, что ты отправляешь финальную версию, а не промежуточную.
# Никакие значения в этой ячейке не влияют на факт сдачи работы.

import io
import os
import base64
from typing import Dict, List, Optional, Tuple, Union

import numpy as np
import pandas as pd
from tqdm.cli import tqdm

import matplotlib.pyplot as plt
import seaborn as sns
from PIL import Image
import plotly.express as px
from dash import Dash, dcc, html, Input, Output, no_update, callback

from sklearn.cluster import KMeans
from sklearn.decomposition import PCA
import torch
from transformers import ViTImageProcessor, ViTModel

sns.set_theme(style="darkgrid", palette="Set2")

sample_size = 1000
dimention = 100
sample = np.random.uniform(size=(sample_size, dimention))

...

...

...

# Загружаем картинки
# ...
cats = ...

# Визуализируем примеры
# ...

...

%%time
...

def visualize_images_clusterisation(
    images: np.ndarray,
    projection: np.ndarray,
    clusters: np.ndarray,
    port: Optional[int] = None,
    use_dash: bool = False,
) -> Optional[Dash]:
    """
    Визуализирует кластеризацию изображений с возможностью просмотра изображений при наведении.

    Создает интерактивный scatter plot проекции изображений с двумя режимами:
    1. Режим Jupyter (use_dash=False): показывает статичный plotly график
    2. Режим Dash (use_dash=True): запускает интерактивный сервер с hover-эффектом

    Параметры:
        images: Массив изображений формы (n_samples, height, width, channels)
        projection: 2D проекция эмбеддингов формы (n_samples, 2)
        clusters: Массив меток кластеров формы (n_samples,)
        port: Порт для запуска Dash-приложения (None - случайный порт)
        use_dash: Флаг использования интерактивного Dash-режима

    Возвращает:
        При use_dash=True возвращает Dash приложение, иначе None
    """

    plotly.offline.init_notebook_mode()

    # Рисуем график с точками как на семинаре
    fig = px.scatter(
        x=projection[:, 0],
        y=projection[:, 1],
        hover_name=clusters,
        hover_data={"image_idx": list(range(len(images)))},
        color=clusters.astype(str),
        width=1000,
        height=800,
        title="PCA проекция изображений на плоскость",
        size=[1] * len(images),
        size_max=12,
    )

    if not use_dash:
        fig.show()
        return

    # Добавляем во всплывающее окошко (hover box) изображения
    fig.update_traces(
        hoverinfo="none",
        hovertemplate=None,
    )

    app = Dash(__name__)

    app.layout = html.Div(
        className="container",
        children=[
            dcc.Graph(id="graph-2-dcc", figure=fig, clear_on_unhover=True),
            dcc.Tooltip(id="graph-tooltip-2", direction="bottom"),
        ],
    )

    @callback(
        Output("graph-tooltip-2", "show"),
        Output("graph-tooltip-2", "bbox"),
        Output("graph-tooltip-2", "children"),
        Output("graph-tooltip-2", "direction"),
        Input("graph-2-dcc", "hoverData"),
    )
    def display_hover(
        hoverData: Optional[Dict],
    ) -> Tuple[bool, Union[Dict, str], List[html.Img], str]:
        """
        Callback функция для обработки hover-событий и отображения изображений во всплывающем окне.

        Параметры:
            hoverData: Данные о точке, на которую наведен курсор. Содержит:
                      - coordinates (координаты точки)
                      - pointIndex (индекс точки)
                      - bbox (границы точки)
                      - customdata (дополнительные данные)

        Возвращает кортеж:
            1. Флаг показа/скрытия tooltip (bool)
            2. Bounding box точки (dict) или no_update
            3. Список HTML-элементов для отображения (List[html.Img])
            4. Направление отображения tooltip (str)
        """
        if hoverData is None:
            return False, no_update, no_update, no_update

        # Достаем индекс картинки, который выше положили в hover_data
        hover_data = hoverData["points"][0]
        image_idx = hover_data["customdata"][0]
        # И получаем само изображение кота
        image = Image.fromarray(images[image_idx].reshape(64, 64, 3))

        # Преобразовываем изображение в base64 кодировку
        buffer = io.BytesIO()
        image.save(buffer, format="jpeg")
        encoded_image = base64.b64encode(buffer.getvalue()).decode()
        image_url = "data:image/jpeg;base64, " + encoded_image

        image_children = [
            html.Img(
                src=image_url,
                style={"width": "196px"},
            ),
        ]

        return True, hover_data["bbox"], image_children, "top"

    if port is None:
        port = str(np.random.randint(5000, 15000))
    app.run(port=port, debug=True, jupyter_height=800)

    return app

...

...

%%time
...

...

...

example_image = cats[0].reshape(64, 64, 3)

# Загрузка и тестовое применение модели
...

...

...

...

...

Введение в анализ данных ¶

Домашнее задание 7. Кластеризация и понижение размерности¶

Задача 1.¶

Задача 2.¶

Задача 3.¶

1. Свойства метрики в пространстве котиков¶

2. Кластеризация котиков по вектору изображения¶

3. PCA + кластеризация¶

4. Нейросетевые эмбеддинги + кластеризация¶

5. Выводы¶

Введение в анализ данных¶

Домашнее задание 7. Кластеризация и понижение размерности¶

Задача 1.¶

Задача 2.¶

Задача 3.¶

1. Свойства метрики в пространстве котиков¶

2. Кластеризация котиков по вектору изображения¶

3. PCA + кластеризация¶

4. Нейросетевые эмбеддинги + кластеризация¶

5. Выводы¶

Введение в анализ данных ¶