Update README.md

README.md

@@ -1,91 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
-
-const CroppedImage = () => {
-  const [image, setImage] = useState(null);
-  const canvasRef = useRef(null);
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const img = new Image();
-    img.crossOrigin = "Anonymous";
-    img.src = "https://cdn-uploads.huggingface.co/production/uploads/66740b1d0f854ba167e0a01b/vMKLRTVv2r6ibfWd_DcQ1.png";
-    
-    img.onload = () => {
-      setImage(img);
-      setDimensions({
-        width: img.width,
-        height: img.height - 40 // 20px from top and 20px from bottom
-      });
-      setLoading(false);
-    };
-    
-    img.onerror = () => {
-      setError("Impossible de charger l'image. Il s'agit peut-être d'une restriction CORS.");
-      setLoading(false);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (image && canvasRef.current) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext('2d');
-      
-      // Set canvas dimensions to match cropped image size
-      canvas.width = dimensions.width;
-      canvas.height = dimensions.height;
-      
-      // Draw the image with cropping (remove 20px from top)
-      ctx.drawImage(
-        image,
-        0, 20, // Source x, y (start 20px from the top)
-        dimensions.width, dimensions.height, // Source width, height
-        0, 0, // Destination x, y
-        dimensions.width, dimensions.height // Destination width, height
-      );
-    }
-  }, [image, dimensions]);
-
-  return (
-    <div className="flex flex-col items-center justify-center">
-      {loading ? (
-        <div className="text-center py-8">Chargement de l'image...</div>
-      ) : error ? (
-        <div className="text-red-500 py-8">{error}</div>
-      ) : (
-        <>
-          <div className="mb-4 text-center">
-            <h2 className="text-lg font-semibold mb-2">Image Rognée</h2>
-            <p className="text-sm text-gray-600">20 pixels supprimés en haut et en bas</p>
-          </div>
-          <div className="border border-gray-300 rounded overflow-hidden">
-            <canvas 
-              ref={canvasRef} 
-              className="max-w-full h-auto"
-              style={{ maxWidth: '750px' }}
-            />
-          </div>
-          <div className="mt-4 text-sm text-gray-600">
-            Dimensions d'origine : {dimensions.width} × {dimensions.height + 40} px<br />
-            Dimensions après rognage : {dimensions.width} × {dimensions.height} px
-          </div>
-          <div className="mt-4 text-sm">
-            <p className="font-medium">Code HTML pour votre image rognée :</p>
-            <pre className="bg-gray-100 p-2 rounded mt-1 overflow-x-auto">
-              {`<p align="center">
-  <img src="VOTRE_IMAGE_ROGNÉE.png" width="750"/>
-</p>`}
-            </pre>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default CroppedImage;
-
-👇 **Read our latest article here:**
-
-➡️ [Making AI sovereign again – Elixir Blog](https://root-dracorex-f8a.notion.site/Elixir-1d6e3a180b8680cf8fdee53c95a61333)  
+<p align="center">
+  <img src="https://cdn-uploads.huggingface.co/production/uploads/66740b1d0f854ba167e0a01b/vMKLRTVv2r6ibfWd_DcQ1.png" width="750"/>
+</p>
+---
+👇 Read our latest article here:
+➡️ [Making AI sovereign again – Elixir Blog](https://root-dracorex-f8a.notion.site/Elixir-1d6e3a180b8680cf8fdee53c95a61333)