diff --git a/photos-ui/static/photos.js b/photos-ui/static/photos.js
index ccadb4b..6f46a19 100644
--- a/photos-ui/static/photos.js
+++ b/photos-ui/static/photos.js
@@ -1,7 +1,29 @@
 async function fetchAllPhotos() {
-    return await fetch("/graphql?query={queryImage(){objectPath}}")
+    return await fetch("/graphql?query={queryImage(){id objectPath}}")
 	.then(resp => resp.json())
-	.then(resp => resp.data.queryImage)
+	.then(resp => resp.queryImage)
+	.catch(error => {
+	    alert(error);
+	    return [];
+	});
+    
+}
+
+async function fetchImage(id) {
+    return await fetch("/graphql?query={getImage(id: \"" + id + "\"){id objectPath}}")
+	.then(resp => resp.json())
+	.then(resp => resp.getImage)
+	.catch(error => {
+	    alert(error);
+	    return {};
+	});
+    
+}
+
+async function fetchAllImageSegments(id) {
+    return await fetch("/graphql?query={getImage(id: \"" + id + "\"){segments { upperLeftX upperLeftY lowerRightX lowerRightY }}}")    
+	.then(resp => resp.json())
+	.then(resp => resp.getImage.segments)
 	.catch(error => {
 	    alert(error);
 	    return [];
@@ -11,12 +33,38 @@
 
 async function initGallery(gallery_elem_id) {
     imgs = await fetchAllPhotos();
-    console.log(imgs);
     img_list = "<ul>";
     for (img of imgs) {
-	img_list += "<li><a href='/photo/" + img.id + "'><img style='max-width: 300px' src='http://localhost:9000/" + img.objectPath + "' /></a></li>";
+	img_list += "<li><a href='/photo?id=" + img.id + "'><img style='max-width: 300px' src='http://localhost:9000/" + img.objectPath + "' /></a></li>";
     }
     img_list += "</ul>";
-    console.log(img_list);
     document.getElementById(gallery_elem_id).innerHTML = img_list;
 }
+
+async function initImg(img_elem_id, id) {
+    img = await fetchImage(id);
+    document.getElementById(img_elem_id).setAttribute("src", "http://localhost:9000/" + img.objectPath);
+}
+
+async function drawFaces(photo_elem_id, faces_canvas_elem_id, id){
+    console.log(id);
+    faces = await fetchAllImageSegments(id);
+    
+    var img = document.getElementById(photo_elem_id);
+    var cnvs = document.getElementById(faces_canvas_elem_id);
+    
+    cnvs.style.position = "absolute";
+    cnvs.style.left = img.offsetLeft + "px";
+    cnvs.style.top = img.offsetTop + "px";
+    cnvs.width = img.width;
+    cnvs.height = img.height;
+    
+    var ctx = cnvs.getContext("2d");
+    for (f of faces) {
+	ctx.beginPath();
+	ctx.lineWidth = 2;
+	ctx.strokeStyle = 'red';    
+	ctx.rect(f.upperLeftX, f.upperLeftY, f.lowerRightX - f.upperLeftX, f.lowerRightY - f.upperLeftY);
+	ctx.stroke();
+    }
+}