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>