Hugging Face's logo

Spaces:
crpatel
/
Gujarati-BPE-Tokenizer
Sleeping

App Files Community
crpatel commited on
Commit
1b7925a
·
1 Parent(s): bcc12b1

bootstrap theme added

Browse files
Files changed (1) hide show
  1. static/index.html +61 -14
static/index.html CHANGED
@@ -4,6 +4,20 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Gujarati BPE Tokenizer</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <script>
8
  async function encode() {
9
  const text = document.getElementById("inputText").value;
@@ -44,20 +58,53 @@
44
  }
45
  </script>
46
  </head>
47
- <body>
48
- <h1>Basic Gujarati BPE Tokenizer (5000 Vocab)</h1>
49
- <h2>Encode Text</h2>
50
- <input type="text" id="inputText" placeholder="Enter text to encode...">
51
- <button onclick="encode()">Encode</button>
52
- <p>Encoded Tokens: <span id="encodedTokens"></span></p>
53
- <p>Original Sentence: <span id="originalSentence"></span></p>
54
-
55
- <h2>Decode Tokens</h2>
56
- <input type="text" id="inputTokens" placeholder="Enter tokens to decode...">
57
- <button onclick="decode()">Decode</button>
58
- <p>Decoded Text: <span id="decodedText"></span></p>
59
- <p>Original Tokens Inputted: <span id="inputTokensDisplay"></span></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
 
61
- <button onclick="resetFields()">Reset All</button>
 
62
  </body>
63
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Gujarati BPE Tokenizer</title>
7
+ <!-- Bootstrap CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <style>
10
+ .container {
11
+ max-width: 800px;
12
+ margin-top: 2rem;
13
+ }
14
+ .result-box {
15
+ background-color: #f8f9fa;
16
+ padding: 1rem;
17
+ border-radius: 5px;
18
+ margin: 1rem 0;
19
+ }
20
+ </style>
21
  <script>
22
  async function encode() {
23
  const text = document.getElementById("inputText").value;
 
58
  }
59
  </script>
60
  </head>
61
+ <body class="bg-light">
62
+ <div class="container">
63
+ <h1 class="text-center mb-4">Basic Gujarati BPE Tokenizer</h1>
64
+ <p class="text-center text-muted mb-4">5000 Vocabulary Size</p>
65
+
66
+ <div class="card mb-4">
67
+ <div class="card-header">
68
+ <h2 class="h5 mb-0">Encode Text</h2>
69
+ </div>
70
+ <div class="card-body">
71
+ <div class="mb-3">
72
+ <input type="text" class="form-control mb-2" id="inputText" placeholder="Enter text to encode...">
73
+ <button class="btn btn-primary" onclick="encode()">Encode</button>
74
+ </div>
75
+ <div class="result-box">
76
+ <p class="mb-2"><strong>Encoded Tokens:</strong></p>
77
+ <p class="mb-2"><span id="encodedTokens" class="text-break"></span></p>
78
+ <p class="mb-2"><strong>Original Sentence:</strong></p>
79
+ <p class="mb-0"><span id="originalSentence" class="text-break"></span></p>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="card mb-4">
85
+ <div class="card-header">
86
+ <h2 class="h5 mb-0">Decode Tokens</h2>
87
+ </div>
88
+ <div class="card-body">
89
+ <div class="mb-3">
90
+ <input type="text" class="form-control mb-2" id="inputTokens" placeholder="Enter tokens to decode...">
91
+ <button class="btn btn-primary" onclick="decode()">Decode</button>
92
+ </div>
93
+ <div class="result-box">
94
+ <p class="mb-2"><strong>Decoded Text:</strong></p>
95
+ <p class="mb-2"><span id="decodedText" class="text-break"></span></p>
96
+ <p class="mb-2"><strong>Original Tokens Inputted:</strong></p>
97
+ <p class="mb-0"><span id="inputTokensDisplay" class="text-break"></span></p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="text-center">
103
+ <button class="btn btn-secondary" onclick="resetFields()">Reset All</button>
104
+ </div>
105
+ </div>
106
 
107
+ <!-- Bootstrap JS -->
108
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
109
  </body>
110
  </html>