Upload folder using huggingface_hub (#1)

- Upload folder using huggingface_hub (81984557c151c3b6fe28fc91b4fca23988812e04)

.dockerignore

@@ -0,0 +1,6 @@
+Dockerfile
+README.md
+*.pyc
+*.pyo
+*.pyd
+__pycache__

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/sample_images/twitter_image.png filter=lfs diff=lfs merge=lfs -text
+white_box_cartoonizer/saved_models/model-33999.data-00000-of-00001 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,4 @@
+__pycache__/
+.vscode/*
+static/uploaded_videos/*.mp4
+static/cartoonized_images/*.jpg

Dockerfile

@@ -0,0 +1,25 @@
+# Use the official lightweight Python image.
+# https://hub.docker.com/_/python
+FROM python:3.7-slim
+
+# Copy local code to the container image.
+ENV APP_HOME /app
+WORKDIR $APP_HOME
+COPY . ./
+
+ENV GOOGLE_APPLICATION_CREDENTIALS "./token.json"
+
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    ffmpeg
+# Install production dependencies.
+RUN pip install -r requirements.txt
+
+# Run the web service on container startup. Here we use the gunicorn
+# webserver, with one worker process and 8 threads.
+# For environments with multiple CPU cores, increase the number of workers
+# to be equal to the cores available.
+CMD exec gunicorn --bind 0.0.0.0:8080 --workers 1 --threads 8 --timeout 0 app:app

LICENSE

@@ -0,0 +1,104 @@
+Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
+
+Section 1 – Definitions.
+
+    Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
+    Adapter's License means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
+    BY-NC-SA Compatible License means a license listed at creativecommons.org/compatiblelicenses, approved by Creative Commons as essentially the equivalent of this Public License.
+    Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
+    Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
+    Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
+    License Elements means the license attributes listed in the name of a Creative Commons Public License. The License Elements of this Public License are Attribution, NonCommercial, and ShareAlike.
+    Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
+    Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
+    Licensor means the individual(s) or entity(ies) granting rights under this Public License.
+    NonCommercial means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
+    Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
+    Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
+    You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
+
+Section 2 – Scope.
+
+    License grant.
+        Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
+            reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
+            produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
+        Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
+        Term. The term of this Public License is specified in Section 6(a).
+        Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
+        Downstream recipients.
+            Offer from the Licensor – Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
+            Additional offer from the Licensor – Adapted Material. Every recipient of Adapted Material from You automatically receives an offer from the Licensor to exercise the Licensed Rights in the Adapted Material under the conditions of the Adapter’s License You apply.
+            No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
+        No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
+
+    Other rights.
+        Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
+        Patent and trademark rights are not licensed under this Public License.
+        To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
+
+Section 3 – License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the following conditions.
+
+    Attribution.
+
+        If You Share the Licensed Material (including in modified form), You must:
+            retain the following if it is supplied by the Licensor with the Licensed Material:
+                identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
+                a copyright notice;
+                a notice that refers to this Public License;
+                a notice that refers to the disclaimer of warranties;
+                a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
+            indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
+            indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
+        You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
+        If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
+    ShareAlike.
+
+    In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply.
+        The Adapter’s License You apply must be a Creative Commons license with the same License Elements, this version or later, or a BY-NC-SA Compatible License.
+        You must include the text of, or the URI or hyperlink to, the Adapter's License You apply. You may satisfy this condition in any reasonable manner based on the medium, means, and context in which You Share Adapted Material.
+        You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, Adapted Material that restrict exercise of the rights granted under the Adapter's License You apply.
+
+Section 4 – Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
+
+    for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only;
+    if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material, including for purposes of Section 3(b); and
+    You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
+
+Section 5 – Disclaimer of Warranties and Limitation of Liability.
+
+    Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.
+    To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.
+
+    The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
+
+Section 6 – Term and Termination.
+
+    This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
+
+    Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
+        automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
+        upon express reinstatement by the Licensor.
+    For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
+    For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
+    Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
+
+Section 7 – Other Terms and Conditions.
+
+    The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
+    Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
+
+Section 8 – Interpretation.
+
+    For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
+    To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
+    No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
+    Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.

README.md

@@ -1,11 +1,165 @@
+# Cartoonizer
+
+> Convert images and videos into a cartoon!
+
+The webapp is deployed here - https://cartoonize-lkqov62dia-de.a.run.app
+<div style="text-align:center"><img height="100" alt="Powered by Algorithmia" style="border-width:0" src="static/sample_images/algorithmia.jpeg" /></div>
+
+You can find a writeup on this webapp's architecture [here](https://medium.com/@Niraj_pandkar/how-we-built-an-inexpensive-scalable-architecture-to-cartoonize-the-world-8610050f90a0)!
+
+---
+
+## Contents
+
+- [Prerequisites for Google Cloud and Algorithmia](#prerequisites-for-google-cloud-and-algorithmia)
+- [Installation](#installation)
+  - [Docker](#using-docker)
+  - [VirtualEnv](#using-virtualenv)
+  - [Google Colab](#using-google-colab)
+- [Sample Image and Video](#sample-image-and-video)
+
+---
+
+## Prerequisites for Google Cloud and Algorithmia
+
+**These are important steps if you want to leverage Google buckets, signed URLs and Algorithmia's platform. Skip this if you want to run locally / colab.**
+
+### Cloud Run authentication
+To use any functionalities pertaining to Google Cloud, you'll need a global authentication file (JSON). You can obtain this JSON by following the steps given here - [Getting started with authentication](https://cloud.google.com/docs/authentication/getting-started)
+
+After you get the JSON file, rename it to `token.json` (so that it's compatible with the codebase). 
+
+Set the environment variable in your terminal -
+```
+export GOOGLE_APPLICATION_CREDENTIALS="/path/to/token.json"
+```
+**Notes**:
+- You can set it permanently by adding this line to `~/.bashrc`.
+- `Dockerfile` already includes the setting of this particular environment variable. :)
+
+
+### Algorithmia
+We used the Serveless AI Layer product of [Algorithmia](https://algorithmia.com/serverless-ai-layer) for inference on videos.
+To learn more on how to deploy your model in Algorithmia, check here - https://algorithmia.com/developers
+
+---
+
+## Installation
+
+### Application tested on:
+
+- python 3.7
+- tensorflow 2.1.0 
+- tf_slim 1.1.0
+- ffmpeg 3.4.8
+- Cuda version 10.1
+- OS: Linux (Ubuntu 18.04)
+
+### Using Docker
+
+The easiest way to get the webapp running is by using the Dockerfile:
+
+1. `cd` into the root directory and build the image
+```
+docker build -t cartoonize .
+```
+**Note**: Set the appropriate values in `config.yaml` before building the image.
+
+2. Run the container by exposing the appropriate ports
+```
+docker run -p 8080:8080 cartoonize
+```
+
+
+### Using `virtualenv`
+
+1. Make a virtual environment using `virutalenv` and activate it
+```
+virtualenv -p python3 cartoonize
+source cartoonize/bin/activate
+```
+2. Install python dependencies
+```
+pip install -r requirements.txt
+```
+3. Run the webapp. Be sure to set the appropriate values in `config.yaml` file before running the application.
+```
+python app.py
+```
+
+### Using [Google Colab](https://colab.research.google.com/drive/1oDhMEVMcsRbe7bt-2A7cDsx44KQpQwuB?usp=sharing)
+1. Clone the repository using either of the below mentioned way:
+   - Using Command:
+        - Create a new Notebook in Colab and in the cell execute the below command.  
+        
+        ```
+         ! git clone https://github.com/experience-ml/cartoonize.git
+        ```
+        **Note:** Don't forget to add `!` at the beginning of the command
+        
+    - From Colab User Interface
+ ```
+        Open Colab
+            └── File
+                 └── Open Notebook
+                          └── Github
+                                └── paste the Url of the repository
+ ```
+ Note :  Before running the application change the runtime to GPU for processing videos but you for images CPU shall also work just fine.
+ ```
+            Runtime
+               └── Change runtime type
+                           └── Select GPU
+ ```
+2. After cloning the repository navigate to the `/cartoonize` using below command in the notebook cell:
+
+   ```
+   %cd cartoonize
+   ```
+3. Run the below commands in the notebook cell to install the requirements. 
+
+   ```
+   !pip install -r requirements.txt
+   ```
+
+
+4. In config.yaml file set: 
+
+   ``` 
+   colab-mode: true 
+   ``` 
+   
+5. Launch the flask app on ngrok
+
+   ```
+   !python app.py
+   ```
+
+#### Note : Sample [Google Colab Notebook](https://colab.research.google.com/drive/1oDhMEVMcsRbe7bt-2A7cDsx44KQpQwuB?usp=sharing) for reference
+
 ---
-title: Cartoonize
-emoji: 📈
-colorFrom: blue
-colorTo: purple
-sdk: static
-pinned: false
-license: mit
+
+## Sample Image and Video
+
+### Emma Watson Cartoonized
+<img alt="Emma Watson Cartoonized" style="border-width:0" src="static/sample_images/twitter_image.png" />
+
+### Youtube Video of Avenger's Bar Scene Cartoonized
+[![Cartoonized version of Avenger's bar scene](http://img.youtube.com/vi/GqduSLcmhto/0.jpg)](http://www.youtube.com/watch?v=GqduSLcmhto "AVENGERS BAR SCENE [Cartoonized Version]")
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## License
+
+1. Copyright © Cartoonizer ([Demo webapp](https://cartoonize-lkqov62dia-de.a.run.app/))
+
+    - Authors: [Niraj Pandkar](https://twitter.com/Niraj_pandkar) and [Tejas Mahajan](https://twitter.com/tjdevWorks).
+
+    - Licensed under the [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode) 
+    - Commercial application is prohibited by license
+
+
+2. Copyright (C) Xinrui Wang, Jinze Yu. ([White box cartoonization](https://github.com/SystemErrorWang/White-box-Cartoonization))
+    - All rights reserved. 
+    - Licensed under the CC BY-NC-SA 4.0 
+    - Also, Commercial application is prohibited license (https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode).

app.py

@@ -0,0 +1,178 @@
+import os
+import io
+import uuid
+import sys
+import yaml
+import traceback
+
+with open('./config.yaml', 'r') as fd:
+    opts = yaml.safe_load(fd)
+
+sys.path.insert(0, './white_box_cartoonizer/')
+
+import cv2
+from flask import Flask, render_template, make_response, flash
+import flask
+from PIL import Image
+import numpy as np
+import skvideo.io
+if opts['colab-mode']:
+    from flask_ngrok import run_with_ngrok #to run the application on colab using ngrok
+
+
+from cartoonize import WB_Cartoonize
+
+if not opts['run_local']:
+    if 'GOOGLE_APPLICATION_CREDENTIALS' in os.environ:
+        from gcloud_utils import upload_blob, generate_signed_url, delete_blob, download_video
+    else:
+        raise Exception("GOOGLE_APPLICATION_CREDENTIALS not set in environment variables")
+    from video_api import api_request
+    # Algorithmia (GPU inference)
+    import Algorithmia
+
+app = Flask(__name__)
+if opts['colab-mode']:
+    run_with_ngrok(app)   #starts ngrok when the app is run
+
+app.config['UPLOAD_FOLDER_VIDEOS'] = 'static/uploaded_videos'
+app.config['CARTOONIZED_FOLDER'] = 'static/cartoonized_images'
+
+app.config['OPTS'] = opts
+
+## Init Cartoonizer and load its weights 
+wb_cartoonizer = WB_Cartoonize(os.path.abspath("white_box_cartoonizer/saved_models/"), opts['gpu'])
+
+def convert_bytes_to_image(img_bytes):
+    """Convert bytes to numpy array
+
+    Args:
+        img_bytes (bytes): Image bytes read from flask.
+
+    Returns:
+        [numpy array]: Image numpy array
+    """
+    
+    pil_image = Image.open(io.BytesIO(img_bytes))
+    if pil_image.mode=="RGBA":
+        image = Image.new("RGB", pil_image.size, (255,255,255))
+        image.paste(pil_image, mask=pil_image.split()[3])
+    else:
+        image = pil_image.convert('RGB')
+    
+    image = np.array(image)
+    
+    return image
+
+@app.route('/')
+@app.route('/cartoonize', methods=["POST", "GET"])
+def cartoonize():
+    opts = app.config['OPTS']
+    if flask.request.method == 'POST':
+        try:
+            if flask.request.files.get('image'):
+                img = flask.request.files["image"].read()
+                
+                ## Read Image and convert to PIL (RGB) if RGBA convert appropriately
+                image = convert_bytes_to_image(img)
+
+                img_name = str(uuid.uuid4())
+                
+                cartoon_image = wb_cartoonizer.infer(image)
+                
+                cartoonized_img_name = os.path.join(app.config['CARTOONIZED_FOLDER'], img_name + ".jpg")
+                cv2.imwrite(cartoonized_img_name, cv2.cvtColor(cartoon_image, cv2.COLOR_RGB2BGR))
+                
+                if not opts["run_local"]:
+                    # Upload to bucket
+                    output_uri = upload_blob("cartoonized_images", cartoonized_img_name, img_name + ".jpg", content_type='image/jpg')
+
+                    # Delete locally stored cartoonized image
+                    os.system("rm " + cartoonized_img_name)
+                    cartoonized_img_name = generate_signed_url(output_uri)
+                    
+
+                return render_template("index_cartoonized.html", cartoonized_image=cartoonized_img_name)
+
+            if flask.request.files.get('video'):
+                
+                filename = str(uuid.uuid4()) + ".mp4"
+                video = flask.request.files["video"]
+                original_video_path = os.path.join(app.config['UPLOAD_FOLDER_VIDEOS'], filename)
+                video.save(original_video_path)
+                
+                modified_video_path = os.path.join(app.config['UPLOAD_FOLDER_VIDEOS'], filename.split(".")[0] + "_modified.mp4")
+                
+                ## Fetch Metadata and set frame rate
+                file_metadata = skvideo.io.ffprobe(original_video_path)
+                original_frame_rate = None
+                if 'video' in file_metadata:
+                    if '@r_frame_rate' in file_metadata['video']:
+                        original_frame_rate = file_metadata['video']['@r_frame_rate']
+
+                if opts['original_frame_rate']:
+                    output_frame_rate = original_frame_rate
+                else:
+                    output_frame_rate = opts['output_frame_rate']    
+
+                output_frame_rate_number = int(output_frame_rate.split('/')[0])
+
+                #change the size if you want higher resolution :
+                ############################
+                # Recommnded width_resize  #
+                ############################
+                #width_resize = 1920 for 1080p: 1920x1080.
+                #width_resize = 1280 for 720p: 1280x720.
+                #width_resize = 854 for 480p: 854x480.
+                #width_resize = 640 for 360p: 640x360.
+                #width_resize = 426 for 240p: 426x240.
+                width_resize=opts['resize-dim']
+
+                # Slice, Resize and Convert Video as per settings
+                if opts['trim-video']:
+                    #change the variable value to change the time_limit of video (In Seconds)
+                    time_limit = opts['trim-video-length']
+                    if opts['original_resolution']:
+                        os.system("ffmpeg -hide_banner -loglevel warning -ss 0 -i '{}' -t {} -filter:v scale=-1:-2 -r {} -c:a copy '{}'".format(os.path.abspath(original_video_path), time_limit, output_frame_rate_number, os.path.abspath(modified_video_path)))
+                    else:
+                        os.system("ffmpeg -hide_banner -loglevel warning -ss 0 -i '{}' -t {} -filter:v scale={}:-2 -r {} -c:a copy '{}'".format(os.path.abspath(original_video_path), time_limit, width_resize, output_frame_rate_number, os.path.abspath(modified_video_path)))
+                else:
+                    if opts['original_resolution']:
+                       os.system("ffmpeg -hide_banner -loglevel warning -ss 0 -i '{}' -filter:v scale=-1:-2 -r {} -c:a copy '{}'".format(os.path.abspath(original_video_path), output_frame_rate_number, os.path.abspath(modified_video_path)))
+                    else:
+                        os.system("ffmpeg -hide_banner -loglevel warning -ss 0 -i '{}' -filter:v scale={}:-2 -r {} -c:a copy '{}'".format(os.path.abspath(original_video_path), width_resize, output_frame_rate_number, os.path.abspath(modified_video_path)))
+                
+                audio_file_path = os.path.join(app.config['UPLOAD_FOLDER_VIDEOS'], filename.split(".")[0] + "_audio_modified.mp4")
+                os.system("ffmpeg -hide_banner -loglevel warning -i '{}' -map 0:1 -vn -acodec copy -strict -2  '{}'".format(os.path.abspath(modified_video_path), os.path.abspath(audio_file_path)))
+
+                if opts["run_local"]:
+                    cartoon_video_path = wb_cartoonizer.process_video(modified_video_path, output_frame_rate)
+                else:
+                    data_uri = upload_blob("processed_videos_cartoonize", modified_video_path, filename, content_type='video/mp4', algo_unique_key='cartoonizeinput')
+                    response = api_request(data_uri)
+                    # Delete the processed video from Cloud storage
+                    delete_blob("processed_videos_cartoonize", filename)
+                    cartoon_video_path = download_video('cartoonized_videos', os.path.basename(response['output_uri']), os.path.join(app.config['UPLOAD_FOLDER_VIDEOS'], filename.split(".")[0] + "_cartoon.mp4"))
+                
+                ## Add audio to the cartoonized video
+                final_cartoon_video_path = os.path.join(app.config['UPLOAD_FOLDER_VIDEOS'], filename.split(".")[0] + "_cartoon_audio.mp4")
+                os.system("ffmpeg -hide_banner -loglevel warning -i '{}' -i '{}' -codec copy -shortest '{}'".format(os.path.abspath(cartoon_video_path), os.path.abspath(audio_file_path), os.path.abspath(final_cartoon_video_path)))
+
+                # Delete the videos from local disk
+                os.system("rm {} {} {} {}".format(original_video_path, modified_video_path, audio_file_path, cartoon_video_path))
+
+                return render_template("index_cartoonized.html", cartoonized_video=final_cartoon_video_path)
+        
+        except Exception:
+            print(traceback.print_exc())
+            flash("Our server hiccuped :/ Please upload another file! :)")
+            return render_template("index_cartoonized.html")
+    else:
+        return render_template("index_cartoonized.html")
+
+if __name__ == "__main__":
+    # Commemnt the below line to run the Appication on Google Colab using ngrok
+    if opts['colab-mode']:
+        app.run()
+    else:
+        app.run(debug=False, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))

config.yaml

@@ -0,0 +1,10 @@
+---
+run_local: true #Set this to true if you are running locally, false if you have configured the Google buckets and algorithmia code. 
+gpu: true #Set this to true if you want to use the GPU
+trim-video: true #Set this to false if you want to process full video
+trim-video-length: 15 #Max number of seconds you want to trim the video from start
+original_frame_rate: false #If False output_frame_rate will be used else original video detected frame rate will be used, if no metadata found will use output_frame_rate  
+output_frame_rate: '24/1' #Set the output frame rate, if original resolution
+colab-mode: false #Set true if you are executing in colab mode
+original_resolution: false # Set to true if you don't want to resize the original video
+resize-dim: 720 #The width of the video will be resized to specified number maintaining aspect ratio

gcloud_utils.py

@@ -0,0 +1,68 @@
+"""
+Google Cloud Util Functions:
+- Upload to Google Storage Bucket
+- Delete from Google Storage Bucket
+- Generate signed URL
+"""
+import os
+import datetime
+
+from google.cloud import storage
+from google.cloud.storage.blob import Blob
+
+## Google Storage Client
+client = storage.Client()
+
+def upload_blob(bucket_name, source_file_name, destination_blob_name, content_type='', algo_unique_key=''):
+    """Uploading File to Google Storage Bucket
+
+    Args:
+        bucket_name (str): Google Storage Bucket Name
+        source_file_name (str): Local Absolute Filpath to upload
+        destination_blob_name (str): File Name used to store in bucket
+        content_type (str, optional): The content type of the file being uploaded
+        algo_unique_key (str, optional): [description]. Defaults to ''. Algorithmia Data Source Bucket Unique Key
+
+    Returns:
+        [str]: Google Storage Object URI, if algorithmia key is given the same is modified.
+    """
+    
+    bucket = client.get_bucket(bucket_name)
+    blob = bucket.blob(destination_blob_name)
+    blob.upload_from_filename(source_file_name, content_type=content_type)
+
+    data_uri = blob.self_link
+    
+    if algo_unique_key!="":
+        return os.path.join("gs+{}://{}".format(algo_unique_key, bucket_name), data_uri.split("/")[-1])
+    
+    return os.path.join("gs://{}".format(bucket_name), data_uri.split("/")[-1])
+
+def delete_blob(bucket_name, blob_name):
+    """Deletes a blob from the bucket."""
+    # bucket_name = "your-bucket-name"
+    # blob_name = "your-object-name"
+
+    bucket = client.bucket(bucket_name)
+    blob = bucket.blob(blob_name)
+    blob.delete()
+
+    print("Blob {} deleted.".format(blob_name))
+
+def download_video(bucket_name, filename, output_filename):
+    bucket = client.get_bucket(bucket_name)
+    # Create a blob object from the filepath
+    blob = bucket.blob(filename)
+    # Download the file to a destination
+    blob.download_to_filename(output_filename)
+
+    return output_filename
+
+def generate_signed_url(output_uri):
+    expiration_time = datetime.timedelta(minutes=5)
+
+    blob = Blob.from_string(output_uri, client=client)
+    
+    signed_url = blob.generate_signed_url(expiration=expiration_time, version='v4', response_disposition='attachment')
+
+    return signed_url            

requirements.txt

@@ -0,0 +1,11 @@
+Flask==1.0.2
+gunicorn==20.0.4
+Pillow==6.2.0
+opencv_python==4.2.0.34
+tensorflow==2.1.0
+google-cloud-storage==1.29.0
+algorithmia==1.3.0
+scikit-video==1.1.11
+tf_slim==1.1.0
+PyYaml==5.3.1
+flask-ngrok

static/cartoonized_images/folder.txt

@@ -0,0 +1,3 @@
+when the days are cold
+and the cards all fold 
+and the saints we see are made of gold!

static/uploaded_videos/folder_required.txt

@@ -0,0 +1 @@
+Required for purposes of github.

templates/index_cartoonized.html

@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-173468417-1"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-173468417-1');
+    </script>
+
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@Niraj_pandkar">
+    <meta name="twitter:title" content="Cartoonized your world!">
+    <meta name="twitter:description" content="Want to see your cartoonized self? You can try image or video.">
+    <meta name="twitter:creator" content="@Niraj_pandkar">
+    <meta name="twitter:image" content="static/sample_images/twitter_image.png">
+    <meta name="twitter:domain" content="https://cartoonize-lkqov62dia-de.a.run.app/cartoonize">
+
+    <title>Cartoonizer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
+    <script
+        src="https://code.jquery.com/jquery-3.1.1.min.js"
+        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+        crossorigin="anonymous">
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
+    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+    <style>
+        html {
+        box-sizing: border-box;
+        }
+        *, *:before, *:after {
+        box-sizing: inherit;
+        }
+        body{
+            background-color: whitesmoke;
+        }
+
+        iframe[src*=youtube] {
+                    display: block;
+                    margin: 0 auto;
+                    max-width: 100%;
+                    padding-bottom: 10px;
+                }
+    </style>
+</head>
+
+<body>
+        <div id="loader" class="ui disabled dimmer">
+                <div class="ui text loader">Preparing your cartoon! May take an extra few seconds for video :)</div>
+              </div>
+
+
+<div class='ui padded centered grid'>
+    <!-- Messaging system -->
+    <div class="row">
+        <div class="center aligned column">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    <div style="height:10%; display:flex; align-items: center; justify-content: center">
+                        {% for category, message in messages %}
+                            {% if category == error%}
+                                <h3 style="color:red">{{ message }}</h3>
+                            {% else %}
+                                <h3 style="color:green">{{ message }}</h3>
+                            {% endif %}
+                        {% endfor %}
+                    </div>
+                {% endif %}
+            {% endwith %}
+        </div>
+    </div>
+    
+
+    <!-- Heading of the page -->
+    <div class="row">
+        <div class='center aligned column'>
+            <h1>Cartoonize your world!</h1>
+        </div>
+    </div>
+    
+    <!-- Submission form -->
+    <div class="row">
+        <div class='center aligned column'>
+            <form id='formsubmit' method="post" action="cartoonize" enctype = "multipart/form-data">
+    
+                <div class="ui buttons">
+                    <div id='uploadimage' class="ui button" style="align-items: center;">
+                        <i class="image icon"></i>
+                        Image
+                    </div>
+                    <div class="or"></div>
+                    <div id='uploadvideo' class="ui button" style="align-items: center;">
+                        <i class="video icon"></i>
+                        Video
+                        <span style="font-size: 10px;">(Max 30MB)</span>
+                    </div>
+                </div>
+        
+                <input type='file' id='hiddeninputfile' accept="image/*" name = 'image' style="display: none"/>
+                <input type="file" id="hiddeninputvideo" accept="video/*" name = 'video' style="display: none">
+                <!-- <input id='submitbutton' class='ui button' type='submit'/> -->
+            </form>
+        </div>
+    </div>
+    {%if cartoonized_image or cartoonized_video%}
+    <div class="row">
+        <div class="column">
+            <!-- Nested grid -->
+            <div class="ui centered grid">
+                <div class="row">
+                    <div class="center aligned column">
+                        {%if cartoonized_image%}
+                        <div class="ui centered card">
+                            <div class="image">
+                                <img src="{{ cartoonized_image }}">
+                            </div>
+                        </div>
+                        {%endif%}
+                    
+                        {%if cartoonized_video%}
+                            <video id="player" width="320" height="240" controls>
+                                <source type="video/mp4" src="{{cartoonized_video}}">
+                            </video>
+                        {%endif%}
+                    </div>
+                </div>
+                <div class="row">
+                    {%if cartoonized_video%}
+                        <a href={{cartoonized_video}} download>
+                            
+                            <button class="ui primary button">
+                                <i class="download icon"></i>
+                                Download
+                            </button>
+                        </a>
+                    {%endif%}
+                    {%if cartoonized_image%}
+                        <a href={{cartoonized_image}} download>
+                            <button class="ui primary button">
+                                <i class="download icon"></i>
+                                Download
+                            </button><br>
+                            (Valid for 5 minutes only)
+                        </a>
+                    {%endif%}
+                    
+                </div>
+                <div class="row">
+                    <div class="ui stackable three column grid"> 
+                        <div class="three column row">
+                            <div class="center aligned column">
+                                <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Check your cartoonized version using the link below!" data-url="https://bit.ly/2CjaaJs" data-hashtags="cartoon" data-show-count="false" data-size="large">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                            </div>
+                    
+                            <div class="center aligned column">
+                                <a href="https://api.whatsapp.com/send?text=Try%20this%20awesome%20AI%20cartoonizer%20using%20-%20https%3A%2F%2Fbit.ly%2F2CjaaJs" target="_blank">
+                                    <button class="mini ui green button">
+                                        <i class="whatsapp icon"></i>Share
+                                    </button>
+                                </a>
+                            </div>
+                            <div class="center aligned column"">
+                                <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbit.ly%2F2CjaaJs&layout=button&size=large&width=77&height=28&appId" width="77" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
+                            </div>
+                        </div>
+                       
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    {%endif%}
+
+    <div class="ui divider"></div>
+    <!-- Sample Images -->
+    <div class="row">
+        <!-- <div class="ui stackable grid">
+            <div class="five wide column">
+                <img class="ui medium centered image" src="/static/sample_images/emma2.jpg">
+            </div>
+            <div class="five wide column">
+                <img class="ui medium centered image" src="/static/sample_images/emma2_cartoonized.jpg">
+            </div>
+        </div> -->
+        <div class="five wide column">
+            <img class="ui medium centered image" src="/static/sample_images/emma2.jpg">
+        </div>
+        <div class="five wide column">
+            <img class="ui medium centered image" src="/static/sample_images/emma2_cartoonized.jpg">
+        </div>
+    </div>
+    <div class="row">
+        <div class="five wide column">
+            <img class="ui medium centered image" src="/static/sample_images/spice.jpeg">
+        </div>
+        <div class="five wide column">
+            <img class="ui medium centered image" src="/static/sample_images/spice_cartoonized.jpeg">
+        </div>
+    </div>
+    <div class="row">
+        <div class="five wide column">
+            <img class="ui medium centered image" src="/static/sample_images/cake.jpeg">
+        </div>
+        <div class="five wide column">
+            <img class="ui medium centered image" src="/static/sample_images/cake_cartoonized.jpeg">
+        </div>
+    </div>
+    <div class="row">
+        <div class="center aligned column">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/omenajmDBm8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+    </div>
+    <div class="row">
+        <div class="center aligned column">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/GqduSLcmhto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+    </div>
+    <div class="row">
+        <div class="center aligned column">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/0Y29Z7-urqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+    </div>
+    <!-- <div class="row">
+            <div class="five wide column">
+                <img src="/static/sample_images/tenor.gif">
+            </div>
+            <div class="five wide column">
+                <img src="/static/sample_images/tenor.gif">
+            </div>
+        </div> -->
+    <!-- FAQs -->
+    <div class="row">
+        <div class="column" style="padding-right: 25px; padding-left: 25px;">
+            <div class="ui centered styled accordion" style="margin:auto;">
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Which paper is this demo based on?
+                    </div>
+                    <div class="content">
+                        <p class="transition hidden">Due credits to the incredible paper - <a target="_blank" href="http://openaccess.thecvf.com/content_CVPR_2020/papers/Wang_Learning_to_Cartoonize_Using_White-Box_Cartoon_Representations_CVPR_2020_paper.pdf">Learning to Cartoonize Using White-box Cartoon Representations</a>
+                        <p>Official implementation of the paper by the author - <a target="_blank" href="https://github.com/SystemErrorWang/White-box-Cartoonization">Github Link</a></p>
+                    </div>
+
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        What are the restrictions of video processing and image processing?
+                    </div>
+                    <div class="content">
+                        <ul class="ui list">
+                            <li>We are currently processing only upto <b>10 second</b> videos, if you happened to upload a video greater than 10 seconds, only <b>first 10 seconds</b> will be considered.</li>
+                            <li>Video File Size Limitation: <b>30MB</b></li>
+                            <li>Image File Formats Supported: <b>jpeg, png</b></li>
+                            <li>Video File Formats Supported: <b>mp4, webm, avi, mkv</b></li>
+                            <li>GIF/TIFF Images are not supported.</li>
+                        </ul>
+                    </div>
+                    
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Is my data stored on your servers?
+                    </div>
+                    <div class="content">
+                        Your data is deleted in the pipeline as you run the demo.
+                    </div>
+
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Where could be Cartoonizer used?
+                    </div>
+                    <div class="content">
+                        <p>Some of the areas where we think it could be applied to -</p>
+                        <ul class="ui list">
+                            <li>Churn out <b>quick prototypes</b> or sprites for animes, cartoons and games</li>
+                            <li>Since it subdues facial features and information in general, it can be used to generate <b>minimal art</b></li>
+                            <li>Games can import short <b>cut scenes</b> very easily <b>without using motion-capture</b></li>
+                            <li>Can be modelled as an assistant to graphic designers or animators.</li>
+                        </ul>
+                    </div>
+                    
+
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Video and Image attributes?
+                    </div>
+                    <div class="content">
+                        <p>Cake and food assortment photos are OC (Original Content). Other than that -</p> 
+                        <ul class="ui list">
+                            <li>Emma Watson Image: <a target="_blank" href="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/12/20/15/emma-watson-little-women.jpg?w968">Independent UK</a></li>
+                            <li>Rick Astley - Never Gonna Give You Up (Original Video): <a target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">YouTube Link</a></li>
+                            <li>Avengers (Original Video): <a target="_blank" href="https://www.youtube.com/watch?v=u7JO1RCE3Zk">YouTube Link</a></li>
+                            <li>Joey (Original Video): <a target="_blank" href="https://www.youtube.com/watch?v=tHuQiUP-kyQ">YouTube Link</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        I want to know more about cartoonization using AI.
+                    </div>
+                    <div class="content">
+                        <p>The <a href="">author</a> of the above mentioned paper can probably indulge you in some detailed resoursces. Other than that here are some we found - </p>
+                        <ul class="ui list">
+                            <li>CartoonGAN
+                                <ul>
+                                    <li><a target="_blank" href="https://openaccess.thecvf.com/content_cvpr_2018/papers/Chen_CartoonGAN_Generative_Adversarial_CVPR_2018_paper.pdf">Paper</a></li>
+                                    <li><a target="_blank" href="https://github.com/mnicnc404/CartoonGan-tensorflow">Github Link</a></li>
+                                </ul>
+                            </li>
+                            <li>AnimeGAN
+                                <ul>
+                                    <li><a target="_blank" href="https://link.springer.com/chapter/10.1007/978-981-15-5577-0_18">Paper</a></li>
+                                    <li><a target="_blank" href="https://github.com/TachibanaYoshino/AnimeGAN">Github Link</a></li>
+                                </ul>
+                            </li>   
+                        </ul>
+                    </div>
+
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Why did we make this demo?
+                    </div>
+                    <div class="content">
+                        <p>Honestly we thought this was a cool application of GAN but didn't find any demo available. 
+                            Our friends wanted to try it so we made a quick demo for images; which then later got extended to videos.</p>
+                        <p>Also we wanted to learn the deployment architecture which would allow us to serve such power hungry inference in the least money hogging method possible. (Blog post coming soon!)</p>
+                    </div>
+                    
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Help us pay the bills?
+                    </div>
+                    <div class="content">
+                        If you liked our demo and want to support us, please donate - <a href="https://www.paypal.me/tjdevworks">Paypal Link</a>
+                    </div>
+
+                    <div class="title">
+                        <i class="dropdown icon"></i>
+                        Do you want to share your feedback?
+                    </div>
+                    <div class="content">
+                        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSevnAJeRc0JvoXAY_wNOu4jKb5tM3PKmwZMzH5tDnxVr1bXzQ/viewform?embedded=true" width="550" height="605" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+                    </div>
+
+
+
+
+                    <!-- <div class="title">
+                        <i class="dropdown icon"></i>
+                        What is the deployment architecture of this project?
+                    </div>
+                    <div class="content">
+                        <p>This is a Flask app which resides on a Cloud Run instance with Cloud Storage integration. We've leveraged Algorithmia's community cloud AI layer for our inference.</p>
+                        <!-- <p><a href="https://github.com/nirajpandkar/x-ize/tree/wb_cartoonizer">Github Link</a></p> -->
+                    <!-- </div> -->
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="center aligned column">
+            <h3><i class="copyright outline icon"></i> 2020 Cartoonizer</h3>
+            <h3>Made with <i class="heart icon"></i> by <a target="_blank" href="https://twitter.com/Niraj_pandkar">Niraj</a> and <a target="_blank" href="https://twitter.com/tjdevWorks">Tejas</a></h3>
+        </div>
+        
+    </div>
+    <!-- <div class="row">
+        <h3>Made with <i class="heart icon"></i> by <a href="https://www.linkedin.com/in/nirajpandkar/">Niraj</a> and <a href="https://www.linkedin.com/in/tejas-mahajan-21175a118/">Tejas</a></h3>
+    </div> -->
+    
+</div>
+
+
+<script>
+    $('.ui.accordion')
+  .accordion()
+;
+    $("#uploadimage").on("click", function() {
+        $('#hiddeninputfile').click(); 
+    });
+
+    $("#uploadvideo").on("click", function() {
+        $('#hiddeninputvideo').click(); 
+    });
+
+    document.getElementById("hiddeninputfile").onchange = function() {
+        $('#loader').removeClass('disabled').addClass('active');
+        document.getElementById("formsubmit").submit();
+        
+    };
+    document.getElementById("hiddeninputvideo").onchange = function() {
+        const fi = document.getElementById('hiddeninputvideo'); 
+        // Check if any file is selected. 
+        if (fi.files.length > 0) { 
+            for (const i = 0; i <= fi.files.length - 1; i++) { 
+  
+                const fsize = fi.files.item(i).size; 
+                const file = Math.round((fsize / 1024)); 
+                // The size of the file.
+                //Change the max_file_size as per your need 
+                const max_file_size = 30720;
+                if (file >= max_file_size) { 
+                    alert( 
+                      "File too Big, please select a file less than 30mb (10 sec at 1080p or 5 sec at 4k)"); 
+                } else { 
+                    $('#loader').removeClass('disabled').addClass('active');
+                    document.getElementById("formsubmit").submit();
+                } 
+            } 
+        } 
+        
+        
+    };
+    var recorder = document.getElementById('recorder');
+</script> 
+</body>
+</html>

video_api.py

@@ -0,0 +1,19 @@
+import Algorithmia
+
+with open("algo.txt", "r") as infile:
+   client_key = infile.read()
+
+client = Algorithmia.client(client_key)
+algo = client.algo('tjdevworks/cartoonizer/2.2.2')
+algo.set_options(timeout=300)
+
+def api_request(input_file_uri):
+    # API call for cartoonization.
+    input = {"data_uri": input_file_uri,
+            "data_type": 1,
+            "datastore": ""
+            }
+    
+    response = algo.pipe(input).result
+    
+    return response

white_box_cartoonizer/cartoonize.py

@@ -0,0 +1,133 @@
+"""
+Internal code snippets were obtained from https://github.com/SystemErrorWang/White-box-Cartoonization/
+
+For it to work tensorflow version 2.x changes were obtained from https://github.com/steubk/White-box-Cartoonization 
+"""
+import os
+import uuid
+import time
+import subprocess
+import sys
+
+import cv2
+import numpy as np
+import skvideo.io
+try:
+    import tensorflow.compat.v1 as tf
+except ImportError:
+    import tensorflow as tf
+
+import network
+import guided_filter
+
+class WB_Cartoonize:
+    def __init__(self, weights_dir, gpu):
+        if not os.path.exists(weights_dir):
+            raise FileNotFoundError("Weights Directory not found, check path")
+        self.load_model(weights_dir, gpu)
+        print("Weights successfully loaded")
+    
+    def resize_crop(self, image):
+        h, w, c = np.shape(image)
+        if min(h, w) > 720:
+            if h > w:
+                h, w = int(720*h/w), 720
+            else:
+                h, w = 720, int(720*w/h)
+        image = cv2.resize(image, (w, h),
+                            interpolation=cv2.INTER_AREA)
+        h, w = (h//8)*8, (w//8)*8
+        image = image[:h, :w, :]
+        return image
+
+    def load_model(self, weights_dir, gpu):
+        try:
+            tf.disable_eager_execution()
+        except:
+            None
+
+        tf.reset_default_graph()
+
+        
+        self.input_photo = tf.placeholder(tf.float32, [1, None, None, 3], name='input_image')
+        network_out = network.unet_generator(self.input_photo)
+        self.final_out = guided_filter.guided_filter(self.input_photo, network_out, r=1, eps=5e-3)
+
+        all_vars = tf.trainable_variables()
+        gene_vars = [var for var in all_vars if 'generator' in var.name]
+        saver = tf.train.Saver(var_list=gene_vars)
+        
+        if gpu:
+            gpu_options = tf.GPUOptions(allow_growth=True)
+            device_count = {'GPU':1}
+        else:
+            gpu_options = None
+            device_count = {'GPU':0}
+        
+        config = tf.ConfigProto(gpu_options=gpu_options, device_count=device_count)
+        
+        self.sess = tf.Session(config=config)
+
+        self.sess.run(tf.global_variables_initializer())
+        saver.restore(self.sess, tf.train.latest_checkpoint(weights_dir))
+
+    def infer(self, image):
+        image = self.resize_crop(image)
+        batch_image = image.astype(np.float32)/127.5 - 1
+        batch_image = np.expand_dims(batch_image, axis=0)
+        
+        ## Session Run
+        output = self.sess.run(self.final_out, feed_dict={self.input_photo: batch_image})
+        
+        ## Post Process
+        output = (np.squeeze(output)+1)*127.5
+        output = np.clip(output, 0, 255).astype(np.uint8)
+        
+        return output
+    
+    def process_video(self, fname, frame_rate):
+        ## Capture video using opencv
+        cap = cv2.VideoCapture(fname)
+
+        target_size = (int(cap.get(3)),int(cap.get(4)))
+        output_fname = os.path.abspath('{}/{}-{}.mp4'.format(fname.replace(os.path.basename(fname), ''),str(uuid.uuid4())[:7],os.path.basename(fname).split('.')[0]))
+
+        out = skvideo.io.FFmpegWriter(output_fname, inputdict={'-r':frame_rate}, outputdict={'-r':frame_rate})
+
+        while True:
+            ret, frame = cap.read()
+            
+            if ret:
+                
+                frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+                
+                frame = self.infer(frame)
+                
+                frame = cv2.resize(frame, target_size)
+                
+                out.writeFrame(frame)
+                
+            else:
+                break
+        cap.release()
+        out.close()
+        
+        final_name = '{}final_{}'.format(fname.replace(os.path.basename(fname), ''), os.path.basename(output_fname))
+
+        p = subprocess.Popen(['ffmpeg','-i','{}'.format(output_fname), "-pix_fmt", "yuv420p", final_name])
+        p.communicate()
+        p.wait()
+
+        os.system("rm "+output_fname)
+
+        return final_name
+
+if __name__ == '__main__':
+    gpu = len(sys.argv) < 2 or sys.argv[1] != '--cpu'
+    wbc = WB_Cartoonize(os.path.abspath('white_box_cartoonizer/saved_models'), gpu)
+    img = cv2.imread('white_box_cartoonizer/test.jpg')
+    img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+    cartoon_image = wbc.infer(img)
+    import matplotlib.pyplot as plt
+    plt.imshow(cartoon_image)
+    plt.show()

white_box_cartoonizer/guided_filter.py

@@ -0,0 +1,94 @@
+"""
+Code copyrights are with: https://github.com/SystemErrorWang/White-box-Cartoonization/
+
+To adapt the code with tensorflow v2 changes obtained from: https://github.com/steubk/White-box-Cartoonization 
+"""
+try:
+    import tensorflow.compat.v1 as tf
+except ImportError:
+    import tensorflow as tf
+
+import numpy as np
+
+
+def tf_box_filter(x, r):
+    k_size = int(2*r+1)
+    ch = x.get_shape().as_list()[-1]
+    weight = 1/(k_size**2)
+    box_kernel = weight*np.ones((k_size, k_size, ch, 1))
+    box_kernel = np.array(box_kernel).astype(np.float32)
+    output = tf.nn.depthwise_conv2d(x, box_kernel, [1, 1, 1, 1], 'SAME')
+    return output
+
+
+
+def guided_filter(x, y, r, eps=1e-2):
+    
+    x_shape = tf.shape(x)
+    #y_shape = tf.shape(y)
+
+    N = tf_box_filter(tf.ones((1, x_shape[1], x_shape[2], 1), dtype=x.dtype), r)
+
+    mean_x = tf_box_filter(x, r) / N
+    mean_y = tf_box_filter(y, r) / N
+    cov_xy = tf_box_filter(x * y, r) / N - mean_x * mean_y
+    var_x  = tf_box_filter(x * x, r) / N - mean_x * mean_x
+
+    A = cov_xy / (var_x + eps)
+    b = mean_y - A * mean_x
+
+    mean_A = tf_box_filter(A, r) / N
+    mean_b = tf_box_filter(b, r) / N
+
+    output = tf.add(mean_A * x, mean_b, name='final_add')
+
+    return output
+
+
+
+def fast_guided_filter(lr_x, lr_y, hr_x, r=1, eps=1e-8):
+    
+    #assert lr_x.shape.ndims == 4 and lr_y.shape.ndims == 4 and hr_x.shape.ndims == 4
+   
+    lr_x_shape = tf.shape(lr_x)
+    #lr_y_shape = tf.shape(lr_y)
+    hr_x_shape = tf.shape(hr_x)
+    
+    N = tf_box_filter(tf.ones((1, lr_x_shape[1], lr_x_shape[2], 1), dtype=lr_x.dtype), r)
+
+    mean_x = tf_box_filter(lr_x, r) / N
+    mean_y = tf_box_filter(lr_y, r) / N
+    cov_xy = tf_box_filter(lr_x * lr_y, r) / N - mean_x * mean_y
+    var_x  = tf_box_filter(lr_x * lr_x, r) / N - mean_x * mean_x
+
+    A = cov_xy / (var_x + eps)
+    b = mean_y - A * mean_x
+
+    mean_A = tf.image.resize_images(A, hr_x_shape[1: 3])
+    mean_b = tf.image.resize_images(b, hr_x_shape[1: 3])
+
+    output = mean_A * hr_x + mean_b
+    
+    return output
+
+
+if __name__ == '__main__':
+    import cv2
+    from tqdm import tqdm
+
+    input_photo = tf.placeholder(tf.float32, [1, None, None, 3])
+    #input_superpixel = tf.placeholder(tf.float32, [16, 256, 256, 3])
+    output = guided_filter(input_photo, input_photo, 5, eps=1)
+    image = cv2.imread('output_figure1/cartoon2.jpg')
+    image = image/127.5 - 1
+    image = np.expand_dims(image, axis=0)
+
+    config = tf.ConfigProto()
+    config.gpu_options.allow_growth = True
+    sess = tf.Session(config=config)
+    sess.run(tf.global_variables_initializer())
+
+    out = sess.run(output, feed_dict={input_photo: image})
+    out = (np.squeeze(out)+1)*127.5
+    out = np.clip(out, 0, 255).astype(np.uint8)
+    cv2.imwrite('output_figure1/cartoon2_filter.jpg', out)

white_box_cartoonizer/network.py

@@ -0,0 +1,72 @@
+"""
+Code copyrights are with: https://github.com/SystemErrorWang/White-box-Cartoonization/
+
+To adapt the code with tensorflow v2 changes obtained from: https://github.com/steubk/White-box-Cartoonization 
+"""
+try:
+    import tensorflow.compat.v1 as tf
+    import tf_slim as slim
+except ImportError:
+    import tensorflow as tf
+    import tensorflow.contrib.slim as slim
+
+import numpy as np
+
+
+
+def resblock(inputs, out_channel=32, name='resblock'):
+    
+    with tf.variable_scope(name):
+        
+        x = slim.convolution2d(inputs, out_channel, [3, 3], 
+                               activation_fn=None, scope='conv1')
+        x = tf.nn.leaky_relu(x)
+        x = slim.convolution2d(x, out_channel, [3, 3], 
+                               activation_fn=None, scope='conv2')
+        
+        return x + inputs
+
+
+
+
+def unet_generator(inputs, channel=32, num_blocks=4, name='generator', reuse=False):
+    with tf.variable_scope(name, reuse=reuse):
+        
+        x0 = slim.convolution2d(inputs, channel, [7, 7], activation_fn=None)
+        x0 = tf.nn.leaky_relu(x0)
+        
+        x1 = slim.convolution2d(x0, channel, [3, 3], stride=2, activation_fn=None)
+        x1 = tf.nn.leaky_relu(x1)
+        x1 = slim.convolution2d(x1, channel*2, [3, 3], activation_fn=None)
+        x1 = tf.nn.leaky_relu(x1)
+        
+        x2 = slim.convolution2d(x1, channel*2, [3, 3], stride=2, activation_fn=None)
+        x2 = tf.nn.leaky_relu(x2)
+        x2 = slim.convolution2d(x2, channel*4, [3, 3], activation_fn=None)
+        x2 = tf.nn.leaky_relu(x2)
+        
+        for idx in range(num_blocks):
+            x2 = resblock(x2, out_channel=channel*4, name='block_{}'.format(idx))
+            
+        x2 = slim.convolution2d(x2, channel*2, [3, 3], activation_fn=None)
+        x2 = tf.nn.leaky_relu(x2)
+        
+        h1, w1 = tf.shape(x2)[1], tf.shape(x2)[2]
+        x3 = tf.image.resize_bilinear(x2, (h1*2, w1*2))
+        x3 = slim.convolution2d(x3+x1, channel*2, [3, 3], activation_fn=None)
+        x3 = tf.nn.leaky_relu(x3)
+        x3 = slim.convolution2d(x3, channel, [3, 3], activation_fn=None)
+        x3 = tf.nn.leaky_relu(x3)
+
+        h2, w2 = tf.shape(x3)[1], tf.shape(x3)[2]
+        x4 = tf.image.resize_bilinear(x3, (h2*2, w2*2))
+        x4 = slim.convolution2d(x4+x0, channel, [3, 3], activation_fn=None)
+        x4 = tf.nn.leaky_relu(x4)
+        x4 = slim.convolution2d(x4, 3, [7, 7], activation_fn=None)
+        
+        return x4
+
+if __name__ == '__main__':
+    
+
+    pass

white_box_cartoonizer/saved_models/checkpoint

@@ -0,0 +1,3 @@
+model_checkpoint_path: "model-33999"
+all_model_checkpoint_paths: "model-33999"
+all_model_checkpoint_paths: "model-37499"

white_box_cartoonizer/saved_models/model-33999.data-00000-of-00001

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e2df1a5aa86faa4f979720bfc2436f79333a480876f8d6790b7671cf50fe75b
+size 5868300