Gemini UI to Code: 前端开发新神器！免费Gemini生成UI和代码、替代OpenUI & v0 - 文章 - 开发者社区

Aitrainee | 公众号：AI进修生

🌟这个工具并不是直接生成代码，而是通过多个步骤迭代生成高质量的UI。

Hello，大家好，欢迎阅读本期新文章，

大约一个月前，Google发布了他们的旗舰模型 Gemini 1.5 Pro 。这个模型很强大，有约200万个上下文窗口，而且是一个多模态模型，能处理 图像、视频、音频 等各种输入，非常厉害。

picture.image

Gemini 1.5 Pro可以处理大量信息，比如一小时的视频、11小时的音频、30k行代码或70万字的文本。

这在生成大量文本或代码时非常有用。因为它是多模态模型，你可以通过截图生成代码，这意味着只需提供一个截图就能创建前端界面。

今天我要给大家介绍的是一个叫做“Gemini UI to Code”的新工具。这个工具非常好用，只需要输入一个截图，就能生成UI代码。

它默认生成HTML文件，但你可以修改提示，生成任何编程语言的代码。设置起来也很简单，因为它是一个单文件的Streamlit接口。

picture.image

使用这个工具也很容易。首先，你需要一个Gemini API密钥，可以在他们的AI Studio免费获得。

picture.image

然后，克隆GitHub上的repo，安装所有必需的依赖，添加你的API密钥并保存。

接着，运行Streamlit命令启动应用程序，选择截图并点击“生成UI”按钮。经过几个步骤后，你就会得到生成的代码文件，可以下载并使用。

picture.image

最令人惊喜的是，这个工具并不是直接生成代码，而是通过多个步骤迭代生成高质量的UI。

首先，它会生成UI的描述，然后根据描述创建详细的HTML文件，并不断检查和修正错误，直到生成最终文件。

我尝试了使用ChatGPT界面截图，生成的UI非常详细，虽然不是百分之百精确，但非常实用。

picture.image

相比之下，OpenUI生成的基本UI对我来说几乎不可用，而Gemini UI to Code生成的界面风格和布局都很接近原始截图，真的很不错。

另外，他们还推出了Gemini 1.5 Flash模型，这个模型非常快且成本效益高。不过，今天主要介绍的是Gemini 1.5 Pro，因为它在代码生成方面表现更出色。

总体来说，这是一款非常棒的工具，定制性强，使用方便。OpenUI对我来说大部分时间都不可用，而Gemini UI to Code则能生成非常实用的界面。

下面提供官方的 文档介绍、相关资源、部署教程 等，进一步支撑你的行动，以提升本文的帮助力。

Gemini UI 转换 Streamlit 应用程序

这个 Streamlit 应用程序旨在利用 AI 的力量将 UI 设计转换为代码。它可以分析上传的 UI 设计图片并生成相应的 HTML 代码，使开发人员更容易实现他们的设计。

安装

要安装必要的依赖项，请运行以下命令：


      
      
          

        pip install 
        -
        r requirements
        .
        txt

要运行应用程序，请使用以下命令：


      
      
          

        streamlit run app
        .
        py

在运行应用程序之前，您需要在 app.py 文件中配置您的 API 密钥。将 YOUR GEMINI KEY 替换为您的实际 API 密钥，以启用 AI 功能。

您还可以选择所需的 Gemini 模型，甚至可以指定 Gemini 使用特定的 CSS 框架。

视频教程

知音难求，自我修炼亦艰

抓住前沿技术的机遇，与我们一起成为创新的超级个体

（把握AIGC时代的个人力量）

点这里👇关注我，记得标星哦～

一键三连「分享」、「点赞」和「在看」

科技前沿进展日日相见 ~

picture.image