[JAVA] Essayez de monter votre visage avec le test AB
Quel visage préférez-vous, A ou B?
Le test A / B est un test dans lequel deux modèles différents de pages Web sont préparés et effectivement utilisés par l'utilisateur pour comparer les effets. (Glossaire numérique ASCII.jp)
Afficher une version légèrement différente de la page à environ un utilisateur sur des milliers qui visitent le site Web et comparer la différence de taux de clics avec la version normale. Si vous obtenez de meilleurs résultats que d'habitude, adoptez-la comme version régulière et testez une version légèrement modifiée ...
Le test A / B est une méthode comme celle-ci. Il est également devenu célèbre pour avoir été utilisé par le président Obama lors des élections.
La couleur des cheveux est un peu différente du test A / B général pour les grands utilisateurs, C'est ce que j'ai essayé de faire comme un test A / B avec un montage de visage.
AB face http://xiidec.appspot.com/abface.html
Cliquez sur le visage de A ou B, selon votre choix. Ensuite, le visage de l'élu reste, et une nouvelle option est présentée. Au fur et à mesure que vous choisissez l'un après l'autre, vous développerez progressivement votre visage idéal.
Comment ça fonctionne
Regardons réellement le contenu. Seulement 150 lignes. Oui nous pouvons.
- Préparez des images des sourcils, des yeux, du nez et de la bouche et numérotez-les.
- Sélectionnez chaque partie au hasard.
Tout d'abord, le côté serveur. Code Python.
La source
abface.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import webapp2
import os
import random
from google.appengine.ext.webapp import template
from google.appengine.api import memcache
class Abface(webapp2.RequestHandler):
def get(self):
self.draw()
def post(self):
if not self.request.get('choice') is None and self.request.get('choice')!="":
memcache.set("face",[int(i) for i in self.request.get('choice').split(",")], 3600)
memcache.set("sel",self.request.get('sel'), 3600)
self.draw()
def draw(self):
face1 = self.makeface()
face2=[i for i in face1]
r=random.randint(0,3)
face2[r] = int(random.choice("12345".replace(str(face2[r]), "")))
if memcache.get("sel")=="B":
face1,face2=face2,face1
template_values={
'brow1':'brow_' + str(face1[0]) + '.jpg',
'eye1':'eye_' + str(face1[1]) + '.jpg',
'nose1':'nose_' + str(face1[2]) + '.jpg',
'mouth1':'mouth_' + str(face1[3]) + '.jpg',
'brow2':'brow_' + str(face2[0]) + '.jpg',
'eye2':'eye_' + str(face2[1]) + '.jpg',
'nose2':'nose_' + str(face2[2]) + '.jpg',
'mouth2':'mouth_' + str(face2[3]) + '.jpg',
'face1':",".join(map(str,face1)),
'face2':",".join(map(str,face2)),
}
path = os.path.join(os.path.dirname(__file__), 'html/abface.html')
self.response.out.write(template.render(path, template_values))
def makeface(self):
face = memcache.get("face")
if face is None:
face = [random.randint(1,5) for i in range(4)]
memcache.set("face", face, 3600)
return face
app = webapp2.WSGIApplication([
('/abface.html', Abface)
], debug=True)
Tout d'abord, la méthode get () est appelée lorsque l'utilisateur y accède. La méthode get () appelle la méthode draw (). c'est tout.
Et le contenu de la méthode draw (). La page est générée ici. Tout d'abord, appelez makeface () sur la première ligne. C'est juste en train de changer.
makeface (). La clé ici est Memcache.
Un cache qui disparaît avec le temps.
La clé "face" contient les meilleurs visages du moment dans un arrangement comme [1,3,4,5] (devrait).
Cela signifie sourcils: 1, yeux: 3, nez: 4, bouche: 5.
Il peut ou non contenir des données comme celles-ci. Il n'y a aucune garantie.
Parce que Memcache est un cache, il peut disparaître.
Par conséquent, si le visage est vide, un visage est généré et enregistré de manière aléatoire. La durée de vie est de 3600 secondes = 1 heure.
Si vous voulez le sauvegarder de façon permanente, vous devez le sauvegarder dans une bonne base de données, mais c'est un jeu, donc s'il disparaît, il devrait disparaître.
Revenez donc à draw (). Sur la base du visage réalisé avec makeface (), jouez avec l'un des sourcils, le nez et la bouche. Ceci est une autre option. Voici à nouveau le memcache. Si le visage sélectionné la dernière fois est B, permutez la face 1 et la face 2. Ensuite, la valeur est définie dans le modèle et transmise au client. C'est le mécanisme d'affichage du visage côté serveur.
Enfin, une description de post (). Reçoit la combinaison de visages sélectionnée du client, AB, et la définit dans Memcache.
Puis côté client.
abface.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<title>ABface</title>
<style>
#canv1,#canv2 {
border: solid 3px #000;
border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
border-color: #ff0000;
}
#canv2 {
border: solid 3px #000;
border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
border-color: #0000ff;
}
#canv1:hover {
box-shadow: 0px 0px 20px 5px #ff0000
}
#canv2:hover {
box-shadow: 0px 0px 20px 5px #0000ff
}
#main {
width: 100%;
text-align : center
}
.hid{
display:none;
}
</style>
</head>
<body>
<div id="main">
<h1><span style="color:#ff0000">A</span> or <span style="color:#0000ff">B</span></h1>
<canvas id="canv1" width="150" height="150"></canvas>
<canvas id="canv2" width="150" height="150"></canvas>
</div>
<form action="/abface.html" method="post" id ="frm">
<input type="text" name="choice" id="choice" value="" style="display:none">
<input type="text" name="sel" id="sel" value="" style="display:none">
</form>
<img src="img/face/{{ brow1 }}" id ="brow_1" class="hid">
<img src="img/face/{{ eye1 }}" id ="eye_1" class="hid">
<img src="img/face/{{ nose1 }}" id ="nose_1" class="hid">
<img src="img/face/{{ mouth1 }}" id ="mouse_1" class="hid">
<img src="img/face/{{ brow2 }}" id ="brow_2" class="hid">
<img src="img/face/{{ eye2 }}" id ="eye_2" class="hid">
<img src="img/face/{{ nose2 }}" id ="nose_2" class="hid">
<img src="img/face/{{ mouth2 }}" id ="mouse_2" class="hid">
<script>
var ctx1 = document.getElementById('canv1').getContext('2d');
var ctx2 = document.getElementById('canv2').getContext('2d');
var face1 = "{{ face1 }}"
var face2 = "{{ face2 }}"
function makeface(){
ctx1.drawImage(document.getElementById('brow_1'), 0, 0)
ctx1.drawImage(document.getElementById('eye_1'), 0, 25)
ctx1.drawImage(document.getElementById('nose_1'), 0, 50)
ctx1.drawImage(document.getElementById('mouse_1'), 0, 110)
ctx2.drawImage(document.getElementById('brow_2'), 0, 0)
ctx2.drawImage(document.getElementById('eye_2'), 0, 25)
ctx2.drawImage(document.getElementById('nose_2'), 0, 50)
ctx2.drawImage(document.getElementById('mouse_2'), 0, 110)
}
window.onload = function(){
makeface()
$("#canv1").bind("click",function(){
ctx1.beginPath();
ctx1.lineWidth = 10;
ctx1.strokeStyle="#ff0000";
ctx1.arc(75, 75, 50, 0, Math.PI*2, false)
ctx1.stroke();
$("#choice").val(face1);
$("#sel").val("A");
$('#frm').submit();
});
$("#canv2").bind("click",function(){
ctx2.beginPath();
ctx2.strokeStyle="#0000ff";
ctx2.lineWidth = 10;
ctx2.arc(75, 75, 50, 0, Math.PI*2, false)
ctx2.stroke();
$("#choice").val(face2);
$("#sel").val("B");
$('#frm').submit();
});
}
</script>
</body>
</html>
La première chose à regarder est makeface (). L'image est collée sur la toile. Il est collé sur deux toiles. L'élément IMG change l'URL en fonction du numéro de pièce reçu du côté serveur. C'est la seule partie de l'affichage.
Vient ensuite l'événement lorsque vous cliquez sur le canevas. Je fais beaucoup de choses, mais c'est un problème cosmétique donc je peux presque l'ignorer. Les trois dernières lignes sont importantes. Définissez les pièces sélectionnées, définissez A ou B et soumettez. Ensuite, post () est appelé côté serveur.
c'est tout. Vous pouvez faire quelque chose comme un test AB avec juste cela.
Résumé
Si vous pouvez augmenter les types de pièces et choisir le contour, la coiffure et la disposition, vos rêves se répandront.
Tous les matériaux sont fabriqués à partir de faces féminines, mais les faces finies sont toutes des faces masculines. Est-ce un problème d'équilibre de la disposition des pièces?
Recommended Posts