| <!doctype html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Atos de Fala PT-BR · classificador</title> |
| <link rel="stylesheet" href="./style.css" /> |
| <script type="importmap"> |
| { |
| "imports": { |
| "@huggingface/transformers": "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0/dist/transformers.min.js" |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <div class="gradio-container"> |
| <header> |
| <h1>🗣️ Atos de Fala PT-BR</h1> |
| <p class="subtitle">Classificador de atos de fala (speech acts) — 100% no navegador via <code>transformers.js</code> v4 + ONNX</p> |
| </header> |
|
|
| <div class="panels"> |
| <section class="panel input-panel"> |
| <div class="config-bar"> |
| <label> |
| <span>Quantização</span> |
| <select id="dtype"> |
| <option value="q8">q8 · int8 (109 MB)</option> |
| <option value="fp16">fp16 (207 MB)</option> |
| </select> |
| </label> |
| <label> |
| <span>Backend</span> |
| <select id="device"> |
| <option value="wasm">WASM</option> |
| <option value="webgpu">WebGPU</option> |
| </select> |
| </label> |
| </div> |
|
|
| <label for="text-input"><strong>Texto</strong></label> |
| <textarea id="text-input" rows="5" placeholder="Digite ou cole um texto em português…"></textarea> |
|
|
| <div class="examples"> |
| <span class="examples-label">Exemplos:</span> |
| <button class="example" data-text="Bom dia! Você pode revisar o relatório? Obrigado.">Saudar + pedir + agradecer</button> |
| <button class="example" data-text="Eu discordo. O preço está errado e não vou pagar.">Discordar</button> |
| <button class="example" data-text="Prometo que entrego amanhã sem falta, pode confiar.">Prometer</button> |
| <button class="example" data-text="Desculpe o atraso, o trânsito estava impossível.">Desculpar</button> |
| </div> |
|
|
| <div class="actions"> |
| <button id="classify-btn" class="primary">Classificar</button> |
| <span id="status" class="status"></span> |
| </div> |
| </section> |
|
|
| <section class="panel output-panel"> |
| <label><strong>Atos detectados</strong></label> |
| <div id="output" class="output"> |
| <p class="placeholder">O resultado aparece aqui após a classificação.</p> |
| </div> |
| <details> |
| <summary>JSON bruto</summary> |
| <pre id="json-out" class="json-out"></pre> |
| </details> |
| </section> |
| </div> |
|
|
| <footer> |
| <p> |
| Modelo: <a href="https://huggingface.co/lucianfialho/atos-de-fala-ptbr" target="_blank" rel="noreferrer">lucianfialho/atos-de-fala-ptbr</a> |
| · Código: <a href="https://github.com/lucianfialho/atos-de-fala" target="_blank" rel="noreferrer">github.com/lucianfialho/atos-de-fala</a> |
| · Demo: <a href="./index.html">index.html</a> |
| </p> |
| </footer> |
| </div> |
|
|
| <script type="module" src="./app.js"></script> |
| </body> |
| </html> |
|
|
