Add title to be included in the response and show title in success page

Author: chromium7

api/views.py

@@ -29,19 +29,24 @@ def transform_image(self, file_string, filters):
         results = []
         for filter in filters:
             if filter == "cartoon":
+                title = "Cartoonize"
                 img = logic_filters.cartoonize(image_cv)
             elif filter == "blur":
+                title = "Blur"
                 img = logic_filters.blur(image_cv)
             elif filter == "enhance":
+                title = "Enhance"
                 img = logic_filters.enhance(image_cv)
             elif filter == "edge_detect":
+                title = "Edge detection"
                 img = logic_filters.detect_edge(image_cv)
             elif filter == "face_detect":
+                title = "Face detection"
                 img = logic_filters.detect_face(image_cv)
             else:
                 continue
 
             img = cv2.imencode('.jpg', img)[1].tostring()
             img = base64.b64encode(img)
-            results.append(img)
+            results.append((title, img))
         return results

frontend/src/components/Edit/EditPage.js

@@ -37,12 +37,7 @@ function EditPage() {
       .then((response) => response.json())
       .then((data) => {
         setStatus("success");
-        var images = [];
-        data.images.forEach((image) => {
-          images.push(`data:image/png;base64,${image}`);
-        });
-
-        setTransformed(images);
+        setTransformed(data.images);
       })
       .catch((err) => {
         setStatus("error");

frontend/src/components/Edit/SuccessPage.js

@@ -8,13 +8,18 @@ function SuccessPage({ transformed }) {
     <Container className="container">
       <h1>Your edited images: </h1>
       <ImagesContainer>
-        {transformed.map((image, index) => (
-          <ZoomIn>
-            <Thumb key={index}>
-              <img src={image} />
-            </Thumb>
-          </ZoomIn>
-        ))}
+        {transformed.map((data, index) => {
+          const [title, bytes] = data;
+          const image = `data:image/png;base64,${bytes}`;
+          return (
+            <ZoomIn>
+              <h4>{title}</h4>
+              <Thumb key={index}>
+                <img src={image} />
+              </Thumb>
+            </ZoomIn>
+          );
+        })}
       </ImagesContainer>
       <EditButton
         onClick={() => window.location.reload()}
@@ -40,7 +45,6 @@ const ImagesContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  justify-content: space-evenly;
   align-items: center;
 `;