This tool extracts the structure from an image of a form.
It uses the Claude 3 LLM model by Anthropic.
A single extraction of an A4 form page costs about 10p.
It replicates the form structure in JSON, following the schema used by GOV.UK Forms.
It then uses that to generate a multi-page web form in the GOV.UK style.
Here's a short demo video:
form-extractor-demo-2.mov
You'll notice that it doesn't try to faithfully replicate every field in a question. Instead, it uses the relevant components and patterns from the GOV.UK Design System. This is a feature not a bug ;-)
You'll need an Anthropic API key.
Add the key as a local environment variable called ANTHROPIC_API_KEY.
Install the app locally with npm install.
Start the app with npm start.
It'll be available at http://localhost:3000/
- breaking a form down into questions
- distinguishing between question, hint and field text
- distinguishing between single-choice and multiple-choice questions
- recognising common question types like 'name', 'address', 'date' etc.
- recognising when an image isn't a form
- recognising when a question has conditional routing
- processing hand drawn forms
- it can only process jpg images of forms, not documents
- it only knows about certain kinds of question types
- you can't provide your own API key via the UI
- you can't browse previous form extractions
- like a lot of Gen AI, it can be unpredictable
Disclaimer: This is a prototype and I am not a developer ;-).
The main UI is in app/views/index.html.
Other Nunjucks page templates and macros are in app/views.
Additional CSS styles are in public/assets/style.css.
The script in public/assets/scripts.js handles the image preview and loading spinner.
The form in index.html sends the image at the URL provided by the user to the Claude API.
It does this via the 'SendToClaude' function in server.js.
The function makes use of the 'tools' feature of Claude.
That allows you to specify a JSON schema that you'd like it's response to conform to.
The JSON schema is specified in data/extract-form-questions.json.
The results are saved as JSON files in app/data/.
Those files are used to generate the pages that are loaded into iframes in app/views/index.html.
The form components are specificed in app/views/answer-types.njk
They are built using the Nunjucks components in GOV.UK Frontend.
Page rendering is defined in the URL routing rules found at the bottom of server.js.
