Screenshot-to-code开源项目mac上实践

github上的开源项目,看介绍可以将设计ui图片转换为 HTML 和 CSS

源码地址:

GitCode - 开发者的代码家园

我的mac安装了2.7和3.11,就用3吧直接上代码

安装 pip3 install keras tensorflow pillow h5py jupyter

报错

ERROR: Could not install packages due to an OSError: [Errno 13] Permission denied: '/Users/xxx/Library/Python/3.11'

Check the permissions.

mac-xxxdeMacBook-Pro:bin xxx$ sudo pip3 install keras tensorflow pillow h5py jupyter

Password:

WARNING: The directory '/Users/xxx/Library/Caches/pip' or its parent directory is not owned or is not writable by the current user. The cache has been disabled. Check the permissions and owner of that directory. If executing pip with sudo, you should use sudo's -H flag.

解决办法

sudo pip3 install keras tensorflow pillow h5py jupyter

安装好了

tensorboard-data-server-0.7.2 tensorflow-2.15.0 tensorflow-estimator-2.15.0 tensorflow-io-gcs-filesystem-0.35.0 termcolor-2.4.0 terminado-0.18.0 tinycss2-1.2.1 tornado-6.4 traitlets-5.14.0 types-python-dateutil-2.8.19.14 typing-extensions-4.9.0 uri-template-1.3.0 urllib3-2.1.0 wcwidth-0.2.12 webcolors-1.13 webencodings-0.5.1 websocket-client-1.7.0 werkzeug-3.0.1 wheel-0.42.0 widgetsnbextension-4.0.9 wrapt-1.14.1

WARNING: Running pip as the 'root' user can result in broken permissions and conflicting behaviour with the system package manager. It is recommended to use a virtual environment instead: https://pip.pypa.io/warnings/venv

下载源码

git clone https://github.com/emilwallner/Screenshot-to-code.git

进入目录

cd Screenshot-to-code/

执行运行

jupyter notebook

启动成功

自动打开浏览器,url为http://localhost:8888/tree界面如下图

接下来怎么搞?欢迎评论区讨论

不讨论了直接上图

双击hello_world

双击hello_world.ipynb

点击右键头点击执行就行,一行一行地执行,执行会报警告,不用管,

把代码改一下也可以,from IPython.display import display, HTML 

报错增加以下代码

import requests
    requests.packages.urllib3.disable_warnings()
    import ssl

    try:
        _create_unverified_https_context = ssl._create_unverified_context
    except AttributeError:
        # Legacy Python that doesn't verify HTTPS certificates by default
        pass
    else:
    # Handle target environment that doesn't support HTTPS verification
        ssl._create_default_https_context = _create_unverified_https_context
 

这个错误应该是下载google文件时错误导致,

执行完成后就可以看到下面显示了hello word

为什么写第17的代码,可以评论区讨论

附:有chatgpt4的用户可以用这个

git clone https://github.com/abi/screenshot-to-code.git
搭建screenshot-to-code(从截图生成代码)系统是一项复杂的任务,涉及多个技术领域。以下是一个基本的搭建教程: ### 1. 环境准备 首先,确保你的系统安装了以下工具: - Python 3.x - Git - 虚拟环境工具(如virtualenv或conda) ### 2. 创建虚拟环境 创建一个虚拟环境以隔离项目依赖: ```bash python3 -m venv screenshot-to-code-env source screenshot-to-code-env/bin/activate # 在Windows上使用 `screenshot-to-code-env\Scripts\activate` ``` ### 3. 克隆项目代码 选择一个开源screenshot-to-code项目并克隆代码。例如,可以使用GitHub上的一个项目: ```bash git clone https://github.com/emilwallner/Screenshot-to-code.git cd Screenshot-to-code ``` ### 4. 安装依赖 使用pip安装项目所需的依赖包: ```bash pip install -r requirements.txt ``` ### 5. 数据准备 准备训练数据,通常包括截图和对应的HTML/CSS代码。你可以使用公开的数据集,如Pix2Code数据集: ```bash mkdir data wget http://bit.ly/2z6lW3k -O data/dataset.zip unzip data/dataset.zip -d data ``` ### 6. 训练模型 运行训练脚本开始训练模型: ```bash python train.py --dataset data/dataset --model models/model.h5 ``` ### 7. 评估模型 训练完成后,可以使用测试集评估模型的性能: ```bash python evaluate.py --model models/model.h5 --dataset data/dataset ``` ### 8. 部署模型 将训练好的模型部署为一个Web服务,以便可以通过API调用: ```bash python app.py ``` ### 9. 前端界面 开发一个前端界面,允许用户上传截图并获取生成的代码。可以使用HTML/CSS/JavaScript结合Flask或其他后端框架。 ### 10. 测试与优化 测试整个系统,确保每个部分正常工作。根据需要优化模型和代码生成逻辑。 ### 11. 部署上线 将系统部署到服务器或云平台,如AWS、Heroku等,以便用户可以访问和使用。 ### 总结 搭建screenshot-to-code系统需要一定的技术基础和耐心。通过上述步骤,你可以搭建一个基本的系统,并根据需要进行优化和扩展。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值