Make url shareable with model, text set via url query params

This allows for deep link references to model and text visualization.

The URL is automatically updated with the model, text used to
tokenize. This should ease copy/paste url sharing from address bar.

app.py

@@ -43,7 +43,10 @@ def load_tokenizer(model_id: str):
 
 @app.route("/")
 def index():
-    return render_template("index.html")
+    # Get query parameters
+    model_id = request.args.get("model", "").strip() or request.args.get("model_id", "").strip()
+    text = request.args.get("text", "").strip()
+    return render_template("index.html", model_id=model_id, text=text)
 
 
 @app.route("/tokenize", methods=["POST"])

templates/index.html

@@ -304,6 +304,39 @@
             word-break: break-all;
         }
 
+        .btn-share {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            font-size: 14px;
+            font-weight: 600;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin-left: auto;
+        }
+
+        .btn-share:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-share.copied {
+            background: #48bb78;
+        }
+
+        .stats {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
         footer {
             text-align: center;
             margin-top: 30px;
@@ -330,6 +363,7 @@
                         id="model-id" 
                         placeholder="e.g., openai-community/gpt2"
                         autocomplete="off"
+                        value="{{ model_id }}"
                     >
                     <div class="suggestions" id="suggestions"></div>
                 </div>
@@ -340,7 +374,7 @@
                 <textarea 
                     id="text-input" 
                     placeholder="Enter text to tokenize..."
-                >Hello, world! This is a test of the tokenizer visualization tool.</textarea>
+                >{% if text %}{{ text }}{% else %}Hello, world! This is how I see text tokens.{% endif %}</textarea>
             </div>
 
             <button class="btn" id="tokenize-btn">Tokenize</button>
@@ -362,6 +396,9 @@
                         <div class="stat-value" id="char-count">0</div>
                         <div class="stat-label">Characters</div>
                     </div>
+                    <button class="btn-share" id="share-btn" title="Copy shareable URL to clipboard">
+                        🔗 Share
+                    </button>
                 </div>
 
                 <label>Tokenized Output <span style="font-weight: normal; color: #888;">(hover for token IDs)</span></label>
@@ -399,6 +436,14 @@
         let suggestions = [];
         let currentTokens = [];
 
+        // Auto-tokenize if both model and text are provided via URL
+        const hasModel = modelInput.value.trim() !== '';
+        const hasText = textInput.value.trim() !== '';
+        if (hasModel && hasText) {
+            // Trigger tokenization after page loads
+            setTimeout(() => tokenize(), 100);
+        }
+
         // Load model suggestions
         fetch('/models/suggestions')
             .then(res => res.json())
@@ -472,6 +517,12 @@
                 return;
             }
 
+            // Update URL with query parameters
+            const url = new URL(window.location);
+            url.searchParams.set('model', modelId);
+            url.searchParams.set('text', text);
+            window.history.pushState({}, '', url);
+
             hideError();
             resultsDiv.classList.add('hidden');
             loadingDiv.classList.add('show');
@@ -545,6 +596,33 @@
         showIdsCheckbox.addEventListener('change', () => {
             tokenIdsDiv.classList.toggle('hidden', !showIdsCheckbox.checked);
         });
+
+        // Share URL button
+        const shareBtn = document.getElementById('share-btn');
+
+        shareBtn.addEventListener('click', async () => {
+            const modelId = modelInput.value.trim();
+            const text = textInput.value;
+
+            // Build the share URL
+            const shareUrl = new URL(window.location.origin + window.location.pathname);
+            shareUrl.searchParams.set('model', modelId);
+            shareUrl.searchParams.set('text', text);
+
+            try {
+                await navigator.clipboard.writeText(shareUrl.toString());
+                shareBtn.textContent = '✓ Copied!';
+                shareBtn.classList.add('copied');
+
+                setTimeout(() => {
+                    shareBtn.innerHTML = '🔗 Share';
+                    shareBtn.classList.remove('copied');
+                }, 2000);
+            } catch (err) {
+                // Fallback: select text in a prompt
+                window.prompt('Copy this URL:', shareUrl.toString());
+            }
+        });
     </script>
 </body>
 </html>