| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Neomorphic Transformers.js Prompt Demo</title> |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1"></script> |
| <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script> |
| <style> |
| body { |
| font-family: sans-serif; |
| background: #e0e0e0; |
| max-width: 800px; |
| margin: auto; |
| padding: 40px; |
| min-height: 100vh; |
| } |
| h1, label { color: #666; } |
| textarea, #output, button, input[type="file"] + label { |
| background: #e0e0e0; |
| border: none; |
| border-radius: 20px; |
| box-shadow: 8px 8px 16px #bebebe, |
| -8px -8px 16px #ffffff; |
| padding: 20px; |
| margin-bottom: 20px; |
| } |
| textarea { width: 100%; height: 200px; resize: vertical; } |
| button { |
| cursor: pointer; |
| font-size: 18px; |
| padding: 15px 30px; |
| transition: box-shadow 0.2s; |
| } |
| button:active { |
| box-shadow: inset 8px 8px 16px #bebebe, |
| inset -8px -8px 16px #ffffff; |
| } |
| #output { min-height: 100px; } |
| #file-list li { |
| background: #e0e0e0; |
| padding: 10px; |
| margin: 5px 0; |
| border-radius: 15px; |
| box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; |
| } |
| #status { color: #888; font-style: italic; } |
| </style> |
| </head> |
| <body> |
| <h1>Neomorphic Transformers.js Live Prompt</h1> |
| |
| <label>Enter Prompt:</label> |
| <textarea id="prompt" placeholder="Type or paste text here...">I love transformers!</textarea> |
| |
| <label>Or Upload File (TXT/MD/HTML/JSON/ZIP):</label><br> |
| <input type="file" id="file-upload" accept=".txt,.md,.html,.json,.zip"> |
| |
| <button onclick="runModel()">Run Sentiment Analysis</button> |
| |
| <div id="status">Loading model...</div> |
| <pre id="output"></pre> |
| <ul id="file-list"></ul> |
|
|
| |
| <script type="module"> |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1'; |
| |
| let classifier = null; |
| async function loadModel() { |
| document.getElementById('status').textContent = 'Loading model...'; |
| classifier = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english'); |
| document.getElementById('status').textContent = 'Model ready!'; |
| } |
| loadModel(); |
| |
| async function runModel() { |
| if (!classifier) return; |
| const text = document.getElementById('prompt').value.trim(); |
| if (!text) { alert('Enter or upload text!'); return; } |
| |
| document.getElementById('status').textContent = 'Running...'; |
| const result = await classifier(text); |
| document.getElementById('output').textContent = JSON.stringify(result, null, 2); |
| document.getElementById('status').textContent = 'Done!'; |
| } |
| |
| document.getElementById('file-upload').addEventListener('change', async (e) => { |
| const file = e.target.files[0]; |
| if (!file) return; |
| |
| const ext = file.name.split('.').pop().toLowerCase(); |
| let text = ''; |
| |
| if (ext === 'zip') { |
| const zip = await JSZip.loadAsync(file); |
| const fileList = document.getElementById('file-list'); |
| fileList.innerHTML = '<strong>ZIP Contents (click to load):</strong>'; |
| Object.keys(zip.files).filter(name => !zip.files[name].dir).forEach(name => { |
| const li = document.createElement('li'); |
| li.textContent = name; |
| li.onclick = async () => { |
| const blob = await zip.file(name).async('blob'); |
| text = await blob.text(); |
| processText(text, name); |
| }; |
| fileList.appendChild(li); |
| }); |
| return; |
| } else { |
| text = await file.text(); |
| } |
| |
| processText(text, file.name); |
| }); |
| |
| function processText(text, filename) { |
| try { |
| const data = JSON.parse(text); |
| if (Array.isArray(data) && data.every(m => m.role && m.content)) { |
| text = data.map(m => `${m.role.toUpperCase()}: ${m.content}`).join('\n\n'); |
| document.getElementById('status').textContent = `Loaded OpenAI chat from ${filename}`; |
| } |
| } catch (e) { } |
| |
| document.getElementById('prompt').value = text; |
| document.getElementById('status').textContent = `Loaded ${filename}`; |
| } |
| </script> |
| </body> |
| </html> |
