Spaces:

Clemylia
/

Colora

Running

App Files Files Community

Clemylia commited on Sep 12

Commit

b1f7310

verified ·

1 Parent(s): f602474

Update index.html

Browse files

Files changed (1) hide show

index.html +170 -19

index.html CHANGED Viewed

@@ -1,19 +1,170 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🩷Colara🩷</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f2f5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 40px;
+            text-align: center;
+        }
+        .container {
+            width: 100%;
+            max-width: 800px;
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+        }
+        h1 {
+            color: #333;
+        }
+        .file-upload-section {
+            margin: 20px 0;
+        }
+        .file-upload-section label {
+            background-color: #007bff;
+            color: #fff;
+            padding: 12px 25px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s;
+        }
+        .file-upload-section label:hover {
+            background-color: #0056b3;
+        }
+        #upload-input {
+            display: none;
+        }
+        .image-display {
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            margin-top: 20px;
+            gap: 20px;
+        }
+        .image-box {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .image-box canvas, .image-box img {
+            max-width: 350px;
+            border: 2px dashed #ccc;
+            border-radius: 5px;
+        }
+        .image-box h3 {
+            margin-top: 10px;
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🩷Colara🩷</h1>
+        <p>L'IA qui change les couleurs de vos images.</p>
+        <div class="file-upload-section">
+            <label for="upload-input">Télécharger une image</label>
+            <input type="file" id="upload-input" accept="image/*">
+        </div>
+        <div class="image-display">
+            <div class="image-box">
+                <h3>Original</h3>
+                <canvas id="original-canvas"></canvas>
+            </div>
+            <div class="image-box">
+                <h3>Colara</h3>
+                <canvas id="colara-canvas"></canvas>
+            </div>
+        </div>
+        <p id="status-message"></p>
+    </div>
+    <script type="module">
+        const modelName = 'Clemylia/Colora-model';
+        const originalCanvas = document.getElementById('original-canvas');
+        const colaraCanvas = document.getElementById('colara-canvas');
+        const originalCtx = originalCanvas.getContext('2d');
+        const colaraCtx = colaraCanvas.getContext('2d');
+        const uploadInput = document.getElementById('upload-input');
+        const statusMessage = document.getElementById('status-message');
+        let colaraModel = null;
+        let isModelReady = false;
+        async function initializeModel() {
+            statusMessage.textContent = 'Chargement du modèle...';
+            try {
+                const response = await fetch(`https://huggingface.co/${modelName}/raw/main/colora.js`);
+                if (!response.ok) {
+                    throw new Error(`Erreur de téléchargement : ${response.statusText}`);
+                }
+                const scriptText = await response.text();
+                const scriptBlob = new Blob([scriptText], { type: 'application/javascript' });
+                const scriptUrl = URL.createObjectURL(scriptBlob);
+                const module = await import(scriptUrl);
+                colaraModel = new module.default();
+                isModelReady = true;
+                statusMessage.textContent = 'Modèle Colara prêt ! Téléchargez une image.';
+            } catch (error) {
+                statusMessage.textContent = `Erreur de chargement : ${error.message}`;
+                console.error(error);
+            }
+        }
+        uploadInput.addEventListener('change', async (event) => {
+            if (!isModelReady) {
+                alert("Le modèle n'est pas prêt. Veuillez patienter.");
+                return;
+            }
+            const file = event.target.files[0];
+            if (file) {
+                statusMessage.textContent = 'Analyse de l\'image en cours...';
+                const reader = new FileReader();
+                reader.onload = async (e) => {
+                    const img = new Image();
+                    img.onload = async () => {
+                        // Afficher l'image originale
+                        originalCanvas.width = img.width;
+                        originalCanvas.height = img.height;
+                        originalCtx.drawImage(img, 0, 0);
+                        // Appeler le modèle pour générer l'image modifiée
+                        const processedResult = await colaraModel.generate(file);
+                        // Afficher l'image générée
+                        const processedImgUrl = URL.createObjectURL(processedResult.image);
+                        const processedImg = new Image();
+                        processedImg.onload = () => {
+                            colaraCanvas.width = processedImg.width;
+                            colaraCanvas.height = processedImg.height;
+                            colaraCtx.drawImage(processedImg, 0, 0);
+                            statusMessage.textContent = 'Image traitée !';
+                        };
+                        processedImg.src = processedImgUrl;
+                    };
+                    img.src = e.target.result;
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        initializeModel();
+    </script>
+</body>
+</html>