Spaces:
Running
Running
| import gradio as gr | |
| import numpy as np | |
| import matplotlib.pyplot as plt | |
| from PIL import Image, ImageDraw | |
| import io | |
| # Créer des images de test colorées et asymétriques | |
| def create_test_image(image_type, size=256): | |
| """Crée une image de test colorée avec des formes asymétriques""" | |
| img = Image.new('RGB', (size, size), 'white') | |
| draw = ImageDraw.Draw(img) | |
| if image_type == "licorne": | |
| # Corps de la licorne (ellipse rose) | |
| draw.ellipse([80, 120, 180, 200], fill='#FF69B4', outline='#FF1493', width=3) | |
| # Corne (triangle doré) - asymétrique ! | |
| draw.polygon([125, 80, 135, 80, 130, 50], fill='#FFD700', outline='#FFA500') | |
| # Œil | |
| draw.ellipse([110, 140, 120, 150], fill='black') | |
| # Crinière (cercles colorés) | |
| draw.ellipse([90, 90, 110, 110], fill='#FF6347') | |
| draw.ellipse([140, 95, 160, 115], fill='#9370DB') | |
| elif image_type == "nounours": | |
| # Corps (cercle marron) | |
| draw.ellipse([90, 110, 170, 190], fill='#8B4513', outline='#654321', width=3) | |
| # Oreilles (asymétriques) | |
| draw.ellipse([100, 80, 130, 110], fill='#8B4513') | |
| draw.ellipse([130, 85, 160, 115], fill='#8B4513') # Légèrement décalée | |
| # Museau | |
| draw.ellipse([115, 140, 145, 160], fill='#DEB887') | |
| # Yeux | |
| draw.ellipse([110, 125, 120, 135], fill='black') | |
| draw.ellipse([140, 125, 150, 135], fill='black') | |
| # Nez asymétrique | |
| draw.ellipse([125, 145, 135, 155], fill='black') | |
| elif image_type == "chat": | |
| # Corps (ellipse grise avec contour noir) | |
| draw.ellipse([90, 130, 170, 190], fill='#808080', outline='black', width=3) | |
| # Tête | |
| draw.ellipse([105, 90, 155, 140], fill='#808080', outline='black', width=3) | |
| # Oreilles triangulaires (asymétriques) | |
| draw.polygon([115, 90, 125, 70, 135, 90], fill='#808080', outline='black', width=2) | |
| draw.polygon([125, 95, 135, 75, 145, 95], fill='#808080', outline='black', width=2) # Décalée | |
| # Intérieur des oreilles (rose) | |
| draw.polygon([119, 86, 124, 76, 131, 86], fill='#FFB6C1') | |
| draw.polygon([129, 91, 134, 81, 141, 91], fill='#FFB6C1') | |
| # Yeux (grands ronds blancs) | |
| draw.ellipse([112, 102, 128, 118], fill='white', outline='black', width=2) | |
| draw.ellipse([132, 102, 148, 118], fill='white', outline='black', width=2) | |
| # Pupilles noires | |
| draw.ellipse([118, 108, 122, 112], fill='black') | |
| draw.ellipse([138, 108, 142, 112], fill='black') | |
| # Museau triangulaire | |
| draw.polygon([125, 125, 135, 125, 130, 132], fill='#FFB6C1', outline='black', width=1) | |
| # Langue rose qui dépasse (asymétrique !) | |
| draw.ellipse([128, 132, 140, 142], fill='#FF69B4', outline='black', width=1) | |
| # Moustaches (asymétriques) | |
| draw.line([90, 120, 110, 122], fill='black', width=2) | |
| draw.line([90, 125, 110, 125], fill='black', width=2) | |
| draw.line([150, 120, 170, 118], fill='black', width=2) # Légèrement différente | |
| draw.line([150, 125, 170, 127], fill='black', width=2) | |
| # Queue (courbe asymétrique noire) | |
| draw.arc([160, 120, 200, 180], 0, 180, fill='black', width=8) | |
| return img | |
| # Définir les transformations | |
| transformations = { | |
| "identite": { | |
| "name": "Identité (aucune transformation)", | |
| "matrix": np.array([[1, 0], [0, 1]]), | |
| "explanation": "La matrice identité ne change rien à l'image" | |
| }, | |
| "rotation_90": { | |
| "name": "Rotation 90° (sens horaire)", | |
| "matrix": np.array([[0, 1], [-1, 0]]), | |
| "explanation": "Rotation d'un quart de tour vers la droite" | |
| }, | |
| "symetrie_h": { | |
| "name": "Symétrie horizontale", | |
| "matrix": np.array([[-1, 0], [0, 1]]), | |
| "explanation": "Miroir vertical - l'image se retourne de gauche à droite" | |
| }, | |
| "symetrie_v": { | |
| "name": "Symétrie verticale", | |
| "matrix": np.array([[1, 0], [0, -1]]), | |
| "explanation": "Miroir horizontal - l'image se retourne de haut en bas" | |
| }, | |
| "homothetie_2": { | |
| "name": "Homothétie x2", | |
| "matrix": np.array([[2, 0], [0, 2]]), | |
| "explanation": "Agrandissement d'un facteur 2 dans toutes les directions" | |
| }, | |
| "homothetie_05": { | |
| "name": "Homothétie x0.5", | |
| "matrix": np.array([[0.5, 0], [0, 0.5]]), | |
| "explanation": "Réduction d'un facteur 2 dans toutes les directions" | |
| }, | |
| "cisaillement": { | |
| "name": "Cisaillement", | |
| "matrix": np.array([[1, 0.5], [0, 1]]), | |
| "explanation": "Déformation oblique - l'image 'penche' vers la droite" | |
| } | |
| } | |
| def draw_grid_overlay(ax, matrix, color='gray', alpha=0.3, grid_range=150, spacing=20): | |
| """Dessine un quadrillage transformé par la matrice""" | |
| # Créer les points du quadrillage | |
| x_lines = np.arange(-grid_range, grid_range + spacing, spacing) | |
| y_lines = np.arange(-grid_range, grid_range + spacing, spacing) | |
| # Lignes verticales | |
| for x in x_lines: | |
| y_points = np.array([[-grid_range], [grid_range]]) | |
| x_points = np.array([[x], [x]]) | |
| # Appliquer la transformation | |
| points = np.vstack([x_points.flatten(), y_points.flatten()]) | |
| transformed = matrix @ points | |
| ax.plot(transformed[0], transformed[1], color=color, alpha=alpha, linewidth=0.8) | |
| # Lignes horizontales | |
| for y in y_lines: | |
| x_points = np.array([[-grid_range], [grid_range]]) | |
| y_points = np.array([[y], [y]]) | |
| # Appliquer la transformation | |
| points = np.vstack([x_points.flatten(), y_points.flatten()]) | |
| transformed = matrix @ points | |
| ax.plot(transformed[0], transformed[1], color=color, alpha=alpha, linewidth=0.8) | |
| def transform_image_pixels(img_array, matrix): | |
| """Transforme une image pixel par pixel avec la matrice donnée""" | |
| height, width = img_array.shape[:2] | |
| # Créer une image de sortie (fond blanc) | |
| if len(img_array.shape) == 3: | |
| transformed = np.ones((height, width, 3), dtype=np.uint8) * 255 | |
| else: | |
| transformed = np.ones((height, width), dtype=np.uint8) * 255 | |
| # Centrer les coordonnées | |
| center_x, center_y = width // 2, height // 2 | |
| # Pour chaque pixel de l'image de sortie | |
| for y in range(height): | |
| for x in range(width): | |
| # Coordonnées centrées | |
| coord_x = x - center_x | |
| coord_y = center_y - y # Inverser Y pour avoir origine en bas à gauche | |
| # Appliquer la transformation inverse pour trouver le pixel source | |
| try: | |
| inv_matrix = np.linalg.inv(matrix) | |
| original_coord = inv_matrix @ np.array([coord_x, coord_y]) | |
| # Reconvertir en coordonnées image | |
| orig_x = int(original_coord[0] + center_x) | |
| orig_y = int(center_y - original_coord[1]) | |
| # Vérifier si le pixel source est dans l'image | |
| if 0 <= orig_x < width and 0 <= orig_y < height: | |
| transformed[y, x] = img_array[orig_y, orig_x] | |
| except np.linalg.LinAlgError: | |
| # Matrice non inversible, laisser blanc | |
| pass | |
| return transformed | |
| def apply_transformation(image_choice, transform_choice): | |
| """Applique la transformation et crée la visualisation comparative""" | |
| # Créer l'image de test | |
| original_img = create_test_image(image_choice) | |
| original_array = np.array(original_img) | |
| # Récupérer la transformation | |
| transform_info = transformations[transform_choice] | |
| matrix = transform_info["matrix"] | |
| # Transformer l'image | |
| transformed_array = transform_image_pixels(original_array, matrix) | |
| transformed_img = Image.fromarray(transformed_array) | |
| # Créer la figure avec deux sous-graphiques | |
| fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(12, 6)) | |
| #fig.suptitle('Transformations Matricielles', fontsize=16, fontweight='bold') | |
| # Image originale | |
| ax1.imshow(original_img, extent=[-128, 128, -128, 128]) | |
| ax1.set_title('Image originale', fontsize=14, color='#FF1493', fontweight='bold', | |
| bbox=dict(boxstyle="round,pad=0.3", facecolor='#FFB6C1', alpha=0.7)) | |
| # Quadrillage original | |
| draw_grid_overlay(ax1, np.eye(2), alpha=0.4) | |
| # Cadre rose | |
| for spine in ax1.spines.values(): | |
| spine.set_color('#FF1493') | |
| spine.set_linewidth(3) | |
| ax1.set_xlim(-150, 150) | |
| ax1.set_ylim(-150, 150) | |
| ax1.set_aspect('equal') | |
| ax1.grid(False) | |
| ax1.set_xticks([]) | |
| ax1.set_yticks([]) | |
| # Image transformée | |
| ax2.imshow(transformed_img, extent=[-128, 128, -128, 128]) | |
| ax2.set_title('Après la transformation !', fontsize=14, color='#8A2BE2', fontweight='bold', | |
| bbox=dict(boxstyle="round,pad=0.3", facecolor='#DDA0DD', alpha=0.7)) | |
| # Quadrillage fixe (même que l'original pour comparaison) | |
| draw_grid_overlay(ax2, np.eye(2), alpha=0.4) | |
| # Cadre violet | |
| for spine in ax2.spines.values(): | |
| spine.set_color('#8A2BE2') | |
| spine.set_linewidth(3) | |
| ax2.set_xlim(-150, 150) | |
| ax2.set_ylim(-150, 150) | |
| ax2.set_aspect('equal') | |
| ax2.grid(False) | |
| ax2.set_xticks([]) | |
| ax2.set_yticks([]) | |
| plt.tight_layout() | |
| # Convertir en image pour Gradio | |
| buf = io.BytesIO() | |
| plt.savefig(buf, format='png', dpi=100, bbox_inches='tight') | |
| buf.seek(0) | |
| result_img = Image.open(buf) | |
| plt.close() | |
| # Créer le texte d'explication | |
| matrix_str = f"[{matrix[0,0]:4.1f}, {matrix[0,1]:4.1f}]\n[{matrix[1,0]:4.1f}, {matrix[1,1]:4.1f}]" | |
| explanation = f"📐 **Matrice de transformation :**\n\n```\n{matrix_str}\n```\n\n💡 **Explication :** {transform_info['explanation']}" | |
| return result_img, explanation | |
| # Interface Gradio | |
| def create_interface(): | |
| with gr.Blocks(title="🦄 Transformations Matricielles", theme=gr.themes.Soft()) as demo: | |
| gr.Markdown(""" | |
| # 🦄 Transformations Matricielles 🦄 | |
| ### Visualisez les effets de transformations matricielles sur des images ! | |
| """) | |
| with gr.Row(): | |
| with gr.Column(): | |
| # Choix de l'image | |
| image_choice = gr.Dropdown( | |
| choices=[("Licorne 🦄", "licorne"), ("Nounours 🧸", "nounours"), ("Chat 🐱", "chat")], | |
| value="licorne", | |
| label="1️⃣ Choisissez votre image :" | |
| ) | |
| # Choix de la transformation | |
| transform_choice = gr.Dropdown( | |
| choices=[(info["name"], key) for key, info in transformations.items()], | |
| value="identite", | |
| label="2️⃣ Choisissez votre transformation :" | |
| ) | |
| # Explication de la matrice | |
| explanation_text = gr.Markdown(value="", label="Matrice et explication") | |
| # Résultat | |
| result_image = gr.Image(label="Visualisation", type="pil") | |
| # Auto-update quand on change les paramètres | |
| def update_all(img_choice, trans_choice): | |
| result_img, explanation = apply_transformation(img_choice, trans_choice) | |
| return result_img, explanation | |
| image_choice.change(update_all, [image_choice, transform_choice], [result_image, explanation_text]) | |
| transform_choice.change(update_all, [image_choice, transform_choice], [result_image, explanation_text]) | |
| # Initialisation | |
| demo.load(update_all, [image_choice, transform_choice], [result_image, explanation_text]) | |
| gr.Markdown(""" | |
| --- | |
| 💡 **Astuce :** Vous pouvez observer les effets des matrices sur l'image initiale : | |
| - **homothétie** : les objets changent de taille | |
| - **rotation** : tout tourne ensemble | |
| - **cisaillement** : les images s'aplatissent | |
| """) | |
| return demo | |
| # Lancer l'application | |
| if __name__ == "__main__": | |
| demo = create_interface() | |
| demo.launch() | |