// 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 {
      const response = await axios.post('http://localhost:5000/generate_caption', formData);
      setGeneratedCaption(response.data.generated_caption);
      setAudioPath(response.data.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={`http://localhost:5000/${audioPath}`} />
    </div>
  );
}

export default App;