// 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;