免費AI編程助手
原標題：只需5分鐘，水靈靈地實現(xiàn)網(wǎng)站復(fù)刻！
作為前端開發(fā)者，我們的日常工作中總是有各種各樣的 UI 布局任務(wù)。從設(shè)計稿到代碼實現(xiàn)，往往需要花費大量時間去調(diào)整布局、優(yōu)化細節(jié)，這種重復(fù)性的工作不僅浪費時間資源，還無形中加重了我們的工作負荷，讓人感到疲憊。???
前段時間，我在 GitHub 上偶然發(fā)現(xiàn)了一個熱門的開源項目 Screenshot-to-Code，它能夠通過 AI 自動生成前端代碼，并且支持生成多種不同技術(shù)棧的代碼，如 HTML + Tailwind、React + Tailwind 等等。
想到可以借助 AI 來幫助我開發(fā)復(fù)雜的頁面，我立刻決定嘗試一下。
環(huán)境搭建
首先，我們可以將項目 Clone 到本地并用 IDE 打開，準備本地部署啟動。然而，面對冗長的項目 Readme 文檔，直接閱讀可能會帶來很重的視覺負擔(dān)。
這個時候我想到，我剛好有安裝豆包MarsCode 編程助手插件，決定嘗試下能否讓 AI 告訴我該如何進行部署。在向 AI 助手提問之后，它立刻按照步驟指引我，需要先進入后端目錄執(zhí)行哪些命令，再進入前端目錄執(zhí)行哪些命令。
按照它給到的命令執(zhí)行后，我成功地啟動了項目：
但項目只支持 GPT 和 Claude 的 API，這些 API 都要收費，我只想用免費的 Gemini 模型，要怎么修改呢？
使用編程助手增加 Gemini 模型
首先，我找到模型配置的代碼 model.ts，當(dāng)我在注釋上寫了需要增加 Gemini 模型后，編程助手立刻就幫我生成了代碼，我只需要按下 TAB 鍵采納即可。
接著在 backend/.env、backend/config.py 增加 Gemini 的 API KEY：
#.env增加
keyGEMINI_API_KEY=xxxxxx
#config.py增加獲取key
GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY", None)
然后可以在Llm.py 中增加 Gemini 模型以及調(diào)用 Gemini 的代碼。這時我發(fā)現(xiàn)有一個 stream_claude_response_native 方法，看起來是在調(diào)用 Claude，我們讓豆包MarsCode 編程助手解釋一下：
通過豆包MarsCode 編程助手的解釋，確認是在調(diào)用 Claude。那我們需要增加調(diào)用 Gemini 的代碼。編寫代碼過程中，通過編程助手提供的代碼補全功能，效率獲得了顯著的提升。
class Llm(Enum):
GPT_4_VISION = "gpt-4-vision-preview"
GPT_4_TURBO_2024_04_09 = "gpt-4-turbo-2024-04-09"
GPT_4O_2024_05_13 = "gpt-4o-2024-05-13"
CLAUDE_3_SONNET = "claude-3-sonnet-20240229"
CLAUDE_3_OPUS = "claude-3-opus-20240229"
CLAUDE_3_HAIKU = "claude-3-haiku-20240307"
CLAUDE_3_5_SONNET_2024_06_20 = "claude-3-5-sonnet-20240620"
//新增gemini
GEMINI_1_5_PRO_LATEST = "gemini-1.5-pro-latest"
async def stream_gemini_response(
messages: List[ChatCompletionMessageParam],
api_key: str,
callback: Callable[[str], Awaitable[None]],
) -> str:
genai.configure(api_key=api_key)
generation_config = genai.GenerationConfig(
temperature = 0.0
)
model = genai.GenerativeModel(
model_name = "gemini-1.5-pro-latest",
generation_config = generation_config
)
contents = parse_openai_to_gemini_prompt(messages);
response = model.generate_content(
contents = contents,
#Support streaming
stream = True,
)
for chunk in response:
content = chunk.text or ""
await callback(content)
if not response:
raise Exception("No HTML response found in AI response")
else:
return response.text;
def parse_openai_to_gemini_prompt(prompts):
messages = []
for prompt in prompts:
message = {}
message['role'] = prompt['role']
if prompt['role'] == 'system':
message['role'] = 'user'
if prompt['role'] == 'assistant':
message['role'] = 'model'
message['parts'] = []
content = prompt['content']
if isinstance(content, list):
for content in prompt['content']:
part = {}
if content['type'] == 'image_url':
base64 = content['image_url']['url']
part['inline_data'] = {
'data': base64.split(",")[1],
'mime_type': base64.split(";")[0].split(":")[1]
}
elif content['type'] == 'text':
part['text'] = content['text']
message['parts'].append(part)
else:
message['parts'] = [content]
messages.append(message)
return messages寫完代碼之后，我們可以使用【注釋代碼】功能給代碼加上注釋，讓代碼更加規(guī)范：
之后，我們還需要在 generate_code 增加調(diào)用前面寫的 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
# 增加調(diào)用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 backend
poetry add google-generativeai效果呈現(xiàn)
改完所有代碼再啟動項目后，就可以看到已經(jīng)有 Gemini 模型啦，讓我們來試試效果：?
我們上傳豆包MarsCode 官網(wǎng)截圖，點擊生成后，右側(cè)即為 AI 生成的效果，可以看到還原度還不錯。
由于自動生成的字體沒有漸變色的效果，我們可以通過給 AI 提要求，增加漸變色效果，可以明顯看到，在漸變色字體的設(shè)計下頁面的視覺效果更加高級了！?
在豆包MarsCode 編程助手的幫助下，我們在項目上增加了免費了 Gemini 模型。有了它，項目開發(fā)更加高效便捷了，官網(wǎng)復(fù)刻，輕松拿下！
大家趕快來嘗試一下吧！
- 免費體驗地址 豆包MarsCode 編程助手
