QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

5 分钟上手!用 #Workspace 为 screenshot-to-code 项目增加新功能

  • 2024-12-10
    北京
  • 本文字数:3505 字

    阅读完需:约 11 分钟

大小:461.89K时长:02:37
5 分钟上手!用 #Workspace 为 screenshot-to-code 项目增加新功能

在之前的文章中,我们教过大家如何 5 分钟实现网站复刻,同时为大家介绍了 screenshot-to-code 这个开源项目,以及如何基于该项目增加调用 Gemini 模型,最终实现上传图片生成代码的效果。


当时就有不少小伙伴提出疑问,怎么快速找到需要修改的地方呢?


在此之前,我们要先花一些时间去了解阅读源码才能找到相关函数,但在今天,给大家介绍一个豆包MarsCode的利器:#Workspace,有了它,妈妈再也不用担心我找不到修改函数的入口啦!



今天给大家演示一下,如何利用豆包MarsCode 的 #Workspace 功能,快速上手修改开源项目!

在修改之前,需要首先了解并熟悉当前项目的模块和架构,我们可以使用豆包 MarsCode #Workspace 功能,总结并输出模块的架构:




接着,我们可以把 #Workspace 输出的 mermaid 内容,贴到 mermaid 在线展示网站(https://sourl.cn/RUYGf4)上,就得到了 screenshot-to-code 项目的模块架构:


了解熟悉完架构后,接着使用 #Workspace 让豆包MarsCode 告诉我们如何本地启动项目:



根据它给的方式,我们在终端内一步步执行,即可成功启动项目。



下一步,我们需要增加调用 Gemini 模型,但模块代码这么多,该怎么快速找到需要修改哪些地方呢?

这时我们再次使出 #Workspace 利器,可以看到豆包MarsCode精准地给出了我们要修改的地方:






接下来,让我们按照豆包MarsCode 给的教程,动手改起来。


首先,我们需要打开 frontend/src/lib/models.ts 增加 Gemini 模型的枚举。当输入 GEMINI 之后,豆包 MarsCode 自动为你推荐了补全代码,点击 Tab 键采纳即可。




紧接着,我们需要打开 frontend/src/App.tsx,找到修改入口:



我们先拿豆包 MarsCode 来解释一下这个函数的功能。



根据解释,该函数只是用于更新指令并生成代码,和我们要改的模型无关,我们忽略这个文件直接改后端代码。


后端部分主要修改 llm.py 和 generate_code.py 2 个文件。根据前面的架构介绍,llm.py 负责调用 LLM,generate_code.py 则是生成代码的路由处理。因此我们需要先改 llm.py,增加调用 Gemini。

在这里,我们直接复制上次的代码,修改 llm.py:


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
复制代码


最后,我们再修改 generate_code.py,增加调用 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
复制代码


经过以上几个步骤的修改,我们就完成了代码修改部分,最后我们再安装 google-generativeai 库:


cd backendpoetry add google-generativeai
复制代码


安装完库后,再次启动项目,就可以愉快地使用 Gemini 来生成代码啦,大家赶快去试试使用 #Workspace 吧!

2024-12-10 17:305706

评论

发布
暂无评论
发现更多内容

Vue进阶(四十八):Vue.js 2.0 移动端拍照压缩图片预览及上传

No Silver Bullet

Vue 8月日更

数据传输过程的序列化,你了解吗

卢卡多多

序列化 8月日更

埋土灰

箭上有毒

8月日更

Linux之alias命令

入门小站

Linux

[灵魂拷问]MySQL面试高频100问(工程师方向)

编程菌

Java 编程 程序员 面试 计算机

sql task2 基础查询与排序

橙橙橙橙汁丶

【设计模式】模板方法模式

Andy阿辉

C# 后端 设计模式 8月日更

获取自己的公网 IP 地址

耳东@Erdong

IP地址 8月日更

快手处罚恶意炒作、审丑卖惨类账号,不良自媒体违背公序良俗

石头IT视角

【Flutter 专题】62 图解基本 Button 按钮小结 (二)

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 8月日更

Springboot+quartz源码探索

4ye

Java 后端 springboot quartz 8月日更

图解:为什么非公平锁的性能更高?

王磊

Java 8月日更

网络攻防学习笔记 Day110

穿过生命散发芬芳

网络安全 8月日更

fil挖矿的规则是什么?fil挖矿收益如何?

区块链 分布式存储 IPFS fil收益 fil挖矿

【前端 · 面试 】TCP 总结(一)—— 概述

编程三昧

8月日更

心态炸了!我的join查询多加了个过滤条件性能就崩了

林一

MySQL 查询优化 多表join

Flink 和流式应用运维(十-下)

Databri_AI

flink 监控 Web UI

面试侃集合 | LinkedBlockingQueue篇

码农参上

队列 Queue 8月日更

数字化为企业带来哪些价值?

boshi

数字化转型

是时候封装限制 UITextField、UITextView 的最大字符长度了

fuyoufang

swift iOS 知识体系 8月日更

MySQL中FROM_UNIXTIME与UNIX_TIMESTAMP

一个大红包

8月日更

ASCII对照表

入门小站

工具

微博评论高性能高可用架构设计

tjudream

高可用架构 微博评论 高性能计算架构 多级负载均衡 多级缓存

SpringBoot 自动装配源码解析

Rubble

8月日更

Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)

No Silver Bullet

面试 Vue 8月日更

vue入门:element组件与动画使用

小鲍侃java

8月日更

Python代码阅读(第14篇):列表求并集

Felix

Python 编程 Code Programing 阅读代码

LeetCode题解:2. 两数相加,迭代,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

前端之算法(九)回溯算法

Augus

算法 8月日更

【微积分的力量】芝诺悖论

LeifChen

8月日更 微积分 芝诺悖论

手撸二叉树之二叉树的层平均值

HelloWorld杰少

数据结构与算法 8月日更

5 分钟上手!用 #Workspace 为 screenshot-to-code 项目增加新功能_AI&大模型_豆包MarsCode_InfoQ精选文章