Dlib für Javascript

Question

Ich bin ziemlich neu in C++ und auch Dlib. Ich muss an einem Gesichtsmarkierungserkennungsdetektor für den Browser arbeiten und habe mich gefragt, ob jemand versucht hat, DLIB mit z.B. ASM.js in einem Browser arbeiten. Ich habe nicht viele DLib Facial Landmarking Live-Demos im Web gesehen.

Ist es eine lohnende Idee zu verfolgen? Wenn ja, könnte mich jemand zu irgendwelchen Ressourcen leiten?

Answer 1

Ich bin auch das gleiche Problem in einem der mein Projekt. Aber ich erhalte erfolgreich Gesichtspunktdetails von dlib mit dem Browser.

Eigentlich bekomme ich Bild von Benutzer und senden an den Server speichern Sie einen bestimmten Ordner. Dann triggern Sie dlib python Code durch PHP und erhalten Sie Landmark Point Details als json Format. Sobald wir einen Punkt Details bekommen, können wir alles damit machen.

Idee

Eingabebilddatei -> dienen senden -> zum Ordner speichern -> Trigger DLIB Python-Skript -> Punkt als JSON-Datei speichern -> Echo zum Erfolg -> json

durch diese Art und Weise erhalten:

Schritt 1: ersten Dlip auf Ihrem Server installiert erfolgreich (getestet erster lokalen Server) ohne Fehler. und überprüfen Sie es ohne Fehler auszuführen.

SCHRITT 2: Dann wollen wir Gesicht Wahrzeichen von dlip. dlip habe ein Beispielskript face_landmark_detection.py wir können das verwenden.

meine maßgeschneiderte face_landmark_detection.py Skript ist dieser Punkt Details als JSON-Datei in bestimmten Pfad speichern:

# python face_landmark_detection.py "predictor.dat" "folder/image.jpg" "folder/test.json" 

import dlib 
import glob 
import json 
import os 
from skimage import io 
import sys 



predictor_path = sys.argv[1] 
#faces_folder_path = sys.argv[2] 
image  = sys.argv[2] 
json_path = sys.argv[3] 

detector = dlib.get_frontal_face_detector() 
predictor = dlib.shape_predictor(predictor_path) 






img = io.imread(image) 
dets = detector(img, 1) 
print(dets); 
print("Number of faces detected: {}".format(len(dets))) 
for k, d in enumerate(dets): 

    print("Detection {}: Left: {} Top: {} Right: {} Bottom: {}".format(
      k, d.left(), d.top(), d.right(), d.bottom())) 

    # Get the landmarks/parts for the face in box d. 
    shape = predictor(img, d) 

    print("Part 0: {}, Part 1: {}, Part 3: {} ...".format(shape.part(0), 
      shape.part(1), shape.part(2),)) 
    part1 = shape 
    data = {} 
    num = 0 
    for n, p in enumerate(shape.parts()): 
     n = format(n) 
     p = format(p) 
     p = p.split(",") 
     x = p[0].split("(") 
     x = x[1] 
     y = p[1].split(" ") 
     y = y[1].split(")") 
     y = y[0] 
     print(n, x, y) 
     data[n] = {'x':x, 'y':y} 
    out_file = open(json_path, "a") 
    json.dump(data, out_file, sort_keys=True, indent=4) 
    json_data = json.dumps(data, sort_keys=True);  
    print(json_data)   

meinem Server php Skript. Dieses Skript bekommt ein Bild vom Browser und speichert es in einem Ordner und triggert mein face_landmark_detection.py mit Prädiktor Pfad, Bild Pfad, JSON Pfad Argumente.

server.php Datei wie diese

<?php 

$target_dir = "/designing/face/uploads/"; 
$type = explode("/", $_FILES["file"]["type"]); 
$type = $type[1]; 
$target_file = $target_dir . basename($_FILES["file"]["name"]); 
$uploadOk = 1; 
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION); 
// Check if image file is a actual image or fake image 
if (isset($_POST)) { 
    $check = getimagesize($_FILES["file"]["tmp_name"]); 
    if ($check !== false) { 

     $uploadOk = 1; 
    } else { 

     $uploadOk = 0; 
    } 
} 
// Check if file already exists 
if (file_exists($target_file)) { 
    unlink($target_file); 
    $uploadOk = 1; 
} 
// Check file size 
/* if ($_FILES["file"]["size"] > 500000) { 
    echo "Sorry, your file is too large."; 
    $uploadOk = 0; 
    } */ 
// Allow certain file formats 
if ($imageFileType != "jpg" && $imageFileType != "jpeg" && $imageFileType != "png") { 
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
    $uploadOk = 0; 
} 

// Check if $uploadOk is set to 0 by an error 
if ($uploadOk == 0) { 
    echo "error"; 
// if everything is ok, try to upload file 
} else { 
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) { 
     //chmod($target_file, 0777); 
     //echo "The file ". basename($_FILES["file"]["name"]). " has been uploaded."; 

     if ($imageFileType == "png") { 
      $image = imagecreatefrompng($target_file); 
      $bg = imagecreatetruecolor(imagesx($image), imagesy($image)); 
      imagefill($bg, 0, 0, imagecolorallocate($bg, 255, 255, 255)); 
      imagealphablending($bg, TRUE); 
      imagecopy($bg, $image, 0, 0, 0, 0, imagesx($image), imagesy($image)); 
      imagedestroy($image); 
      $quality = 100; // 0 = worst/smaller file, 100 = better/bigger file 
      imagejpeg($bg, $target_file . ".jpg", $quality); 
      imagedestroy($bg); 
      unlink($target_file); 
      $target_file = $target_file . ".jpg"; 
      //echo $target_file; 
     } 

     $json_file = fopen("/test/json/" . $_FILES["file"]["name"] . "_json.txt", "w"); 
     if ($json_file) { 
      $command = 'python /face/face_landmark_detection.py "/face/predictor.dat" "' . $target_file . '" "/test/json/' . $_FILES["file"]["name"] . '_json.txt"'; 
      $output = shell_exec($command); 
      if ($output) { 
       //unlink($target_file); 
       echo "ok"; 
      } 
     } 




     //echo $command; 
    } else { 
     echo "Sorry, there was an error uploading your file."; 
    } 
} 
?> 

und mein Client (Browser) seitiges Script wie diese

$('#file').change(function() { 
    var formData = new FormData(); 
    formData.append('file', $('input[type=file]')[0].files[0]); 
    img = $('input[type=file]')[0].files[0]; 
    file_name = img.name; 
    console.log(file_name); 
    var reader = new FileReader(); 
    reader.onload = function(readerEvt) { 
     data_url = readerEvt.target.result; 
    }; 
    reader.readAsDataURL(img); 
    $.ajax({ 
     url: base_url + "server.php", 
     type: 'POST', 
     data: formData, 
     success: function(data) { 
      console.log(data); 
      if (data === "ok") { 
       getJson(data_url, file_name); 
      } else { 
       alert("something worng"); 
      } 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
}); 
var pts; 

function getJson(data_url, file_name) { 
    console.log(file_name); 
    var json_name = { 
     'name': file_name 
    }; 
    $.ajax({ 
     method: "POST", 
     url: base_url + "get_json.php", 
     crossDomain: true, 
     data: json_name, 
     dataType: 'JSON', 
     success: function(data) { 
      pts = data; 
      console.log(pts); 
      // alert(data_url); 
     } 
    }); 
} 

einmal alles läuft gut, dass wir eine JSON-Datei mit Punkten erhalten. Wir können mit diesen Punkten spielen, was wir auf der Leinwand wollen. Zuerst muss man den ganzen Prozess verstehen.

Ich gebe hier direkt meinen Democode ein. Schauen Sie den Code und ändern Sie, was Sie wollen (wie Pfad, Parameter ...) und dann ausführen.

Ich bin erfolgreich erhalten Punkt Details mit diesen Weg für mein virtuelles Gesicht Make über Projekt. Ich kann dir keine Projekt-URL für deine Demo geben, weil das Projekt gerade bearbeitet wird.