Hugging Face's logo

Spaces:
davanstrien
/
json-schema-text-classifier
Running

App Files Community
json-schema-text-classifier / index.html
davanstrien's picture
davanstrien HF Staff
Rewrite as clean HTML/JS app with dynamic label management
161b93c
raw
history blame contribute delete
19.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>JSON Schema Generator for Text Classification</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
 <style>
 .fade-in {
 animation: fadeIn 0.3s ease-in;
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .tab-content {
 display: none;
 }
 .tab-content.active {
 display: block;
 }
 .copy-feedback {
 animation: copyPulse 2s ease-out;
 }
 @keyframes copyPulse {
 0% { opacity: 0; transform: translateY(10px); }
 20% { opacity: 1; transform: translateY(0); }
 80% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10px); }
 }
 </style>
</head>
<body class="bg-gray-50">
 <div class="container mx-auto px-4 py-8 max-w-6xl">
 <!-- Header -->
 <div class="text-center mb-8">
 <h1 class="text-3xl font-bold text-gray-800 mb-2">JSON Schema Generator for Text Classification</h1>
 <p class="text-gray-600">Generate JSON schemas for structured text classification with LLMs</p>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <!-- Left Column - Configuration -->
 <div class="space-y-6">
 <!-- Classification Type -->
 <div class="bg-white rounded-lg shadow-sm p-6">
 <h2 class="text-lg font-semibold mb-4">Classification Type</h2>
 <div class="space-y-3">
 <label class="flex items-center cursor-pointer">
 <input type="radio" name="classification-type" value="single" checked class="mr-3 text-blue-600">
 <div>
 <span class="font-medium">Single Label</span>
 <span class="text-sm text-gray-500 ml-2">One label per text</span>
 </div>
 </label>
 <label class="flex items-center cursor-pointer">
 <input type="radio" name="classification-type" value="multi" class="mr-3 text-blue-600">
 <div>
 <span class="font-medium">Multi Label</span>
 <span class="text-sm text-gray-500 ml-2">Multiple labels allowed</span>
 </div>
 </label>
 </div>
 </div>
<!-- Labels -->
 <div class="bg-white rounded-lg shadow-sm p-6">
 <h2 class="text-lg font-semibold mb-4">Labels</h2>
 <p class="text-sm text-gray-600 mb-4">Add the categories you want to classify text into:</p>
<div id="labels-container" class="space-y-2">
 <!-- Labels will be dynamically added here -->
 </div>
 </div>
<!-- Advanced Options -->
 <details class="bg-white rounded-lg shadow-sm">
 <summary class="p-6 cursor-pointer font-semibold">Advanced Options</summary>
 <div class="px-6 pb-6 space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Field Name</label>
 <input type="text" id="field-name" value="classification" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 <p class="text-xs text-gray-500 mt-1">JSON key for the classification field</p>
 </div>
<div>
 <label class="flex items-center cursor-pointer">
 <input type="checkbox" id="is-required" checked class="mr-2 text-blue-600">
 <span class="text-sm font-medium">Required Field</span>
 </label>
 </div>
<div id="multi-options" class="space-y-4" style="display: none;">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Min Items</label>
 <input type="number" id="min-items" value="0" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Max Items</label>
 <input type="number" id="max-items" value="0" min="0" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 <p class="text-xs text-gray-500 mt-1">0 = no limit</p>
 </div>
 </div>
 </div>
 </details>
 </div>
<!-- Right Column - Output -->
 <div class="bg-white rounded-lg shadow-sm p-6">
 <!-- Tabs -->
 <div class="border-b border-gray-200 mb-4">
 <nav class="-mb-px flex space-x-8">
 <button class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600" data-tab="schema">
 Schema
 </button>
 <button class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="example">
 Example
 </button>
 <button class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="how-to-use">
 How to Use
 </button>
 </nav>
 </div>
<!-- Tab Contents -->
 <div id="schema" class="tab-content active">
 <div class="mb-4">
 <pre><code id="schema-output" class="language-json">// Please add at least one label to generate a schema</code></pre>
 </div>
 <div class="flex gap-2">
 <button id="copy-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
 📋 Copy Schema
 </button>
 <button id="download-btn" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
 💾 Download
 </button>
 <div id="copy-feedback" class="ml-4 py-2 text-green-600 font-medium" style="display: none;">
 ✓ Copied to clipboard!
 </div>
 </div>
 </div>
<div id="example" class="tab-content">
 <pre><code id="example-output" class="language-json">// Example will appear here</code></pre>
 </div>
<div id="how-to-use" class="tab-content prose prose-sm max-w-none">
 <h3 class="text-lg font-semibold mb-3">Integration Guide</h3>
<div class="mb-4">
 <h4 class="font-medium mb-2">LM Studio:</h4>
 <ol class="list-decimal list-inside text-sm text-gray-700 space-y-1">
 <li>Copy the generated schema</li>
 <li>Paste into the "Structured Output" field</li>
 <li>The model will only output valid JSON</li>
 </ol>
 </div>
<div class="mb-4">
 <h4 class="font-medium mb-2">OpenAI API:</h4>
 <pre class="bg-gray-100 p-3 rounded text-xs"><code>response_format = {
 "type": "json_schema",
 "json_schema": {
 "name": "classification",
 "schema": YOUR_SCHEMA_HERE
 }
}</code></pre>
 </div>
<div>
 <h4 class="font-medium mb-2">Other APIs:</h4>
 <ul class="list-disc list-inside text-sm text-gray-700 space-y-1">
 <li>Use with any API supporting JSON Schema validation</li>
 <li>Check your API documentation for the parameter name</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // State management
 let labels = [];
 let labelIdCounter = 0;
 // Initialize with 2 labels
 function init() {
 addLabel('positive');
 addLabel('negative');
 updateSchema();
 setupEventListeners();
 }
 // Add a new label
 function addLabel(value = '') {
 const id = labelIdCounter++;
 labels.push({ id, value });
const container = document.getElementById('labels-container');
 const labelDiv = document.createElement('div');
 labelDiv.className = 'flex gap-2 fade-in';
 labelDiv.id = `label-${id}`;
labelDiv.innerHTML = `
 <input type="text"
value="${value}"
placeholder="Enter label name"
 class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
 data-label-id="${id}">
 <button onclick="addLabelAfter(${id})"
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
 title="Add label after this one">
 +
 </button>
 ${labels.length > 2 ? `
 <button onclick="removeLabel(${id})"
class="px-3 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-md transition-colors"
 title="Remove this label">
 ×
 </button>` : ''}
 `;
container.appendChild(labelDiv);
// Add event listener to the input
 const input = labelDiv.querySelector('input');
 input.addEventListener('input', (e) => {
 const label = labels.find(l => l.id === id);
 if (label) {
 label.value = e.target.value;
 updateSchema();
// Auto-add new label if typing in the last one
 const lastLabel = labels[labels.length - 1];
 if (label.id === lastLabel.id && e.target.value.trim() !== '') {
 addLabel();
 }
 }
 });
 }
 // Add label after specific position
 function addLabelAfter(afterId) {
 const index = labels.findIndex(l => l.id === afterId);
 const newId = labelIdCounter++;
 labels.splice(index + 1, 0, { id: newId, value: '' });
// Rebuild the container
 rebuildLabelsContainer();
 updateSchema();
 }
 // Remove a label
 function removeLabel(id) {
 if (labels.length <= 2) return;
labels = labels.filter(l => l.id !== id);
 document.getElementById(`label-${id}`).remove();
 updateSchema();
 }
 // Rebuild labels container
 function rebuildLabelsContainer() {
 const container = document.getElementById('labels-container');
 container.innerHTML = '';
 const currentLabels = [...labels];
 labels = [];
 currentLabels.forEach(label => {
 addLabel(label.value);
 });
 }
 // Generate JSON schema
 function generateSchema() {
 const classificationType = document.querySelector('input[name="classification-type"]:checked').value;
 const fieldName = document.getElementById('field-name').value;
 const isRequired = document.getElementById('is-required').checked;
 const minItems = parseInt(document.getElementById('min-items').value) || 0;
 const maxItems = parseInt(document.getElementById('max-items').value) || 0;
// Get valid labels
 const validLabels = labels
 .map(l => l.value.trim())
 .filter(v => v !== '');
if (validLabels.length === 0) {
 return {
 schema: '// Please add at least one label to generate a schema',
 example: '// Example will appear here'
 };
 }
// Check for duplicates
 if (new Set(validLabels).size !== validLabels.length) {
 return {
 schema: '// Error: Duplicate labels found. Each label must be unique.',
 example: '// Please fix duplicate labels'
 };
 }
// Build schema
 const schema = {
 "$schema": "http://json-schema.org/draft-07/schema#",
 "type": "object",
 "properties": {}
 };
if (classificationType === 'single') {
 schema.properties[fieldName] = {
 "type": "string",
 "enum": validLabels,
 "description": `Classification into one of ${validLabels.length} categories`
 };
 } else {
 schema.properties[fieldName] = {
 "type": "array",
 "items": {
 "type": "string",
 "enum": validLabels
 },
 "description": `Multiple labels from ${validLabels.length} categories`,
 "uniqueItems": true
 };
if (minItems > 0) {
 schema.properties[fieldName].minItems = minItems;
 }
 if (maxItems > 0) {
 schema.properties[fieldName].maxItems = maxItems;
 }
 }
if (isRequired) {
 schema.required = [fieldName];
 }
// Generate example
 const example = {};
 if (classificationType === 'single') {
 example[fieldName] = validLabels[0];
 } else {
 example[fieldName] = validLabels.slice(0, 2);
 }
return {
 schema: JSON.stringify(schema, null, 2),
 example: JSON.stringify(example, null, 2)
 };
 }
 // Update schema display
 function updateSchema() {
 const result = generateSchema();
 document.getElementById('schema-output').textContent = result.schema;
 document.getElementById('example-output').textContent = result.example;
// Re-highlight syntax
 Prism.highlightAll();
 }
 // Setup event listeners
 function setupEventListeners() {
 // Classification type change
 document.querySelectorAll('input[name="classification-type"]').forEach(radio => {
 radio.addEventListener('change', (e) => {
 document.getElementById('multi-options').style.display =
e.target.value === 'multi' ? 'block' : 'none';
 updateSchema();
 });
 });
// Other inputs
 document.getElementById('field-name').addEventListener('input', updateSchema);
 document.getElementById('is-required').addEventListener('change', updateSchema);
 document.getElementById('min-items').addEventListener('input', updateSchema);
 document.getElementById('max-items').addEventListener('input', updateSchema);
// Tab switching
 document.querySelectorAll('.tab-button').forEach(button => {
 button.addEventListener('click', (e) => {
 // Update active tab
 document.querySelectorAll('.tab-button').forEach(b => {
 b.classList.remove('border-blue-500', 'text-blue-600');
 b.classList.add('border-transparent', 'text-gray-500');
 });
 e.target.classList.remove('border-transparent', 'text-gray-500');
 e.target.classList.add('border-blue-500', 'text-blue-600');
// Show corresponding content
 const tabName = e.target.dataset.tab;
 document.querySelectorAll('.tab-content').forEach(content => {
 content.classList.remove('active');
 });
 document.getElementById(tabName).classList.add('active');
 });
 });
// Copy button
 document.getElementById('copy-btn').addEventListener('click', () => {
 const schema = document.getElementById('schema-output').textContent;
 navigator.clipboard.writeText(schema).then(() => {
 const feedback = document.getElementById('copy-feedback');
 feedback.style.display = 'block';
 feedback.classList.add('copy-feedback');
 setTimeout(() => {
 feedback.style.display = 'none';
 feedback.classList.remove('copy-feedback');
 }, 2000);
 });
 });
// Download button
 document.getElementById('download-btn').addEventListener('click', () => {
 const schema = document.getElementById('schema-output').textContent;
 const blob = new Blob([schema], { type: 'application/json' });
 const url = URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'schema.json';
 a.click();
 URL.revokeObjectURL(url);
 });
 }
 // Initialize on load
 document.addEventListener('DOMContentLoaded', init);
 </script>
</body>
</html>