New side project: ArtBot, a way to create images using Stable Diffusion

Thanks to Reddit, I recently stumbled upon a cool project called Stable Horde. It essentially lets you generate images using a distributed cluster of GPUs donated by community members.

I had been creating my own web interface to remotely interact with a Stable Diffusion instance running on my own machine. I decided to quickly repurpose the web app and connect to the Stable Horde API. The result?

ArtBot, a Stable Diffusion demonstration that allows you to generate images using the power of the Stable Horde. It is awesome!

Quickly bootstrapping a new Node.js project

A problem that often happens to me: I get the inspiration to whip up something in Node.js  (for fun, for experimentation, for a side project, etc) but then I realize that I need to go through the process of actually setting things up before I can even start writing some code.

Usually, I have to dig through previous projects and copy over my eslint and prettier config files, read through some documentation and remember how to setup TypeScript again, install the correct dependencies for running tests. Before I know it, I’m bored and tired and no longer interested in doing whatever I was going to do.

I decided to experiment with some command line tools and created a Node.js script that can help me quickly bootstrap a new project with common configuration parameters that I use. It’s available on GitHub: Bootstrap Node Project.

The GIF above shows this tool in action. I’m able to get the scaffolding for a new project up and running within about 20 seconds! After running, the project structure looks like this (with associated npm start and test scripts, all ready to go). That is pretty awesome.

my-cool-project/
├─ .husky/
├─ node_modules/
├─ src/
│ ├─ index.js (.ts)
│ ├─ index.test.js (.ts)
├─ .eslintrc.json
├─ .gitignore
├─ .prettierrc
├─ package-lock.json
├─ package.json
├─ README.md
├─ tsconfig.json (optional)

Obviously, it’s highly opinionated and caters to configuration options that I personally like to use. But I figure it’s a great resource for anyone who wishes to roll their own utility to quickly bootstrap projects as well.

 

Creating an automated Twitter bot about gun violence

The school shooting in Uvalde last week was horrible. As a parent, I feel so powerless to protect my kids from something like that. Taking them to school the next day was extremely emotional.

It’s clear that we, as a country, are going to continue to do nothing about guns and gun violence. I channeled some of my emotion into building an automated bot for Twitter. I call it SABSStochastic Analysis for Ballistics Superfans (alternative title is “Second Amendment Bullshit”).

If you’re so technically inclined, you can download and run it yourself. Powered by Node and a fun little experiment into Twitter’s API.

It automatically replies to any congressional member who tweets.

Which of course includes unhinged Republicans.

A simple dark-mode hook for React

I recently wrote a simple hook for React to automatically detect a device’s dark mode preference (as well as any changes to it) and style your web app accordingly, using something like ThemeProvider from styled-components.

It was developed as part of a side project I was hacking around on using my personal React Starter Kit, which is my own React project for quickly getting prototypes and side projects up and running.

I’ve released this as a standard GitHub repo instead of an NPM module due to the simplicity of this hook, especially in light of one-line packages breaking the Internet. To use it, just copy it into your project where needed.

I’ve released this under an MIT license. Feel free to use as-is, fork, copy, tear apart, profit, and share as you wish.

You can check out the code on Github.

Emoji Say What?

Here’s a random little side project that I’ve been working on: Emoji Say What?

It’s like a game of telephone, but using the latest in human communication technologies, hieroglyphics, emoji!

Basically, you visit the site and get a completely out of context sentence or set of emoji and it’s your job to decipher it. And so on and so on. It evolves over time and eventually you get something like this.

nodeEbot: A bot for Twitter that generates tweets from pseudo Markov chains

Current Version: 0.1.4

Say hello to NodeEBot (pronounced as “nodey bot” or even “naughty bot”, if you prefer). It stands for Node E-books Bot.

It’s a Nodejs package for creating Twitter bots which can write their own tweets and interact with other users (by favoriting, replying, and following). This project draws heavy inspiration from the twitter_ebooks gem for Ruby.

You can see two examples of this bot in action at @daveleeeeee and @roboderp.

Installation and Usage

This project requires Nodejs v0.10.35+. If you’re looking for a place to host Nodejs projects, I’ve had success setting up a free Ubuntu virtual server through Amazon’s Web Services dashboard and installing nodejs on it.

To run, copy the project into your preferred directory and then install the required dependencies using:

npm install

You can edit various configuration settings in the bot.js file. Before you can begin you’ll need to have Twitter API credentials which can be setup right here. Once you have your consumer API key and secret as well as your access token and secret, add them to the top of the bot.js file:

// Twitter API configuration
var client = new Twitter({
  consumer_key: ‘xxxx’,
  consumer_secret: ‘xxxx’,
  access_token_key: ‘xxxx’,
  access_token_secret: ‘xxxx’
});

You’ll also need to add the Twitter username of your bot (without the @ symbol) to the config file. (This is for tracking mentions as well as making sure the bot ignores actions from itself so it doesn’t get caught in a loop).

// Your robot’s Twitter username (without the @ symbol)
// We use this to search for mentions of the robot and to prevent it from replying to itself
robotName = “xxxx”;

Once that’s done, the bot is almost ready to go. You can modify a few other settings that influence how chatty the bot is, how often it will interact with other users or use random hashtags and emojis.

In order to run the bot, I use the forever npm package. This allows us to automatically restart the server in case of a crash, as well as force restart the server in order to reload the Twitter stream (added in v 0.1.2).

Source material

The one last thing that you’ll need to do is give it some source material to generate text from. I use source material my own Twitter archive.

Right now, I haven’t implemented a way to parse the Twitter’s csv data that’s generated when you request your history. In the meantime, I’ve simply opened up the tweets.csv in a spreadsheet app, copied the contents of the ‘text’ column into a new file and used that as the source material. This script will treat each line as a separate and unique sentence.

I’ve added some basic ability to strip our Twitter usernames and URLs from the archive. That means it will treat something like:

@davely That’s great. I’ve seen something like that before. 
http://flickr.com/…

as

That’s great. I’ve seen something like that before.

Running multiple bots

If you want to run multiple bots for different Twitter accounts, copy this project into separate folders (e.g., ~/MyBot1, ~/MyBot2, ~/MyBot3, etc) and make sure you input the proper Twitter API credentials at the top of each bot.js file. Then spool up separate node instances and load up the relevant bot files.

Future things to do.

  • Better modularization of our script. Right now it’s in one ginormous .js file.
  • Turn it into a proper npm module.
  • Better regex handling to clean up source material (e.g., links, usernames, etc
  • Send direct messages back to users who DM our robot.
  • Keyword ranking of our source material. (Sort of implemented but disabled right now since performance is SLOW.)
  • Allow robot to reply with some content (e.g., if someone asks what it thinks about ‘baseball,’ it tries to compose a reply that mentions ‘baseball.’
  • Retweet various tweets that it finds interesting based on keywords and interests.
  • Let it potentially upload images or GIFs.

Changelog

v 0.1.4 (2015/05/07)

  • Simple change to load and require underscore. This is going to help simplify some of my functions in future development.

v 0.1.3 (2015/04/28)

  • Fixed bug that would cause bot to think that all users replying to it were found in our otherBots array and kept applying a temporary time out on replies, even if not needed.

v 0.1.2 (2015/04/27)

  • Implemented a hacky fix for an issue I’m having with the Twitter Streaming API randomly dying without an error. If we’re running this with the npm package forever, let’s kill the server and restart if ever few hours.

v 0.1.1 (2015/04/19)

  • Initial public release!

Other stuff

If you end up using this script in your own Twitter bots, let me know! I’d love to know how it works out for you and please let me know about any improvements or suggestions you might have.

Thanks for checking it out!

You can download the source code for nodeEbot on Github.

Weekend project: Building a web chat application with Node.js

screenshot

I’ve been playing around with Node.js recently and taking some of the neat online lessons available through Nodeschool. One of the lessons involved streaming realtime data between the client and server using Socket.io.

This sounded insanely powerful and fun, so I took a break from the rest of the lessons and started playing around with Socket.io. They have a tutorial that explains how to build a simple, realtime chat application using its library in about 20 minutes.

I’ve uploaded the results of this little project to Github and you can view it right here. This little web app is more or less a result of tutorial and I’ve added some additional stuff as I played around with it:

  • Usernames!
  • Number of active users!
  • Display a list of all connected users!
  • Check for identical usernames and prompt for different name
  • Timestamps on messages!
  • Sanitizing user input!
  • Properly autolink URLs!
  • Detect if a link to an image is pasted in and expand!
  • Display welcome message on connect

All in all, it’s been a really fun learning process and has given me some ideas on how to use Node.js for future realtime applications.

Note: You can see this in action on Heroku. You’ll probably be the only one only, but hey! https://davechat.herokuapp.com/

Baseball Twitter: Fun with the jQuery and Twitter’s API

screenshot_redsoxThis past weekend, I played around with jQuery, JavaScript, and Twitter’s API to create a web app that displays realtime search results for various baseball teams. I figure this is particularly important since pitchers and catchers report in about 10 days! 🙂

Anyway, the goal of this project was to rapidly build out a web app that could search and parse publicly available data (e.g., tweets!) for mentions of particular baseball teams while using various jQuery and JavaScript libraries. I could see this app having potentially wider uses beyond baseball such as returning the latest tweets from an event or hashtag. It also gave me a chance to use various libraries and frameworks as well. I’m pretty happy with how it turned out.

You can see it in action right here and the source code is available on Github.

 

GIFtv – Turn any display into a GIF picture frame

Our office has an empty TV that isn’t being properly utilized at the moment. It’s definitely a #FirstWorldProblem, but it basically boils down to the fact that we have multiple displays that act as dashboards for our various services and properties.

Anyway, we had a spare television available to show whatever we wanted. THE ENTIRE INTERNET WAS OUR OYSTER and what better way to put it to use than to display a random assortment of animated GIFs.

Our troubles arose when we realized we had to manually change out the animated GIFs, as well as zoom in in via the attached machine’s web browser so that it would properly display images.

Annoying, right?

The Solution

Cue superhero music

Some Javascript, CSS, and PHP came the the rescue!

We’re using CSS to set a background image (based on one of our animated GIFs) that fills up the entire display. Depending on the settings of your viewport, the image has the possibility of being severly cropped, but hey, whatever!

We’re using some Javascript calls (thank you so much, Stackoverlow) to display a new animated GIF every 20 seconds or so (or really, whatever time you want, but I’m using 20 seconds), as well as build an array of animated GIFs from our images folder.

Which brings us to PHP. We’re using PHP to scan the contents of the folder and then using some Jquery calls to periodically call our PHP script to rescan and rebuild the image array — this means you can drop new animated gifs into the /images folder (or remove them, but why would you even) and it will automagically add them to the Javascript array for random consideration.

Yes? Yes!

How to use

Upload this script to your favorite web server that supports PHP. Drop images (of the animated GIF variety) into the /images folder. Open up this page in your favorite browser on your favorite device. Cool? Cool!

Demo time

So, what the heck does this thing look like? You can see it in action right here. (Make sure to set your browser to full screen presentation mode so you get the right effect).

GIFtv: http://dave.ly/stuff/giftv/

To-do’s

  • Better error handling
  • Figure out how to get Dropbox integration working so the whole company can get in on the fun

Soft ‘g’ or hard ‘g’?

Hard G, dudes. It’s JIFF! I’m not wrong. You’re wrong.

Special Thanks

Thanks to a few people who helped me try and figure this out.

  • Conrad Muan (@conradmuan)
  • Lydia Katsamberis (@llkats)
  • Jon Ursenbach (@jonursenbach)

You can download the source code for GIFtv on Github.