IVY DOM


 

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
优质美国空间-老薛主机|IVY DOM|Flowline|

联系我

RSS




八月 15, 2017

自然语言处理和UI界面的全自动生成

没有实际操作过,但有思考过这个问题的实施办法。

从Web开发者的角度来说,UI就是HTML+CSS+JavaScript。从本质上来说,UI的自动生成也就是生成这三者。而这三者虽然是计算机语言,但本质上与自然语言处理并无两样,因为是计算机语言,本身就带有结构化信息,所以处理起来比自然语言要容易的多。

所谓自然语言处理,就是利用概率论和算法知识对现实问题进行抽象建模。

比如,Shazam音乐雷达这个服务可以识别一段音频中包含哪首歌,即使音频包含了环绕立体声、噪音或其它失真也没问题。

概括数据

在自然语言处理中,第一步是要概括数据,即将文本内容分割成n-gram模型。n-gram模型就是n个单词长度的词组。

比如“张爱国爱国”这段话应该被分割成

<code class="language-js"><span class="p">[</span><span class="s1">'张爱国'</span><span class="p">,</span> <span class="s1">'爱国'</span><span class="p">]</span>
</code>

概括数据包含了很多问题,比如张爱国是概括成“张,爱国”两个词,还是概括成“张爱国”这个名字,需要结合上下文语境、词义等进行分析。

当然这种技术目前已经有了可观进展,并且有非常多的库供开发者选择。

这种处理方法,对于计算机语言来说,也是一样的。

比如,如下这段CSS:

<code class="language-css"><span class="nn">#header</span> <span class="p">{</span>
	<span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span>
	<span class="nb">padding</span><span class="o">:</span> <span class="m">3em</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
	<span class="nb">background-color</span><span class="o">:</span> <span class="m">#fff</span><span class="p">;</span>
	<span class="nb">background-image</span><span class="o">:</span> <span class="sx">url("images/bg02.png")</span><span class="o">,</span> <span class="sx">url("images/bg02.png")</span><span class="o">,</span> <span class="sx">url("images/bg01.png")</span><span class="p">;</span>
	<span class="nb">background-position</span><span class="o">:</span> <span class="nb">top</span> <span class="nb">left</span><span class="o">,</span> <span class="nb">top</span> <span class="nb">left</span><span class="o">,</span> <span class="nb">top</span> <span class="nb">left</span><span class="p">;</span>
	<span class="nb">background</span><span class="o">-</span><span class="nb">size</span><span class="o">:</span> <span class="m">100%</span> <span class="m">6em</span><span class="o">,</span> <span class="m">100%</span> <span class="m">6em</span><span class="o">,</span> <span class="nb">auto</span><span class="p">;</span>
	<span class="nb">background-repeat</span><span class="o">:</span> <span class="nb">no-repeat</span><span class="o">,</span> <span class="nb">no-repeat</span><span class="o">,</span> <span class="nb">repeat</span><span class="p">;</span>
<span class="p">}</span>
</code>

它可以有两种结构化方式

  1. JSON
  2. n-gram模型

私以为,相比较数组来说,JSON更适合CSS的表达。计算机语言与自然语言最大的不同在于,计算机语言没有二义性,所以结构化起来就很容易了。

<code class="language-js"><span class="p">[{</span>
   <span class="nx">selector</span><span class="o">:</span> <span class="s1">'#header'</span><span class="p">,</span>
   <span class="nx">attributes</span><span class="o">:</span> <span class="p">[</span>
       <span class="p">{</span>
            <span class="nx">attrName</span><span class="o">:</span> <span class="s1">'text-align'</span><span class="p">,</span>
            <span class="nx">attrValue</span><span class="o">:</span> <span class="s1">'center'</span>
       <span class="p">},</span>
       <span class="p">...</span>
   <span class="p">]</span>
<span class="p">}]</span>
</code>

简单的结构化模型,当然这个模型需要在实际工作中进行调整。

在做好结构化工作之后,下一步是建立一个马尔可夫模型

马尔可夫模型

马尔可夫模型的用处很广,最有名的是Google的page rank算法。其本质也是非常简单的,但需要基于大量随机事件才能建立。

举一个经典的天气例子:

如果今天是晴天,那么明天有70%的可能是晴天,20%的可能是多云,10%的可能是下雨。

马尔可夫模型就是这样一个接一个连接的点,每个连线都有一个概率统计。而这个统计的数字是基于大量文本训练而来的。

根据这个简单的方法,马尔可夫模型可以演化成任意规模的复杂系统。比如文本写作与分析,其原理就是计算一个词后面接着另外一个词的概率,数据结构类似下面这样:

<code class="language-js"><span class="p">{</span>
   <span class="nx">word_a</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">word_b</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
      <span class="nx">word_c</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
      <span class="nx">word_d</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
   <span class="p">}</span>
   <span class="p">...</span>
<span class="p">}</span>
</code>

在这个实例中,wora_a出现了4(2+1+1)次,有两次后面跟着word_b,有一次跟着word_c,还有一次跟着word_d,那么word_a就有50%(2/4)的概率会指向word_b,剩下两个都是25%

接着,系统会随机根本单词频率的权重随机获取一个单词。

也就是说,只要有足够的数据,只需要一个词语,根据马尔可夫模型就可以生成任意长度的句子。

明白了这点,再回过头来看我们该如何生成CSS,其实主要就是几个步骤:

  1. 获取大量的CSS源代码
  2. 结构化CSS源代码为JSON
  3. 递归遍历JSON结构建立马尔可夫模型
  4. 根据马尔可夫模型生成CSS源代码

前两点没啥好说的,这里主要说下第三点,简单列一个CSS的马尔可夫模型(可能会根据实际情况有所改变):

<code class="language-css"><span class="p">{</span>
   <span class="s1">'text-align'</span><span class="o">:</span> <span class="err">{</span>
       <span class="n">value</span><span class="o">:</span> <span class="s1">'center'</span><span class="o">,</span>
       <span class="n">next</span><span class="o">:</span> <span class="err">{</span>
           <span class="nb">padding</span><span class="o">:</span> <span class="err">{</span>
               <span class="n">value</span><span class="o">:</span> <span class="s1">'3em 0 0 0'</span><span class="o">,</span>
               <span class="n">rate</span><span class="o">:</span> <span class="m">20%</span>
           <span class="p">}</span><span class="o">,</span>
          <span class="o">...</span>
       <span class="err">}</span>
    <span class="err">}</span><span class="o">,</span>

    <span class="nt">padding</span><span class="o">:</span> <span class="p">{</span>
       <span class="n">value</span><span class="o">:</span> <span class="s1">'3em 0 0 0'</span><span class="o">,</span>
       <span class="n">next</span><span class="o">:</span> <span class="err">{</span>
           <span class="o">...</span>
       <span class="p">}</span>
    <span class="err">}</span><span class="o">,</span>

    <span class="o">...</span>
<span class="err">}</span>
</code>

当然这仅仅是针对于CSS属性的马尔可夫模型,还可以再建立CSS属性值的马尔可夫模型。

<code class="language-css"><span class="p">{</span>
  <span class="s1">'text-align'</span><span class="o">:</span> <span class="err">{</span>
      <span class="nb">center</span><span class="o">:</span> <span class="m">1</span><span class="o">,</span>
      <span class="nb">left</span><span class="o">:</span> <span class="m">2</span><span class="o">,</span>
      <span class="nb">right</span><span class="o">:</span> <span class="m">3</span>
   <span class="p">}</span><span class="o">,</span>

   <span class="nt">padding</span><span class="o">:</span> <span class="p">{</span>
      <span class="s1">'3em 0 0 0'</span><span class="o">:</span> <span class="m">1</span><span class="o">,</span>
      <span class="o">...</span>
   <span class="p">}</span><span class="o">,</span>

   <span class="o">...</span>
<span class="err">}</span>
</code>

可以看到,到了这一步时,复杂度已经越来越高了,现有的模型可能无法支撑其复杂度,这个时候需要使用“六度分割”。

六度分割

所谓六度分割可以简单理解为有向图、无向图问题,比如A->B连通,但不代表B->A连通。

六度分割是解决句子中的一个词后面跟着哪个词的最佳解决办法,这里不详细说了。

基于此,用自然语言处理和机器学习的相关概念处理HTML和CSS的自动生成理论是没有问题的。

只要有足够的训练数据,一定可以生成样式复杂的CSS和HTML。

相关文章

返回
  1. 暂无评论。

  1. 暂无 Trackback

You must be logged in to post a comment.