I am working with my first react based application and am attempting to send an image to my Flask based server but it is saying that the image is not being attached. The basis is to take a live image and then send it to an AI model in order to process the image and I have found success with uploading a file straight, but not with live videos.
This is the main file I am having issues with
`"use client";
import "./myscript.css"
import { useEffect, useRef } from 'react';
const MyWebcam = () => {
const videoRef = useRef(null);
useEffect(() => {
const getUserMedia = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
if (videoRef.current) {
videoRef.current.srcObject = stream;
videoRef.current.addEventListener('loadedmetadata', () => {})
}
} catch (error) {
console.error(error);
}
};
getUserMedia();
}, []);
const takePicture = async () => {
if (!videoRef.current || !videoRef.current.videoWidth || !videoRef.current.videoHeight) {
console.log(videoRef.current)
console.error('Video not ready');
}
else{
const canvas = document.createElement('canvas');
canvas.width = videoRef.current.videoWidth;
canvas.height = videoRef.current.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
const imgUrl = canvas.toDataURL('image/png');
const img= document.getElementById("picture")
img.src = imgUrl
let data = context.getImageData(0, 0, canvas.width, canvas.height)
const formData = new FormData()
formData.append('file', data.data)
console.log("pre JSON fetching")
console.log(formData)
try {
const response = await fetch("http://localhost:8080/results", {
method: 'POST',
body: formData
});
console.log(response)
const data = await response.json();
console.log('Response:', data);
let ex = document.getElementById("translation")
ex.textContent = data.message
}
catch(error){
console.error(error) }
}
}
return (
<div className="fullscreen-container">
<div className="input-div">
<h2>Video Capture</h2>
<div className="video-container">
<video ref={videoRef} autoPlay width="900" height="900" />
<div className="image-container">
<img id="picture" width="900" height="900" alt="Captured" />
</div>
</div>
<button type="button" onClick={takePicture}>Take Picture</button>
<p id="translation">Translation</p>
</div>
</div>
);
};
export default MyWebcam;
`
This is the server I am trying to send to
from flask import Flask, jsonify, request
from flask_cors import CORS, cross_origin
from model import ASLModel
import torch
from pathlib import Path
from torchvision import transforms, datasets
from PIL import Image
'Access-Control-Allow-Origin: *'
#app instance
app = Flask('__name__')
CORS(app, resources={r"/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'
@app.route("/results", methods=["POST", "GET"])
@cross_origin()
def results():
if 'file' not in request.files:
print(request.files)
return jsonify({'error': 'no file found'})
print(request.files)
img = request.files['file']
trainData = datasets.ImageFolder(root="archive/asl_alphabet_train")
classNames=trainData.classes
device = "cpu"
MODEL_PATH = Path("models")
MODEL_PATH.mkdir(parents=True, exist_ok=True)
MODEL_NAME = "ASL_CNN_MODEL.pth"
MODEL_SAVE_PATH = MODEL_PATH / MODEL_NAME
LoadedModel = ASLModel(input_shape=3, hidden_units=30, output_shapes=29)
LoadedModel.load_state_dict(torch.load(MODEL_SAVE_PATH), False)
LoadedModel.to(device=device)
transform=transforms.Compose([transforms.Resize(size=(500, 500)), transforms.ToTensor()])
LoadedModel.eval()
img = Image.open(img)
img.show()
img = transform(img)
sample = torch.unsqueeze(img, dim=0).to(device)
predLogit = LoadedModel(sample)
result = torch.softmax(predLogit.squeeze(), dim=0)
result = result.argmax()
print("result", classNames[int(result)])
response = jsonify({'message': classNames[int(result)]})
return response
if __name__ == "__main__":
app.run(debug=True, port=8080)#port 5000 has issues with requests
And this is the file for the page that lets you upload an image
'use client'
import './upload.css'
const MyInput = () => {
var img
const ImageUploaded = () => {
let input = document.getElementById("file") //Get image
img = input.files[0]
let final= document.getElementById("picture") //access displayed tag for image
final.src = URL.createObjectURL(img)
}
const SendToModel = async () => {
// fetch("http://localhost:8080/results").then(
// response => response.json()).then(
// data => {
// let ex = document.getElementById("translation")
// ex.textContent = data.message
// }
// )
const formData = new FormData()
formData.append('file', img)
console.log("pre JSON fetching")
console.log(formData)
try {
const response = await fetch("http://localhost:8080/results", {
method: 'POST',
body: formData
});
console.log(response)
const data = await response.json();
console.log('Response:', data);
let ex = document.getElementById("translation")
ex.textContent = data.message
}
catch(error){
console.error(error) }
}
return (
<div className="fullscreen-container">
<div className="input-div">
<h2>Upload Images</h2>
<p>Drag and drop images here or <span className="browse">browse</span></p>
<input type="file" id="file" onChange={ImageUploaded} />
<img id="picture" alt="Uploaded" />
<button id="submit" onClick={SendToModel}>Submit</button>
<p id="translation">Translation</p>
</div>
</div>
)}
export default MyInput
Any and all help would be appreciated because the “if file not in request.files” statement only gets hit when I try to send the live image