Instructions

During your interaction with the user, if you find anything reusable in this project (e.g., API endpoints, external services, or data processing methods), especially about a fix to a mistake you made or a correction you received, you should take note in the

Lessons

section in the

.cursorrules

file so you will not make the same mistake again.

You should also use the

.cursorrules

file as a Scratchpad to organize your thoughts. Especially when you receive a new task, you should first review the content of the Scratchpad, clear old different tasks if necessary, first explain the task, and plan the steps you need to take to complete the task. You can use todo markers to indicate the progress, e.g. [X] Task 1 [ ] Task 2

Also, update the progress of the task in the Scratchpad when you finish a subtask. Especially when you finish a milestone, it will help improve your depth of task accomplishment to use the Scratchpad to reflect and plan. The goal is to help you maintain a big picture as well as track the progress of the task. Always refer to the Scratchpad when you plan the next step.

Tools

Image Processing and API Communication

The app will rely on an external API to process and combine user-uploaded images (e.g., the user's image and an outfit piece like a T-shirt). The following tools are available:

Image Upload and Processing

Users upload an image of themselves.
Users upload an image of an outfit piece (e.g., T-shirt, jacket, dress).
Both images are sent to an external API for processing.
The API combines the images and returns the result.
The processed image is displayed in the app.

API Request Structure

The API expects multipart/form-data format with two image inputs.
The API returns the processed image as a URL or binary data.

Example API Call (Python)

import requests

url = "https://external-api.com/process"
files = {
    'user_image': open('user_photo.jpg', 'rb'),
    'outfit_image': open('tshirt.png', 'rb')
}
response = requests.post(url, files=files)

if response.status_code == 200:
    result_image_url = response.json().get("processed_image_url")
    print("Processed Image URL:", result_image_url)
else:
    print("Error processing image:", response.text)

Standardized Components

Image Upload UI

Allow users to upload their image.
Allow users to upload an outfit image.
Display the uploaded images side by side.
Provide a "Try On" button to send images to the API.
Display the processed image after API response.

Visual Design

Responsive UI layout for both mobile and desktop.
Loading indicator while the API processes images.
Error handling messages for failed uploads or processing errors.

Functionality

Validate image types (JPEG, PNG) and sizes before upload.
Ensure API response is properly handled.
Support retry functionality in case of processing failures.

Lessons

User-Specified Lessons

Store user-uploaded images temporarily in memory before sending them to the API.
Ensure API error handling and proper UI feedback for failed processing requests.
Use asynchronous requests to prevent UI blocking.
Validate images before upload to avoid unnecessary API calls.

Cursor Learned

Maintain a separate state for original and processed images to prevent accidental overwrites.
Provide users with an option to re-upload images in case of an incorrect selection.
Implement proper caching to prevent re-uploading the same images multiple times.

Scratchpad

Current Task: Create Outfit Try-On Web App

Project Setup Steps:

[X] 1. Initialize Next.js project with TypeScript [X] 2. Set up project structure and dependencies [X] 3. Create basic UI components [X] 4. Implement image upload functionality [X] 5. Integrate with external API [X] 6. Add error handling and loading states [X] 7. Implement results page with download/share features [X] 8. Add responsive styling and UI improvements [ ] 9. Testing and deployment

Current Focus:

Setting up the development environment and testing the application.

Progress:

[X] Project initialization [X] Dependencies installation [X] Basic project structure [X] Component development [X] API integration [ ] Testing [ ] Deployment

Notes:

Using Next.js for better performance and SEO
TypeScript for type safety
Tailwind CSS for styling
External API for image processing
Environment variables for API keys

Next Steps:

Test the application locally
Set up proper error handling
Add loading states and user feedback
Deploy the application

Instructions

Lessons

section in the

.cursorrules

file so you will not make the same mistake again.

You should also use the

.cursorrules

Tools

Image Processing and API Communication

The app will rely on an external API to process and combine user-uploaded images (e.g., the user's image and an outfit piece like a T-shirt). The following tools are available:

Image Upload and Processing

Users upload an image of themselves.
Users upload an image of an outfit piece (e.g., T-shirt, jacket, dress).
Both images are sent to an external API for processing.
The API combines the images and returns the result.
The processed image is displayed in the app.

API Request Structure

The API expects multipart/form-data format with two image inputs.
The API returns the processed image as a URL or binary data.

Example API Call (Python)

import requests

url = "https://external-api.com/process"
files = {
    'user_image': open('user_photo.jpg', 'rb'),
    'outfit_image': open('tshirt.png', 'rb')
}
response = requests.post(url, files=files)

if response.status_code == 200:
    result_image_url = response.json().get("processed_image_url")
    print("Processed Image URL:", result_image_url)
else:
    print("Error processing image:", response.text)

Standardized Components

Image Upload UI

Allow users to upload their image.
Allow users to upload an outfit image.
Display the uploaded images side by side.
Provide a "Try On" button to send images to the API.
Display the processed image after API response.

Visual Design

Responsive UI layout for both mobile and desktop.
Loading indicator while the API processes images.
Error handling messages for failed uploads or processing errors.

Functionality

Validate image types (JPEG, PNG) and sizes before upload.
Ensure API response is properly handled.
Support retry functionality in case of processing failures.

Lessons

User-Specified Lessons

Store user-uploaded images temporarily in memory before sending them to the API.
Ensure API error handling and proper UI feedback for failed processing requests.
Use asynchronous requests to prevent UI blocking.
Validate images before upload to avoid unnecessary API calls.

Cursor Learned

Maintain a separate state for original and processed images to prevent accidental overwrites.
Provide users with an option to re-upload images in case of an incorrect selection.
Implement proper caching to prevent re-uploading the same images multiple times.

Scratchpad

Using Next.js for better performance and SEO
TypeScript for type safety
Tailwind CSS for styling
External API for image processing
Environment variables for API keys

Next Steps:

Test the application locally
Set up proper error handling
Add loading states and user feedback
Deploy the application

Instructions

Related Skills

.cursorrules

This is an Elixir library that recompiles Elixir code in its AST form.

This is AI chat app called DeeperSeeker.