update site so it uses new ingredient format + visual fixes

site/src/app/page.css

@@ -1,7 +1,6 @@
 #main {
     margin: auto;
     padding: 1rem;
-    width: 800px;
     max-width: calc(100% - 2rem);
     color: white;
     font-size: 16px;
@@ -51,9 +50,25 @@ h1 small {
 }
 
 .link-card-grid {
+    width: 100%;
+    max-width: 1350px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 1em;
+    align-items: stretch;
+    justify-content: space-evenly;
     padding: 0;
+    margin: 0 auto;
+}
+
+.calorie-intake {
+    text-align: center;
+    font-size: 1.5em;
+    color: #ddd;
+}
+
+.calorie-intake > .kcal {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: #fff;
 }

site/src/app/page.js

@@ -22,13 +22,15 @@ const getClient = (() => {
 
 export default function Home() {
   const [items, setItems] = useState([]);
+  const [registeredDishes, setRegisteredDishes] = useState([]);
 
   const addItemToList = (image, data) => {
    setItems([...items, <Card
       key={uuidv4()}
       image={image}
       data={data}
     />]);
+    setRegisteredDishes([...registeredDishes, data]);
   }
 
   const makePrediction = async (file) => {
@@ -51,6 +53,14 @@ export default function Home() {
     <div id="main">
       <h1><span className="text-gradient">SmartBite</span> <small>eat wiser</small></h1>
       <DragAndDrop onSubmit={makePrediction}/>
+      {
+        registeredDishes.length > 0 && <p className="calorie-intake">Calorías registradas hasta ahora: <span className="kcal">{
+          registeredDishes.reduce((acc, it)=> {
+            console.log(registeredDishes, it, acc)
+            return acc + it.kcal
+          }, 0)
+        }</span></p>
+      }
       <ul className="link-card-grid">
         {items}
       </ul>

site/src/components/Card/Card.css

@@ -9,7 +9,8 @@
     background-position: 100%;
     transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-    width: min(650px, 90vw);
+    width: min(620px, 90vw);
+    margin: 8px;
     overflow-x: auto;
 }
 

site/src/components/Card/Card.js

@@ -1,31 +1,16 @@
 import "./Card.css";
 import Image from "next/image";
 
-/* 
-// Sample data
-"waffles": {
-    "name": "Waffles",
-    "kcal": 250,
-    "ingredients": ["harina", "huevos", "leche", "azúcar", "mantequilla"],
-    "sugars": 14,
-    "fiber": 2,
-    "fat": 12,
-    "protein": 6,
-    "carbohydrates": 30,
-    "allergies": ["gluten", "huevos", "lácteos"],
-    "portion": 100
-}
-*/
 function Card({image, data}) {
     return (
         <li className="link-card">
-            <Image src={URL.createObjectURL(image)} alt={data.name} />
+            <Image src={URL.createObjectURL(image)} alt={data.name} width={200} height={200} />
             <div>
             <h2>{data.name} <small>(información por {data.portion} gr)</small></h2>
                 <ul>
                     <li>{data.kcal} kcal</li>
                     { data.allergies && <li>Alérgenos: {data.allergies.join(", ")}</li> }
-                    <li>Ingredientes: {data.ingredients.join(", ")}</li>
+                    <li>Ingredientes: {data.ingredients.map(({name}) => name).join(", ")}</li>
                 </ul>
                 <table>
                     <thead>

site/src/components/DragAndDrop/DragAndDrop.css

@@ -1,7 +1,9 @@
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 
 .uploadInput {
-    margin-bottom: 2rem;
+    margin: 0 auto 2rem auto;
+    max-width: 800px;
+    width: 100%;
     border: 1px solid rgba(var(--accent-light), 25%);
     background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
     padding: 1.5rem;
@@ -38,6 +40,7 @@
 	color: #232323;
 	border: 4px dashed #aaa;
 	border-radius: 8px;
+    cursor: pointer;
 }
 
 .dragging {

site/src/components/DragAndDrop/DragAndDrop.js

@@ -9,6 +9,7 @@ const DragAndDrop = ({onSubmit}) => {
   const [preview, setPreview] = useState(null);
   const [isCameraOpen, setIsCameraOpen] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
 
@@ -98,13 +99,15 @@ const DragAndDrop = ({onSubmit}) => {
   };
 
   const handleSubmit = async () => {
+    setIsSubmitting(true);
     if (file) {
       const formData = new FormData();
       formData.append('file', file);
-      onSubmit(file);
+      await onSubmit(file);
     } else {
       console.error('No file selected');
     }
+    setIsSubmitting(false);
   };
 
   const clearFile = () => {
@@ -119,8 +122,8 @@ const DragAndDrop = ({onSubmit}) => {
         <div className="cameraContainer">
           <video ref={videoRef} autoPlay style={{ width: '100%' }} />
           <div className="button-wrapper">
-          <button className="custom-btn primary" onClick={capturePhoto}>Capture</button>
-          <button className="custom-btn secondary" onClick={stopCamera}>Cancel</button>
+          <button className="custom-btn primary" onClick={capturePhoto}>Capturar</button>
+          <button className="custom-btn secondary" onClick={stopCamera}>Cancelar</button>
           </div>
         </div>
       ) : (
@@ -140,15 +143,15 @@ const DragAndDrop = ({onSubmit}) => {
           />
           {preview ? (
             <div>
-              <p>Selected file: {file.name}</p>
-              <Image src={preview} alt="Preview" style={{ width: '300px', height: '300px', objectFit: 'contain' }} />
+              <p>Archivo seleccionado: {file.name}</p>
+              <Image src={preview} alt="Preview" width={300} height={300} style={{ objectFit: 'contain' }} />
             </div>
           ) : (
             <div>
               <p style={{ cursor: 'pointer' }} onClick={handleClick}>
-                Drag a picture here <br/>
-                - or - <br/>
-                Click to upload
+                Arrastra una imagen <br/>
+                - o - <br/>
+                Pulsa para subir una desde tu equipo
               </p>
             </div>
           )}
@@ -160,24 +163,27 @@ const DragAndDrop = ({onSubmit}) => {
         <div className="button-wrapper">
           <button 
             className="icon-btn" 
-            title="Upload a picture from your device"
+            title="Sube una foto desde tu equipo"
             onClick={handleClick}
           >
             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
           </button>
           <button 
             className="icon-btn" 
-            title="Take a picture from your camera"
+            title="Toma una foto desde la cámara"
             onClick={handleCameraClick}
           >
             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c-4.963 0-9 4.038-9 9c0 3.328 1.82 6.232 4.513 7.79l-2.067 1.378A1 1 0 0 0 6 22h12a1 1 0 0 0 .555-1.832l-2.067-1.378C19.18 17.232 21 14.328 21 11c0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7c0-3.86 3.141-7 7-7s7 3.14 7 7c0 3.859-3.141 7-7 7z"></path><path fill="currentColor" d="M12 6c-2.757 0-5 2.243-5 5s2.243 5 5 5s5-2.243 5-5s-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3z"></path></svg>
           </button>
         </div>
       ) : ''}
       <div className="button-wrapper">
-        <button className="custom-btn primary" onClick={handleSubmit}>Submit</button>
-        {file && (
-          <button className="custom-btn secondary" onClick={clearFile}>Clear</button>
+        {isSubmitting ? 
+          <button className="custom-btn primary" disabled>Procesando... </button>:
+          <button className="custom-btn primary" onClick={handleSubmit}>Enviar</button>
+        }
+        {file && !isSubmitting && (
+          <button className="custom-btn secondary" onClick={clearFile}>Borrar</button>
         )}
       </div>
       {error && <p style={{ color: 'red' }}>{error}</p>}