CN110673846A - 一种用于网页分块的方法及系统 - Google Patents

一种用于网页分块的方法及系统 Download PDF

Info

Publication number
CN110673846A
CN110673846A CN201910831036.7A CN201910831036A CN110673846A CN 110673846 A CN110673846 A CN 110673846A CN 201910831036 A CN201910831036 A CN 201910831036A CN 110673846 A CN110673846 A CN 110673846A
Authority
CN
China
Prior art keywords
webpage
elements
picture
subunit
list
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910831036.7A
Other languages
English (en)
Other versions
CN110673846B (zh
Inventor
谢敬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Taihe Latitude Network Technology Co Ltd
Original Assignee
Beijing Taihe Latitude Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Taihe Latitude Network Technology Co Ltd filed Critical Beijing Taihe Latitude Network Technology Co Ltd
Priority to CN201910831036.7A priority Critical patent/CN110673846B/zh
Publication of CN110673846A publication Critical patent/CN110673846A/zh
Application granted granted Critical
Publication of CN110673846B publication Critical patent/CN110673846B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/60Editing figures and text; Combining figures or text
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00Image analysis
    • G06T7/10Segmentation; Edge detection
    • G06T7/11Region-based segmentation

Abstract

本发明涉及网页编辑领域,公开了一种用于网页分块的方法及系统,通过获取源网页中的图片元素;根据所述图片元素,确定分块的网页框架;将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。利用网页设计时的“布局规则”进行基于视觉的网页分块,提高了分块效率、准确度,降低了网页分块的复杂度。

Description

一种用于网页分块的方法及系统
技术领域
本发明涉及网页编辑领域,特别涉及一种用于网页分块的方法及系统。
背景技术
机器学习的神经风格迁移是指机器通过深度学习可以捕获一个图像的内容并将其与另一个图像的风格相结合,这种技术称为神经风格迁移。为了更好的满足用户的视觉需求,现有技术需要一种对网页进行风格迁移的方法。
鉴于“风格迁移”是“基于视觉”的,所以在对整个网页进行风格迁移前,需要先对网页进行基于视觉的“分块”,但现有的VIPS算法复杂度太高,是网页分块的效率太低。
发明内容
本发明的目的是提供一种用于网页分块的方法及系统,根据网页而设计时的“布局规则”对网页进行基于视觉的分块,以提高基于视觉的网页分块的效率和准确度。
为达到上述目的,一方面,本发明提供一种用于网页分块的方法,包括:
获取源网页中的图片元素;
根据所述图片元素,确定分块的网页框架;
将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。
可选的,
还包括:
分别对每个所述网页的分块进行风格迁移;
所述风格迁移包括:根据目标风格对每个所述网页分块内的元素进行替换;或,对每个所述网页分块内的元素进行重排;或,对每个所述网页分块内的每个元素分别进行风格迁移。
可选的,
所述获取源网页中的图片元素,包括:
识别并移除所述源网页中的空元素;
将剩余元素的描述方式正则化;
对区域属性和实际区域不统一的元素进行重绘,使其区域属性与实际区域一致;
当存在元素重合时,将其中最大区域范围的元素内部的元素移除。
可选的,
根据所述图片元素,确定分块的网页框架,包括:
确定图片列表list;
将每个list作为一个整体的图片进行处理。
可选的,
还包括:
将满足如下关系的两个list合并为一个图片进行处理:
位置相近、元素数量相等、水平或垂直对齐。
另一方面,本发明实施例提供一种用于网页分块的系统,包括:
图片元素识别单元,用于获取源网页中的图片元素;
分割单元,用于根据所述图片元素,确定分块的网页框架;
元素还原单元,用于将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。
可选的,
还包括:
风格迁移单元,用于分别对每个所述网页的分块进行风格迁移;
所述风格迁移单元包括:元素替换子单元,用于根据目标风格对每个所述网页分块内的元素进行替换;或,元素重排子单元,用于对每个所述网页分块内的元素进行重排;或,元素风格迁移子单元,用于对每个所述网页分块内的每个元素分别进行风格迁移。
可选的,
所述图片元素识别单元,包括:
空元素移除子单元,用于识别并移除所述源网页中的空元素;
正则化子单元,用于将剩余元素的描述方式正则化;
重绘子单元,用于对区域属性和实际区域不统一的元素进行重绘,使其区域属性与实际区域一致;
内部元素移除子单元,用于当存在元素重合时,将其中最大区域范围的元素内部的元素移除。
可选的,
所述分割单元,包括:
图片列表查找子单元,用于确定图片列表list;
分割子单元,用于将每个list作为一个整体的图片进行处理。
可选的,
所述分割单元,还包括:
重组子单元,用于将满足如下关系的两个list合并为一个图片进行处理:
位置相近、元素数量相等、水平或垂直对齐。
本发明实施例可以达到以下有益效果:通过获取源网页中的图片元素;根据所述图片元素,确定分块的网页框架;将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。利用网页设计时的“布局规则”进行基于视觉的网页分块,提高了分块效率、准确度,降低了网页分块的复杂度。
附图说明
图1为本发明实施例一种用于网页分块的方法流程示意图;
图1a为本发明实施例中,步骤101的流程示意图;
图2为本发明实施例中,需重绘的元素的示意图;
图3为本发明实施例中,内部元素移除示意图;
图4为本发明实施例中,去除文字节点之后的网页示意图;
图5为本发明实施例中,网页分区示意图;
图6为本发明实施例中,两个图片列表list的示意图;
图7为图6中两个list匹配的示意图;
图8为本发明实施例中,分块后的网页示意图;
图9为本发明实施一种用于网页分块的系统的结构框图;
图9a为本发明实施例中,图片元素识别单元201的结构框图;
图9b为本发明实施例中,分割单元202的结构框图。
具体实施方式
为实现对网页进行风格迁移,本发明创造性的提出先将网页进行分块,再对网页进行风格迁移。
现有技术中,对于网页分块的算法,比较常用的是基于视觉的页面分割算法VIPS算法(VIPS:a Vision-based Page Segmentation Algorithm)这个算法的主要思想是从人类的角度来看,当一个用户观察web页面的时候,它总是会自然而然的把一个语义块作为一个单一对象来看待,而不会管web页面的内部结构是如何描述的。因此一些视觉因素,比如背景颜色、字体颜色和大小、边框、逻辑块和逻辑块之间的间距等等可用来分辨语义块,充分的利用web页面的视觉提示,并结合DOM树进行页面语义分块,可以达到更加理想的效果。VIPS算法的首先从DOM树中提取出所有的合适的页面块,然后根据这些页面块检测出它们之间的所有的分割条,包括水平和垂直方向。最后基于这些分割条,Web页面的语义结构将被重新构建。对于每一个语义块又可以使用VIPS算法继续分割为更小的语义块。
但由于网页视觉特点的复杂性,导致VIPS算法过于复杂,且性能相对不高。另外,VIPS算法是基于DOM树的。DOM树最早引入是为了在浏览器中进行布局显示,而不是进行Web页面的语义结构描述。
以上,本文使用的是一种与DOM树无关,完全基于平面视觉逻辑的分块算法。
第一,先对本申请用到的几个视觉逻辑进行说明。
所谓视觉逻辑,类似于人体工程学,即在设计的过程当中充分的考虑用户的便捷性。众所周知,在设计网页的时候,页面布局是一个重点,一个正常的网页肯定会做到布局合理。比如,页面整体左对齐,上对齐;标题位于对应位置的正上方等等。以下是一些网页时都会遵循的“布局规则”
1.图片和类图片(一些div等标志图像,以下统称图片),可以确定B2C网页的骨架。
在日常访问的各个网页中,几乎不存在只有文字的网页,即便是类似博客的网站,也会出现头像,楼层线等图片。
2.图片和文字一般不会单独出现。一般来说,当给出一张图片以后,往往会再给出一段文字进行说明,例如添加标题等。
3.如果图片和文字同时出现,文字一般会出现在图片的右侧和下侧。
根据用户的行为习惯,看东西的时候一般是从左往右,从上往下看,而且一般来说一张图片所能表达的信息远远大于对应文字。所以先看图片不论上逻辑上来说还是从效果上来说都是合理的。
4.除了图片,和图片周围的文字以外,用的最多的一种结构就是list。设计中有一个常识,就是要讲究简洁,工整。list,就是元素的重复出现,然而在现在的设计中,常常会体现一个列表中的某一个元素,所以会给他的某个属性一个特别的赋值。比如说标记成某一个颜色,字体加粗等。将页面中的list准确的识别出来,将会极大的提升页面分块的能力。
以上是几条作用比较大,通用性能比较好,理论上比较有依据的几条视觉逻辑。以下还有几条辅助型的逻辑,可以根据源网页的具体情况进行删减。例如,假设现在有一批的网页需要进行分块,而且这些页面之间的相似度很低,那么可以设定一个阈值,以便满足1-4即可,相反,如果这些页面大同小异,可以适当根据这些网页的特点增加相应的规则。
5.如果文字出现在图片右侧,文字区域一般会大于图片的宽度。
6.小型图片后面可能会跟随一行文字。
7.分割线只会出现在文字的上方。
这里指的是对于页面的分割线。以分割线为边界分为两组。
8.元素的大小属性是相关的。
元素的属性可以用于两者的相似度的计算。
9.文字一般不会同时出现在图片的右侧和下侧。
以上的方法不可能做到万能,但是可以确定大致的确定区域从而实现分块的效果。
以下将结合具体实例对本申请进行详细的阐述。
如图1所示,为本发明实施例一种用于网页分块的方法,包括以下步骤:
步骤101,获取源网页中的图片元素;
这里的元素,包括图片元素、文字元素等;元素不可再继续分割。本实施例可选的,元素为DOM树中的叶子节点。
每个元素都有自己的属性集合F,F是一个不定长度的多元组,其中至少包括以下属性:
大小(size),X坐标(x),Y坐标(y),高度(h),宽度(w);
元素i的属性集合,可以表达为:Fi{size,x,y,h,w,…}。
步骤102,根据所述图片元素,确定分块的网页框架;
根据网页设计时遵循的视觉逻辑,图片和类图片(一些div等标志图像,以下统称图片),可以确定B2C网页的骨架。
另外,在日常访问的各个网页中,几乎不存在只有文字的网页,即便是类似博客的网站,也会出现头像,楼层线等图片。
可选的,
步骤101中,所述获取源网页中的图片元素,包括:
步骤1011,识别并移除所述源网页中的空元素;
本实施例可选的,空元素包括:没有实际含义、和/或没有实际大小,位置属性、和/或位置大小不在正常范围内的元素。
在另一个可选的实施方式中,空元素还包括:孤立的小结点。
将上述空元素移除。
步骤1012,将剩余元素的描述方式正则化;
所述剩余元素,是指移除空元素之后的其它元素。
正则化是指将剩余元素的命名,属性名归一化。
这是因为不同的文件写法各异。这一步骤首先是把命名,属性名进行归一化。比如:
①有的宽度标记为w,有的标记为width,为了方便后续处理,在这里做一个统一,都标记为w。
②其次,HTML里面有一些如css(层叠样式表,英文全称:Cascading StyleSheets,是一种用来表现HTML或XML等文件样式的计算机语言),旋转等操作,为方便后续处理,都以实际的效果为准修改属性的命名。例如一个div,他的位置是10,10,但是又带有90度的旋转,那么需要在这里利用数学知识计算出他的最终位置,并将改最终位置作为其div。
步骤1013,对区域属性和实际区域不统一的元素进行重绘,使其区域属性与实际区域一致;
例如,在一个可选的实施方式中,div A设置了大小为100*100,但是实际上内部被使用的大小仅仅为10*10。如果不对元素进行重绘,那么剩下的区域就会受到干扰。视觉上一个结点和A无关,但是在运行的时候却发现在A的内部。
如图2所示,为需重绘的元素示意图,整个灰色区域的边界就是文字的边界,但是上下,和右边就存在多余的情况,这些多余的空间对接下来的运算没有任何意义,因此需要计算出实际的文字区域的属性集合,对其进行重绘。
步骤1014,当存在元素重合时,将其中最大区域范围的元素内部的元素移除。
在经过前3步以后,得到了一个相对准确,有效的页面文件。接下来要将获取页面骨架,但在获取骨架的时候,内部的结点显然是不重要的,因此需要将内部节点去除。
需要注意的是,在该实施例中,内部是一个相对的概念。例如,一个元素j有95%在父元素i内,然而有5%在父节点之外,这种情况应该也要移除。那么这里对于内外的判断就需要一个阈值T1。在这里,如果Sjin/Si>T1,就将该元素从当前的所有元素列表list中移除,并且添加到新的列表INNERLIST中。
图3为本实施例的内部元素移除示意图;如图所示,这是一种典型的B不完全被A包含的情况,如果B在A中的面积S1占B的总面积(S1+S2)大于T1,则认为B应该被移除。可以表达为:
if S1/(S1+S2)>T1
remove B
INNERLIST.add B.
在一个可选的实施方式中,还包括:
步骤1015,移除文字元素
相对来说,文字元素也可以协助获取页面框架。但是由于文字区域存在很大的不规整性,而且有些文字结点会造成干扰,所以相对于图片来说计算起来比较复杂,需要加入的判断条件很多。所以先将文字元素从当前的所有元素列表中移除,同时添加到新的文本列表textlist中,因为只是暂时不需要这些节点,而不是永久删除。(可以认为图片元素等特殊元素以外的元素都是文字元素)可以表达为:
for i in S:
if Si==TextNode:
remove Si
TEXTLIST.add Si
可选的,
根据所述图片元素,确定分块的网页框架,包括:
确定图片列表list;
将每个list作为一个整体的图片进行处理。
图4是去除文字节点之后的网页示意图,如图所示,只保留了图片元素。根据这些图片元素即可对页面进行分块。
在一个可选的实施方式中,确定图片列表list之前,还包括:
确定分割线。
一些特定的元素或则图形可以被认为是分割线。包括但不限于:符合特定条件的细长线条,比如width>100且长宽比大于25;超大的元素。确定了分割线之后,就可以对剩下的元素进行分组。因为分割线的作用就是将两个集合之间的相关性降到最低,同时提高区域内的相关性。
确定分割线之后,即可得到图5所示的分区。
进一步,确定图片列表list,将每个list作为一个整体的图片进行处理。
一个页面除了图片以外,就是list最多。现在将几乎所有的无关结点移除,而且又将处理范围从原来的整个页面缩小到了图5所示的一个分区,分块的难度瞬间下降。甚至可以说,有的区间只包含了一个list,那么只需要将这个list定位出来,就可以完成这个区间的分块。由于现在不包含文字,所以list的定位就变得十分简单。根据list的定义,属性之间存在共性的结点反复出现就构成了list。在这里,只需要判断属性集合F中长宽(F.w,F.h)相等的(相等可以认为是在可以容忍的区间内相等,比如1%的偏差可以容忍,以下不再赘述)元素沿着某一个方向(优先考虑Y方向)重复出现,且数量大于3,就可以认为出现了list。
为了确定list,在一个可选的实施方式中,需要先将分区内的所有元素集合S进行排序。关于排序,这是所有操作的起点,只有将元素正确排序,才能进入后面的操作,比如在求元素之间的邻近距离的时候,必须确定下一个元素,否则求出来的距离没有实际意义。理论上来说,X和Y都是一个元素的特征,但是相对于其他的特征来讲,这个特征的区分能力比较弱。所以应该使用一种区分能力更强的特征Fm来排序,比如说尺寸,同时,最好用坐标来充当辅助特征Fs。如图5,如果只按照X或Y来排序,搜索框其实也应该被列入list,而选择尺寸作为主要筛选特征则可以很好的解决这个问题。排序之后,元素i(0,n-1)和j(0,n)假设可以构成一个列表,因此在集合S中寻找满足条件的b,并且暂时组成一个collection。(接下来可以根据具体的需求对collection进行检查。在一个可选的实施方式中,特征的选择,条件的判断都可以根据实际需求,个人喜好等来订制,以下不再赘述。)
上述过程可以表示为:
T2为阈值。Score表示元素j对于元素i可以组成一个列表的能力得分。F表示特征属性集合,k表示系数,m表示第m个特征。前述Fs,Fm可以是组合特征。
Score=Sum(km*Match(Fim,Fjm))
if Scorej>T2:
list.add(Sj)
以上,将所有图片元素中的list定位出来,确定网页框架。
步骤103,将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。
因内部元素并不会影响网页的结构,所以可以将内部元素还原以尽可能的减少对原网页的损失。但是,还原元素不是单纯的附加到元素当中,而是将元素挂载在父容器中(可以全部直接挂载在父容器下,也可以用迭代的方法整理成树状结构),只有这样,才能既不会影响原网页的内容,又不会对接下来的处理造成干扰。需说明是,由于文字元素的优先级是小于内部元素的,所以内部元素包括文字元素和图片元素。文字元素在处理的时候相对难以确定,在这一阶段将部分文字元素停靠,将简化后续工作。
以上,可选的,步骤101中移除的空元素不会被还原。
用一个两层的for循环遍历每一个元素Si是否在Sj的内部。可以表达为:
Figure BDA0002190710540000101
可选的,
还包括:
将满足如下关系的两个list合并为一个图片进行处理:
位置相近、元素数量相等、水平或垂直对齐。
图6为两个图片列表list的示意图,如图所示,第一列,和第二列都是图片,但是将他们分开之后没有具体的意义,可以认为这两列都属于一个大的list,每一个item中包含两个图片元素,可以合并。
判断合并的第一条件是,首先两个list中的ltem(元素)在数量上相等,在给定区域内数量上如果不相等,则可以推断他们之间没有联系。但是,仅仅在数量上相等也不能确定listA和listB是否相关,而且,可能会出现多列(listA+listB一起多次出现)的情况,仅仅从数量无法准确划分。因此,需要引入位置来作为第二判断条件。两个列表关联,不但在对齐上需要满足至少一个近似对齐关系(就是说位置上水平或者垂直对齐),同时距离也不能太远。如果有多个选择的话,选择相关性最高的进行绑定。此外还有可以将item之间的间距span作为辅助条件来判断。两个list如果间距不相等,可以认定他们之间没有相关性。
具体实施时,在一个可选的实施方式中,由于list是作为一个对象来处理的,所以只需要比较list.span即可。
最终的结果如同图7,第一列和第二列都会挂载在同一个父容器中,他们是以平行关系存在的。
同时可以说明的是,由于定位list的方法是统计重复元素,所以可能会出现多行多列的组合情况。比如一个页面上出现了两次图7,那么list(Group)会自动计算出这个list包含两个sublists(Line),并且在sublist.count(Line.nodelist.count)属性上标记为2。此时list本身包含自己的属性例如span,同时每一个sublist(Line)也包含自身的属性。
因此,在list匹配的时候会有一个问题,以图7为例,假设整个图7重复了3次,其中,第一列每次不变,第二列可能由长方形图变为正方形图。那么这样会出现一个包含15个元素的listA和3个包含5个元素的listB[1,2,3]。如果按照上面的流程,只是在经过第一个条件数量不相等的条件时就放弃后面的所有操作,那么就就只能得到3个残缺的小块,那包含15个元素的list最终只能被放弃。可以说,这样的话整个分块就失败了。所以在数量不匹配的else分支中,需要考虑一种list之间的包含关系(listA包含listB)。可以表达为:
Figure BDA0002190710540000121
以上主要说的是两个list的配对过程的第一步。最理想的状况是如图7所示,两者数量相等。如果不相等,则考虑他们之间是否互质,如果互质,则两者极有可能没有相关性,但是为了覆盖尽可能多的情况,如果listA,listB其中的元素数量互质的话,进一步判断是否存在部分匹配或者说包含的关系,比如3和2互质,但是有可能listA有3列,listB有2列,listA又包含listB。如果不互质,那么还有至少两者常见的情况。一是两者数量存在整除关系,例如4和8;而是无法整除,但是确实属于部分匹配的情况。这两种情况之下,也需要继续判断他们的辅助特征,比如对齐,间距是否相等,如果满足条件,则将listA,listB经行绑定。
可选的,还包括:
还原文字元素。
在一可选的实施方式中,还原文字元素包括:
确定文字list;确定文字list和确定图片list的区别在于,图片的尺寸是最有效的特征,相对应的,本实施方式将字体作为文字主要特征Fm。
找到文本list以后,按照利用图片确定骨架的基本思想。将文本list优先和图片list进行配对,配对过程和上述图片组合处理的情况差不多。也是根据位置,方向,间距等特征进行匹配。如果配对失败,则在图片的右侧空白区域开辟一片文字区域,将落在该区域的文字结点都认为和图片相关,因此和图片平级的挂在一个父节点之下。
如果有个别孤立的文字结点,则选择最近的图片结点进行挂靠。比如说,一张图片下方紧挨着有一段注释文字。就将这段注释文字挂载到该图片下。
在本实施例中,所有确定的list(包括图片list和文字list)包括方向属性。确定当前list方向有利于对后续内容作出预判。如list方向是纵向的,那么可以与其配对的list再次出现的话,大概率会先出现在水平方向。且,当两个list的方向不一致时,即使其他的属性相当,也可以判断这两个list不相关。
可选的,
还包括:
分别对每个所述网页的分块进行风格迁移;
所述风格迁移包括:根据目标风格对每个所述网页分块内的元素进行替换;或,对每个所述网页分块内的元素进行重排;或,对每个所述网页分块内的每个元素分别进行风格迁移。
在一个可选的实施方式中,还包括:
获取分区大小。
通过以上步骤,根据分割线已经将整个页面分成了几个小块,且每一个区间的框架已经求出,因此现在需要确定父容器的大小。
将块状结构转化也转化为表格式网页布局。
虽然得到的分区可以如便签条一样任意摆放,但更多的需求却类似于“切糕”。为了满足“切糕”需求,需执行如下两个步骤:
第一步:确定起步方向
图8是分块后的网页示意图,如图示,最开始拿到图8所示的网页的时候,并不知道整个页面应该被水平划分还是垂直划分。这里可以通过统计对齐次数来确定起步方向。所谓对齐次数就是任意两个元素如果满足任何一种对齐关系,就记为一次对齐。其中水平和竖直的对齐次数分开来计算,并且在计算的时候记上不记下,记左不计右。
第二步:迭代
先根据实际需求排序。迭代的过程需要代入方向,所以要用变量记录当前处理的方向。选定一个元素,并遍历剩下的元素,尝试利用该元素找出他的同类。遍历的条件是该元素可以在该方向上包含或者被包含于另一个元素,那么将符合条件的元素转移到该集合Snew中,并且动态调整边界。如图8所示,左上在Y方向上可以包括左下。所以把左侧两个元素放入一个集合Snew之中,并且从原集合中移除。此外,之所以要动态调整边界是因为各个元素并不是像俄罗斯方块一样严格对齐的,如果两个元素AB,只要AB在该方向上有交集,就将边界调整为包含AB的最大范围。
这一步之后有两个结果:1Snew的元素大于1;2Snew的元素数量等于1。对第一种情况来说,说明Snew已经成功的划分了一个部分。在这种情况下,改变方向,进入下一层迭代。但是在正式迭代之前,先判断有没有必要再迭代,也就是跳出迭代的条件是否满足。
跳出迭代的条件有两个。一是只有两个元素,二是在该方向上,所有元素都满足一种对齐方式。具体判断方法是计算是否所有的元素的起点都在分布范围内。例如一列元素的X值都分布在10±5。如果满足条件,则说明Snew中还包含了一个其他方向的组合。
对于第二种情况,还有两种情况。一是该元素就是独立的,二是匹配失败。对于独立存在的意思就是图8的任意一块,在水平方向上都是独立不相关的。这种情况下,把该元素取出,挂载在当前层。如果是匹配失败,则说明该方向上还有别的元素,但是不能归入一组。这时只需要将该元素留在原有集合。
这个过程可以简单表述为下:
其中horizontalGroup,verticalGroup其中又会调用subGroup(HtmlNode node,int dir)。
在一个可选的实施方式中,风格迁移包括:
根据目标风格,对每个分块内的图片元素进行风格迁移、对文字进行字体风格迁移、和/或对排列方式进行调整。
在另一个可选的实施方式中,风格迁移包括:
根据目标风格,对每个分块内的图片元素进行风格替换、对文字内容进行替换、和/或对排列方式进行调整。
本发明实施例可以达到如下有益效果:通过获取源网页中的图片元素;根据所述图片元素,确定分块的网页框架;将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。利用网页设计时的“布局规则”进行基于视觉的网页分块,提高了分块效率、准确度,降低了网页分块的复杂度。
图9为本发明另一实施例,一种用于网页分块的系统的结构框图,如图所示,包括:
图片元素识别单元201,用于获取源网页中的图片元素;
分割单元202,用于根据所述图片元素,确定分块的网页框架;
元素还原单元203,用于将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。
可选的,
还包括:
风格迁移单元204,用于分别对每个所述网页的分块进行风格迁移;
所述风格迁移单元包括:元素替换子单元,用于根据目标风格对每个所述网页分块内的元素进行替换;或,元素重排子单元,用于对每个所述网页分块内的元素进行重排;或,元素风格迁移子单元,用于对每个所述网页分块内的每个元素分别进行风格迁移。
可选的,如图9a所示,所述图片元素识别单元201,包括:
空元素移除子单元2011,用于识别并移除所述源网页中的空元素;
正则化子单元2012,用于将剩余元素的描述方式正则化;
重绘子单元2013,用于对区域属性和实际区域不统一的元素进行重绘,使其区域属性与实际区域一致;
内部元素移除子单元2014,用于当存在元素重合时,将其中最大区域范围的元素内部的元素移除。
可选的,如图9b所示,所述分割单元202,包括:
图片列表查找子单元2021,用于确定图片列表list;
分割子单元2022,用于将每个list作为一个整体的图片进行处理。
可选的,
所述分割单元202,还包括:
重组子单元2023,用于将满足如下关系的两个list合并为一个图片进行处理:
位置相近、元素数量相等、水平或垂直对齐。
本发明实施例可以达到以下有益效果:本发明实施例可以达到如下有益效果:通过获取源网页中的图片元素;根据所述图片元素,确定分块的网页框架;将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。利用网页设计时的“布局规则”进行基于视觉的网页分块,提高了分块效率、准确度,降低了网页分块的复杂度。
对于本领域技术人员而言,显然本发明不限于上述示范性实施例的细节,而且在不背离本发明的精神或基本特征的情况下,则可对这些实施例作出另外的变更和修改。
本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种用于网页分块的方法,其特征在于,包括:
获取源网页中的图片元素;
根据所述图片元素,确定分块的网页框架;
将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。
2.根据权利要求1所述的方法,其特征在于,所述得到分块的网页之后,还包括:
分别对每个所述网页的分块进行风格迁移;
所述风格迁移包括:根据目标风格对每个所述网页分块内的元素进行替换;或,对每个所述网页分块内的元素进行重排;或,对每个所述网页分块内的每个元素分别进行风格迁移。
3.根据权利要求1所述的方法,其特征在于,所述获取源网页中的图片元素,包括:
识别并移除所述源网页中的空元素;
将剩余元素的描述方式正则化;
对区域属性和实际区域不统一的元素进行重绘,使其区域属性与实际区域一致;
当存在元素重合时,将其中最大区域范围的元素内部的元素移除。
4.根据权利要求1所述的方法,其特征在于,根据所述图片元素,确定分块的网页框架,包括:
确定图片列表list;
将每个list作为一个整体的图片进行处理。
5.根据权利要求4所述的方法,其特征在于,还包括:
将满足如下关系的两个list合并为一个图片进行处理:
位置相近、元素数量相等、水平或垂直对齐。
6.一种用于网页分块的系统,其特征在于,包括:
图片元素识别单元,用于获取源网页中的图片元素;
分割单元,用于根据所述图片元素,确定分块的网页框架;
元素还原单元,用于将源网页中除图片元素外的其它元素在所述网页框架中还原,得到分块的网页。
7.根据权利要求6所述的系统,其特征在于,还包括:
风格迁移单元,用于分别对每个所述网页的分块进行风格迁移;
所述风格迁移单元包括:元素替换子单元,用于根据目标风格对每个所述网页分块内的元素进行替换;或,元素重排子单元,用于对每个所述网页分块内的元素进行重排;或,元素风格迁移子单元,用于对每个所述网页分块内的每个元素分别进行风格迁移。
8.根据权利要求6所述的系统,其特征在于,所述图片元素识别单元,包括:
空元素移除子单元,用于识别并移除所述源网页中的空元素;
正则化子单元,用于将剩余元素的描述方式正则化;
重绘子单元,用于对区域属性和实际区域不统一的元素进行重绘,使其区域属性与实际区域一致;
内部元素移除子单元,用于当存在元素重合时,将其中最大区域范围的元素内部的元素移除。
9.根据权利要求6所述的系统,其特征在于,所述分割单元,包括:
图片列表查找子单元,用于确定图片列表list;
分割子单元,用于将每个list作为一个整体的图片进行处理。
10.根据权利要求9所述的系统,其特征在于,所述分割单元,还包括:
重组子单元,用于将满足如下关系的两个list合并为一个图片进行处理:
位置相近、元素数量相等、水平或垂直对齐。
CN201910831036.7A 2019-09-04 2019-09-04 一种用于网页分块的方法及系统 Active CN110673846B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910831036.7A CN110673846B (zh) 2019-09-04 2019-09-04 一种用于网页分块的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910831036.7A CN110673846B (zh) 2019-09-04 2019-09-04 一种用于网页分块的方法及系统

Publications (2)

Publication Number Publication Date
CN110673846A true CN110673846A (zh) 2020-01-10
CN110673846B CN110673846B (zh) 2023-02-17

Family

ID=69076292

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910831036.7A Active CN110673846B (zh) 2019-09-04 2019-09-04 一种用于网页分块的方法及系统

Country Status (1)

Country Link
CN (1) CN110673846B (zh)

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101944109A (zh) * 2010-09-06 2011-01-12 华南理工大学 一种基于页面分块的图片摘要提取系统及方法
CN102262618A (zh) * 2010-05-28 2011-11-30 北京大学 一种版面信息识别的方法及装置
CN102375889A (zh) * 2011-11-01 2012-03-14 深圳市信游天下网络科技有限公司 一种通过网页构建数据库构建网页的方法
CN105094775A (zh) * 2014-05-13 2015-11-25 腾讯科技(深圳)有限公司 网页生成方法和装置
CN106503211A (zh) * 2016-11-03 2017-03-15 福州大学 面向信息发布类网站的移动版自动生成的方法
US20180018774A1 (en) * 2016-07-15 2018-01-18 Abbyy Development Llc Method and system for preparing text images for optical-character recognition
CN109388396A (zh) * 2018-09-18 2019-02-26 深圳壹账通智能科技有限公司 页面生成方法、装置、计算机设备和存储介质
CN109492177A (zh) * 2018-11-02 2019-03-19 中国搜索信息科技股份有限公司 一种基于网页语义结构的网页分块方法
CN109800036A (zh) * 2017-11-15 2019-05-24 广州市动景计算机科技有限公司 信息流页面展示方法、装置、系统、计算设备和存储介质
CN109857956A (zh) * 2019-01-25 2019-06-07 四川大学 基于标签和分块特征的新闻网页关键信息自动抽取方法
CN110020344A (zh) * 2017-09-04 2019-07-16 北京字节跳动科技有限公司 一种网页页面元素标注方法及系统

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102262618A (zh) * 2010-05-28 2011-11-30 北京大学 一种版面信息识别的方法及装置
CN101944109A (zh) * 2010-09-06 2011-01-12 华南理工大学 一种基于页面分块的图片摘要提取系统及方法
CN102375889A (zh) * 2011-11-01 2012-03-14 深圳市信游天下网络科技有限公司 一种通过网页构建数据库构建网页的方法
CN105094775A (zh) * 2014-05-13 2015-11-25 腾讯科技(深圳)有限公司 网页生成方法和装置
US20180018774A1 (en) * 2016-07-15 2018-01-18 Abbyy Development Llc Method and system for preparing text images for optical-character recognition
CN106503211A (zh) * 2016-11-03 2017-03-15 福州大学 面向信息发布类网站的移动版自动生成的方法
CN110020344A (zh) * 2017-09-04 2019-07-16 北京字节跳动科技有限公司 一种网页页面元素标注方法及系统
CN109800036A (zh) * 2017-11-15 2019-05-24 广州市动景计算机科技有限公司 信息流页面展示方法、装置、系统、计算设备和存储介质
CN109388396A (zh) * 2018-09-18 2019-02-26 深圳壹账通智能科技有限公司 页面生成方法、装置、计算机设备和存储介质
CN109492177A (zh) * 2018-11-02 2019-03-19 中国搜索信息科技股份有限公司 一种基于网页语义结构的网页分块方法
CN109857956A (zh) * 2019-01-25 2019-06-07 四川大学 基于标签和分块特征的新闻网页关键信息自动抽取方法

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
任玉 等: "基于分块的网页主题文本抽取", 《广西师范大学学报(自然科学版)》 *
刘艳敏等: "Web页面主题信息抽取研究与实现", 《计算机工程与应用》 *
章勤等: "图像搜索中基于网页分块的图像分类研究", 《计算机工程与科学》 *

Also Published As

Publication number Publication date
CN110673846B (zh) 2023-02-17

Similar Documents

Publication Publication Date Title
US20220215063A1 (en) System and method for block segmenting, identifying and indexing visual elements, and searching documents
AU2021204978B2 (en) Using an object model of heterogeneous data to facilitate building data visualizations
Lohmann et al. Concentri cloud: Word cloud visualization for multiple text documents
US9817804B2 (en) System for comparison and merging of versions in edited websites and interactive applications
US9183288B2 (en) System and method of structuring data for search using latent semantic analysis techniques
US7428700B2 (en) Vision-based document segmentation
DE102020002153A1 (de) Einsetzen von ein Objektattribut detektierenden Modellen zum automatischen Auswählen von Versionen detektierter Objekte in Bildern
US20110173527A1 (en) Determining Semantically Distinct Regions of a Document
CN110413925A (zh) 用于在交互式站点与用于支持移动设备和其它显示环境的应用之间的自动转换的系统和方法
US20050081146A1 (en) Relation chart-creating program, relation chart-creating method, and relation chart-creating apparatus
CN101359332A (zh) 具有语义分类功能的可视化搜索界面的设计方法
JP2013515977A (ja) 複数のウェブサイトからデータを収集及びランク付けするためのシステム及び方法
DE102018005611A1 (de) Automatische Paarbildung von Fonts unter Verwendung des asymmetrischen Metriklernens
CN106649805B (zh) 一种高效的Web应用跨浏览器布局兼容性检测系统及方法
CN106503211A (zh) 面向信息发布类网站的移动版自动生成的方法
CN106776910A (zh) 一种搜索结果的显示方法及装置
Makwana et al. Axes re-ordering in parallel coordinate for pattern optimization
CN110673846B (zh) 一种用于网页分块的方法及系统
CN110083760B (zh) 一种基于可视块的多记录型动态网页信息提取方法
CN112148735A (zh) 一种用于结构化表格数据知识图谱的构建方法
AU2019226189A1 (en) A system for comparison and merging of versions in edited websites and interactive applications
Sano et al. A web page segmentation method based on page layouts and title blocks
Banu et al. Dwde-ir: an efficient deep Web data extraction for information retrieval on Web mining
Soiraya et al. An analysis of visual and presentation factors influencing the design of E-commerce web sites
Ng et al. VFX: A VISION-BASED APPROACH TO FORUM DATA EXTRACTION

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant