App.js

// 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('https://api-inference.huggingface.co/models/Kamonwan/blip-image-captioning-new', formData);
      // Extract the generated caption and audio path from the response
      const { generated_caption, audio_path } = response.data;
      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;