Update upload image

frontend/src/App.js

@@ -1,12 +1,17 @@
+import './App.css';
 import React, { useState } from 'react';
 import axios from 'axios';
 
 const App = () => {
-  // const [image, setImage] = useState(null);
+  // const [image, setImage] = useState();
   const [generatedCaption, setGeneratedCaption] = useState('');
   const [audioUrl, setAudioUrl] = useState('');
 
-  const handleImageUpload = async (event) => {
+  // const handleImageUpload = (e) => {
+  //   setImage(e.target.files[0]);
+  // }
+
+  const handleImageGenerate = async (event) => {
     const file = event.target.files[0];
     const formData = new FormData();
     formData.append('image', file);
@@ -21,13 +26,23 @@ const App = () => {
   };
 
   return (
-    <div className="file-card">
-      <div className="file-inputs">
-        <input type="file" onChange={handleImageUpload} accept="image/*" />
-        {generatedCaption && <p>Generated Caption: {generatedCaption}</p>}
-        {audioUrl && <audio controls src={audioUrl} />}
+    <>
+      <div className="App">
+        <p className="title">Image Captioning</p>
+        <div className="file-card">
+          <div className="file-inputs">
+            <label htmlFor="fileInput">
+              <input type="file" id="fileInput" onChange={handleImageGenerate} accept="image/jpeg, image/png" />
+              <span>Upload</span>
+            </label>
+            {/* <input type="file" placeholder="๊Upload" onChange={handleImageGenerate} accept="image/jpeg, image/png" /> */}
+            {/* <button onClick={handleImageGenerate}>Upload</button> */}
+            {generatedCaption && <p>Generated Caption: {generatedCaption}</p>}
+            {audioUrl && <audio controls src={audioUrl} />}
+          </div>
+        </div>
       </div>
-    </div>
+    </>
   );
 };