Spaces:
Runtime error
Runtime error
Create src/App.js
Browse files- src/App.js +37 -0
src/App.js
ADDED
@@ -0,0 +1,37 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// src/App.js
|
2 |
+
import React, { useState } from 'react';
|
3 |
+
import axios from 'axios';
|
4 |
+
|
5 |
+
function App() {
|
6 |
+
const [generatedCaption, setGeneratedCaption] = useState('');
|
7 |
+
const [audioPath, setAudioPath] = useState('');
|
8 |
+
|
9 |
+
const handleImageUpload = async (event) => {
|
10 |
+
const formData = new FormData();
|
11 |
+
formData.append('image', event.target.files[0]);
|
12 |
+
|
13 |
+
try {
|
14 |
+
// ทำ HTTP request ไปยัง Flask API
|
15 |
+
const response = await axios.post('/generate_caption', formData);
|
16 |
+
|
17 |
+
// Extract ข้อมูลจาก response
|
18 |
+
const { generated_caption, audio_path } = response.data;
|
19 |
+
|
20 |
+
// ใช้ข้อมูลที่ได้จาก Flask API
|
21 |
+
setGeneratedCaption(generated_caption);
|
22 |
+
setAudioPath(audio_path);
|
23 |
+
} catch (error) {
|
24 |
+
console.error('Error uploading image:', error);
|
25 |
+
}
|
26 |
+
};
|
27 |
+
|
28 |
+
return (
|
29 |
+
<div>
|
30 |
+
<input type="file" onChange={handleImageUpload} />
|
31 |
+
<p>Generated Caption: {generatedCaption}</p>
|
32 |
+
<audio controls src={audioPath} />
|
33 |
+
</div>
|
34 |
+
);
|
35 |
+
}
|
36 |
+
|
37 |
+
export default App;
|