Building Wasp app that uses Replicate API, Error submitting images to the API, 404
Hello, I'm building on top of the Wasp SAAS template and I want to make use of models on Replicate.com to run in my app.
The issue is that I think I made everything as in /docs, added the
replicate
and multer
dependencies in main.wasp
, made a simple front-end to upload two images and a prompt, but when I try to submit and pass it to the actual API I get errors:
http://localhost:3000/api/operations/ProcessImage 404 (Not Found)
ImageUploader.tsx:54 Error submitting images: AxiosError
message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST'
Any tips on how to solve this and actually make my Wasp app to communicate with Replicate's API?
extra context:
this is the action in my main.wasp
:
action ProcessImage {
fn: import { processImage } from "@server/processImage.js",
entities: [User]
}
any my ImageUploader.tsx where /api/operations/ProcessImage
seems to be 404 (Not Found)?
const handleSubmit = async () => {
if (faceImage && poseImage) {
//model parameters here
try {
// URL is derived from the action name
const response = await axios.post('/api/operations/ProcessImage', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
console.log('Model output:', response.data);
// Response here
} catch (error) {
console.error('Error submitting images:', error);
}
}
};10 Replies
tried to restart the app and ran
wasp start
fresh, but everything seems to be fine, no issues in the terminal and the app is working, yet the upload / send to the api is just brokenFrom just glancing at it quickly it looks like you’re trying to access an action via an api url, is that right?
You should be importing the action on the client instead
Once you define the action, you import it as a function and call it on the client. Read more about it here https://wasp-lang.dev/docs/data-model/operations/overview
Overview | Wasp
While Entities enable help you define your app's data model and relationships, Operations are all about working with this data.
thank you! i'll have a look and try again, i'll reply here again If I still struggle to make this connection. I did such connections a bunch of times using frameworks, but this is my first wasp app 🙂
Wohooo @martintmv, you just became a Waspeteer level 1!
Hi @martintmv, Did you implemented and is it working properly?
@nitish30 why are you asking, anything you are struggling with here?
Hi @martinsos, I am trying to build UI as similar as https://replicate.com/batouresearch/photorealistic-fx. Appreciate if you could share template.
@nitish30 cool! I don't have any code to share for Replicated, but we do have OpenSaas template which has OpenAI API and also has code/docs for image uploading, so take a look at that: https://opensaas.sh/ .
There are also some issues on GH and questions here in Discord that are talking about uploading files via Wasp, so those could also be interesting to you.
Open SaaS
Free, open-source SaaS boilerplate starter for React & NodeJS.
Thank you. Will check it and keep you updated.