作为前端开发者,我们的日常工作中总是有各种各样的 UI 布局任务。从设计稿到代码实现,往往需要花费大量时间去调整布局、优化细节,这种重复性的工作不仅浪费时间资源,还无形中加重了我们的工作负荷,让人感到疲惫。
前段时间,我在 GitHub 上偶然发现了一个热门的开源项目 Screenshot-to-Code,它能够通过 AI 自动生成前端代码,并且支持生成多种不同技术栈的代码,如 HTML + Tailwind、React + Tailwind 等等。
想到可以借助 AI 来帮助我开发复杂的页面,我立刻决定尝试一下。
环境搭建
首先,我们可以将项目 Clone 到本地并用 IDE 打开,准备本地部署启动。然而,面对冗长的项目 Readme 文档,直接阅读可能会带来很重的视觉负担。
这个时候我想到,我刚好有安装豆包MarsCode 编程助手插件,决定尝试下能否让 AI 告诉我该如何进行部署。在向 AI 助手提问之后,它立刻按照步骤指引我,需要先进入后端目录执行哪些命令,再进入前端目录执行哪些命令。
按照它给到的命令执行后,我成功地启动了项目:
但项目只支持 GPT 和 Claude 的 API,这些 API 都要收费,我只想用免费的 Gemini 模型,要怎么修改呢?
使用编程助手增加 Gemini 模型
首先,我找到模型配置的代码 model.ts,当我在注释上写了需要增加 Gemini 模型后,编程助手立刻就帮我生成了代码,我只需要按下 TAB 键采纳即可。
接着在 backend/.env、backend/config.py 增加 Gemini 的 API KEY:
然后可以在Llm.py中增加 Gemini 模型以及调用 Gemini 的代码。这时我发现有一个 stream_claude_response_native 方法,看起来是在调用 Claude,我们让豆包MarsCode 编程助手解释一下:
通过豆包MarsCode 编程助手的解释,确认是在调用 Claude。那我们需要增加调用 Gemini 的代码。编写代码过程中,通过编程助手提供的代码补全功能,效率获得了显著的提升。
写完代码之后,我们可以使用【注释代码】功能给代码加上注释,让代码更加规范:
之后,我们还需要在 generate_code 增加调用前面写的 Gemini 方法:
if validated_input_mode == "video": if not anthropic_api_key: await throw_error( "Video only works with Anthropic models. No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog" ) raise Exception("No Anthropic key")
completion = await stream_claude_response_native( system_prompt=VIDEO_PROMPT, messages=prompt_messages, # type: ignore api_key=anthropic_api_key, callback=lambda x: process_chunk(x), model=Llm.CLAUDE_3_OPUS, include_thinking=True, ) exact_llm_version = Llm.CLAUDE_3_OPUS elif ( code_generation_model == Llm.CLAUDE_3_SONNET or code_generation_model == Llm.CLAUDE_3_5_SONNET_2024_06_20 ): if not anthropic_api_key: await throw_error( "No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog" ) raise Exception("No Anthropic key")
completion = await stream_claude_response( prompt_messages, # type: ignore api_key=anthropic_api_key, callback=lambda x: process_chunk(x), model=code_generation_model, ) exact_llm_version = code_generation_model # 增加调用gemini elif ( code_generation_model == Llm.GEMINI_1_5_PRO_LATEST ): if not GEMINI_API_KEY: await throw_error( "No GEMINI API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog" ) raise Exception("No GEMINI key")
completion = await stream_gemini_response( prompt_messages, # type: ignore api_key=GEMINI_API_KEY, callback=lambda x: process_chunk(x), ) exact_llm_version = code_generation_model else: completion = await stream_openai_response( prompt_messages, # type: ignore api_key=openai_api_key, base_url=openai_base_url, callback=lambda x: process_chunk(x), model=code_generation_model, ) exact_llm_version = code_generation_model
最后安装 Gemini SDK:
cd backendpoetry add google-generativeai
效果呈现
改完所有代码再启动项目后,就可以看到已经有 Gemini 模型啦,让我们来试试效果:
我们上传豆包MarsCode 官网截图,点击生成后,右侧即为 AI 生成的效果,可以看到还原度还不错。
由于自动生成的字体没有渐变色的效果,我们可以通过给 AI 提要求,增加渐变色效果,可以明显看到,在渐变色字体的设计下页面的视觉效果更加高级了!
在豆包MarsCode 编程助手的帮助下,我们在项目上增加了免费了 Gemini 模型。有了它,项目开发更加高效便捷了,官网复刻,轻松拿下!
大家赶快来尝试一下吧!
领取专属 10元无门槛券
私享最新 技术干货