W
Wasp-lang12mo ago
mtmv

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); } } };
No description
10 Replies
mtmv
mtmvOP12mo ago
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 broken
Vinny (@Wasp)
Vinny (@Wasp)12mo ago
From 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
Vinny (@Wasp)
Vinny (@Wasp)12mo ago
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.
mtmv
mtmvOP12mo ago
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 🙂
MEE6
MEE612mo ago
Wohooo @martintmv, you just became a Waspeteer level 1!
nitish30
nitish309mo ago
Hi @martintmv, Did you implemented and is it working properly?
martinsos
martinsos9mo ago
@nitish30 why are you asking, anything you are struggling with here?
nitish30
nitish309mo ago
Hi @martinsos, I am trying to build UI as similar as https://replicate.com/batouresearch/photorealistic-fx. Appreciate if you could share template.
martinsos
martinsos9mo ago
@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.
nitish30
nitish309mo ago
Thank you. Will check it and keep you updated.
Want results from more Discord servers?
Add your server