景淮：卡片拼图-GPTs 实战

景淮：卡片拼图 GPTs 实战 景淮：卡片拼图 GPTs 实战 Modified May 9, 2024 Code block Markdown Copy Adding y axis labels (A F) for i, letter in enumerate("ABCDEF"): text = letter Calculate text position (centered on each cell) text x = y axis width // 2 font.getsize(text)[0] // 2 text y = (i cell height + cell height // 2) (font.getsize(text)[1] // 2) draw.text((text x, text y), text, fill=(0, 0, 0), font=font) Save the result output path with axes = '/mnt/data/6x6 grid illustration with axes.png' labelled image.save(output path with axes) output path with axes 3、抽图 提示词 Code block Markdown Copy 3. 随机从图片的坐标轴中，随机出5个图片的坐标。 沿着分割线，把图片从大图中取出（抽出来的图片，需要整齐的（水平）摆放在原始图片的下方，距离图片 30px的位置。同时确保图片之间有20px的间隙。保持原有的图片大小。）取出的部分用灰色进行填充。 效果展示 代码 Code block Markdown Copy import random from PIL import Image, ImageDraw Generate 5 unique random coordinates from the grid coordinates = [(x, y) for x in range(1, 7) for y in range(1, 7)] random coords = random.sample(coordinates, 5) Load the image with axes (to maintain the same dimensions) image with axes = Image.open('/mnt/data/6x6 grid illustration with axes.png') Parameters for cropping and drawing cell width = cell height = 100 Example values, please adjust to your actual grid cell size line width = y axis width = 10 Example values for the width of grid lines and y axis width Extract the individual images based on random coordinates and fill the original parts with gray extracted images = [] draw = ImageDraw.Draw(image with axes) for x, y in random coords: left = y axis width + (x 1) (cell width + line width) top = (y 1) (cell height + line width) right = left + cell width bottom = top + cell height Crop the image cropped image = image with axes.crop((left, top, right, bottom)) extracted images.append(cropped image) Fill the extracted part with gray in the main image draw.rectangle([left, top, right, bottom], fill=(128, 128, 128)) Create a new image to accommodate the extracted images below the main image start x = y axis width start y = image with axes.height + 30 30px below the main image total width = y axis width + 6 cell width + 5 line width original total width space between images = 20 total extracted width = 5 cell width + 4 space between images offset x = (total width total extracted width) // 2 Center the row of extracted images final image = Image.new('RGB', (total width, start y + cell height + 30), (255, 255, 255)) final image.paste(image with axes, (0, 0)) Paste the extracted images onto the final image current x = offset x for img in extracted images: final image.paste(img, (current x, start y)) current x += cell width + space between images Save the final result with corrections final output path corrected = '/mnt/data/final image with extracted and filled.png' final image.save(final output path corrected) final output path corrected 4、添加括号 提示词 Code block Markdown Copy 4. 在最下面5个抽出图片正下方中间的位置，添加“（ ）”，确保留出足够多的空间，以填写坐标，同时在括号下方再添加30px高度的空白区。 注意括号中间要留出5个空格的空间 效果展示 代码 Code block Markdown Copy Load the latest modified image final image = Image.open('/mnt/data/final image with extracted and filled.png') Parameters for the extra labels and spacing bracket width = font.getsize("( )")[0] bracket height = font.getsize("( )")[1] extra space below bracket = 30 Create a new image with additional space for brackets and extra space new image height = final image.height + bracket height + extra space below bracket new final image = Image.new('RGB', (final image.width, new image height), (255, 255, 255)) new final image.paste(final image, (0, 0)) Draw brackets and add space draw = ImageDraw.Draw(new final image) start y = final image.height + extra space below bracket // 2 Starting Y for brackets bracket text = "( )" Calculate positions for the brackets centered below each image current x = (total width total extracted width) // 2 for in range(5): bracket x = current x + (cell width // 2) (bracket width // 2) draw.text((bracket x, start y), bracket text, fill=(0, 0, 0), font=font) current x += cell width + space between images Save the updated image final bracketed path = '/mnt/data/final image with brackets.png' new final image.save(final bracketed path) final bracketed path 5、融合代码 Code block Markdown Copy from PIL import Image, ImageDraw, ImageFont import random Load the original image image path = '/path/to/your/image.png' original image = Image.open(image path) Constants for the grid and label setup num splits = 6 line width = 1 line color = (128, 128, 128) Gray color x axis height = 50 y axis width = 50 font size = 30 Calculate new dimensions width, height = original image.size cell width = width // num splits cell height = height // num splits new width = width + (num splits 1) line width new height = height + (num splits 1) line width extra space below bracket = 30 Create grid image grid image = Image.new('RGB', (new width, new height), (255, 255, 255)) grid image.paste(original image, (0, 0)) draw = ImageDraw.Draw(grid image) Draw the grid lines for i in range(1, num splits): x = i cell width + (i 1) line width draw.line([(x, 0), (x, new height)], fill=line color, width=line width) for i in range(1, num splits): y = i cell height + (i 1) line width draw.line([(0, y), (new width, y)], fill=line color, width=line width) Label the grid font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans Bold.ttf", font size) labelled image = Image.new('RGB', (grid image.width + y axis width, grid image.height + x axis height), (255, 255, 255)) labelled image.paste(grid image, (y axis width, 0)) draw = ImageDraw.Draw(labelled image) X axis and Y axis labels for i in range(1, 7): text x = y axis width + (i 1) cell width + cell width // 2 font.getsize(str(i))[0] // 2 text y = grid image.height + (x axis height // 2) (font.getsize(str(i))[1] // 2) draw.text((text x, text y), str(i), fill=(0, 0, 0), font=font) for i, letter in enumerate("ABCDEF"): text x = y axis width // 2 font.getsize(letter)[0] // 2 text y = (i cell height + cell height // 2) (font.getsize(letter)[1] // 2) draw.text((text x, text y), letter, fill=(0, 0, 0), font=font) Randomly select 5 cells and extract images coordinates = [(x, y) for x in range(1, 7) for y in range(1, 7)] random coords = random.sample(coordinates, 5) extracted images = [] for x, y in random coords: left = y axis width + (x 1) (cell width + line width) top = (y 1) (cell height + line width) right = left + cell width bottom = top + cell height cropped image = labelled image.crop((left, top, right, bottom)) extracted images.append(cropped image) draw.rectangle([left, top, right, bottom], fill=(128, 128, 128)) Place extracted images below the main image final image = Image.new('RGB', (labelled image.width, labelled image.height + cell height + x axis height + extra space below bracket), (255, 255, 255)) 3、抽图 提示词 效果展示 代码 4、添加括号 提示词 效果展示 代码 5、融合代码 三、提示词编写测试 一）初版提示词 python Display the image directly from IPython.display import display display(image) 二）迭代后提示词 python Display the image directly from IPython.display import display display(image) 三）效果展示 四、GPTs 使用链接 https://chatgpt.com/g/g kQYWBxTxO qia pian pin tu 五、总结 今天尝试着把Python处理图片的流程也拆的更细致了。然后把每段代码又合并成了一段代码。 因为这次的内容中，每次生成的图片大小基本相同，所以我们就不需要再增加过多的信息描述，直接要求使用合成的那一段代码即可。 好啦，写到这里我们今天的内容也结束啦，感谢大家的观看，也希望我的内容能够让大家喜欢，有所收获。感兴趣的小伙伴可以点个关注跟随我一起学习，观看更多往期文章。 下次见，我是景淮，祝你有个开心美好的一天 嘿，大家好呀，我是景淮，一个加拿大的程序员，沉迷 AI 不能自拔中。 最近总是很奇怪，就觉得自己没什么效率和目标。思前想后，可能还是现在写文章的同时，缺少了最开始那种感觉。 很多东西都玩了很多遍，所以好像缺少了些挑战。没有挑战也就反而没有了动力和激情。 思考ing，可能最近会多更新一下，找找节奏和感觉。 感觉自己很奇怪，很多时候要不是有事情解决不了，一般不会查查查，但是要是很长时间没有 Read in 又会陷入压抑的情绪中。 Emmmm 感觉自己还是多更新吧。 好啦，今天我们的孩子王系列内容主题如下 GPT 猜猜我是谁 本文会根据以下内容顺序进行： • 需求分析 • 分步实现需求 • 提示词编写测试 • GPTs 使用链接 • 总结 一、需求分析 在小时候，我们都玩过拼图游戏，那么拼图游戏对孩子到底有什么用呢？只是单纯的游戏吗？ 当然不止是游戏，或者说，任何游戏只要有了正确的引导，任何游戏都可以是对孩子有益的。 拿拼图游戏举例来说，首先拼图游戏有益于反战孩子的认知和情感相关的技能。 1. 认知发展：拼图能帮助孩子识别不同的颜色、形状和图案，通过这个过程，他们学习如何识别和组织视觉信息。此外，解决拼图时需要记忆哪些部分可以拼在一起，这有助于提高记忆力。 2. 问题解决能力：拼图是一种很好的问题解决训练。孩子们需要思考如何才能使不同的拼图块拼在一起，这训练了他们的逻辑思维和策略规划能力。 3. 手眼协调：拼图游戏中，孩子们需要观察，挑选合适的拼图块，并将它们放在正确的位置，这个过程可以锻炼手眼协调能力。 4. 耐心和毅力：拼图需要时间和耐心，尤其是那些较为复杂的拼图。孩子在拼图过程中学会了坚持和耐心，这对培养良好的学习态度和应对生活挑战非常重要。 5. 社交技能：当拼图作为一种群体活动时，孩子们会学习如何与其他人合作，分享拼图块，交流想法，从而提高他们的社交技能。 6. 自我满足感和成就感：完成拼图后，孩子们会感受到成就感和自我满足，这有助于增强他们的自信心。 1. 认知发展：拼图能帮助孩子识别不同的颜色、形状和图案，通过这个过程，他们学习如何识别和组织视觉信息。此外，解决拼图时需要记忆哪些部分可以拼在一起，这有助于提高记忆力。 2. 问题解决能力：拼图是一种很好的问题解决训练。孩子们需要思考如何才能使不同的拼图块拼在一起，这训练了他们的逻辑思维和策略规划能力。 3. 手眼协调：拼图游戏中，孩子们需要观察，挑选合适的拼图块，并将它们放在正确的位置，这个过程可以锻炼手眼协调能力。 4. 耐心和毅力：拼图需要时间和耐心，尤其是那些较为复杂的拼图。孩子在拼图过程中学会了坚持和耐心，这对培养良好的学习态度和应对生活挑战非常重要。 5. 社交技能：当拼图作为一种群体活动时，孩子们会学习如何与其他人合作，分享拼图块，交流想法，从而提高他们的社交技能。 6. 自我满足感和成就感：完成拼图后，孩子们会感受到成就感和自我满足，这有助于增强他们的自信心。 聊过拼图游戏的作用，然后我们就来一起设计游戏吧 一）拼图制作 关于拼图的制作，其实是很简单的一部分，我们只需要用户先给出一个拼图的主题。 我们根据主题生成一段拼图的描述。然后利用 Dalle 3 把对应的图画出来。 然后我们可以利用 Python 按照规定的规则对图片进行切割，如 4 4 ， 5 5 等 二）游戏设计 对于游戏的设计，抛开传统的拼图内容，我们把拼图弄的稍微简单一些，增加一些小的设计，比如增加类似坐标的原理。 分割图片后，随机抽出一些图片块，展示在图片下方，并标号。同时把原图抽出图片块的位置换成白色或灰色。 在原图上，按照分割的结果，对图片添加坐标编号。 最后，可以让孩子通过在下面的抽出图片的位置写上对应坐标的方式，复原图片。 三）工作流 二、分步实现需求 一）根据主题生成描述 提示词 效果展示 💡 在阳光明媚的一天，一群小学生在操场上开心地参加体育课。孩子们身穿五彩缤纷的运动服，有的在跳绳，有的在踢足球，还有的在玩接力棒。在他们的周围，绿色的草地和远处的蓝天白云形成了美丽的背景。教练和几位老师站在一旁，微笑着观看，偶尔给予指导和鼓励。这幅画面展现了孩子们的活力、合作与快乐，以及他们在游戏中展现出的纯真与友谊。 在阳光明媚的一天，一群小学生在操场上开心地参加体育课。孩子们身穿五彩缤纷的运动服，有的在跳绳，有的在踢足球，还有的在玩接力棒。在他们的周围，绿色的草地和远处的蓝天白云形成了美丽的背景。教练和几位老师站在一旁，微笑着观看，偶尔给予指导和鼓励。这幅画面展现了孩子们的活力、合作与快乐，以及他们在游戏中展现出的纯真与友谊。 💡 在雨天的公交站，一片温馨的场景展开。穿着彩色雨衣的孩子们欢快地跳着水坑，而几位老人和年轻人共用一把大伞，围坐在一起，相互分享笑容和故事。雨滴从伞尖滴落，与周围绿树的叶子轻轻碰撞，营造出一种宁静而美好的氛围。公交站牌下，一只流浪狗蜷缩在一角，一位善良的少女正蹲下来，轻轻地喂它吃食。 在雨天的公交站，一片温馨的场景展开。穿着彩色雨衣的孩子们欢快地跳着水坑，而几位老人和年轻人共用一把大伞，围坐在一起，相互分享笑容和故事。雨滴从伞尖滴落，与周围绿树的叶子轻轻碰撞，营造出一种宁静而美好的氛围。公交站牌下，一只流浪狗蜷缩在一角，一位善良的少女正蹲下来，轻轻地喂它吃食。 二）Dalle 3 绘画 提示词 效果展示 三）Python 处理图片 1、图片分割 提示词 效果展示 代码 2、坐标轴标注 提示词 效果展示 代码 效果展示（到次数了，重新画了一张）