Nepjune's picture
Create src/App.js
0192143 verified
// src/App.js
import React, { useState } from 'react';
import axios from 'axios';
function App() {
const [generatedCaption, setGeneratedCaption] = useState('');
const [audioPath, setAudioPath] = useState('');
const handleImageUpload = async (event) => {
const formData = new FormData();
formData.append('image', event.target.files[0]);
try {
// ทำ HTTP request ไปยัง Flask API
const response = await axios.post('/generate_caption', formData);
// Extract ข้อมูลจาก response
const { generated_caption, audio_path } = response.data;
// ใช้ข้อมูลที่ได้จาก Flask API
setGeneratedCaption(generated_caption);
setAudioPath(audio_path);
} catch (error) {
console.error('Error uploading image:', error);
}
};
return (
<div>
<input type="file" onChange={handleImageUpload} />
<p>Generated Caption: {generatedCaption}</p>
<audio controls src={audioPath} />
</div>
);
}
export default App;