前端智能化漫谈 (4) - pix2code结果编辑距离分析

Levenshtein距离分析

从实用的角度，我们先采用莱文斯坦距离，也就是编辑距离来分析一下pix2code的结果。因为Levenshtein距离是从DSL角度来看，需要人工修改时的最小编辑次数，所以从这个角度来分析是有其意义的。

我们分别用greedy和beam 3两种方法对于datasets/android/eval_set下面的png都生成一遍gui，分别存放于../android_greedy和../android_beam3目录。
可以用这样的命令：

python3 ./generate.py ../bin pix2code ../datasets/android/eval_set/ ../android_greedy/ greedy
python3 ./generate.py ../bin pix2code ../datasets/android/eval_set/ ../android_beam3/ 3

然后我们就可以写一个pix2code_levenshtein函数来比较它们之间的差别，记得安装python_levenshtein库：

def pix2code_levenshtein(path1, path2):
    count = 0
    score = 0
    average_score = 0
    for f in os.listdir(path2):
        if f.find(".gui") != -1:
            f1 = os.path.join(path1,f)
            f2 = os.path.join(path2,f)
            print(f)
            if os.path.exists(f1) and os.path.exists(f2):
                print(f1)
                txt1 = open(f1).read()
                txt1 = txt1.replace(" ","")
                print(txt1)
                print(f2)
                txt2 = open(f2).read()
                txt2 = txt2.replace(" ","")
                print(txt2)
                this_score = Levenshtein.distance(txt1,txt2)
                print('This score:',this_score)
                print(Levenshtein.ratio(txt1,txt2))
                count = count + 1
                score = score + this_score
                average_score = score / count
                print('Current score:',average_score)

样例分析

我们随机挑选10个文件分析一下

greedy和beam 3都能100%正确识别

例子：

完全正确的例子就不分析了。
以greedy获取的结果为例：

stack{
row{
switch
}
row{
switch
}
row{
radio
}
row{
label,slider,label
}
}
footer{
btn-home,btn-dashboard,btn-home
}

greedy和beam 3同样识别错误

10个样例中有4例是这样的情况。

102D9F19-4FAB-4144-9996-589C22991D61

标准答案如下：

../datasets/android/eval_set/102D9F19-4FAB-4144-9996-589C22991D61.gui
stack{
row{
switch
}
row{
label,btn
}
row{
switch,switch
}
}
footer{
btn-search,btn-dashboard,btn-notifications
}

不管是greedy还是beam 3，都错了两处，将footer中间的btn-dashboard和右边的btn-notifications给识别成了btn-home。

../android_greedy/102D9F19-4FAB-4144-9996-589C22991D61.gui
stack{
row{
switch
}
row{
label,btn
}
row{
switch,switch
}
}
footer{
btn-search,btn-home,btn-home
}

48CCC704-865B-48FC-B64C-C9DA057E5F61

这个case两种算法都只错了一处，与上例第二处错误一样，将btn-notifications给识别成了btn-home。

stack{
row{
switch
}
row{
label,btn,btn
}
}
footer{
btn-dashboard,btn-notifications
}

../android_greedy/48CCC704-865B-48FC-B64C-C9DA057E5F61.gui
stack{
row{
switch
}
row{
label,btn,btn
}
}
footer{
btn-dashboard,btn-home
}

54BC253F-DA31-4904-BC18-233CC0083E2F

这个比较复杂，不管greedy还是beam 3下都不能正确认别。标准答案如下：

stack{
row{
radio
}
row{
label,btn
}
row{
radio
}
row{
check
}
row{
label,slider,label
}
row{
switch
}
row{
check
}
row{
label,btn
}
}
footer{
btn-dashboard,btn-home,btn-dashboard
}

不管是在greedy识别中还是beam 3识别中，第三行和第四行的check和radio识别反了。
第6行和第7行没识别出来，在第8行后多识别出一行。
另外，footer上的三个都识别错了。

stack{
row{
radio
}
row{
label,btn
}
row{
check
}
row{
radio
}
row{
label,slider,label
}
row{
label,btn
}
row{
radio
}
}
footer{
btn-home,btn-dashboard,btn-notifications
}

CCF7369F-FCE4-4801-8936-E251EE90038C

这个case也相对简单，标准答案如下：

stack{
row{
switch
}
row{
switch
}
row{
check
}
row{
switch
}
}
footer{
btn-notifications,btn-home,btn-home
}

greedy和beam 3都是两处错误，一处是switch识别成了radio；另一处是footer上最左边的的btn-notifications被识别成了btn-home。

stack{
row{
switch
}
row{
switch
}
row{
radio
}
row{
switch
}
}
footer{
btn-home,btn-home,btn-home
}

greedy模式与beam 3模式下表现不同的

DBC890B4-0490-4A9B-88F6-8625F518F269

这个case中，greedy错了6处，beam 3错了4处。
标准答案如下：

stack{
row{
switch
}
row{
radio
}
row{
label,slider,label
}
row{
switch
}
row{
switch
}
}
footer{
btn-home,btn-dashboard,btn-dashboard
}

greedy下对第三行的识别基本失败。
第四行和第五行的switch，greedy下只识别成一个radio。
另外，footer上错了两个。

stack{
row{
switch
}
row{
radio
}
row{
switch,switch,btn,btn
}
row{
radio
}
}
footer{
btn-dashboard,btn-notifications,btn-dashboard
}

beam 3搜索对于第三行的支持很好。第4行第5行的switch还是没识别出来。
最后，footer的错误与greedy时一样。

stack{
row{
switch
}
row{
radio
}
row{
label,slider,label
}
row{
radio
}
}
footer{
btn-dashboard,btn-notifications,btn-dashboard
}

68F022A8-0C01-4684-A9B2-27E586C2D918

标准答案如下：

stack{
row{
switch
}
row{
check
}
row{
label,slider,label
}
row{
check
}
}
footer{
btn-search,btn-search,btn-notifications
}

在greedy模式下，check被识别成了radio

stack{
row{
switch
}
row{
check
}
row{
label,slider,label
}
row{
radio
}
}
footer{
btn-search,btn-search,btn-notifications
}

而在beam 3模式下，有3处识别错误，第2行没识别出来，另外footer上错了两个：

stack{
row{
switch
}
row{


}
row{
label,slider,label
}
row{
radio
}
}
footer{
btn-notifications,btn-search,btn-notifications
}

7C656D6E-0402-4D53-9450-CC948F07A8D4

stack{
row{
switch
}
row{
switch
}
row{
btn,btn,switch,switch
}
row{
label,btn
}
row{
label,slider,label
}
row{
switch
}
row{
label,btn,btn,btn
}
row{
switch,btn,btn
}
}
footer{
btn-home,btn-search,btn-search,btn-search
}

到这么复杂的情况下，不管是greedy和beam 3都乱了套，各有十几处错误。
greedy的情况：

stack{
row{
switch
}
row{
switch
}
row{
btn,switch,switch
}
row{
label,btn,btn,btn
}
row{
switch
}
row{
label,slider,label
}
row{
label,btn
}
row{
switch
}
row{
label,btn
}
}
footer{
btn-home,btn-search,btn-search,btn-search
}

beam 3的情况：

stack{
row{
switch
}
row{
switch
}
row{
btn,switch,}
row{
label,btn,btn,btn
}
row{
label,slider,label
}
row{
switch
}
row{
label,btn
}
row{
label,slider,btn,btn
}
}
footer{
btn-search,btn-search,btn-search,btn-home
}

8B5AF397-CBD8-4B2C-B8A6-3E9D036B4F2F

我们再来看一个复杂点的例子，标准答案如下：

stack{
row{
btn,switch,btn
}
row{
switch
}
row{
btn,btn,btn,btn
}
row{
label,slider,label
}
row{
radio
}
row{
check
}
row{
check
}
}
footer{
btn-notifications,btn-home,btn-notifications,btn-notifications
}

greedy算法在第一行识别就把中间的switch识别成了btn。

stack{
row{
btn,btn,btn
}
row{
switch
}
row{
label,slider,label
}
row{
check
}
row{
label,slider,label
}
row{
btn
}
row{
radio
}
}
footer{
btn-home,btn-home,btn-home,btn-home
}

beam 3的表现要好一些，但是在row中识别出了row,,,,是个败笔：

stack{
row{
btn,btn,btn
}
row{
switch
}
row{


row,,,,


row{
label,slider,label
}
row{
check
}
row{
check
}
}
footer{
btn-search,btn-notifications,btn-home,btn-home
}

beam 3可正确识别而greedy不能正确识别的case

9DB2E273-687B-4C00-952C-354C1AE1BF99

greedy对于同一行较多控件情况下的识别能力不如beam 3，在第1行第4个控件识别上出了问题，标准答案如下：

stack{
row{
btn,switch,switch,btn
}
row{
check
}
row{
switch
}
}
footer{
btn-dashboard,btn-home
}

greedy时最后一个btn识别成了switch

stack{
row{
btn,switch,switch,switch
}
row{
check
}
row{
switch
}
}
footer{
btn-dashboard,btn-home
}

样例总结

这10个case中，greedy模式下的平均Levenshtein距离32.1，beam 3模式下为28.

250张Android测试集，greedy平均编辑距离为27.9，beam 3模式下32.