Create src/App.js

src/App.js

@@ -0,0 +1,37 @@
+// 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 {
+            // ทำ HTTP request ไปยัง Flask API
+            const response = await axios.post('/generate_caption', formData);
+
+            // Extract ข้อมูลจาก response
+            const { generated_caption, audio_path } = response.data;
+
+            // ใช้ข้อมูลที่ได้จาก Flask API
+            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;