Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face Transformers.js v3</title> | |
| <style> | |
| body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; background-color: #f9f9f9; } | |
| .container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } | |
| textarea { width: 100%; height: 120px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; resize: vertical; } | |
| button { margin-top: 15px; padding: 12px 24px; background-color: #ffd21e; color: #000; font-weight: bold; border: none; cursor: pointer; border-radius: 8px; transition: 0.3s; } | |
| button:hover { background-color: #e6bc1a; } | |
| button:disabled { background-color: #eee; cursor: not-allowed; } | |
| #output { margin-top: 20px; padding: 15px; background: #fffbe6; border-left: 5px solid #ffd21e; border-radius: 4px; min-height: 40px; } | |
| .status { font-size: 0.85em; color: #555; margin-bottom: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Hugging Face - Nano Charlotte</h2> | |
| <div id="status" class="status">Initialisation du moteur...</div> | |
| <textarea id="input-text" placeholder="Écrivez le début d'une phrase..."></textarea> | |
| <button id="generate-btn" disabled>Générer du texte avec ce TLM</button> | |
| <h3>Sortie :</h3> | |
| <div id="output">Le modèle est en cours de préparation...</div> | |
| </div> | |
| <script type="module"> | |
| // Importation de la version officielle v3 | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0'; | |
| const statusLabel = document.getElementById('status'); | |
| const btn = document.getElementById('generate-btn'); | |
| const output = document.getElementById('output'); | |
| const input = document.getElementById('input-text'); | |
| let generator; | |
| async function init() { | |
| try { | |
| statusLabel.innerText = "Téléchargement du modèle Clemylia/Nano-Charlotte-v1-2.72M-ONNX..."; | |
| // Création du pipeline avec la version officielle | |
| // device: 'webgpu' peut être tenté, mais 'auto' choisira le meilleur disponible | |
| generator = await pipeline('text-generation', 'Clemylia/Nano-Charlotte-v1-2.72M-ONNX', { | |
| device: 'auto', | |
| }); | |
| statusLabel.innerText = "Modèle prêt sur " + generator.device; | |
| output.innerText = "Prêt à générer !"; | |
| btn.disabled = false; | |
| } catch (e) { | |
| statusLabel.innerText = "Erreur : " + e.message; | |
| console.error(e); | |
| } | |
| } | |
| async function run() { | |
| const prompt = input.value; | |
| if (!prompt) return; | |
| btn.disabled = true; | |
| output.innerText = "Génération en cours..."; | |
| const results = await generator(prompt, { | |
| max_new_tokens: 64, | |
| temperature: 0.6, | |
| do_sample: true, | |
| top_k: 30 | |
| }); | |
| output.innerText = results[0].generated_text; | |
| btn.disabled = false; | |
| } | |
| btn.addEventListener('click', run); | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |