Upload Front.js

Front.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import axios from "axios";
+
+function App() {
+    const [image, setImage] = useState(null);
+    const [caption, setCaption] = useState(null);
+
+    const handleImageChange = (event) => {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+
+        reader.onload = () => {
+            setImage(reader.result);
+        };
+
+        reader.readAsDataURL(file);
+    };
+
+    const handleSubmit = () => {
+        const formData = new FormData();
+        formData.append("image", image);
+
+        axios.post("/caption", formData)
+            .then((response) => response.data)
+            .then((data) => {
+                setCaption(data.caption);
+            });
+    };
+
+    return (
+        <div>
+            <h1>Image Captioning with BLIP</h1>
+            <p>ระบบนี้ใช้ BLIP เพื่อสร้างคำอธิบายภาพ</p>
+            <form onSubmit={handleSubmit}>
+                <input type="file" name="image" id="image" onChange={handleImageChange} />
+                <label for="image">เลือกภาพ</label>
+                <input type="submit" value="สร้างคำอธิบาย" />
+            </form>
+            {caption && <p>{caption}</p>}
+        </div>
+    );
+};
+
+export default App;