輸入文本生成網(wǎng)頁！一個開源的AI網(wǎng)頁生成項目: OpenUI

軟件開發(fā)中，用戶界面（UI）的構(gòu)建往往是一個既費時又復雜的過程。現(xiàn)在有人嘗試用AI來完成頁面的開發(fā)，雖然效果上還是無法代替程序員，但是目前看還是能夠做到輔助減少部分工作量。

今天就介紹一個開源的AI網(wǎng)頁生成項目：OpenUI

它允許開發(fā)者通過簡單的描述，然后生成UI頁面。你還可以通過選擇不同的語言，來生成對應的代碼。

如何使用？

使用OpenUI非常簡單。你只需要描述你想要的UI，OpenUI就可以將其實時渲染出來。如果你需要對UI進行修改，只需提出更改要求，OpenUI就可以幫你完成。它甚至可以幫助你將HTML轉(zhuǎn)換成React、Svelte或Web Components等格式。

我們先看一下實際效果

打開官方的演示網(wǎng)站（你也可以自己部署），可以看到整個頁面如下圖

這時候在底部的輸入框內(nèi)，可以輸入文字，描述你要生成的頁面。

這時候生成了初版的效果，看起來不是想要的。那我們可以通過上面提供的修改工具，繼續(xù)讓AI生成。

如果你想常看代碼，可以點擊如下的區(qū)域，選擇你要生成的風格

作者點評

作者試過很多AI頁面生成的項目，整體來說效果還都是一般。雖然有的自媒體宣傳如何恐怖，如何替代程序員，但是實際體驗之后覺得目前水平還是無法做到的。

未來看GPT-5或者GPT-6發(fā)布之后，AI推理能力能否上升一個臺階。如果提升不了多少推理能力，我覺得大家還是安心睡吧，這個只是輔助我們的。

體驗地址：

https://openui.fly.dev/ai/new

代碼地址：

https://github.com/wandb/openui

其他頁面生成AI項目：

https://v0.dev/

保存在線文章以便日后查閱，如何實現(xiàn)？想將網(wǎng)頁內(nèi)容轉(zhuǎn)為PDF保存，如何轉(zhuǎn)換？

今天，小福教大家如何將網(wǎng)頁生成PDF文件，跟著小福一起來看看吧！

首先，我們打開福昕高級PDF編輯器，選擇左上角“文件”>“創(chuàng)建”>“從網(wǎng)頁”，或點擊菜單欄“轉(zhuǎn)換”>“從網(wǎng)頁”；

在彈出的對話框中，粘貼轉(zhuǎn)換的網(wǎng)頁的URL鏈接，點擊“創(chuàng)建”，福昕高級PDF編輯器將開始加載網(wǎng)頁內(nèi)容；

加載完畢后，網(wǎng)頁就被轉(zhuǎn)為PDF啦！此時，我們就可以對該頁面進行進一步的編輯和調(diào)整，如文字提取、編輯、添加注釋、劃重點等。完成編輯后，點擊保存即可。

此外，在轉(zhuǎn)換時，我們可以點擊“設(shè)置”來選擇更多轉(zhuǎn)換選項：

在彈出的“網(wǎng)頁轉(zhuǎn)換設(shè)置”對話框中，有“常規(guī)”和“頁面布局”選項卡。常規(guī)選項卡可以設(shè)置網(wǎng)頁的轉(zhuǎn)換等級和轉(zhuǎn)換內(nèi)容，頁面布局則可設(shè)置生成的PDF的頁面尺寸、頁邊距和方向，以及多媒體類型及縮放比例。

這里給大家說說常用的一些設(shè)置：

在“常規(guī)”選項卡中：

1、轉(zhuǎn)換等級：可以指定網(wǎng)站中要轉(zhuǎn)換的網(wǎng)頁等級，或勾選“轉(zhuǎn)換整個站點”。

轉(zhuǎn)換同一路徑的網(wǎng)頁：轉(zhuǎn)換隸屬于您輸入的網(wǎng)頁地址的所有網(wǎng)頁；轉(zhuǎn)換同一服務(wù)器上的網(wǎng)頁：轉(zhuǎn)換儲存在同一服務(wù)器上的所有網(wǎng)頁。

2、PDF設(shè)置：設(shè)置加載整個頁面的超時時間。超過此設(shè)置時間，加載進程將自動中止，且僅已加載內(nèi)容會被轉(zhuǎn)換成PDF。默認值為120秒。

在所生成的PDF文件中禁用所有超鏈接：勾選該項后，轉(zhuǎn)換生成的PDF中的所有超鏈接均為無效鏈接。
將所有的頁面內(nèi)容轉(zhuǎn)換到同一個PDF頁面：勾選該項后，所有相關(guān)內(nèi)容將被轉(zhuǎn)換到同一個PDF頁面中。
創(chuàng)建書簽：勾選該項，轉(zhuǎn)換后將自動生成被轉(zhuǎn)換頁面的書簽。書簽名為網(wǎng)頁的域名。當網(wǎng)頁域名相同時，將自動創(chuàng)建子書簽并以頁面的標題作為子書簽的名稱。若頁面沒有標題，則使用對應的URL作為子書簽的名稱。
創(chuàng)建 PDF 標簽：勾選該項以創(chuàng)建包含標簽和其他輔助信息的PDF文檔。
在新建頁面放置頁眉和頁腳：在生成的 PDF 的每一頁上放置頁眉和頁腳。頁眉顯示您創(chuàng)建PDF的日期和網(wǎng)頁標題。頁腳顯示網(wǎng)頁URL（或 HTML 文件的文件路徑）和頁碼。
背景圖像：勾選該項以保留頁面背景，生成的 PDF 看起來將與原始網(wǎng)頁完全一樣。有時，網(wǎng)頁上的背景可能會影響文本的顯示效果，您可以取消勾選該項，這樣轉(zhuǎn)換后的頁面可能與網(wǎng)頁瀏覽器中顯示的不同，但更易于閱讀。

3、其他設(shè)置：

轉(zhuǎn)換圖像：如需在 PDF 轉(zhuǎn)換時轉(zhuǎn)換圖像，請勾選此項；反之則取消勾選。
為鏈接添加下劃線：如需在生成的 PDF 中為網(wǎng)頁鏈接文本添加下劃線，請勾選此項；反之則取消勾選。

以上就是本期所有內(nèi)容，我們下期再見啦！

速生成 Html5 骨架

在 Html 文件中輸入 html:5 按下回車鍵，可快速生成 HTML5 頁面模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

html:5

父子關(guān)系快速構(gòu)建

在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車鍵，可快速生成父子關(guān)系的結(jié)構(gòu)：

<div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

父子關(guān)系構(gòu)建

多個相同標簽

重復元素: 使用 * 加上數(shù)字來創(chuàng)建多個相同的標簽。例如，p*3 后按 Tab 會產(chǎn)生三個 <p> 段落標簽。

<p></p>
<p></p>
<p></p>

類與 ID 的添加

類: 在標簽名后加 . 再加上類名。如 div.container 生成帶有類 container 的 <div> 。

<div class="container"></div>

ID: 使用 # 加上 ID 名。如 div#main 生成 ID 為 main 的 <div> 。

<div id="main"></div>

屬性快速插入

屬性賦值: 在標簽后用方括號 [attr=value] 插入屬性。例如，a[href=https://example.com]。

<a href="https://example.com"></a>

組合使用

復合示例: 結(jié)合上述技巧，可以創(chuàng)建復雜結(jié)構(gòu)。比如，nav>ul>li.item$*4>a[href=#]{Item $} 會生成一個導航欄，包含 4 個列表項，每個列表項都是一個鏈接，鏈接文本分別為 "Item 1" 到 "Item 4"，且每個鏈接的 href 屬性指向不同的 ID。

<nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>

自定義 snippets（代碼片段）

高級結(jié)構(gòu): 如果有特定的復雜結(jié)構(gòu)經(jīng)常使用，可以創(chuàng)建自定義的 Emmet snippets。轉(zhuǎn)到 "文件" > "首選項" > "用戶代碼片段"，選擇或創(chuàng)建 HTML 片段文件，定義自己的縮寫和展開結(jié)構(gòu)。

Emmet 命令

Emmet: Wrap with Abbreviation: 選中現(xiàn)有代碼后，使用此命令（通過命令面板 Ctrl+Shift+P / Cmd+Shift+P 調(diào)出并搜索 “Wrap with Abbreviation” ），可以快速將選中內(nèi)容包裹在指定標簽內(nèi)。

在線咨詢

上一篇：JavaScript日期與時間組件 layDate
下一篇：W3C 決定使用 CSS 嵌套語法，你怎么看

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商