Rewrite as clean HTML/JS app with dynamic label management

- Replaced buggy Gradio implementation with pure HTML/JS
- Dynamic label addition/removal with inline controls
- Clean, modern UI using Tailwind CSS
- Real-time JSON schema generation
- Syntax highlighting with Prism.js
- Tabbed interface for better organization
- Copy to clipboard and download functionality
- Starts with 2 labels, auto-expands as needed

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

README.md

@@ -1,12 +1,131 @@
 ---
-title: Json Schema Text Classifier
-emoji: 🏆
-colorFrom: yellow
+title: JSON Schema Generator for Text Classification
+emoji: 🏷️
+colorFrom: blue
 colorTo: purple
-sdk: gradio
-sdk_version: 5.39.0
-app_file: app.py
+sdk: static
+app_file: index.html
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# JSON Schema Generator for Text Classification
+
+A simple, user-friendly tool to generate JSON schemas for text classification tasks. Perfect for structured generation with Large Language Models (LLMs).
+
+## 🎯 Purpose
+
+This tool helps you create properly formatted JSON schemas that can be used with:
+- **LM Studio** - Structured Output field
+- **OpenAI API** - `response_format` parameter
+- **llama.cpp** - Grammar constraints
+- **Any LLM API** supporting JSON schema validation
+
+## 🚀 Features
+
+- **Single-label classification** - Choose one category from a list
+- **Multi-label classification** - Select multiple applicable categories
+- **Live preview** - See your schema and example outputs in real-time
+- **Copy & Download** - Easy export options for your schemas
+- **Beginner-friendly** - No JSON knowledge required
+
+## 📖 How to Use
+
+1. **Select Classification Type**
+   - **Single**: For mutually exclusive categories (e.g., sentiment: positive OR negative)
+   - **Multi**: For multiple applicable labels (e.g., topics: can be both "sports" AND "politics")
+
+2. **Add Your Labels**
+   - Enter the categories you want to classify text into
+   - Add optional descriptions for clarity
+   - Use the ➕ button to add more labels
+
+3. **Configure Options** (Optional)
+   - Change the field name (default: "classification")
+   - Set whether the field is required
+   - For multi-label: set min/max number of selections
+
+4. **Get Your Schema**
+   - Copy the generated JSON schema
+   - Download as a .json file
+   - See example outputs
+
+## 🔧 Example Use Cases
+
+### Sentiment Analysis
+```json
+{
+  "type": "object",
+  "properties": {
+    "sentiment": {
+      "type": "string",
+      "enum": ["positive", "negative", "neutral"]
+    }
+  },
+  "required": ["sentiment"]
+}
+```
+
+### Topic Classification (Multi-label)
+```json
+{
+  "type": "object",
+  "properties": {
+    "topics": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": ["technology", "health", "finance", "education", "entertainment"]
+      },
+      "uniqueItems": true
+    }
+  }
+}
+```
+
+## 🤝 Integration Examples
+
+### LM Studio
+1. Generate your schema using this tool
+2. Copy the schema
+3. In LM Studio, paste into the "Structured Output" field
+4. The model will only generate JSON matching your schema
+
+### OpenAI API (Python)
+```python
+import openai
+
+# Your generated schema
+response_format = {
+    "type": "json_schema",
+    "json_schema": {
+        "name": "classification",
+        "schema": { ... }  # Paste your schema here
+    }
+}
+
+response = openai.chat.completions.create(
+    model="gpt-4",
+    messages=[...],
+    response_format=response_format
+)
+```
+
+## 📚 Resources
+
+- [JSON Schema Documentation](https://json-schema.org/)
+- [OpenAI Structured Outputs](https://platform.openai.com/docs/guides/structured-outputs)
+- [LM Studio Documentation](https://lmstudio.ai/docs)
+
+## 🛠️ Technical Details
+
+This tool generates JSON Schema Draft 7 compatible schemas that enforce:
+- Valid JSON structure
+- Type constraints (string, array)
+- Enum restrictions for valid label values
+- Array uniqueness for multi-label classification
+- Optional min/max constraints for array lengths
+
+## 📝 License
+
+MIT License - Feel free to use and modify!

examples/multi_label_tags.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "tags": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": [
+          "urgent",
+          "important",
+          "bug",
+          "feature",
+          "documentation",
+          "question",
+          "help-wanted",
+          "good-first-issue",
+          "enhancement",
+          "wontfix"
+        ]
+      },
+      "description": "Multiple labels from 10 categories",
+      "uniqueItems": true,
+      "minItems": 1,
+      "maxItems": 5
+    }
+  },
+  "required": ["tags"]
+}

examples/sentiment_analysis.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "sentiment": {
+      "type": "string",
+      "enum": ["positive", "negative", "neutral"],
+      "description": "Classification into one of 3 categories"
+    }
+  },
+  "required": ["sentiment"]
+}

examples/topic_classification.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "topic": {
+      "type": "string",
+      "enum": [
+        "technology",
+        "health",
+        "finance",
+        "education",
+        "entertainment",
+        "sports",
+        "politics",
+        "science",
+        "business",
+        "lifestyle"
+      ],
+      "description": "Classification into one of 10 categories"
+    }
+  },
+  "required": ["topic"]
+}

index.html

@@ -0,0 +1,432 @@
+<!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>

requirements.txt

@@ -0,0 +1 @@
+# No requirements needed for static HTML app