Spaces:

Prototypes-cl
/

Alphabet-recite

Running

App Files Files Community

Clemylia commited on Oct 14

Commit

83bfd3e

verified ·

1 Parent(s): ccd752e

Update index.html

Browse files

Files changed (1) hide show

index.html +211 -19

index.html CHANGED Viewed

@@ -1,19 +1,211 @@
-<!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>Alphabet-bot - Récitation d'enfant</title>
+    <style>
+        /* Styles CSS inchangés pour un look cohérent */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #000;
+            color: #ff1493; /* Rose */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+        }
+        .container {
+            background-color: #1a1a1a;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(255, 20, 147, 0.5);
+            text-align: center;
+            width: 90%;
+            max-width: 500px;
+        }
+        h1 {
+            color: #fff;
+            margin-bottom: 5px;
+        }
+        p {
+            margin-bottom: 25px;
+            color: #ccc;
+        }
+        .input-group {
+            margin-bottom: 25px;
+            text-align: left;
+        }
+        .input-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #fff;
+            font-size: 16px;
+        }
+        .input-group input[type="range"] {
+            width: 100%;
+            -webkit-appearance: none;
+            height: 8px;
+            background: #444;
+            border-radius: 5px;
+            outline: none;
+            opacity: 0.7;
+            transition: opacity .2s;
+        }
+        .input-group input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #ff1493;
+            cursor: pointer;
+        }
+        #distractionValue {
+            color: #ff1493;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+        button {
+            background-color: #ff1493;
+            color: #fff;
+            border: none;
+            padding: 12px 25px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 18px;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: #e00e7a;
+        }
+        #result {
+            margin-top: 30px;
+            padding: 15px;
+            background-color: #2c2c2c;
+            border: 2px solid #ff1493;
+            border-radius: 5px;
+            font-size: 18px;
+            text-align: left;
+            min-height: 50px;
+            color: #fff;
+            word-wrap: break-word;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>Alphabet-bot</h1>
+    <p>Simule la récitation de l'alphabet par un enfant de 5 ans.</p>
+    <div class="input-group">
+        <label for="distractionLevel">Niveau de Distraction : <span id="distractionValue">0.5</span></label>
+        <input type="range" id="distractionLevel" min="0" max="1" step="0.05" value="0.5">
+        <small style="color:#aaa;">0.0 = Récitation Parfaite | 1.0 = Très Distrait</small>
+    </div>
+    <button id="generateBtn">Réciter l'alphabet !</button>
+    <div id="result">
+        Récitation générée :
+    </div>
+</div>
+<script type="module">
+    // *** PARAMÈTRES DE CHARGEMENT DU MODÈLE DISTANT ***
+    // L'ID du dépôt modèle (ton espace et le nom du modèle)
+    const modelRepoId = 'prototypes-cl/Alphabet-bot';
+    // Le nom du fichier JS dans le dépôt
+    const modelFileName = 'Alphabet.js';
+    let alphabetBotModel = null;
+    let isModelReady = false;
+    // Récupération des éléments HTML
+    const resultDiv = document.getElementById('result');
+    const distractionLevelInput = document.getElementById('distractionLevel');
+    const distractionValueSpan = document.getElementById('distractionValue');
+    const generateBtn = document.getElementById('generateBtn');
+    // Mettre à jour la valeur affichée du curseur
+    distractionLevelInput.addEventListener('input', () => {
+        distractionValueSpan.textContent = distractionLevelInput.value;
+    });
+    // Fonction pour charger le modèle (Basée sur ta structure de référence)
+    async function initializeModel() {
+        resultDiv.textContent = 'Chargement du modèle...';
+        try {
+            // 1. Construit l'URL pour récupérer le fichier JS brut depuis le dépôt HF
+            const modelUrl = `https://huggingface.co/${modelRepoId}/raw/main/${modelFileName}`;
+            // 2. Récupère le contenu du fichier
+            const response = await fetch(modelUrl);
+            if (!response.ok) {
+                throw new Error(`Erreur de téléchargement : ${response.statusText} depuis ${modelUrl}`);
+            }
+            const scriptText = await response.text();
+            // 3. Crée un Blob et une URL pour l'importer dynamiquement comme module
+            const scriptBlob = new Blob([scriptText], { type: 'application/javascript' });
+            const scriptUrl = URL.createObjectURL(scriptBlob);
+            const module = await import(scriptUrl);
+            // 4. Instancie le modèle en appelant la méthode getInstance requise
+            alphabetBotModel = await module.default.getInstance();
+            isModelReady = true;
+            resultDiv.textContent = 'Modèle Alphabet-bot prêt !';
+        } catch (error) {
+            resultDiv.textContent = `Erreur de chargement. Vérifiez les droits et le chemin du fichier ${modelFileName}.`;
+            console.error(error);
+        }
+    }
+    // Fonction pour obtenir les options de l'interface et appeler le modèle
+    async function getModelResponse() {
+        if (!isModelReady) {
+            resultDiv.textContent = "Le modèle n'est pas prêt.";
+            return;
+        }
+        generateBtn.disabled = true;
+        resultDiv.textContent = 'Récitation en cours...';
+        const options = {
+            distractionLevel: parseFloat(distractionLevelInput.value),
+        };
+        try {
+            const result = await alphabetBotModel.generate(options);
+            resultDiv.textContent = result[0].generated_text;
+        } catch (error) {
+            resultDiv.textContent = `Erreur de génération : ${error.message}`;
+            console.error(error);
+        } finally {
+            generateBtn.disabled = false;
+        }
+    }
+    // Événements
+    generateBtn.addEventListener('click', getModelResponse);
+    // Initialisation
+    initializeModel();
+</script>
+</body>
+</html>