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.
This frontend application connects to your interior design API with the following features:
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.
I've made several changes to fix the "method not allowed" error:
Added a Server-Side Proxy:
/api/proxy/route.ts that forwards requests to the FastAPI backendUpdated the Form Data Format:
Improved Error Handling:
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:
If you're still experiencing issues, please check: