DEV Community: Flavio De Stefano

Convert a batch of images into Ghibli style using ChatGPT and macOS Automator

Flavio De Stefano — Sun, 13 Apr 2025 12:51:05 +0000

If you love the warm, dreamy visuals of Studio Ghibli films, here's a powerful automation trick: an AppleScript automation that lets you select multiple images from Finder, apply a Ghibli-style transformation using ChatGPT, and process them unattended — even overnight.

You can also use this script while working/using your Mac: the script will warn you when not to touch the keyboard or the mouse because it's working for you!

This setup uses native macOS tools like AppleScript, Automator, and Notification Center, and it respects API rate limits to avoid disruptions.

AppleScript & Automator

AppleScript is Apple’s native scripting language for automating actions across macOS apps. It can simulate user actions, trigger shell commands, and communicate with apps like Finder, Preview, and Automator. Automator is an application that can be used to run AppleScript.

About Rate Limiting

Rate limiting is a mechanism used by APIs and services like ChatGPT to prevent overuse or abuse.

It controls how many requests you can send in a given time frame. If you exceed these limits, ChatGPT may suspend your user or not process the request correctly.

To avoid this, the script includes a fixed delay of 180s between each image. This pause ensures each image is processed without hitting the rate limits.

⚠️ Do not reduce or remove this delay. If you try to speed things up, the script may break mid-process or get you temporarily blocked from uploading.

The script and the workflow

First of all, you need to install the web-app of ChatGPT from Chrome. When I tried to do this with the native ChatGPT macOS app, it wouldn't generate restyle of images correctly.

Therefore, just head to chat.com, and in the Chrome menu hit "Install Page as App"

Now, let's install the workflow into Automator:

You can download the workflow directly from this link - extract it and Automator will open; then Press Run.

And that's it - the script should go into each file, paste it into ChatGPT, generate the request and wait 3 minutes until next request.

Alternative installation

If you don't trust downloading semi-executable files into your system, you can create a new workflow manually.

Make sure as first step you add "Ask For Finder Items", then "Run AppleScript" and paste this code:

Using another style

The prompt you use is highly customizable. Just change that in the code to add some details or to make images into another completely different style.

How to correctly publish your Mac apps outside of the App Store

Flavio De Stefano — Fri, 11 Apr 2025 12:48:47 +0000

Distributing Mac apps outside of the App Store requires more than just building and zipping your .app.

Since macOS Catalina, Apple requires all apps to be notarized by Apple to run without warnings on users' machines. Notarization ensures the app is from a known developer and free of malicious code.

Without notarization, users will see a warning saying the app “can’t be opened because Apple cannot check it for malicious software.”

With proper notarization and signing, your app behaves like a first-class citizen on macOS, even outside the App Store.

Here’s a streamlined process to do it correctly:

Step 1: Archive Your App in Xcode

Open your project in Xcode and create an archive:

In the menu, go to Product > Archive.

After the archive builds, the Organizer window will open. Click "Distribute App" on the build you want to export, then click "Direct Distribution".

When it's done, click "Export", and save the app somewhere; you'll receive a signed .app.

Step 2: Create the notarized DMG

To simplify post-export steps, I wrote a script that takes your exported .app, packages it into a .dmg, submits it for notarization, and staples the result — all automatically.

Before doing anything, install the necessary tools:

brew install create-dmg

Now we want to export the credentials that you already have into Xcode to the keychain, so that other tools can use it:

xcrun notarytool store-credentials "AC_PASSWORD" --apple-id $EMAIL --team-id $TEAM_ID

Perfect - you can now use my create-my-dmg.sh script to create a DMG.

You can run it using:

create-my-dmg.sh YourMacApp.app

This will create a DMG like YourMacApp-1.2.0.dmg, correctly notarized and stapled.

Using C89 on a '80s Macintosh SE to solve Advent of Code 2023

Flavio De Stefano — Sun, 03 Dec 2023 13:50:30 +0000

For this year AdventOfCode, I want to try to solve some problems using an old Macintosh SE I have lying around and the ThinkC compiler.

My goal is to learn more about the old C89 syntax and also try to get as efficient as possible with memory and CPU so that even more complex problems can be solved in reasonable time.

Day 0

First of all, I had to resurrect the old Macintosh and make sure everything works correctly. With my surprise, the ThinkC compiler was already installed from 3 years ago and I managed to run a very quick "Hello world".

The IDE that comes with the ThinkC compiler, called ThinkC Project manager, it's surprisingly good for those years.

Then, I had to make sure I could still use my 1.4MB floppy disks with a modern MacBook. The TLDR is that old Macintoshs use HFS file systems and the support for this has been removed, therefore you can't just mount the floppy and see the files in the Finder of your new macOS Sonoma.

After playing a bit with macFUSE and not get anything working, I managed to simply mount the disk and copy the files using hfsutils:

brew install hfsutils

# Mount the floppy
sudo hmount /dev/disk6

# Copy the input data
sudo hcopy -a ~/Developer/aoc/2023/1/input.txt :1.txt

# Copy the source from the Macintosh
sudo hcopy -a :1.c ~/Developer/aoc/2023/1/main.c

I strangely could't open the input.txt on the Macintosh itself, but the C program I wrote is able to read the file correctly using fopen

Day 1 learnings

Declarations at the beginning of the scope

ANSI C89 requires variables to be declared at the beginning of a scope; this is not valid (syntax error on line 3):

FILE* fp = fopen("example.txt", "r");
if (fp == NULL) return;
char line[128];

snprintf doesn't exist

The safer version of sprintf to do string concatenation doesn't exists; no big deal, I don't really care about safety in this scenario.

I hit 32k limit with `int sum`

My int sum went negative as soon I hit the number 32k.

I thought that this CPU was 32bit, but something it telling me that it's rather 16bit.

Switching to unsigned long and also making sure I use printf("%lu", sum) (took 20m to realize I was still using %d) made it work.

Hey Siri, make coffee!

Flavio De Stefano — Thu, 21 Jan 2021 11:33:22 +0000

“my wife was tired of bringing me coffee in bed every morning. But I am too lazy (especially in the morning) to actually get up and make it. Therefore, I automated it.”

My goal was exactly the one described in the first sentence, I needed to automate the first coffee I get in the morning, ‘cause I can’t really do anything if I don’t get otherwise. Since I have a cheap Nespresso machine, it can’t be programmed to do so; therefore I decided to solve it using simple programming and iOS automation.

This is definitely not sci-fi, not even complex programming or electronic. But it works, and the solution is quite simple and brilliant in my opinion, so I thought I could share it so others may benefit from it.

What you need:

ESP8266 board (I use the NodeMCU; it's very cheap (5$) and it does the job)
A cheap servo motor (I use cheaps HXT900)

In theory, this is all you need; you could just write a simple sketch that will turn the motor at 8 AM and press the button.

I soon realized though that to make the most of it, your coffee shouldn’t be made every day (there could be days when you aren’t at home) and it shouldn’t be made every day at the same time (I don’t know about you, but I don’t wake up every day at the same time, and also 5m could make the difference between a hot coffee vs a cold one).

In my case, I every day end up drinking the coffee as soon I stop my alarm; that’s the moment when the button should be pressed; in order to do that, we can take advantage of some of the recent automation that Apple put in the latest iOS. I’m quite sure there is a similar concept in Android, but since I own an iPhone I’ll describe the procedure for this one.

Connect the servo

That's pretty straightforward; your servo motor should have 3 pins: 3V, GROUND, and the controller pin.

Connect these to your board, choose the controller pin and write it down; if you have a NodeMCU and the HXT900, you can use this schema:

Download the sketch and flash it

Download this sketch: https://github.com/kopiro/arduino/blob/main/Projects/ButtonPresser/ButtonPresser.ino to your workstation and open it.

I'm not gonna cover here how to configure your workstation on how to build Arduino sketches or how to install ESP8266 drivers, as you can find all resources here.

Before flashing it, you should modify the sketch and set WIFI_ENABLED to 1, WIFI_SSID and WIFI_PASS to reflect your network configuration, so that the board is able to connect to it.

Also, make sure you set the MDNS_ENABLED to 1, and MDNS_NAME to something that makes sense for you; this is how you can reach your board in your network without dealing with static DHCP IP allocation on your router.

Make sure you also change the SERVO_GPIO to be the GPIO number where you have connected your servo controller pin.

If you want to make sure you can update the board via OTA (over-the-air; without connecting the board via USB to the workstation), please also set OTA_ENABLED to 1 and set the OTA_PASS to something unique.

Once you have flashed your board, it should be accessible via the MDNS_NAME you choose in your browser.

This is a simple dashboard where you can play with the software to choose the right values based on your coffee machine, on how long, how far, and how many times the button should be pressed.

Specifically:

degree is a numeric value representing how many degrees the servo should turn. If you have put the button at 0 degree, something between 20 and 45 should do the job to press a button.
delay is the number of milliseconds the board should wait before lifting the servo back and turning it again to 0
times is how many times this “push” button operation should be repeated. This is quite useful in my case because I have to press once to switch on the coffee machine and twice to actually pour the coffee.
delaytimes is the number of milliseconds to wait between every “push” button operation

Play with these values until you are sure that the coffee machine is able to press the button properly, and store them for later.

What the sketch is really doing

Nothing fancy, actually.

It's simple exposing an HTTP server with a POST method called /api that accepts those parameters you played with before; when you hit this endpoint, it will simply turn the servo by the degree parameter specified.

const String method = server.arg("method");
int _degree = server.arg("degree").toInt();
int _delay = server.arg("delay").toInt();
int _times = server.arg("times").toInt();
int _delaytimes = server.arg("delaytimes").toInt();

if (method.equals("push")) {
  if (!_degree) _degree = 45;
  if (!_delay) _delay = 200;
  if (!_times) _times = 1;
  if (!_delaytimes) _delaytimes = 1000;

  for (int i = 0; i < _times; i++) {
    myservo.write(_degree);
    delay(_delay);
    myservo.write(0);
    if ((i + 1) != _times) {
      delay(_delaytimes);
    }
  }

  server.send(200, "text/plain", "OK");
  return;
}

If you make a request using cURL to that endpoint, you can test from your terminal:

curl http://buttonpresser.local/api -X POST --data "method=push&degree=20&times=2"

Make coffee every morning after you have stopped your alarm

This is the simplest and funniest part; we’re gonna just take advantage of the “Shortcut” app already available on your iOS device.

Create a new shortcut with the action of ”Get Contents of URL” and put these values:

You can now test this shortcut by saying to Siri, or just by pressing the button.

How to do the automation though?

That’s even simpler, go to the Automation tab, and select When my alarm has stopped > Run shortcut and select the shortcut you’ve previously created!

That’s all, for real... Happy morning coffee!

// Detect dark theme var iframe = document.getElementById('tweet-1350822814857777157-855'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1350822814857777157&theme=dark" }

How I built the SiriWaveJS library: a look at the math and the code

Flavio De Stefano — Mon, 03 Aug 2020 11:30:58 +0000

It was 4 years ago when I had the idea to replicate the Apple® Siri wave-form (introduced with the iPhone 4S) in the browser using pure Javascript.

During the last month, I updated this library by doing a lot of refactoring using ES6 features and reviewed the build process using RollupJS. Now I’ve decided to share what I've learned during this process and the math behind this library.

To get an idea of what the output will be, visit the live example; the whole codebase is here.

Additionally, you can download all plots drawn in this article in GCX (OSX Grapher format): default.gcx and ios9.gcx

The classic wave style

Initially, this library only had the classic wave-form style that all of you remember using in iOS 7 and iOS 8.

It’s no hard task to replicate this simple wave-form, only a bit of math and basic concepts of the Canvas API.

You’re probably thinking that the wave-form is a modification of the Sine math equation, and you're right... well, almost right.

Before starting to code, we’ve got to find our linear equation that will be simply applied afterward. My favorite plot editor is Grapher; you can find it in any OSX installation under Applications > Utilities > Grapher.app

We start by drawing the well known sin(x):

Perfecto! Now, let’s add some parameters (Amplitude [A], Time coordinate [t] and Spatial frequency [k]) that will be useful later (Read more at: https://en.wikipedia.org/wiki/Wave).

Now we have to “attenuate” this function on plot boundaries, so that for |x| > 2, the y values tends to 0. Let’s draw separately an equation g(x) that has these characteristics.

This seems to be a good equation to start with. Let’s add some parameters here too to smooth the curve for our purposes:

Now, by multiplying our f(x, …) and g(x, …), and by setting precise parameters to the other static values, we obtain something like this.

A = 0.9 set the amplitude of the wave to max Y = A
k = 8 set the spatial frequency and we obtain “more peaks” in the range [-2, 2]
t = -π/2 set the phase translation so that f(0, …) = 1
K = 4 set the factor for the “attenuation equation” so that the final equation is y = 0 when |x| ≥ 2

It looks good! 😍

Now, if you notice on the original wave we have other sub-waves that will give a lower value for the amplitude. Let’s draw them for A = {0.8, 0.6, 0.4, 0.2, -0.2, -0.4, -0.6, -0.8}

In the final canvas composition, the sub-waves will be drawn with a decreasing opacity tending to 0.

Basic code concepts

What do we do now with this equation?

We use the equation to obtain the Y value for an input X.

Basically, by using a simple for loop from -2 to 2 (the plot boundaries in this case), we have to draw point by point the equation on the canvas using the beginPath and lineTo API.

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.strokeStyle = 'white';

for (let i = -2; i <= 2; i += 0.01) {
   const x = _xpos(i);
   const y = _ypos(i);
   ctx.lineTo(x, y);
}

ctx.stroke();

Probably this pseudo-code will clear up these ideas. We still have to implement our _xpos and _ypos functions.

But… hey, what is 0.01???

That value represents how many pixels you move forward in each iteration before reaching the right plot boundary... but why 0.0.1, and what is the correct value?

If you use a really small value (< 0.01), you’ll get an insanely precise rendering of the graph but your performance will decrease because you’ll get too many iterations.

Instead, if you use a really big value (> 0.1) your graph will lose precision and you’ll notice this instantly.

You can see that the final code is actually similar to the pseudo-code: https://github.com/kopiro/siriwave/blob/master/src/curve.ts

Implement `_xpos(i)`

You may argue that if we’re drawing the plot by incrementing the x, then _xpos may simply return the input argument.

This is almost correct, but our plot is always drawn from -B to B (B = Boundary = 2).

So, to draw on the canvas via pixel coordinates, we must translate -B to 0 and B to 1 (simple transposition of [-B, B] to [0,1]); then multiply [0,1] and the canvas width (w).

_xpos(i) = w * [ (i + B) / 2B ]

Implement `_ypos`

To implement _ypos, we should simply write our equation obtained before (closely).

const K = 4;
const FREQ = 6;

function _attFn(x) {
    return Math.pow(K / (K + Math.pow(x, K)), K);
}

function _ypos(i) {
    return Math.sin(FREQ * i - phase) * 
        _attFn(i) * 
        canvasHeight *
        globalAmplitude * 
        (1 / attenuation);
}

Let’s clarify some parameters.

canvasHeight is Canvas height expressed in PX
i is our input value (the X)
phase is the most important parameter, let’s discuss it later
globalAmplitude is a static parameter that represents the amplitude of the total wave (composed by sub-waves)
attenuation is a static parameter that changes for each line and represents the amplitude of a wave

Phase

Now let’s discuss the phase variable: it is the first changing variable over time because it simulates the wave movement.

What does it mean? It means that for each animation frame, our base controller should increment this value. But to avoid this value throwing a buffer overflow, let’s modulo it with 2π (since Math.sin dominio is already modulo 2π).

phase = (phase + (Math.PI / 2) * speed) % (2 * Math.PI);

We multiply speed and Math.PI so that with speed = 1 we have the maximum speed (why? because sin(0) = 0, sin(π/2) = 1, sin(π) = 0, ....

Finalizing

Now that we have all code to draw a single line, we define a configuration array to draw all sub-waves and then cycle over them.

return [
    { attenuation: -2, lineWidth: 1.0, opacity: 0.1 },
    { attenuation: -6, lineWidth: 1.0, opacity: 0.2 },
    { attenuation: 4, lineWidth: 1.0, opacity: 0.4 },
    { attenuation: 2, lineWidth: 1.0, opacity: 0.6},

    // basic line
    { attenuation: 1, lineWidth: 1.5, opacity: 1.0},
];

The iOS 9+ style

Now things start to get complicated. The style introduced with iOS 9 is really complex and reverse engineering to simulate it’s not easy at all! I’m not fully satisfied with the final result, but I’ll continue to improve it until I get the desired result.

As previously done, let’s start to obtain the linear equations of the waves.

As you can notice:

We have three different specular equations with different colors (green, blue, red)
A single wave seems to be a sum of sine equations with different parameters
All other colors are a composition of these three base colors
There is a **straight line **at the plot boundaries

By picking again our previous equations, let’s define a more complex equation that involves translation. We start by defining again our attenuation equation:

Now, define h(x, A, k, t) function, that is the sine function multiplied for **attenuation function, in its absolute value:

We now have a powerful tool.

With h(x), we can now create the final wave-form by summing different h(x) with different parameters involving different amplitudes, frequency, and translations. For example, let’s define the *red curve * by putting random values.

If we do the same with a green and blue curve, this is the result:

This is not quite perfect, but it could work.

To obtain the specular version, just multiply everything by -1.

In the coding side, the approach is the same, we have only a more complex equation for _ypos.

const K = 4;
const NO_OF_CURVES = 3;

// This parameters should be generated randomly
const widths = [ 0.4, 0.6, 0.3 ];
const offsets = [ 1, 4, -3 ];
const amplitudes = [ 0.5, 0.7, 0.2 ];
const phases = [ 0, 0, 0 ];

function _globalAttFn(x) {
    return Math.pow(K / (K + Math.pow(x, 2)), K);
}

function _ypos(i) {
    let y = 0;
    for (let ci = 0; ci < NO_OF_CURVES; ci++) {
        const t = offsets[ci];
        const k = 1 / widths[ci];
        const x = (i * k) - t;

        y += Math.abs(
            amplitudes[ci] * 
            Math.sin(x - phases[ci]) * 
            _globalAttFn(x)
        );
    }

    y = y / NO_OF_CURVES;
    return canvasHeightMax * globalAmplitude * y;
}

There’s nothing complex here. The only thing that changed is that we cycle NO_OF_CURVES times overall pseudo-random parameters and we sum all y values.

Before multiplying it for canvasHeightMax and globalAmplitude that give us the absolute PX coordinate of the canvas, we divide it for NO_OF_CURVES so that y is always ≤ 1.

Composite operation

One thing that actually matters here is the globalCompositeOperation mode to set in the Canvas. If you notice, in the original controller, when there’s an overlap of 2+ colors, they’re actually mixed in a standard way.

The default is set to source-over, but the result is poor, even with an opacity set.

You can see all examples of vary **globalCompositeOperation **here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

By setting globalCompositeOperation to ligther, you notice that the intersection of the colors is nearest to the original.

Build with RollupJS

Before refactoring everything, I wasn’t satisfied at all with the codebase: old prototype-like classes, a single Javascript file for everything, no uglify/minify and no build at all.

Using the new ES6 feature like native classes, spread operators and lambda functions, I was able to clean everything, split files, and decrease lines of unnecessary code.

Furthermore, I used RollupJS to create a transpiled and minified build in various formats.

Since this is a browser-only library, I decided to create two builds: a UMD (Universal Module Definition) build that you can use directly by importing the script or by using CDN, and another one as an ESM module.

The UMD module is built with this configuration:

{
    input: 'src/siriwave.js',
    output: {
        file: pkg.unpkg,
        name: pkg.amdName,
        format: 'umd'
    },
    plugins: [
        resolve(),
        commonjs(),
        babel({ exclude: 'node_modules/**' }),
    ]
}

An additional **minified UMD module **is built with this configuration:

{
    input: 'src/siriwave.js',
    output: {
        file: pkg.unpkg**.replace('.js', '.min.js')**,
        name: pkg.amdName,
        format: 'umd'
    },
    plugins: [
        resolve(),
        commonjs(),
        babel({ exclude: 'node_modules/**' }),
        **uglify()**
    ]
}

Benefiting of UnPKG service, you can find the final build on this URL served by a CDN: https://unpkg.com/siriwave/dist/siriwave.min.js

This is the “old style Javascript way” — you can just import your script and then refer in your code by using SiriWave global object.

To provide a more elegant and modern way, I also built an ESM module with this configuration:

{ 
    input: 'src/siriwave.js',
    output: { 
        file: pkg.module, 
        format: 'esm'
    }, 
    plugins: [ 
        babel({ exclude: ‘node_modules/**’ })
    ]
}

We clearly don’t want the resolve **or **commonjs RollupJS plugins because the developer transplier will resolve dependencies for us.

You can find the final RollupJS configuration here: https://github.com/kopiro/siriwave/blob/master/rollup.config.js

Watch and Hot code reload

Using RollupJS, you can also take advantage of rollup-plugin-livereload and rollup-plugin-serve plugins to provide a better way to work on scripts.

Basically, you just add these plugins when you’re in “developer” mode:

import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';

if (process.env.NODE_ENV !== 'production') {
    additional_plugins.push(serve({ open: true, contentBase: '.' }));
    additional_plugins.push(livereload({ watch: 'dist' }));
}

We finish by adding these lines into the package.json:

"module": "dist/siriwave.m.js",
"jsnext:main": "dist/siriwave.m.js",
"unpkg": "dist/siriwave.js",
"amdName": "SiriWave",
"scripts": {
    "build": "NODE_ENV=production rollup -c",
    "dev": "rollup -c -w"
},

Let’s clarify some parameters:

module / jsnext:main - path of dist ESM module
unpkg - path of dist UMD module
amdName name of the global object in UMD module

Thanks a lot RollupJS!

Hope that you find this article interesting, see you soon! 😎

How to easily run any Linux tool on any machine

Flavio De Stefano — Thu, 30 Jul 2020 10:41:56 +0000

Have you ever encountered a situation like the ones below?

Situation 1: You’re on your Linux workstation, and there is a PHP code that you must execute. But this code only runs under PHP 7, and your workstation only has PHP 5.

Situation 2: You’re working on your MacBook laptop, and you desperately need your sqlmap tool from your Kali Linux distribution. But you don’t have access to your Virtual Machine.

Situation 3: You’re on your Windows PC, and you immediately need an NGINX server that serves your static files from a directory.

Situation 4: No matter which platform, you have to start your Node.js 10 project. But you don’t have Node.js installed on your platform.

Or, in general, have you ever been a situation like this:

Situation X: you are on one platform, and you immediately need a specific Linux tool, without altering your configuration or installing additional software.

All these situations can be easily solved with a single tool you may have already heard about. It works without messing up your computer by installing additional software, or editing configurations that worked for a long time.

Docker is an OS-level virtualization system. It can potentially run any binary you have in mind. Furthermore, it can run it in an isolated system, so it can’t touch your files and your precious working configurations.

All you need is for someone to have already containerized your binary so that you can simply download it as an image. There are already a ton of Docker-built images out there waiting for you.

Docker does do more than this. It is a platform for developers and system administrators to develop, deploy, and run applications with containers. If you use it only to run your preferred binary, you’re using 1% of its features.

But let’s start from the beginning.

You can install Docker on your machine by clicking this link and selecting your platform from left menu. Then, follow the guide.

Once you have installed Docker, open your preferred Terminal or Command Prompt.

Basic concepts

First of all, let’s test if your Docker configuration is working correctly. From the terminal:

$ docker --version
Docker version 18.03.0-ce, build 0520e24

If Docker is up and running, you should see your version number.

All you need now is the docker run command.

The first thing to know is the name of the image you want to use. For official images, you usually have the name of the binary with no additions.

For example, in the case of PHP, the image name is simply php. And what about the version? Simple as well, just add the version number (e.g., 7).

Now let’s run our first container.

Situation 1

You’re on your Linux workstation, and there is a PHP code that you must execute. But this code only runs under PHP 7, and your workstation only has PHP 5.

Ok, now let’s imagine we have this simple code. It only works under PHP 7, because of the spaceship** **operator:

<?php echo 1 <=> 0;

How we can execute this code with Docker? Let’s build our docker run command.

$ docker run -it php:7
*Interactive shell
php > echo 1<=>0;
1

Yes — that’s all we need!

The extra part is the -it flag, but that’s not difficult. Since we are in the interactive shell, it simply specifies that this container should:

-t (—tty): allocate a pseudo-TTY
-i (—interactive): keep STDIN open, even if not attached

You should use them most of the time, with some exceptions.

Situation 2

You’re working on your MacBook laptop, and you desperately need your sqlmap tool from your Kali Linux distribution. But you don’t have access to your Virtual Machine.

Unfortunately, sqlmap doesn’t have an official simple image name. But maybe someone else has created an image. Let’s search for it.

$ docker search sqlmap
    NAME                     DESCRIPTION                                     STARS               OFFICIAL            AUTOMATED
    paoloo/sqlmap            Dockered sqlmap. Build instructions: https:/…   6
    k0st/alpine-sqlmap       sqlmap on alpine (size: ~113 MB)                3                                       [OK]
    jdecool/sqlmap           sqlmap (Automatic SQL injection) in a contai…   2                                       [OK]
    harshk13/kali-sqlmap     Kali Linux base image with Sqlmap               1
    marcomsousa/sqlmap       Simple image that execute Automatic SQL inje…   1                                       [OK]
....

We have several choices. This can happen often. For most cases, the image should be the first one (or the one with the greater star count).

Let’s use it.

$ docker run -it paoloo/sqlmap --url [http://localhost](http://localhost)
             _
     ___ ___| |_____ ___ ___  {1.0.9.32#dev}
    |_ -| . | |     | .'| . |
    |___|_  |_|_|_|_|__,|  _|
          |_|           |_|   [http://sqlmap.org](http://sqlmap.org)

[!] legal disclaimer: Usage of sqlmap for attacking targets without prior mutual consent is illegal. It is the end user's responsibility to obey all applicable local, state and federal laws. Developers assume no liability and are not responsible for any misuse or damage caused by this program.
...

All arguments that are after [docker run -it {image}]** **are passed to the binary executed in Docker, which is sqlmap in this case.

Easy enough, right? Yes, but there is a con.

sqlmap writes log files onto the disk in the ~/.sqlmap path. But since Docker containers run in an isolated environment, we lose everything!!

This is a feature, but in this case represents a bug for us — let’s fix it.

To enable persistence so that we don’t lose that log file, we have to create a bind mount between our workstation (host) and the Docker container.

Let’s decide that our host bind mount directory is /tmp/sqlmap. This should be an empty directory created only for this purpose!

$ docker run -it -v \
   /tmp/sqlmap:/root/.sqlmap \
   paoloo/sqlmap \
   --url [http://localhost](http://localhost)

With the -v option we’ll create a bind mount. The first argument is the host path, and the second is the path on the container that we want to map.

And, in fact, everything has been saved — including our reports.

Situation 3

You’re on your Windows PC, and you immediately need an NGINX server that serves your static files from a directory.

As you may have noticed, the first time you run docker run, it downloads the images from the Docker Hub.

This could be hundreds of hundreds gigabytes. This is because we downloaded the tag latest of the image (the default).

But most images have also an ‘alpine’ version of the same image. It uses Linux Alpine OS. This is an optimized version of Linux, which occupies about 130MB.

Let’s use it in this situation. We know that image name upfront is nginx (since it is an official image).

So the final image name will be nginx:alpine. If you want a specific version (such as 1.14), use nginx:1.14-alpine.

You may have more questions. How do we know which directory the NGINX container uses to serve our files? How do we know which port it exposes?

Luckily, the answers to all your questions are in the Docker Hub.

So, to recap:

We have to share our directory to serve into the container. Again, this can be done using bind mounts: -v "$(pwd):/usr/share/nginx/html"
By adding :ro at the end, we are sure that container uses our files in read-only mode.
We must bind the port exposed by the container to the host, and then communicate via TCP on our host: -p 80:80

$ docker run \
   -v $(pwd):/usr/share/nginx/html:ro \
   -p 80:80 \
   nginx:alpine

Situation 4

No matter which platform, you have to start your Node.js 10 project. But you don’t have Node.js installed on your platform.

Perhaps you now understand how it works. Here, we have to share our content and bind ports.

However, we don’t know the container working directory. Instead, we’re gonna explicitly set it with the -w flag to a custom directory of our choice. For example, you might choose/src — just don’t override an existing directory!

$ docker run \
   -p 3000:3000 \
   -v $(pwd):/src \
   -w /src \
   node:10-alpine \
   node main.js

Simple and powerful enough?

Additionally, do you want a ‘shortcut’ to just execute binaries without searching for third-party images?

Why don’t you try my simple tool DR?

I hope that you’re gonna use Docker for all your future binaries! :)

How to install Kali on a USB stick with pure EFI boot on a Mac (and with virtualization via USB on Virtualbox)

Flavio De Stefano — Thu, 30 Jul 2020 10:24:16 +0000

This tutorial is for everyone who wants a USB stick with a full Kali installation to use with your Mac(s). This is not intended to perform a Live Kali installation with persistence.

The problem when you perform a Kali installation on a USB stick is that Kali partitions the disk with the VFAT file system. Mac OS only recognizes HFS+ partitions along with some files needed for it.

So, you need:

Your Mac
A USB stick with Kali ISO installer
A target USB stick, SD card or an SSD external drive where you’re going to install Kali (16GB and USB 3.0 recommended)

This tutorial was heavily inspired by this tutorial with proper fixes for Kali. https://medium.com/@mmiglier/ubuntu-installation-on-usb-stick-with-pure-efi-boot-mac-compatible-469ad33645c9

USB Live installation

First of all, install Kali on a USB stick by following this tutorial. I’m not gonna bother you on how to proceed on this step, but start here:

sudo dd if={KALI_ISO.iso} of=/dev/{USB} bs=1m

When you’re ready, reboot your Mac. Insert both your USB sticks, then press ALT and select the EFI boot to start the Live installer.

Kali installer will ask you different questions about your timezone and keyboard layout.

Proceed until it asks you to partition disks, here select: Manual. Then select your USB target drive (where you want to install Kali). You can recognize by various factors, for example by its size. Click Continue: this will partition your drive.

Now, back again to the same screen and select the FREE SPACE under the USB target drive. Click Continue and select Automatically partition the free space. Follow the recommended option. Then click on Finish partitioning and write the change to disk.

The installation process now will copy data to disk. Wait until it finishes (this is gonna take ~30 minutes).

Boot from GRUB Live

Once finished, your Mac will reboot and you have to press ALT again. Select EFI boot again.

What we have to do now is to load our installed Kali system via Live GRUB, because our installed system doesn’t have a recognizable boot-loader by MacOS.

Once GRUB is loaded, press c to get the GRUB command-line-interface.

Now you have to understand in which HD is your Kali installation. To do this, when GRUB CLI is loaded, type ls; eject your USB stick and type ls gain.

grub> ls
(memdisk) (hd0) (hd1) (hd1,gpt3) (hd1, gpt2) (hd1,gpt1) ...

You’ll notice that an hd{X} disappeared: that is your drive. Now you have to find your gpt. Probably it’s the gpt2 but just to be sure, type:

grub> ls (hdX,gpt2)/boot/grub
unicode.pf2 ...

If the command says unicode.. it’s the correct gpt; try other **gpts* otherwise. Now find your UUID of the partition, and annotate it.

grub> ls -l (hdX},gpt{X})
Partition hd2,gpt2: Filesystem type ext* 〈...snip...〉 UUID **e86c20b9-83e1-447d-a3be-d1ddaad6c4c6** - Partition start at [...]

Now we can set the parameters to GRUB to boot (use the tab key to use autocomplete):

grub> set root=(hd{X},gpt{X})
grub> linux /boot/vmlinuz〈...tab here!...〉.efi.signed root=UUID=〈the UUID〉
grub> initrd /boot/initrd〈...tab here!...〉
grub> boot

This should boot your Full Kali Installation using the Live GRUB. You could differentiate from the Live environment by the password it recognizes during the login process.

Fixing the EFI partition

Once you’re logged in in your Kali installation, open the Terminal and type:

fdisk -l

and find your drive.

Now, open gdisk (installed by default on Kali) to partition the drive (be very careful here):

$ gdisk /dev/sd{X}
GPT fdisk (gdisk) version 1.0.1

Partition table scan:
  MBR: hybrid
  BSD: not present
  APM: not present
  GPT: present

Found valid GPT with hybrid MBR; using GPT.

Command (? for help):

Now we have to:

delete that EF00 partition
create a new HFS+ once in its place

Command (? for help): p
Disk /dev/sdd: ...

[...]

Number  Start (sector)  End (sector)  Size     Code   Name
   1         2048         1050623  512.0 MiB   EF00   EFI System Partition

[...]

Just leave defaults values in the sector phase

Current type is 'Linux filesystem'
Hex code or GUID (L to show codes, Enter = 8300): AF00
Changed type of partition to 'Apple HFS/HFS+'

Command (? for help): w

Final checks complete. About to write GPT data. THIS WILL OVERWRITE EXISTING PARTITIONS!!

Do you want to proceed? (Y/N): Y

OK; writing new GUID partition table (GPT) to /dev/sdd.
Warning: The kernel is still using the old partition table.
The new table will be used at the next reboot.
The operation has completed successfully.

Now we have an unformatted HFS+ partition. To format, we need some tools; but to obtain these tools we need to add the Debian source-list to apt.

echo "deb http://ftp.debian.org/debian unstable main contrib non-free" > /etc/apt/sources.list.d/debian.list && \
apt update && \
apt install hfsprogs

We can format that partition:

mkfs.hfsplus /dev/sd{X}1 -v Kali

Now we have to edit the /etc/fstab file:

gedit /etc/fstab

This will launch Gedit. In this file, localize these lines:

# /boot/efi was on /dev/sd{X}1 during installation
UUID={XXXXXXX} /boot/efi vfat defaults 0 1

and delete them.

Now, unmount the boot partition, localizing it using:

mount | grep /boot/efi
umount /dev/sd{Y}1

Then run this to add the necessary entries to your fstab file:

echo "UUID=$(blkid -o value -s UUID /dev/sd{X}1) /boot/efi auto defaults 0 0" >> /etc/fstab

Now we have to reinstall GRUB so it can use the newly formatted HFS+ partition for its EFI data:

mkdir -p /boot/efi/EFI/Kali
echo "This file is required for booting" > /boot/efi/EFI/Kali/mach_kernel
echo "This file is required for booting" > /boot/efi/mach_kernel
grub-install --target x86_64-efi --boot-directory=/boot --efi-directory=/boot/efi --bootloader-id=Kali

We then need to “bless” the bootloader code, so that the Mac bootloader will boot it. To do that we need hfsbless binary that is not available via apt. No problem, just clone the repository and build:

cd /root
git clone https://github.com/detly/mactel-boot
cd mactel-boot
make

Then bless:

./hfs-bless /boot/efi/EFI/Kali/System/Library/CoreServices/boot.efi

The final step is to create the grub configuration:

sed -i 's/GRUB_HIDDEN/#GRUB_HIDDEN/g' /etc/default/grub
sed -i 's/GRUB_TIMEOUT=10/GRUB_TIMEOUT=0.1/' /etc/default/grub
grub-mkconfig -o /boot/grub/grub.cfg

Perfecto! Now reboot and you should see your USB stick in the Mac bootloader by pressing ALT.

Virtualizing the USB via Virtualbox

If you ever need to boot this USB stick via Virtualbox (on Mac OSX), there is a simple trick to do that.

First of all, you’ve to create a VMDK disk that points to the sectors of your USB stick. So, let’s identify that disk:

diskutil list
    /dev/disk0 (internal):
       #:                       TYPE NAME                    SIZE       IDENTIFIER
       0:      GUID_partition_scheme                         500.3 GB   disk0
       1:                        EFI EFI                     314.6 MB   disk0s1
       2:                 Apple_APFS Container disk1         499.3 GB   disk0s2

    /dev/disk1 (synthesized):
       #:                       TYPE NAME                    SIZE       IDENTIFIER
       0:      APFS Container Scheme -                      +499.3 GB   disk1
                                     Physical Store disk0s2
       1:                APFS Volume Macintosh HD            222.0 GB   disk1s1
       2:                APFS Volume Preboot                 22.4 MB    disk1s2
       3:                APFS Volume Recovery                519.9 MB   disk1s3
       4:                APFS Volume VM                      3.2 GB     disk1s4

    /dev/disk3 (external, physical):
       #:                       TYPE NAME                    SIZE       IDENTIFIER
       0:      GUID_partition_scheme                        *32.0 GB    disk3

In our case, it is **/dev/disk3. **Let’s unmount before proceeding:

diskutil unmountDisk /dev/disk{X}

With VirtualBox installed, run:

sudo VBoxManage internalcommands createrawvmdk -filename ~/Kali.vmdk -rawdisk /dev/disk{X}
chmod 777 ~/Kali.vmdk
chmod 777 /dev/disk{X}

Perfecto. Now, run Virtualbox UI and create a new machine with the following settings:

When VirtualBox asks you for a disk, let’s point to that VMDK created before:

Before starting up the machine, let’s go to Settings and adjust your process counts, video and memory.

The important things are to set Enable EFI **under **System > Motherboard.

This will allow you to boot via EFI. Now start the virtual machine and immediately press F12.

Select Boot Maintenance Manager:

Select Boot from file:

Then select {SATA_DRIVE} > EFI > Kali > System > Library > CoreServices > boot.efi

And, voilà:

Stay tuned :)

Kata resolution: Next bigger number with the same digits

Flavio De Stefano — Thu, 30 Jul 2020 10:09:00 +0000

I would like to share with you my solution of a Kata on CodeWars.

This is the link to the kata problem: http://www.codewars.com/kata/next-bigger-number-with-the-same-digits

I solved it using Javascript, but the algorithm I created is (of course) extendable to all other programming languages.

The problem

You have to create a function that takes a positive integer number and returns the next bigger number formed by the same digits.

So, just to be clear, let me give you some examples:

next bigger of 12 is 21
next bigger of 513 is 531
next bigger of 2017 is 2071
next bigger of 59884848459853 is 59884848483559

If no bigger number can be composed using those digits, you have to return -1.

How I approached

Initially, I totally misunderstood the problem, thinking that I should find the biggest number of the same digits… so I simply wrote:

function nextBigger(n) {
   return +String(n).split('').sort().reverse().join('');
}

It would be all too easy.

Therefore, I took paper & pencil and I just started writing random numbers.

I watched for 2–3 minutes, and I realized that:

there is a left part that must be the same (because we want the next bigger number).
there is a right part that has to change, sorting it.
there is a pivot that is between the two parts and it just increments the number to reach the next.

So, the algorithm consists of three parts.

Find the pivot and split the parts

To find the pivot, we read the number from right to left, until we find a digit that is bigger than the previous one.

For number 21581957621
2158195 <-- here --> 7621

In this case 5 is the pivot, because 7 > 5.

The left part is 215819, the right part is 7621.

Find the substitute for the pivot

What is our substitute for the pivot?

It’s pretty simple, remember that we want the next bigger number, so we have to find the smallest digit (in the right part) that is larger than the pivot.

In this case, 6 is our substitute.

Reorder the right part

Now, to obtain the smallest number, we just reorder the right part, only after inserting our excluded pivot (5) and remove the substitute (6).

7621+5-6 = 7215 → reorder → 1257

Join the parts

215819 + 6 + 1257 = 21581961257

And that’s all!

The Javascript code

The best part is obviously the algorithm, but, here the code I wrote:

function nextBigger(n){
  var d = n.toString().split('');

  // find the pivot, the point (from right) where i > i-1
  var p = -1;
  for (var i = d.length-1; i > 0; i--) {
    if (+d[i] > +d[i-1]) {
      p = i-1;
      break;
    }
  }

  // if we are unable to find the pivot, skip
  if (p == -1) return p;

  // splice the digits in the pivot
  var right = d.splice(p);

  // extract pivot
  var pv = right.splice(0, 1)[0];

  // find the lowest number > pv
  var mm = null, mmi = null;
  for (var i = 0; i < right.length; i++) {
    if (right[i] > pv) {
      if (mm == null || right[i] < mm) {
        mm = right[i];
        mmi = i;
      }
    }
  }

  if (mmi == null) return -1;

  right.splice(mmi, 1);
  right.push(pv);
  right = right.sort();

  // concat the left + new pivot + right part
  var ret = +d.concat([mm]).concat(right).join('');
  if (ret < n) return -1;

  return ret;
}

What I learned hacking the Facebook Messenger Soccer game

Flavio De Stefano — Thu, 30 Jul 2020 10:07:09 +0000

Recently, during the last European Football Championship, Facebook introduced a little game in the Messenger app that makes you lose hours and hours despite its simplicity.

If you didn’t notice it, read this article on Mashable.

I have to admit… I totally suck at this game, so my best score was 9.

But, as a Developer, the best thing I could do was to beat my friends by hacking the game.

I really thought this would be simple.

First way: Listen to HTTP(s) requests

While developing apps, you immediately realize that you need an HTTP debugger tool to analyze incoming /outgoing traffic for your APIs.

Charles is the best tool I’ve found to accomplish this task. It has a very intuitive interface and you can easily use it for debugging and reverse engineering purposes.

It was supposed to end at this point: I would have to analyze the API that the Facebook app used and just replay it with CURL while editing the data and the score sent to the server.

Of course, the API calls are in HTTPS, so they’re encrypted.. but Charles can be used as a man-in-the-middle HTTPS proxy, * enabling you to view in plain text the communication between a web browser and SSL web server.

Perfect! So I installed the root Charles certificate on the iPhone, and I tried to inspect the traffic; but all HTTP calls to the Facebook servers were denied upfront during the SSL handshake phase.

Doing some research, I discovered that some company apps like Facebook and Google use an extra layer of security to ensure that the certificate provided by the remote server is the one that is expected; this technique is called Certificate Pinning.

You can easily do this by including the public key of the remote server certificate within the application so that it’s easy to validate the identity of the client for each HTTPS request.

This technique invalidates the Man in the Middle (MITM) Attack.

Great job Facebook! But…(remember, there’s always a but) there is a way to disable the SSL certificate pinning using some system tweaks only available on a jailbroken device.

The first way (enhanced): Jailbreak a device and install iOS SSL Kill Switch

My iPhone is currently running iOS 9.x, so at the time of this writing, it was impossible to jailbreak. So I took an old iPad mini running iOS 8.3.x and easily jailbroke it using the TaiG tool.

Searching on the web, I found SSL Kill Switch 2, a Blackbox tool to disable SSL certificate validation within iOS and OS X apps.

Once loaded into an iOS or OS X App, SSL Kill Switch 2 patches specific low-level SSL functions within the Secure Transport API in order to override, and disable the system’s default certificate validation as well as any kind of custom certificate validation (such as certificate pinning).

The SSL Kill Switch uses MobileSubstrate to patch system functions like the Secure Transport API. They are the lowest-level TLS implementation on iOS.

This means that disabling SSL certificate validation in the Secure Transport API should affect most (if not all) of the network APIs available within the iOS framework.

Please, do yourself a favor and follow this blog that covers all these concepts.

So, I connected to the iPad using SSH and installed the package:

wget [https://github.com/nabla-c0d3/ssl-kill-switch2/releases/download/0.10/com.nablac0d3.SSLKillSwitch2_0.10.deb](https://github.com/nabla-c0d3/ssl-kill-switch2/releases/download/0.10/com.nablac0d3.SSLKillSwitch2_0.10.deb) --no-check-certificate
dpkg -i [com.nablac0d3.SSLKillSwitch2_0.10.deb](https://github.com/nabla-c0d3/ssl-kill-switch2/releases/download/0.10/com.nablac0d3.SSLKillSwitch2_0.10.deb)
killall -HUP SpringBoard

Once rebooted, I expected to see the plain traffic, but it was an optimistic vision: I got the same errors.

I tried this way for another hour. I read somewhere that Facebook and Twitter use the SPDY protocol for their API calls, and this could be a problem for Charles. So I installed another tweak that (theoretically) disabled the SPDY protocol, but it didn’t work.

Starving.

Looking at the project issues, I noticed that someone else had the same problem (https://github.com/nabla-c0d3/ssl-kill-switch2/issues/13), with no resolution.

Pause.

Second way: simulate touch events within the application

I realized that there are many game cheats that use a “human” approach: simulate touch events (one of the most popular games that many game cheats utilize this strategy on is Clash of Clans).

Browsing the web for a tool that automates these operations, I found this awesome tweak - AutoTouch. It can record human touch events and store the data in a LUA script. You can then edit this produced script and simulate whatever you want anywhere on your device.

Once installed with Cydia, I saved a BMP screenshot of the Messenger application with the ball visible and obtained the coordinates of where to click.

Screenshot made to obtain the coordinate

What I thought is that, by clicking exactly in the center of the x-axis of the ball, I only had to simulate repetitive touch events in the same coordinates and then stop the script when I had a score that I was satisfied with.

Here’s what I wrote to accomplish this goal:

    adaptResolution(768, 1024);
    adaptOrientation(ORIENTATION_TYPE.PORTRAIT);

    for i=1,2000 do

      touchDown(1, 544, 954);
      usleep(66000);
      touchUp(1, 544, 954);

      usleep(10000);

    end

Nope, it didn’t work.

Probably, Facebook developers introduced a random error on touch coordinates to better simulate the game, or to prevent these type of scripts.

Or, maybe I just clicked at the wrong pixel.

So, for a second chance, I tried to simulate multiple clicks in a larger area, but without luck. Sometimes, I simulated so many touch events that the Springboard just crashed *because of memory errors.*

Instead of clicking on the same coordinates every time, I tried a better approach.

Reading the AutoTouch documentation, I found the following two methods:

findColor (color, count, region) - Search the coordinates of the pixel points matching the specified color on the current screen.
getColor (x, y) - Get the color value of the pixel point of the specified coordinate on the current screen.

The idea was to find a unique color inside the ball and use the findColor method to get the coordinates of the ball at that moment, to simulate a touch event.

    adaptResolution(768, 1024);
    adaptOrientation(ORIENTATION_TYPE.PORTRAIT);

    local c = getColor(544, 954);

    for i=1,2000 do
      local r = findColor(c, 0, {400, 500, 768, 1024});

      for i, v in pairs(r) do
        touchDown(1, v[1], v[2]);
        usleep(66000);
        touchUp(1, v[1], v[2]);
        usleep(10000);
      end

    end

I don’t know why, but it simply didn’t work. Maybe the findColor is too slow to intercept the ball, which then makes the script useless.

Third way: Reverse engineer the app

I don’t have good native skills in Objective C, but I remember (when I played with the jailbreak ~4 years ago) that there was a tool by Saurik that could inject itself into iOS processes.

It is released along with Cydia and was called Cycript. It allowed developers to explore and modify running applications on iOS, by injecting code at run time.

I read some basic tutorials on how to use it, and after a few struggles, I decided to follow this (another) way.

Once you login via SSH into your iOS device, you can easily attach to a process just by typing:

cycript -p Messenger

I tried to inspect some basic UI classes like UIApp, but didn’t find anything interesting. Then I made a complete class dump, filtering it for the keyword soccer.

var C = Object.keys(ObjectiveC.classes);
var soccer_classes = []; 
for (var i = 0; i < C.length; i++)
   C[i].match(/soccer/i) && soccer_classes.push( C[i] );

It was a slow process.

I discovered that Facebook Messenger has a very large number of classes.

But, in the end, I got a small list.

Once I obtained the class names, I used a script to print all methods of the class, and, by inspecting the MNSoccerGame class, the resulting methods were:

Note: I still don’t understand what is the method wasCheatDetected.

Now that I had a complete list of the class methods, I decided to override the *_setScore *method, hoping that other methods didn’t notice that.

To do this, I used the MobileSubstrate and its MS.hookMessage method.

@import com.saurik.substrate.MS; 

var _setScore_pointer = {}; 
MS.hookMessage(MNSoccerGame, @selector(_setScore:), function(arg0) {
      return _setScore_pointer->call(this, 9999); 
}, _setScore_pointer);

Now you can just play, lose, and anyway score a new record.

What I learned

Never stop yourself. Always try and discover a new way to accomplish the same thing. I know, it’s just a game, but if you treat the problem you’re trying to solve like a challenge, you’ll get much more than the satisfaction of beating your friends.

The hardware behind Otto: a monkey plush which became my vocal assistant

Flavio De Stefano — Thu, 30 Jul 2020 09:55:44 +0000

Otto is a monkey plush that we found in a highway store during a trip with my girlfriend in February 2017.

Its ability, while being extremely cute, was to listen to you, then walk and repeat all things with a higher pitch.

My goal was to make it more powerful by transforming it into a vocal assistant.

SkeletOtto and Otto

This is the first part of a series about Otto.

Originally, it was composed by the following hardware:

A motor connected to his legs for allowing him to walk
A simple, closed (for modifications), built-in board
A microphone and a speaker
A push button to start the listening phase
Four AA batteries
A switch to completely power off the circuit

I wanted to replace all these things with fresh and programmable hardware.

The real challenge here was to find the rights components that fitted in the original enclosure. The available space wasn’t much, so every choice had to be done conscientiously.

Base board

The preferred hardware for this project are Raspberry PI boards.

They are tiny and powerful enough to allow developers to use a high-level programming language and built-in libraries without flashing the software every-time.

Furthermore, you can debug your application in a more comfortable environment.

The best hardware at the time was the Raspberry Pi Zero W. Launched at the end of February 2017, the Pi Zero W has all the functionality of the original Pi Zero but with added connectivity.

Raspberry Pi Zero W

The board was not enough for such a project, so I added additional hardware.

Audio components

To build a vocal assistant, we need audio components. The requirements for these components are, of course, a speaker and a microphone.

For the microphone, I tried a USB microphone. The problem with this accessory was that it was not as sensible as I wished. Furthermore, an additional USB hub was required to connect it.

Moreover, I couldn’t connect a raw speaker easily.

For this reason, I opted to buy an additional board that accomplished this task very well: ReSpeaker 2-Mics Pi HAT.

ReSpeaker 2-Mics Pi HAT is a dual-microphone expansion board for Raspberry Pi designed for AI and voice applications.

The board is developed based on WM8960, a low power stereo codec. There are 2 microphones on both sides of the board for collecting sounds. It also provides 3 APA102 RGB LEDs, 1 User Button, and 2 on-board Grove interfaces.

I did not plan to connect LEDs to my board, but the fact that this HAT has built-in LEDs made me think to use them.

ReSpeaker 2-Mics Pi HAT — Hardware specifications

Then I took an old Bluetooth mini-speaker, disassembled it, and connected it to the JST 2.0 Speaker Out port.

To make it work, you have to install their drivers on your board. Drivers are also used to control LEDs within your application via a standard protocol.

ReSpeaker 2-Mics Pi HAT

Hint: when you install a shield, all your GPIO pins are covered. It’s useful to know which pins are **really used* by your board. To accomplish that, use https://pinout.xyz/*

For example, for this board, check out this link: https://pinout.xyz/pinout/respeaker_2_mics_phat

Powering the board

The Raspberry Pi board can be easily powered via USB 5V input. The problem with this approach is that you have to buy a battery pack and connect it via USB.

I didn’t find any battery pack small enough to fit my plush, then my unique alternative was using LiPo batteries.

LiPo Battery — 3.7V 2000mAh

You can’t connect your LiPo battery to your board, you have to use a converter. It can be powered by any 3.7V LiIon/LiPoly battery, and then it converts the battery output to 5.2V DC.

Initially, I bought a LiPo SHIM, but I didn’t notice that this controller provides power to your board without charging your batteries.

For this reason, I switched to Adafruit PowerBoost 500 Charger.** It has a built-in battery charger circuit. You’ll be able to keep your project running even while charging the battery!

Adafruit PowerBoost 500 Charger

Additional hardware

The software uses the “hot-word” concept to start the interaction. Basically, it continuously listens for a hot-word, like “Hey Otto”, then you just talk and say commands.

For having an alternative method to start the interaction, I installed a** push-button **connected directly to the GPIO board, at the GPIO8 pin.

Push button

Now only one thing was missing: the power on-off switch.

I connected this simple component to the PowerBoost Charger via its ENABLE port. The purpose of the ENABLE port is to disconnect the output completely.

Power on-off switch

Connect everything together

Here you can see in details the complete circuit diagram (https://www.circuit-diagram.org/circuits/0d85ce05)

Otto Circuit diagram

And here a snapshot of the work:

The hardware behind Otto