Streamlit project: LEGO-style mosaic design workshop ~ a platform for creating personalized mosaic patterns

Complete source code download: download address

Mosaic Design Conversion Website Links: Visit Links

1 Introduction

在像素风正方形截取器的世界中，你可以将任何图片转化为令人惊叹的乐高风格图案。通过简单的步骤和自定义选项，创造出独特而充满个性的乐高马赛克图案。让我们一起探索这个引人入胜的项目吧！

Lego-inspired mosaics are a unique form of artistic expression that is widely loved on the web today. Whether it's classic LEGO figures or lifelike architectural models, these mosaics have engendered a cult following for their fine detail and light and shadow effects.

The blogger has continued the charm of this unique art style and developed the pixel style square interceptor project, aiming to bring Lego-style mosaic creation into everyone's life. With this project, you can turn any picture you like into a LEGO-style mosaic pattern to create a unique and one-of-a-kind personal creation.

Welcome to the project website: visit link

The pixel style square interceptor project provides easy and customizable steps, just a few simple steps and some customization options, you can create your own LEGO mosaic pattern. To get started, you simply upload an image of your choice, then use the customization options to adjust the details of the square area. Next, you can freely choose the number of pixels and effects of the mosaic pattern, and view the final creative result in real-time preview.

Our project is based on the Streamlit platform, which provides you with a simple and powerful user interface by integrating the powerful Lego mosaic drawing library. Whether you're a LEGO fan, an art lover, or someone who loves to be creative, this project will spark your imagination and unleash your artistic potential.

Come and click the link to start experiencing the wonderful journey of the pixel wind square interceptor! Let's create unique and personalized LEGO style mosaics together, bringing art into your life and creations!

2 Project overview

2.1 Project Background and Objectives

Pixel Square Cutter is an image processing based application designed to help users convert pictures into pixel style Lego patterns. Through this application, users can upload a picture, select a suitable square area to intercept, and convert the intercepted area into a Lego pixel style pattern. Users can also choose the specifications and filter effects of the Lego base plate according to their own preferences, so as to obtain different styles of Lego patterns.

2.2 Functions and Features

Based on the goal of realizing the pixel style square interceptor, the project has the following main functions and features:

• Image Upload: Users can upload their own images through the app as source images for conversion.
• Square Clipping: The app allows the user to select a square area by adjusting the slider, and crop the part of interest for conversion.
• Lego Pattern Generation: Based on the user-selected cutout area and the specifications of the Lego base plate, the app will convert the cutout area into a Lego pixel-style pattern.
• Filter effects: Users can choose from different filter effects such as blur, edge enhancement, emboss and outline to add special effects to the generated LEGO patterns.
• Export options: Users can export the resulting LEGO patterns and their pixel data for use in other apps or for further editing.

2.3 Technical realization

The implementation of pixel style square interceptor is mainly based on the following technologies and tools:

• Python programming language: The backend logic of the application uses the Python programming language.
• Image processing library Pillow: The Pillow library provides a wealth of image processing functions, including functions such as image interception, filter effects, image scaling and saving.
• Data processing library Pandas: The Pandas library is used to process and analyze pixel data, storing the color data of each pixel of the Lego pattern as a data frame.
• Web application framework Streamlit: The Streamlit framework is used to build an interactive web application interface, and realize user input and operation through components such as sidebars, sliders, and buttons.

2.4 Development plan

The development plan of the pixel wind square interceptor is roughly divided into the following stages:

1. Requirements analysis and design: Define the functions and features of the project, and conceive the interaction flow of the user interface.
2. Data processing and algorithm implementation: develop codes to realize functions such as image interception, Lego pattern generation, and filter effect application.
3. Interface design and front-end development: Use the Streamlit framework to build the user interface, and implement interactive functions such as uploading pictures, adjusting the interception area, and selecting the Lego base plate.
4. Testing and optimization: System testing and performance optimization to ensure application stability and responsiveness.
5. Publish and Deploy: Deploy the application to an accessible platform, enabling users to access and use it through a browser.

2.5 Expected outcomes

Through the development of pixel wind square interceptor, we expect to achieve the following results:

• A fully functional app that takes a user uploaded image, takes a square crop and converts the cropped area into a LEGO pixel-style pattern.
• User-friendly interface, through interactive components such as sliders and buttons, it is convenient for users to operate and select.
• Support options for Lego baseplates of different specifications and filter effects to meet users' individual needs for Lego patterns.
• The resulting LEGO pattern and its pixel data can be exported for use in other applications or further editing.
• The stability and responsiveness of the application, which can run smoothly on different devices and browsers.

2.6 Application scenarios

Pixel wind square interceptor can be applied to a variety of scenarios, including but not limited to:

• Make a personalized LEGO pixel-style avatar: Users can upload their own photos, select the appropriate cropping area and filter effect, and convert the photo into a LEGO pixel-style avatar for social media or personal information.
• Make LEGO pixel art: Art lovers can use this app to convert their own images or paintings into LEGO style for subsequent art creation and display.
• EDUCATIONAL AND ENTERTAINING USE: Students and enthusiasts can use the app for pixel style photo making, learning about image manipulation and creation, or sharing and entertaining with LEGO pixel style pictures.

Through the pixel style square clipper, users can easily convert their own pictures into Lego pixel style, and enjoy the creativity and fun brought by the fusion of Lego and pixel art.

3 User Guide

This chapter will provide you with a detailed guide to using the pixel style square interceptor to help you smoothly use the application for Lego pixel style pattern conversion.

3.1 Source Code Usage Guidelines

If you are a developer or wish to use and modify directly from the source, follow these steps:

• Clone or download the V3.0 source code of the application.
• Make sure your computer has installed Python 3.0 and above, and install the following necessary third-party libraries: Pillow, Pandas, and Streamlit.
• Open the command line interface and enter the directory where the source code is located.
• Install the required third-party libraries with the following command:

pip install Pillow pandas streamlit

• Once installed, run the application with the following command:

streamlit run app.py

• Open http://localhost:8501 in your browser to access the pixel wind square interceptor user interface.

3.2 User guide for ordinary webpage users

For general users, you don't need to install or modify the code, just follow the steps below to use the application:

1. Open the Pixel Wind Square Clipper web application. You can visit the specified URL or click on the link provided.
2. In the user interface, you will see a "Upload Image" button. Click this button, select the image file you want to convert and upload it.

3. After the image upload is complete, you will see the uploaded image displayed in the interface.
4. Use the sliders provided to adjust the size and position of the cropping area according to your needs. This will determine which parts the converted LEGO pattern will contain.
5. Once adjusted, the app will take a screenshot according to your selection.
6. Once the screenshot is complete, you can follow the instructions on the interface to select the LEGO base plate size, apply filter effects and export patterns, and obtain pixel data. ( 乐高底板规格数字越大图像会越清晰，但在实际搭建时的难度和时间会上升)

3.3 File saving

When using the pixelated square grabber, you can save the resulting lego pattern as an image file or get pixel data.

3.3.1 Export image file

1. Once the LEGO pattern is generated, you can choose to export it as an image file.
2. Click the "Export Scheme" button, select the save path and file name.
3. The application will save the pattern as an image file format you specify, such as PNG or JPEG.

3.3.2 Get pixel RGB data

1. If you need to get the color data of the LEGO pixel pattern, you can click the "Export Scheme" button.
2. The app will give you the color RGB data for each pixel of the LEGO pixel pattern.

3.4 Precautions

• When choosing the cropping area, please take care to choose a reasonable area to ensure the best conversion result of the LEGO pattern.
• When working with LEGO baseplate specifications, filter effects, and export options, make the appropriate selections based on your needs.

By following the above guidelines, you will be able to use the pixel square clipper smoothly to convert Lego pixel style patterns, and perform further processing, export and data acquisition operations according to your individual needs.

4 Implementation Details

Complete source code download: download address

In the fourth chapter, we will use the Streamlit library to create an interactive web application that implements the functionality of the pixel wind square interceptor. We will provide an interface that allows users to upload a picture and capture a square area on the picture according to their needs. Then, we will process the cropped square area to generate a Lego pixel style image.

4.1 Preparations

Before we start writing code, we need to install the required dependencies.

First, install the Streamlit library with the following command:

pip install streamlit

Then, install the Pillow library with the following command:

pip install pillow

4.2 Writing code

First, import the required libraries at the beginning of the code:

import streamlit as st
from PIL import Image

In the code, we import the streamlit and PIL libraries, streamlit is used to create the web application interface, and PIL is used for image processing.

Next, we define a function crop_square to intercept a square area:

def crop_square(image, left, upper, size):
    # 截取正方形区域
    right = left + size
    lower = upper + size
    cropped_image = image.crop((left, upper, right, lower))
    return cropped_image

This function takes an image object, the coordinates of the upper left corner and the size as parameters, and returns a cropped square image object.

In the main function, we start to create the Streamlit API to provide interactive functions for the user:

def main():
    # 设置页面的配置选项
    st.set_page_config(page_title="像素风正方形截取器", layout="wide")

    # 显示标题和说明文字
    st.title("像素风正方形截取器")
    st.write("上传一张图片，然后调整滑块来截取正方形区域")

We created the page's title and caption using the st.title and st.write functions.

Then, we create a sidebar that displays controls for user actions:

# 创建侧边栏
    st.sidebar.title("操作区域")
    uploaded_file = st.sidebar.file_uploader("上传一张图片", type=["jpg", "jpeg", "png"])

With the st.sidebar.title function, we display the title on the sidebar. Use the st.sidebar.file_uploader function to create a file uploader through which the user can select and upload a picture.

In the next step, we judge whether the user has uploaded an image, and if so, process it:

# 判断用户是否上传了图片
    if uploaded_file is not None:
        # 打开并读取上传的图片
        image = Image.open(uploaded_file)

        # 获取图片的大小
        width, height = image.size

        # 创建滑块控件，用于调整截取的参数
        left = st.sidebar.slider("左边界", 0, image.size[0], 0)
        upper = st.sidebar.slider("上边界", 0, image.size[1], 0)
        square_size = st.sidebar.slider("正方形区域大小", 1, min(image.size[0], image.size[1]), 100)

        # 调用crop_square函数截取正方形区域
        cropped_image = crop_square(image, left, upper, square_size)

In this code, we use the Image.open function to open and read the uploaded image, and then get the width and height of the image. Next, use the st.sidebar.slider function to create a slider control for adjusting the parameters of the interception.

After the user uploads the picture and adjusts the parameters, we call the previously defined crop_square function to capture a square area. Next, we need to process the intercepted square area to generate a Lego pixel-style picture.

      # 对截取的正方形区域进行处理，生成乐高像素风的图片
        # 这里省略处理的代码，具体的处理方法可以根据需求自行实现

        # 显示截取的正方形区域和处理后的图片
        st.subheader("原始图片")
        st.image(image, use_column_width=True)

        st.subheader("截取的正方形区域")
        st.image(cropped_image, use_column_width=True)

        st.subheader("乐高像素风图片")
        st.image(processed_image, use_column_width=True)

In the above code, we omitted the code for processing the intercepted square area. The specific processing method can be realized according to the requirements. For example, the functions in the image processing library can be used to adjust the image, filter effects and other processing.

Finally, we display the captions of the three images using the st.subheader function and the images using the st.image function. The use_column_width=True parameter can make the width of the picture adapt to the width of the page.

4.3 Running the application

After writing the above code, we can run the application.

Run the following command at the command line to start the application:

streamlit run your_script.py

Replace your_script.py with the filename where you saved your code.

Then, we can visit http://localhost:8501 in the browser to view the application interface, and upload pictures and adjust parameters.

Here 8501 is the default port of the Streamlit application. If the port is already occupied, you can use the –server.port parameter to specify an available port when starting the application.

4.4 Explanation of Streamlit knowledge points

In the code in this chapter, we use several of Streamlit's core features:

• The st.set_page_config() function is used to set configuration options for the page, such as title and layout.
• The st.title() and st.write() functions are used to display the title and text on the page.
• st.sidebar is used to create a sidebar, and the controls in the sidebar can be used for user interaction.
• The st.sidebar.file_uploader() function is used to create a file uploader through which the user can select and upload a picture.
• The st.sidebar.slider() function is used to create a slider control for adjusting the interception parameters.
• The st.subheader() function is used to display the title of a subsection.
• The st.image() function is used to display pictures.

Through the above Streamlit functions, we can easily create an interactive web application and realize the functions of intercepting, processing and displaying pictures.

5 Conclusion

This project aims to convert ordinary pictures into Lego pixel style pictures by applying Lego pixel style technology. By uploading pictures and adjusting parameters, users can preview and save the processed LEGO pixel wind pictures in real time on the web page.

In this project, we use Streamlit as a development framework, and use its concise API and interactive performance to quickly build an interactive web application. By calling the functions of the image processing library, we realized the image capture and processing functions, enabling users to generate Lego pixel-style images that meet their needs.

Users can deploy and run this project according to the source code usage guide, or directly use the online application we provide on ordinary web pages for image processing. After the processing is completed, the user can choose to export the image file and save it locally, or obtain the processed pixel data.

When using this project, please note the following:

• Make sure the format and dimensions of the image meet the requirements of the application.
• Adjust the interception and processing parameters as needed to obtain a satisfactory Lego pixel wind effect.

The expected outcome of this project is to provide users with a simple and easy-to-use Lego pixel wind image generation tool. Users can use the generated LEGO pixel style pictures for personal creation, social media sharing or other application scenarios.

LEGO pixel style pictures can be used in a wide range of application scenarios, such as artistic creation, personal photo editing, brand promotion, etc. Lego pixel style is unique and interesting, which can bring a different visual effect to the picture.