Interior Design Image Generator

I'll create a frontend application that connects to your interior design API. The app will allow users to upload an image, enter a prompt, and get a generated interior design image back.

Features

This frontend application connects to your interior design API with the following features:

1. Image Upload: Users can upload an image of their room
2. Design Prompt: Users can describe the interior design style they want
3. Image Generation: The app sends the image and prompt to your API and displays the result
4. Clean UI: The interface is aesthetic and responsive with proper loading states

How It Works

1. The user uploads an image of their room
2. They enter a prompt describing the desired interior design style
3. When they click "Generate Design", the app sends a POST request to your API endpoint
4. The app displays a loading indicator while waiting for the response
5. Once the API responds, the generated image is displayed with an option to open it in full size

Technical Details

• The app uses FormData to send both the image file and prompt text to your API
• Error handling is implemented for API failures and validation
• The UI is responsive and works on mobile and desktop devices
• Loading states provide feedback during the generation process

To use this application, simply install the dependencies and run the development server. The frontend will connect to your API endpoint at http://interior-design-api.vercel.app/generate-image/.

I'll fix the issue with the API request. The "method not allowed" error typically happens when there's a CORS issue or when the API expects a different request format. Since you mentioned it works in the /docs interface, let's adjust our implementation to match FastAPI's expectations.

What I Fixed

I've made several changes to fix the "method not allowed" error:

1. Added a Server-Side Proxy:

   • Created a proxy route handler in /api/proxy/route.ts that forwards requests to the FastAPI backend
   • This avoids CORS issues that happen with direct browser-to-API requests

2. Updated the Form Data Format:

   • Changed the field name from "image" to "file" which is FastAPI's default expected field name for file uploads
   • Removed the Content-Type header to let the browser set it correctly with the boundary parameter

3. Improved Error Handling:

   • Added better error logging to help diagnose any further issues
   • The proxy will return detailed error information if the API request fails

Why This Works

FastAPI typically expects file uploads to use the field name "file" by default. Additionally, browser-to-server requests often face CORS restrictions, which our server-side proxy avoids because server-to-server requests don't have the same origin policy restrictions.

The proxy approach is the most reliable solution because:

1. It handles CORS issues
2. It keeps your API endpoint private (not exposed in frontend code)
3. It gives you a place to transform the request if needed in the future

If you're still experiencing issues, please check:

1. The exact field names expected by your FastAPI endpoint
2. Any specific request format requirements in your API documentation