[PYTHON] Versuchen Sie, Ihr Gesicht mit dem AB-Test zu montieren
Welches Gesicht bevorzugen Sie, A oder B?
Der A / B-Test ist ein Test, bei dem zwei verschiedene Muster von Webseiten erstellt und vom Benutzer tatsächlich zum Vergleichen der Effekte verwendet werden. (ASCII.jp Digitales Glossar)
Zeigen Sie etwa einem von Tausenden Benutzern, die die Website besuchen, eine etwas andere Version der Seite an und vergleichen Sie den Unterschied in der Klickrate mit der normalen Version. Wenn Sie bessere Ergebnisse als gewöhnlich erzielen, übernehmen Sie diese als reguläre Version und testen Sie eine leicht modifizierte Version ...
A / B-Test ist eine Methode wie diese. Es wurde auch berühmt dafür, von Präsident Obama bei Wahlen verwendet zu werden.
Die Haarfarbe unterscheidet sich ein wenig vom allgemeinen A / B-Test für große Benutzer. Dies ist, was ich versucht habe, wie ein A / B-Test mit einer Gesichtsmontage.
AB face http://xiidec.appspot.com/abface.html
Klicken Sie auf das Gesicht von A oder B, je nachdem, was Sie möchten. Dann bleibt das Gesicht des Auserwählten erhalten und eine neue Option wird vorgestellt. Wenn Sie nacheinander wählen, entwickeln Sie nach und nach Ihr ideales Gesicht.
Wie es funktioniert
Schauen wir uns den Inhalt an. Nur 150 Zeilen. Ja wir können.
- Bereiten Sie einige Bilder von Augenbrauen, Augen, Nase und Mund vor und nummerieren Sie sie.
- Wählen Sie jedes Teil nach dem Zufallsprinzip aus.
Erstens die Serverseite. Python-Code.
Quelle
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)
Zunächst wird die Methode get () aufgerufen, wenn der Benutzer darauf zugreift. Die Methode get () ruft die Methode draw () auf. das ist alles.
Und der Inhalt der draw () -Methode. Die Seite wird hier generiert. Rufen Sie zuerst makeface () in der ersten Zeile auf. Es wird nur umgedreht.
makeface (). Der Schlüssel hier ist Memcache. Ein Cache, der mit der Zeit verschwindet. Der Schlüssel "Gesicht" enthält die derzeit besten Gesichter in einer Anordnung wie "[1,3,4,5]" (sollte). Dies bedeutet Augenbrauen: 1, Augen: 3, Nase: 4, Mund: 5. Es kann solche Daten enthalten oder nicht. Es gibt keine Garantie. Da Memcache ein Cache ist, kann er verschwinden. Wenn das Gesicht leer ist, wird daher ein Gesicht zufällig generiert und gespeichert. Die Lebensdauer beträgt 3600 Sekunden = 1 Stunde. Wenn Sie es dauerhaft speichern möchten, müssen Sie es in einer richtigen Datenbank speichern, aber dies ist ein Spiel. Wenn es also verschwindet, sollte es verschwinden.
Also gehe zurück zu draw (). Spielen Sie anhand des mit makeface () erstellten Gesichts mit einer der Augenbrauen, der Nase und dem Mund. Dies ist eine weitere Option. Hier kommt wieder Memcache. Wenn das zuletzt ausgewählte Gesicht B ist, tauschen Sie Gesicht 1 und Gesicht 2 aus. Anschließend wird der Wert in der Vorlage festgelegt und an den Client übergeben. Dies ist der Mechanismus der Gesichtsanzeige auf der Serverseite.
Zum Schluss noch eine Beschreibung von post (). Empfängt die ausgewählte Gesichtskombination vom Client AB und legt sie im Memcache fest.
Dann auf der Client-Seite.
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>
Das erste, was Sie sich ansehen müssen, ist makeface (). Das Bild wird auf die Leinwand eingefügt. Es ist auf zwei Leinwänden geklebt. Das IMG-Element wechselt die URL entsprechend der von der Serverseite empfangenen Teilenummer. Dies ist der einzige Teil der Anzeige.
Als nächstes kommt das Ereignis, wenn Sie auf Leinwand klicken. Ich mache viele Dinge, aber es ist ein kosmetisches Problem, so dass ich es fast ignorieren kann. Die letzten drei Zeilen sind wichtig. Stellen Sie die ausgewählten Teile ein, stellen Sie A oder B ein und senden Sie sie ab. Dann wird post () auf der Serverseite aufgerufen.
das ist alles. Mit genau diesem können Sie so etwas wie einen AB-Test durchführen.
Zusammenfassung
Wenn Sie die Art der Teile erhöhen und die Kontur, Frisur und Anordnung auswählen können, werden sich Ihre Träume ausbreiten.
Alle Materialien bestehen aus weiblichen Gesichtern, aber die fertigen Gesichter sind alle männliche Gesichter. Ist es ein Problem der Anordnung der Teile?
Recommended Posts