我给AI（Claude-3.5-sonnet）喂了一张图，然后它写出了代码：
电脑技术
143 人阅读
|
3 人回复
|
2025-01-02
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
我给AI(Claude-3.5-sonnet模型）喂了一张图片，然后它写出了flutter代码
然后，我渲染生产了这段界面
还是有点瑕疵，估计我给它（Claude-3.5-sonnet）的喂料估计少了，如果是多了，我估计会生成上面的相似的布局
注：那女的我用ai（stable diffusion）生成的，不是真人，防止误解！
|
|
|
|
|
|
|
|
|
本帖最后由 legs+ 于 2025-1-10 14:40 编辑
真的是太完美了，直接把激情拉满！
首先，我找了一个卡片格式的图片切了下来
然后给Claude-3.5-sonnet喂了这张图，它生成了代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>卡片</title>
- <style>
- .card {
- width: 350px;
- background: white;
- border-radius: 20px;
- overflow: hidden;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
- transition: transform 0.3s ease;
- }
- .card:hover {
- transform: translateY(-5px);
- }
- .card-image {
- width: 100%;
- height: 200px;
- object-fit: cover;
- display: block;
- }
- .card-content {
- padding: 20px;
- }
- .card-title {
- font-size: 24px;
- color: #333;
- margin: 0 0 10px 0;
- }
- .card-text {
- font-size: 16px;
- color: #666;
- line-height: 1.5;
- margin: 0;
- }
- /* 可选的容器样式 */
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- padding: 20px;
- background-color: #f5f5f5;
- }
- </style>
- </head>
- <body>
- <div class="card">
- <img src="1.jpg" alt="Card Image" class="card-image" />
- <div class="card-content">
- <h2 class="card-title">Card Title Here</h2>
- <p class="card-text">
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque
- voluptatem necessitatibus omnis corrupti facere...
- </p>
- </div>
- </div>
- </body>
- </html>
注意，只要把图片的url替换掉，就是你的完美作品
|
|
|
|
|
|
|
|
|
下面是Claude-3.5-sonnet生成的图片，根本没有区别
完美，没有区别
|
|
|
|
|
|
|
|
|
