Spaces:
Running
Running
| <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> |