import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  // const [image, setImage] = useState(null);
  const [generatedCaption, setGeneratedCaption] = useState('');
  const [audioUrl, setAudioUrl] = useState('');

  const handleImageUpload = async (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await axios.post('http://5000/upload', formData);
      setGeneratedCaption(response.data.generated_caption);
      setAudioUrl(response.data.audio_url);
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <div className="file-card">
      <div className="file-inputs">
        <input type="file" onChange={handleImageUpload} accept="image/*" />
        {generatedCaption && <p>Generated Caption: {generatedCaption}</p>}
        {audioUrl && <audio controls src={audioUrl} />}
      </div>
    </div>
  );
};

export default App;