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