junyongyou/ImageRecognitionServlet.java

## ImageRecognitionServlet.java
package videotoolkit.deeplearning.servlet;

import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import no.cmr.videotoolkit.deeplearning.engine.ClassificationResultJSON;
import no.cmr.videotoolkit.deeplearning.engine.ImageRecognition;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.nio.file.Paths;

/**
 * Created by junyong on 10.02.2017.
 */
@WebServlet("/ImageRecognitionServlet")
public class ImageRecognitionServlet extends HttpServlet
{
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
   {
      String rootPath = Paths.get(System.getenv("WMS_HOME"), "dl4ir").toString();
      String UploadImageDir = rootPath + File.separator + "upload";
      if (ServletFileUpload.isMultipartContent(req))
      {
         System.out.println("This is multipart data");
      }

      String imageUrl = req.getParameter("imageUrl");
      Part filePart = req.getPart("imageFile");

      PrintWriter out = resp.getWriter();
      resp.setContentType("text/html");
      resp.setHeader("Cache-control", "no-cache, no-store");
      resp.setHeader("Pragma", "no-cache");
      resp.setHeader("Expires", "-1");

      resp.setHeader("Access-Control-Allow-Origin", "*");
      resp.setHeader("Access-Control-Allow-Methods", "POST");
      resp.setHeader("Access-Control-Allow-Headers", "Content-Type");
      resp.setHeader("Access-Control-Max-Age", "86400");

      Gson gson = new Gson();
      JsonObject resultObj = new JsonObject();
      ClassificationResultJSON imageRecognitionResult = new ClassificationResultJSON("result", "test result");
//            new ImageRecognition().imageRecognition(imageUrl);
      JsonElement result = gson.toJsonTree(imageRecognitionResult);
      if (result == null)
         resultObj.addProperty("success", false);
      else
         resultObj.addProperty("success", true);
      resultObj.add("imageLabels", result);
      out.println(resultObj.toString());
      out.close();
   }

   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
   {
      doGet(req, resp);
   }
}

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Deep learning for image recognition</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            $("input[name$='imageSource']").click(function () {
                var source = $(this).val();
                $("div.desc").hide();
                $("#" + source).show();
            });

            $("#submitButton").click(function (e) {
                e.preventDefault();
                var source = $("#inputGroup input[type='radio']:checked").val();
                if (source == "inputFile") {
                    var ext = $("input#imageFile").val().split('.').pop().toLowerCase();
                    if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'bmp', 'tif', 'tiff']) == -1) {
                        alert("Seems the selected file is not image, Reselect");
                        return false;
                    }
                }
                var formInput = $("#imageInputForm")[0];
                var formData = new FormData(formInput);
                $.ajax({
                    type: "POST",
                    url: "ImageRecognitionServlet",
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    dataType: "json",

                    //if received a response from the server
                    success: function (data, textStatus, jqXHR) {
                        if (data.success) {
                            var image = $('<img>').attr('src', data.imageUrl);
                            $("#resultDiv").html("");
                            $("#resultDiv").append(image);
                        }
                        //display error message
                        else {
                            $("#resultDiv").html("<div><b>Recognition Wrong!</b></div>");
                        }

                    },

                    //If there was no resonse from the server
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log("Something wrong happened " + textStatus);
                        $("#resultDiv").html(jqXHR.responseText);
                    },

                    //capture the request before it was sent to server
                    beforeSend: function (jqXHR, settings) {
                        //adding some Dummy data to the request
                        settings.data += "&dummyData=whatever";
                        //disable the button until we get the response
                        $('#submitButton').attr("disabled", true);
                    },

                    //this is called after the response or error functions are finished
                    //so that we can take some action
                    complete: function (jqXHR, textStatus) {
                        //enable the button
                        $('#submitButton').attr("disabled", false);
                        $form.find("input:text, input:file, select, textarea").val('');
                    }
                });

            });
        });
    </script>
</head>

<body>
<div id="inputGroup" align="center" style="font-size: 20px">
    <p style="color: darkblue; font-size: 24px">
        <br> Deep Learning for Image Recognition</br>
    </p>

    <p>
        Image source: &nbsp;&nbsp;&nbsp;
        <input type="radio" id="fileRadio" name="imageSource" checked="checked" value="inputFile"/>Upload image
        &nbsp;&nbsp;&nbsp;<input type="radio" id="urlRadio" name="imageSource" value="inputUrl"/>Image url
    </p>

    <form id="imageInputForm" enctype="multipart/form-data">
        <div id="inputFile" class="desc">
            <input id="imageFile" name="imageFile" type="file">
        </div>
        <div id="inputUrl" class="desc" style="display: none;">
            <input id="imageUrl" name="imageUrl" type="text" size=50>
        </div>
        <p><input id="submitButton" type="button" value="Submit"/></p>
    </form>
</div>

<br style="font-size: 12px"/>
<div id="resultSection">
    <fieldset>
        <legend>Image recognition results</legend>
        <div id="resultDiv"></div>
    </fieldset>

</div>

<form name="refresh">
    <input name="visited" value="" type="hidden">
</form>

</body>
</html>
	package videotoolkit.deeplearning.servlet;

	import com.google.gson.Gson;
	import com.google.gson.JsonElement;
	import com.google.gson.JsonObject;
	import no.cmr.videotoolkit.deeplearning.engine.ClassificationResultJSON;
	import no.cmr.videotoolkit.deeplearning.engine.ImageRecognition;
	import org.apache.commons.fileupload.servlet.ServletFileUpload;

	import javax.servlet.ServletException;
	import javax.servlet.annotation.WebServlet;
	import javax.servlet.http.HttpServlet;
	import javax.servlet.http.HttpServletRequest;
	import javax.servlet.http.HttpServletResponse;
	import javax.servlet.http.Part;
	import java.io.File;
	import java.io.IOException;
	import java.io.PrintWriter;
	import java.nio.file.Paths;

	/**
	* Created by junyong on 10.02.2017.
	*/
	@WebServlet("/ImageRecognitionServlet")
	public class ImageRecognitionServlet extends HttpServlet
	{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
	{
	String rootPath = Paths.get(System.getenv("WMS_HOME"), "dl4ir").toString();
	String UploadImageDir = rootPath + File.separator + "upload";
	if (ServletFileUpload.isMultipartContent(req))
	{
	System.out.println("This is multipart data");
	}

	String imageUrl = req.getParameter("imageUrl");
	Part filePart = req.getPart("imageFile");

	PrintWriter out = resp.getWriter();
	resp.setContentType("text/html");
	resp.setHeader("Cache-control", "no-cache, no-store");
	resp.setHeader("Pragma", "no-cache");
	resp.setHeader("Expires", "-1");

	resp.setHeader("Access-Control-Allow-Origin", "*");
	resp.setHeader("Access-Control-Allow-Methods", "POST");
	resp.setHeader("Access-Control-Allow-Headers", "Content-Type");
	resp.setHeader("Access-Control-Max-Age", "86400");

	Gson gson = new Gson();
	JsonObject resultObj = new JsonObject();
	ClassificationResultJSON imageRecognitionResult = new ClassificationResultJSON("result", "test result");
	// new ImageRecognition().imageRecognition(imageUrl);
	JsonElement result = gson.toJsonTree(imageRecognitionResult);
	if (result == null)
	resultObj.addProperty("success", false);
	else
	resultObj.addProperty("success", true);
	resultObj.add("imageLabels", result);
	out.println(resultObj.toString());
	out.close();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
	{
	doGet(req, resp);
	}
	}
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Deep learning for image recognition</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

	<script>
	$(document).ready(function () {
	$("input[name$='imageSource']").click(function () {
	var source = $(this).val();
	$("div.desc").hide();
	$("#" + source).show();
	});

	$("#submitButton").click(function (e) {
	e.preventDefault();
	var source = $("#inputGroup input[type='radio']:checked").val();
	if (source == "inputFile") {
	var ext = $("input#imageFile").val().split('.').pop().toLowerCase();
	if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'bmp', 'tif', 'tiff']) == -1) {
	alert("Seems the selected file is not image, Reselect");
	return false;
	}
	}
	var formInput = $("#imageInputForm")[0];
	var formData = new FormData(formInput);
	$.ajax({
	type: "POST",
	url: "ImageRecognitionServlet",
	data: formData,
	processData: false,
	contentType: false,
	cache: false,
	timeout: 600000,
	dataType: "json",

	//if received a response from the server
	success: function (data, textStatus, jqXHR) {
	if (data.success) {
	var image = $('<img>').attr('src', data.imageUrl);
	$("#resultDiv").html("");
	$("#resultDiv").append(image);
	}
	//display error message
	else {
	$("#resultDiv").html("<div><b>Recognition Wrong!</b></div>");
	}

	},

	//If there was no resonse from the server
	error: function (jqXHR, textStatus, errorThrown) {
	console.log("Something wrong happened " + textStatus);
	$("#resultDiv").html(jqXHR.responseText);
	},

	//capture the request before it was sent to server
	beforeSend: function (jqXHR, settings) {
	//adding some Dummy data to the request
	settings.data += "&dummyData=whatever";
	//disable the button until we get the response
	$('#submitButton').attr("disabled", true);
	},

	//this is called after the response or error functions are finished
	//so that we can take some action
	complete: function (jqXHR, textStatus) {
	//enable the button
	$('#submitButton').attr("disabled", false);
	$form.find("input:text, input:file, select, textarea").val('');
	}
	});

	});
	});
	</script>
	</head>

	<body>
	<div id="inputGroup" align="center" style="font-size: 20px">
	<p style="color: darkblue; font-size: 24px">
	<br> Deep Learning for Image Recognition</br>
	</p>

	<p>
	Image source:
	<input type="radio" id="fileRadio" name="imageSource" checked="checked" value="inputFile"/>Upload image
	<input type="radio" id="urlRadio" name="imageSource" value="inputUrl"/>Image url
	</p>

	<form id="imageInputForm" enctype="multipart/form-data">
	<div id="inputFile" class="desc">
	<input id="imageFile" name="imageFile" type="file">
	</div>
	<div id="inputUrl" class="desc" style="display: none;">
	<input id="imageUrl" name="imageUrl" type="text" size=50>
	</div>
	<p><input id="submitButton" type="button" value="Submit"/></p>
	</form>
	</div>

	<br style="font-size: 12px"/>
	<div id="resultSection">
	<fieldset>
	<legend>Image recognition results</legend>
	<div id="resultDiv"></div>
	</fieldset>

	</div>

	<form name="refresh">
	<input name="visited" value="" type="hidden">
	</form>

	</body>
	</html>