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;