Added the /show/shapes page as a demonstration for how work with images.

app.py

@@ -1,6 +1,8 @@
 import flask
 import os
 import mypkg
+from mypkg import draw
+from mypkg.convert import Convert
 
 app = flask.Flask(__name__, template_folder="./templates/")
 
@@ -30,6 +32,71 @@ def evaluate(expression: str):
 
     return flask.render_template('evaluate-expression.html', expression=expression, result=result)
 
+@app.route('/show/circle')
+def show_circle():
+    img = draw.circle(width=500, height=500)
+    image = Convert.cv_to_base64(img)
+    return flask.render_template('show-image.html', image=image, imageLabel='Circle')
+
+@app.route('/show/shapes')
+def show_shapes():
+    return flask.render_template('show-shapes.html')
+
+@app.route('/draw', methods=['GET'])
+def draw_target():
+    """
+    Try testing with:
+        curl -X GET "localhost:5000/draw?target=blank"
+        curl -X GET "localhost:5000/draw?target=circle"
+        curl -X GET "localhost:5000/draw?target=rectangle"
+    """
+    # TODO: Call this from javascript for toggling between images.
+    target = flask.request.args.get('target', default='blank', type=str)
+    width = flask.request.args.get('width', default=500, type=int)
+    height = flask.request.args.get('height', default=500, type=int)
+
+    if target == 'blank':
+        img = draw.blank(width=width, height=height)
+    elif target == 'circle':
+        img = draw.circle(width=width, height=height)
+    elif target == 'rectangle':
+        img = draw.rectangle(width=width, height=height)
+    else:
+        raise ValueError(f'Unsupported target: {target}')
+    
+    image = Convert.cv_to_base64(img)
+    return flask.jsonify(
+        isError=False,
+        message='Success',
+        statusCode=200,
+        data=image
+    )
+
+@app.route('/echo', methods=['GET', 'POST'])
+def echo():
+    """
+    Try testing with:
+        curl -X GET "localhost:5000/echo?a=hello&b=world"
+        curl -X POST "localhost:5000/echo?a=hello&b=world"
+    """
+    msg = 'Echo:'
+    for key, val in flask.request.args.to_dict().items():
+        msg += f'\n\t{key}={val}'
+    if flask.request.method == 'GET':
+        return flask.jsonify(
+            isError=False,
+            message='Success',
+            statusCode=200,
+            data=msg
+        )
+    else:
+        print(msg)
+        return flask.jsonify(
+            isError=False,
+            message='Success',
+            statusCode=200,
+            # data=msg
+        )
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0',  port=int(os.environ.get('PORT', 7860)))

mypkg/convert.py

@@ -0,0 +1,65 @@
+import io
+import cv2
+from PIL import Image as pilImage
+import numpy as np
+import numpy.typing as npt
+from base64 import b64encode
+
+__all__ = ["Convert"]
+
+class Convert:
+    @staticmethod
+    def cv_to_pil(img: np.ndarray) -> pilImage.Image:
+        result = img.copy()
+        if result.ndim == 2: # grayscale
+            pass
+        else:
+            assert result.ndim == 3
+            if result.shape[2] == 3: # rgb
+                result = cv2.cvtColor(result, cv2.COLOR_BGR2RGB)
+            elif result.shape[2] == 4: # rgba
+                result = cv2.cvtColor(result, cv2.COLOR_RGBA2BGRA)
+            else:
+                raise ValueError
+        return pilImage.fromarray(result)
+    
+    @staticmethod
+    def pil_to_cv(img: pilImage.Image | npt.NDArray[np.uint8]) -> np.ndarray:
+        if type(img) is pilImage.Image:
+            result = np.array(img, dtype=np.uint8)
+        elif type(img) is np.ndarray:
+            pass
+        else:
+            raise TypeError
+        
+        if result.ndim == 2: # grayscale
+            pass
+        else:
+            assert result.ndim == 3
+            if result.shape[2] == 3: # rgb
+                result = cv2.cvtColor(result, cv2.COLOR_RGB2BGR)
+            elif result.shape[2] == 4: # rgba
+                result = cv2.cvtColor(result, cv2.COLOR_RGBA2BGRA)
+            else:
+                raise ValueError
+        return result
+    
+    @staticmethod
+    def cv_to_base64(img: np.ndarray) -> str:
+        return Convert.pil_to_base64(Convert.cv_to_pil(img))
+
+    @staticmethod
+    def pil_to_base64(img: pilImage.Image | npt.NDArray[np.uint8]) -> str:
+        if type(img) is pilImage.Image:
+            pass
+        elif type(img) is np.ndarray:
+            img = pilImage.fromarray(img.astype('uint8'))
+        else:
+            raise TypeError
+        
+        # https://stackoverflow.com/a/59583262/13797085
+        file_object = io.BytesIO()
+        img.save(file_object, 'PNG')
+        base64img = "data:image/png;base64," \
+            + b64encode(file_object.getvalue()).decode('ascii')
+        return base64img

mypkg/draw.py

@@ -0,0 +1,42 @@
+import cv2
+import numpy as np
+import numpy.typing as npt
+
+def blank(
+    width: int=500, height: int=500,
+    background: tuple[int, int, int]=(0,0,0)
+) -> npt.NDArray[np.uint8]:
+    img = np.zeros((height, width, 3), dtype=np.uint8)
+    img[:, :, :] = background
+    return img
+
+def circle(
+    width: int=500, height: int=500,
+    radius: int=None,
+    color: tuple[int, int, int]=(0,0,255),
+    background: tuple[int, int, int]=(0,0,0)
+) -> npt.NDArray[np.uint8]:
+    if radius is None:
+        radius = int(0.5 * max(width, height) * 0.8)
+    center = (int(width/2), int(height/2))
+    img = blank(
+        width=width, height=height,
+        background=background
+    )
+    return cv2.circle(img, center, radius, color, -1, cv2.LINE_AA)
+
+def rectangle(
+    width: int=500, height: int=500,
+    pt1: tuple[int, int]=None, pt2: tuple[int, int]=None,
+    color: tuple[int, int, int]=(0,0,255),
+    background: tuple[int, int, int]=(0,0,0)
+) -> npt.NDArray[np.uint8]:
+    img = blank(
+        width=width, height=height,
+        background=background
+    )
+    if pt1 is None:
+        pt1 = (int(0.2 * width), int(0.2 * height))
+    if pt2 is None:
+        pt2 = (int(0.8 * width), int(0.8 * height))
+    return cv2.rectangle(img, pt1, pt2, color, -1, cv2.LINE_AA)

static/css/show-shapes.css

@@ -0,0 +1,49 @@
+#imgPlaceholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 500px;
+}
+
+#imgNavBtns {
+    display: flex;
+    justify-content: center;
+}
+
+.imgNavBtn+.imgNavBtn {
+    margin-left: 10px;
+}
+
+.imgNavBtn {
+    margin-top: 15px;
+    background-color: black;
+    border: none;
+    color: red;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 32px;
+    cursor: pointer;
+}
+
+#drop_zone {
+    border: 5px solid blue;
+    /* width: 200px;
+    height: 100px; */
+    width: fit-content;
+    height: fit-content;
+}
+
+#droppedImages {
+    margin-top: 15px;
+    padding: 10px 20px;
+    display: block;
+    justify-content: center;
+    position: relative;
+}
+
+#droppedImages img {
+    display: inline-block;
+    width: 100px;
+}

static/js/show-shapes.js

@@ -0,0 +1,147 @@
+class ImageNavigator {
+    constructor() {
+        this.targets = [
+            'blank',
+            'circle',
+            'rectangle'
+        ];
+        this.sources = [];
+        this.idx = 0;
+        this.imgPlaceholder = document.getElementById('imgPlaceholder');
+        // this.imgData = null;
+        this.prevBtn = document.getElementById('prevBtn');
+        this.nextBtn = document.getElementById('nextBtn');
+    }
+
+    async getImgData(target) {
+        try {
+            let res = await fetch(
+                '../draw?target=' + target,
+                {
+                    method: 'GET'
+                }
+            );
+            return await res.json();
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    async fetchImgData(target) {
+        let imgDataObj = await this.getImgData(target);
+        if (imgDataObj != null) {
+            // this.imgData = imgDataObj.data;
+            // this.imgPlaceholder.innerHTML = '<img src=' + this.imgData + '>';
+            return imgDataObj.data;
+        }
+        return null;
+    }
+
+    toggleImage(change) {
+        this.idx += change;
+        if (this.idx < 0)
+            this.idx += this.sources.length;
+        else
+            this.idx %= this.sources.length;
+        this.imgPlaceholder.src = this.sources[this.idx];
+    }
+
+    toPrevImage() {
+        this.toggleImage(-1);
+    }
+
+    toNextImage() {
+        this.toggleImage(1);
+    }
+
+    async initialize() {
+        // this.targets.forEach(
+        //     target => {
+        //         let targetSrc = await this.fetchImgData(target);
+        //         this.sources.push(targetSrc);
+        //     }
+        // )
+        for (var i = 0; i < this.targets.length; i++) {
+            var target = this.targets[i];
+            let targetSrc = await this.fetchImgData(target);
+            this.sources.push(targetSrc);
+        }
+        // this.imgPlaceholder.src = this.sources[this.idx];
+        this.toggleImage(0);
+
+        this.prevBtn.addEventListener('mouseup', e => this.toPrevImage());
+        this.nextBtn.addEventListener('mouseup', e => this.toNextImage());
+    }
+}
+
+var imageNav = new ImageNavigator();
+imageNav.initialize();
+
+
+class DropHandler {
+    constructor() {
+        this.dropZone = document.getElementById('drop_zone');
+        this.droppedImages = document.getElementById('droppedImages');
+    }
+
+    validateImage(image) {
+        var validTypes = ['image/jpeg', 'image/png', 'image/gif'];
+        if (validTypes.indexOf(image.type) == -1) {
+            console.log('Invalid File Type: ' + image.type);
+            return false;
+        }
+
+        var maxSizeInBytes = 10e6; //10MB
+        if (image.size > maxSizeInBytes) {
+            console.log('File is too large: ' + image.size);
+            return false
+        }
+
+        return true;
+    }
+
+    /**
+     * Refer to https://soshace.com/the-ultimate-guide-to-drag-and-drop-image-uploading-with-pure-javascript/
+     * @param {object} event 
+     */
+    processDrop(event) {
+        console.log('File(s) dropped');
+
+        // Prevent default behavior (Prevent file from being opened)
+        event.preventDefault();
+
+        var dt = event.dataTransfer;
+        var files = dt.files;
+        if (files.length > 0) {
+            for (var i = 0; i < files.length; i++) {
+                if (this.validateImage(files[i])) {
+                    var img = document.createElement('img');
+                    var reader = new FileReader();
+                    reader.onload = function (e) {
+                        img.src = e.target.result;
+                        imageNav.sources.push(e.target.result);
+                    }
+                    reader.readAsDataURL(files[i]);
+                    this.droppedImages.appendChild(img);
+                }
+            }
+        }
+        else
+            console.log('Dropped ' + files.length + ' files.');
+    }
+
+    processDragOver(event) {
+        console.log('File(s) in drop zone');
+
+        // Prevent default behavior (Prevent file from being opened)
+        event.preventDefault();
+    }
+
+    initialize() {
+        this.dropZone.addEventListener('drop', e => this.processDrop(e));
+        this.dropZone.addEventListener('dragover', e => this.processDragOver(e));
+    }
+}
+
+var dropHandler = new DropHandler();
+dropHandler.initialize();

templates/index.html

@@ -70,6 +70,9 @@
 				</li>
 			</ul>
 		</li>
+		<li>
+			<a href="/show/shapes">Draw some shapes using python's cv2 and display in html page.</a>
+		</li>
 	</ul>
 
 	<script type="text/javascript" src="../static/js/test_page.js"></script>

templates/show-image.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Show {{ imageLabel }}</title>
+    <link rel="stylesheet" href="../static/css/main.css" />
+</head>
+
+<body>
+    <h1>Showing {{ imageLabel }}</h1>
+    <img src="{{ image }}">
+
+    <h1>Navigation</h1>
+    <li>
+        <a href="../..">Home</a>
+    </li>
+</body>
+
+</html>

templates/show-shapes.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Show Shapes</title>
+    <link rel="stylesheet" href="../static/css/main.css" />
+    <link rel="stylesheet" href="../static/css/show-shapes.css" />
+</head>
+
+<body>
+    <h1>Showing Shapes</h1>
+    <img id="imgPlaceholder"
+        src="https://img.freepik.com/premium-vector/update-concept-application-loading-process-symbol-web-screen-vector-illustration-flat_186332-1253.jpg?w=500">
+    <div id="imgNavBtns">
+        <button id="prevBtn" class="imgNavBtn">Previous</button>
+        <button id="nextBtn" class="imgNavBtn">Next</button>
+    </div>
+
+    <h1>Drag & Drop Testing</h1>
+    <div id="drop_zone">
+        <p>
+            Drag one or more images into this <i>drop zone</i>.
+            They will be added to the image navigator.
+        </p>
+        <div id="droppedImages">
+            <!-- <img
+                src="https://img.freepik.com/premium-vector/update-concept-application-loading-process-symbol-web-screen-vector-illustration-flat_186332-1253.jpg?w=500">
+            <img
+                src="https://img.freepik.com/premium-vector/update-concept-application-loading-process-symbol-web-screen-vector-illustration-flat_186332-1253.jpg?w=500"> -->
+        </div>
+    </div>
+
+    <h1>Navigation</h1>
+    <li>
+        <a href="../..">Home</a>
+    </li>
+
+    <script type="text/javascript" src="../static/js/show-shapes.js"></script>
+</body>
+
+</html>