Update react fe

frontend/src/App.js

@@ -1,20 +1,35 @@
-import logo from './logo.svg';
-import './App.css';
+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);
+    }
+  };
 
-function App() {
   return (
-    <div className="App">
-	  <p className="title">Upload File</p>
-      <div className="file-card">
-        <div className="file-inpues">
-          <input type="files"/>
-          <button>Upload</button>
-        </div>
-        <p className="main">Support files</p>
-        <p className="info">PDF, JPG, PNG</p>
+    <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>
+    </div>
   );
-}
+};
 
 export default App;
+