前端智能化漫谈 (4) - pix2code结果编辑距离分析-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: # 前端智能化漫谈 (4) - pix2code结果编辑距离分析 ## Levenshtein距离分析 从实用的角度,我们先采用莱文斯坦距离,也就是编辑距离来分析一下pix2code的结果。因为Levenshtein距离是从DSL角度来看,需要人工修改时的最小编辑次数,所以从这个角度来分析是有其意义的。 我们分别用greedy和beam 3两种方法对于datasets/andro

前端智能化漫谈 (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%正确识别

例子:
3F47F1AF-CFCA-483E-8845-0889EBBC48BC.png

完全正确的例子就不分析了。
以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

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

标准答案如下:

../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。

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

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

54BC253F-DA31-4904-BC18-233CC0083E2F.png

这个比较复杂,不管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

CCF7369F-FCE4-4801-8936-E251EE90038C.png

这个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

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

这个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

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

标准答案如下:

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

7C656D6E-0402-4D53-9450-CC948F07A8D4.png

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

8B5AF397-CBD8-4B2C-B8A6-3E9D036B4F2F.png
我们再来看一个复杂点的例子,标准答案如下:

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

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

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张图片识别结果汇总

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

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

版权声明:如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developerteam@list.alibaba-inc.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章