Create react.js

react.js

@@ -0,0 +1,31 @@
+// 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('http://localhost:5000/generate_caption', formData);
+      setGeneratedCaption(response.data.generated_caption);
+      setAudioPath(response.data.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={`http://localhost:5000/${audioPath}`} />
+    </div>
+  );
+}
+
+export default App;