image-beautifier 1.0.0

package/src/utils/backgroundConfig.js

@@ -0,0 +1,387 @@
+export default {
+    default_1: {
+        class: 'bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#6366f1', '#a855f7', '#ec4899'],
+        },
+    },
+    default_2: {
+        class: 'bg-gradient-to-r from-red-500 via-pink-500 to-violet-500',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#ef4444', '#ec4899', '#8b5cf6'],
+        },
+    },
+    default_3: {
+        class: 'bg-gradient-to-r from-violet-800 via-pink-600 to-orange-500',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#5b21b6', '#db2777', '#f97316'],
+        },
+    },
+    default_4: {
+        class: 'bg-gradient-to-r from-orange-400 to-rose-400',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#fb923c', '#fb7185'],
+        },
+    },
+    default_5: {
+        class: 'bg-gradient-to-r from-[#4284DB] to-[#29EAC4]',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#4284DB', '#29EAC4'],
+        },
+    },
+    default_6: {
+        class: 'bg-gradient-to-r from-[#fc00ff] to-[#00dbde]',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#fc00ff', '#00dbde'],
+        },
+    },
+    default_7: {
+        class: 'bg-gradient-to-br from-[#eeddf3] via-[#ee92b1] to-[#6330b4]',
+        fill: {
+            type: 'linear',
+            from: 'left',
+            to: 'right',
+            stops: ['#eeddf3', '#ee92b1', '#6330b4'],
+        },
+    },
+    solid_1: {
+        class: 'bg-transparent',
+        fill: {
+            type: 'solid',
+            color: '#ffffff00',
+        },
+    },
+    solid_2: {
+        class: 'bg-slate-400',
+        fill: {
+            type: 'solid',
+            color: '#94a3b8',
+        },
+    },
+    solid_3: {
+        class: 'bg-gray-400',
+        fill: {
+            type: 'solid',
+            color: '#9ca3af',
+        },
+    },
+    solid_4: {
+        class: 'bg-stone-400',
+        fill: {
+            type: 'solid',
+            color: '#a8a29e',
+        },
+    },
+    solid_5: {
+        class: 'bg-red-400',
+        fill: {
+            type: 'solid',
+            color: '#f87171',
+        },
+    },
+    solid_6: {
+        class: 'bg-orange-400',
+        fill: {
+            type: 'solid',
+            color: '#fb923c',
+        },
+    },
+    solid_7: {
+        class: 'bg-amber-400',
+        fill: {
+            type: 'solid',
+            color: '#facc15',
+        },
+    },
+    solid_8: {
+        class: 'bg-yellow-400',
+        fill: {
+            type: 'solid',
+            color: '#fbbf24',
+        },
+    },
+    solid_9: {
+        class: 'bg-lime-400',
+        fill: {
+            type: 'solid',
+            color: '#a3e635',
+        },
+    },
+    solid_10: {
+        class: 'bg-green-400',
+        fill: {
+            type: 'solid',
+            color: '#4ade80',
+        },
+    },
+    solid_11: {
+        class: 'bg-emerald-400',
+        fill: {
+            type: 'solid',
+            color: '#34d399',
+        },
+    },
+    solid_12: {
+        class: 'bg-teal-400',
+        fill: {
+            type: 'solid',
+            color: '#2dd4bf',
+        },
+    },
+    solid_13: {
+        class: 'bg-cyan-400',
+        fill: {
+            type: 'solid',
+            color: '#22d3ee',
+        },
+    },
+    solid_14: {
+        class: 'bg-sky-400',
+        fill: {
+            type: 'solid',
+            color: '#38bdf8',
+        },
+    },
+    solid_15: {
+        class: 'bg-blue-400',
+        fill: {
+            type: 'solid',
+            color: '#60a5fa',
+        },
+    },
+    solid_16: {
+        class: 'bg-indigo-400',
+        fill: {
+            type: 'solid',
+            color: '#818cf8',
+        },
+    },
+    solid_17: {
+        class: 'bg-violet-400',
+        fill: {
+            type: 'solid',
+            color: '#a78bfa',
+        },
+    },
+    solid_18: {
+        class: 'bg-purple-400',
+        fill: {
+            type: 'solid',
+            color: '#c084fc',
+        },
+    },
+    solid_19: {
+        class: 'bg-fuchsia-400',
+        fill: {
+            type: 'solid',
+            color: '#e879f9',
+        },
+    },
+    solid_20: {
+        class: 'bg-pink-400',
+        fill: {
+            type: 'solid',
+            color: '#f472b6',
+        },
+    },
+    solid_21: {
+        class: 'bg-rose-400',
+        fill: {
+            type: 'solid',
+            color: '#fb7185',
+        },
+    },
+    gradient_1: {
+        class: 'bg-gradient-to-br from-[#ff6432] from-12.8% via-[#ff0065] via-43.52% to-[#7b2eff] to-84.34%',
+        fill: {
+            type: 'linear',
+            from: 'top-left',
+            to: 'bottom-right',
+            stops: [
+                { offset: 0.12, color: '#ff6432' },
+                { offset: 0.44, color: '#ff0065' },
+                { offset: 0.84, color: '#7b2eff' },
+            ],
+        },
+    },
+    gradient_2: {
+        class: 'bg-gradient-to-br from-[#69eacb] from-0% via-[#eaccf8] via-48% to-[#6654f1] to-100%',
+        fill: {
+            type: 'linear',
+            from: 'top-left',
+            to: 'bottom-right',
+            stops: [
+                { offset: 0, color: '#69eacb' },
+                { offset: 0.48, color: '#eaccf8' },
+                { offset: 1, color: '#6654f1' },
+            ],
+        },
+    },
+    gradient_3: {
+        class: 'bg-gradient-to-br from-[#f9f047] to-[#0fd850]',
+        fill: {
+            type: 'linear',
+            from: 'top-left',
+            to: 'bottom-right',
+            stops: ['#f9f047', '#0fd850'],
+        },
+    },
+    cosmic_img_1: {
+        class: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_2: {
+        class: 'https://images.unsplash.com/photo-1604076913837-52ab5629fba9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1604076913837-52ab5629fba9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzfHxncmFkaWVudHxlbnwwfHx8fDE3MDMwNjAzNjh8MA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_3: {
+        class: 'https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDYwMzY4fDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDYwMzY4fDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_4: {
+        class: 'https://images.unsplash.com/photo-1618397746666-63405ce5d015?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1618397746666-63405ce5d015?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_5: {
+        class: 'https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzNnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzNnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDM3NjcwfDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_6: {
+        class: 'https://images.unsplash.com/photo-1564951434112-64d74cc2a2d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw0Nnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1564951434112-64d74cc2a2d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw0Nnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_7: {
+        class: 'https://images.unsplash.com/photo-1636990649778-fd699d27c875?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw1Mnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1636990649778-fd699d27c875?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw1Mnx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDMyNzM1fDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_8: {
+        class: 'https://images.unsplash.com/photo-1640177155742-835de7b2a9a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw5MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDU0Njg3fDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1640177155742-835de7b2a9a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw5MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDU0Njg3fDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_9: {
+        class: 'https://images.unsplash.com/photo-1523396206913-a003efa7861b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMTh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzEyMDMzOHww&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1523396206913-a003efa7861b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMTh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzEyMDMzOHww&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_10: {
+        class: 'https://images.unsplash.com/photo-1552152370-fb05b25ff17d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNjJ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1552152370-fb05b25ff17d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNjJ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_11: {
+        class: 'https://images.unsplash.com/photo-1635776063043-ab23b4c226f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyMjZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4MjI2NHww&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1635776063043-ab23b4c226f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyMjZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4MjI2NHww&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_12: {
+        class: 'https://images.unsplash.com/photo-1640963269654-3fe248c5fba6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNTZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4NDU3Nnww&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1640963269654-3fe248c5fba6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNTZ8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA4NDU3Nnww&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_13: {
+        class: 'https://images.unsplash.com/photo-1595131264179-84bb2f9e17b9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNjh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA2NzI3OXww&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1595131264179-84bb2f9e17b9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyNjh8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA2NzI3OXww&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_14: {
+        class: 'https://images.unsplash.com/photo-1642116876554-b17f937ee90b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNzV8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1642116876554-b17f937ee90b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNzV8fGdyYWRpZW50fGVufDB8fHx8MTcwMzA3ODE5Mnww&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    cosmic_img_15: {
+        class: 'https://images.unsplash.com/photo-1586455122341-927f2dec0691?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw3MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDQ3MjE1fDA&ixlib=rb-4.0.3&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1586455122341-927f2dec0691?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw3MHx8Z3JhZGllbnR8ZW58MHx8fHwxNzAzMDQ3MjE1fDA&ixlib=rb-4.0.3&q=80'
+        }
+    },
+    desktop_img_1: {
+        class: 'https://images.unsplash.com/photo-1511860810434-a92f84c6f01e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1511860810434-a92f84c6f01e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80'
+        }
+    },
+    desktop_img_2: {
+        class: 'https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80'
+        }
+    },
+    desktop_img_3: {
+        class: 'https://images.unsplash.com/photo-1671180881490-8af6e9c3eaf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1671180881490-8af6e9c3eaf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80'
+        }
+    },
+    desktop_img_4: {
+        class: 'https://images.unsplash.com/photo-1671549296089-88b3a6eb347e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1671549296089-88b3a6eb347e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80'
+        }
+    },
+    desktop_img_5: {
+        class: 'https://images.unsplash.com/photo-1668718031554-9c05b5d03750?&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&q=80',
+        fill: {
+            type: 'image',
+            url: 'https://images.unsplash.com/photo-1668718031554-9c05b5d03750?&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&q=80'
+        }
+    },
+};

package/src/utils/captureScreen.js

@@ -0,0 +1,28 @@
+export const captureScreen = async () => {
+    try {
+        const mediaStream = await navigator.mediaDevices.getDisplayMedia();
+        const video = document.createElement('video');
+        video.srcObject = mediaStream;
+        video.play();
+
+        // 等待视频帧稳定
+        await new Promise((resolve) => (video.onplaying = resolve));
+
+        // 创建canvas并绘制当前视频帧
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0);
+
+        // 获取屏幕截图
+        const screenshot = canvas.toDataURL('image/png');
+
+        // 停止媒体流
+        video.srcObject.getTracks().forEach((track) => track.stop());
+
+        return screenshot;
+    } catch (err) {
+        console.log('Error capturing screen:', err);
+    }
+};

package/src/utils/sizeConfig.js

@@ -0,0 +1,163 @@
+export default [
+    {
+        key: 'default',
+        title: 'Default',
+        lists: [
+            {
+                width: 1920,
+                height: 1080,
+                w: 16,
+                h: 9,
+            },
+            {
+                width: 1920,
+                height: 1280,
+                w: 3,
+                h: 2,
+            },
+            {
+                width: 1920,
+                height: 1440,
+                w: 4,
+                h: 3,
+            },
+            {
+                width: 1920,
+                height: 1536,
+                w: 5,
+                h: 4,
+            },
+            {
+                width: 1920,
+                height: 1920,
+                w: 1,
+                h: 1,
+            },
+            {
+                width: 1080,
+                height: 1350,
+                w: 4,
+                h: 5,
+            },
+            {
+                width: 1080,
+                height: 1440,
+                w: 3,
+                h: 4,
+            },
+            {
+                width: 1080,
+                height: 1620,
+                w: 2,
+                h: 3,
+            },
+            {
+                width: 1080,
+                height: 1920,
+                w: 9,
+                h: 16,
+            },
+        ],
+    },
+    {
+        key: 'instagram',
+        title: 'Instagram',
+        lists: [
+            {
+                title: 'Post',
+                width: 1080,
+                height: 1080,
+                w: 1,
+                h: 1,
+            },
+            {
+                title: 'Portrait',
+                width: 1080,
+                height: 1350,
+                w: 4,
+                h: 5,
+            },
+            {
+                title: 'Stroy',
+                width: 1080,
+                height: 1920,
+                w: 9,
+                h: 16,
+            },
+        ],
+    },
+    {
+        key: 'x',
+        title: 'X',
+        lists: [
+            {
+                title: 'Tweet',
+                width: 1200,
+                height: 675,
+                w: 16,
+                h: 9,
+            },
+            {
+                title: 'Cover',
+                width: 1500,
+                height: 500,
+                w: 3,
+                h: 1,
+            },
+        ],
+    },
+    {
+        key: 'youtube',
+        title: 'YouTube',
+        lists: [
+            {
+                title: 'Banner',
+                width: 2560,
+                height: 1440,
+                w: 16,
+                h: 9,
+            },
+            {
+                title: 'Thumbnail',
+                width: 1280,
+                height: 720,
+                w: 16,
+                h: 9,
+            },
+            {
+                title: 'Video',
+                width: 1920,
+                height: 1080,
+                w: 16,
+                h: 9,
+            },
+        ],
+    },
+    {
+        key: 'pinterest',
+        title: 'Pinterest',
+        lists: [
+            {
+                title: 'Long',
+                width: 1000,
+                height: 2100,
+                w: 10,
+                h: 21,
+            },
+            {
+                title: 'Optimal',
+                width: 1000,
+                height: 1500,
+                w: 2,
+                h: 3,
+            },
+            {
+                title: 'Square',
+                width: 1000,
+                height: 1000,
+                w: 1,
+                h: 1,
+            },
+        ],
+    },
+];