Why I chose this
I used the Food Scrap Drop-Off dataset (if26-z6xq) to test it,
because its operation_day_hours and notes columns are a clear
case of the problem. I ran the prompt and confirmed the output
works.
LLM prompt
# What I want you to build
Add a new feature to a NYC Open Data dataset page.
The feature is called Smart Filters.
Build it as one HTML file that I can open in a browser.
# The problem
NYC Open Data lets you filter columns that hold numbers or
short labels. It cannot filter columns that hold sentences.
But many useful facts live in those sentences. Opening hours.
Rules about what you can bring. Which months a place is open.
A person cannot ask the site "what is open right now."
The filter tool cannot read that. The fact is there, but it
is stuck inside text.
Smart Filters reads that text and turns it into filters.
# The example dataset
Use this dataset to show how it works:
Food Scrap Drop-Off Locations in NYC
API: https://data.cityofnewyork.us/resource/if26-z6xq.json
Columns to use:
food_scrap_drop_off_site, location, borough, open_months,
operation_day_hours, notes, hosted_by
# Page layout
Make the page look like a real NYC Open Data dataset page.
At the top: a blue bar, the dataset title, the agency name,
and a row of buttons. The buttons are View Data, Visualize,
Export, API, and Smart Filters.
Smart Filters is the new button. Draw it with a dashed border
and a different color. A reader should see right away which
part is new and which part already exists.
Below that, show the Smart Filters panel. Split it into two
columns.
# Left column: the detector
List every column that holds text.
For each one, show:
- the column name
- what kind of fact it holds
- how many rows could be read
- one real example from the data
If a column has no pattern, say so and leave it alone.
Do not pretend to read it.
# Right column: the filters
Build filter buttons from what the detector found.
Make these four:
- Open right now
- Takes meat and dairy
- No app needed
- Year round
Under each button, show which column it came from.
Below the buttons, show a table of matching rows.
Show a count like "8 of 12 rows match."
In the table, mark any value the code worked out with a small
"derived" tag. The user should know it is not raw data.
# How to read the hours
The hours column is plain text. It looks like this:
"Sunday (Start Time: 9:00 AM - End Time: 11:00 AM)"
"Every day (Start Time: Dawn - End Time: Dusk)"
"24/7"
"Monday - Friday (Start Time: 10:00 AM - End Time: 4:00 PM)"
Turn each one into a day list and a start and end time.
Read Dawn as 6:00 AM and Dusk as 6:00 PM. Tell the user you
did this.
Compare the result to the clock on the user's device.
Then show one of three states:
- Open until 3 PM
- Opens 9 AM today
- Closed, next open Saturday 10 AM
If you cannot read the text, say "Hours not parsed."
Do not guess.
# How to read the notes
The notes column says what a site will take. It looks like this:
"No meat, bones, or dairy"
"Accepts all food scraps, including meat and dairy."
"Download the app to access bins."
Turn it into three states: yes, no, and not stated.
This part is important. If a row does not say anything about
meat, the answer is "not stated." It is not a no.
When the user turns on "Takes meat and dairy," hide the rows
that say no and the rows that say nothing. Do not guess for
the rows that say nothing.
# Show that this is not just one app
At the bottom of the page, add four small cards.
Each card names another dataset and the text column it holds.
Restaurant Inspection Results, 43nn-pn8j,
violation_description
DOT Street Closures, 478a-yykk, work dates
Farmers Markets, 8vwk-6iz2, days_of_operation
Parks Facilities, p2fw-jy9g, accessible and notes
Under each one, write one line saying what filter the same
detector would build there.
# Rules for the code
Use plain HTML, CSS, and JavaScript. One file.
No React. No build step. No npm.
Get the data with fetch from the API above.
Use $select to ask for only the columns you need.
Use $limit so you never pull the whole table.
Also include about ten rows of sample data inside the file.
If the API does not answer, use those rows instead, and tell
the user on the page that it is running on sample data.
# Rules for the design
Use two looks on purpose.
The old platform parts: grey, navy, square corners.
The new feature: a different color, a dashed border.
Someone looking at a screenshot should be able to point at
the new part.
Make it work on a phone screen too.
Show a loading state.
Show a clear message when no rows match.
# What to give me back
One complete HTML file that runs on its own.
Add comments in the code that explain the hours parser and
each API call.