Google Summer of Code- Week 5&6 Midterm Evaluation

4 min readJul 10, 2023

In this article, I will share the progress for Week 5&6 for my contribution to Multi-channel support for caMicroscope as a part of Google Summer of Code 2023.

Also, the below article is all the work carried out before the Midterm evaluations.

Testing new Image Data

While building the algorithm I tried different datasets, but after finalising the dataset, I never tried the code on different microcell images. Since the Flask application is built and giving good results, now my focus is to work on different images and find the pattern to run my model to convert the user image into an RGB channel.

Pattern Recognition

Pattern Recognition is just a term that I have assigned for testing the different images. The image user before was in tiff format, so I collected more tiff file images and tried converting them into RGB.

The challenge here was most of the Images are in Grayscale images. Some images collected are in .mat files. Thus I have implemented a function that filters different formats and does the pre-processing before it is fed into the model. This was the extension to the Flask application to work on different images.

API Route fix

When it comes to visualizing large-scale TIFF files with high-resolution images, OpenSeaDragon emerges as an incredibly useful and versatile tool. OpenSeaDragon is an open-source JavaScript library that enables smooth and interactive zooming and panning of images, making it an excellent choice for navigating through extensive TIFF file collections.

In the previous week, I used the send_file method from Flask to display the image on the browser. Based on the feedback I had to integrate OpenSeaDragon to view the tiff images.

@app.route('/api/rgb/<filename>', methods=['GET'])
def convert_channel_api(filename):
    image_path = os.path.join(app.config['TEMP_FOLDER'], filename)
    image = Image.open(image_path)
    
    final_image = model.RGB(image)

    image_data = BytesIO()
    final_image.save(image_data, format='JPEG')
    image_data.seek(0)
    
    return image_data.getvalue()

Implementation of OpenSeaDragon in Python Flask

Also in Week 5, I used a direct encode URL inside the OpenSeaDragon object. Thus I had to build a custom API endpoint that calls the URL titleSources. Also, the mentor recommended implementing a Custom tile source.

A Custom Tile Source can be created via inline configuration by specifying a single function named getTileUrl, along with the required values for height and width. Optional values include tileSize, tileOverlap, minLevel, and maxLevel. Additionally, any default functions implemented by OpenSeadragon.TileSource can be overridden.

<body>
    <div id="openseadragon-viewer"></div>
    <script type="text/javascript">
        const viewer = OpenSeadragon({
            id: "openseadragon-viewer",
            prefixUrl: "{{ url_for('static', filename='openseadragon/images/') }}",
            tileSources: {
                type: "image",
                url: "{{ url_for('convert_channel_api', filename=filename) }}", 
                buildPyramid: true,
                height: 512*256,
                width:  512*256,
                tileSize: 256,
                minLevel: 8,
            },
            tiles: [{
                "scaleFactors": [ 1, 2, 4, 8, 16, 32 ],
                "width": 100
              }]
        });
    </script>
</body>

With its exceptional performance and seamless navigation capabilities, OpenSeaDragon empowers users to explore and analyze detailed imagery with ease and precision, unlocking new insights and discoveries in various domains.

Openslide and Deep Zoom Integration

Deep Zoom is a technology and technique used for displaying and interacting with high-resolution images, especially in web-based applications. It allows users to zoom in and out smoothly, revealing fine details of an image at various levels of magnification. Deep Zoom accomplishes this by dividing the image into multiple small tiles and dynamically loading only the necessary tiles as the user navigates and zooms in.

The installation for this is done, referring few tutorials on how OpenSlide and Deep Zoom work.

Install OpenSlide on Linux

Step 1:

pip install openslide-python

Step 2:

sudo apt-get install openslide-tools

Implementation of Deep Zoom and combining the Pattern Recognition code is the main focus in the Google Summer of Code final phase.