Update App.js

App.js

@@ -0,0 +1,33 @@
+// 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;