-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
229 lines (216 loc) · 12.1 KB
/
index.html
File metadata and controls
229 lines (216 loc) · 12.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reclassifier - JSON Field Editor</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
</head>
<body>
<h1>Reclassifier</h1>
<p class="subtitle">Add items and edit fields in your JSON data</p>
<div class="how-to-use-row">
<button id="btn-info" class="btn-how-to-use">How to use</button>
</div>
<!-- Add New Item Modal -->
<div id="add-item-modal" class="modal-overlay hidden">
<div class="modal modal-wide">
<div class="modal-header">
<h3>Add New Item</h3>
<button id="btn-close-add-item" class="btn-modal-close">×</button>
</div>
<div class="modal-body">
<div id="add-item-fields"></div>
<div class="add-item-actions">
<button id="btn-cancel-add-item" class="btn-secondary">Cancel</button>
<button id="btn-add-another-item" class="btn-secondary">Add Another Item</button>
<button id="btn-save-new-item">Add Item</button>
</div>
</div>
</div>
</div>
<!-- What's Next Modal (after adding item) -->
<div id="whats-next-modal" class="modal-overlay hidden">
<div class="modal">
<div class="modal-header">
<h3>Item Added!</h3>
</div>
<div class="modal-body">
<p id="whats-next-message" style="margin-bottom: 20px; color: #555;">What would you like to do next?</p>
<div class="whats-next-actions">
<button id="btn-continue-edit-fields" class="btn-primary">Continue to Edit Fields</button>
<button id="btn-view-diff" class="btn-secondary">View Diff</button>
</div>
</div>
</div>
</div>
<!-- Info Modal -->
<div id="info-modal" class="modal-overlay hidden">
<div class="modal">
<div class="modal-header">
<h3>About Reclassifier</h3>
<button id="btn-close-info" class="btn-modal-close">×</button>
</div>
<div class="modal-body">
<p><strong>Reclassifier</strong> is a serverless tool for adding, editing, and reclassifying fields in JSON data.</p>
<p><strong>Primary use case:</strong> Reclassing AI-generated data or JSON objects to build more consistent and repeatable AI workflows. When AI outputs need human review, correction, or enrichment, Reclassifier lets you walk through each object one at a time and add or edit fields interactively.</p>
<h4>Common uses</h4>
<ul>
<li>Add classification labels (genre, category, type) to AI-generated datasets</li>
<li>Edit or correct existing fields across many objects</li>
<li>Enrich JSON exports with human review scores or notes</li>
<li>Tag and annotate data for fine-tuning or evaluation pipelines</li>
<li>Standardize inconsistent field values across a collection</li>
<li><strong>Add new items</strong> to your JSON collections (books, projects, etc.)</li>
</ul>
<h4>How it works</h4>
<ol>
<li>Upload a JSON file</li>
<li><strong>Add new items</strong> to your collection (books, projects, etc.)</li>
<li><strong>Edit fields</strong> on existing items — add new fields or modify existing ones</li>
<li>Walk through each object, filling in values</li>
<li>Download the updated JSON</li>
</ol>
<p>All processing happens locally in your browser. No data is sent to any server.</p>
</div>
</div>
</div>
<div class="container">
<!-- Step 1: Upload -->
<div id="step-upload" class="step active">
<div id="drop-area" class="drop-area">
<p>Drag & drop a JSON file here or click to select</p>
<input type="file" id="file-input" accept=".json" class="hidden">
</div>
<div class="validator-section">
<h4>Or paste JSON to validate</h4>
<textarea id="json-paste" class="json-paste" placeholder='Paste your JSON here...' rows="6"></textarea>
<div class="validator-actions">
<button id="btn-validate" class="btn-secondary">Validate JSON</button>
<button id="btn-load-pasted" disabled>Load Valid JSON</button>
</div>
<div id="validator-result" class="validator-result hidden"></div>
</div>
</div>
<!-- Step 2: Summary -->
<div id="step-summary" class="step hidden">
<h3>Upload Summary</h3>
<div id="json-summary"></div>
<div class="actions">
<button id="btn-back-upload" class="btn-secondary">Back</button>
<button id="btn-to-fields">Add Items or Edit Fields</button>
</div>
</div>
<!-- Step 3: Configure Fields -->
<div id="step-fields" class="step hidden">
<h3>Configure Items & Fields</h3>
<div class="field-config-header">
<label>
Target Collection:
<select id="target-select"></select>
</label>
</div>
<!-- Add New Items Section -->
<div class="config-section">
<h4 class="config-section-header">Add New Items</h4>
<p class="config-section-desc">Add new entries (books, projects, etc.) to this collection.</p>
<button id="btn-add-item-step3" class="btn-add-item-inline">+ Add New Item to Collection</button>
<div id="new-items-count" class="new-items-count hidden"></div>
<div id="new-items-list" class="new-items-list hidden"></div>
</div>
<!-- Edit Fields Section -->
<div class="config-section">
<h4 class="config-section-header">Edit Fields on Existing Items</h4>
<p class="config-section-desc">Add new fields or edit existing fields across all items in the collection.</p>
<div id="existing-fields-hint" class="existing-fields-hint hidden">
<span class="hint-label">Click to edit existing fields:</span>
<span id="existing-fields-list"></span>
</div>
<div id="fields-list"></div>
<button id="btn-add-field" class="btn-add">+ Add New Field</button>
</div>
<div class="actions">
<button id="btn-back-summary" class="btn-secondary">Back</button>
<button id="btn-to-classify">Start Editing Items</button>
</div>
</div>
<!-- Step 4: Classify -->
<div id="step-classify" class="step hidden">
<div class="classify-header">
<div id="classify-progress"></div>
<button id="btn-add-item" class="btn-add-item">+ Add New Item</button>
</div>
<div class="classify-layout">
<div class="classify-main">
<div id="classify-card" class="classify-card"></div>
<div class="classify-actions">
<button id="btn-prev" class="btn-secondary">Back</button>
<button id="btn-skip" class="btn-secondary">Skip</button>
<button id="btn-save-item">Save & Next</button>
</div>
</div>
<div class="classify-sidebar">
<h4>History</h4>
<div id="history-list" class="history-list"></div>
</div>
</div>
</div>
<!-- Step 5: Results -->
<div id="step-results" class="step hidden">
<h3>Summary of Changes</h3>
<div id="results-summary"></div>
<h3>Diff</h3>
<div class="diff-wrapper">
<pre id="diff-output"></pre>
</div>
<h3>Updated JSON</h3>
<div class="json-output-wrapper">
<pre id="json-output"></pre>
<div class="output-actions">
<button id="btn-validate-output" class="btn-secondary">Validate JSON</button>
<button id="btn-copy">Copy to Clipboard</button>
<button id="btn-download">Download JSON</button>
</div>
<div id="output-validator-result" class="validator-result hidden"></div>
</div>
<div class="actions">
<button id="btn-back-classify" class="btn-secondary">Back to Editing</button>
<button id="btn-restart" class="btn-secondary">Start Over</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="license-section">
<div class="footer-links">
<div class="license-badge">
MIT License
<div class="license-tooltip">
MIT License<br><br>
Copyright (c) 2025 Austin Harshberger<br><br>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:<br><br>
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
</div>
</div>
<a href="https://attest.ink/verify/?data=eyJ2ZXJzaW9uIjoiMi4wIiwiaWQiOiIyMDI2LTAyLTE1LXJlY2xhc3NpZmllciIsImNvbnRlbnRfbmFtZSI6IlJlY2xhc3NpZmllciIsInRpbWVzdGFtcCI6IjIwMjYtMDItMTVUMDA6MDA6MDAuMDAwWiIsInBsYXRmb3JtIjoiYXR0ZXN0LmluayIsIm1vZGVsIjoiY2xhdWRlLW9wdXMtNC02Iiwicm9sZSI6ImdlbmVyYXRlZCIsImNvbnRlbnRfaGFzaCI6InNoYTI1Njo0NTg0MzI2NmZlODJkZTlkMDhiODc3MDk1OTE1YTU5NmMxMWM0ZWNjMTJiOWI1NjExMjY3ZTM4NWQ4OTExMTlmIiwiZG9jdW1lbnRfdHlwZSI6ImNvZGUiLCJhdXRob3IiOiI5NyAxMTUgMTA0Iiwic2lnbmF0dXJlIjp7InR5cGUiOiJobWFjLXNoYTI1NiIsInZhbHVlIjoiVU5TSUdORURfSE1BQ19QTEFDRUhPTERFUiIsImFsZ29yaXRobSI6IkhNQUMtU0hBMjU2IiwiZGF0YV90b19zaWduIjoie1wiY29udGVudF9oYXNoXCI6XCJzaGEyNTY6NDU4NDMyNjZmZTgyZGU5ZDA4Yjg3NzA5NTkxNWE1OTZjMTFjNGVjYzEyYjliNTYxMTI2N2UzODVkODkxMTE5ZlwiLFwibW9kZWxcIjpcImNsYXVkZS1vcHVzLTQtNlwiLFwidGltZXN0YW1wXCI6XCIyMDI2LTAyLTE1VDAwOjAwOjAwLjAwMFpcIn0ifSwic2lnbmVyIjp7Im5hbWUiOiI5NyAxMTUgMTA0IiwiaWQiOiI5NzExNTEwNCJ9fQ==" class="attest-badge" target="_blank" rel="noopener noreferrer">
built with ai
</a>
</div>
<div class="author-info">
Created by <a href="http://github.com/sponsors/97115104" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: none;">97 115 104 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" style="display:inline;margin-left:4px;vertical-align:-2px;"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></a>
<div class="author-links">
<a href="https://github.com/97115104/reclassifier" target="_blank" rel="noopener noreferrer">View source on GitHub</a>
<a href="https://97115104.com/projects/" target="_blank" rel="noopener noreferrer">Other projects</a>
</div>
</div>
</footer>
<script src="./js/parser.js"></script>
<script src="./js/app.js"></script>
</body>
</html>