今天来介绍下如何将图片进行读取并代码化呈现。
官方网址：
https://aistudio.google.com/prompts/
1. 把图片读成JSON代码
先上传一张图片
输入提示词：
Given this image:
- First, describe the image
- Then, detail the recipe to bake this item in JSON format. Include item names and quantities for the recipe
中文翻译：
给出这张图片：
首先，描述图片
然后，以 JSON 格式详细说明烘焙此物品的配方。包括食谱中的项目名称和数量
模型输出的JSON代码复制如下：
{
"title": "Croissants",
"ingredients": [
{
"name": "All-purpose flour",
"quantity": "500g"
},
{
"name": "Salt",
"quantity": "10g"
},
{
"name": "Sugar",
"quantity": "20g"
},
{
"name": "Instant yeast",
"quantity": "7g"
},
{
"name": "Unsalted butter",
"quantity": "250g"
},
{
"name": "Milk",
"quantity": "250ml"
},
{
"name": "Egg yolk",
"quantity": "1"
}
],
"instructions": [
"In a large bowl, combine the flour, salt, sugar, and yeast.",
"Add the milk and mix until a dough forms.",
"Knead the dough for 10 minutes, until it is smooth and elastic.",
"Place the dough in a greased bowl, cover, and let it rise in a warm place for 1 hour.",
"Roll out the dough into a rectangle about 1/4 inch thick.",
"Spread the softened butter evenly over the dough.",
"Fold the dough in thirds, like a letter.",
"Wrap the dough in plastic wrap and refrigerate for 30 minutes.",
"Repeat steps 7 and 8 two more times.",
"Roll out the dough into a rectangle about 1/2 inch thick.",
"Cut the dough into triangles.",
"Roll up each triangle, starting from the wide end.",
"Place the croissants on a baking sheet lined with parchment paper.",
"Cover and let them rise for 1 hour.",
"Brush the croissants with egg yolk and bake at 375 degrees Fahrenheit for 15-20 minutes, or until golden brown."
],
"notes": "You can use a stand mixer with a dough hook to knead the dough. Make sure the butter is softened to room temperature before spreading it on the dough. The croissants will rise best in a warm place, like a turned-off oven with a bowl of hot water inside."
}
请将上面代码中的文字转为中文并转化为html代码。
复制代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>羊角面包食谱</title>
<style>
body {
font-family: Arial, sans-serif;
}
.recipe {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
.ingredients, .instructions, .notes {
margin-top: 20px;
}
.notes {
font-style: italic;
}
</style>
</head>
<body>
<div class="recipe">
<h1>羊角面包</h1>
<div class="ingredients">
<h2>原料：</h2>
<ul>
<li><strong>通用面粉：</strong>500克</li>
<li><strong>盐：</strong>10克</li>
<li><strong>糖：</strong>20克</li>
<li><strong>即发干酵母：</strong>7克</li>
<li><strong>无盐黄油：</strong>250克</li>
<li><strong>牛奶：</strong>250毫升</li>
<li><strong>蛋黄：</strong>1个</li>
</ul>
</div>
<div class="instructions">
<h2>制作步骤：</h2>
<ol>
<li>在一个大碗中，混合面粉、盐、糖和酵母。</li>
<li>加入牛奶并搅拌，直到形成面团。</li>
<li>揉面团10分钟，直到面团光滑有弹性。</li>
<li>将面团放入涂油的碗中，盖上盖子，在温暖的地方发酵1小时。</li>
<li>将面团擀开成大约1/4英寸厚的长方形。</li>
<li>将软化的黄油均匀涂抹在面团上。</li>
<li>像折信一样，将面团折叠成三折。</li>
<li>用保鲜膜包裹面团，放入冰箱冷藏30分钟。</li>
<li>重复步骤7和8两次。</li>
<li>将面团擀开成大约1/2英寸厚的长方形。</li>
<li>将面团切成三角形。</li>
<li>从宽端开始，将每个三角形卷起。</li>
<li>将羊角面包放置在铺有烘焙纸的烤盘上。</li>
<li>盖上盖子，让它们再次发酵1小时。</li>
<li>用蛋黄刷在羊角面包上，然后在375华氏度下烘烤15-20分钟，或直到金黄色。</li>
</ol>
</div>
<div class="notes">
<h2>注意事项：</h2>
<p>你可以使用带有面团钩的立式搅拌机来揉面团。在涂抹面团之前，请确保黄油已经软化至室温。羊角面包在温暖的地方发酵效果最好，比如一个关闭的烤箱内放一碗热水。</p>
</div>
</div>
</body>
</html>
我们可以将上面代码转化为html进行浏览器页面查看，我们看下效果。
再来看下我们日常吃的包子通过图片是如何转化为代码呈现页面的。
先上传一张令人垂涎欲滴的包子图。
然后在Google AI Stuido中输入提示词：
“首先，描述图片
然后，以 HTML 格式详细说明烘焙此物品的配方。包括食谱中的物品名称和数量”
我们立马就能看到图片转化成了页面代码。
接下来保存至本地并使用浏览器打开即可。我们一起看下效果：
描述的非常详尽，包含了配方和制作方式，甚至还有贴心的保存提示。
补充知识：
图片转JSON的方法
将图片转换为JSON格式通常涉及到将图片数据编码为一种可以在JSON中表示的形式，最常见的方法是使用Base64编码。以下是详细的步骤和方法：
使用Base64编码
将图片转换为Base64编码
可以使用在线工具或者编程语言的库（如Python的base64模块）来完成这个任务。例如，如果你有一个名为image.png 的PNG图片文件，你可以将其转换为Base64编码。
将Base64编码的字符串嵌入到JSON对象中
在JSON中，可以创建一个键值对，其中键是描述图片的字符串（如"image_data"），值是Base64编码的图片数据。例如：
{
"image_data": "base64-encoded-image-data"
}
使用在线转换工具
除了手动编码外，还可以使用在线转换工具，如OnlineConvert提供的服务，它可以将JPG文件转换为JSON格式。这些工具通常不需要下载任何软件，就可以将电脑、平板或手机中的JPG文件转换为JSON格式。
注意事项
数据大小
将图片转换为Base64编码会增加数据的大小，因此这种方法可能不适合大型图片。
文件格式
如果你的目的是存储图片以便在网络上传输，你可能会考虑使用传统的图片格式（如JPEG）来减小文件大小。
结论
将图片转换为JSON格式是一种常见的数据处理方式，它允许图片数据以文本形式存储和传输，便于在不同的系统和服务之间共享。通过Base64编码，可以将二进制的图片数据转换为文本格式，从而嵌入到JSON对象中。此外，还有在线转换工具可以方便地完成这一转换过程。然而，需要注意的是，Base64编码会增加数据的大小，因此对于大型图片可能不是最佳选择。
需要更多免费AI工具、最新Ai信息、详细使用和丰富Ai教程、Ai变现方法的小伙伴可以加入路上侠客的知识星球，一年会员，原价199元，现在只需99元。
