Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HuggingFace Embedding Demo</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: system-ui, -apple-system, sans-serif; | |
| max-width: 720px; | |
| margin: 40px auto; | |
| padding: 0 20px; | |
| background: #f8f9fa; | |
| color: #1a1a2e; | |
| } | |
| h1 { margin-bottom: 8px; font-size: 1.5rem; } | |
| .subtitle { color: #666; margin-bottom: 24px; font-size: 0.9rem; } | |
| textarea { | |
| width: 100%; | |
| height: 100px; | |
| padding: 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| resize: vertical; | |
| } | |
| textarea:focus { outline: none; border-color: #4a6cf7; } | |
| button { | |
| margin-top: 12px; | |
| padding: 10px 24px; | |
| background: #4a6cf7; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| } | |
| button:hover { background: #3a5ce5; } | |
| button:disabled { background: #aaa; cursor: not-allowed; } | |
| #log { | |
| margin-top: 24px; | |
| background: #1a1a2e; | |
| color: #e0e0e0; | |
| border-radius: 8px; | |
| padding: 16px; | |
| font-family: 'Menlo', 'Consolas', monospace; | |
| font-size: 0.82rem; | |
| line-height: 1.6; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| white-space: pre-wrap; | |
| } | |
| .log-step { color: #4af7b0; } | |
| .log-info { color: #a0c4ff; } | |
| .log-warn { color: #ffd166; } | |
| .log-error { color: #ef476f; } | |
| .log-result { color: #f7d94a; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Text Embedding Demo</h1> | |
| <p class="subtitle">Using Xenova/all-MiniLM-L6-v2 via @huggingface/transformers</p> | |
| <textarea id="input" placeholder="Enter text to embed...">The quick brown fox jumps over the lazy dog.</textarea> | |
| <br> | |
| <button id="runBtn">Generate Embedding</button> | |
| <div id="log"></div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> | |