Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sentiment Analyzer</title> | |
| <style> | |
| :root { | |
| --bg: #ffffff; | |
| --text: #0f172a; | |
| --card-bg: #f8fafc; | |
| --border: #e2e8f0; | |
| --accent: #2563eb; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| background-color: var(--bg); | |
| color: var(--text); | |
| max-width: 680px; | |
| margin: 0 auto; | |
| padding: 2rem 1rem; | |
| line-height: 1.5; | |
| } | |
| .header { | |
| margin-bottom: 2rem; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 1rem; | |
| } | |
| h1 { font-size: 1.5rem; margin: 0 0 0.5rem 0; } | |
| p { color: #64748b; margin: 0; font-size: 0.95rem; } | |
| textarea { | |
| width: 100%; | |
| height: 120px; | |
| padding: 0.75rem; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| box-sizing: border-box; | |
| resize: vertical; | |
| margin-bottom: 1rem; | |
| } | |
| textarea:focus { | |
| outline: 2px solid var(--accent); | |
| border-color: transparent; | |
| } | |
| button { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| button:hover { opacity: 0.9; } | |
| #resultContainer { | |
| margin-top: 1.5rem; | |
| padding: 1rem; | |
| background-color: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| display: none; | |
| } | |
| .status { font-weight: 600; font-size: 1.05rem; } | |
| .score { font-size: 0.9rem; color: #64748b; margin-top: 0.25rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>Image Sentiment Inference Engine</h1> | |
| <p>Executes ONNX-quantized DistilBERT models locally via Transformers.js runtime without server API calls.</p> | |
| </div> | |
| <textarea id="inputText" placeholder="Enter text to evaluate (e.g., 'The model execution speed on WebAssembly exceeds expectations.')."></textarea> | |
| <button id="runBtn">Run Inference</button> | |
| <div id="resultContainer"> | |
| <div id="status" class="status"></div> | |
| <div id="score" class="score"></div> | |
| </div> | |
| <script type="module"> | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers'; | |
| const runBtn = document.getElementById('runBtn'); | |
| const resultContainer = document.getElementById('resultContainer'); | |
| const statusDiv = document.getElementById('status'); | |
| const scoreDiv = document.getElementById('score'); | |
| let classifier = null; | |
| runBtn.addEventListener('click', async () => { | |
| const text = document.getElementById('inputText').value.trim(); | |
| if (!text) return; | |
| resultContainer.style.display = 'block'; | |
| statusDiv.innerText = "Initializing runtime & loading quantized ONNX weights..."; | |
| scoreDiv.innerText = ""; | |
| try { | |
| if (!classifier) { | |
| classifier = await pipeline( | |
| 'sentiment-analysis', | |
| 'Xenova/distilbert-base-uncased-finetuned-sst-2-english' | |
| ); | |
| } | |
| statusDiv.innerText = "Running local inference..."; | |
| const output = await classifier(text); | |
| const res = output[0]; | |
| statusDiv.innerText = `Label: ${res.label}`; | |
| scoreDiv.innerText = `Confidence Score: ${(res.score * 100).toFixed(2)}% | Execution: WebAssembly Engine`; | |
| } catch (err) { | |
| statusDiv.innerText = "Execution Error"; | |
| scoreDiv.innerText = err.message; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |