DEV Community: Mark Matute

Coloring Canvass Generator!

Mark Matute — Fri, 12 Apr 2024 22:45:16 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

Generate a printable coloring canvass in PDF format based on

any themes, genres powered by Artificial Intelligence.

Demo

https://illah-creatives.pages.dev/

Step 1

Step 2

Step 3

Sample outputs

Promt of Cyberpunk Motorcycle hero will generated this

Prompt of Lion, Bear, Wolf and Owl will generate this.

My Code

Web App
https://github.com/MarkMatute/illah-creatives

Microservices
https://github.com/MarkMatute/illah-creatives-text-generator
https://github.com/MarkMatute/illah-creatives-image-generator
https://github.com/MarkMatute/illah-creatives-art-assistant

Journey

I am currenlty in the journey of learning and exploring Machine Learning and Artificial Intelligence when I came accross the post. With this momentum I decided to pick a simple project that me or my family can use.

With this project that can generate almost unlimited pages of coloring books with any themes you want or based on who you are, or whatever preferences you have.

With this project, I learned alot about different type of models and how to leverage them. It also exposed me from what I do not know as of the moment, like proper prompting etc. Also opened doors for me to use Cloudflare more than its normal use case. The platform itself trully is cool! I am just proud to come up with this idea that surely some people can enjoy.

Tasks types used:

Text-To-Image
1. Theme to canvass cover image
2. Each themes to coloring page image
Text-Generation
1. Illah's chat assistant that focuses on generating themes for user
2. Cool canvass titles that matches context with generated themes
3. Cool names for generated canvass pages

Models used:

@hf/mistral/mistral-7b-instruct-v0.2
@cf/meta/llama-2-7b-chat-fp16
@cf/stabilityai/stable-diffusion-xl-base-1.0

Improvements for this project:

Parallel generation of each canvass page for faster processing
More tailored chat assistant, not only for generating themes but also for more tasks.
To add an image to image generation of canvasses

Multiple Models and/or Triple Task Types

Models used:

@hf/mistral/mistral-7b-instruct-v0.2
@cf/meta/llama-2-7b-chat-fp16
@cf/stabilityai/stable-diffusion-xl-base-1.0

Smarter Co-Workers, A Blessing

Mark Matute — Thu, 15 Feb 2024 23:24:02 +0000

Working with people who has higher level of intelligence can be a true blessing, having a great opportunity to grow and to be in the right direction.

Learning Opportunities

There is a lot of opportunity to learn and grow when working with smart individuals. Discussions alone with this people will always be a learning experience, seeking advice, observing problem solving approaches and being always heading the correct direction.

Motivation and Ambition

Having smarter co-workers can be a motivating factor for development. Seeing their achievements and excellence can inspire others to strive for higher standards. This is something I experienced, seeing my peers having very high standards, high skillset, showed me how big is a gap between where they are and where I am, this inspired me to strive, work hard to bring the gap closer, taking courses, certifications and just continuous learning and practice.

Working with smarter people is a blessing that can impact individual and collective success in work. Learning opportunities, innovative thinking, increased productivity, motivation contribute to a fulfilling professional experience. Embracing the presence of smarter colleagues can elevate your skills, and ultimately lead to a more successful career.

Keeping your Node.js environment up to date

Mark Matute — Mon, 30 Jan 2023 19:46:00 +0000

Upgrading a project's NodeJS version from 8.11 to 18.7 was a monumental task that greatly impacted the entire project. To prevent similar issues in the future, it is important to regularly maintain the libraries and the underlying NodeJS engine used.

Regular checking of packages

Staying on top of updates is key for a successful project. That's why I use the dynamic 'node-modules-browser' tool to compare my installed library versions to the latest ones. With its user-friendly HTML report and comprehensive library documentation, I'm always up-to-date and ready to tackle any challenge that comes my way.

Keeping packages updated

I streamline package updates with the handy npx command npm-check-updates -u --enginesNode. This command ensures that my libraries are compatible with the specified node version listed in my npmrc file. It's a quick and easy way to keep my packages up-to-date and ready for action.

Testing your application

Regular maintenance only ensures that libraries and the NodeJS engine are updated and not using outdated versions. End-to-end testing is still necessary to fully verify the effectiveness of the upgrade, as with any other task.

Disclaimer

[iOS Swift] - Adding Custom Fonts to your app

Mark Matute — Mon, 30 Jan 2023 01:44:11 +0000

For this example I will be adding Montserrat-Bold and Montserrat-Regular as custom font to my iOS app

Steps

Download the font files, Montserrat
Create directory Fonts and drag-n-drop the files to the directory, and on the pop up make sure to check copy files if needed
Register the custom fonts on Info.plist
Using the custom fonts on storyboards
Using the custom fonts on code



public static func montserratRegular(fontSize: CGFloat) -> UIFont {
        guard let customFont = UIFont(name: "Montserrat-Regular", size: fontSize) else {
            fatalError("""
                Failed to load the "Montserrat-Regular" font.
                Make sure the font file is included in the project and the font name is spelled correctly.
                """
            )
        }
        return customFont
    }

Disclaimer

Debugging NodeJS

Mark Matute — Mon, 30 Jan 2023 01:34:59 +0000

Use the built-in debugger
Node.js comes with a built-in debugger that can be used from the command line.

Use a Node.js debugger tool
There are several third-party debugger tools, such as node-inspector and Visual Studio Code, that can be used to debug Node.js applications.

Console logging
The console.log() method is a simple and effective way to debug Node.js applications by logging values of variables and expressions.

Using breakpoints
Breakpoints can be set in the code to pause the execution and inspect the state of the application at that point.

Heap snapshots
Heap snapshots are a great way to understand the memory usage of your application and identify potential memory leaks.

Error handling
Make sure to add proper error handling in the code to catch and log any errors that might occur during runtime.

Profiling
Node.js has built-in tools, such as the profiler, to help identify performance bottlenecks and optimize the application's performance.

Use a logging library
A logging library, such as Winston or Bunyan, can be used to log messages from the application and make it easier to debug.

Debugging in production
Debugging in a production environment can be challenging, but it can be done using techniques like remote debugging or using logs to recreate the issue.

Disclaimer

Share your principles?

Mark Matute — Tue, 17 Jan 2023 20:14:59 +0000

What I Follow

Depending on one's level of proficiency and availability, the amount of time and effort invested may vary. ⏰

1. Make it work 💡
It is imperative to first fulfill the necessary requirements, utilizing any means necessary, whether it be through quick and efficient methods or more elaborate and refined approaches. The most important aspect is that the solution is functional and serves its purpose, as a non-operational solution is of no value.

2. Make it right ✅
Once the basic requirements have been met, it is important to consider the long-term maintainability, legibility, and efficiency of the solution. Making the solution easy to understand, modify, and improve in the future allows for greater flexibility and adaptability. Additionally, optimizing the solution for performance and minimizing resource usage can enhance its overall effectiveness. However, it is important to note that this should only be done if time and resources permit, as the primary objective should always be to fulfill the basic requirements

3. Make it fast 🌪
Finally, after ensuring that the solution meets the necessary requirements and is maintainable, it is important to focus on optimizing performance. This can include implementing techniques to make the software run faster, running tests to ensure that it is functioning correctly, and analyzing metrics to identify areas for improvement. This step will help to ensure that the solution is reliable, efficient, and able to handle any anticipated load or usage.

Whats your principles?

How can I improve mine?

Disclaimer

[iOS Swift] - Setting up project without storyboard 📱

Mark Matute — Tue, 17 Jan 2023 02:06:11 +0000

Introduction

First step, to kickstart building iOS UI programmatically is to have at least 1 working ViewController working without story board.

So why would you want to build UI programmatically instead of using storyboard?

Greater control
When building UI programmatically, you have full control over the layout and behavior of your views. This allows for more flexibility and precision when designing your app's user interface.

Easier debugging
With programmatic UI, it's easier to trace the source of any issues or bugs since you have a clear view of the entire view hierarchy. This is in contrast to storyboards which can become complex and difficult to navigate, especially as the project scale up.

Easier to scale
Building UI programmatically can make it easier to scale your app and add new features. With a storyboard, it can become difficult to manage a large number of views and segues.

Easier to collaborate
Programmatic UI can make it easier for multiple developers to work on the same project, as the code can be easily shared and reviewed.

Setup

Step 1: Creating Project
Create a new single view app project in XCode,
Select Swift as language and Storyboard as interface

Yes, we will select storyboard as interface.

Step 2: Deleting the Main.storyboard

Step 3: Deleting Main.storyboard config entries
Search for "Main" in XCode

In the project settings, under the "General" tab, remove the reference to the Main storyboard file in the "Main Interface" field.

As well as in the Info.plist delete the entry for Main.storyboard

Step 4: Update the ViewController.swift

So that we can see the result on our emulator lets add a simple UILabel that says Hello, World in the center of the screen.

As stated from above, we will be managing our views programatically.

import UIKit

class ViewController: UIViewController {

    lazy private var sampleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Hello World!"
        label.textColor = UIColor.white
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.black
        self.view.addSubview(self.sampleLabel)
        self.setUpConstraints()
    }

    func setUpConstraints() {
        let sampleLabelConstraints = [
            self.sampleLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            self.sampleLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ]
        NSLayoutConstraint.activate(sampleLabelConstraints)
    }

}

Step 5: Updating SceneDelegate.swift
Registering the ViewController as the rootViewController

   func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(frame: windowScene.coordinateSpace.bounds)
        window?.windowScene = windowScene
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
    }

Step 6: Running the app in the emulator
Desired output should be this image.