|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Transformers.js Playground</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script type="module"> |
|
|
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]'; |
|
|
</script> |
|
|
<script |
|
|
src="https://app.wonderchat.io/scripts/wonderchat.js" |
|
|
data-name="wonderchat" |
|
|
data-address="app.wonderchat.io" |
|
|
data-id="cmgwshpx30k5pa6jheslpcwop" |
|
|
data-widget-size="normal" |
|
|
data-widget-button-size="normal" |
|
|
data-movable="true" |
|
|
data-initial-open="true" |
|
|
defer |
|
|
></script> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="header-content"> |
|
|
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a> |
|
|
<h1>Transformers.js Playground</h1> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<div class="container"> |
|
|
<div class="controls"> |
|
|
<div class="model-selector"> |
|
|
<label for="task-select">Select Task:</label> |
|
|
<select id="task-select"> |
|
|
<option value="text-classification">Text Classification</option> |
|
|
<option value="sentiment-analysis">Sentiment Analysis</option> |
|
|
<option value="question-answering">Question Answering</option> |
|
|
<option value="text-generation">Text Generation</option> |
|
|
<option value="translation">Translation</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="device-toggle"> |
|
|
<label for="device-select">Device:</label> |
|
|
<select id="device-select"> |
|
|
<option value="cpu">CPU (WASM)</option> |
|
|
<option value="webgpu">GPU (WebGPU)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="input-section"> |
|
|
<textarea id="input-text" placeholder="Enter your text here..."></textarea> |
|
|
<button id="run-btn">Run Model</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="output-section"> |
|
|
<h3>Output:</h3> |
|
|
<div id="output" class="output-container"> |
|
|
<p class="placeholder">Results will appear here...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<p>Transformers.js Playground - Powered by Hugging Face</p> |
|
|
</footer> |
|
|
|
|
|
<script src="index.js"></script> |
|
|
</body> |
|
|
</html> |
