avojak / image-morphing Goto Github PK

Implementation of image morphing

Jupyter Notebook 98.39% Rich Text Format 0.04% Dockerfile 0.01% Makefile 0.02% Python 0.67% HTML 0.83% CSS 0.04%

image-morphing's Introduction

image-morphing

Implementation of image morphing with a web front-end. Images are uploaded, and the user selects corresponding points in the images.

Demo video: https://www.youtube.com/watch?v=S3hfBqrwQms

This was created for the CS 445 Spring 2020 Final Project at the University of Illinois at Urbana-Champaign. There are plenty of things that could be better but it works, and again this was for a school project!

Building

Install the following pre-requisite software:

Python 3
Docker (only if building the Docker image)
ImageMagick (only if running the test server locally)

Building the Python Packages

To build only the Python packages:

$ pip install -r requirements.txt
$ make lib web

Building the Docker Image (Recommended)

To build the Docker image:

$ make image

To build everything:

$ make all

Note that building all only makes sense if you intend to consume the Python packages directly. Otherwise simply building the Docker image will produce a portable distribution.

Running

Test Server

To run locally for testing:

$ export FLASK_APP=webmorphing; flask run

The UI will be available at http://localhost:5000.

Docker Image

A Docker image is also produced and can be run with the following command:

$ docker run -it -p 8080:8080 avojak/image-morphing:{version}

The UI will be available at http://localhost:8080.

Example Results

Technologies Used

OpenCV - Image IO, computing affine transformations
Scipy - Computing Delaunay triangulations
Matplotlib - Creating plots
ImageMagick - Producing the animated GIF
Flask - Web server
Bootstrap - Making a half-decent looking UI
Docker - Portable distribution

Attribution

Cat: Matthew Kerslake on Unsplash
Young Anakin: Comic Vine
Old Anakin: Fandom
Darth Vader: BGR

image-morphing's People

Contributors

Stargazers

Watchers

Forkers

mriffle samlaujw

image-morphing's Issues

IndexError: index 120 is out of bounds for axis 0 with size 120

Hi!

I tried your very promising app with the following couple of pictures:

I defined 10 control points, clicked Morph! and got the following stacktrace in the flask app logs:

Traceback (most recent call last):
  File "/usr/local/lib/python3.8/multiprocessing/pool.py", line 125, in worker
    result = (True, func(*args, **kwds))
  File "../lib/libmorphing/morphing.py", line 205, in _process_func
    frame = self._compute_frame(triangulation, t, shape, source_img, target_img, source_points, target_points)
  File "../lib/libmorphing/morphing.py", line 199, in _compute_frame
    source_val = source_img[int(source_point[1]), int(source_point[0]), c]
IndexError: index 120 is out of bounds for axis 0 with size 120
"""

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/usr/local/lib/python3.8/threading.py", line 932, in _bootstrap_inner
    self.run()
  File "/usr/local/lib/python3.8/threading.py", line 870, in run
    self._target(*self._args, **self._kwargs)
  File "/mnt/c/DevHome/tools/cygwin/opt/image-morphing/web/webmorphing/home.py", line 226, in thread_func
    ImageMorph(source_img_path, middle_img_path, target_img_path, source_points, middle_points, target_points,
  File "../lib/libmorphing/morphing.py", line 80, in __init__
    self._morph()
  File "../lib/libmorphing/morphing.py", line 139, in _morph
    res.get(timeout=None)
  File "/usr/local/lib/python3.8/multiprocessing/pool.py", line 771, in get
    raise self._value
IndexError: index 120 is out of bounds for axis 0 with size 120

Missaligned #source-img-canvas & #source-pts-canvas

Seems like those 2 HTML elements should be aligned, but aren't:

I'm using Firefox 86.

There is a potential fix:

diff --git a/web/webmorphing/templates/home.html b/web/webmorphing/templates/home.html
index 92a6789..91c3e5f 100644
--- a/web/webmorphing/templates/home.html
+++ b/web/webmorphing/templates/home.html
@@ -34,8 +34,8 @@
                         <div class="card box-shadow">
                             <div class="card-top">
                                 <div style="position: relative;">
-                                    <canvas class="img-canvas" id="source-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
-                                    <canvas class="img-canvas" id="source-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+                                    <canvas class="img-canvas" id="source-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0; display: block;"></canvas>
+                                    <canvas class="img-canvas" id="source-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1; margin-top: 0;"></canvas>
                                 </div>
                                 <div class="img-canvas-placeholder justify-content-center" id="source-img-placeholder">
                                     <i class="far fa-file-image fa-7x text-muted"></i>
@@ -59,8 +59,8 @@
                         <div class="card box-shadow" id="middle-img-card" hidden>
                             <div class="card-top">
                                 <div style="position: relative;">
-                                    <canvas class="img-canvas" id="middle-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
-                                    <canvas class="img-canvas" id="middle-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+                                    <canvas class="img-canvas" id="middle-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0; display: block;"></canvas>
+                                    <canvas class="img-canvas" id="middle-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1; margin-top: 0;"></canvas>
                                 </div>
                                 <div class="img-canvas-placeholder justify-content-center" id="middle-img-placeholder">
                                     <i class="far fa-file-image fa-7x text-muted"></i>
@@ -85,8 +85,8 @@
                         <div class="card box-shadow">
                             <div class="card-top">
                                 <div style="position: relative;">
-                                    <canvas class="img-canvas" id="target-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
-                                    <canvas class="img-canvas" id="target-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+                                    <canvas class="img-canvas" id="target-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0; display: block;"></canvas>
+                                    <canvas class="img-canvas" id="target-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1; margin-top: 0;"></canvas>
                                 </div>
                                 <div class="img-canvas-placeholder justify-content-center" id="target-img-placeholder">
                                     <i class="far fa-file-image fa-7x text-muted"></i>