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

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

  // const handleImageUpload = (e) => {
  //   setImage(e.target.files[0]);
  // }

  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);
      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>
            {/* <input type="file" placeholder="๊Upload" onChange={handleImageGenerate} accept="image/jpeg, image/png" /> */}
            {/* <button onClick={handleImageGenerate}>Upload</button> */}
            {generatedCaption && <p>Generated Caption: {generatedCaption}</p>}
            {audioUrl && <audio controls src={audioUrl} />}
          </div>
        </div>
      </div>
    </>
  );
};

export default App;