import './App.css';
import React, { useState } from 'react';
import axios from 'axios';
// import FileList from './FileList/FileList';

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

  const handleImageGenerate = 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, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      
      setGeneratedCaption(response.data.generated_caption);
      setAudioUrl(response.data.audio_url);
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <>
      <div className="App">
        <p className="title">Image Captioning</p>
        <div className="file-card">
          <div className="file-inputs">
            <label htmlFor="fileInput">
              <input type="file" id="fileInput" onChange={handleImageGenerate} accept="image/jpeg, image/png" />
              <span>Upload</span>
            </label>
            {generatedCaption && <p>Generated Caption: {generatedCaption}</p>}
            {audioUrl && <audio controls src={audioUrl} />}
          </div>
        </div>
      </div>
    </>
  );
};

export default App;