Use the provided template by the image to create the UI User should be able to: a. Select Assesment type b. Tick if the pacient is monocular c. Upload the file. File types available are: any images Use JS code to connect Anthropic API. Use this api key: "sk-asdqwe". Use this documentation to create api calls via js. Use this link to get information about api calls to Anthropic: https://docs.anthropic.com/en/docs/build-with-claude/vision When user clicks on "Submit assessment", make claude api call. Make a self disposable in 3 seconds toast in right top corner of the screen that the image was uploaded. Waiting for the response. After the anthropic is called, and we received the response, we must make a popup with the response text (result). User can close this popup clicking outside of it or on cross on top right corner of popup You can use any libraries or icons you need to - feel free to do it You MUST use this prompt when requesting Anthropic with the report:
Your task is to interpret Esterman Visual Field Tests to assess a patient's fitness to drive according to the Australian guidelines for fitness to drive and make DESCRIPTIVE REPORT.
When provided with an Esterman Visual Field Test scan, you will:
1. **Analyze the visual field test**, identifying:
- **White circles**: points seen by the patient.
- **Black squares**: points not seen by the patient.
2. **Determine the assessment result** based on the following criteria:
- **Pass**: The patient meets all the visual field requirements as per the guidelines.
- **Fail**: The patient does not meet the visual field requirements due to one or more of the following:
- A cluster of **four or more adjoining missed points (black squares)** that are completely or partly within the central **20-degree area**.
- Any other significant defects as defined in the guidelines.
- **Conditional**: The patient may drive under certain conditions or requires further assessment.
3. **Provide specific reasons** for the assessment result if it is a fail or conditional. For example:
- "There is a cluster of four or more adjoining points that is either completely or partly within the central 20-degree area."
- Reference any other relevant criteria from the guidelines that apply.
4. **Generate a standardized report** that includes:
- **Patient Information** (if available).
- **Assessment Result**: Pass, Fail, or Conditional.
- **Detailed Reasons** for the result (if applicable).
- **Recommendations** (if applicable).
**Note**: Ensure your analysis is accurate and strictly adheres to the Australian guidelines for fitness to drive. The report should be clear, professional, and suitable for use by medical practitioners and technicians.
I'll create a complete UI based on the template shown in the image, along with all the requested functionality.
I've created a complete UI for the Australian Driving Assessment form based on the template in the image. Here's what the implementation includes:
Features Implemented:
Assessment Type Selection
- Radio buttons for Private Vehicle Standard and Commercial Vehicle Standard
- Definition links (styled as blue text)
Monocular Patient Checkbox
- Checkbox to indicate if the patient has only one eye
File Upload Section
- Drag and drop functionality
- Click to browse option
- Preview of uploaded image
- Option to remove uploaded image
- Supports all image formats
Submit Assessment Button
- Green button that triggers the Anthropic API call
- Disabled when no image is uploaded or during processing
Toast Notifications
- Shows a toast when an image is uploaded
- Auto-dismisses after 3 seconds
- Displays errors if they occur
Result Popup
- Shows the assessment result from Anthropic
- Can be closed by clicking outside or the X button
- Properly formatted for readability
Anthropic API Integration
- Uses the provided API key (sk-asdqwe)
- Implements the exact prompt specified in the requirements
- Handles image conversion to base64 for API submission
How to Use:
- Select the assessment type (Private or Commercial)
- Check the monocular checkbox if applicable
- Upload an Esterman visual field image by dragging and dropping or clicking to browse
- Click "Submit Assessment" to process the image
- View the assessment result in the popup that appears
The implementation follows all the requirements and provides a clean, user-friendly interface that matches the design in the template image.
We'll receive the output from Anthropic in the format below. Your task is to show it not on popup, but on another page Take the image as page html example
Response format: { "testResult": "string, The overall test result (e.g. 'FAIL: Not suitable for driving')", "patientInformation": { "name": "string, The patient's name or identifier", "testDate": "string, The date when the test was conducted", "driverType": "string, Type of driver's license category (e.g. 'Private Vehicle')", "testType": "string, The specific type of vision test performed", "monocularVision": "string, Whether the patient has monocular vision ('Yes' or 'No')" }, "reliabilityMetrics": { "falsePositiveErrors": "string, The fraction and percentage of false positive responses, with threshold information", "fixationLosses": "string, The fraction of fixation losses during the test", "estermanEfficiency": "number, The efficiency score on the Esterman test" }, "visualFieldAnalysis": { "pointsSeen": "string, The fraction of test points seen by the patient", "pointsMissed": "string, The fraction of test points missed by the patient", "horizontalFieldExtent": "string, The measured horizontal field extent with requirement information", "centralFieldStatus": "string, The status of the central visual field with defect information", "patternOfDefect": "string, The identified pattern of visual field defect" }, "assessmentExplanation": { "summary": "string, A summary of the assessment result", "reasons": [ { "issue": "string, The title of the issue identified", "description": "string, Detailed explanation of the issue", "standard": "string, The relevant driving standard reference and quotation" } ] }, "recommendations": { "summary": "string, Overall recommendation based on the test results", "actions": "array of strings, Specific actions recommended for the patient" } }
I'll modify the application to display the assessment results on a separate page instead of a popup, following the design shown in the image.
I've updated the application to display the assessment results on a separate page instead of in a popup, following the design shown in the image. Here's what I've implemented:
Key Changes:
Created a New Results Page
- Added a dedicated
/resultspage that displays the assessment results - The page matches the layout and styling of the example image
- Color-coded sections highlight important information (red for failures, green for recommendations)
- Added a dedicated
Updated the Main Page
- Modified the form submission to redirect to the results page
- Passes the assessment data and image via URL parameters
- Maintains all the original form functionality
Enhanced the Anthropic API Integration
- Updated the API call to ensure it returns data in the required JSON format
- Added fallback data in case the API call fails
- Preserves the user's selected assessment type and monocular status
Results Page Features:
Header Section
- Shows the test result with appropriate color (red for fail, yellow for conditional, green for pass)
- Includes an X icon for failed assessments
Two-Column Layout
- Patient Information section on the left
- Visual Field Image section on the right
Detailed Sections
- Reliability Metrics with color-coded warnings
- Visual Field Analysis with highlighted issues
- Assessment Explanation with numbered reasons and standards references
- Recommendations in a green-highlighted box
Navigation
- "Back to Assessment Form" link at the top
- Print button to print the report
- Back button at the bottom
The implementation closely follows the design in the provided image while maintaining all the functionality from the original form.
You should not but the response in url and redirect to another page What you should do is to put to localstorage the results, redirect to results page and get results from localstorage Put it under 1 key, make it const